*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  color-scheme: dark;
  --bg: #0f1117;
  --surface: #171b24;
  --surface-elevated: #1f2430;
  --border: #2a3142;
  --text: #e8ecf4;
  --text-muted: #8b95a8;
  --accent: #6c8cff;
  --accent-hover: #8aa4ff;
  --record: #ff4d6d;
  --record-glow: rgba(255, 77, 109, 0.35);
  --success: #4ade80;
  --radius: 14px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(108, 140, 255, 0.12), transparent 28%),
    radial-gradient(circle at bottom right, rgba(255, 77, 109, 0.08), transparent 24%),
    var(--bg);
  color: var(--text);
}

.app {
  max-width: 820px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
  transition: opacity 0.22s ease;
}

/* Immersive Blind Listening: the normal SongSpark interface fades fully out
   (and is made `inert` from JS) the moment an evaluation begins, so the user
   psychologically enters a separate evaluation mode with nothing else to look
   at or interact with. The opaque overlay covers it; this also removes any
   subliminal peripheral cue during the cross-fade. */
.app.app-blinded {
  opacity: 0;
  pointer-events: none;
}

.header {
  margin-bottom: 2rem;
}

.header h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  letter-spacing: -0.03em;
}

.header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.header-dev-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Permanent Developer Mode toggle — OFF by default, no keyboard shortcut required. */
.dev-mode-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.85rem;
  user-select: none;
}
.dev-mode-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.dev-mode-toggle-track {
  position: relative;
  width: 2.1rem;
  height: 1.15rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border);
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}
.dev-mode-toggle-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: #cfd6e6;
  transition: transform 0.15s ease, background 0.15s ease;
}
.dev-mode-toggle input:checked + .dev-mode-toggle-track {
  background: rgba(108, 140, 255, 0.35);
  border-color: var(--accent);
}
.dev-mode-toggle input:checked + .dev-mode-toggle-track .dev-mode-toggle-thumb {
  transform: translateX(0.95rem);
  background: var(--accent);
}
/* Visible indicator whenever Developer Mode is ON — the toggle pill itself lights up. */
.dev-mode-toggle:has(input:checked) {
  border-color: rgba(108, 140, 255, 0.55);
  background: rgba(108, 140, 255, 0.1);
  color: var(--accent);
}

.subtitle {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.main {
  display: grid;
  gap: 1.25rem;
}

.card {
  background: linear-gradient(180deg, var(--surface-elevated), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.card h2 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.waveform {
  height: 72px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.waveform-bars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  padding: 0 1rem;
}

.waveform-bar {
  width: 4px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0.35;
  height: 12px;
  transition: height 0.08s ease, opacity 0.08s ease;
}

.waveform.is-recording .waveform-bar {
  opacity: 0.9;
}

.timer {
  font-variant-numeric: tabular-nums;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.72rem 1.15rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn:not(:disabled):hover {
  transform: translateY(-1px);
}

.btn-record {
  background: var(--record);
  color: white;
  box-shadow: 0 0 0 0 var(--record-glow);
}

.btn-record:not(:disabled):hover {
  background: #ff6682;
}

.btn-record.is-recording {
  animation: pulse 1.4s infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--record-glow);
  }
  50% {
    box-shadow: 0 0 0 10px transparent;
  }
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.btn-secondary:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: #3a4358;
}

.btn-primary {
  background: var(--accent);
  color: #0f1117;
}

.btn-primary:not(:disabled):hover {
  background: var(--accent-hover);
}

.btn-icon {
  margin-right: 0.35rem;
}

.status {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.timeline-card h2 {
  margin-bottom: 0.75rem;
}

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.timeline-header h2 {
  margin: 0;
}

.timeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline-step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.55rem 0.35rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.88rem;
}

.timeline-step.is-latest {
  border-color: rgba(108, 140, 255, 0.55);
  background: rgba(108, 140, 255, 0.12);
}

.timeline-step.is-playing {
  box-shadow: inset 0 0 0 1px rgba(108, 140, 255, 0.25);
}

.timeline-step::after {
  content: "→";
  margin: 0 0.45rem;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.timeline-step:last-child::after {
  content: none;
}

.timeline-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

.timeline-step--original .timeline-tag {
  color: var(--record);
  background: rgba(255, 77, 109, 0.12);
}

.timeline-step--ai_continuation .timeline-tag {
  color: var(--accent);
  background: rgba(108, 140, 255, 0.15);
}

.timeline-step--reperformance .timeline-tag {
  color: var(--success);
  background: rgba(74, 222, 128, 0.12);
}

.timeline-label {
  white-space: nowrap;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-play {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.1rem 0.25rem;
  font-size: 0.72rem;
  line-height: 1;
  border-radius: 4px;
}

.timeline-play:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.pending-reference {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(108, 140, 255, 0.35);
  background: rgba(108, 140, 255, 0.08);
}

.pending-label {
  margin: 0 0 0.45rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.pending-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 600;
}

.continuations-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.continuations-header h2 {
  margin: 0;
}

.continuations-empty {
  color: var(--text-muted);
  padding: 1.25rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
  text-align: center;
  line-height: 1.5;
}

.continuations-list {
  display: grid;
  gap: 0.85rem;
}

.continuation-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--border);
}

.continuation-badge {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(108, 140, 255, 0.15);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
}

.continuation-meta {
  min-width: 0;
}

.continuation-title {
  margin: 0 0 0.25rem;
  font-weight: 600;
}

.continuation-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.continuation-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  margin-top: 0.55rem;
}

.continuation-wave span {
  display: block;
  width: 3px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0.55;
}

.continuation-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-small {
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
}

.continuation-item.is-playing {
  border-color: rgba(108, 140, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(108, 140, 255, 0.2);
}

@media (max-width: 640px) {
  .continuations-header {
    flex-direction: column;
    align-items: stretch;
  }

  .continuation-item {
    grid-template-columns: auto 1fr;
  }

  .continuation-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* ── Metronome ─────────────────────────────────────────────────────────── */

.recorder-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.recorder-top h2 {
  margin: 0;
  line-height: 1.3;
}

/* ── Practice Session lifecycle (Milestone 3) ────────────────────────────────── */
.practice-session-start {
  margin-bottom: 0.85rem;
}

/* Scoped to :not([hidden]) — an author `display` rule always beats the
   browser's built-in `[hidden] { display: none }`, so an unconditional
   `display: flex` here would keep the bar visible even when JS sets
   `.hidden = true` (see the dev-overlay fix above for the same pitfall). */
.practice-session-bar:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: rgba(108, 140, 255, 0.1);
}

.practice-session-info {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.practice-session-label {
  font-weight: 600;
  color: var(--text);
}

.practice-session-timer {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.practice-session-count {
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* ── Metronome control panel ─────────────────────────────────────────────────── */
.metronome-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.5rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(127, 127, 127, 0.05);
}

.metronome-primary {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.metronome-beat {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}

/* Beat flashes are re-triggered per beat from JS (class removed then re-added in
   sync with the click's audio time). Beat 1 pulses stronger/larger. */
.metronome-beat.is-active {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: beat-pulse 0.1s ease-out;
}

.metronome-beat.is-downbeat {
  background: var(--record);
  box-shadow: 0 0 18px var(--record-glow);
  animation: beat-pulse-strong 0.15s ease-out;
}

@keyframes beat-pulse        { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes beat-pulse-strong { 0% { transform: scale(1.9); }  100% { transform: scale(1); } }

.metronome-readout {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 5rem;
}

/* The BPM value is a real input (tap/click to edit) but reads as plain text
   until focused, so it doesn't look like a typical form field at rest. */
.bpm-display-input {
  width: 3.4ch;
  padding: 0;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: right;
  cursor: text;
}

.bpm-display-input:hover {
  border-bottom-color: var(--border);
}

.bpm-display-input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.bpm-display-input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.bpm-unit {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
}

.metronome-startstop {
  margin-left: auto;
  white-space: nowrap;
}

.metronome-startstop.is-on {
  border-color: rgba(108, 140, 255, 0.55);
  color: var(--accent);
  background: rgba(108, 140, 255, 0.12);
}

.bpm-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  outline: none;
  cursor: pointer;
  accent-color: var(--accent);
}

.bpm-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  transition: background 0.15s;
}

.bpm-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

.bpm-slider:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.metronome-fields {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.metronome-field {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.metronome-field-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.metronome-select {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.25rem 0.4rem;
  font-size: 0.82rem;
  cursor: pointer;
}

.metronome-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.metronome-select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* The native option list follows the OS theme; keep its text readable there. */
.metronome-select option {
  color: initial;
}

/* Lock indicator when BPM is locked to the session (after a recording). */
.metronome-panel.is-locked .metronome-readout::after {
  content: " 🔒";
  font-size: 0.7rem;
  opacity: 0.6;
}

/* Developer Benchmark Generator (hidden dev-only tool) */
.dev-benchmark-card {
  border-style: dashed;
}

.dev-benchmark-group {
  margin-top: 1rem;
}

.dev-benchmark-group h3 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.dev-benchmark-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid var(--border);
  margin-bottom: 0.4rem;
}

.dev-benchmark-row.is-playing {
  border-color: rgba(108, 140, 255, 0.55);
}

/* Developer Benchmark Player (hidden dev-only tool) */
.dev-player-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1rem;
  margin-top: 0.75rem;
}

.dev-player-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.dev-player-field select,
.dev-player-field input {
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
}

.dev-player-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ── Developer Mode: Listening Benchmark ──────────────────────────────────── */

.dev-mode-badge {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 60;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: rgba(108, 140, 255, 0.15);
  color: var(--accent);
  border: 1px solid rgba(108, 140, 255, 0.4);
}

/*
  ROOT CAUSE FIX: previously this rule applied to `.dev-listening-overlay`/
  `.dev-dashboard-overlay` unconditionally, including `display: flex`. An
  author stylesheet rule always beats the browser's built-in
  `[hidden] { display: none }` rule regardless of selector specificity, so
  setting `element.hidden = true` in JS never actually hid these overlays —
  they stayed visually `display: flex` the whole time. Both overlays were
  therefore ALWAYS rendered, stacked on top of each other at the same
  z-index; the Dashboard (later in the DOM) painted over and captured all
  clicks for the Listening overlay underneath, and every Close button
  appeared to do nothing because the DOM property it toggled was never
  contradicting the CSS. Scoping this rule to :not([hidden]) makes the
  `hidden` attribute authoritative again: when present, no author rule
  touches `display`, so the browser's own `display: none` default applies.
*/
.dev-listening-overlay:not([hidden]),
.dev-dashboard-overlay:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  /* Fully opaque: during a blind evaluation the entire application behind the
     overlay must be visually inaccessible — no bleed-through of the Sparks
     cards, status text, or timeline. */
  background: rgb(6, 8, 14);
  overflow-y: auto;
}

.dev-listening-panel,
.dev-dashboard-panel {
  width: 100%;
  max-width: 720px;
  background: var(--bg, #0f1117);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  margin: auto;
  animation: dev-fade-in 0.16s ease;
}

@keyframes dev-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dev-listening-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}
.dev-listening-header h2 { margin: 0; }
.dev-listening-session-info {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  margin-right: auto;
  margin-left: 0.75rem;
}

.dev-listening-progress-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.dev-listening-progress-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.dev-listening-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.25s ease;
}
.dev-listening-progress-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.dev-listening-original {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 1.25rem;
  background: rgba(255, 255, 255, 0.03);
}
.dev-listening-playback { display: flex; gap: 0.4rem; }

.dev-listening-cards {
  display: grid;
  gap: 1rem;
}

.dev-listening-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.2s ease;
}
.dev-listening-card.is-complete { border-color: rgba(108, 140, 255, 0.5); }

.dev-listening-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.dev-listening-card-label {
  font-weight: 700;
  font-size: 1.05rem;
}
.dev-listening-card-status {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.dev-listening-card.is-complete .dev-listening-card-status { color: var(--accent); }

.dev-listening-rating-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  margin-top: 0.75rem;
}
.dev-listening-rating-question {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.dev-listening-stars {
  display: flex;
  gap: 0.2rem;
}
.dev-listening-star {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.25);
  padding: 0 0.05rem;
  line-height: 1;
  border-radius: 4px;
}
.dev-listening-star.is-filled { color: #ffc94d; }
.dev-listening-star:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dev-listening-slider-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.dev-listening-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.dev-listening-yesno { display: flex; gap: 0.5rem; }
.dev-listening-yesno button.is-selected { background: var(--accent); color: #fff; border-color: var(--accent); }

.dev-listening-notes {
  width: 100%;
  min-height: 2.4rem;
  resize: vertical;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  padding: 0.5rem 0.6rem;
  font: inherit;
}

.dev-listening-decide { margin-top: 1.25rem; text-align: center; }
.dev-listening-decide-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 0.75rem;
}
.dev-listening-decide-buttons button { min-width: 4.5rem; }

.dev-listening-trophy {
  text-align: center;
  font-size: 2.4rem;
  margin: 0.5rem 0;
  animation: dev-trophy-pop 0.35s ease;
}
@keyframes dev-trophy-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

.dev-listening-reveal,
.dev-listening-summary {
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
  animation: dev-fade-in 0.2s ease;
}
.dev-listening-reveal dl,
.dev-dashboard-stats dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 1rem;
  margin: 0;
}
.dev-listening-reveal dt,
.dev-dashboard-stats dt { color: var(--text-muted); }
.dev-listening-reveal dd,
.dev-dashboard-stats dd { margin: 0; }

.dev-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.dev-dashboard-stat-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
.dev-dashboard-stat-card h4 {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dev-dashboard-stat-card .value { font-size: 1.4rem; font-weight: 700; }

.dev-dashboard-section { margin-bottom: 1.25rem; }
.dev-dashboard-section h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.dev-dashboard-bar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
}
.dev-dashboard-bar-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.dev-dashboard-bar-fill { height: 100%; background: var(--accent); }

/* ── Developer Testing Mode v1 — toolbar + rapid-iteration UI ─────────────── */

.dev-listening-next-row {
  margin-top: 1rem;
  text-align: center;
  animation: dev-fade-in 0.2s ease;
}
.dev-listening-next-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
}
.dev-listening-next-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Sequential blind phase: advance-to-next-sample control. */
.dev-listening-advance-row {
  margin-top: 1rem;
  text-align: center;
}

.continuations-card.is-generating {
  animation: dev-generating-pulse 1.2s ease-in-out infinite;
}
@keyframes dev-generating-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

.dev-toolbar:not([hidden]) {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  background: rgba(10, 12, 18, 0.92);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(6px);
}

.dev-toolbar-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dev-toolbar-progress {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.dev-toolbar-progress-title {
  font-weight: 700;
  color: var(--accent);
}

/* Leave room at the bottom of the page so the fixed toolbar never covers
   the last card while Developer Mode is on. */
body:has(.dev-toolbar:not([hidden])) .app {
  padding-bottom: 4.5rem;
}

/* ── Public build (Release 1 "Understand Me") ──────────────────────────────
   Authoritative hide for every non-Release-1 surface. Set by applyPublicBuild()
   in app.js when PUBLIC_BUILD is true. Uses `!important` because some targets
   (e.g. .header-dev-controls) declare their own `display` and would otherwise
   override the `hidden` attribute. Generation returns in R3; dev tooling is
   internal-only. Remove the root class (flip PUBLIC_BUILD) to restore them. */
.public-build .header-dev-controls,
.public-build #continuationsCard,
.public-build #devBenchmarkCard,
.public-build #devBenchmarkPlayerCard,
.public-build #devModeBadge,
.public-build #devListeningOverlay,
.public-build #devDashboardOverlay,
.public-build #devToolbar {
  display: none !important;
}

/* ── "What I Heard" — Reflection panel (R1 · M1) ─────────────────────────────── */
.reflection-card {
  border-color: var(--accent);
  animation: reflection-in 0.35s ease-out;
}

@keyframes reflection-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reflection-title {
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.reflection-headline {
  margin: 0 0 1rem;
  font-size: 1.35rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--text);
}

.reflection-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.reflection-line {
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--text);
  padding-left: 0.9rem;
  border-left: 2px solid var(--border);
}

.reflection-memorable {
  margin: 1rem 0 0;
  font-size: 1.05rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--accent);
}

.reflection-actions {
  margin-top: 1.5rem;
}

/* Accuracy feedback (R1 · M2) */
.reflection-feedback {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.reflection-feedback-q {
  font-size: 0.95rem;
  color: var(--text-muted);
}

.reflection-feedback-buttons {
  display: flex;
  gap: 0.5rem;
}

.feedback-btn.is-selected {
  border-color: var(--accent);
  background: rgba(108, 140, 255, 0.15);
  color: var(--text);
}

.reflection-feedback-thanks {
  font-size: 0.9rem;
  color: var(--success);
}

/* ── Practice Progress (progression.js) — the arrival return-hook ────────────── */
.progress-card {
  text-align: center;
}

.progress-streak {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
}

.progress-streak-flame {
  font-size: 1.8rem;
}

.progress-streak-number {
  font-size: 3rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.progress-streak-unit {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
}

.progress-streak-status {
  margin: 0.5rem 0 1.25rem;
  font-size: 0.95rem;
  color: var(--text);
}

.progress-week {
  margin-bottom: 1.25rem;
}

.progress-week-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  overflow: hidden;
}

.progress-week-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.4s ease;
}

.progress-week-fill.is-complete {
  background: var(--success);
}

.progress-week-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}

.progress-week-text {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.progress-goal-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.progress-goal-btn {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.progress-goal-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.progress-achievements {
  text-align: left;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}

.progress-achievements-summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  list-style-position: inside;
}

.progress-ach-count {
  color: var(--text-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.progress-achievement-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.progress-achievement {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.progress-achievement-mark {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.progress-achievement.is-earned .progress-achievement-mark {
  background: var(--accent);
  color: #fff;
}

.progress-achievement.is-locked .progress-achievement-mark {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.progress-achievement-body {
  display: flex;
  flex-direction: column;
}

.progress-achievement-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.progress-achievement.is-locked .progress-achievement-label {
  color: var(--text-muted);
}

.progress-achievement-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ── Post-session Progress delta (inside the Practice Summary) ───────────────── */
.session-progress-delta {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 1rem;
  border-radius: 10px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  display: grid;
  gap: 0.6rem;
}

.session-progress-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--text);
}

.session-progress-icon {
  font-size: 1.1rem;
}

/* ── Practice Summary (practice-companion pivot) ─────────────────────────────── */
.practice-summary-card {
  border-color: var(--accent);
  animation: reflection-in 0.35s ease-out;
}

.practice-summary-title {
  margin: 0 0 1.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Practice Score — the primary element of the Practice Summary ───────────── */
.practice-score {
  text-align: center;
  padding: 0.5rem 0 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.practice-score-label {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.practice-score-value {
  margin: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.practice-score-value #practiceScoreNumber {
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--accent);
}

.practice-score-max {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-muted);
}

.practice-achievement {
  margin: 0.6rem 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

/* ── Category Scores — Timing / Consistency / Focus / Effort ────────────────── */
.practice-categories {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.practice-category {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
}

.practice-category:last-child {
  border-bottom: none;
}

.practice-category-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.practice-category-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.practice-category-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  white-space: nowrap;
}

.practice-category-explanation {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ── Improvement Opportunity — at most one, plain factual line ───────────────── */
.practice-improvement {
  margin: 1.25rem 0 0;
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text);
}

.practice-metrics {
  margin: 0;
  padding: 0;
}

.practice-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--border);
}

.practice-metric:last-child {
  border-bottom: none;
}

.practice-metric-label {
  margin: 0;
  font-size: 0.98rem;
  color: var(--text-muted);
}

.practice-metric-value {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.practice-summary-status {
  margin: 1.5rem 0 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.practice-summary-actions {
  margin-top: 1.5rem;
}

/* ── Idea Library (R1 · M2) ──────────────────────────────────────────────────── */
.library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.library-notice {
  margin: 0.25rem 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ── Practice History — lifetime stats row ───────────────────────────────────── */
.history-stats {
  display: flex;
  gap: 0.75rem;
  margin: 0.75rem 0 0;
}

.history-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.75rem 0.5rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.18);
  text-align: center;
}

.history-stat-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.history-stat-label {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.library-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.library-item {
  padding: 0.9rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.18);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.library-item.is-current {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(108, 140, 255, 0.25);
}

.library-item.is-playing {
  border-color: rgba(108, 140, 255, 0.55);
}

.library-item-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.library-item-title {
  font-weight: 600;
  color: var(--text);
}

.library-item-badge {
  font-size: 0.9rem;
  line-height: 1;
}

.library-item-meta {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.library-item-preview {
  margin: 0.5rem 0 0;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--text);
}

.library-item-actions {
  margin-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.library-item-delete:not(:disabled):hover {
  border-color: var(--record);
  color: var(--record);
}

/* ── Practice History (Milestone 3) — day groups ─────────────────────────────── */
.history-day {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.history-day-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0.85rem 1rem;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.history-day-header:disabled {
  cursor: default;
}

.history-day-top-row {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.history-day-label {
  font-weight: 600;
  color: var(--text);
}

.history-day-score {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  white-space: nowrap;
}

.history-day-achievement {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.history-day-summary {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.history-day-items {
  list-style: none;
  margin: 0;
  padding: 0 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.history-day.is-expanded .history-day-header {
  border-bottom: 1px solid var(--border);
}