/* strum-style-picker.css — visual Style + Grid-lines picker for the strumming
 * editor (consolidates the old Style dropdown + Grid-lines dropdown).
 * Structure/behaviour lives in assets/js/suite/strum-style-picker.js; ALL
 * appearance lives here using design tokens.  Prefix: .strum-sp-.
 * Dark-first, theme-safe (see CLAUDE.md).  The thumbnails themselves are
 * renderer-baked SVGs (templates carry their own bg) — they sit in white
 * rounded boxes with a neutral border so light templates stay legible on the
 * dark surface. */

.strum-sp {
  position: relative;
  display: inline-block;
  font-family: var(--font-ui, system-ui, sans-serif);
  color: var(--text-1, #ece6df);
}

/* ── Trigger: current style as live thumbnail + label ─────────────────── */
.strum-sp-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  background: var(--bg-1, #141210);
  color: var(--text-1, #ece6df);
  border: 1px solid var(--line, #322e2a);
  border-radius: 8px;
  font: inherit; font-size: 13px;
  cursor: pointer;
}
.strum-sp-trigger:hover { border-color: var(--accent, #e8874a); }
.strum-sp-trigger:focus-visible {
  outline: 2px solid var(--accent, #e8874a);
  outline-offset: 2px;
}
.strum-sp-trigger-thumb {
  display: block; width: 72px; overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line, #322e2a);
  border-radius: 5px;
}
.strum-sp-trigger-thumb svg { display: block; width: 100%; height: auto; }
.strum-sp-trigger-label {
  max-width: 140px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.strum-sp-trigger-caret { color: var(--text-2, #a89f95); font-size: 12px; }

/* ── Panel (class-toggled; no portal) ─────────────────────────────────── */
.strum-sp-panel {
  display: none;
  position: absolute; left: 0; top: calc(100% + 6px);
  z-index: var(--z-popover, 10050);
  min-width: 380px; max-width: min(560px, 92vw);
  max-height: 70vh; overflow: auto;
  padding: 12px;
  background: var(--surface, #1c1a18);
  border: 1px solid var(--line, #322e2a);
  border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 10px 32px rgba(0, 0, 0, 0.45));
}
.strum-sp.is-open .strum-sp-panel {
  display: block;
  animation: strum-sp-in 120ms ease-out;
}
@keyframes strum-sp-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .strum-sp.is-open .strum-sp-panel { animation: none; }
}

.strum-sp-section + .strum-sp-section { margin-top: 14px; }
.strum-sp-section-title {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-2, #a89f95);
  margin-bottom: 8px;
}

/* ── Style cards ──────────────────────────────────────────────────────── */
.strum-sp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.strum-sp-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 6px;
  background: var(--bg-1, #141210);
  color: var(--text-1, #ece6df);
  border: 1px solid var(--line, #322e2a);
  border-radius: 8px;
  font: inherit; font-size: 12px;
  text-align: center;
  cursor: pointer;
}
.strum-sp-card:hover { border-color: var(--accent, #e8874a); }
.strum-sp-card:focus-visible {
  outline: 2px solid var(--accent, #e8874a);
  outline-offset: 2px;
}
.strum-sp-card.is-on {
  border-color: var(--accent, #e8874a);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 232, 135, 74), .45);
}

/* Thumbnails render on WHITE rounded boxes: templates carry their own bg, so
 * the box only supplies a checker-neutral frame around light + dark styles. */
.strum-sp-thumb {
  display: block; overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line, #322e2a);
  border-radius: 6px;
}
.strum-sp-thumb svg { display: block; width: 100%; height: auto; }

/* Neutral fallback card — custom style with no reachable descriptor. */
.strum-sp-thumb--empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px;
  background: var(--surface, #1c1a18);
  color: var(--text-2, #a89f95);
  font-size: 16px; font-weight: 700;
}

.strum-sp-card-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Grid-line chips ──────────────────────────────────────────────────── */
.strum-sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.strum-sp-chip {
  padding: 4px 10px;
  background: var(--bg-1, #141210);
  color: var(--text-1, #ece6df);
  border: 1px solid var(--line, #322e2a);
  border-radius: 999px;
  font: inherit; font-size: 12px;
  cursor: pointer;
}
.strum-sp-chip:hover { border-color: var(--accent, #e8874a); }
.strum-sp-chip:focus-visible {
  outline: 2px solid var(--accent, #e8874a);
  outline-offset: 2px;
}
.strum-sp-chip.is-on {
  background: var(--accent, #e8874a);
  border-color: var(--accent, #e8874a);
  color: #1a1208;
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.strum-sp-foot {
  margin-top: 14px; padding-top: 10px;
  border-top: 1px solid var(--line, #322e2a);
  display: flex; justify-content: flex-end;
}
.strum-sp-tune {
  padding: 6px 12px;
  background: var(--surface, #1c1a18);
  color: var(--text-1, #ece6df);
  border: 1px solid var(--line, #322e2a);
  border-radius: 8px;
  font: inherit; font-size: 12px;
  cursor: pointer;
}
.strum-sp-tune:hover { border-color: var(--accent, #e8874a); }
.strum-sp-tune:focus-visible {
  outline: 2px solid var(--accent, #e8874a);
  outline-offset: 2px;
}

/* ── Style SETTINGS panel additions (strum-style-popover.js) ─────────────
 * NOT part of the .strum-sp- picker above (different component — the ⚙
 * settings panel behind the picker's gear button) — parked here per the
 * SP-image-settings task's file scope (strumming.css's .strum-ed-* rules
 * are frozen as-is; this is the one place new .strum-ed-stylepop-* rules
 * may land).  The panel's disclosure sections/inputs reuse strumming.css's
 * existing .strum-ed-disclose-*/.strum-ed-stylepop-* look; only the two
 * genuinely NEW bits (the live W×H readout, the inline hint text) need
 * their own rule here. */
.strum-ed-stylepop-readout {
  font-size: 12px; font-weight: 600;
  color: var(--text-2, #a89f95);
  margin: -2px 0 4px;
}
.strum-ed-stylepop-hint {
  margin: 4px 0 0;
  font-size: 12px; font-style: italic;
  color: var(--text-2, #a89f95);
}