/* strum-library.css — appearance for the strumming pattern library browser
 * (assets/js/suite/strum-library-ui.js).  Prefix: .strum-lib-  (see CLAUDE.md).
 * Structure/geometry lives in JS classes only; ALL appearance is here.
 * Dark-first, theme-safe via design tokens. */

.strum-lib {
  font-family: var(--font-ui, system-ui, sans-serif);
  color: var(--text-1, #ece6df);
  display: flex; flex-direction: column; gap: 16px;
}

/* ── Controls: search + tag chips ───────────────────────────────────────── */

.strum-lib-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px;
  background: var(--surface, #1c1a18);
  border: 1px solid var(--line, #322e2a);
  border-radius: 10px;
}

.strum-lib-search {
  appearance: none;
  background: var(--bg-1, #141210);
  color: var(--text-1, #ece6df);
  border: 1px solid var(--line, #322e2a);
  border-radius: 7px;
  padding: 7px 10px; font-size: 13px; line-height: 1.2;
  min-width: 180px;
}
.strum-lib-search:focus {
  outline: none;
  border-color: var(--accent, #e8874a);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 232, 135, 74), .35);
}

.strum-lib-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.strum-lib-chip {
  background: var(--bg-1, #141210);
  color: var(--text-2, #a89f95);
  border: 1px solid var(--line, #322e2a);
  border-radius: 999px;
  padding: 4px 11px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.strum-lib-chip:hover { color: var(--text-1, #ece6df); border-color: var(--text-2, #a89f95); }
.strum-lib-chip.is-on {
  background: var(--accent, #e8874a);
  border-color: var(--accent, #e8874a);
  color: var(--bg-1, #141210);
}

/* ── Screen-reader live region (visually hidden) ────────────────────────── */

.strum-lib-live {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Sections ───────────────────────────────────────────────────────────── */

.strum-lib-h {
  margin: 0 0 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-2, #a89f95);
}

/* Flex-wrap, not equal columns (owner ask 2026-07-17): card WIDTH follows the
 * rhythm's length so arrows render at ONE fixed optical scale on every card;
 * heights stay uniform per row (stretch) for vertical symmetry. */
.strum-lib-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
}

.strum-lib-empty { margin: 0; color: var(--text-2, #a89f95); font-size: 13px; }

/* ── Cards ──────────────────────────────────────────────────────────────── */

.strum-lib-card {
  display: flex; flex-direction: column; gap: 8px;
  flex: 0 1 auto;
  min-width: 200px;
  max-width: 100%;
  padding: 10px;
  background: var(--surface, #1c1a18);
  border: 1px solid var(--line, #322e2a);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.strum-lib-card:hover { border-color: var(--text-2, #a89f95); }
.strum-lib-card:focus-visible {
  outline: none;
  border-color: var(--accent, #e8874a);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 232, 135, 74), .35);
}
.strum-lib-card.is-current { border-color: var(--accent, #e8874a); }

/* Thumbnail sits in a white rounded box — exported SVG styles assume a white
 * background.  The SVG scales responsively to the card width. */
/* Fixed-height thumb zone: every SVG renders at the same height (same
 * px-per-beat scale since all thumbs share one layout), width follows the
 * pattern length.  --strum-lib-thumb-h is switched by the S/M/L control. */
.strum-lib {
  --strum-lib-thumb-h: 108px;
}
.strum-lib.strum-lib--s { --strum-lib-thumb-h: 60px; }
.strum-lib.strum-lib--l { --strum-lib-thumb-h: 116px; }
.strum-lib-thumb {
  background: #ffffff;
  border-radius: 8px;
  padding: 6px 10px;
  overflow: hidden;
  height: calc(var(--strum-lib-thumb-h) + 12px);
  display: flex; align-items: center; justify-content: center;
}
.strum-lib-thumb svg { height: var(--strum-lib-thumb-h); width: auto; max-width: 100%; display: block; }
.strum-lib-thumb-fallback {
  display: flex; align-items: center; justify-content: center;
  height: var(--strum-lib-thumb-h);
  color: #b6aca2; font-size: 24px;
}

.strum-lib-body { display: flex; flex-direction: column; gap: 5px; }
.strum-lib-name {
  font-size: 14px; font-weight: 700; color: var(--text-1, #ece6df);
  line-height: 1.25; min-height: 2.5em;   /* two-line reservation → pills/meta align across cards */
  display: flex; align-items: flex-end;
}
.strum-lib-meta { font-size: 12px; color: var(--text-2, #a89f95); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.strum-lib-pills { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; }
.strum-lib-pill {
  background: var(--bg-1, #141210);
  color: var(--text-2, #a89f95);
  border: 1px solid var(--line, #322e2a);
  border-radius: 999px;
  padding: 1px 8px; font-size: 11.5px; font-weight: 600;
}

/* ── Card actions ───────────────────────────────────────────────────────── */

.strum-lib-actions { display: flex; gap: 6px; margin-top: auto; }
.strum-lib-btn {
  background: var(--bg-1, #141210);
  color: var(--text-1, #ece6df);
  border: 1px solid var(--line, #322e2a);
  border-radius: 7px;
  padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.strum-lib-btn:hover { border-color: var(--text-2, #a89f95); }

.strum-lib-use {
  background: var(--accent, #e8874a);
  border-color: var(--accent, #e8874a);
  color: var(--bg-1, #141210);
}
.strum-lib-use:hover { border-color: var(--accent, #e8874a); filter: brightness(1.08); }

.strum-lib-del:hover { color: #e06a5a; border-color: #e06a5a; }
.strum-lib-del.is-armed {
  background: #e06a5a;
  border-color: #e06a5a;
  color: var(--bg-1, #141210);
}

/* ── UI polish 2026-07-17: chips share a consistent height with the search
 * field so the filter row sits on one line. ── */
.strum-lib-chip { min-height: 28px; display: inline-flex; align-items: center; }
.strum-lib-search { height: var(--strum-ctl-h, 34px); box-sizing: border-box; }


/* Card-size slider (continuous resize; fixed-scale thumbs zoom together). */
.strum-lib-size { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.strum-lib-size-cap {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-2, #a89f95); white-space: nowrap;
}
.strum-lib-size-slider { width: 140px; accent-color: var(--accent, #e8874a); }
.strum-lib-controls { align-items: center; }

/* Fingerstyle (tab) thumbnails: a tab staff is denser than an arrow chart, so
 * it fills the full thumb zone instead of the arrows' fixed height — reads at
 * a comparable optical size without breaking the uniform zone height. */
.strum-lib-thumb--tab svg { height: calc(var(--strum-lib-thumb-h) + 12px); }