/* ── Practice ───────────────────────────────────────────────────────── */
  #screen-practice { overflow: hidden; }
  /* Top-aligned, not vertically centred: centring a short stem stranded the card
     in the middle of the viewport with a third of the screen empty above it, and
     made the question jump vertically as stem length changed between items. */
  .practice-body { flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: flex-start; padding: clamp(16px, 2.5vh, 32px) 24px 48px;
    gap: var(--sp-5); overflow-y: auto; }
  .problem-card { width: 100%; max-width: 720px; background: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius); padding: 36px 40px; }
  .problem-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
  .badge { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 4px 10px; border-radius: var(--radius); background: var(--surface);
    border: 1px solid var(--border); color: var(--muted); }
  .badge.gold { border-color: var(--gold-dim); color: var(--gold); }
  .badge.mathcounts { border-color: var(--teal-dim); color: var(--teal); background: var(--teal-bg); }
  .badge.sat { border-color: var(--purple-dim); color: var(--purple); background: var(--purple-bg); }
  .badge.reading { border-color: var(--green-line); color: var(--green); background: var(--green-bg); }
  .badge.subdomain { border-color: var(--subtle); color: var(--text); background: var(--surface);
    text-transform: uppercase; }
  .badge.retry { border-color: var(--gold-dim); color: var(--gold); background: var(--gold-bg); }
  .retry-hint { font-size: 12px; color: var(--muted); font-style: italic; margin: -14px 0 22px; }

  /* ── R&W passage + stem layout ──────────────────────────────────────── */
  .passage-block { margin: 12px 0 24px; padding: 20px 24px; background: var(--bs-sheet);
    border-left: 3px solid var(--gold-dim); border-radius: var(--radius);
    font-family: 'Lora', 'Iowan Old Style', 'Georgia', 'Times New Roman', serif;
    font-size: 17px; line-height: 1.75; color: var(--bs-ink-2);
    max-width: 660px; }
  .passage-block p { margin: 0 0 14px; }
  .passage-block p:last-child { margin-bottom: 0; }
  .passage-block .text-label { display: block; font-family: 'Inter', sans-serif;
    font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
  .passage-block .stimulus-block { display: block; margin: 12px 0; padding: 14px 18px;
    background: var(--bs-stock); border: 1px solid var(--subtle); border-radius: var(--radius);
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px; line-height: 1.55; color: var(--bs-ink-2);
    white-space: pre; overflow-x: auto; }
  .passage-block .stimulus-block .stim-title { display: block; font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
    white-space: normal; }
  .stem-block { font-size: 17px; line-height: 1.6; color: var(--text);
    margin-top: 4px; font-weight: 500; }
  .choices-grid.single-col { grid-template-columns: 1fr; }
  .choices-grid.single-col .choice-btn { padding: 14px 18px; font-size: 15px; line-height: 1.55; }

  /* ── Filter toggles ─────────────────────────────────────────────────── */
  .filter-row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
    margin-top: 20px; padding: 16px 20px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); }
  .filter-group { display: flex; flex-direction: column; gap: 8px; }
  .filter-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted); }
  .toggle-group { display: flex; gap: 4px; }
  .toggle-btn { padding: 6px 14px; border-radius: var(--radius); border: 1px solid var(--border);
    background: transparent; color: var(--muted); font-family: inherit; font-size: 12px;
    font-weight: 600; cursor: pointer; letter-spacing: 0.06em; transition: all 0.15s; }
  .toggle-btn:hover { color: var(--text); border-color: var(--subtle); }
  .toggle-btn.active { background: var(--gold-bg); border-color: var(--gold-dim); color: var(--gold); }
  .toggle-btn.active-teal { background: var(--teal-bg); border-color: var(--teal-dim); color: var(--teal); }
  .toggle-btn.active-purple { background: var(--purple-bg); border-color: var(--purple-dim); color: var(--purple); }

  /* Compact settings in topbar */
  .topbar-filters { display: flex; gap: 12px; align-items: center; }
  /* Per-track tint, moved off inline style= attributes so a theme layer can
     override it — an inline style beats every class selector. */
  .tb-tint-math { color: var(--purple); }
  .tb-tint-reading { color: var(--green); }
  .tb-tint-comp { color: var(--teal); }
  /* Mid-session serving knobs (subject / Mode / Bias / focus) are a staff QC
     tool. Students get them on the Home custom-practice card instead, so the
     question screen stays about the question. */
  body:not(.is-staff) #screen-practice .topbar-filters { display: none; }

  /* ── Session progress rail ─────────────────────────────────────────────────
     Session progress used to be a single line of bare numbers ("1/3 (item 1 of
     9)"). The rail shows the shape of the session: one segment per planned item,
     filled behind you, the current one lit. */
  .q-rail { flex-shrink: 0; padding: 10px 20px 12px; background: var(--surface);
    border-bottom: 1px solid var(--border); display: flex;
    flex-direction: column; gap: var(--sp-2); }
  /* Full-bleed bar, but its contents share the question column's 720px measure
     so the rail reads as part of the card rather than a browser loading bar. */
  .q-rail-head, .q-rail-track { width: 100%; max-width: 720px; margin: 0 auto; }
  .q-rail-head { display: flex; align-items: baseline; gap: var(--sp-3); }
  .q-rail-focus { font-size: var(--fs-micro); font-weight: 800;
    letter-spacing: var(--track-label); text-transform: uppercase;
    color: var(--muted); overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
  .q-rail-count { margin-left: auto; flex-shrink: 0; font-size: var(--fs-label);
    font-weight: 800; letter-spacing: 0.08em; color: var(--volt);
    font-variant-numeric: tabular-nums; text-transform: uppercase; }
  .q-rail-track { display: flex; gap: 3px; align-items: stretch; height: 4px; }
  .q-rail-seg { flex: 1; min-width: 2px; border-radius: var(--radius); background: var(--subtle);
    transition: background var(--dur), transform var(--dur) var(--ease-out); }
  .q-rail-seg.done { background: var(--volt-dim); }
  .q-rail-seg.correct { background: var(--volt); }
  .q-rail-seg.missed { background: var(--red); }
  .q-rail-seg.current { background: var(--gold); transform: scaleY(2.2); }
  /* Segment boundaries in a composed plan (warm-up | chain | chain). */
  .q-rail-seg.seg-start { margin-left: 9px; }
  .q-rail-seg.seg-start:first-child { margin-left: 0; }
  @media (max-width: 560px) { .q-rail { padding: 8px 14px 10px; } }
  .topbar-toggle { display: flex; gap: 2px; }
  .topbar-toggle-btn { padding: 4px 10px; border-radius: var(--radius); border: 1px solid var(--border);
    background: transparent; color: var(--muted); font-family: inherit; font-size: 11px;
    font-weight: 600; cursor: pointer; letter-spacing: 0.05em; transition: all 0.12s; }
  .topbar-toggle-btn:hover { color: var(--text); }
  .topbar-toggle-btn.active { background: var(--gold-bg); border-color: var(--gold-dim); color: var(--gold); }
  .topbar-toggle-btn.active-teal { background: var(--teal-bg); border-color: var(--teal-dim); color: var(--teal); }
  .topbar-toggle-btn.active-purple { background: var(--purple-bg); border-color: var(--purple-dim); color: var(--purple); }

  /* Streak pips */
  #stat-timer.timer-warn { color: var(--gold); }
  #stat-timer.timer-over { color: var(--red); }
  .q-timer { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted);
    font-variant-numeric: tabular-nums; letter-spacing: 0.05em; }
  .streak-pips { display: flex; gap: 4px; align-items: center; }
  .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: background 0.2s; }
  .pip.lit { background: var(--gold); }

  /* Motion */
  @keyframes slideInRight { from { transform: translateX(52px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
  @keyframes slideUp      { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  @keyframes bounceIn     { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
  @keyframes floatUp      { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-48px); opacity: 0; } }
  .anim-slide-right { animation: slideInRight 0.28s var(--ease-out) both; }
  .anim-slide-up    { animation: slideUp 0.25s var(--ease-out) both; }
  .anim-bounce-in   { animation: bounceIn 0.35s var(--ease-out) both; }

  /* The answer moment. The correct choice snaps an accent bar across itself and
     lifts; a wrong pick shakes once. Both fire IN PLACE on the choice the
     student is still looking at, before the feedback screen takes over. */
  @keyframes revealLift { from { transform: translateY(0) scale(1); }
                          60%  { transform: translateY(-3px) scale(1.015); }
                          to   { transform: translateY(0) scale(1); } }
  @keyframes revealBar  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes revealShake { 0%,100% { transform: translateX(0); }
                           25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
  @keyframes numPop     { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }
  @keyframes screenEnter { from { opacity: 0; } to { opacity: 1; } }
  .screen-enter { animation: screenEnter 0.16s ease-out both; }

  /* Honour the OS reduced-motion setting across the whole practice flow — the
     entry slides, the reveal, the confetti drift and the floating delta were
     all previously exempt. */
  @media (prefers-reduced-motion: reduce) {
    .anim-slide-right, .anim-slide-up, .anim-bounce-in, .screen-enter,
    .choice-btn.correct, .choice-btn.correct::after, .choice-btn.wrong-pick,
    .stat.num-pop .val {
      animation: none !important;
      transition-duration: 1ms !important;
    }
    .rating-delta { animation-duration: 1ms; }
  }

  /* Confetti canvas */
  #confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 999; display: none; }

  /* Floating rating delta */
  .rating-delta { position: fixed; font-size: 20px; font-weight: 800; pointer-events: none; z-index: 998;
    animation: floatUp 1.1s ease-out forwards; }
  .rating-delta.pos { color: var(--green); }
  .rating-delta.neg { color: var(--red); }

  /* The banner's celebratory sizing lives in the canonical .result-banner rule
     further down the sheet. An "Enhanced feedback banner" block used to sit here
     restating padding/font-size, but equal specificity meant the later rule won
     and this one silently lost the cascade. */

  /* Streak fire glow */
  .streak-fire { animation: none; }
  .streak-on-fire .val { color: var(--gold); text-shadow: 0 0 12px rgba(21,36,216,0.35); }
  /* Training Floor numerals: the numbers that measure performance carry the
     weight, in tabular figures so they stop shifting as they count up. */
  .stat .val { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .stat.num-pop .val { display: inline-block; animation: numPop 0.44s var(--ease-snap) both; }

  /* Sprint mode */
  @keyframes timerPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
  .sprint-timer { background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 5px 14px; font-size: 15px; font-weight: 700;
    font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: 0.05em; }
  .sprint-timer.urgent { border-color: var(--red); color: var(--red); animation: timerPulse 0.8s infinite; }
  .sprint-mode-banner { background: var(--red-bg);
    border-bottom: 1px solid var(--red-line); text-align: center; padding: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--red);
    text-transform: uppercase; flex-shrink: 0; }
  .problem-text { font-size: 18px; line-height: 1.8; color: var(--text); word-break: break-word; }
  .stem-para { margin: 0 0 14px; }
  .stem-para:last-child { margin-bottom: 0; }
  .problem-table { border-collapse: collapse; margin: 14px 0; font-size: 16px; line-height: 1.4; }
  .problem-table td { border: 1px solid var(--border); padding: 7px 16px; text-align: center; }
  .problem-table td:first-child { text-align: left; }
  .problem-table tr:first-child td { font-weight: 600; background: var(--surface); }
  /* Staff question-review/summon tool (coach screen only). */
  .qreview-controls { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
  .qreview-meta { font-size: 13px; color: var(--muted); }
  .qreview-meta .ok { color: var(--green); font-weight: 600; }
  .qreview-meta .no { color: var(--red); font-weight: 600; }
  .qreview-render:empty { display: none; }
  .qreview-render { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; background: var(--card); }
  .qreview-stem { font-size: 16px; line-height: 1.5; margin-bottom: 14px; }
  .qreview-choice { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; margin: 6px 0; font-size: 14px; }
  .qreview-choice.correct { border-color: var(--green); background: var(--green-bg); }
  .qreview-exp { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.5; color: var(--muted); }
  .problem-figures { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
  .problem-figure { max-width: 100%; max-height: 420px; object-fit: contain;
    border-radius: var(--radius); background: var(--bs-sheet); padding: 12px; border: 1px solid var(--border); }
  /* SAT R&W figures are full source-PDF pages — tall, dense, and need room. */
  .problem-card.reading-card .problem-figure { max-height: 85vh; background: #fff;
    cursor: zoom-in; padding: 0; }
  .problem-figure.zoomed { max-height: none; cursor: zoom-out; }
  .answer-area { width: 100%; max-width: 720px; }
  .choice-img { display: block; max-width: 100%; max-height: 260px; margin: 6px auto 2px;
    border-radius: var(--radius); background: #fff; }
  .report-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: 11.5px; letter-spacing: 0.02em; color: var(--muted); opacity: 0.7; }
  .report-link:hover { opacity: 1; text-decoration: underline; }
  .report-link.reported { cursor: default; text-decoration: none; opacity: 0.9; color: var(--gold); }

  /* ── MC ─────────────────────────────────────────────────────────────── */
  .choices-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  @media (max-width: 560px) { .choices-grid { grid-template-columns: 1fr; } }
  .choice-btn { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    cursor: pointer; text-align: left; font-family: inherit; font-size: 15px; color: var(--text);
    transition: border-color var(--dur-fast), background var(--dur-fast),
                transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
    width: 100%; position: relative; overflow: hidden; }
  .choice-btn:hover { border-color: var(--border-hi); background: var(--card-hi); transform: translateY(-1px); }
  /* Keyboard parity: the flow is driven by A-D keys, so the focus ring has to be
     as legible as the hover state. There was no :focus-visible at all before. */
  .choice-btn:focus-visible { outline: none; border-color: var(--volt);
    box-shadow: 0 0 0 3px rgba(21, 36, 216, 0.22); }
  .choice-btn:active { transform: translateY(0) scale(0.995); }
  .choice-btn.selected { border-color: var(--gold); background: var(--gold-bg); }
  .choice-btn.selected .choice-letter { background: var(--gold); color: #fff; }
  /* Reveal states — applied in place by revealChoicesInPlace() before the
     feedback screen swaps in, so the answer lands on the card the student is
     already looking at. */
  .choice-btn.correct { border-color: var(--green); background: var(--green-bg);
    animation: revealLift 0.45s var(--ease-snap) both; }
  .choice-btn.correct::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 3px; background: var(--green); transform-origin: left center;
    animation: revealBar 0.4s var(--ease-snap) both; }
  .choice-btn.correct .choice-letter { background: var(--green); color: #fff; }
  .choice-btn.wrong-pick { border-color: var(--red); background: var(--red-bg);
    animation: revealShake 0.3s ease-in-out both; }
  .choice-btn.wrong-pick .choice-letter { background: var(--red); color: #fff; }
  .choice-btn.dimmed { opacity: 0.45; }
  .choice-letter { font-weight: 800; color: var(--gold); font-size: var(--fs-label);
    min-width: 22px; height: 22px; border-radius: var(--radius); flex-shrink: 0;
    margin-top: 1px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--gold-bg); letter-spacing: 0.04em;
    transition: background var(--dur-fast), color var(--dur-fast); }

  /* ── Free response ──────────────────────────────────────────────────── */
  .free-response { display: flex; gap: 12px; }
  .free-response input { flex: 1; background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 20px; font-family: inherit; font-size: 18px;
    color: var(--text); outline: none; transition: border-color 0.15s; }
  .free-response input:focus { border-color: var(--gold); }
  .submit-btn { padding: 0 28px; border-radius: var(--radius); border: none;
    background: var(--gold); color: #fff; font-family: inherit; font-size: 15px;
    font-weight: 700; cursor: pointer; letter-spacing: 0.04em; transition: opacity 0.15s; }
  .submit-btn:hover { opacity: 0.88; }
    .submit-btn:disabled { background: var(--bs-stock-2); color: var(--bs-ink-2);
    box-shadow: none; cursor: default; }

  /* ── Confidence prompt (post-answer, pre-submit) ────────────────────── */
  .conf-strip { position: absolute; inset: 0; display: flex; align-items: stretch;
    gap: 8px; background: var(--bg); animation: confIn 0.12s ease both; }
  .conf-q { align-self: center; font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted); white-space: nowrap; padding-right: 4px; }
  .conf-chip { flex: 1; border-radius: var(--radius); border: 1px solid var(--gold-dim);
    background: var(--surface); color: var(--text); font-family: inherit; font-size: 14px;
    font-weight: 600; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; }
  .conf-chip:hover, .conf-chip:focus { background: var(--gold-bg); color: var(--gold);
    border-color: var(--gold); outline: none; }
  .conf-key { margin-left: 8px; font-size: 10px; font-weight: 700; color: var(--muted); }
  @keyframes confIn { from { opacity: 0; } to { opacity: 1; } }
  /* Beta rater-feedback panel (optional, practice path). */
  .fb-panel { display: flex; flex-direction: column; gap: 8px; margin: 16px auto 4px;
    width: 100%; max-width: 720px; padding: 14px 16px; background: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius); }
  .fb-panel-title { font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
  .fb-row { display: flex; align-items: center; gap: 6px; }
  /* Sized to content, not a fixed 72px: "EXPLANATION" at this tracking is wider
     than that and, being flex-shrink:0, used to overflow across the chip row. */
  .fb-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted); flex: 0 0 auto;
    min-width: 74px; white-space: nowrap; }
  .fb-chip { flex: 1; border-radius: var(--radius); border: 1px solid var(--border);
    background: var(--surface); color: var(--muted); font-family: inherit; font-size: 12px;
    font-weight: 600; padding: 5px 4px; cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s; }
  .fb-chip:hover { color: var(--text); border-color: var(--gold-dim); }
  .fb-chip.active { background: var(--gold-bg); color: var(--gold); border-color: var(--gold); }

  /* ── Feedback ───────────────────────────────────────────────────────── */
  #screen-feedback { overflow: hidden; }
  .feedback-body { flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 24px; gap: 16px; overflow-y: auto; }
  .result-banner { width: 100%; max-width: 720px; border-radius: var(--radius);
    padding: 26px 34px; display: flex; align-items: center; gap: var(--sp-5);
    position: relative; overflow: hidden; }
  /* Accent hairline along the top edge — the "snap" that reads as a verdict. */
  .result-banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px; transform-origin: left center; animation: revealBar 0.42s var(--ease-snap) both; }
  .result-banner.correct { background: var(--green-bg); border: 1px solid var(--green-line); }
  .result-banner.correct::before { background: var(--green); }
  .result-banner.incorrect { background: var(--red-bg); border: 1px solid var(--red-line); }
  .result-banner.incorrect::before { background: var(--red); }
  .result-icon { font-size: 48px; flex-shrink: 0; line-height: 1; }
  .result-label { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
  .result-label.correct { color: var(--green); }
  .result-label.incorrect { color: var(--red); }
  .result-sub { font-size: 14px; color: var(--muted); margin-top: 2px; }
  .retry-rep { color: var(--gold); font-weight: 700; }
  .solution-card { width: 100%; max-width: 720px; background: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 32px; }
  .solution-label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
  .solution-text { font-size: 15px; line-height: 1.8; color: var(--text);
    white-space: pre-wrap; word-break: break-word; }
  /* Trap analysis — wrong answers get as much visual weight as the correct one,
     so students learn the trap shapes. Correct = green accent, traps = red. */
  .trap-card .solution-label { color: var(--gold); }
  .distractor-row { padding: 12px 14px; margin-bottom: 8px; border-radius: var(--radius);
    border: 1px solid var(--subtle); border-left-width: 3px; background: #e7eae2; }
  .distractor-row.is-correct { border-left-color: var(--bs-ok); background: #dfeee4; }
  .distractor-row.is-trap { border-left-color: var(--bs-pen); background: #f7e2e1; }
  .distractor-row.is-picked { border-color: var(--red); box-shadow: 0 0 0 1px var(--bs-miss); }
  .distractor-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
  .distractor-letter { display: inline-flex; width: 24px; height: 24px; border-radius: var(--radius);
    background: var(--bs-sheet); border: 1px solid var(--subtle); font-size: 12px; font-weight: 700;
    align-items: center; justify-content: center; color: var(--muted); flex-shrink: 0; }
  .distractor-letter.correct { background: var(--bs-sheet); border-color: var(--bs-ok); color: var(--bs-ok); }
  .distractor-letter.trap { background: var(--bs-sheet); border-color: var(--bs-pen); color: var(--bs-pen); }
  .distractor-tag { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
    color: var(--muted); padding: 3px 8px; background: transparent; border-radius: var(--radius);
    border: 1px solid var(--subtle); }
  .distractor-tag.correct { color: var(--bs-ok); background: transparent; border-color: var(--bs-ok); }
  .distractor-tag.trap { color: var(--bs-pen); background: transparent; border-color: var(--bs-pen); }
  .distractor-tag.picked { color: var(--gold); background: var(--gold-bg); border-color: var(--gold-dim); }
  .distractor-choicetext { font-size: 12px; color: var(--muted); flex: 1 1 100%; line-height: 1.4; }
  .distractor-note { font-size: 14px; line-height: 1.55; color: var(--text); }
  .roast-note { font-size: 11px; color: var(--muted); text-align: center; max-width: 720px; width: 100%; }

  /* ── Coach strip ───────────────────────────────────────────────────────────
     The snarky feedback voice had no visual identity — it was one grey text
     line that also (confusingly) used a speaker glyph for a TEXT setting.
     Now the voice is attributed to a marked "Coach" and the two settings are
     separate, legible chips: the written voice, and the answer sound cue. */
  .coach-strip { width: 100%; max-width: 720px; display: flex; align-items: center;
    gap: var(--sp-3); padding: 10px 14px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-pill); }
  .coach-mark { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gold-bg); border: 1px solid var(--gold-dim);
    color: var(--gold); font-size: var(--fs-sm); font-weight: 800; line-height: 1; }
  .coach-name { font-size: var(--fs-micro); font-weight: 800;
    letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
  .coach-toggles { margin-left: auto; display: flex; gap: var(--sp-2); }
  .coach-toggle { display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: var(--radius-pill); cursor: pointer;
    background: transparent; border: 1px solid var(--border); color: var(--muted);
    font-family: inherit; font-size: var(--fs-label); font-weight: 700;
    letter-spacing: 0.04em; white-space: nowrap;
    transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast); }
  .coach-toggle:hover { color: var(--text); border-color: var(--border-hi); }
  .coach-toggle:focus-visible { outline: none; border-color: var(--volt);
    box-shadow: 0 0 0 3px rgba(21, 36, 216, 0.22); }
  .coach-toggle.on { color: var(--gold); border-color: var(--gold-dim); background: var(--gold-bg); }
  @media (max-width: 560px) {
    .coach-strip { flex-wrap: wrap; border-radius: var(--radius); }
    .coach-toggles { margin-left: 0; width: 100%; }
    .coach-toggle { flex: 1; justify-content: center; }
  }

  .next-row { width: 100%; max-width: 720px; display: flex; gap: 12px; }