/* strum-practice.css — appearance for the strumming Practice panel
 * (assets/js/suite/strum-practice-ui.js).  ALL appearance lives here; the JS
 * only toggles classes (the meter fill width is data, set inline).
 * Prefix: .strum-pr-  (see CLAUDE.md).  Dark-first, token-driven, theme-safe. */

.strum-pr-panel {
  font-family: var(--font-ui, system-ui, sans-serif);
  color: var(--text-1, #ece6df);
  background: var(--surface, #1c1a18);
  border: 1px solid var(--line, #322e2a);
  border-radius: 10px;
  overflow: hidden;
}

/* ── Header row ─────────────────────────────────────────────────────────── */
.strum-pr-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 12px;
}
.strum-pr-cap {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-2, #a89f95);
}
.strum-pr-toggle {
  background: var(--bg-1, #141210);
  color: var(--text-1, #ece6df);
  border: 1px solid var(--line, #322e2a);
  border-radius: 7px;
  padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.strum-pr-toggle:hover { border-color: var(--text-2, #a89f95); }
.strum-pr-panel.is-open .strum-pr-toggle { border-color: var(--accent, #e8874a); }

/* ── Body / blocks ──────────────────────────────────────────────────────── */
.strum-pr-body {
  display: flex; flex-direction: column; gap: 12px;
  padding: 0 12px 12px;
  border-top: 1px solid var(--line, #322e2a);
}
.strum-pr-block {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding-top: 12px;
}
.strum-pr-block + .strum-pr-block { border-top: 1px solid var(--line, #322e2a); }

/* Shared field wrapper (mirrors .strum-ed-field). */
.strum-pr-field { display: flex; flex-direction: column; gap: 4px; }
.strum-pr-field-label {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-2, #a89f95);
}
.strum-pr-select, .strum-pr-ramp-target {
  appearance: none;
  background: var(--bg-1, #141210);
  color: var(--text-1, #ece6df);
  border: 1px solid var(--line, #322e2a);
  border-radius: 7px;
  padding: 7px 9px; font-size: 13px; line-height: 1.2;
}
.strum-pr-select { padding-right: 24px; cursor: pointer; }
.strum-pr-ramp-target { width: 64px; font-variant-numeric: tabular-nums; }
.strum-pr-select:focus, .strum-pr-ramp-target:focus {
  outline: none;
  border-color: var(--accent, #e8874a);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 232,135,74), .35);
}

/* Buttons & toggles. */
.strum-pr-btn, .strum-pr-tgl {
  background: var(--bg-1, #141210);
  color: var(--text-1, #ece6df);
  border: 1px solid var(--line, #322e2a);
  border-radius: 7px;
  padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.strum-pr-btn:hover, .strum-pr-tgl:hover {
  background: var(--surface, #1c1a18);
  border-color: var(--text-2, #a89f95);
}
.strum-pr-tgl.is-on {
  border-color: var(--accent, #e8874a);
  color: var(--accent, #e8874a);
  background: var(--surface, #1c1a18);
}

/* ── Tempo block ────────────────────────────────────────────────────────── */
.strum-pr-bpm {
  display: flex; align-items: baseline; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.strum-pr-bpm-val {
  font-size: 34px; font-weight: 700; line-height: 1;
  color: var(--text-1, #ece6df);
  font-variant-numeric: tabular-nums;
}
.strum-pr-bpm-cap {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-2, #a89f95);
}
.strum-pr-ramp { display: flex; align-items: flex-end; gap: 8px; }
.strum-pr-ramp-copy { font-size: 12px; color: var(--text-2, #a89f95); white-space: nowrap; }

/* ── Tap-along block ────────────────────────────────────────────────────── */
.strum-pr-pad {
  background: var(--bg-1, #141210);
  color: var(--text-1, #ece6df);
  border: 2px solid var(--line, #322e2a);
  border-radius: 12px;
  min-width: 110px; min-height: 64px;
  font-size: 16px; font-weight: 700; letter-spacing: .12em;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.strum-pr-pad:hover { border-color: var(--text-2, #a89f95); }
.strum-pr-pad:active {
  border-color: var(--accent, #e8874a);
  background: var(--surface, #1c1a18);
}

/* Accuracy meter: fill width = inPocketPct (set from JS as data). */
.strum-pr-meter {
  flex: 1 1 140px; height: 10px; min-width: 120px;
  background: var(--bg-1, #141210);
  border: 1px solid var(--line, #322e2a);
  border-radius: 999px;
  overflow: hidden;
}
.strum-pr-meter-fill {
  height: 100%; width: 0;
  background: var(--muted, #a89f95);
  border-radius: inherit;
  transition: width .25s ease, background-color .25s ease;
}
.strum-pr-meter.is-good .strum-pr-meter-fill { background: var(--ok, #2ecc71); }
.strum-pr-meter.is-mid  .strum-pr-meter-fill { background: var(--warn, #b8842a); }
.strum-pr-meter.is-bad  .strum-pr-meter-fill { background: var(--danger, #e74c3c); }

/* Last-16 tap dots, graded. */
.strum-pr-dots { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.strum-pr-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--line, #322e2a);
}
.strum-pr-dot.is-perfect { background: var(--ok, #2ecc71); }
.strum-pr-dot.is-good    { background: var(--ok, #2ecc71); opacity: .55; }
.strum-pr-dot.is-off     { background: var(--warn, #b8842a); }
.strum-pr-dot.is-miss {
  background: transparent;
  border: 1.5px solid var(--danger, #e74c3c);
}

/* Verdict line. */
.strum-pr-verdict {
  flex-basis: 100%;
  margin: 0; font-size: 13px;
  color: var(--text-2, #a89f95);
  font-variant-numeric: tabular-nums;
}
.strum-pr-verdict.is-solid { color: var(--ok, #2ecc71); }
.strum-pr-verdict.is-rush,
.strum-pr-verdict.is-drag  { color: var(--warn, #b8842a); }

/* ── Reduced motion: no meter animation ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .strum-pr-meter-fill { transition: none; }
  .strum-pr-btn, .strum-pr-tgl, .strum-pr-pad { transition: none; }
}

/* ── UI polish 2026-07-17: uniform control height (matches the editor's
 * --strum-ctl-h) and a slightly taller meter so the empty track reads as a
 * meter, not a stray hairline. ── */
.strum-pr-select,
.strum-pr-ramp-target,
.strum-pr-btn,
.strum-pr-tgl {
  height: var(--strum-ctl-h, 34px);
  box-sizing: border-box;
  padding-top: 0; padding-bottom: 0;
}
.strum-pr-btn, .strum-pr-tgl { display: inline-flex; align-items: center; justify-content: center; }
.strum-pr-meter { height: 12px; }

/* ── UI polish round 2 (2026-07-17): one vertical line per row. ──
 * Field captions go BESIDE their control (not above), every control shares
 * --strum-ctl-h (incl. the tap pad on desktop — the mobile sheet re-enlarges
 * it), and rows centre on one midline so buttons, inputs, the BPM readout and
 * helper copy all sit level. */
.strum-pr-field { flex-direction: row; align-items: center; gap: 6px; }
.strum-pr-field-label { white-space: nowrap; }
.strum-pr-block { align-items: center; }
.strum-pr-ramp { align-items: center; }
.strum-pr-pad {
  height: var(--strum-ctl-h, 34px);
  min-height: 0;
  min-width: 96px;
  box-sizing: border-box;
  padding-top: 0; padding-bottom: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  border-width: 1px;
  border-radius: 7px;
}