/* legacy-v11.css — page-scoped alignment for the v7-era group
   (Listen / Forgotten / Character Studio / Audio lab).

   Loaded AFTER app.css so these rules win over the shared defaults without
   editing app.css or the char-studio system it owns. Everything here uses
   theme variables only (no hard-coded colours) and adds no ungated motion.
   Scoped by body[data-dsl-page='…'] (set by initChrome) so nothing leaks. */

/* ── Listen ──────────────────────────────────────────────────────────────── */
/* Status/now-playing lines are bare <p class="small-note"> with no margin
   reset, so the default UA paragraph margin (~12px, font-size based) was
   stacking on top of the builder panel's own `gap:10px` (app.css) — a ~23px
   gap above and ~35px between two one-line status announcements. Zeroing
   their margin leaves the panel's grid gap as the only spacing, matching
   the 10px rhythm every other row in the panel already uses. */
[data-dsl-page='listen'] #listenStatus,
[data-dsl-page='listen'] #listenNowPlaying {
  margin: 0;
}
/* Same idiom Study uses: a status line that is empty most of the time must cost
   nothing while empty. Content-gated with :empty rather than a state class, so
   it needs no JS change — these are filled by textContent alone. Measured 53px
   of permanent dead space here before this. */
[data-dsl-page='listen'] #listenStatus:empty,
[data-dsl-page='listen'] #listenNowPlaying:empty {
  padding: 0;
  border-width: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
/* `.chip-delete` (app.css) sets height:24px for a circular remove button, but
   the generic `button { min-height: 40px }` rule has no matching min-height
   override, so the used height resolves to 40px — a 24×40 pill instead of a
   24×24 circle. app.css already fixes this with a 44px touch target under
   `max-width:900px`; above that (and on a fine pointer, so the coarse-pointer
   44px floor is untouched) nothing restores the intended circle. */
@media (min-width: 901px) and (pointer: fine) {
  [data-dsl-page='listen'] .chip-delete {
    min-height: 24px;
  }
}
/* The "no phrases selected" / "no matches" placeholders are a single
   `<p class="muted">` with no box — plain leftover-looking text where the
   Assembly dropzone right above them already has a designed dashed empty
   slot. Give them the same treatment so all three empty moments on this
   page read as one system. */
[data-dsl-page='listen'] #selectedLoopList p.muted,
[data-dsl-page='listen'] #listenLibrary p.muted {
  display: grid;
  place-items: center;
  min-height: 84px;
  margin: 0;
  padding: var(--space-6);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel-2);
  color: var(--muted);
  text-align: center;
}

/* ── Forgotten review cards ─────────────────────────────────────────────── */
/* The word headline now reads as a sentence-focus display — serif hanzi with a
   muted pinyin line — instead of a flat "汉字 — pīnyīn" heading. */
[data-dsl-page='forgotten'] .forgotten-word-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-6);
  margin: 0;
  font-weight: 400;
}
[data-dsl-page='forgotten'] .forgotten-word-hanzi {
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-size: clamp(1.5rem, 4.2vw, 1.9rem);
  line-height: 1.1;
  font-weight: 600;
  color: var(--text);
}
[data-dsl-page='forgotten'] .forgotten-word-pinyin {
  font-size: var(--text-body);
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--accent) 60%, var(--text));
}
/* Sounds-like line: italic + quoted + muted, matching the Study / Add sentence card. */
[data-dsl-page='forgotten'] .forgotten-card-soundslike {
  margin: var(--space-3) 0 0;
}
[data-dsl-page='forgotten'] .forgotten-card-soundslike em {
  color: var(--muted);
}

/* ── Audio speed lab ────────────────────────────────────────────────────── */
/* The source fields previously carried inline styles with a hard-coded white
   fill (invisible in the day theme) and an off-system radius. They are plain
   text inputs now, so they inherit the shared input surface; we only keep a
   44px tap target and the single-column stack. */
[data-dsl-page='audio-speed-test'] .lab-field-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
[data-dsl-page='audio-speed-test'] .lab-src-input {
  min-height: 44px;
}
[data-dsl-page='audio-speed-test'] .lab-btn-row {
  flex-wrap: wrap;
  gap: var(--space-5);
}
[data-dsl-page='audio-speed-test'] .lab-rate-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}
[data-dsl-page='audio-speed-test'] .lab-rate-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: min(100%, 320px);
  flex: 1;
}
[data-dsl-page='audio-speed-test'] .lab-rate-field input[type='range'] {
  width: 100%;
}
[data-dsl-page='audio-speed-test'] .lab-status {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}