/* ════════════════════════════════════════════════════════
   GERMAN LESSONS — Design System
   lesson.css  |  Light B&W Theme

   HOW TO THEME:
   Design tokens (colours, type, spacing, and both light/dark
   variable sets) now live in tokens.css, shared with cards/card.css.
   Edit them there — every past and future lesson, and every card,
   updates automatically.
   ════════════════════════════════════════════════════════ */

@import url('tokens.css?v=8');

@font-face {
  font-family: 'Flegrei';
  src: url('Flegrei.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ─── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Design tokens now come from tokens.css (imported above). */

/* ─── Base ───────────────────────────────────────────── */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: clip;
}

/* ─── Page scrollbar ─────────────────────────────────────
   Gold thumb in a theme-tinted groove. --gold is the same
   #FFB300 in all four themes; only --scrollbar-track shifts,
   so the recess reads correctly on white, near-black, paper
   and spruce alike. Tune the three numbers below together:
   --sb-size is the full gutter, --sb-inset is the padding
   that thins the thumb inside it, and --sb-min-thumb is the
   shortest the thumb is allowed to get. Without that last one
   the thumb length is purely proportional to page length, so a
   long lesson shrinks it to an unusable dot. */
html {
  --sb-size:      20px;
  --sb-inset:     5px;
  --sb-min-thumb: 72px;
}
/* Deliberately unscoped. ::-webkit-scrollbar does NOT inherit, so pinning
   it to html or body only styles a bar those elements own. Bare selectors
   reach whichever element actually scrolls. The two custom scrollers below
   (.l-vocab-table-wrap at 4px, .l-formula-scale hidden) still win on
   specificity and keep their own treatment. */
::-webkit-scrollbar {
  width:  var(--sb-size);
  height: var(--sb-size);
}
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
  background: var(--gold);
  border: var(--sb-inset) solid transparent;
  border-radius: var(--radius-pill);
  background-clip: content-box;
  /* min-height floors the vertical thumb, min-width the horizontal one.
     The border is inside the box, so add it back on both sides or the
     visible gold is --sb-min-thumb minus two insets. */
  min-height: calc(var(--sb-min-thumb) + 2 * var(--sb-inset));
  min-width:  calc(var(--sb-min-thumb) + 2 * var(--sb-inset));
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); background-clip: content-box; }
::-webkit-scrollbar-corner { background: var(--scrollbar-track); }

/* Firefox has no ::-webkit-scrollbar, so it gets the standard property
   instead. This MUST stay walled off from Chrome: the moment Chrome sees
   scrollbar-color it switches to the standard path and throws away every
   ::-webkit-scrollbar rule above, which recolours the bar but leaves it
   at default width. Testing `not selector(::-webkit-scrollbar)` does not
   wall it off, because Chrome reports vendor pseudo-elements as
   unsupported inside selector() even though it implements them.
   -moz-osx-font-smoothing exists only in Firefox, so this does. */
@supports (-moz-osx-font-smoothing: auto) {
  html { scrollbar-width: auto; scrollbar-color: var(--gold) var(--scrollbar-track); }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
  position: relative;
  overscroll-behavior-x: none;
 letter-spacing: var(--body-tracking);}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

/* ─── Selection ───────────────────────────────────────
   Gold-tinted text selection; gold is #FFB300 in every theme,
   so one literal rgba works across all four modes. */
::selection { background: rgba(255, 179, 0, 0.30); }

/* ─── Text colour hooks ───────────────────────────────
   These three rules are the complete text colour system.
   One highlight colour. Everything else is ink.         */

span.de {
  color: var(--german);
  font-style: normal;
}
.l-vocab-table td.cell-german span.de {
  font-style: normal;
}
.l-example-item span.de {
  font-style: normal !important;
}

strong {
  color: var(--german);
  font-weight: 700;
}
strong.en {
  color: var(--ink);
}
.l-table td strong.en,
.rx-answer strong.en {
  color: var(--ink);
}

s {
  text-decoration: line-through;
  opacity: 0.5;
}

/* ─── Inline blank ───────────────────────────────────── */
.l-inline-blank {
  display: inline-block;
  width: 4.5em;
  border-bottom: 1.5px solid var(--ink-muted);
  vertical-align: baseline;
  height: 0.9em;
  margin: 0 0.15em;
}

/* ─── Layout ─────────────────────────────────────────── */
#lesson-root {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--page-pad-y) var(--page-pad-x) 140px;
}
.l-meta-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex-shrink: 0;
}

.l-title {
  font-family: 'Plus Jakarta Sans', var(--display);
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--ink);
  margin-bottom: 8px;
  text-wrap: balance;
}
.l-title-de { color: var(--german); }

.l-title-sub {
  display: block;
  font-family: var(--body);
  color: var(--ink-muted);
  font-size: 0.38em;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: var(--track-label-tight);
  line-height: 1.4;
  margin-top: 0.3em;
}

@media (min-width: 768px) {
  .l-title { line-height: 0.95; }
}

.l-subtitle { display: none; }

/* ════════════════════════════════════════════════════════
   SECTION LABELS
   ════════════════════════════════════════════════════════ */
.l-section-label {
  font-family: var(--sans);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.l-section-label:empty { display: none; }
.l-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--divider);
}
.l-section-label.has-title {
  margin-bottom: 6px;
  text-transform: none;
  letter-spacing: -0.025em;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 900;
  color: var(--ink);
  line-height: 1.05;
  text-wrap: balance;
}
.l-section-label.has-title::after { display: none; }

.l-section-title {
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.5;
  color: var(--german);
  margin-bottom: 28px;
  margin-top: 0;
}

/* ════════════════════════════════════════════════════════
   SECTION WRAPPERS
   ════════════════════════════════════════════════════════ */
.l-section { margin-bottom: var(--section-gap); }

/* ════════════════════════════════════════════════════════
   OPENING HOOK
   ════════════════════════════════════════════════════════ */
.l-hook p {
  margin-bottom: 1.5em;
  letter-spacing: -0.003em;
  text-wrap: pretty;
}
.l-hook p:last-child { margin-bottom: 0; }

.l-hook p:first-child::first-letter {
  font-family: var(--body);
  font-size: 3.8em;
  font-weight: 900;
  line-height: 0.8;
  float: left;
  margin-right: 0.06em;
  margin-top: -0.25em;
  color: var(--german);
  -webkit-text-stroke: 3px var(--german);
}

.l-concept-title {
  font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  font-weight: 900;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  text-wrap: balance;
}
.l-concept-title-de { font-family: var(--body); font-size: 0.7rem; font-style: normal; font-weight: 400; text-transform: uppercase; letter-spacing: var(--track-label-tight); color: var(--ink-muted); }
.l-concept-title .de { font-style: normal; color: var(--german); }
.l-rule p + .l-content-list { margin-top: 10px; }
.l-your-turn .l-reveal-answer p {
  font-size: 0.9rem;
  color: var(--ink);
}

/* ════════════════════════════════════════════════════════
   REVEAL BUTTON + ANSWER
   ════════════════════════════════════════════════════════ */
.l-reveal-btn,
.l-mc-tile,
.l-wo-tile,
.l-match-tile,
.l-q-check-btn,
#l-quiz-nav button {
  display: inline-block;
  padding: 5px 14px;
  background: transparent;
  border: 1.5px solid var(--divider);
  color: var(--ink-mid);
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  transition: border-color var(--dur-fast), color 0.12s,
              transform 0.12s var(--ease-settle);
}
.l-reveal-btn:hover,
.l-mc-tile:hover:not(:disabled),
.l-wo-tile:hover:not(:disabled),
.l-match-tile:hover:not(:disabled):not(.match-paired),
.l-q-check-btn:hover,
#l-quiz-nav button:hover {
  border-color: var(--german);
  color: var(--german);
}
.l-reveal-answer {
  display: none;
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--correct-bg);
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.6;
  animation: l-slide-in var(--dur-base) ease;
}
.l-reveal-answer.open { display: block; }

@keyframes l-slide-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════
   TABLES
   ════════════════════════════════════════════════════════ */
.l-table-wrap {
  margin: 4px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Tables sit on their own defined card, like the Rule block */
.l-table-wrap, .rx-table-wrap {
  background: var(--card-bg);
  padding: 18px 22px;
}

.l-rule + .l-table-wrap {
  margin-top: 1.4rem;
}

/* Zebra, refined: soft rounded stripes on bare paper do the row
   tracking — no field behind the table, no shaded first column,
   no hover fills, no hairlines between body rows. */
.l-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  font-size: 1.1rem;
  font-weight: 500;
  font-family: var(--body);
  background: transparent;
}

.l-table th {
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  padding: 8px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1.5px solid var(--divider);
  min-width: 96px;
}

.l-table td {
  padding: 7px 14px;
  color: var(--ink);
  vertical-align: top;
  line-height: 1.55;
  text-align: left;
  max-width: 320px;
  min-width: 96px;
  overflow-wrap: break-word;
}

.l-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--ink) 4.5%, transparent);
}
.l-table tbody tr:nth-child(even) td:first-child { border-radius: 10px 0 0 10px; }
.l-table tbody tr:nth-child(even) td:last-child  { border-radius: 0 10px 10px 0; }

.l-table td:first-child { font-weight: 500; }

.l-table[data-type="plain"] thead {
  display: none;
}

.l-table td em     { }
.l-table td strong { color: var(--german); font-weight: 700; font-style: normal; }
.l-table td s      { text-decoration: line-through; opacity: 0.5; }

.l-table td.cell-verb strong {
  background: rgba(255, 179, 0, 0.25);
}

.l-table td.cell-wrong  { color: var(--ink-muted); }
.l-table td.cell-right  { color: var(--german); }
.l-table td.cell-german { color: var(--ink); font-weight: 400; font-style: normal; }
.l-table td.cell-muted  { color: var(--ink); }
.l-table td.cell-gender { color: var(--ink-muted); }
.l-table td.cell-example { color: var(--ink-muted); }
.l-table td.cell-tick  { color: var(--german); font-weight: 700; text-align: center; }
.l-table td.cell-cross { color: var(--ink-muted); font-weight: 700; text-align: center; }

.l-table[data-cols="2"] td,
.l-table[data-cols="2"] th { width: 50%; }
.l-table[data-cols="3"] td:nth-child(1),
.l-table[data-cols="3"] th:nth-child(1) { width: 28%; }
.l-table[data-cols="4"] td,
.l-table[data-cols="4"] th { width: 25%; }

/* ════════════════════════════════════════════════════════
   INLINE EXAMPLES
   ════════════════════════════════════════════════════════ */
.l-examples { margin: 4px 0; }

.l-example-item {
  padding: 10px 0 10px 200px;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.l-example-de {
  position: relative;
  font-style: normal;
  font-size: var(--size-formula);
  font-weight: 500;
  color: var(--ink);
  line-height: var(--body-lh);
}
.l-example-en {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
  opacity: 0.6;
  margin-top: 2px;
}

/* Redesign stack (.rx-stack > * + * { margin-top: 32px }) applies a flat 32px
   between every block regardless of type. These compound selectors carry
   higher specificity than that blanket rule, so they win no matter which
   comes first in the source, and give examples blocks purposeful spacing
   instead of the same flat gap as everything else. */
.rx-stack > .l-examples { margin-top: var(--block-gap); }
.rx-stack > .l-examples + * { margin-top: var(--block-gap); }
/* A run of examples blocks stays tight so it reads as one group, with the
   full gap only at the run's outer edges. */
.rx-stack > .l-examples + .l-examples { margin-top: 4px; }

/* ════════════════════════════════════════════════════════
   FORMULA (word-order / word-formation diagrams)
   Free-standing like .l-examples above: no box, no card, no
   divider. See "formula" in schema-reference.md for the JSON shape.
   ════════════════════════════════════════════════════════ */
/* Own breathing room, more than the flat 32px .rx-stack gives every
   other block, so the formula reads as a free-standing moment, not
   another paragraph in the stack. */
.rx-stack > .l-formula-wrap { margin-top: var(--block-gap); }
.rx-stack > .l-formula-wrap + * { margin-top: var(--block-gap); }

.l-formula-wrap > .l-formula-scale + .l-formula-scale { margin-top: 26px; }

/* Scroll is the fallback, not the primary plan: JS below shrinks the
   whole row proportionally to fit the available width first. This
   wrapper only starts scrolling if a formula is still too wide even
   at the smallest scale JS allows. */
.l-formula-scale {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;    /* Firefox */
  -ms-overflow-style: none; /* old Edge/IE */
}
.l-formula-scale::-webkit-scrollbar { display: none; } /* Chrome, Safari, new Edge */

.l-formula {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  gap: 16px 12px;
  padding-left: 200px;
}

.l-formula-slot { display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; gap: 2px; }
.l-formula-head {
  font-family: var(--display);
  font-size: var(--formula-head-size);
  font-weight: 500;
  color: var(--formula-ink);
  line-height: 1.3;
  white-space: nowrap;
}
.l-formula-sub {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--formula-muted);
  line-height: 1.3;
  white-space: nowrap;
}
.l-formula-example {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--formula-muted);
  line-height: 1.3;
  white-space: nowrap;
}

.l-formula-slot--accent .l-formula-head { color: var(--formula-accent); font-style: normal; font-weight: var(--formula-accent-weight); }
.l-formula-slot--error  .l-formula-head {
  color: var(--formula-error);
  text-decoration: underline wavy;
  text-decoration-color: var(--wrong-border);
  text-underline-offset: 3px;
}
.l-formula-slot--result .l-formula-head { font-size: var(--formula-result-size); color: var(--formula-accent); font-weight: 600; }

.l-formula-op {
  flex: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--ink-faint);
  margin-top: calc((var(--formula-head-size) * 1.3 - 18px) / 2);
}
.l-formula-op svg { width: 18px; height: 18px; display: block; }
.l-formula-op--arrow svg { width: 22px; height: 18px; }
.l-formula-op--gold { color: var(--formula-accent); }

/* ════════════════════════════════════════════════════════
   CONTENT LIST (bullet lists inside rule/callout/watch_out
   content arrays: any "- item" string auto-groups into this)
   ════════════════════════════════════════════════════════ */
.l-content-list {
  margin: 0;
  padding: 0 0 0 20px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.l-content-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--body-size);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
 letter-spacing: var(--body-tracking);}
.l-content-list li::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 0.62em;
  border-radius: 50%;
  background: var(--gold);
}

/* ════════════════════════════════════════════════════════
   MASTER REFERENCE
   ════════════════════════════════════════════════════════ */
.l-master-closing {
  margin-top: 20px;
  padding: 20px 24px;
  background: var(--box-rule);
  border-radius: var(--radius-soft);
}
.l-master-closing-label {
  font-family: var(--sans);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--track-label);
  text-transform: var(--label-transform);
  color: var(--german);
  margin-bottom: 8px;
  display: block;
}
.l-master-closing p {
  font-size: var(--body-size);
  font-weight: 500;
  line-height: var(--body-lh);
  color: var(--ink);
  margin-bottom: 0;
 letter-spacing: var(--body-tracking);}

/* ════════════════════════════════════════════════════════
   WORKED EXERCISES
   ════════════════════════════════════════════════════════ */
.l-exercise {
  background: var(--card-bg);
  margin-bottom: 20px;
  padding: 24px 26px;
  position: relative;
  overflow: hidden;
}
.l-exercise::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  pointer-events: none;
  opacity: 0.8;
}
.l-exercise-inner { position: relative; z-index: 1; }
.l-exercise-inner > * + * { margin-top: 16px; }

.l-exercise-number {
  font-family: var(--sans);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--track-label);
  text-transform: var(--label-transform);
  color: var(--ink-mid);
}
.l-exercise-task {
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.55;
}
.l-exercise-task em { color: var(--ink-muted); }
.l-exercise-concept {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-mid);
}

.l-vocab-table-wrap { overflow-x: auto; }
.l-vocab-table-wrap::-webkit-scrollbar { width: 4px; }
.l-vocab-table-wrap::-webkit-scrollbar-track { background: transparent; }
/* Its own floor: the page thumb's 72px would swallow this short track. */
.l-vocab-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  min-height: 24px;
  min-width:  24px;
}

.l-vocab-table th { position: sticky; top: 0; z-index: 2; background: var(--card-bg); }

/* ─── VOCABULARY GENDER BADGE (shared by table & card modes) ── */
.l-vocab-card__gender {
  font-size: var(--size-xs);
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.l-vocab-card__gender--der  { background: rgba(21,101,192,0.10); color: #1565C0; }
.l-vocab-card__gender--die  { background: rgba(173,20,87,0.10);  color: #AD1457; }
.l-vocab-card__gender--das  { background: rgba(46,125,50,0.10);  color: #2E7D32; }
.l-vocab-card__gender--none { background: var(--card-bg-deep);   color: var(--ink-muted); }

/* ─── SINGLE CARD (card mode) ──────────────────────────────── */
.l-vocab-card-display { margin-top: 4px; }
.l-vocab-card-stage   { margin-top: 10px; }

@keyframes l-card-enter {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* Card nav (prev button) */
.l-vocab-card-nav { margin-top: 12px; }
.l-vocab-card-nav-btn {
  background: none;
  border: 1.5px solid var(--divider);
  border-radius: 0;
  font-family: var(--sans);
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: var(--track-ui);
  color: var(--ink-muted);
  cursor: pointer;
  padding: 6px 14px;
  transition: border-color var(--dur-fast), color 0.12s;
}
.l-vocab-card-nav-btn:hover:not(:disabled) { border-color: var(--ink-muted); color: var(--ink); }
.l-vocab-card-nav-btn:disabled { opacity: 0.28; cursor: default; }

/* Gender count note shown above card in gender-practice mode */
.l-vocab-card-note {
  font-size: var(--label-size);
  font-family: var(--sans);
  font-weight: 600;
  font-style: normal;
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

/* Completion / end-of-deck card */
.l-vocab-done-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 170px;
}

/* ─── VOCABULARY ACTIVITY ────────────────────────────────── */
.l-vocab-hidden { display: none !important; }

.l-vocab-mode-bar {
  display: flex;
  gap: 0;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--divider);
}
.l-vocab-mode-btn {
  padding: 8px 20px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: transparent;
  font-family: var(--sans);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color var(--dur-fast), border-color 0.12s;
}
.l-vocab-mode-btn--active { color: var(--german); border-bottom-color: var(--german); }
.l-vocab-mode-btn:hover:not(.l-vocab-mode-btn--active) { color: var(--ink); }

/* Top-level Reading | Practice — underline tabs (same language as the rest of the lesson) */
.l-vocab-activity > .l-vocab-mode-bar {
  display: flex;
  border-bottom: 2px solid var(--divider);
  margin-bottom: 20px;
}
.l-vocab-activity > .l-vocab-mode-bar .l-vocab-mode-btn {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -2px;
  margin-left: 0;
  padding: 8px 20px;
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  color: var(--ink-muted);
  background: transparent;
  position: static;
  z-index: auto;
  transition: color var(--dur-fast), border-color 0.12s;
}
.l-vocab-activity > .l-vocab-mode-bar .l-vocab-mode-btn--active {
  color: var(--german);
  border-bottom-color: var(--german);
  background: transparent;
  border-left-width: 0;
  box-shadow: none;
  z-index: auto;
}
.l-vocab-activity > .l-vocab-mode-bar .l-vocab-mode-btn:hover:not(.l-vocab-mode-btn--active) {
  color: var(--ink);
  background: transparent;
  border-color: transparent;
  z-index: auto;
}

/* Gender | Meaning — pill chips, clearly subordinate to the tab bar */
.l-vocab-submode-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}
.l-vocab-submode-btn {
  padding: 3px 13px;
  border: 1.5px solid var(--divider);
  border-radius: var(--radius-pill);
  margin-left: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  color: var(--ink-mid);
  cursor: pointer;
  transition: border-color var(--dur-fast), color 0.12s, background 0.12s;
}
.l-vocab-submode-btn--active {
  background: var(--german);
  border-color: var(--german);
  color: var(--on-gold);
}
.l-vocab-submode-btn:hover:not(.l-vocab-submode-btn--active) {
  border-color: var(--ink-mid);
  color: var(--ink);
}

/* Progress bar */
.l-vocab-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.l-vocab-progress-text {
  font-family: var(--sans);
  font-size: var(--size-xs);
  font-weight: 700;
  color: var(--ink-mid);
  min-width: 40px;
  text-align: right;
}
.l-vocab-progress-bar {
  flex: 1;
  height: 3px;
  background: var(--divider);
  border-radius: var(--radius-tight);
  overflow: hidden;
}
.l-vocab-progress-fill {
  height: 100%;
  background: var(--german);
  border-radius: var(--radius-tight);
  width: 0%;
  transition: width var(--dur-slow) ease;
}

/* Reading mode: counter is soft label, not a score */
.l-vocab-progress--reading .l-vocab-progress-text {
  text-align: left;
  min-width: 0;
  font-weight: 400;
  color: var(--ink-muted);
}

@keyframes l-vocab-wobble {
  0%   { transform: translateX(0); }
  18%  { transform: translateX(-7px); }
  36%  { transform: translateX(7px); }
  54%  { transform: translateX(-5px); }
  72%  { transform: translateX(4px); }
  88%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

/* Summary */
.l-vocab-summary { padding: 40px 16px; text-align: center; }
.l-vocab-score {
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--german);
  line-height: 1;
  margin-bottom: 8px;
  transition: color var(--dur-slow);
}
.l-vocab-score--good { color: var(--correct-ink); }
.l-vocab-score--ok   { color: var(--gold-dark);   }
.l-vocab-score--low  { color: var(--ink-muted);    }
.l-vocab-score-sub {
  font-family: var(--sans);
  font-size: var(--size-sm);
  color: var(--ink-muted);
  margin-bottom: 28px;
}
.l-vocab-summary-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.l-vocab-summary-btn {
  padding: 9px 22px;
  border: 1.5px solid var(--german);
  background: transparent;
  font-family: var(--sans);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  color: var(--german);
  cursor: pointer;
  transition: all var(--dur-base);
}
.l-vocab-summary-btn:hover { background: var(--german); color: var(--on-gold); }
.l-vocab-summary-btn--filled { background: var(--german); color: var(--on-gold); }
.l-vocab-summary-btn--filled:hover { background: var(--gold-dark); border-color: var(--gold-dark); }

/* ═══════════════════════════════════════════════════════
   VOCAB CAROUSEL  (l-vc-*)
   ═══════════════════════════════════════════════════════ */

.l-vc-wrap { position: relative; }

/* Pack track — progress dots across packs */
.l-vc-pack-track {
  display: flex; justify-content: center; gap: 5px;
  padding: clamp(8px,1.5vh,14px) 0;
}
.l-vc-pack-track span {
  width: 18px; height: 3px; border-radius: var(--radius-tight);
  background: var(--divider); transition: background var(--dur-slow) ease;
}
.l-vc-pack-track span.done { background: var(--ink-faint); }
.l-vc-pack-track span.now  { background: var(--german); }

#quiz-round-track { justify-content: flex-start; }

/* Stage */
.l-vc-stage {
  position: relative;
  height: clamp(280px, 42vh, 360px);
  overflow: visible;
}

/* Card — absolutely positioned, animated */
.l-vc-card {
  position: absolute;
  top: 50%; left: 50%;
  width: min(400px, 84vw);
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  will-change: transform, opacity, left, filter;
  transition:
    transform 650ms var(--ease-ui),
    opacity   650ms var(--ease-ui),
    filter    650ms var(--ease-ui),
    left      650ms var(--ease-ui);
}
.l-vc-card:not(.is-center) { pointer-events: none; }

.l-vc-card-inner {
  background: var(--card-bg);
  padding: 24px 28px 22px;
  min-height: 230px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-floating);
}
html:is([data-theme="dark"], [data-theme="wald"]) .l-vc-card-inner {
}
.l-vc-card-inner::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--noise); opacity: 0.8; pointer-events: none;
}
.l-vc-card-content { position: relative; z-index: 1; }

/* Word headline (reading mode) */
.l-vc-word {
  font-family: var(--display);
  font-size: clamp(1.6rem, 5.5vw, 2.4rem);
  font-weight: 800;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--german);
  margin-bottom: 10px;
}
.l-vc-word .de { color: var(--german); font-style: normal; }

/* Gender badge (re-uses existing pill classes, just adds spacing) */
.l-vc-card-content .l-vocab-card__gender { margin-bottom: 10px; display: inline-block; }

/* Meaning, example, note */
.l-vc-meaning {
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  margin: 8px 0 0;
  line-height: 1.45;
}
/* This one holds German, and as of 11 Aug 2026 it goes through the
   parser like every other field in the card. It used to be written with
   textContent, so *Hallo* came out as three literal characters and the
   site-wide rule keeping German upright could never reach it.

   Nothing here needs to set a colour: md() turns *word* into span.de,
   and span.de is gold site-wide. The notation is now simply available in
   this field — it does not gold anything that was not marked up, so the
   3,188 examples written as plain sentences are unchanged. */
.l-vc-example {
  font-family: var(--body);
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin: 6px 0 0;
}
.l-vc-note {
  font-size: 0.78rem;
  font-family: var(--sans);
  color: var(--ink-mid);
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--divider);
  line-height: 1.5;
}
.l-vc-note .de { color: var(--german); font-style: normal; }

/* Practice mode: meaning prompt */
.l-vc-meaning-prompt {
  font-family: var(--display);
  font-size: clamp(1.6rem, 5.5vw, 2.4rem);
  font-weight: 800;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px;
}

/* Practice inputs */
.l-vc-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: rgba(var(--wash-rgb),0.04);
  border: none;
  border-bottom: 2px solid var(--ink-faint);
  border-radius: 3px 3px 0 0;
  outline: none;
  padding: 8px 12px 6px;
  margin-top: 10px;
  transition: border-color var(--dur-base), background 0.15s;
}
.l-vc-input:focus { border-bottom-color: var(--german); background: rgba(var(--wash-rgb),0.06); }
.l-vc-input--sm   { font-size: 0.9rem; text-align: center; margin-top: 12px; }
html:is([data-theme="dark"], [data-theme="wald"]) .l-vc-input { background: rgba(255,255,255,0.06); }
html:is([data-theme="dark"], [data-theme="wald"]) .l-vc-input:focus { background: rgba(255,255,255,0.09); }

/* Card feedback states */
.l-vc-card--correct  .l-vc-card-inner { background: var(--correct-bg);   }
.l-vc-card--wrong    .l-vc-card-inner { background: var(--wrong-bg);     }
.l-vc-card--corrected .l-vc-card-inner { background: var(--corrected-bg); }

@keyframes l-vc-wobble {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-8px); }
  40%     { transform: translateX(7px); }
  60%     { transform: translateX(-5px); }
  80%     { transform: translateX(4px); }
}
.l-vc-card--wobble .l-vc-card-inner { animation: l-vc-wobble 0.42s ease; }

/* Controls row */
.l-vc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: clamp(12px,2vh,22px) 0;
}

.l-vc-nav-btn {
  appearance: none;
  width: 44px; height: 44px; border-radius: 50%;
  flex-shrink: 0;
  background: transparent;
  border: 1.5px solid var(--divider);
  color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color var(--dur-base), background 0.15s, transform 0.15s cubic-bezier(0.23,1,0.32,1);
}
.l-vc-nav-btn:hover:not(:disabled) { border-color: var(--german); background: rgba(255,179,0,0.08); transform: translateY(-1px); }
.l-vc-nav-btn:active:not(:disabled) { transform: scale(0.95); }
.l-vc-nav-btn:disabled { opacity: 0.25; cursor: default; }
.l-vc-nav-btn svg { width: 20px; height: 20px; }

/* Pager */
.l-vc-pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.l-vc-pager button {
  appearance: none; background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 0.76rem; font-weight: 700;
  color: var(--ink-mid); opacity: 0.45; font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-ui); padding: 4px 2px; position: relative;
  transition: opacity var(--dur-base), color 0.2s;
}
.l-vc-pager button::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: var(--german); transform: scaleX(0);
  transform-origin: center; transition: transform var(--dur-slow) var(--ease-ui);
}
.l-vc-pager button:hover { opacity: 0.8; }
.l-vc-pager button[aria-current="true"] { opacity: 1; color: var(--german); }
.l-vc-pager button[aria-current="true"]::after { transform: scaleX(1); }

/* ─────────────────────────────────────────────────────── */

.l-bonus-phrases { margin-top: 24px; }
.l-bonus-phrases-label {
  font-family: var(--sans);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 14px;
  display: block;
}

/* ════════════════════════════════════════════════════════
   QUIZ — Core
   ════════════════════════════════════════════════════════ */
.l-quiz-progress { margin-bottom: 24px; }
.l-quiz-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.l-quiz-progress-label,
.l-quiz-progress-score {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  color: var(--ink-mid);
}
.l-quiz-progress-score { color: var(--german); }
.l-quiz-progress-track { height: 2px; background: var(--divider); }
.l-quiz-progress-fill {
  height: 100%;
  background: var(--highlight);
  transition: width var(--dur-slow) ease;
}

.l-q-item {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--card-bg);
  margin-bottom: 8px;
}

.l-q-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.l-q-num {
  font-family: var(--display); font-weight: 700; font-size: 0.95rem;
  color: var(--ink); opacity: 0.4; line-height: 1;
}
.l-q-prompt {
  font-family: var(--body);
  font-size: 1.10rem;
  color: var(--ink);
  margin: 0;
  line-height: 1.6;
}

.l-q-sentence {
  font-family: var(--body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--ink);
  padding: 14px 18px;
  background: rgba(var(--wash-rgb),0.03);
  margin-top: 4px;
 letter-spacing: var(--body-tracking);}

.l-q-blank-wrap { display: inline-block; position: relative; vertical-align: baseline; }

.l-q-blank {
  display: inline-block;
  min-width: 8ch;
  padding: 1px 6px 3px;
  border: none;
  border-bottom: 2px solid var(--highlight);
  background: rgba(var(--wash-rgb),0.04);
  font-family: var(--body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--ink);
  outline: none;
  vertical-align: baseline;
  transition: border-color var(--dur-fast), background 0.15s;
 letter-spacing: var(--body-tracking);}
.l-q-blank:focus         { background: rgba(var(--wash-rgb),0.07); }
.l-q-blank.state-correct { border-bottom-color: var(--correct-ink); color: var(--correct-ink); background: var(--correct-bg); }
.l-q-blank.state-wrong   { border-bottom-color: var(--wrong-ink); color: var(--wrong-ink); background: var(--wrong-bg); }
.l-q-blank:disabled      { cursor: default; opacity: 1; }

.l-q-standalone-wrap  { margin-top: 8px; }
.l-q-blank-standalone { display: block; min-width: 16ch; width: fit-content; max-width: 100%; font-size: var(--body-size); border-bottom-width: 2px;  letter-spacing: var(--body-tracking);}

.l-q-check-btn {
  display: block;
  margin-top: 16px;
  margin-left: auto;
  padding: 7px 22px;
  background: transparent;
  
}
.l-q-check-btn:hover    { border-color: var(--german); color: var(--german); }
/* Was opacity 0, which hid the control rather than deactivating it:
   the learner watched Check disappear on submit. 0.3 matches the
   disabled convention used elsewhere. The space was always reserved,
   so nothing reflows. */
.l-q-check-btn:disabled { opacity: 0.3; pointer-events: none; }

.l-q-feedback {
  display: none;
  margin-top: 14px;
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.6;
  animation: l-feedback-in var(--dur-base) ease;
}
.l-q-feedback.feedback-correct { display: block; background: var(--correct-bg); }
.l-q-feedback.feedback-wrong   { display: block; background: var(--wrong-bg);   }

.l-feedback-verdict {
  font-weight: 700;
  font-size: 0.70rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.feedback-correct .l-feedback-verdict { color: var(--correct-ink); }
.feedback-wrong   .l-feedback-verdict { color: var(--wrong-ink); }
.l-feedback-text { color: var(--ink-muted); font-size: var(--body-size); font-weight: 500;  letter-spacing: var(--body-tracking);}

@keyframes l-feedback-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

#l-quiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
}
#l-quiz-nav button {
  background: transparent;
  border: none;
  
}
#l-quiz-nav button:hover { color: var(--german); }
#l-nav-prev { visibility: hidden; }
#l-nav-next { visibility: hidden; }

#l-reset-btn {
  background: transparent;
  border: none;
  font-family: var(--sans);
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  color: var(--ink-mid);
  cursor: pointer;
  padding: 8px 0;
  transition: color var(--dur-fast);
}
#l-reset-btn:hover { color: var(--ink-muted); }

#l-score-panel {
  display: none;
  margin-top: 48px;
  padding: 40px;
  background: var(--card-bg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
#l-score-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  pointer-events: none;
}
#l-score-panel-inner { position: relative; z-index: 1; }

#l-score-number {
  font-family: var(--display);
  font-size: clamp(3rem, 10vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--german);
  line-height: 1;
  margin-bottom: 8px;
}
#l-score-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 16px;
}
#l-score-message {
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink-muted);
  max-width: 380px;
  margin: 0 auto 24px;
  line-height: 1.6;
}
#l-retry-btn {
  display: inline-block;
  padding: 10px 32px;
  background: transparent;
  border: 1.5px solid var(--ink-faint);
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: 0.80rem;
  font-weight: 700;
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-fast), color 0.12s, border-color 0.12s;
}
/* Same gold fill, opposite mistake: --bg is near-white on the light
   themes, so this read white-on-gold there. Pinned dark like the rest. */
#l-retry-btn:hover { background: var(--highlight); border-color: var(--german); color: var(--on-gold); }

/* ════════════════════════════════════════════════════════
   QUIZ — Multiple Choice
   ════════════════════════════════════════════════════════ */
.l-mc-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 4px;
}
.l-mc-tile {
  padding: 10px 22px;
  
}
.l-mc-tile:hover:not(:disabled) {
  border-color: rgba(var(--wash-rgb),0.40);
  background: rgba(var(--wash-rgb),0.07);
  transform: translateY(-1px);
}
.l-mc-tile:active:not(:disabled) { transform: translateY(0) scale(0.97); }
.l-mc-tile.mc-correct {
  border-color: transparent;
  background: var(--correct-bg);
  color: var(--correct-ink);
}
.l-mc-tile.mc-wrong {
  border-color: transparent;
  background: var(--wrong-bg);
  color: var(--wrong-ink);
}
.l-mc-tile:disabled { cursor: default; }

/* ════════════════════════════════════════════════════════
   QUIZ — Word Order
   ════════════════════════════════════════════════════════ */
.l-wo-answer-area { margin: 16px 0 4px; }
.l-wo-bank-area   { margin: 4px 0 16px; }
.l-wo-label {
  font-size: 0.55em;
  color: var(--ink-mid);
  text-transform: uppercase;
  letter-spacing: var(--track-label-tight);
  margin-bottom: 8px;
}
.l-wo-slots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  background: rgba(var(--wash-rgb),0.02);
  transition: border-color var(--dur-base);
}
.l-wo-slots:has(.l-wo-tile) { border-color: rgba(var(--wash-rgb),0.35); }
.l-wo-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
  padding: 8px 4px;
}
.l-wo-tile {
  padding: 7px 16px;
  
}
.l-wo-tile:hover:not(:disabled) {
  border-color: rgba(var(--wash-rgb),0.40);
  background: rgba(var(--wash-rgb),0.07);
  transform: translateY(-1px);
}
.l-wo-tile:active:not(:disabled) { transform: translateY(0) scale(0.97); }
.l-wo-tile.wo-correct {
  border-color: transparent;
  background: var(--correct-bg);
  color: var(--correct-ink);
  cursor: default;
}
.l-wo-tile.wo-wrong {
  border-color: transparent;
  background: var(--wrong-bg);
  color: var(--wrong-ink);
  cursor: default;
}
.l-wo-tile:disabled { cursor: default; }
.l-wo-placeholder {
  color: var(--ink-mid);
  font-style: normal;
  font-size: 0.6em;
  align-self: center;
}

/* ════════════════════════════════════════════════════════
   QUIZ — Matching Pairs
   ════════════════════════════════════════════════════════ */
.l-match-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 16px 0;
}
@media (max-width: 480px) {
  .l-match-grid { grid-template-columns: 1fr; }
}
.l-match-col { display: flex; flex-direction: column; gap: 8px; }
.l-match-col-label {
  font-size: 0.75em;
  color: var(--ink-mid);
  text-transform: uppercase;
  letter-spacing: var(--track-label-tight);
  text-align: center;
  padding-bottom: 4px;
}
.l-match-tile {
  padding: 10px 14px;
  
}
.l-match-tile:hover:not(:disabled):not(.match-paired) {
  border-color: rgba(0,0,0,0.40);
  background: rgba(0,0,0,0.07);
  transform: translateY(-1px);
}
.l-match-tile:active:not(:disabled) { transform: translateY(0) scale(0.97); }
.l-match-tile.match-active {
  border-color: var(--german);
  background: rgba(0,0,0,0.08);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.10);
}
.l-match-tile.match-paired { cursor: default; }
.l-match-tile.match-correct {
  border-color: transparent !important;
  background: var(--correct-bg) !important;
  color: var(--correct-ink) !important;
}
.l-match-tile.match-wrong {
  border-color: transparent !important;
  background: var(--wrong-bg) !important;
  color: var(--wrong-ink) !important;
}

/* Eight pair shades — greyscale steps (dark on light) */
.match-p0 { border-color: rgba(0,0,0,0.80) !important; background: rgba(0,0,0,0.07) !important; color: rgba(0,0,0,0.88) !important; }
.match-p1 { border-color: rgba(0,0,0,0.66) !important; background: rgba(0,0,0,0.06) !important; color: rgba(0,0,0,0.78) !important; }
.match-p2 { border-color: rgba(0,0,0,0.54) !important; background: rgba(0,0,0,0.05) !important; color: rgba(0,0,0,0.68) !important; }
.match-p3 { border-color: rgba(0,0,0,0.44) !important; background: rgba(0,0,0,0.04) !important; color: rgba(0,0,0,0.60) !important; }
.match-p4 { border-color: rgba(0,0,0,0.36) !important; background: rgba(0,0,0,0.04) !important; color: rgba(0,0,0,0.54) !important; }
.match-p5 { border-color: rgba(0,0,0,0.28) !important; background: rgba(0,0,0,0.03) !important; color: rgba(0,0,0,0.48) !important; }
.match-p6 { border-color: rgba(0,0,0,0.22) !important; background: rgba(0,0,0,0.03) !important; color: rgba(0,0,0,0.44) !important; }
.match-p7 { border-color: rgba(0,0,0,0.16) !important; background: rgba(0,0,0,0.02) !important; color: rgba(0,0,0,0.40) !important; }

/* ════════════════════════════════════════════════════════
   QUIZ — Fill in Click
   ════════════════════════════════════════════════════════ */
.l-fic-blank {
  display: inline-block;
  min-width: 4ch;
  padding: 1px 6px;
  border-bottom: 2px solid var(--highlight);
  color: var(--ink-mid);
}
.l-fic-filled {
  color: var(--german);
  border-bottom-color: var(--german);
  font-style: normal;
}

/* ════════════════════════════════════════════════════════
   QUIZ — Error Correction
   ════════════════════════════════════════════════════════ */
.l-ec-word {
  display: inline-block;
  padding: 1px 5px;
  border-bottom: 2px solid rgba(0,0,0,0.28);
  color: rgba(0,0,0,0.38);
}
.l-ec-fixed {
  border-bottom-color: rgba(0,0,0,0.80);
  color: rgba(0,0,0,0.88);
  font-style: normal;
}
.l-ec-wrong {
  border-bottom-color: rgba(0,0,0,0.22);
  color: rgba(0,0,0,0.32);
}

/* ════════════════════════════════════════════════════════
   QUIZ — Shake animation
   ════════════════════════════════════════════════════════ */
@keyframes l-shake {
  0%   { transform: translateX(-5px); }
  25%  { transform: translateX(5px); }
  50%  { transform: translateX(-3px); }
  75%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}
.shake { animation: l-shake var(--dur-slow) linear; }

/* ════════════════════════════════════════════════════════
   PASSAGES
   ════════════════════════════════════════════════════════ */
.l-passage {
  background: var(--card-bg);
  padding: 24px 26px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.l-passage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  pointer-events: none;
  opacity: 0.8;
}
.l-passage-inner { position: relative; z-index: 1; }

.l-passage-label {
  font-family: var(--sans);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 14px;
  display: block;
}
.l-passage-text-de {
  font-style: normal;
  font-size: var(--body-size);
  font-weight: 500;
  line-height: 1.72;
  color: var(--german);
  margin-bottom: 16px;
 letter-spacing: var(--body-tracking);}
.l-passage-text-en {
  font-family: var(--body);
  font-size: var(--body-size);
  font-weight: 500;
  line-height: 1.72;
  color: var(--ink-muted);
  margin-bottom: 16px;
 letter-spacing: var(--body-tracking);}
.l-passage-direction {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-mid);
  margin-bottom: 10px;
}
.l-passage-textarea {
  width: 100%;
  min-height: 100px;
  background: rgba(var(--wash-rgb),0.02);
  border: 1px solid var(--divider);
  border-bottom: 2px solid var(--divider);
  padding: 12px 14px;
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--ink);
  outline: none;
  resize: vertical;
  transition: border-color var(--dur-fast);
  line-height: 1.65;
}
.l-passage-textarea:focus        { border-bottom-color: var(--german); }
.l-passage-textarea::placeholder { color: var(--ink-mid); }

/* ════════════════════════════════════════════════════════
   UNKNOWN BLOCK FALLBACK
   ════════════════════════════════════════════════════════ */
.l-unknown {
  padding: 16px 20px;
  border: 1px dashed rgba(0,0,0,0.18);
}
.l-unknown-label {
  font-family: var(--sans);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 8px;
  display: block;
}
.l-unknown-content {
  font-size: 0.92rem;
  color: var(--ink-muted);
  line-height: 1.6;
  white-space: pre-wrap;
}
.l-unknown-note {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--ink-mid);
}

/* ════════════════════════════════════════════════════════
   STICKY TOC (desktop only)
   ════════════════════════════════════════════════════════ */
.l-toc { display: none; }

@media (min-width: 1100px) {
  .l-toc {
    display: block;
    position: fixed;
    left: max(20px, calc(50% - 520px));
    top: 80px;
    width: 152px;
  }
  .l-toc-label {
    font-family: var(--sans);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink-mid);
    margin-bottom: 12px;
    display: block;
  }
  .l-toc-list { list-style: none; }
  .l-toc-list li { margin-bottom: 8px; }
  .l-toc-list a {
    font-family: var(--sans);
    font-size: 0.72rem;
    color: var(--ink-mid);
    text-decoration: none;
    transition: color var(--dur-fast);
    line-height: 1.4;
    display: block;
  }
  .l-toc-list a:hover,
  .l-toc-list a.active { color: var(--german); }
}

/* ════════════════════════════════════════════════════════
   MOBILE
   ════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  :root {
    --page-pad-x:  18px;
    --page-pad-y:  28px;
  }
  .l-exercise  { padding: 18px; }
  .l-passage   { padding: 18px; }
  #l-score-panel { padding: 28px 20px; }
  .l-hook p:first-child::first-letter { font-size: 3.2em; }
  .l-concept-title { font-size: 2rem; }
  .l-q-blank-standalone { min-width: 10ch; }
  .l-table-wrap {
    max-width: calc(100vw - 36px);
  }
  .l-formula-scale {
    max-width: calc(100vw - 36px);
  }
  .l-formula {
    justify-content: flex-start;
    padding-left: 0;
  }
  .l-example-item {
    padding-left: 0;
  }
  .l-mc-tiles {
    max-width: calc(100vw - 36px);
  }
  .l-match-grid {
    max-width: calc(100vw - 36px);
  }
}

.top-bar {
  position: sticky;
  top: 0;
  background-color: var(--bg);
  z-index: var(--z-bar);
  margin-bottom: 1rem;
  transition: transform var(--dur-slow) ease;
}
.top-bar--hidden {
  transform: translateY(-100%);
}

.top-bar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.1rem var(--page-pad-x) 0.05rem;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
  border-bottom: 1px solid rgba(255, 179, 0, 0.35);
}

.home-logo {
  height: 64px;
  width: auto;
  display: block;
  margin-left: -8px;
}

html:is([data-theme="dark"], [data-theme="wald"]) .home-logo { filter: invert(1); }

.home-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: var(--ink);
  opacity: 0.6;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--dur-base) ease;
  flex-shrink: 0;
  padding: 0.25rem;
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: var(--ink);
  opacity: 0.6;
  border: none;
  cursor: pointer;
  transition: opacity var(--dur-base) ease;
  flex-shrink: 0;
  padding: 0.25rem;
}

.home-btn:hover,
.theme-toggle:hover { opacity: 1; }

html:is([data-theme="dark"], [data-theme="wald"]) .top-bar-inner {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ════════════════════════════════════════════════════════
   NAV CONTROLS RELOCATION
   On desktop (≥ 1100px) the home logo + bulb move to the
   bottom of the TOC column.  On mobile they move to a
   fixed bottom strip.  The top bar hides in both cases.
   ════════════════════════════════════════════════════════ */

/* Hide the top bar once controls have been relocated */
body.has-toc-controls .top-bar,
body.has-nav-trigger  .top-bar { display: none; }

/* ── Desktop: controls pinned to bottom of TOC column ── */
@media (min-width: 1100px) {
  .l-toc-controls {
    position: fixed;
    left: max(20px, calc(50% - 520px));
    bottom: 32px;
    width: 152px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 44px;
  }
  .l-toc-controls .home-logo  { height: 56px; }
  .l-toc-controls .home-btn   { padding: 0; opacity: 0.55; }
  .l-toc-controls .home-btn:hover { opacity: 1; }
  .l-toc-controls .theme-toggle         { opacity: 0.55; }
  .l-toc-controls .theme-toggle:hover   { opacity: 1; }
  .l-toc-controls .theme-toggle svg     { width: 28px; height: 28px; }
}

/* ── Mobile: radial fan menu ── */
@media (max-width: 1099px) {

  /* Root — anchored at trigger position, items fan out from here */
  .l-nav-root {
    position: fixed;
    bottom: 36px;
    right: 24px;
    width: 52px;
    height: 52px;
    z-index: var(--z-panel);
  }

  /* Trigger button */
  .l-nav-trigger {
    position: absolute;
    inset: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.18);
    background: var(--bg);
    color: var(--ink);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.50;
    z-index: 2;
    transition: opacity var(--dur-base), border-color 0.2s;
  }
  .l-nav-trigger:hover,
  .l-nav-root.is-open .l-nav-trigger {
    opacity: 1;
    border-color: var(--accent);
  }

  /* Fan items — centered on trigger, start collapsed */
  .l-nav-root .theme-toggle,
  .l-nav-root .home-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.14);
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
    pointer-events: none;
    z-index: 1;
    /* Expo ease-out: fast launch, glides to rest — fluid and smooth */
    transition: transform 0.45s var(--ease-settle),
                opacity   0.22s ease;
  }

  /* Bulb goes straight up */
  .l-nav-root.is-open .theme-toggle {
    transform: translate(-50%, calc(-50% - 90px)) scale(1);
    opacity: 1;
    pointer-events: auto;
  }

  /* Home goes left, tiny stagger so they don't move in lockstep */
  .l-nav-root.is-open .home-btn {
    transform: translate(calc(-50% - 90px), -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
    transition-delay: var(--dur-fast);
  }

  /* Logo inside the circular home button */
  .l-nav-root .home-btn .home-logo { height: 30px; }
}

html:is([data-theme="dark"], [data-theme="wald"]) .l-nav-trigger,
html:is([data-theme="dark"], [data-theme="wald"]) .l-nav-root .theme-toggle,
html:is([data-theme="dark"], [data-theme="wald"]) .l-nav-root .home-btn {
  border-color: rgba(255,255,255,0.15);
}

html:is([data-theme="dark"], [data-theme="wald"]) .l-concept-title {
  color: #FAF8F5;
}

html:is([data-theme="dark"], [data-theme="wald"]) .l-concept-title-de {
  color: rgba(250, 248, 245, 0.45);
}

/* Dark-mode token overrides now live in tokens.css (imported above). */
html:is([data-theme="dark"], [data-theme="wald"]) .l-vocab-card__gender--der   { background: rgba(21,101,192,0.28); color: #90CAF9; }
html:is([data-theme="dark"], [data-theme="wald"]) .l-vocab-card__gender--die   { background: rgba(173,20,87,0.28);  color: #F48FB1; }
html:is([data-theme="dark"], [data-theme="wald"]) .l-vocab-card__gender--das   { background: rgba(46,125,50,0.28);  color: #A5D6A7; }

html:is([data-theme="dark"], [data-theme="wald"]) .l-table th {
  background: transparent;
  border-bottom: none;
  color: rgba(255,255,255,0.87);
}
html:is([data-theme="dark"], [data-theme="wald"]) .l-table td.cell-verb strong { background: rgba(255, 179, 0, 0.25); }

html:is([data-theme="dark"], [data-theme="wald"]) .l-vocab-table-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); }
html:is([data-theme="dark"], [data-theme="wald"]) .l-vocab-table th { background: var(--card-bg); }
html:is([data-theme="dark"], [data-theme="wald"]) .l-q-check-btn { border-color: rgba(255,255,255,0.18); }
html:is([data-theme="dark"], [data-theme="wald"]) .l-mc-tile { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); }
html:is([data-theme="dark"], [data-theme="wald"]) .l-wo-tile { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); }
html:is([data-theme="dark"], [data-theme="wald"]) .l-match-tile { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); }
html:is([data-theme="dark"], [data-theme="wald"]) .l-match-tile:hover:not(:disabled):not(.match-paired) { border-color: rgba(255,255,255,0.40); background: rgba(255,255,255,0.07); }
html:is([data-theme="dark"], [data-theme="wald"]) .l-match-tile.match-active { background: rgba(255,255,255,0.08); box-shadow: 0 0 0 3px rgba(255,255,255,0.10); }
html:is([data-theme="dark"], [data-theme="wald"]) .match-p0 { border-color: rgba(255,255,255,0.80) !important; background: rgba(255,255,255,0.07) !important; color: rgba(255,255,255,0.88) !important; }
html:is([data-theme="dark"], [data-theme="wald"]) .match-p1 { border-color: rgba(255,255,255,0.66) !important; background: rgba(255,255,255,0.06) !important; color: rgba(255,255,255,0.78) !important; }
html:is([data-theme="dark"], [data-theme="wald"]) .match-p2 { border-color: rgba(255,255,255,0.54) !important; background: rgba(255,255,255,0.05) !important; color: rgba(255,255,255,0.68) !important; }
html:is([data-theme="dark"], [data-theme="wald"]) .match-p3 { border-color: rgba(255,255,255,0.44) !important; background: rgba(255,255,255,0.04) !important; color: rgba(255,255,255,0.60) !important; }
html:is([data-theme="dark"], [data-theme="wald"]) .match-p4 { border-color: rgba(255,255,255,0.36) !important; background: rgba(255,255,255,0.04) !important; color: rgba(255,255,255,0.54) !important; }
html:is([data-theme="dark"], [data-theme="wald"]) .match-p5 { border-color: rgba(255,255,255,0.28) !important; background: rgba(255,255,255,0.03) !important; color: rgba(255,255,255,0.48) !important; }
html:is([data-theme="dark"], [data-theme="wald"]) .match-p6 { border-color: rgba(255,255,255,0.22) !important; background: rgba(255,255,255,0.03) !important; color: rgba(255,255,255,0.44) !important; }
html:is([data-theme="dark"], [data-theme="wald"]) .match-p7 { border-color: rgba(255,255,255,0.16) !important; background: rgba(255,255,255,0.02) !important; color: rgba(255,255,255,0.40) !important; }
html:is([data-theme="dark"], [data-theme="wald"]) .l-ec-word { border-bottom-color: rgba(255,255,255,0.28); color: rgba(255,255,255,0.38); }
html:is([data-theme="dark"], [data-theme="wald"]) .l-ec-fixed { border-bottom-color: rgba(255,255,255,0.80); color: rgba(255,255,255,0.88); }
html:is([data-theme="dark"], [data-theme="wald"]) .l-ec-wrong { border-bottom-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.32); }
html:is([data-theme="dark"], [data-theme="wald"]) .l-unknown { border-color: rgba(255,255,255,0.18); }
/* Paper theme's token overrides now live in tokens.css (imported above). */

html[data-theme="paper"] body::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");
  opacity: 0.7;
}

html[data-theme="paper"] .top-bar-inner {
  border-bottom: 1px solid rgba(28, 18, 10, 0.12);
}

/* ════════════════════════════════════════════════════════
   BIG IDEA
   ════════════════════════════════════════════════════════ */
.l-big-idea {
  padding: 1.4rem 0 0.4rem;
}
.l-big-idea-label { display: none; }
.l-big-idea p {
  font-size: var(--body-size);
  line-height: var(--body-lh);
  margin: 0 0 0.7rem;
 letter-spacing: var(--body-tracking);}

.l-drop-cap {
  font-family: var(--body);
  font-size: 4.4em;
  font-weight: 900;
  line-height: 0.78;
  float: left;
  margin-right: 0.08em;
  margin-top: 4px;
  color: var(--german);
  -webkit-text-stroke: 3px var(--german);
}

/* Topic DE label under subtitle */
.l-topic-de { display: none; }

/* ════════════════════════════════════════════════════════
   THREE THINGS TO REMEMBER
   ════════════════════════════════════════════════════════ */
.l-three-things {
  border-top: 4px solid var(--highlight);
  border-bottom: 4px solid var(--highlight);
  padding: 1.4rem 0;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.l-three-things-label {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0.9rem;
}
.l-three-things-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: takeaway-counter;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.l-three-things-item {
  counter-increment: takeaway-counter;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: var(--body-size);
  line-height: 1.62;
 letter-spacing: var(--body-tracking);}
.l-three-things-text {
  flex: 1;
}
.l-three-things-item::before {
  content: counter(takeaway-counter);
  font-family: var(--decorative);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  line-height: 1;
  color: var(--german);
  flex-shrink: 0;
  padding-top: 0.05em;
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════
   CLOSING LINE
   ════════════════════════════════════════════════════════ */
.l-closing-line {
  text-align: center;
  padding: 2rem 0 1rem;
  border-top: 1px solid rgba(0,0,0,0.12);
  margin-top: 1rem;
}
.l-closing-line-label {
  display: none;
}
.l-closing-german {
  font-family: var(--body);
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  font-weight: 900;
  font-style: normal;
  line-height: 1.1;
  margin: 0 0 0.4rem;
  color: var(--german);
  -webkit-text-stroke: 3px var(--german);
}
.l-closing-english {
  font-size: 0.85rem;
  opacity: 0.5;
  margin: 0;
}

html:is([data-theme="dark"], [data-theme="wald"]) .l-closing-line { border-top-color: rgba(255,255,255,0.10); }
html:is([data-theme="dark"], [data-theme="wald"]) .l-round-header { border-bottom-color: rgba(255,255,255,0.10); }

/* ── Unified callout label style ─────────────────────────── */
.l-rule-label,
.l-your-turn-label,
.l-checkpoint-icon,
.l-callout-label,
.l-master-closing-label,
.l-three-things-label,
.l-concept-number {
  color: var(--ink);
  font-size: var(--label-size);
  font-family: var(--sans);
  letter-spacing: var(--track-label);
}

/* ════════════════════════════════════════════════════════
   QUIZ ROUNDS  (7-round structure)
   ════════════════════════════════════════════════════════ */

.l-round-header {
  margin-bottom: 1.4rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(0,0,0,0.10);
}
.l-round-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--german);
  margin-bottom: 0.3rem;
}
.l-round-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.3rem;
}
.l-round-instruction {
  font-size: 0.88rem;
  opacity: 0.6;
  margin: 0;
}
.l-round-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.4rem;
  gap: 0.8rem;
}
.l-round-progress-label {
  font-size: 0.8rem;
  opacity: 0.5;
  text-align: center;
  flex: 1;
}

/* Sort into category */
.l-sort-categories {
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}
.l-sort-bucket {
  flex: 1;
  min-width: 140px;
  border: 1.5px dashed rgba(0,0,0,0.20);
  border-radius: var(--radius-sm);
  padding: 0.7rem;
  min-height: 80px;
}
.l-sort-bucket-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 0.6rem;
  display: block;
}
.l-sort-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.l-sort-tile {
  padding: 0.4rem 0.8rem;
  border: 1.5px solid var(--ink);
  background: transparent;
  border-radius: 4px;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.l-sort-tile:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
.l-sort-tile.sort-correct { border-color: var(--ink); background: var(--ink); color: var(--bg); opacity: 1; }
.l-sort-tile.sort-wrong   { opacity: 0.3; }

html:is([data-theme="dark"], [data-theme="wald"]) .l-sort-bucket { border-color: rgba(255,255,255,0.18); }
html:is([data-theme="dark"], [data-theme="wald"]) .l-sort-tile   { border-color: rgba(255,255,255,0.40); }
html:is([data-theme="dark"], [data-theme="wald"]) .l-sort-tile:hover:not(:disabled) { background: rgba(255,255,255,0.10); }

/* ════════════════════════════════════════════════════════
   QUIZ ENGINE — quiz.js styles
   ════════════════════════════════════════════════════════ */

/* ── Three Things section wrapper ──────────────────────── */
#l-three-things {
  padding-top: calc(var(--section-gap) * 0.5);
}

/* ── Quiz section wrapper ──────────────────────────────── */
#quiz-section {
  margin-top: 0;
  padding-top: 0;
}

.quiz-section-heading {
  font-family: var(--sans);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: var(--block-gap);
}

/* ── Rounds ────────────────────────────────────────────── */
.quiz-round { display: none; }
.quiz-round.is-active { display: block; }

.quiz-round-header {
  margin-bottom: 28px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--divider);
}

.quiz-round-title {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  color: var(--german);
  margin-bottom: 4px;
}

.quiz-round-instruction {
  font-family: var(--sans);
  font-size: var(--small-size);
  color: var(--ink-muted);
  line-height: 1.5;
}

/* ── Questions ─────────────────────────────────────────── */
.quiz-question {
  margin-bottom: 20px;
  padding: 20px 24px;
  background: var(--card-bg);
}
.quiz-question:last-child { margin-bottom: 0; }

.quiz-question-head { display: flex; align-items: baseline; gap: 12px; }
.quiz-question-number {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  opacity: 0.4;
  line-height: 1;
}

.quiz-prompt {
  font-family: var(--body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  margin-bottom: 14px;
 letter-spacing: var(--body-tracking);}

/* Sentence shown in spot-the-mistake */
.quiz-sentence {
  font-family: var(--body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--card-bg);
 letter-spacing: var(--body-tracking);}

.quiz-wrong-word {
  text-decoration: underline wavy;
  text-underline-offset: 3px;
}

/* ── Option buttons ────────────────────────────────────── */
.quiz-options {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}

/* Lettered hairline rows — same system as .rx-mcq-option */
.quiz-option {
  display: flex;
  gap: 12px;
  align-items: baseline;
  width: 100%;
  padding: 9px 4px;
  font-family: var(--body);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  background: transparent;
  color: var(--ink);
  border: none;
  border-bottom: 1px solid var(--divider);
  cursor: pointer;
  transition: background var(--dur-fast);
  -webkit-appearance: none;
  appearance: none;
 letter-spacing: var(--body-tracking);}
.quiz-option:last-child { border-bottom: none; }

.quiz-option .letter { min-width: 1.5em; font-weight: 700; color: var(--ink-mid); }
.quiz-option .text { color: var(--ink); }

.quiz-option:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 5%, transparent); }

.quiz-option:disabled { cursor: default; }

.quiz-option.is-correct .letter,
.quiz-option.is-correct .text { color: var(--correct-ink); font-weight: 600; }

.quiz-option.is-incorrect .letter,
.quiz-option.is-incorrect .text { color: var(--wrong-ink); }
.quiz-option.is-incorrect .text { text-decoration: line-through; opacity: 0.75; }

/* ── Explanation ───────────────────────────────────────── */
.quiz-explanation {
  display: none;
  font-family: var(--body);
  font-size: var(--small-size);
  line-height: 1.65;
  color: var(--ink-muted);
  margin-top: 12px;
  padding: 8px 14px;
}
.quiz-explanation.is-visible { display: block; }

/* ── Match Pairs ───────────────────────────────────────── */
.match-pairs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.match-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.match-item {
  display: block;
  padding: 10px 14px;
  border: 1.5px solid var(--divider);
  font-size: var(--body-size);
  font-family: var(--body);
  color: var(--ink);
  cursor: pointer;
  background: var(--bg);
  text-align: left;
  line-height: 1.4;
  transform: translateX(0);
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--dur-fast), border-color 0.1s;
 letter-spacing: var(--body-tracking);}

.match-item:hover:not(:disabled) {
  background: var(--card-bg);
  border-color: var(--ink);
}

.match-item.is-selected {
  font-weight: 700;
  border: 2px solid var(--ink);
  background: var(--card-bg);
}

.match-item.is-matched-correct {
  font-weight: 700;
  border: 2px solid var(--correct-border);
  background: var(--correct-bg);
}

.match-item.is-matched-incorrect {
  text-decoration: line-through;
  color: var(--wrong-ink);
  border-color: var(--wrong-border);
}

.match-item:disabled { cursor: default; }

.match-pair-feedback {
  display: none;
  font-family: var(--body);
  font-size: var(--small-size);
  color: var(--ink-muted);
  margin-top: 8px;
  padding: 8px 14px;
}
.match-pair-feedback.is-visible { display: block; }

/* ── Sort Into Category ────────────────────────────────── */
.sort-items-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1.5px solid var(--divider);
  min-height: 3rem;
}

.sort-item {
  padding: 6px 14px;
  border: 1.5px solid var(--divider);
  font-family: var(--body);
  font-size: var(--body-size);
  color: var(--ink);
  cursor: pointer;
  background: var(--bg);
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--dur-fast), border-color 0.1s;
 letter-spacing: var(--body-tracking);}

.sort-item:hover:not(:disabled) {
  background: var(--card-bg);
  border-color: var(--ink);
}

.sort-item.is-selected {
  font-weight: 700;
  border: 2px solid var(--ink);
}

.sort-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.sort-category {
  border: 1.5px solid var(--divider);
  padding: 10px;
  min-height: 5rem;
  cursor: pointer;
  transition: border-color var(--dur-fast);
}
.sort-category:hover { border-color: var(--ink); }

.sort-category-label {
  font-family: var(--sans);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--divider);
  display: block;
}

.sort-category-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 2rem;
}

/* ── Reorder Words ─────────────────────────────────────── */
.reorder-answer-area {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
  border: 1.5px solid var(--divider);
  min-height: 3.5rem;
  margin-bottom: 12px;
  transition: border-color var(--dur-base);
}
.reorder-answer-area.is-correct   { border-color: var(--correct-border); }
.reorder-answer-area.is-incorrect { border-color: var(--wrong-border); }

.reorder-word-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.reorder-word {
  padding: 6px 14px;
  border: 1.5px solid var(--divider);
  font-family: var(--body);
  font-size: var(--body-size);
  color: var(--ink);
  cursor: pointer;
  background: var(--bg);
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--dur-fast), border-color 0.1s;
 letter-spacing: var(--body-tracking);}

.reorder-word:hover:not(:disabled) {
  background: var(--card-bg);
  border-color: var(--ink);
}

.reorder-word.is-placed {
  background: var(--card-bg-deep);
  border-color: var(--ink);
  cursor: pointer;
}

.reorder-word:disabled { cursor: default; }

/* ── Navigation ────────────────────────────────────────── */
.quiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
}

/* The quiz footer button and the between-rounds button are one control
   in two places: they were declared separately and identically, which
   is how their hover states drifted apart and one of them ended up
   with an unreadable label on the dark themes. Declared once here;
   only their metrics differ below. */
.quiz-nav-btn,
.round-interstitial-btn {
  font-family: var(--sans);
  font-size: var(--small-size);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid rgba(255, 179, 0, 0.55);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--dur-base) ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.15s var(--ease-settle);
}

/* Fixed width so Back and Next stay the same size as the label changes. */
.quiz-nav-btn {
  width: 120px;
  padding: 10px 24px;
  text-align: center;
}

/* Pinned dark rather than following --ink, so the one rule holds in
   all four themes. This previously needed a Dark/Wald override to
   rescue it; that override was identical to this and has gone. */
.quiz-nav-btn:hover:not(:disabled) {
  background: var(--highlight);
  color: var(--on-gold);
  border-color: var(--german);
  transform: translateY(-2px);
}

.quiz-nav-btn:active:not(:disabled) { transform: translateY(0) scale(0.97); }

.quiz-nav-btn:disabled {
  color: var(--ink-mid);
  border-color: rgba(255, 179, 0, 0.18);
  cursor: default;
  background: transparent;
}

.quiz-progress {
  font-family: var(--sans);
  font-size: var(--label-size);
  color: var(--ink-muted);
  letter-spacing: var(--track-ui);
  font-variant-numeric: tabular-nums;
}

/* ── Round interstitial ────────────────────────────────── */
.round-interstitial-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(33, 33, 33, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow) ease;
}
.round-interstitial-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.round-interstitial-card {
  background: var(--bg);
  border-top: 3px solid color-mix(in srgb, var(--gold-dark) 45%, transparent);
  border-left: 1.5px solid var(--divider);
  border-right: 1.5px solid var(--divider);
  border-bottom: 1.5px solid var(--divider);
  padding: 40px 48px;
  text-align: center;
  max-width: 360px;
  width: calc(100% - 48px);
  transform: scale(0.95) translateY(10px);
  transition: transform var(--dur-slow) var(--ease-settle);
}
.round-interstitial-backdrop.is-visible .round-interstitial-card {
  transform: scale(1) translateY(0);
}
.round-interstitial-score {
  font-family: var(--display);
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.round-interstitial-label {
  font-family: var(--sans);
  font-size: var(--label-size);
  color: var(--ink-muted);
  letter-spacing: var(--track-ui);
  margin-bottom: 32px;
}
/* Wider than the footer button and unconstrained, because it sits alone
   in the card and its label is a sentence rather than a direction. */
.round-interstitial-btn {
  padding: 10px 32px;
}
/* The fill is --highlight, which is #FFB300 in every theme, so the
   label cannot follow --ink: that is warm chalk on the dark themes
   and lands near 1.6:1 on gold. Pinned dark, the way .h-cta and the
   dark-theme .quiz-nav-btn override already do. */
.round-interstitial-btn:hover {
  background: var(--highlight);
  color: var(--on-gold);
  border-color: var(--german);
  transform: translateY(-2px);
}
.round-interstitial-btn:active { transform: translateY(0) scale(0.97); }

/* ── Lesson summary ────────────────────────────────────── */
.lesson-summary {
  display: none;
  margin-top: 28px;
  padding: 32px;
  border: 2px solid var(--ink);
  text-align: center;
}
.lesson-summary.is-visible { display: block; }

.lesson-summary-heading {
  font-family: var(--sans);
  font-size: var(--small-size);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.lesson-summary-score {
  font-family: var(--display);
  font-size: clamp(2.8rem, 7vw, 5rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

.lesson-summary-label {
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink-muted);
  margin-bottom: 24px;
}

.lesson-complete-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.lesson-next-primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  min-width: 180px;
}

.lesson-next-primary:hover { opacity: 0.8; }

.lesson-retake-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--size-sm);
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px;
}

.lesson-retake-link:hover { color: var(--ink); }

/* ── Focus states — visible keyboard navigation ──────────
   Global: every focusable element gets the same ring, instead
   of the old per-selector list that missed links, mode buttons,
   and quiz tiles. --german (not gold) so the ring clears 3:1
   contrast on light backgrounds; in dark themes --german is
   gold, which reads fine there. */
:focus-visible {
  outline: 2px solid var(--german);
  outline-offset: 2px;
}

/* ── Wobble animation ──────────────────────────────────── */
@keyframes wobble {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX(6px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}
.is-wobble { animation: wobble 0.4s ease !important; }

/* ── Dark mode ─────────────────────────────────────────── */
html:is([data-theme="dark"], [data-theme="wald"]) .match-item,
html:is([data-theme="dark"], [data-theme="wald"]) .sort-item,
html:is([data-theme="dark"], [data-theme="wald"]) .reorder-word {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.87);
  border-color: rgba(255,255,255,0.18);
}
html:is([data-theme="dark"], [data-theme="wald"]) .quiz-option { border-bottom-color: rgba(255,255,255,0.18); }
html:is([data-theme="dark"], [data-theme="wald"]) .quiz-option:last-child { border-bottom: none; }
html:is([data-theme="dark"], [data-theme="wald"]) .quiz-option .letter,
html:is([data-theme="dark"], [data-theme="wald"]) .quiz-option .text { color: rgba(255,255,255,0.87); }
html:is([data-theme="dark"], [data-theme="wald"]) .quiz-option.is-correct .letter,
html:is([data-theme="dark"], [data-theme="wald"]) .quiz-option.is-correct .text { color: var(--correct-ink); }
html:is([data-theme="dark"], [data-theme="wald"]) .quiz-option.is-incorrect .letter,
html:is([data-theme="dark"], [data-theme="wald"]) .quiz-option.is-incorrect .text { color: var(--wrong-ink); }
html:is([data-theme="dark"], [data-theme="wald"]) .match-item:hover:not(:disabled),
html:is([data-theme="dark"], [data-theme="wald"]) .sort-item:hover:not(:disabled),
html:is([data-theme="dark"], [data-theme="wald"]) .reorder-word:hover:not(:disabled) {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.55);
}
html:is([data-theme="dark"], [data-theme="wald"]) .quiz-nav-btn {
  color: rgba(255,255,255,0.87);
  border-color: rgba(255, 179, 0, 0.40);
}
html:is([data-theme="dark"], [data-theme="wald"]) .match-item.is-selected {
  border-color: rgba(255,255,255,0.60);
}
html:is([data-theme="dark"], [data-theme="wald"]) .lesson-summary {
  border-color: rgba(255,255,255,0.20);
}

/* ════════════════════════════════════════════════════════
   INTERACTION — Press feedback & transitions
   ════════════════════════════════════════════════════════ */

/* Reveal / check / nav press feedback */
.l-reveal-btn:active,
.l-q-check-btn:active,
#l-quiz-nav button:active,
#l-retry-btn:active {
  transform: scale(0.97);
}

.match-item:active:not(:disabled),
.sort-item:active:not(:disabled),
.reorder-word:active:not(:disabled) {
  transform: scale(0.97);
}

.l-sort-tile:active:not(:disabled) {
  transform: scale(0.97);
}

/* Transition for elements that didn't have transform in their base rule */
.match-item,
.sort-item,
.reorder-word {
  transition: background var(--dur-fast), border-color 0.1s,
              transform 0.12s var(--ease-settle);
}

/* Quiz round fade-in (no spatial movement — this is sequential content, not space) */
.quiz-round.is-active {
  animation: round-fade-in var(--dur-base) var(--ease-settle) forwards;
}

@keyframes round-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Score / lesson summary reveal */
#l-score-panel,
.lesson-summary {
  transition: opacity var(--dur-slow) var(--ease-settle),
              transform 300ms var(--ease-settle);
}

#l-score-panel.is-visible,
.lesson-summary.is-visible {
  animation: panel-reveal var(--dur-slow) var(--ease-settle) forwards;
}

@keyframes panel-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════
   TAP-TO-REVEAL — Block-by-block
   Concept children + all post-concept sections start hidden.
   JS adds .is-revealed on each tap.
   Transition only when motion is allowed.
   ════════════════════════════════════════════════════════ */

/* Space-collapsing hide — used instead of display:none so that
   browser Ctrl+F / ⌘F can still find text inside hidden blocks. */
.l-pre-reveal {
  max-height: 0 !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  pointer-events: none !important;
}

.l-concept > *,
.l-section:not(#l-big-idea):not(#l-concepts),
.l-footer {
  opacity: 0;
}
.l-concept > *.is-revealed,
.l-section:not(#l-big-idea):not(#l-concepts).is-revealed,
.l-footer.is-revealed {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .l-concept > *,
  .l-section:not(#l-big-idea):not(#l-concepts),
  .l-footer {
    transition: opacity var(--dur-slow) ease-out;
  }
}

/* The old l-btn-blink faded the button to 12% opacity, so for half of
   every cycle the control the reader is meant to press was invisible.
   This moves instead of dimming: it stays fully solid and leans toward
   the edge it is anchored to. */
@keyframes l-btn-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-4px); }
}

/* ─── Continue button ─────────────────────────────────────
   Parked against the right edge rather than floating at the
   bottom centre, where it sat over the reading column and
   competed with the dot nav. Square against the bezel, rounded
   on the inside: a key sticking out of the edge. Same shape at
   both sizes — the touch layout further down only scales it up
   and clears the home indicator. */
.l-continue-btn {
  position: fixed;
  right: 0;
  bottom: 40px;
  width: 54px;
  height: 50px;
  border: none;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  background: var(--gold);
  color: var(--on-gold);
  padding: 0;
  /* The JS writes a 'V' into the button; the chevron below replaces it,
     so the glyph is zeroed out rather than removed from the markup. */
  font-size: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-float);
  box-shadow: -3px 3px 16px rgba(0, 0, 0, 0.16);
  animation: l-btn-nudge 2.8s ease-in-out infinite;
  transition: background var(--dur-base), opacity 0.4s, transform 0.15s ease-out;
}
/* Chevron drawn from two borders rather than set in Flegrei: crisp at
   any size, immune to the font failing to load, and it takes the
   button's own colour. Pulled left of centre because the squared-off
   right edge drags the optical centre outward. */
.l-continue-btn::before {
  content: '';
  width: 15px;
  height: 15px;
  margin: -5px 4px 0 0;
  border-right:  2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  border-radius: 0 0 3px 0;
  transform: rotate(45deg);
}
.l-continue-btn:hover {
  background: var(--gold-dark);
  animation: none;
  opacity: 1;
  transform: translateX(-4px);  /* leans out of the edge to meet the cursor */
}
.l-continue-btn:active {
  animation: none;
  transform: translateX(3px);   /* presses back into the bezel */
}
.l-continue-btn.is-done {
  opacity: 0;
  pointer-events: none;
  animation: none;
}

/* ════════════════════════════════════════════════════════
   ACCESSIBILITY — Reduced Motion
   ════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════
   REDESIGN — rx-* namespaced components
   Same design tokens; new editorial layout.
   Only active when #lesson-root has data-redesign="true".
   ════════════════════════════════════════════════════════ */

/* Override the 720px #lesson-root constraint for redesign pages.
   #lesson-root.rx has higher specificity than #lesson-root alone. */
#lesson-root.rx {
  max-width: 1180px;
  padding: 0 28px 120px;
}

/* The old paging system hides .l-section with opacity:0 via a
   high-specificity (2,1,0) rule. Override it for redesign pages. */
#lesson-root.rx .l-section:not(#l-big-idea):not(#l-concepts),
#lesson-root.rx .l-footer {
  opacity: 1;
  transition: none;
}

/* Section dividers — continue the concept rhythm into Reference, Vocabulary, Quiz */
#lesson-root.rx #l-reference,
#lesson-root.rx #l-vocabulary,
#lesson-root.rx #quiz-section {
  border-top: 1px solid var(--divider);
  padding-top: 68px;
}

/* Reading progress bar */
.rx-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--highlight); z-index: var(--z-float);
  transition: width var(--dur-fast) linear;
}

/* Top bar */
.rx-top {
  position: sticky; top: 0; z-index: var(--z-bar);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,179,0,0.35);
}
.rx-top-inner {
  max-width: 1180px; margin: 0 auto; padding: 1rem 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.rx-mark { display: flex; align-items: center; text-decoration: none; }
/* The horizontal lockup, so the mark reads in front of the word rather
   than stacked above it. It is a 6:1 strip, so it takes far less height
   than the stacked one did for the same presence. */
.rx-mark-img {
  /* 44px, not 30: the lockup carries a tagline now, so the same
     height renders a smaller wordmark. This restores it. */
  height: 44px; width: auto; display: block;
  /* Down to the same 0.6 the theme toggle sits at. On a lesson page the
     logo is not the thing being read, and at full strength it pulled
     against the text. */
  opacity: 0.6;
  transition: opacity var(--dur-base);
}
.rx-mark:hover .rx-mark-img { opacity: 1; }
/* wald is a dark theme too. It was left out, so the green view was
   showing a black logo on a near-black bar. */
html:is([data-theme="dark"], [data-theme="wald"]) .rx-mark-img { filter: invert(1); }
.rx-top-right { display: flex; align-items: center; gap: 1.3rem; }

/* Desktop shows the wordmark and no burger; the phone block below
   swaps both. Declared here rather than only in the media query so
   the default is the full lockup even if the query never matches. */
.rx-mark-icon { display: none; }
.rx-burger { display: none; }

/* ── The bar on a phone ────────────────────────────────
   At 390px the lockup, "All lessons" and two icon buttons cannot
   share one row: the wordmark wraps to two lines and the controls
   crowd the edge. The mark drops to its icon, and everything that
   was competing with it moves behind a burger.

   The burger and the panel are the home page's, copied deliberately
   from .h-burger and .h-menu in site-header.css — same 26x3 bars
   with the short gold one that crosses, same full-screen panel, same
   large bold destinations. A reader moving from the home page into a
   lesson should meet the same button doing the same thing. If either
   file changes, the other has to follow.

   .rx-top-right is not rebuilt as a menu — it is the same element,
   repositioned. lesson-renderer.js injects the highlighter and the
   theme toggle into it at runtime, so a separate panel would have
   been a panel those two never reached. */
@media (max-width: 720px) {
  .rx-top-inner { padding: 0.8rem 18px; }

  .rx-mark-full { display: none; }
  .rx-mark-icon { display: block; height: 26px; }

  .rx-burger {
    display: flex; flex-direction: column; gap: 5px; align-items: flex-end;
    background: none; border: none; padding: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .rx-burger span {
    display: block; width: 26px; height: 3px; border-radius: var(--radius-tight);
    background: var(--ink);
    transition: transform var(--dur-slow) var(--ease-ui),
                opacity 160ms var(--ease-ui),
                width 260ms var(--ease-ui),
                background-color 260ms var(--ease-ui);
  }
  .rx-burger span:last-child { width: 15px; background: var(--gold); }
  /* The gold bar keeps its gold: it is the one that crosses. */
  .rx-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .rx-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .rx-burger[aria-expanded="true"] span:nth-child(3) {
    width: 26px; background: var(--gold); transform: translateY(-8px) rotate(-45deg);
  }

  /* absolute, NOT fixed — and this is the one thing that cannot be
     copied verbatim from the home page.

     .rx-top carries backdrop-filter, and a filtered element becomes
     the containing block for any position:fixed descendant inside it.
     So "fixed; inset: 0" here resolved against the header bar rather
     than the viewport: the panel came out the size of a thin strip,
     its background covered nothing, and its contents spilled down the
     lesson. The home page's .h-menu is a SIBLING of its bar, inside a
     .hero with no filter, which is the only reason the identical rule
     works there.

     Anchored to .rx-top instead, which is the nearest positioned
     ancestor: top:100% starts it flush under the bar, and 100vw x
     100dvh covers everything below. No filter is involved, so nothing
     can quietly re-parent it again. */
  .rx-top-right {
    position: absolute;
    top: 100%; left: 0;
    width: 100vw; height: 100dvh;
    z-index: 5;
    background: var(--bg);
    /* Starts below the bar already, so it needs nothing like the home
       page's 104px of clearance. */
    padding: 32px 20px 40px;
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0;
    /* What replaces the body scroll lock. touch-action stops a drag on
       the panel from scrolling the lesson behind it; overscroll-behavior
       stops any scroll that does start from chaining outward. Neither
       makes body non-scrolling, so .rx-top stays sticky and this panel
       stays under it. */
    touch-action: none;
    overscroll-behavior: contain;
    opacity: 0; visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--dur-slow) var(--ease-ui),
                transform 240ms var(--ease-ui),
                visibility 240ms var(--ease-ui);
  }
  .rx-top-right.is-open { opacity: 1; visibility: visible; transform: none; }

  /* The home page's menu type. .rx-back is a small uppercase label in
     the desktop bar; at this size it is a destination, so it takes the
     same treatment .h-menu a does. */
  .rx-top-right .rx-back {
    font-size: clamp(1.5rem, 7vw, 2rem); font-weight: 800;
    letter-spacing: -0.025em; text-transform: none;
    color: var(--ink);
    padding: 18px 0;
    border-bottom: 1px solid var(--divider);
  }
  .rx-top-right .rx-back:active { color: var(--gold-dark); }

  /* The two icon buttons are controls, not places, so they keep their
     icons rather than becoming headings — but at a size worth aiming
     a thumb at, on their own row at the foot of the panel. */
  .rx-top-right .rx-theme,
  .rx-top-right .rx-reader {
    opacity: 1;
    padding: 20px 0 0;
    align-self: flex-start;
  }
  /* No margin-top:auto here. The panel's foot is a bar's height below
     the fold, so anything pushed to the bottom lands off screen. */
  /* ── The controls, at the panel's scale ──────────────
     The destinations here are clamp(1.5rem, 7vw, 2rem) and bold.
     Icons drawn for a 34px-tall bar sit under them looking like
     something left over from a different screen, which is what
     they were. 30px is roughly the cap-height of that type and
     the width of the burger that opened this panel, so the whole
     panel is built to one measure.

     The row stays full width even though only a glyph shows: the
     target is the row, not the mark. An icon you have to aim at is
     a small target however large it is drawn. */
  .rx-top-right .rx-theme,
  .rx-top-right .rx-reader,
  .rx-top-right .rx-side {
    display: flex; align-items: center; justify-content: flex-start;
    width: 100%; padding: 19px 0;
    opacity: 1; color: var(--ink);
  }
  .rx-top-right .rx-theme svg,
  .rx-top-right .rx-reader svg,
  .rx-top-right .rx-side svg { width: 30px; height: 30px; }

  /* Drawn for 19px, so at 30 the strokes come out thin against
     the burger's 3px bars. Thickened to land in the same weight. */
  .rx-top-right .rx-theme svg    { stroke-width: 2.4; }
  .rx-top-right .rx-side  svg    { stroke-width: 2.2; }

  /* On is the one state worth reading across the room, and with
     the words gone the colour is the only thing left to say it. */
  .rx-top-right .rx-reader[aria-pressed="true"] { color: var(--german); }
  .rx-top-right .rx-side[aria-pressed="true"]   { color: var(--german); }
}
.rx-back {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-mid);
  text-decoration: none; transition: color var(--dur-base);
}
.rx-back:hover { color: var(--german); }
.rx-theme {
  appearance: none; background: none; border: none; cursor: pointer;
  color: var(--ink); opacity: 0.6; padding: 0.2rem; display: grid; place-items: center;
  transition: opacity var(--dur-base);
}
.rx-theme:hover { opacity: 1; }
.rx-theme svg { width: 19px; height: 19px; }
.rx-theme .moon { display: none; }

/* ── Reading highlighter ──────────────────────────────────
   A band of ~6 words follows the pointer through the lesson
   text, pacing the eye the way a finger or a marker does.
   The band is painted with the CSS Custom Highlight API, so
   nothing is wrapped in spans: the German markup (gold
   italics, wavy error underlines, bold key forms) survives
   untouched, and text selection still works normally.

   The toggle is injected next to the theme switch by
   lesson-renderer.js, and only on browsers that support the
   API. Off by default; the choice is remembered per reader. */
.rx-reader {
  appearance: none; background: none; border: none; cursor: pointer;
  color: var(--ink); opacity: 0.6; padding: 0.2rem; display: grid; place-items: center;
  transition: opacity var(--dur-base), color 0.15s;
}
.rx-reader:hover { opacity: 1; }
.rx-reader svg { width: 19px; height: 19px; }
/* On, and therefore no longer chrome: it takes the accent so the
   reader can tell at a glance that the band is live. */
.rx-reader[aria-pressed="true"] { opacity: 1; color: var(--german); }

/* ::highlight() accepts only a short list of properties, and
   background-color is the one that matters here. Values are
   literal rather than tokens so the paint never depends on
   custom-property resolution inside a highlight pseudo. */
::highlight(reading-band) {
  background-color: rgba(255, 179, 0, 0.32);
}
html:is([data-theme="dark"], [data-theme="wald"]) ::highlight(reading-band) {
  background-color: rgba(255, 179, 0, 0.24);
}
html[data-theme="paper"] ::highlight(reading-band) {
  background-color: rgba(255, 179, 0, 0.38);
}

/* While the band is live, the caret would otherwise flicker between
   text and default as the pointer crosses inline markup. */
body.reading-band-on #lesson-root { cursor: default; }

/* ── The reading rail ──────────────────────────────────
   The touch half of the highlighter. A strip down the left
   margin: tap beside a line to light it, drag to run the band
   down the page. Only ever shown on a coarse pointer — the JS
   adds .read-rail-on — because a mouse already does this job by
   hovering and a second way to do it would just be clutter.

   40px wide. That sits over the page padding and most of the
   card padding, so it stops short of anything a reader could
   want to press. It is under .rx-top (z-index 100), which keeps
   the bar and the burger on top of it and reachable. */
.l-read-rail { display: none; }

body.read-rail-on .l-read-rail {
  display: block;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 40px;
  z-index: var(--z-rail);
  /* The one line that makes dragging work: without it the browser
     claims the gesture as a scroll before the first move event and
     the band never follows the finger. */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* The full-height hairline that used to be here is gone. It ran
   the length of every page next to prose meant to be read
   quietly, and a permanent gold line in the margin competes with
   the very thing it is meant to help you attend to. The dot below
   is mark enough: it shows where the band is, which is the only
   place the rail matters. */

/* Where the band currently is, shown on the rail. It answers
   "where am I" without the reader having to find the highlight,
   and it is what teaches the gesture: the dot moves with the
   finger the first time anyone drags. Positioned by transform
   only, and untransitioned, so it tracks rather than lags.

   Faint on purpose. It is a bearing, not a control — nothing is
   gained by it being easy to look at. */
.l-read-thumb {
  position: absolute; left: 6px; top: 0;
  width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  transition: opacity var(--dur-base) ease;
  pointer-events: none;
}

/* ── Which corner the controls live in ────────────────
   .controls-left mirrors the chevron, the map tab and the reading
   rail together. Moving only the chevron would leave one control
   on each edge, which is more clutter than it started with, not
   less. Everything the reading thumb touches belongs on one side.

   Each mirrored rule flips four things, not one: the edge it is
   pinned to, the corners that are rounded, the border dropped
   where it meets the bezel, and the direction the shadow falls.
   Miss any of them and the control looks stuck on rather than
   built in. */
body.controls-left .l-continue-btn {
  left: 0; right: auto;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.16);
  animation-name: l-btn-nudge-left;
}
/* The chevron is nudged off-centre to correct for the squared
   edge; that correction changes sides with it. */
body.controls-left .l-continue-btn::before { margin: -5px 0 0 4px; }
body.controls-left .l-continue-btn:hover  { transform: translateX(-3px); }
body.controls-left .l-continue-btn:active { transform: translateX(-3px); }
@keyframes l-btn-nudge-left {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

body.controls-left .gm-tab { left: 0; right: auto; }
body.controls-left .gm-tab:hover { transform: translateX(4px); }
body.controls-left .gm-tab-link {
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  border-left: none; border-right: 1px solid var(--divider);
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.14);
}

body.read-rail-on.controls-left .l-read-rail { left: auto; right: 0; }
body.controls-left .l-read-thumb { left: auto; right: 6px; }

/* The mark inside the glyph moves to the edge it describes. */
.rx-side .side-mark { transform-box: fill-box; transform-origin: center; }
body.controls-left .rx-side .side-mark { transform: translateX(-10px); }
.rx-side {
  appearance: none; background: none; border: none; padding: 0;
  cursor: pointer; color: var(--ink-mid); opacity: 0.6;
  transition: opacity var(--dur-base), color 0.15s;
  display: flex; align-items: center;
}
.rx-side:hover { opacity: 1; }
.rx-side svg { width: 19px; height: 19px; display: block; }

html:is([data-theme="dark"], [data-theme="wald"]) .rx-theme .sun { display: none; }
html:is([data-theme="dark"], [data-theme="wald"]) .rx-theme .moon { display: block; }

/* Main layout */
.rx { max-width: 1180px; margin: 0 auto; padding: 0 28px 120px; position: relative; z-index: 1; }

/* ── HERO ─────────────────────────────────────────────── */
.rx-hero { position: relative; padding: clamp(36px, 8vh, 90px) 0 48px; overflow: hidden; }
.rx-hero-ghost {
  position: absolute; top: 50%; right: -2%; transform: translateY(-50%);
  font-family: var(--display); font-weight: 900;
  font-size: clamp(140px, 26vw, 420px); line-height: 0.8;
  color: var(--ink); opacity: 0.05; letter-spacing: -0.04em;
  pointer-events: none; user-select: none; z-index: 0; white-space: nowrap;
}
.rx-hero-inner { position: relative; z-index: 1; max-width: 900px; }
.rx-eyebrow {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
  font-family: var(--sans); font-size: 0.74rem; font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--german);
}
.rx-eyebrow .num {
  font-family: var(--decorative); font-weight: 900; font-size: 1.6rem;
  color: var(--german); -webkit-text-stroke: 1.5px var(--german); line-height: 1;
  letter-spacing: 0; margin-right: 2px;
}
.rx-eyebrow .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.rx-title {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.7rem, 8vw, 6rem); line-height: 0.94;
  letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; margin-bottom: 26px;
}
.rx-sub {
  font-family: var(--body); font-size: var(--body-size); font-weight: 500;
  line-height: 1.45; color: var(--ink-muted); max-width: 38ch; text-wrap: pretty;
 letter-spacing: var(--body-tracking);}
.rx-hero-rule { height: var(--accent-bar-height); background: var(--highlight); margin-top: 44px; max-width: 120px; }

/* ── BIG IDEA ─────────────────────────────────────────── */
.rx-bigidea { max-width: 720px; margin: 60px 0 0; }
.rx-bigidea p { font-size: var(--body-size); font-weight: 500; line-height: 1.55; color: var(--ink); margin-bottom: 1.1em; text-wrap: pretty;  letter-spacing: var(--body-tracking);}
.rx-bigidea p:last-child { margin-bottom: 0; }
.rx-bigidea .l-content-list { margin-bottom: 1.1em; }
.rx-bigidea .l-content-list:last-child { margin-bottom: 0; }
.rx-bigidea p:first-child::first-letter {
  font-family: var(--display); font-weight: 900; font-size: 4.4em; line-height: 0.72;
  float: left; margin: 6px 14px 0 0; color: var(--german); -webkit-text-stroke: 3px var(--german);
}

/* ── SECTION BAND ─────────────────────────────────────── */
.rx-band {
  display: flex; align-items: center; gap: 16px; margin: 88px 0 8px;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-mid);
}
.rx-band::after { content: ''; flex: 1; height: 1px; background: var(--divider); }
.rx-band .tag { color: var(--german); }

/* ── CONCEPT ──────────────────────────────────────────── */
.rx-concept {
  display: grid; grid-template-columns: 132px 1fr; gap: 40px;
  padding: 68px 0; border-bottom: 1px solid var(--divider);
}
.rx-concept:last-of-type { border-bottom: none; }
.rx-concept-rail { position: relative; }
.rx-concept-rail .big {
  position: sticky; top: 100px;
  font-family: var(--decorative); font-weight: 900;
  font-size: clamp(3.5rem, 7vw, 6rem); line-height: 0.8; color: var(--german);
  -webkit-text-stroke: 2px var(--german); letter-spacing: -0.02em;
}
.rx-concept-rail .lbl {
  font-family: var(--sans); font-size: 0.62rem; font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-mid); margin-top: 12px;
}
.rx-concept-body { min-width: 0; }
.rx-concept-title {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.05;
  letter-spacing: -0.025em; color: var(--ink); margin-bottom: 6px; text-wrap: balance;
}
.rx-concept-de { font-family: var(--body); font-size: 0.95rem; color: var(--german); font-weight: 500; margin-bottom: 22px; }
.rx-intro { font-size: var(--body-size); font-weight: 500; line-height: 1.6; color: var(--ink); margin-bottom: 36px;  letter-spacing: var(--body-tracking);}
.rx-concept-body > .l-content-list { margin-bottom: 36px; }
.rx-stack > * + * { margin-top: 32px; }
.rx-stack > p { font-size: var(--body-size); font-weight: 500; line-height: 1.6;  letter-spacing: var(--body-tracking);}

/* ── RULE BOX ─────────────────────────────────────────── */
.rx-rule {
  background: var(--card-bg);
  padding: 32px 36px; position: relative; overflow: hidden;
}
.rx-rule::before { content: ''; position: absolute; inset: 0; background-image: var(--noise); opacity: 0.7; pointer-events: none; }
.rx-rule::after {
  content: '§';
  position: absolute; right: 8px; bottom: -46px; z-index: 0;
  font-family: var(--decorative); font-weight: 900;
  font-size: 240px; line-height: 1; color: var(--german); opacity: 0.055;
  pointer-events: none; user-select: none;
}
.rx-rule-bar { position: relative; z-index: 1; height: var(--accent-bar-height); width: 56px; background: var(--highlight); margin-bottom: 18px; }
.rx-rule .eyebrow, .rx-aside .eyebrow, .rx-turn .eyebrow {
  position: relative; z-index: 1;
  font-family: var(--sans); font-size: 0.68rem; font-weight: var(--label-weight);
  letter-spacing: var(--track-label); text-transform: var(--label-transform); margin-bottom: 12px; display: block;
}
.rx-rule .eyebrow { color: var(--german); }
.rx-rule p { position: relative; z-index: 1; font-size: var(--body-size); line-height: 1.5; color: var(--ink); font-weight: 500; margin: 0; text-wrap: pretty;  letter-spacing: var(--body-tracking);}
.rx-rule p + p { position: relative; z-index: 1; margin-top: 10px; }
.rx-rule p + .l-content-list { position: relative; z-index: 1; margin-top: 20px; }
.rx-rule .l-content-list + p { position: relative; z-index: 1; margin-top: 20px; }

/* ── ASIDE (Watch Out / Note / Trick / Alert) ───────────
   Neutral paper, fine top rule in the kind's ink.        */
/* Sticker treatment: white fill merging into the white die-cut
   rim, ink outline, soft lift. Kind colour lives in the label.
   Shared by callouts and both quiz card engines. */
.rx-aside,
.l-q-item,
#lesson-root.rx .quiz-question {
  /* Sticker paper: white pulled toward the theme's card grey so it
     sits with the page instead of glaring against it. */
  --sticker-paper: color-mix(in srgb, #FFFFFF 60%, var(--card-bg));
  background: var(--sticker-paper);
  border: 2.5px solid var(--ink);
  border-radius: 28px;
  padding: 28px 32px;
  position: relative; overflow: hidden;
  /* The rim stays true sticker paper — white melting into the
     page. The original wide drop does the separating work in the
     light themes: it's the shadow, not the rim's colour, that
     lets you find the die-cut edge on a pale page. */
  box-shadow:
    0 0 0 6px var(--sticker-paper),
    0 14px 28px rgba(0, 0, 0, 0.12);
}
html:is([data-theme="dark"], [data-theme="wald"]) .rx-aside,
html:is([data-theme="dark"], [data-theme="wald"]) .l-q-item,
html:is([data-theme="dark"], [data-theme="wald"]) #lesson-root.rx .quiz-question {
  /* Dark modes: a fine die-cut line does the outline work, and a
     ghost rim — barely lighter than the page — sits just outside
     it, echoing how the white rim nearly melts into the paper
     theme's cream. Same tight seat as the activity panels,
     offset past the rim. */
  background: var(--card-bg);
  border-color: rgba(255, 255, 255, 0.92);
  border-width: 1.5px;
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--ink) 10%, var(--bg)),
    0 7px 2px -5px rgba(0, 0, 0, 0.35),
    0 10px 8px -4px rgba(0, 0, 0, 0.25);
}
.rx-aside::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: var(--noise); opacity: 0.7; pointer-events: none; }
.rx-aside .eyebrow { color: var(--warn-border); }
.rx-aside[data-kind="note"] .eyebrow { color: var(--ink-mid); }
.rx-aside[data-kind="trick"] .eyebrow { color: var(--correct-ink); }
.rx-aside[data-kind="alert"] .eyebrow { color: var(--corrected-ink); }
.rx-aside p { position: relative; z-index: 1; font-size: var(--body-size); font-weight: 500; line-height: 1.6; color: var(--ink); margin: 0;  letter-spacing: var(--body-tracking);}
.rx-aside p + p { margin-top: 8px; }
.rx-aside p + .l-content-list { margin-top: 16px; }
.rx-aside .l-content-list + p { margin-top: 16px; }
.rx-aside .rx-table-wrap { position: relative; z-index: 1; margin-top: 16px; }

/* Tables inside stickers inherit the global print treatment. */

/* ── TABLE ────────────────────────────────────────────── */
.rx-table-wrap { overflow-x: auto; }
.rx-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.rx-table th {
  font-family: var(--sans); font-size: 0.66rem; font-weight: 700; letter-spacing: var(--track-label-tight);
  text-transform: uppercase; color: var(--ink-mid); text-align: left; padding: 12px 16px;
  border-bottom: 2px solid var(--ink); white-space: nowrap;
}
.rx-table td { padding: 14px 16px; border-bottom: 1px solid var(--divider); color: var(--ink); vertical-align: top; }
.rx-table td:first-child { font-weight: 700; color: var(--german); white-space: nowrap; }
.rx-table tr:last-child td { border-bottom: none; }

/* ── YOUR TURN / CHECKPOINT ───────────────────────────── */
/* Activity panels are stripe silver in every theme: the same
   ink-over-bg tint the table zebra rows use, so German words and
   accents pop against a neutral field. Text is the page's own
   ink — no re-inking. Raised, not floating: a light top lip and
   two tight shadows; the lip dims in dark themes where a bright
   edge would glow. */
.rx-turn {
  background: color-mix(in srgb, var(--ink) 4.5%, var(--bg));
  border-radius: var(--radius-sm);
  padding: 28px 32px;
  position: relative; overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 3px 8px rgba(0, 0, 0, 0.07);
}
html:is([data-theme="dark"], [data-theme="wald"]) .rx-turn {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 3px 8px rgba(0, 0, 0, 0.25);
}
.rx-turn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: var(--noise); opacity: 1; pointer-events: none; }
/* Gold-outline buttons vanish on the gold tint — ground them in ink */
.rx-turn .rx-reveal { border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
/* Answers and feedback are white paper slips stuck on the note:
   ink on white, maximum contrast in every theme. */
.rx-turn .rx-mcq-feedback.correct,
.rx-turn .rx-mcq-feedback.wrong,
.rx-turn .rx-answer {
  background: #FFFFFF;
  color: #1C1208;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: var(--shadow-resting);
  --german:      #92400E;
  --correct-ink: #00695C;
  --wrong-ink:   var(--warn-border);
}
.rx-turn > * { position: relative; z-index: 1; }
.rx-turn .eyebrow { color: var(--german); }
.rx-turn .q { font-size: var(--body-size); font-weight: 500; line-height: 1.55; color: var(--ink); margin: 0;  letter-spacing: var(--body-tracking);}

/* ── TEXTBOOK MCQ (inside Your Turn / Check) ──────────── */
.rx-mcq + .rx-mcq { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--divider); }
.rx-mcq-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.rx-mcq-num {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  color: var(--ink); opacity: 0.4; line-height: 1;
}
.rx-mcq-prompt { font-size: var(--body-size); font-weight: 500; line-height: 1.5; color: var(--ink); margin: 0;  letter-spacing: var(--body-tracking);}
.rx-mcq-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rx-mcq-option {
  display: flex; gap: 12px; align-items: baseline;
  margin: 0 -16px;
  padding: 9px 16px;
  cursor: pointer; border-bottom: 1px solid var(--divider);
}
.rx-mcq-option:last-child { border-bottom: none; }
.rx-mcq-option:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.rx-mcq-option .letter { min-width: 1.5em; font-weight: 700; color: var(--ink-mid); }
.rx-mcq-option .text { font-size: var(--body-size); color: var(--ink);  letter-spacing: var(--body-tracking);}
.rx-mcq-option.correct .letter,
.rx-mcq-option.correct .text { color: var(--correct-ink); font-weight: 600; }
.rx-mcq-option.wrong .letter,
.rx-mcq-option.wrong .text { color: var(--wrong-ink); }
.rx-mcq-option.wrong .text { text-decoration: line-through; opacity: 0.75; }
.rx-mcq-options.is-locked .rx-mcq-option { cursor: default; }
.rx-mcq-options.is-locked .rx-mcq-option:hover { background: none; }
.rx-mcq-feedback { margin-top: 12px; font-size: 0.95rem; line-height: 1.5; color: var(--ink-muted); display: none; }
.rx-mcq-feedback.correct,
.rx-mcq-feedback.wrong { display: block; }
.rx-mcq-feedback.correct { color: var(--correct-ink); }
.rx-mcq-feedback.wrong { color: var(--wrong-ink); }
.rx-reveal {
  margin-top: 16px; appearance: none; background: transparent;
  border: 1.5px solid rgba(255,179,0,0.55); color: var(--ink);
  font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: var(--track-label);
  text-transform: uppercase; padding: 9px 18px; cursor: pointer; display: inline-block;
  transition: background var(--dur-base), border-color 0.15s, transform 0.12s;
}
/* Hover fills with the page's paper, not a gold flood — the
   button previews the white answer slip it's about to reveal. */
.rx-reveal:hover { background: var(--bg); border-color: var(--german); }
.rx-reveal:active { transform: scale(0.97); }
.rx-answer { display: none; margin-top: 14px; padding: 14px 16px; background: var(--correct-bg); font-size: var(--body-size); font-weight: 500; color: var(--ink);  letter-spacing: var(--body-tracking);}
.rx-answer.open { display: block; }
.rx-answer strong, .rx-answer .de { color: var(--german); }

/* ── THREE THINGS ─────────────────────────────────────── */
.rx-three { border-top: 4px solid var(--highlight); border-bottom: 4px solid var(--highlight); padding: 36px 0; margin: 80px 0; }
.rx-three-h { text-align: center; font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-mid); margin-bottom: 28px; }
.rx-three-list { list-style: none; display: grid; gap: 22px; max-width: 820px; margin: 0 auto; }
.rx-three-item { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; }
.rx-three-item .n { font-family: var(--decorative); font-weight: 900; font-size: 2.8rem; line-height: 0.8; color: var(--german); -webkit-text-stroke: 1.5px var(--german); }
.rx-three-item .t { font-size: 1.15rem; line-height: 1.55; color: var(--ink); padding-top: 4px; }

/* ── CLOSING ──────────────────────────────────────────── */
.rx-closing { text-align: center; padding: 90px 0 20px; }
.rx-closing .de-line { font-family: var(--display); font-weight: 900; font-size: clamp(1.8rem, 5vw, 3.2rem); line-height: 1.05; color: var(--german); -webkit-text-stroke: 2px var(--german); letter-spacing: -0.02em; }
.rx-closing .en-line { font-size: var(--body-size); font-weight: 500; color: var(--ink-muted); margin-top: 14px;  letter-spacing: var(--body-tracking);}
.rx-next {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 40px;
  font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: var(--track-label);
  text-transform: uppercase; text-decoration: none; color: var(--ink);
  border: 1.5px solid rgba(255,179,0,0.55); padding: 13px 26px; transition: background var(--dur-base), transform 0.15s;
}
.rx-next:hover { background: var(--highlight); border-color: var(--german); transform: translateY(-2px); }

/* ── Paging reveal — initial hidden state for rx elements ─ */
#lesson-root.rx .rx-concept-rail,
#lesson-root.rx .rx-concept-body > .rx-concept-title,
#lesson-root.rx .rx-concept-body > .rx-concept-de,
#lesson-root.rx .rx-concept-body > .rx-intro,
#lesson-root.rx .rx-stack > * {
  opacity: 0;
}
#lesson-root.rx .rx-concept-rail.is-revealed,
#lesson-root.rx .rx-concept-body > .rx-concept-title.is-revealed,
#lesson-root.rx .rx-concept-body > .rx-concept-de.is-revealed,
#lesson-root.rx .rx-concept-body > .rx-intro.is-revealed,
#lesson-root.rx .rx-stack > *.is-revealed {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  #lesson-root.rx .rx-concept-rail,
  #lesson-root.rx .rx-concept-body > .rx-concept-title,
  #lesson-root.rx .rx-concept-body > .rx-concept-de,
  #lesson-root.rx .rx-concept-body > .rx-intro,
  #lesson-root.rx .rx-stack > * {
    transition: opacity var(--dur-slow) ease-out;
  }
}

/* ── Mobile ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .rx-concept { grid-template-columns: 1fr; gap: 18px; }
  .rx-concept-rail { display: flex; align-items: baseline; gap: 14px; }
  .rx-concept-rail .big { position: static; font-size: 3.2rem; }
  .rx-concept-rail .lbl { margin-top: 0; }
  body.rx-page .rx-back { display: block; }
}

/* ════════════════════════════════════════════════════════
   QUIZ — rx reskin
   Scoped to #lesson-root.rx so other lessons are untouched.
   ════════════════════════════════════════════════════════ */

/* Section header — concept-title style */
#lesson-root.rx #quiz-section .l-section-label {
  display: block;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--ink);
  line-height: 1.05;
  margin: 0 0 6px;
  border-bottom: none;
  padding-bottom: 0;
}
#lesson-root.rx #quiz-section .l-section-label::after { display: none; }

/* Round header — visible below the section title */
#lesson-root.rx .quiz-round-header { display: block; }

/* Question card — top border card instead of left border */
#lesson-root.rx .quiz-question {
  padding: 26px 30px 36px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
#lesson-root.rx .quiz-question::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.6;
  pointer-events: none;
}
#lesson-root.rx .quiz-question > * { position: relative; z-index: 1; }

#lesson-root.rx .quiz-question-number { font-size: 0.95rem; }

#lesson-root.rx .quiz-prompt {
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Option rows — rx sizing, matches .rx-mcq-option */
#lesson-root.rx .quiz-options { margin-bottom: 0; }

#lesson-root.rx .quiz-option {
  margin: 0 -16px;
  padding: 9px 16px;
}
#lesson-root.rx .quiz-option .text { font-size: var(--body-size);  letter-spacing: var(--body-tracking);}
#lesson-root.rx .quiz-option:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}

/* Explanation — italic left-bordered reveal */
#lesson-root.rx .quiz-explanation {
  display: block;
  visibility: hidden;
  opacity: 0;
  margin-top: 16px;
  padding: 12px 16px;
  font-size: 0.97rem;
  color: var(--ink-muted);
  line-height: 1.6;
  background: none;
  transition: opacity var(--dur-slow) ease;
}
#lesson-root.rx .quiz-explanation.is-visible {
  visibility: visible;
  opacity: 1;
}

/* Navigation */
#lesson-root.rx .quiz-nav {
  margin-top: 32px;
  border-top: none;
  padding-top: 0;
}

/* Round interstitial score — gold in rx variant */
#lesson-root.rx .round-interstitial-score { color: var(--german); }

/* Lesson summary — rx card style */
#lesson-root.rx .lesson-summary {
  border: none;
  background: var(--card-bg);
  border-top: var(--accent-border-width) solid var(--highlight);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
}
#lesson-root.rx .lesson-summary::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.6;
  pointer-events: none;
}
#lesson-root.rx .lesson-summary > * { position: relative; z-index: 1; }
#lesson-root.rx .lesson-summary-score { color: var(--german); }

/* Tables inside concepts — larger body text */
#lesson-root.rx .l-table { font-size: 1.1rem; }
#lesson-root.rx .l-table th { font-size: 1.1rem; padding: 13px 16px; }
#lesson-root.rx .l-table td { padding: 13px 16px; }

/* Dark mode adjustments */

/* ── One-at-a-time question display ───────────────────── */
#lesson-root.rx .quiz-round.is-active .quiz-question {
  display: none;
  margin-bottom: 0;
}
#lesson-root.rx .quiz-round.is-active .quiz-question.rx-q-active {
  display: block;
  animation: rx-q-in var(--dur-slow) var(--ease-settle);
}
@keyframes rx-q-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Pip footer — inside the question card ────────────── */
.rx-q-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--divider);
}
.rx-q-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rx-q-pips {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.rx-q-pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: var(--ink-faint);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background var(--dur-base), transform 0.2s;
}
.rx-q-pip:hover { background: var(--ink-mid); }
.rx-q-pip.on {
  background: var(--german);
  transform: scale(1.5);
  cursor: default;
}
.rx-q-pip.done { background: var(--ink-mid); }
.rx-q-pip.on.done { background: var(--german); }
.rx-q-count { display: none; }

/* ── Redesign: vertical dot nav ──────────────────────────── */
.rx-nav {
  position: fixed;
  right: max(20px, calc(50% - 615px));
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  z-index: var(--z-float);
}
body.rx-page .rx-nav { display: flex; }
@media (max-width: 899px) {
  .rx-nav {
    right: auto;
    left: 50%;
    top: auto;
    bottom: 32px;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 36px;
  }
  .rx-nav-dot { width: 8px; height: 8px; }
  .rx-nav-dot .rx-nav-tip {
    display: block;
    right: auto;
    left: 50%;
    top: auto;
    bottom: 18px;
    border-bottom: 2px solid var(--german);
    padding: 2px 10px 4px;
    transform: translateX(-50%) translateY(4px);
  }
  /* ── Continue button, touch layout ─────────────────────
     Same edge tab as desktop, scaled for a thumb: past the 44px
     target minimum, a heavier shadow to lift it off busy lesson
     content, and the safe-area inset so it clears the iPhone home
     indicator. Everything else is inherited. */
  .l-continue-btn {
    bottom: calc(36px + env(safe-area-inset-bottom));
    width: 62px;
    height: 58px;
    box-shadow: -3px 3px 18px rgba(0, 0, 0, 0.22);
    -webkit-tap-highlight-color: transparent;
  }
  .l-continue-btn::before { width: 16px; height: 16px; margin-top: -6px; }
  /* :hover sticks after a tap on touch, which would strand the button
     4px off the edge with its nudge dead. Neutralise it; only the press
     state should move. :active must restate the transform because it
     would otherwise lose the cascade to the :hover rule above it. */
  .l-continue-btn:hover {
    transform: none;
    background: var(--gold);
    animation: l-btn-nudge 2.8s ease-in-out infinite;
  }
  .l-continue-btn:active {
    background: var(--gold-dark);
    transform: translateX(3px);
    animation: none;
  }
  .rx-nav-dot.rx-tip-active .rx-nav-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.rx-nav-dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-mid);
  opacity: 0.22;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--dur-base), transform 0.25s, opacity 0.2s;
  flex-shrink: 0;
}
.rx-nav-dot:hover {
  background: var(--german);
  opacity: 1;
  transform: scale(1.8);
}
.rx-nav-dot.rx-active {
  background: var(--german);
  opacity: 1;
  transform: scale(1.4);
}

.rx-nav-tip {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 0.44rem;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mid);
  background: var(--bg);
  padding: 2px 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base) ease, transform 0.18s ease;
}
.rx-nav-dot:hover .rx-nav-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
@media (max-width: 1199px) { .rx-nav-tip { display: none; } }

/* ════════════════════════════════════════════════════════
   SUPERR SHOULDERS — big soft top corners on card blocks,
   pill buttons, soft inner chrome. One corner language.
   ════════════════════════════════════════════════════════ */

/* Card blocks: full capsule rounding + a raised seat on the paper.
   Definition ring stays; the wide drop is swapped for a bright
   top edge and two tight shadows — seated, not floating. */
.rx-rule,
.l-vc-card-inner,
.l-table-wrap, .rx-table-wrap,
.round-interstitial-card, .lesson-summary {
  border-radius: var(--shoulder);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 3px 8px rgba(0, 0, 0, 0.07);
}
html:is([data-theme="dark"], [data-theme="wald"]) .rx-rule,
html:is([data-theme="dark"], [data-theme="wald"]) .l-vc-card-inner,
html:is([data-theme="dark"], [data-theme="wald"]) .l-table-wrap,
html:is([data-theme="dark"], [data-theme="wald"]) .rx-table-wrap,
html:is([data-theme="dark"], [data-theme="wald"]) .round-interstitial-card,
html:is([data-theme="dark"], [data-theme="wald"]) .lesson-summary {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
/* Tables inside stickers stay printed on the sticker — no card */
.rx-aside .l-table-wrap, .rx-aside .rx-table-wrap,
html:is([data-theme="dark"], [data-theme="wald"]) .rx-aside .l-table-wrap,
html:is([data-theme="dark"], [data-theme="wald"]) .rx-aside .rx-table-wrap {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* Keep the paper grain inside the curve */
.rx-rule::before, .rx-aside::before,
#lesson-root.rx .quiz-question::before { border-radius: inherit; }

/* Buttons become pills */
.l-q-check-btn, #l-nav-prev, #l-nav-next, #l-reset-btn, #l-retry-btn,
.quiz-nav-btn, .round-interstitial-btn, .lesson-next-primary,
.rx-reveal, .l-reveal-btn {
  border-radius: var(--radius-pill);
}

/* Inner chrome: tiles, boxes, tables, inputs */
.match-item, .sort-item, .reorder-word, .sort-category,
.quiz-sentence, .l-q-sentence,
.quiz-explanation, .match-pair-feedback,
.rx-answer, .l-reveal-answer, .l-q-feedback,
.l-passage-textarea,
.l-vocab-table-wrap {
  border-radius: var(--radius-soft);
}

/* Smaller screens: shoulders scale down with the cards */
@media (max-width: 640px) {
  .rx-rule,
  .l-vc-card-inner,
  .l-table-wrap, .rx-table-wrap,
  .round-interstitial-card, .lesson-summary {
    border-radius: 28px;
  }
}

/* ── Application In Progress ───────────────────────────────
   Where the lesson's grammar goes to work: ten pieces of real
   German, read aloud. The card opens closed and grows under the
   reader's own hand, one piece per click, and folds back the same
   way. One translation switch governs the whole card. */

.rx-app {
  border-top: 4px solid var(--highlight);
  border-bottom: 4px solid var(--highlight);
  padding: 36px 0;
  margin: 80px 0;
}

/* The switch sits with the title, not with the passages, because it
   governs all of them. */
/* The eyebrow and title come from .l-section-label / .l-section-title,
   shared with Reference, Vocabulary and Quiz. Nothing to restyle here. */

/* A switch, so it reads as a setting rather than an instruction. */
.rx-app-switch {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}

.rx-app-switch-label {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  color: var(--ink-mid);
  opacity: 0.7;
  transition: opacity var(--dur-fast) ease, color var(--dur-fast) ease;
}

.rx-app-switch-track {
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--card-bg-deep);
  box-shadow: inset 0 0 0 1.5px var(--divider);
  transition: box-shadow var(--dur-fast) ease;
}

.rx-app-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink-mid);
  opacity: 0.55;
  transition: transform var(--dur-fast) ease, background var(--dur-fast) ease, opacity var(--dur-fast) ease;
}

.rx-app-switch:hover .rx-app-switch-label { opacity: 1; }

.rx-app-switch.is-on .rx-app-switch-label { opacity: 1; color: var(--german); }
.rx-app-switch.is-on .rx-app-switch-track { box-shadow: inset 0 0 0 1.5px var(--german); }
.rx-app-switch.is-on .rx-app-switch-knob  { transform: translateX(16px); background: var(--german); opacity: 1; }

.rx-app-list {
  display: grid;
  gap: 26px;
  max-width: 820px;
  margin: 0 auto;
}
/* Closed, the list takes no room and leaves no gap above the footer. */
.rx-app-list.is-empty { display: none; }

.rx-app-item[hidden] { display: none; }

.rx-app-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  align-items: start;
}

/* The index recedes: a place-marker, not part of the reading. */
.rx-app-n {
  font-family: var(--decorative);
  font-weight: 900;
  font-size: 2.8rem;
  line-height: 0.8;
  color: var(--ink);
  opacity: 0.22;
}

.rx-app-body { min-width: 0; }

/* Set for reading aloud: larger than body copy, generous leading,
   nothing competing with it on the line. */
.rx-app-de {
  font-size: 1.24rem;
  line-height: 1.62;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}

.rx-app-en {
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.6;
  margin: 8px 0 0;
}

/* Arriving pieces fade up rather than snapping in, so a click reads
   as one more thing arriving and not as the page jumping. */
.rx-app-item.is-arriving {
  animation: rx-app-in 320ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes rx-app-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.rx-app-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
.rx-app-list.is-empty + .rx-app-foot { margin-top: 4px; }

.rx-app-count {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  color: var(--ink-mid);
  opacity: 0.6;
  min-width: 8ch;
  text-align: center;
}

/* Round, and carrying a direction rather than a sentence. The chevron
   is drawn from two borders, the same way .l-continue-btn draws its
   own: crisp at any size, immune to a font failing to load, and it
   takes the button's colour for free. */
.rx-app-btn {
  appearance: none;
  cursor: pointer;
  width: 42px;
  height: 42px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--divider);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease,
              background var(--dur-fast) ease;
}

.rx-app-btn::before {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

/* Down to bring the next one in, up to fold the last one away. The
   nudge corrects the optical centre, since a rotated square hangs
   low inside a circle. */
.rx-app-btn.is-fwd::before  { transform: rotate(45deg)   translate(-2px, -2px); }
.rx-app-btn.is-back::before { transform: rotate(-135deg) translate(-2px, -2px); }

.rx-app-btn:hover {
  border-color: var(--german);
  color: var(--german);
  background: var(--card-bg);
}
.rx-app-btn:active { transform: scale(0.94); }
.rx-app-btn.is-back { opacity: 0.7; }
.rx-app-btn.is-back:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rx-app-item.is-arriving { animation-duration: 1ms; }
}

@media (max-width: 640px) {
  .rx-app-item { grid-template-columns: 40px 1fr; gap: 14px; }
  .rx-app-n { font-size: 1.9rem; }
  .rx-app-de { font-size: 1.1rem; }
  .rx-app-foot { gap: 10px; }
  .rx-app-btn { width: 38px; height: 38px; }
}