/* rue-exp — unified English. Visual identity = RUE2 family (not RUPL copper).
   Silver accent, blue only for the focus ring (look C, 2026-09-25) ·
   soft teal success · warm muted wrong. */

/* Shared colours and the serif come from css/tokens.css, loaded first (LOOK
   move 1, 2026-09-25). What stays here is this app's own: older names kept as
   aliases, and the values the site still sets differently. */
:root {
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  /* RUE2 calm feedback (not neon green / alarm red) */
  --wrong-text: #b8a990;
  /* Silver, like --accent (look C, 2026-09-25) */
  --accent-dim: rgba(198, 205, 214, 0.12);
  --accent-border: rgba(198, 205, 214, 0.35);
  /* Vocab's tiles and pills: the teal went grey with look C */
  --vocab-accent: var(--ink-soft);
  --vocab-accent-dim: rgba(198, 205, 214, 0.05);
  --vocab-accent-border: var(--line);
  --locked: #4a4a4a;
  --font: var(--sans);
}

/* Gentium Book Plus, self-hosted (James, 2026-10-02): the serif for titles
   and the English being practised. Made for Latin and Greek scholarship; full
   Czech, and Greek and Cyrillic for later L1s. Two weights, 400 and 700, so
   the titles' 600 draws in the 700. Source Serif 4's files stay in fonts/:
   the site still uses them. OFL, licence beside the files. */
@font-face {
  font-family: "Gentium Book Plus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/gentium-book-plus-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Gentium Book Plus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/gentium-book-plus-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Gentium Book Plus";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/gentium-book-plus-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Gentium Book Plus";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/gentium-book-plus-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Gentium Book Plus";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/gentium-book-plus-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Gentium Book Plus";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/gentium-book-plus-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cyrillic for the Russian L1 lines (2026-10-07). Cinzel has none; the brand
   line is Latin. */
@font-face {
  font-family: "Gentium Book Plus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/gentium-book-plus-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Gentium Book Plus";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/gentium-book-plus-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Gentium Book Plus";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/gentium-book-plus-cyrillic-400-italic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Cinzel, the capitals of Trajan's Column: the brand line only, a few words
   in capitals (James, 2026-10-02). One weight. OFL. */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cinzel-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cinzel-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* {
  box-sizing: border-box;
}

/* The one blue left (look C, 2026-09-25): the keyboard focus ring. Without
   it each browser draws its own, and Edge's is amber. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Every link gets a readable default, so none falls back to the browser's
   dark blue on the dark card (the welcome box's "take the vocabulary test",
   2026-09-26). :where() adds no specificity: any link with its own class
   rule keeps its look, hover included. Visited stays the same colour. */
:where(a[href]) {
  color: var(--ink-soft);
  text-decoration: underline;
}

:where(a[href]:hover, a[href]:focus) {
  color: var(--ink);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 1.0625rem;
  background: var(--bg);
  color: var(--text);
  padding: 0.75rem 1rem 2rem;
  line-height: 1.45;
}

.container {
  max-width: min(96vw, 42rem);
  margin: 0 auto;
}

.util-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.4rem 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* The brand in Cinzel, Roman inscription capitals (James, 2026-10-02):
   a few words in capitals, the one place the face is used. */
.util-bar .brand {
  color: var(--accent);
  font-family: var(--caps);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.9375rem;
}

.util-bar .sep {
  opacity: 0.4;
}


.util-btn {
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  margin-left: auto;
}

.util-btn:hover {
  border-color: var(--muted);
  color: var(--text);
}

.util-btn[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--text);
  background: transparent;
}

h1 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
  letter-spacing: -0.02em;
}

.sub {
  color: var(--muted);
  font-size: 0.9375rem;
  margin: 0 0 1.25rem;
}

.sub strong {
  color: var(--text);
  font-weight: 600;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}

.card h2 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0 0 0.65rem;
  color: var(--text);
  letter-spacing: 0.02em;
}

/* Deep link that opened nothing — banner over the map, same calm register. */
.deeplink-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--wrong);
  border-left: 3px solid var(--wrong);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.deeplink-notice-text {
  flex: 1;
}

.deeplink-notice strong {
  color: var(--text);
  font-weight: 600;
}

.deeplink-near,
.deeplink-logged {
  display: block;
  color: var(--muted);
  margin-top: 0.25rem;
}

.deeplink-near a {
  color: var(--accent);
  text-decoration: underline;
}

.deeplink-dismiss {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
}

.deeplink-dismiss:hover {
  color: var(--text);
}

/* Small labels: sentence case, one small grey style (James, 2026-09-25).
   PALMOVKA ENGLISH at the top stays uppercase, like the site's. */
.rail-label,
.tree-legend {
  font-size: 0.8125rem;
  margin-bottom: 0.45rem;
  font-weight: 400;
  color: var(--muted);
}

.tree-legend {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8125rem;
  margin: 0 0 0.75rem;
  line-height: 1.4;
}

.level-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.level-btn {
  font-family: var(--caps);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.level-btn[aria-pressed="true"] {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}

.level-btn.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--locked);
}

.unit-gloss {
  color: var(--muted);
  font-size: 0.8125rem;
  margin-top: 0.35rem;
}

.level-btn.is-preview {
  opacity: 0.6;
  border-style: dashed;
  border-color: var(--locked);
}

.level-btn.is-preview[aria-pressed="true"] {
  opacity: 0.85;
  color: var(--text);
  border-color: var(--accent);
}

.level-btn .tag {
  display: block;
  font-family: var(--sans);
  letter-spacing: normal;
  font-size: 0.8125rem;
  opacity: 0.85;
  font-weight: 400;
  color: var(--muted);
}

/* Path list */
.path-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.path-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 0.9375rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
}

.path-item:hover:not(:disabled) {
  border-color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.path-item[aria-pressed="true"] {
  border-color: var(--accent);
  background: transparent;
}

.path-item:disabled {
  opacity: 0.55;
  cursor: default;
}

.path-item .n {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
  min-width: 1.4rem;
  padding-top: 0.12rem;
}

.path-item .meta {
  flex: 1;
  min-width: 0;
}

.path-item .title {
  font-weight: 600;
}

.path-item .title-pl {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.8125rem;
}

.path-item .note {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.path-item .status {
  font-size: 0.8125rem;
  white-space: nowrap;
  padding-top: 0.15rem;
  font-weight: 400;
  color: var(--muted);
}

.path-item .status.is-fruit {
  color: var(--correct);
}

/* Credited by the head start: the fruit colour, dimmed — known, not yet played. */
.path-item .status.is-placed {
  color: var(--correct);
  opacity: 0.6;
}

.path-item .status.is-live {
  color: var(--muted);
}

/* Muted, not --locked: at 1.7:1 "Coming soon" was nearly invisible, and it
   is most of the C1/C2 paths (UI audit #3, James 2026-10-02). */
.path-item .status.is-planned {
  color: var(--muted);
}

/* Roots · Grammar / Canopy · Vocab chip panel removed 2026-08-10 */

/* Node detail */
.node-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.btn {
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.btn:hover:not(:disabled) {
  border-color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

a.btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  box-sizing: border-box;
}

.today-link {
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  border-bottom: 1px dashed var(--accent-border);
  cursor: pointer;
  padding: 0 0.1rem;
  text-decoration: none;
}

a.today-link:hover {
  border-bottom-color: var(--accent);
}

.today-muted {
  color: var(--muted);
  font-size: 0.9375rem;
}

.spine-pair {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.spine-badge {
  display: inline-block;
  font-size: 0.8125rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  margin-right: 0.35rem;
  font-weight: 400;
  color: var(--muted);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pill {
  display: inline-block;
  font-size: 0.8125rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--line);
  margin-right: 0.35rem;
  font-weight: 400;
  color: var(--muted);
}

.pill.live {
  color: var(--text);
  border-color: var(--line);
}

.pill.fruit {
  color: var(--correct);
  border-color: var(--correct);
}

/* Covered by the level test: the Done colour, dimmed, as on the path list. */
.pill.placed {
  color: var(--correct);
  border-color: var(--correct);
  opacity: 0.6;
}

/* Practice — clear stage separation (compact chrome so boards fit) */
.ladder-wrap {
  margin-bottom: 0.55rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}

.ladder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.15rem;
  margin-bottom: 0.4rem;
}

.ladder-step {
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.22rem 0.45rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

/* Where you are: a white outline, no fill (look C). */
.ladder-step.is-current {
  color: var(--text);
  border-color: var(--text);
  background: transparent;
}

/* Finished: grey with a tick (look audit, 2026-09-25). It was green, and
   green already means "correct" on the same screen. */
.ladder-step.is-done {
  color: var(--muted);
  border-color: var(--line);
  background: transparent;
}

/* Vocab steps you cannot open yet (grammar has none): faded, as the
   vocab pills were before the shared ladder (2026-10-02). */
.ladder-step:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ladder-arrow {
  color: var(--muted);
  opacity: 0.45;
  font-size: 0.8125rem;
  padding: 0 0.1rem;
  user-select: none;
}

/* On a phone the steps drop their numbers, so "5 · Use" never wraps onto a
   line of its own at 390 px (q20, 2026-10-02). */
@media (max-width: 479.98px) {
  .ladder-n {
    display: none;
  }

  /* Five steps with their ticks still fit one row at 390 px. */
  .ladder {
    column-gap: 0.1rem;
  }

  .ladder-step {
    padding: 0.22rem 0.3rem;
  }

  .ladder-arrow {
    padding: 0;
  }
}

/* The stage's one line of instructions, under the steps. It was a blue box
   with its own title ("Stage 3 · Type"), which said the stage a third time
   (James, 2026-09-25, look audit). */
.stage-line {
  margin: 0.4rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.35;
}

/* Type and Use: the same line under the answer box, so the question sits
   higher (James, 2026-10-01). */
.stage-line--below {
  margin: 0.45rem 0 0;
}

.ladder-hint {
  margin-top: -0.35rem;
  margin-bottom: 0.85rem;
  color: var(--muted);
  opacity: 0.95;
}

.key-hint {
  margin-top: 0.55rem;
  margin-bottom: 0;
  font-size: 0.8125rem;
}

/* RUE2-style bottom exit + intro nav */
.practice-exit {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

/* Vocab paints its own ← Home inside #practice-root. Hide the shell duplicate.
   Same while the fruit payoff is on screen (it already has Home). */
#view-practice:has(#practice-root .practice-exit) > .practice-exit,
#view-practice:has(#practice-root .fruit-payoff) > .practice-exit {
  display: none;
}

#node-detail .btn-ghost {
  display: block;
  margin: 0 0 0.65rem;
  padding: 0;
  text-align: left;
}

.btn-ghost {
  font-family: inherit;
  font-size: 0.8125rem;
  padding: 0.45rem 0;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-ghost:hover {
  color: var(--text);
}

.nav {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.nav .btn {
  flex: 0 0 auto;
  text-align: center;
  padding: 0.55rem 1.1rem;
  font-size: 0.9375rem;
}

/* The main button: a thin grey outline, regular weight, as wide as its
   words (James, 2026-09-25: the silver slab was "too big and inelegant").
   After .nav .btn, so its size wins there too. */
.btn.primary {
  background: transparent;
  border-color: var(--muted);
  color: var(--text);
  font-size: 1rem;
  font-weight: 400;
  border-radius: var(--radius-btn);
}

.btn.primary:hover:not(:disabled) {
  background: transparent;
  border-color: var(--text);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.intro-kicker {
  font-size: 0.8125rem;
  margin: 0 0 0.35rem;
  font-weight: 400;
  color: var(--muted);
}

.btn.is-focus-target,
.card.is-focus-target {
  box-shadow: none;
  animation: focus-pulse 0.9s ease 0s 2;
}

@keyframes focus-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px var(--accent-dim);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(198, 205, 214, 0.3);
  }
}

.practice-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.35rem;
}

/* The one heading on a practice screen: the unit's name, set as a title in
   the serif at 600, as the site sets its titles (version C, 2026-09-25). */
.practice-head h2 {
  margin: 0;
  flex: 1;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
/* "Done" beside a finished unit's title (status audit, 2026-10-02). */
.practice-head h2 .unit-done {
  margin-left: 0.5rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--correct);
  vertical-align: middle;
}

.practice-prompt {
  font-size: 1.0625rem;
  font-weight: 400;
  margin: 0 0 0.5rem;
}

/* Fix-the-sentence items: the prompt IS the error, so it is coloured as one and
   labelled, or it reads as an ordinary sentence to translate. */
.fix-label {
  font-size: 0.8125rem;
  margin: 0 0 0.15rem;
  font-weight: 400;
  color: var(--muted);
}

.rw-u {
  font-style: normal;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Build Use: the situation in note form, in place of the sentence the
 * student used to copy (James, 2026-09-05, b1_work). */
.rw-cue {
  font-size: 1.0625rem;
  line-height: 1.5;
  margin: 0.3rem 0 0.5rem;
}

.rw-clue {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  margin: 0.45rem 0 0;
}

.practice-prompt--wrong {
  color: var(--wrong);
}

.practice-hint {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

.practice-hint .sound {
  color: var(--muted);
}

/* Quiz cue: the line that decides the answer, so full ink, prompt size. */
.practice-hint.practice-hint--cue {
  font-size: 1.0625rem;
  color: var(--text);
}

.intro-card {
  margin-bottom: 1rem;
}

.intro-card h3 {
  font-size: 0.9375rem;
  margin: 0 0 0.4rem;
}

.intro-card p {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* 15 px, as Reference tables are: at 13 px under 17 px bullets the key
   table was the smallest text on a phone (UI audit #7, 2026-10-02). */
.intro-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: 0.5rem 0;
}

.intro-table th,
.intro-table td {
  border: 1px solid var(--line);
  padding: 0.35rem 0.45rem;
  text-align: left;
  vertical-align: top;
}

.intro-table th {
  color: var(--text);
  font-weight: 600;
  background: transparent;
}

.intro-table td.is-now {
  background: transparent;
  box-shadow: none;
}

.intro-table.tense-grid td:first-child {
  color: var(--text);
  font-weight: 600;
  background: transparent;
  white-space: nowrap;
}
/* On a phone, at 15 px: tighter cells, and the tense grid's row names may
   wrap. That fits every intro table of up to three columns. The four-column
   word tables of B2 and C1 vocab (word, meaning, example, family) cannot fit
   321 px with whole words, and 81 of them already pushed the page sideways
   at 13 px; they scroll inside their own box instead, never the page.
   Grammar's four-column tables fit, and keep the full width. */
@media (max-width: 479.98px) {
  .intro-table th,
  .intro-table td { padding: 0.3rem 0.35rem; }
  .intro-table.tense-grid td:first-child { white-space: normal; }
  .q.intro-card .intro-table:has(th:nth-child(4)) {
    display: block;
    overflow-x: auto;
  }
}

.family-links {
  margin: 1rem 0 0.6rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.family-links-page .family-links {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.family-links-kicker {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0 0 0.35rem;
}
.family-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.family-links li {
  margin: 0.2rem 0;
}
.family-link {
  color: var(--accent);
}
.family-link:hover {
  text-decoration: underline;
}
.family-link.is-coming {
  color: var(--muted);
}
.family-links-step {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  margin: 0 0 0.45rem;
  align-items: baseline;
}
.family-links-dot {
  color: var(--muted);
}
/* Grammar finish card: related units sit under the way on, smaller, so
 * they do not read as the next step (James, 2026-10-02). */
.done-also .family-links {
  font-size: 0.875rem;
  margin-top: 1.25rem;
}
/* Word formation intro page: the two exam drills, under the family list. */
.family-practice-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  align-items: baseline;
  margin: 0.9rem 0 0;
  font-size: 0.875rem;
}

.use-sheet {
  margin: 1rem 0 0.8rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.use-sheet-kicker {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0 0 0.4rem;
}
.use-sheet-list {
  margin: 0 0 0.6rem;
  padding-left: 1.3rem;
}
.use-sheet-list li {
  margin: 0.45rem 0;
}
.use-sheet-en {
  color: var(--text, #eee);
}
.use-sheet-en strong {
  font-weight: 600;
}
.use-sheet-cz {
  color: var(--muted);
  font-size: 0.9375rem;
  margin-top: 0.12rem;
}
.use-sheet-why {
  color: var(--muted);
  font-size: 0.9375rem;
  margin-top: 0.2rem;
}
.use-sheet-why strong {
  color: var(--text, #eee);
  font-weight: 600;
}
.use-sheet-miss {
  display: inline-block;
  margin-left: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--wrong-text, #b8a990);
  vertical-align: 0.05em;
}
.use-sheet-list li.is-miss {
  border-left: 2px solid var(--wrong, #c4a574);
  padding-left: 0.55rem;
  margin-left: -0.65rem;
}
.use-sheet-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.use-sheet-copied {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0.3rem 0 0;
}

#use-sheet {
  scroll-margin-top: 1.2rem;
}
.fruit-payoff .use-sheet {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.star-harvest {
  margin: 1rem auto 0.6rem;
  max-width: 36rem;
  text-align: left;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.star-harvest-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.star-harvest-list li {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.4rem 0.8rem;
  align-items: center;
  padding: 0.28rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.star-en {
  font-weight: 600;
}
.star-cz {
  color: var(--muted);
  font-size: 0.9375rem;
}
/* The unit a starred sentence came from, under the sentence. */
.star-unit {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted);
}
.star-btn {
  appearance: none;
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.1rem 0.25rem;
}
.star-btn.is-on {
  color: #d4b070;
}
/* Play the word: browser voice beside a word (James, 2026-10-09). */
/* No voice for the language yet (js/speak.js sets data-voice): no speakers. */
html:not([data-voice]) .speak-btn,
html:not([data-voice]) .fb-listen {
  display: none;
}
.speak-btn {
  appearance: none;
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem; /* icon: off the scale */
  line-height: var(--lh-tight);
  padding: var(--sp-3) var(--sp-6);
  margin-left: var(--sp-3);
  vertical-align: -0.1em;
  border-radius: var(--radius-btn);
}
.speak-btn:hover,
.speak-btn:focus-visible {
  color: var(--text);
}
/* Word · Sentence under the answer (James, 2026-10-09). */
.fb-listen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin: var(--sp-6) 0 var(--sp-3);
}
.rec-btn,
.you-btn {
  appearance: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  line-height: var(--lh-tight);
}
.rec-btn:hover,
.rec-btn:focus-visible,
.you-btn:hover,
.you-btn:focus-visible {
  color: var(--text);
}
.rec-btn.is-rec {
  color: var(--wrong);
  border-color: var(--wrong);
}
.rec-btn:disabled {
  cursor: default;
  opacity: 0.6;
}
.speak-lbl {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  margin-left: 0;
  padding: var(--sp-3) var(--sp-9);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  font-size: var(--fs-label);
  font-family: var(--sans);
  vertical-align: baseline;
}
.dict-head .speak-btn {
  font-size: 1.4rem; /* icon: off the scale */
  align-self: center;
  margin-left: 0;
}
#use-sheet li {
  position: relative;
  padding-right: 2rem;
}
#use-sheet li .star-btn {
  position: absolute;
  right: 0;
  top: 0.15rem;
}
}

.intro-points {
  margin: 0.5rem 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.intro-points li {
  margin: 0 0 0.3rem;
  line-height: 1.45;
}

.intro-card strong,
.intro-points strong {
  color: var(--text);
  font-weight: 600;
}

.intro-ex {
  margin: 0.35rem 0;
  font-size: 0.9375rem;
}

.intro-ex .pl {
  color: var(--text);
  font-weight: 600;
}

.intro-ex .en {
  color: var(--muted);
}

/* RUE2-style two-column match (no scroll) */
.check-phase {
  font-size: 0.8125rem;
  margin: 0 0 0.35rem;
  text-align: center;
  font-weight: 400;
  color: var(--muted);
}

/* Quiz options — ported from RUE2 format, amber via theme vars */
.opts {
  display: grid;
  gap: 0.45rem;
  text-align: left;
}

.opt {
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.opt:hover {
  border-color: var(--muted);
}

.opt.correct {
  border-color: var(--correct);
  color: var(--correct);
  background: rgba(90, 158, 143, 0.1);
}

.opt.wrong {
  border-color: var(--wrong);
  color: var(--wrong);
  background: rgba(239, 68, 68, 0.1);
}

/* Match boards — sentence packs show 8 pairs so type can stay readable
   without a taller page (James, 2026-08-30). Word boards stay 12. */
.match {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.55rem;
  margin: 0.35rem 0 0.5rem;
}

.match-col {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

button.m {
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.25;
  white-space: normal;
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  width: 100%;
  min-height: 0;
}

button.m:hover:not(:disabled):not(.done) {
  border-color: var(--muted);
}

button.m.sel {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

button.m.done {
  opacity: 1;
  border-color: var(--correct);
  background: rgba(90, 158, 143, 0.12);
  color: var(--correct);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  pointer-events: none;
  cursor: default;
  font-weight: 600;
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
}

button.m.wrong {
  border-color: var(--wrong);
  color: var(--wrong);
}

/* Two columns on a phone too (James, 2026-10-02): one column stacked 24
   cards, so a pair meant scrolling between its halves. */

.chip {
  font-family: inherit;
  font-size: 0.8125rem;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.chip:hover {
  border-color: var(--muted);
}

.chip.is-selected {
  border-color: var(--line);
  background: transparent;
  color: var(--text);
}

.chip.is-correct {
  border-color: var(--correct);
  color: var(--correct);
}

.chip.is-wrong {
  border-color: var(--wrong);
  color: var(--wrong);
}

.choices {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.75rem 0;
}

.choice {
  font-family: inherit;
  text-align: left;
  font-size: 0.9375rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.choice .knum {
  display: inline-block;
  min-width: 1.1rem;
  margin-right: 0.35rem;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--muted);
  opacity: 0.9;
}

.choice:hover:not(:disabled) {
  border-color: var(--muted);
}

.choice.is-correct {
  border-color: var(--correct);
  color: var(--correct);
  background: rgba(90, 158, 143, 0.1);
}

.choice.is-wrong {
  border-color: var(--wrong);
  color: var(--wrong);
  background: rgba(196, 165, 116, 0.08);
}

/* A typed answer uses the same green and red as a chosen option
 * (James, 2026-10-04). Disabled fields otherwise fade the colour away. */
input.is-correct,
textarea.is-correct,
.order-built.is-correct {
  border-style: solid;
  border-color: var(--correct);
  color: var(--correct);
  background: rgba(90, 158, 143, 0.1);
  -webkit-text-fill-color: var(--correct);
  opacity: 1;
}

input.is-wrong,
textarea.is-wrong,
.order-built.is-wrong {
  border-style: solid;
  border-color: var(--wrong);
  color: var(--wrong);
  background: rgba(196, 165, 116, 0.08);
  -webkit-text-fill-color: var(--wrong);
  opacity: 1;
}

.input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

/* What the student types is English, so it is set like the sentence above
   it: the serif at the sentence's size (James, 2026-09-25: "text in answer
   should look similar to text in question"). Every .input-row holds an
   answer: grammar Type and Use, and the exam drills. */
.input-row input,
.input-row textarea {
  flex: 1 1 12rem;
  font-family: var(--serif);
  font-size: 1.25rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
}

.input-row textarea {
  min-height: 4.2rem;
  resize: vertical;
  width: 100%;
  flex: 1 1 100%;
}

.input-row input:focus,
.input-row textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* Ending gap (morphology Type) */
.gap-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem 0.4rem;
  margin: 0.85rem 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.gap-stem {
  color: var(--muted);
  letter-spacing: 0.01em;
}

.gap-blank {
  color: var(--text);
  opacity: 0.55;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-right: 0.15rem;
}

.gap-input {
  width: 5.5rem;
  min-width: 4rem;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  text-align: center;
  padding: 0.4rem 0.45rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
}

.gap-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-dim);
}

.gap-hint {
  color: var(--muted);
  opacity: 0.9;
}

/* Open cloze Hint button (James, 2026-09-28): quiet by design, never the
 * primary action. flex: 0 1 auto + min-width: 0 lets it shrink and wrap
 * inside .input-row's flex-wrap once the label becomes a letter pattern
 * (e.g. "t _ _ _ _ _ _ _ _" for themselves), instead of forcing a
 * horizontal scroll at phone width. */
.hint-btn {
  flex: 0 1 auto;
  min-width: 0;
  white-space: normal;
  line-height: 1.3;
  text-align: center;
  color: var(--muted);
}

/* Exam Practice panel (2026-08-18): tier entries + revision links. */
.exam-kind-title {
  margin: 1.1rem 0 0.45rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
}
.exam-kind-title:first-child {
  margin-top: 0;
}
/* A panel that is its own screen (Practice, Progress, Reference, More,
   Wordlists) stands right after the ← Home link, and its h2 is the page's
   title: Source Serif 600, as unit titles are. At 15 px it was smaller than
   the 17 px h3s under it (UI audit #6, James 2026-10-02). Panels that open
   under a home row keep the quiet h2. */
.screen-back:not([hidden]) + .home-panel > h2 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
}

.exam-tier {
  margin: 0.75rem 0;
}

.exam-tier .home-btn {
  margin-bottom: 0.35rem;
}

.exam-sets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.35rem 0 0.5rem;
}

.exam-sets .home-btn {
  margin-bottom: 0;
  font-weight: 400;
  padding: 0.35rem 0.7rem;
}

.exam-revise-link {
  color: var(--accent);
}

.exam-revise-link:hover {
  text-decoration: underline;
}

.exam-method {
  margin: 0 0 0.75rem;
  padding-left: 1.1rem;
}

.exam-method li {
  margin: 0.2rem 0;
}

/* Inline link-shaped button into the Tables panel — a real <a> would need a
 * hash route; the panel flip is JS state, so it has to be a button. */
.exam-tables-link {
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: none;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* Practice: the how-it-works text scrolls on its own so the level buttons
   stay on screen. Level buttons share one line; kind buttons may wrap. */
.practice-drill { margin: 0.35rem 0 0.85rem; max-width: 100%; }
.practice-drill-copy {
  max-height: 8.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 0 0.55rem;
}
/* The drills are .home-rows like the topics (UI audit #9, 2026-10-02); an
   open drill's text closes with the rows' rule. */
.practice-drills > .practice-drill {
  margin: 0;
  padding: 0.5rem 0 0.85rem;
  border-bottom: 1px solid var(--line);
}
.practice-levels {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  max-width: 100%;
}
.practice-levels .home-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  text-align: center;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}
.practice-or-kind {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.55rem 0 0;
  max-width: 100%;
  font-size: 0.8125rem;
  color: var(--muted);
}
.practice-or-kind .home-btn {
  min-height: 44px;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  padding: 0.35rem 0.65rem;
}
.practice-or-kind .practice-or-label { color: var(--text); }
.practice-or-kind .home-btn.practice-start {
  flex-basis: 100%;
  font-size: 0.9375rem;
}
.practice-revise { flex-basis: 100%; }
.practice-runs { margin-top: 0.35rem; }
.home-row-name,
.home-row-note { min-width: 0; overflow-wrap: anywhere; }

/* Word-formation root cue (FCE/CAE Part 3, 2026-08-18): the capitalised
 * root sits beside the gap sentence, exam-sheet style. */
.wf-root {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.use-targets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.4rem 0 0;
}
.use-target {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--vocab-accent-border, var(--line));
  border-radius: 6px;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
}
.use-open-area {
  width: 100%;
  min-height: 6.5rem;
  margin: 0.75rem 0 0.25rem;
}
.use-sample-label {
  display: inline-block;
  margin-right: 0.4rem;
  font-weight: 600;
  color: var(--muted);
}

.feedback {
  font-size: 0.9375rem;
  margin: 0.5rem 0 0.75rem;
  min-height: 1.3em;
}

.feedback.ok {
  color: var(--correct);
}

.feedback.bad {
  color: var(--wrong);
}

/* Neither right nor wrong: one word is misspelt and the sentence comes back
 * for a second go (James, 2026-09-05 — a spelling slip graded as a grammar
 * miss "was a bit harsh"). */
.feedback.near {
  color: var(--text);
}

/* The word "Correct" stays for a screen reader and takes no line. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* A plain hit has nothing to print. Drop the reserved blank line. A miss,
 * a note, or an extra ("also", "one way") still takes its space. */
.feedback:not(:has(.reveal, .fb-why, .explain-note, .explain-rule, .explain-revise, .error-tag, .link, .fb-listen)),
.fb:not(:has(.reveal, .fb-why, .explain-note, .explain-rule, .explain-revise, .error-tag, .link, .fb-listen)) {
  min-height: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.spell-slip {
  text-decoration: underline wavy;
  text-underline-offset: 0.2em;
}

.score-line {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

/* The score on the title's row, at its right (James, 2026-10-01). */
.practice-head .score-line {
  margin: 0;
  white-space: nowrap;
}

.foot {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 1.5rem;
}

/* The way back to the site, on its own line (James, 2026-10-05). Footer
   colour and size since 2026-10-06: in body colour it was "too obtrusive"
   under every unit; hover brings it up. */
.foot-home {
  display: inline-block;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.25rem 0;
}

.foot-home:hover,
.foot-home:focus-visible {
  color: var(--text);
  text-decoration-color: currentColor;
}

.foot-note {
  display: block;
  margin-top: 0.25rem;
}

.foot-sep {
  opacity: 0.6;
}

.foot code {
  color: var(--text);
  font-size: 0.8125rem;
}

#boot-error {
  border-color: var(--wrong);
  color: var(--wrong);
}
#boot-error .boot-error-msg { margin: 0 0 0.75rem; color: var(--text); }
#boot-error .boot-error-detail { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.8125rem; }

/* Smoke flags (RUE2 model). display:flex must not override [hidden] —
 * that leaked Flag / the EN key on Pages and in class (James, 2026-09-03). */
.smoke-toolbar[hidden] {
  display: none !important;
}
.smoke-toolbar-flags-only .smoke-toolbar-hint {
  display: none !important;
}
.smoke-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  padding: 0.5rem 0.65rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: transparent;
}

.smoke-toolbar .smoke-flag-btn,
.smoke-toolbar .smoke-flag-list {
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}

.smoke-toolbar .smoke-flag-btn:hover,
.smoke-toolbar .smoke-flag-list:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--on-accent);
}

.smoke-toolbar-hint {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-left: 0.15rem;
}

/* Live EN / answer key — own row so a match cheat-sheet is readable. */
#smoke-live {
  flex: 1 1 100%;
  margin-left: 0;
  color: #e8e8e8;
  font-size: 0.8125rem;
  line-height: 1.4;
  white-space: normal;
}

button.link {
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: none;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

button.link:hover {
  color: var(--text);
}

.smoke-flag-list.has-flags,
[data-smoke-badge].has-flags {
  border-color: var(--line) !important;
  color: var(--text);
  font-weight: 600;
}

.smoke-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.25rem 0.75rem;
  overflow: auto;
}

.smoke-overlay[hidden] {
  display: none !important;
}

.smoke-panel {
  width: min(32rem, 100%);
  margin-top: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1.15rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.smoke-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.smoke-panel-head h2 {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--text);
}

.smoke-hint {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0 0 0.75rem;
  line-height: 1.4;
}

.smoke-meta {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
  line-height: 1.45;
}

.smoke-line {
  margin-top: 0.25rem;
  color: var(--text);
  word-break: break-word;
}

.smoke-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: 0.65rem;
}

.smoke-label select,
.smoke-label .type-in {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  font-family: inherit;
  font-size: 0.9375rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
}

.smoke-actions {
  margin-top: 0.5rem;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.smoke-status {
  font-size: 0.8125rem;
  margin: 0.65rem 0 0;
}

.smoke-status.ok {
  color: var(--correct);
}

.smoke-status.bad {
  color: var(--wrong);
}

.smoke-list {
  max-height: min(50vh, 22rem);
  overflow: auto;
  margin-bottom: 0.75rem;
  border-top: 1px solid var(--line);
}

.smoke-row {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.8125rem;
}

.smoke-row-head {
  font-weight: 600;
  color: var(--text);
}

.smoke-row-snip {
  color: var(--muted);
  margin-top: 0.15rem;
}

.smoke-row-typed,
.smoke-row-note {
  margin-top: 0.2rem;
  color: var(--muted);
}

.link.smoke-rm {
  font-family: inherit;
  background: none;
  border: none;
  color: var(--muted);
  text-decoration: underline;
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0;
  margin-top: 0.25rem;
}

.link.smoke-rm:hover {
  color: var(--wrong);
}

.smoke-fallback-ta {
  width: 100%;
  min-height: 6rem;
  margin-top: 0.5rem;
  font-family: inherit;
  font-size: 0.8125rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
}

/* rue-exp dual domain — chips only (main --accent stays RUE2 cyan in :root) */
:root {
  --grammar: var(--muted);
  --vocab: var(--muted);
}
.domain-grammar {
  /* practice chrome uses global --accent; do not recolour whole session */
}
.domain-vocab {
  /* practice chrome uses global --accent */
}
.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 720px) {
  .panel-grid {
    grid-template-columns: 1fr;
  }
}
.path-item .domain-tag {
  font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
.path-item .domain-tag.g {
  color: var(--grammar);
}
.path-item .domain-tag.v {
  color: var(--vocab);
}
.badge-unit {
  font-size: 0.8125rem;
  color: var(--correct);
  border: 1px solid color-mix(in srgb, var(--correct) 45%, transparent);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
}

.tree-portrait-host {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg);
}
.tree-portrait-svg.tp-pick .tp-knot:hover,
.tree-portrait-svg.tp-pick .tp-focus-label:hover {
  filter: brightness(1.15);
}
.tree-portrait-svg text {
  pointer-events: none;
}
/* Topics: pointing at a unit in the list lights the part it grows, in the
   finish screen's glow (tree-portrait.js .tp-hi), James 2026-09-26. */
.tree-portrait-svg .tp-row-lit { opacity: 1; }
.tree-portrait-svg .tp-row-lit .lb { filter: drop-shadow(0 0 4px rgba(77, 182, 199, 0.95)); }
/* A lit root takes the trunk's blue and pulse, with a thicker edge and a soft
   copy underneath (tree-portrait.js sets the widths and keyframes), James 2026-09-28. */
.tree-portrait-svg .tp-row-lit .rt {
  stroke: rgba(86, 156, 214, 0.9);
  stroke-width: var(--tp-root-edge);
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(86, 156, 214, 1)) drop-shadow(0 0 12px rgba(86, 156, 214, 0.6));
  animation: tpRootPulse 2.2s ease-out both;
}
.tree-portrait-svg .tp-row-lit .tp-root-glow {
  display: inline;
  fill: rgba(86, 156, 214, 0.75);
  stroke: rgba(86, 156, 214, 0.75);
  stroke-width: var(--tp-root-glow);
  stroke-linejoin: round;
  opacity: 0.8;
  animation: tpGlowPulse 2.2s ease-out both;
}
.tree-portrait-svg #trunk.tp-row-lit { filter: drop-shadow(0 0 7px rgba(86, 156, 214, 0.85)); }
/* A word-formation unit lights the cambium: two lines inside the bark, while
   the trunk dims with the rest (tree-portrait.js .tp-growth-layer), James 2026-09-30. */
.tree-portrait-svg .tp-growth-layer.tp-row-lit { display: inline; }
/* ...and the rest of the tree fades to about a quarter, so the part stands
   out even when it is a hairline root (James, 2026-09-26). */
#tree-portrait .tree-portrait-svg :is(.tp-lateral, .tp-house, #trunk, .tp-bough, .leader, .tp-focus-label, .tp-focus-leader) {
  transition: opacity 0.15s ease;
}
#tree-portrait .tree-portrait-svg.tp-row-on :is(.tp-lateral, .tp-house, #trunk, .tp-bough, .leader, .tp-focus-label, .tp-focus-leader):not(.tp-row-lit) {
  opacity: 0.25;
}
@media (prefers-reduced-motion: reduce) {
  #tree-portrait .tree-portrait-svg :is(.tp-lateral, .tp-house, #trunk, .tp-bough, .leader, .tp-focus-label, .tp-focus-leader) {
    transition: none;
  }
  .tree-portrait-svg .tp-row-lit :is(.rt, .tp-root-glow) {
    animation: none;
  }
}
.tree-portrait-svg .tp-hover-name {
  pointer-events: none;
}
.tree-portrait-svg .tp-focus-label[data-node]:not([data-node=""]) {
  pointer-events: auto;
}
/* On a phone the in-tree names shrink to ~5 px (UI audit #18): none at all
   under 480 px (James, 2026-10-02). The caption lines carry the names. */
@media (max-width: 479.98px) {
  .tree-portrait-svg .tp-labels { display: none; }
}
.tree-portrait-svg .tp-knot[data-node]:not([data-node=""]) {
  pointer-events: auto;
}

/* ============================================================
   VOCAB ENGINE (practice-vocab.js) — was almost entirely
   unstyled, so it fell back to browser defaults (white buttons,
   white focus ring). Matched to the grammar engine's language.
   ============================================================ */

/* Status bar: "Question 1 of 24 · score 0" + direction toggle */
.p-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--muted);
  padding: 0 0 0.5rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.75rem;
}

.dir {
  font-family: inherit;
  font-size: 0.8125rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.dir:hover {
  border-color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.dir-static {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Practice header */
.practice-title {
  font-size: 1.0625rem;
  font-weight: 600;
}

.practice-meta {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Stage container — programmatic focus target, so no default ring */
.stage {
  min-height: 12rem;
}

.stage:focus,
.stage:focus-visible {
  outline: none;
}

/* Question card */
.q {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
}

.prompt {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 0.2rem;
}

/* A Czech prompt is set like body text: regular, 17 px, never faded (James,
   2026-09-25). The English sentences take the serif (end of file). */
.prompt.prompt--cz {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.5;
}

.prompt-gap {
  color: var(--text);
}

.frame-prompt {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
  margin: 0.5rem 0 0.35rem;
}

.scoreline {
  font-size: 2rem;
  font-weight: 600;
  color: var(--text);
  margin: 0.35rem 0 0.75rem;
}

/* Option number chip — was rendering glued to the word ("1kuchnia") */
.opt .knum {
  display: inline-block;
  min-width: 1.3rem;
  margin-right: 0.55rem;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--muted);
  opacity: 0.9;
}

/* Gender badge — rodzaj shown beside Polish nouns during exposure */
.gender-badge {
  font-size: 0.68em;
  font-weight: 600;
  opacity: 0.85;
  vertical-align: super;
  letter-spacing: 0.02em;
}
.gender-m {
  color: #7aa2ff;
}
.gender-f {
  color: #ff9db0;
}
.gender-n {
  color: #a8c98a;
}
.gender-pl {
  color: #9a9a9a;
}

/* Icon chip — emoji anchor for concrete vocab (animals, food, …) */
.icon-chip {
  display: inline-block;
  margin-right: 0.45em;
  font-style: normal;
}

/* Swatch chip — visual anchor for self-illustrating vocab (colours) */
.swatch {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  margin-right: 0.45em;
  border: 1px solid rgba(255, 255, 255, 0.35);
  vertical-align: baseline;
  flex-shrink: 0;
}

/* Typing input / textarea */
.type-in {
  width: 100%;
  font-family: inherit;
  font-size: 0.9375rem;
  padding: 0.55rem 0.7rem;
  margin: 0.6rem 0 0.1rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
}

.type-in:focus {
  outline: none;
  border-color: var(--accent);
}

.type-in::placeholder {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  opacity: 1;
}

/* Fat-leaf Type: first letter + blanks (James, 2026-08-30). */
.type-clue {
  margin: 0.35rem 0 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.0625rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.type-area {
  resize: vertical;
  line-height: 1.4;
}

/* One line that grows with the sentence (growWithText in practice-grammar,
 * fitInp in practice-vocab's Use). */
.input-row .type-area--grow,
.q .type-area--grow {
  min-height: 0;
  resize: none;
  overflow: hidden;
}

/* Feedback line */
.fb {
  min-height: 1.3rem;
  font-size: 0.9375rem;
  margin: 0.4rem 0 0.2rem;
}

/* The verdict sits beside the main button, so the button never moves when
 * it lands (James, 2026-10-04, then every screen 2026-10-05). A long note
 * wraps down that column. Under 500px the column drops under the button. */
.nav--fb {
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 1rem;
}

/* After a list of options the row needs clear air, or Next reads as one
 * more option (James, 2026-10-05, What goes with what). */
.opts + .nav--fb,
.choices + .nav--fb,
.order-bag + .nav--fb {
  margin-top: 1.5rem;
}

.nav--fb > .fb,
.nav--fb > .feedback,
.nav--fb > .fb-note,
.nav--fb > .check-feedback {
  flex: 1 1 16rem;
  min-width: 0;
  margin: 0;
  padding-top: 0.55rem;
}

/* The empty feedback slot was a 16rem column, so the Type box shrank to a
 * stub beside Check (James, 2026-10-05). The box takes the row. The note
 * wraps underneath. */
.input-row > .feedback,
.gap-row > .feedback {
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
  padding-top: 0.35rem;
}

.input-row > .btn,
.gap-row > .btn {
  flex: 0 0 auto;
}

/* Use's sentence box takes the whole row, so the button wraps to a line of
 * its own; the note sits beside it there, as on every other screen (James,
 * 2026-10-06: Explanation under Next in Use, beside it elsewhere). */
.input-row:has(> textarea) > .feedback {
  flex: 1 1 16rem;
  padding-top: 0.55rem;
}

.nav--fb > .fb-note > .fb {
  margin: 0;
}

@media (max-width: 500px) {
  .nav--fb > .fb,
  .nav--fb > .feedback,
  .nav--fb > .fb-note,
  .nav--fb > .check-feedback,
  .input-row > .feedback,
  .input-row:has(> textarea) > .feedback,
  .gap-row > .feedback {
    flex-basis: 100%;
  }
}

.fb.good {
  color: var(--correct);
  font-weight: 600;
}

.fb.bad {
  color: var(--wrong);
}

.fb.near {
  color: var(--text);
  font-weight: 600;
}

.reveal {
  color: var(--text);
  font-weight: 600;
}

/* Why a rewrite answer was wrong, under the model answer (James, 2026-09-05,
 * b1_work: "it should at least highlight what was wrong about it"). */
.fb-why {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.fb-why .w-extra {
  color: var(--wrong);
  font-weight: 600;
  text-decoration: underline wavy;
  text-underline-offset: 0.2em;
}

/* Frames: word pills above the frame prompt */
.words {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}

.words .pill small {
  display: block;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Saved-sentence review */
.sent-review .sent,
.sent-list-mini .sent {
  text-align: left;
  font-size: 0.9375rem;
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.35rem;
  border-left: 2px solid var(--line);
  background: transparent;
  border-radius: 0 6px 6px 0;
}

/* Picture prompt */
.picwrap {
  display: flex;
  justify-content: center;
  margin-bottom: 0.6rem;
}

.scene {
  width: 100%;
  max-width: 15rem;
  height: auto;
}

/* Meter bar: the fruit payoff after a unit */
.meter-row {
  display: grid;
  grid-template-columns: 5.6rem 1fr 4.6rem;
  align-items: center;
  gap: 0.45rem 0.55rem;
  margin-bottom: 0.35rem;
}

.meter-track {
  height: 0.45rem;
  border-radius: 99px;
  background: rgba(160, 160, 160, 0.15);
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  border-radius: 99px;
  min-width: 0;
  transition: width 0.25s ease;
}

.meter-learned .meter-fill {
  background: var(--accent);
}

.meter-remembered .meter-fill {
  background: var(--muted);
}

/* Match board hint — de-click affordance needs to be visible, not discovered */
.match-hint {
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: left;
  margin: 0 0 0.6rem;
}

/* —— Home chrome (2026-08-04) —— */
.howto-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.72);
}
.howto-overlay[hidden] { display: none !important; }
.howto-panel {
  width: min(100%, 26rem);
  max-height: min(90vh, 36rem);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.2rem 1.25rem;
}
.howto-panel h2 { margin: 0 0 0.6rem; color: var(--text); font-size: 1.0625rem; }
.howto-lead, .howto-cz { font-size: 0.8125rem; color: var(--muted); margin: 0 0 0.5rem; }
.howto-steps { margin: 0.75rem 0 0; padding-left: 1.2rem; font-size: 0.9375rem; line-height: 1.4; }
.howto-steps li { margin-bottom: 0.5rem; }
.howto-map { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 0.75rem; margin: 0.5rem 0 0.9rem; font-size: 0.9375rem; line-height: 1.4; }
.howto-map dt { font-weight: 600; color: var(--text); }
.howto-map dd { margin: 0; }
.welcome-levels { margin: 0.25rem 0 0.75rem; padding-left: 1.2rem; font-size: 0.9375rem; line-height: 1.5; }
.howto-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.tree-intro-panel { width: min(100%, 30rem); max-height: min(90vh, 44rem); }
.tree-intro-panel h3 { margin: 0.9rem 0 0.25rem; color: var(--text); font-size: 0.9375rem; }
.tree-intro-panel p, .tree-intro-panel ul { margin: 0 0 0.5rem; font-size: 0.9375rem; line-height: 1.4; }
.tree-intro-panel ul { padding-left: 1.2rem; }
.tree-intro-figure { margin: 0.75rem 0 0.25rem; }
.tree-intro-figure[hidden] { display: none; }
.tree-intro-panel .tree-intro-label,
.tree-intro-figure figcaption { margin: 0.3rem 0; text-align: center; font-size: 0.8125rem; color: var(--muted); }
.home-title { margin: 0 0 0.5rem; font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.home-intro { margin: 0 0 0.75rem; font-size: 0.9375rem; color: var(--muted); max-width: 28rem; line-height: 1.4; }
.home-intro strong { color: var(--text); }
.home-minimal .level-rail { margin-bottom: 1.1rem; }
/* No inner scroll box: a panel is as tall as its content and the page
   scrolls (James, 2026-09-26). */
.home-panel-scroll { margin-top: 0.35rem; }
.review-groups { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.85rem; }
.review-level-head {
  margin: 0 0 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.review-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.review-nav .btn {
  position: relative;
  z-index: 1;
  flex: 0 1 auto;
  min-width: 8.5rem;
  text-align: center;
  padding: 0.7rem 0.85rem;
  font-size: 0.9375rem;
  cursor: pointer;
}
.set-nav {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.75rem;
}
.set-nav .btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
}
.set-count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.home-more-block { margin-top: 0.75rem; padding-top: 0.35rem; }
.tree-map-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.55rem; }
/* Home as a contents page (James, 2026-09-25, draft A of
   docs/look-home.html): the next unit in its own card, then every other
   place in a list, one grey line each. Regular weight throughout; only the
   titles are in the serif. */
.home-next-card { padding: 1.25rem 1.4rem; }
.home-next-kicker { margin: 0 0 0.25rem; font-size: 0.8125rem; color: var(--muted); }
.home-next-line {
  margin: 0 0 0.25rem;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.home-progress-line {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.home-next-card .btn.primary { margin-top: 1rem; }
/* First visit only, one quiet line under the card (James, 2026-09-29). */
.home-test-line { margin: 0.75rem 0 0; font-size: 0.9375rem; color: var(--muted); }
/* One list, no headings (James, 2026-09-26). */
.home-list { margin-top: 1.75rem; }

/* Home opens on a search bar (James, 2026-10-02): calm and wide, no
   button. "Enter a word here" with a magnifying glass at the left
   (2026-10-04). Results drop under it (js/search.js). */
.home-search { margin: 0.25rem 0 0; }
.home-search .search-field { position: relative; }
.home-search .search-icon {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  width: 1.15rem;
  height: 1.15rem;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.home-search .search-q {
  font-size: 1.0625rem;
  padding: 0.8rem 1rem 0.8rem 2.75rem;
  border-radius: var(--radius);
  background: var(--surface);
}
.home-search .search-q::placeholder { color: var(--muted); }
/* On a laptop the bar sat cramped under the brand line: room above it,
   taken from the empty foot of the page (James, 2026-10-02). Phones and
   short windows keep it high, where the keyboard leaves it in view. */
@media (min-width: 720px) and (min-height: 760px) {
  .home-search { margin-top: clamp(2rem, 9vh, 6rem); }
}
/* Topics' progress line, under the level buttons. */
.topics-progress { margin: -0.4rem 0 1rem; font-size: 0.9375rem; color: var(--muted); }
/* Cinzel's other places (James, 2026-10-02): a finished level's line and
   the level marks. A few capitals each, never a sentence. */
.level-complete {
  display: block;
  margin: 0 0 0.2rem;
  font-family: var(--caps);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
/* Stars under Review's due units. */
.review-stars-head { margin: 1.25rem 0 0.5rem; font-size: 1rem; font-weight: 600; }
/* More, Reference and Wordlists are screens: one way back above them. */
.screen-back { display: block; margin: 0 0 0.5rem; }
.screen-back[hidden] { display: none; }
.home-rows { border-top: 1px solid var(--line); }
.home-row {
  display: grid;
  grid-template-columns: 11rem 1fr auto;
  gap: 0.25rem 0.9rem;
  align-items: baseline;
  width: 100%;
  padding: 0.7rem 0.15rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.practice-cloze-row { padding-left: 1rem; }
/* A topic row is the ladder, plus Cloze when that round is open. The
 * chevron still belongs to the ladder. */
.home-row.practice-topic {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}
.home-row.practice-topic.has-cloze {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.practice-topic-open {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0.25rem 0.9rem;
  align-items: baseline;
  width: 100%;
  min-width: 0;
  padding: 0.7rem 0.15rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.practice-cloze-btn {
  align-self: center;
  margin-right: 0.45rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
.practice-cloze-btn:hover { color: var(--text); }
/* display:grid beats the UA's [hidden] (Exam practice hides itself). */
.home-row[hidden] { display: none; }
a.home-row { text-decoration: none; }
.home-row::after { content: "\203A"; color: var(--muted); }
/* Rows that open a panel under them point down when shut, up when open.
   How to use opens a dialog, so it keeps the plain arrow. */
.home-row[aria-expanded]::after { transform: rotate(90deg); }
.home-row[aria-expanded="true"]::after { transform: rotate(-90deg); }
.home-rows > .home-panel { margin: 0.75rem 0; }
/* Row names in the serif, like every title (James, 2026-10-02). */
.home-row-name { font-family: var(--serif); font-size: 1.1875rem; }
.home-row-note { font-size: 0.9375rem; color: var(--muted); }
.home-row:hover .home-row-name,
.home-row.is-active .home-row-name {
  text-decoration: underline;
  text-decoration-color: var(--muted);
  text-underline-offset: 0.15em;
}
@media (max-width: 560px) {
  .home-row { grid-template-columns: 1fr auto; }
  .home-row-note { grid-column: 1; grid-row: 2; }
  .home-row::after { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .practice-topic-open { grid-template-columns: minmax(0, 1fr); }
  .home-row.practice-topic::after { grid-column: auto; grid-row: auto; }
}
.home-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.home-btn {
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  width: auto;
  flex: 0 0 auto;
}
.home-btn:hover { border-color: var(--muted); color: var(--text); background: rgba(255, 255, 255, 0.04); }
/* The main home-style button (How to use's "Got it", the unit-finished
   screen) is the outline every main button is (James, 2026-09-25). The
   open panel's button only firms its border. */
.home-btn.is-active {
  border-color: var(--muted);
}
.home-btn-primary,
.home-btn-primary.is-active {
  border-color: var(--muted);
  background: transparent;
  color: var(--text);
}
.home-btn-primary:hover {
  border-color: var(--text);
  background: transparent;
}
.home-hint { margin: 0.65rem 0 0; font-size: 0.8125rem; color: var(--muted); }

/* Progress download / import (backup; localhost ↔ Pages) */
.progress-transfer {
  margin-top: 0.35rem;
}
.progress-transfer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.45rem 0 0.25rem;
}
.progress-transfer-actions .home-btn {
  font-size: 0.8125rem;
  padding: 0.4rem 0.75rem;
}
.quiet-details { padding: 0.65rem 1rem; }
.quiet-details > summary {
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
  list-style: none;
}
.quiet-details > summary::-webkit-details-marker { display: none; }
.quiet-details > summary::before { content: "▸ "; color: var(--text); }
.quiet-details[open] > summary::before { content: "▾ "; }
.quiet-summary-meta { font-weight: 400; opacity: 0.85; }
.quiet-details[open] { padding: 0.85rem 1.1rem; }

/* Explanation waits behind this link (James, 2026-10-04). One row under the mark. */
.explain-link {
  display: block;
  text-align: left;
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  padding: 0;
  margin-top: 0.3rem;
  text-decoration: underline;
}
.explain-link:hover {
  color: var(--text);
}
.explain-head {
  font-size: 0.8125rem;
  margin-bottom: 0.2rem;
  font-weight: 400;
  color: var(--muted);
}

.explain-note {
  margin-top: 0.45rem;
  padding: 0.4rem 0.65rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text);
  background: transparent;
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  max-width: 34rem;
}

/* Correct answer, open cloze: the rule line alone (2026-09-23). */
.explain-rule {
  margin-top: 0.3rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* "Revise: <unit> →" under a miss's explanation (2026-09-23). */
.explain-revise {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.revise-summary .exam-revise-link {
  font-weight: 600;
}

.explain-note-cz {
  margin-top: 0.25rem;
  color: var(--muted);
  font-style: italic;
}

/* ---- Vocab intro: picture-led pages (2026-08-07) ----
   Pictures live on the intro ONLY. They must never appear on drill items:
   the chip renders beside both the English and the Czech tile, which would
   turn Match into pairing identical images. */
.intro-card {
  margin-bottom: 0.9rem;
}

.read-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12rem;
  gap: 1rem;
  align-items: start;
  margin: 0.7rem 0 0.4rem;
}
.read-text {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-line;
}
.read-text strong {
  color: var(--text);
  font-weight: 600;
}
.read-glosses {
  font-size: 0.8125rem;
  line-height: 1.35;
  border-left: 1px solid var(--line);
  padding-left: 0.75rem;
}
.read-gloss {
  margin-bottom: 0.55rem;
}
.read-gloss-en {
  font-weight: 600;
}
.read-gloss-def {
  color: var(--muted);
}
@media (max-width: 640px) {
  .read-wrap {
    grid-template-columns: 1fr;
  }
  .read-glosses {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 0.7rem;
  }
}

.pic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 0.6rem;
  margin: 0.9rem 0;
}

.pic-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.55rem 0.35rem;
  border: 1px solid var(--vocab-accent-border);
  border-radius: var(--radius-btn);
  background: var(--vocab-accent-dim);
  text-align: center;
}

.pic-icon {
  font-size: 1.9rem;
  line-height: 1.1;
  font-style: normal;
}

.pic-swatch {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.pic-en {
  font-size: 0.9375rem;
  color: var(--text);
}

.pic-cz {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Grouped tiles: one box per contrast pair / triple (2026-09-12). */
.pic-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.6rem;
  margin: 0.9rem 0;
}

.pic-group {
  border: 1px solid var(--vocab-accent-border);
  border-radius: var(--radius);
  padding: 0.35rem;
}

.pic-group .pic-grid {
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: 0.35rem;
  margin: 0;
}

.pic-group .pic-tile {
  border-color: transparent;
}

.pic-group-wide {
  grid-column: 1 / -1;
}

/* Drawn tile art (particle meanings, Phrasal verbs 2, 2026-09-12). */
.pic-diagram .intro-scene {
  width: 100%;
  max-width: 7.5rem;
  height: auto;
}

.pic-note {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.3;
}

.pic-note strong {
  color: var(--text);
}

.intro-diagram {
  display: flex;
  justify-content: center;
  margin: 0.8rem 0;
}

.intro-scene {
  width: 100%;
  max-width: 22rem;
  height: auto;
}

/* Grammar cards centre their schematic; vocab cards inherit the old layout. */
.intro-scene-wrap {
  display: flex;
  justify-content: center;
  margin: 0.8rem 0;
}

/* Pack-authored <svg> (no .intro-scene class) was filling the card width and
 * scaling cell type to ~30px — Form on a1_be_have, James 2026-08-28. */
.intro-scene-wrap > svg {
  width: 100%;
  max-width: 22rem;
  height: auto;
}

/* Several small movement/place scenes on one intro card
 * (a2_prepositions_movement, James 2026-08-29). */
.intro-diagram-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.6rem, 1fr));
  gap: 0.4rem 0.35rem;
  margin: 0.4rem 0 0.6rem;
  align-items: start;
}
.intro-diagram-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 28rem) {
  .intro-diagram-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 36rem) {
  .intro-diagram-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
.intro-diagram-cell {
  margin: 0;
  text-align: center;
}
.intro-diagram-cell figcaption {
  margin: 0.12rem 0 0;
  font-size: 0.8125rem;
  color: var(--text);
  font-weight: 600;
  line-height: 1.25;
}
.intro-diagram-cell figcaption strong {
  color: var(--muted);
}
.intro-scene-wrap-sm {
  margin: 0.1rem 0 0;
}
.intro-diagram-grid .intro-scene,
.intro-diagram-grid .intro-scene-wrap > svg {
  max-width: 100%;
}

/* Articles decision map (intro) — ported from rue2-grok-v1.0, 2026-08-28 */
/* Calendars — intro diagrams week_strip / year_grid (a1_time_3, 2026-08-31).
   HTML rather than SVG so the Czech cell text wraps instead of shrinking. */
.calendar {
  width: 100%;
  margin: 0.55rem 0 0.3rem;
}
.cal-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}
@media (max-width: 520px) {
  .cal-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .cal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.cal-day {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.cal-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.4rem 0.25rem;
  border-radius: var(--radius-btn);
  border: 1px solid rgba(160, 160, 160, 0.28);
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}
.cal-en {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.cal-cz {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.cal-day .is-weekend,
.cal-cell.is-weekend {
  background: rgba(255, 255, 255, 0.07);
}
.cal-day.is-weekend .cal-cell {
  background: rgba(255, 255, 255, 0.07);
}
.cal-day.is-today .cal-cell {
  border-color: var(--vocab-accent);
  box-shadow: 0 0 0 1px var(--vocab-accent) inset;
}
.cal-day.is-tomorrow .cal-cell {
  border-color: var(--line);
}
.cal-tag {
  display: block;
  min-height: 0.9rem;
  font-size: 0.8125rem;
  line-height: 1;
  text-align: center;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.cal-tag strong {
  color: var(--vocab-accent);
  font-weight: 600;
}
.cal-tag-empty {
  visibility: hidden;
}
.cal-span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.cal-span-line {
  flex: 1;
  height: 1px;
  background: rgba(160, 160, 160, 0.35);
}
.cal-span-label {
  font-size: 0.8125rem;
  color: var(--text);
  white-space: nowrap;
}
.cal-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.55rem;
  margin-top: 0.45rem;
}
.cal-chip {
  font-size: 0.8125rem;
  color: var(--text);
}
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.7rem;
  margin-top: 0.45rem;
}
.cal-key {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--text);
}
.cal-key i {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 3px;
  border: 1px solid rgba(160, 160, 160, 0.35);
}
.season-winter {
  background: rgba(120, 170, 220, 0.14);
}
.season-spring {
  background: rgba(120, 200, 140, 0.14);
}
.season-summer {
  background: rgba(230, 190, 90, 0.14);
}
.season-autumn {
  background: rgba(215, 130, 80, 0.14);
}
.cal-cell.is-now {
  border-color: var(--vocab-accent);
  box-shadow: 0 0 0 1px var(--vocab-accent) inset;
}

.articles-map {
  margin: 0.55rem 0 0.85rem;
  padding: 0.75rem 0.7rem 0.65rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.am-ask {
  text-align: center;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-btn);
  border: 1px solid rgba(160, 160, 160, 0.28);
  background: rgba(0, 0, 0, 0.25);
  margin-bottom: 0.55rem;
}
.am-ask-sm {
  margin-bottom: 0.45rem;
  padding: 0.4rem 0.5rem;
}
.am-kicker {
  display: block;
  font-size: 0.8125rem;
  margin-bottom: 0.2rem;
  font-weight: 400;
  color: var(--muted);
}
.am-q {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.am-split {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 0.55rem;
  align-items: start;
}
@media (max-width: 520px) {
  .am-split {
    grid-template-columns: 1fr;
  }
}
.am-branch {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.am-label {
  font-size: 0.8125rem;
  align-self: flex-start;
  font-weight: 400;
  color: var(--muted);
}
.am-label-yes {
  color: var(--correct);
}
.am-label-no {
  color: var(--wrong-text);
}
.am-box {
  border-radius: var(--radius-btn);
  border: 1px solid rgba(160, 160, 160, 0.28);
  background: var(--surface);
  padding: 0.55rem 0.65rem 0.6rem;
  min-width: 0;
}
.am-box-the {
  border-top: 3px solid var(--correct);
}
.am-box-a {
  border-top: 3px solid color-mix(in srgb, var(--line) 75%, #c4a574);
}
.am-box-zero {
  border: 1px dashed rgba(160, 160, 160, 0.4);
  border-top: 3px solid rgba(160, 160, 160, 0.55);
}
.am-head {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.2rem;
  color: var(--text);
}
.am-box-the .am-head {
  color: var(--correct);
}
.am-box-a .am-head {
  color: #c9a0b0;
}
.am-box-zero .am-head {
  color: var(--muted);
}
.am-rule {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.35;
}
.am-ex {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text);
  line-height: 1.4;
}
.am-ex strong {
  color: var(--text);
  font-weight: 600;
}
.am-leaves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
@media (max-width: 380px) {
  .am-leaves {
    grid-template-columns: 1fr;
  }
}
.am-leaf-tag {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 0.2rem;
  line-height: 1.25;
}
.am-leaf-tag .am-cz {
  font-weight: 400;
  opacity: 0.85;
}
.am-foot {
  margin: 0.55rem 0 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Quiz / Type / Use: thumbnail beside the prompt so choices stay on screen. */
.item-stem {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.2rem 0 0.45rem;
}
.item-stem-text {
  flex: 1;
  min-width: 0;
}
.item-stem .practice-prompt,
.item-stem .practice-hint {
  margin: 0.12rem 0;
}
.item-scene-wrap {
  flex: 0 0 8.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.item-scene-wrap .intro-scene {
  width: 8.5rem;
  max-width: 8.5rem;
}
@media (max-width: 420px) {
  .item-scene-wrap {
    flex-basis: 7.2rem;
  }
  .item-scene-wrap .intro-scene {
    width: 7.2rem;
    max-width: 7.2rem;
  }
}

.intro-fallback {
  color: var(--muted);
  font-size: 0.9375rem;
}

.intro-ref {
  margin: 0.7rem 0 0.2rem;
}

.intro-frames {
  margin: 0.6rem 0;
  padding-left: 1.1rem;
  line-height: 1.9;
}

.intro-frames li {
  font-size: 1.0625rem;
}

.intro-note {
  margin-top: 0.7rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--vocab-accent-border);
  color: var(--muted);
}

/* ---- Word-order click drill (Check phase, 2026-08-08) ---- */
.order-built {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 2.4rem;
  padding: 0.6rem 0.7rem;
  margin: 0.75rem 0 0.5rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  align-items: center;
}

.order-chip.placed {
  display: inline-block;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-btn);
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 0.9375rem;
}

.order-placeholder {
  color: var(--muted);
}

.order-bag {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 0.75rem;
}

.order-token {
  font-family: inherit;
  font-size: 0.9375rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.order-token:hover:not(:disabled) {
  border-color: var(--muted);
}

.order-token:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ---- First-fruit payoff (from RUE2 / RUPL) ---- */
.fruit-payoff {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.15rem;
  padding: 2.25rem 1rem 1.75rem;
  min-height: 14rem;
}
.fruit-payoff-tick {
  width: 56px;
  height: 56px;
}
.fruit-payoff-tick svg { display: block; }
.fruit-payoff-tick circle {
  fill: none;
  stroke: var(--correct, #5a9e8f);
  stroke-width: 2;
  opacity: 0.35;
}
.fruit-payoff-tick path {
  fill: none;
  stroke: var(--correct, #5a9e8f);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  transition: stroke-dashoffset 0.5s ease 0.08s;
}
.fruit-payoff-tick.is-drawn path { stroke-dashoffset: 0; }
.fruit-payoff-kind {
  font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
.fruit-payoff-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem 0.75rem;
}
.fruit-payoff-level {
  display: inline-block;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  box-shadow: none;
  min-width: 3rem;
  text-align: center;
  line-height: 1.2;
}
.fruit-payoff-stats {
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: 0.02em;
}
.fruit-payoff-stats .fruit-payoff-dot {
  color: var(--muted);
  font-weight: 400;
  margin: 0 0.15rem;
}
.fruit-payoff-meter {
  width: min(100%, 22rem);
  grid-template-columns: 1fr;
  margin: 0;
}
.fruit-payoff-meter .meter-track { height: 0.55rem; }
.fruit-payoff-meter .meter-fill {
  transition: width 1.25s cubic-bezier(0.22, 1, 0.36, 1);
  background: color-mix(in srgb, var(--correct, #5a9e8f) 82%, transparent);
}
.fruit-payoff-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
}
/* Next names the unit, and some names are long: wrap, never widen the page. */
.fruit-payoff-nav .home-btn {
  flex: 0 1 auto;
  max-width: 100%;
}
/* Payoff tree (2026-08-23): the unit's seat + trunk grow and glow below a smaller tick. */
.fruit-payoff--tree {
  gap: 0.75rem;
  padding-top: 1.1rem;
}
.fruit-payoff--tree .fruit-payoff-tick {
  width: 40px;
  height: 40px;
}
.fruit-payoff--tree .fruit-payoff-tick svg {
  width: 40px;
  height: 40px;
}
.fruit-payoff-tree {
  width: min(100%, 26rem);
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.fruit-payoff-tree:empty {
  display: none;
}
.fruit-payoff-tree .tree-portrait-svg {
  display: block;
}
.fruit-payoff-tree .tree-portrait-svg [data-node] {
  cursor: default !important;
}
.fruit-payoff-diag {
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: center;
  max-width: 28rem;
  line-height: 1.35;
  word-break: break-word;
}
@media (prefers-reduced-motion: reduce) {
  .fruit-payoff-tick path {
    transition: none;
    stroke-dashoffset: 0;
  }
  .fruit-payoff-meter .meter-fill { transition: none; }
}

/* ---- Tables · reference + free practice (2026-08-17) ---- */
.ref-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.ref-block {
  margin: 0.6rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.8rem;
}

.ref-block summary { cursor: pointer; }

.ref-exemplar {
  color: var(--muted);
  font-size: 0.85em;
  margin-left: 0.35rem;
}

.ref-table {
  border-collapse: collapse;
  margin: 0.6rem 0;
  width: 100%;
  max-width: 34rem;
}

.ref-table th,
.ref-table td {
  border: 1px solid var(--line);
  padding: 0.3rem 0.6rem;
  text-align: left;
  font-size: 0.9375rem;
}

.ref-table thead th {
  color: var(--text);
  font-weight: 600;
}

/* Examples are English being practised: the serif, upright, as dictionary
   examples are (James, 2026-10-02). Form columns joined them 2026-10-03,
   under the serif rule at the end of this file; explanations stay sans. */
.ref-table td.ref-col-example,
.ref-table td.ref-col-examples {
  font-family: var(--serif);
}

/* Per-row footnote (read /riːd/ → /red/, gotten, learned) */
.ref-note-row td {
  border-top: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  font-style: italic;
}

.ref-drill {
  margin: 0.6rem 0 0.3rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
}

.ref-drill-cue {
  font-weight: 600;
  margin: 0 0 0.45rem;
}

.ref-drill-n {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.85em;
  margin-left: 0.4rem;
}

.ref-drill-input {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  padding: 0.4rem 0.6rem;
  font-size: 0.9375rem;
  margin-right: 0.5rem;
  width: 12rem;
  max-width: 55%;
}

.ref-drill-fb.is-ok { color: var(--correct); }
.ref-drill-fb.is-wrong { color: var(--wrong-text); }

.ref-drill-score { margin: 0 0 0.5rem; }

.ref-drill-correction {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin: 0.3rem 0 0.6rem;
}

/* Brand = Home (2026-08-18). A button that still reads as the wordmark. */
button.brand {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
}
button.brand:hover { color: var(--text); }

/* A hinted-but-correct open cloze answer (James, 2026-09-28): no penalty,
 * no red — a quiet dot in the answer row so the student can see they used
 * help. Same muted colour as .error-tag, no border: a mark, not a tag. */
.hint-mark {
  margin-left: 0.4rem;
  color: var(--muted);
  font-size: 1.1em;
  vertical-align: middle;
}

/* Error typing on exam misses (James, 2026-08-19): "highlight the type of
 * error". The tag sits after the correct answer, quieter than the answer
 * itself — the answer is what they need first, the diagnosis second. */
.error-tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.02rem 0.4rem;
  border: 1px solid var(--muted);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.error-breakdown {
  margin-top: -0.25rem;
  margin-bottom: 0.6rem;
}

/* Wrong examples (~~like this~~). Error colour + a faint strike — the
   letters stay readable (James, Reflexives 2 2026-09-11). */
.wrong-eg {
  color: var(--wrong);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(196, 165, 116, 0.4);
}

.intro-table-err td:first-child {
  color: var(--wrong);
}

/* ---- Sort into bins (2026-08-26) — classification, not matching.
   Drag a word into a column, or click the word then the column. Nothing is
   marked until every word is placed and Check is pressed. */
.sb-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-height: 2.2rem;
  padding: 0.4rem;
  margin: 0.4rem 0;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.sb-bins {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.sb-bins[data-n="5"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Long chips: two by two, so a placed sentence is not squeezed into a sliver. */
.sb-bins.sb-wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sb-bin {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.4rem;
  min-height: 6rem;
}

.sb-bin.over {
  border-color: var(--line);
  background: rgba(125, 200, 255, 0.07);
}

.sb-bin h3 {
  margin: 0 0 0.15rem;
  font-size: 0.8125rem;
  color: var(--text);
  text-transform: lowercase;
}

.sb-cap {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  color: var(--muted);
  font-weight: 400;
  text-transform: none;
}

.sb-rule {
  margin: 0 0 0.55rem;
  font-size: 0.8125rem;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.35;
}

.sb-drop {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-height: 3.5rem;
}

button.sb-chip {
  font-family: var(--serif);
  font-size: 0.9375rem;
  line-height: 1.25;
  padding: 0.3rem 0.45rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  cursor: grab;
  text-align: left;
  flex: 0 0 auto;
  max-width: 100%;
  white-space: normal;
}

button.sb-chip:hover:not(:disabled) {
  border-color: var(--muted);
}

button.sb-chip.sel {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.sb-chip strong {
  color: var(--text);
  font-weight: 600;
}

.sb-chip.sel strong {
  color: inherit;
}

button.sb-chip.good {
  border-color: var(--correct);
  background: rgba(90, 158, 143, 0.12);
}

button.sb-chip.bad {
  border-color: var(--wrong);
  background: rgba(239, 68, 68, 0.12);
}

.sb-chip .sb-cz,
.sb-chip .sb-truth {
  font-family: var(--font);
}

.sb-chip .sb-cz {
  opacity: 0.65;
  margin-left: 0.3rem;
  font-style: italic;
}

.sb-chip .sb-truth {
  display: block;
  font-size: 0.8125rem;
  color: var(--wrong);
}

@media (max-width: 720px) {
  .sb-bins[data-n="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 360px) {
  .sb-bins,
  .sb-bins.sb-wide { grid-template-columns: 1fr; }
}

/* Sort as rows (`sort_style: "rows"`, 2026-10-01) — long sentences, a
   page of seven, one button per bin under each. Captions sit once as a key. */
.sr-key {
  list-style: none;
  margin: 0 0 0.8rem;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.45;
}

.sr-key b {
  color: var(--text);
  font-weight: 600;
  margin-right: 0.3rem;
}

.sr-rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.8rem;
}

.sr-row {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.sr-row.good {
  border-color: var(--correct);
}

.sr-row.bad {
  border-color: var(--wrong);
}

.sr-sent {
  margin: 0 0 0.4rem;
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.35;
}

.sr-clue {
  background: rgba(240, 190, 60, 0.3);
  color: inherit;
  border-radius: 3px;
  padding: 0 0.15rem;
}

.sr-bins {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

button.sr-bin {
  font-family: inherit;
  font-size: 0.8125rem;
  padding: 0.25rem 0.4rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}

button.sr-bin:hover:not(:disabled) {
  border-color: var(--muted);
}

button.sr-bin.sel {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

button.sr-bin.good {
  border-color: var(--correct);
  background: rgba(90, 158, 143, 0.18);
}

button.sr-bin.bad {
  border-color: var(--wrong);
  background: rgba(239, 68, 68, 0.15);
}

button.sr-bin:disabled {
  cursor: default;
}

/* A1 vocab match / type-in sprints (level checks — no fruit) */
.sprint .lede {
  margin: 0.5rem 0 1rem;
  color: var(--muted);
  max-width: 32rem;
}
.sprint-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
}
.sprint-field {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.sprint-field select {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  padding: 0.4rem 0.55rem;
}
.sprint-best {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
}
.sprint-hud {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}
.sprint .hud-label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted);
}
.sprint .hud-value {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 6vw, 2.8rem);
  line-height: 1;
  font-weight: 400;
}
.sprint .hud-value.urgent {
  color: var(--wrong);
}
.sprint-bar {
  margin-top: 0.75rem;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface);
}
.sprint-bar > i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: var(--vocab-accent);
}
.sprint-bar.urgent > i {
  background: var(--wrong);
}
.sprint-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 1rem;
}
.sprint-cols p {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted);
}
.sprint-cols p:last-child {
  text-align: right;
}
.sprint-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(6, 1fr);
  gap: 0.5rem;
  margin-top: 0.5rem;
  min-height: 22rem;
}
button.sprint-tile {
  font: inherit;
  min-height: 3.2rem;
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--vocab-accent-border);
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
button.sprint-tile:hover:not(:disabled):not(.selected):not(.wrong):not(.gone) {
  border-color: var(--vocab-accent);
}
button.sprint-tile.selected {
  background: var(--vocab-accent);
  color: var(--on-accent);
  border-color: var(--vocab-accent);
  font-weight: 600;
}
button.sprint-tile.wrong {
  background: rgba(196, 165, 116, 0.25);
  border-color: var(--wrong);
  color: var(--text);
}
button.sprint-tile.gone {
  opacity: 0;
  pointer-events: none;
  border-color: transparent;
  background: transparent;
}
.sprint .kicker {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted);
}
.sprint .score-hero {
  margin: 0.5rem 0 0;
  font-size: clamp(2.2rem, 8vw, 3.4rem);
  font-weight: 400;
  line-height: 1;
}
.sprint .score-hero small {
  margin-left: 0.4rem;
  font-size: 1.0625rem;
  color: var(--muted);
  font-weight: 400;
}
.sprint-recap {
  margin-top: 1.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.sprint-recap h3 {
  margin: 0 0 0.6rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted);
}
.sprint-recap-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sprint-recap-list li {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 2.25rem 0.35rem 0.5rem;
  border-radius: var(--radius-btn);
  color: var(--muted);
}
/* Star in the corner, as on the Use sheet (every row, 2026-09-22). */
.sprint-recap-list li .star-btn {
  position: absolute;
  right: 0.25rem;
  top: 0.3rem;
}
.sprint-recap-list li b {
  color: var(--text);
  font-weight: 600;
}
.sprint-recap-list li.missed {
  background: rgba(196, 165, 116, 0.15);
  color: var(--text);
}
.sprint-recap-list li.missed b {
  color: var(--wrong);
}

.sprint-type-card {
  margin-top: 1.25rem;
  max-width: 32rem;
}
.sprint-type-card .sub {
  margin: 0 0 0.35rem;
  color: var(--muted);
}
.sprint-type-card .prompt {
  margin: 0.2rem 0 0.15rem;
  font-size: clamp(1.45rem, 4vw, 1.85rem);
}
.sprint-type-card .type-clue {
  margin: 0.1rem 0 0;
}
.sprint-recap-list.type-recap li {
  display: grid;
  grid-template-columns: 1.25rem 1fr auto;
  align-items: baseline;
}
.sprint-recap-list.type-recap .sprint-mark {
  color: var(--muted);
  font-weight: 600;
}
.sprint-recap-list.type-recap li.missed .sprint-mark {
  color: var(--wrong);
}
.sprint-recap-list .wrote,
.sprint-type-card .fb .wrote {
  display: block;
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--muted);
  font-weight: 400;
}
.sprint-recap-list.type-recap .wrote {
  grid-column: 2 / -1;
}
/* Level review recap: answer and prompt are both whole sentences, so the
 * prompt goes under the answer. Side by side, the prompt's auto column
 * squeezed the answer into a narrow strip (James, C1 finale, 2026-10-01). */
.sprint-recap-list.type-recap .recap-answer,
.sprint-recap-list.type-recap .recap-prompt {
  grid-column: 2 / -1;
}
.sprint-recap-list.type-recap .recap-prompt {
  font-size: 0.875rem;
}
/* The unit's explanation under a miss in the grammar checks' recap. */
.sprint-recap-list .why {
  display: block;
  grid-column: 2 / -1;
  margin-top: 0.15rem;
  font-size: 0.875rem;
  color: var(--text);
  font-weight: 400;
}

/* Which is correct? (A1 grammar check) */
.sprint-which .which-prompt {
  margin: 1.1rem 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
}
.sprint-which .practice-hint {
  margin: 0 0 0.75rem;
}
.sprint-which .choices {
  margin-top: 0.35rem;
}
.sprint-which .choice {
  font-size: 1.0625rem;
  line-height: 1.4;
  padding: 0.8rem 0.95rem;
}
.sprint-which .fb {
  min-height: 1.4rem;
  margin: 0.5rem 0 0;
}
.sprint-which .fb.good {
  color: var(--correct);
}
.sprint-which .which-why,
.sprint-grammar .which-why {
  margin: 0.85rem 0 0.15rem;
  max-width: 36rem;
}
.sprint-which .which-expl,
.sprint-grammar .which-expl {
  margin: 0 0 0.4rem;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.sprint-which .which-unit,
.sprint-grammar .which-unit {
  font-size: 0.9375rem;
}
.sprint-which .fb.bad {
  color: var(--wrong);
}

/* A1 grammar cloze type-in */
.sprint-grammar .sprint-type-card .prompt {
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  font-weight: 600;
  margin: 0.2rem 0 0.25rem;
}
.sprint-grammar .sprint-type-card .practice-hint {
  margin: 0 0 0.55rem;
}

/* A1 review (a1_finale) · CZ → full English sentence */
.sprint-finale .sprint-type-card {
  max-width: 36rem;
}
.sprint-finale .sprint-type-card .prompt {
  font-size: clamp(1.2rem, 3.2vw, 1.55rem);
  font-weight: 600;
  margin: 0.2rem 0 0.55rem;
}
.sprint-finale .type-area {
  width: 100%;
  min-height: 4.2rem;
}
.finale-recap .finale-block {
  margin: 0.85rem 0 0;
}
.finale-recap .finale-block h4 {
  margin: 0 0 0.45rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted);
}
.finale-recap .finale-block h5 {
  margin: 0.7rem 0 0.2rem;
  font-size: 0.9375rem;
  font-weight: 600;
}
/* Styled as a link, not a heading: James (C1 grammar · match, 2026-10-01)
 * asked for the recap to link each sentence to its unit — it already did,
 * but plain white text with no underline did not read as a link. */
.finale-recap .finale-unit {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.finale-recap .finale-unit::after {
  content: " →";
}

/* Wordlists panel — one row per level, downloads on the right.
   (James, 2026-09-10: a first-class home button, like Reference.) */
.wordlist-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line, rgba(128, 128, 128, 0.25));
}
.wordlist-row:last-child { border-bottom: 0; }
.wordlist-row .home-hint { margin: 0.15rem 0 0; }
.wordlist-files { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wordlist-file {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line, rgba(128, 128, 128, 0.35));
  border-radius: var(--radius-btn);
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.wordlist-file:hover, .wordlist-file:focus-visible { border-color: currentColor; }
.wordlist-size { font-weight: 400; opacity: 0.7; font-size: 0.85em; }

/* Build stamp — which version this browser is showing (James, 2026-09-10).
   Quiet enough to ignore, readable enough to compare across two screens. */
.build-stamp {
  margin-left: auto;
  align-self: center;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  opacity: 0.45;
  white-space: nowrap;
  cursor: default;
  user-select: all;
}
.build-stamp:hover { opacity: 0.8; }

/* Report a mistake (js/report.js, James 2026-09-26). The site's button and
   dialog, copied from palmovka-english/public/style.css so the two read as
   one site; the tokens are shared. It sits at the right end of the top bar:
   the brand holds the left, everything else packs right, so on a phone,
   where the button wraps to its own line, it still lands on the right. */
.util-bar { justify-content: flex-end; }
.util-bar .brand { margin-right: auto; }
/* A quiet link on the brand's line, at every width, so the bar is the same
   height as on home and nothing jumps (James, 2026-10-01 for laptops,
   2026-10-02 for phones: the boxed 44 px button made it 58 px against 33).
   A phone still gets a 44 px target: ::after reaches outside the line, so it
   adds no height. */
.util-bar .pe-report-btn {
  position: relative;
  font: 13px/1.45 var(--sans);
  font-weight: 400;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.util-bar .pe-report-btn::after {
  content: "";
  position: absolute;
  inset: -12px -8px;
}
.pe-report-btn:hover, .pe-report-btn:focus { color: var(--ink); }
.pe-report-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.pe-report-dialog {
  margin: auto;
  width: min(420px, calc(100% - 28px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  font: 16px/1.5 var(--sans);
}
.pe-report-dialog::backdrop { background: rgba(8, 12, 16, 0.72); }
.pe-report-dialog [hidden] { display: none; }
.pe-report-dialog h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
}
.pe-report-dialog label {
  display: block;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.pe-report-reasons { border: 0; margin: 0 0 12px; padding: 0; }
.pe-report-reasons legend {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 6px;
  padding: 0;
}
.pe-report-dialog .pe-report-reason {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--ink);
  margin: 0;
  min-height: 44px;
  cursor: pointer;
}
.pe-report-reason input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
}
.pe-report-dialog textarea,
.pe-report-dialog input[type="text"],
.pe-report-dialog input[type="email"] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 6px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  padding: 10px 12px;
  font: inherit;
  font-size: 16px;
}
.pe-report-dialog textarea { min-height: 96px; resize: vertical; }
.pe-report-dialog textarea:focus,
.pe-report-dialog input:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.pe-report-about { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.pe-report-fine { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.pe-report-status { font-size: 15px; color: var(--accent); margin: 0 0 10px; }
.pe-report-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pe-report-actions .btn { font-size: 15px; min-height: 44px; padding: 0 18px; }
.pe-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Word ID dictionary (hidden; js/dictionary.js, 2026-09-17) ---- */
.dict-search { position: relative; margin: 0.4rem 0 0.9rem; }
.dict-q {
  width: 100%;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  padding: 0.55rem 0.7rem;
}
.dict-q:focus { outline: none; border-color: var(--accent); }
.dict-sugg {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-height: 50vh;
  overflow: auto;
}
.dict-sugg[hidden] { display: none; }
.dict-sugg li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-btn);
  cursor: pointer;
}
.dict-sugg li:hover,
.dict-sugg li.is-active { background: rgba(255, 255, 255, 0.04); }
.dict-sugg li.dict-none { cursor: default; color: var(--muted); font-size: 0.9375rem; }
.dict-sugg li.dict-none:hover { background: none; }
.dict-sl { font-weight: 600; }
.dict-sp { font-size: 0.8125rem; color: var(--muted); font-style: italic; }
.dict-sm {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A lookup that found nothing, and the bare /word screen. */
.dict-miss { margin-top: 1rem; max-width: 46ch; }
.dict-miss-h { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.dict-miss .home-hint { margin-top: 0.5rem; }

.dict-head { display: flex; align-items: baseline; gap: 0.4rem 0.8rem; flex-wrap: wrap; }
.dict-lemma { margin: 0; font-size: 2rem; font-weight: 600; line-height: 1.1; }
.dict-head .star-btn { font-size: 1.5rem; align-self: center; }
.dict-count { margin: 0.2rem 0 0; font-size: 0.8125rem; }
.dict-muted { color: var(--muted); font-size: 0.8125rem; }

.dict-card {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}
.dict-root { margin: 0 0 0.45rem; font-size: 1.0625rem; line-height: 1.4; }
.dict-root-line { display: block; }
.dict-root-line + .dict-root-line { color: var(--muted); font-size: 0.9375rem; }
.dict-pos { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.dict-pos b { color: var(--text); font-weight: 600; }
.dict-meaning { margin: 0.3rem 0 0.6rem; font-size: 1.0625rem; }
/* One language, labeled, under the meaning. A toggle can swap the key later. */
.dict-cz { margin: -0.15rem 0 0.7rem; font-size: 0.9375rem; color: var(--muted); }
.dict-cz-lang {
  margin-right: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted);
}
.dict-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.dict-chip {
  display: inline-block;
  font-size: 0.8125rem;
  line-height: 1.3;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--muted);
}
.dict-chip.is-link { color: var(--accent); text-decoration: none; border-color: var(--accent-border); }
.dict-chip.is-link:hover { background: var(--accent-dim); }
.dict-chip.is-level { color: var(--text); border-color: var(--line); background: transparent; font-weight: 600; }
.dict-chip.is-band { color: var(--vocab-accent); border-color: var(--vocab-accent-border); }
.dict-chip.is-theme { font-style: italic; }
.dict-chip.is-quiet { border-style: dashed; }

.dict-sec { margin-top: 0.85rem; }
.dict-sec-h {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted);
}
.dict-sec-tag { font-weight: 400; letter-spacing: 0.03em; text-transform: none; color: var(--muted); }
.dict-sub { margin: 0.5rem 0 0.3rem; font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
.dict-sub:first-child { margin-top: 0; }
.dict-example { margin: 0; font-style: italic; }
.dict-chain { margin: 0 0 0.35rem; font-size: 0.9375rem; color: var(--muted); }
.dict-units { list-style: none; margin: 0; padding: 0; }
.dict-units li { display: flex; gap: 0.6rem; align-items: baseline; margin: 0 0 0.25rem; }
.dict-units a { color: var(--accent); font-weight: 600; }
.dict-units a:hover { text-decoration: underline; }
.dict-forms { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; margin: 0 0 0.55rem; }
.dict-form { font-size: 0.9375rem; }
.dict-form-l {
  margin-right: 0.2rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.dict-form.is-empty { color: var(--muted); }
.dict-kv { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.8rem; margin: 0; font-size: 0.9375rem; }
.dict-kv dt { color: var(--muted); }
.dict-kv dd { margin: 0; }

.dict-rel { margin-top: 0.85rem; }
.dict-note { margin: 0.4rem 0 0; font-size: 0.9375rem; }
.dict-lines { margin: 0.2rem 0 0; padding-left: 1.1rem; font-size: 0.9375rem; }
.dict-lines li { margin: 0.15rem 0; }
.dict-more { margin-top: 0.9rem; }
.dict-more > summary { cursor: pointer; color: var(--muted); font-size: 0.8125rem; font-weight: 600; }
.dict-scale { margin: 0.2rem 0; font-size: 0.9375rem; line-height: 1.9; }

.word-id-link {
  color: var(--accent);
  font-size: inherit;
  font-weight: inherit;
}
.word-id-link:hover { text-decoration: underline; }
/* The root tip. Text only, no card. Touch screens never see it. */
#root-hover {
  position: fixed;
  z-index: 30;
  margin: 0;
  padding: 0.05rem 0.3rem;
  background: var(--bg);
  color: var(--text);
  font-size: 0.8125rem;
  line-height: 1.35;
  pointer-events: none;
  max-width: 22rem;
}
#root-hover[hidden] { display: none !important; }
@media (hover: none) {
  #root-hover { display: none !important; }
}

/* Runs — one grammar thread played straight through (/articles).
   The ladder reuses .path-item wholesale; these rules only add the tick,
   the "start here" flag and the action row. */
.run-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0 0.4rem;
}

.run-tally {
  margin-top: 0.2rem;
}

/* The family cloze round (James, 2026-09-28: more visible). Open, it is a
   link dressed as the Start buttons; locked, a line in the body colour with
   the unit count in grey. Never red. */
a.run-cloze-btn {
  display: inline-block;
  text-decoration: none;
}
.run-cloze-locked {
  margin: 0.6rem 0 0.4rem;
  font-size: 0.9375rem;
  color: var(--text);
}
.run-cloze-count {
  font-size: 0.8125rem;
  color: var(--muted);
}

.run-list {
  margin: 0.5rem 0 0.7rem;
}

.run-row.is-entry {
  border-color: var(--line);
  background: transparent;
}

.run-row .n {
  min-width: 1.9rem;
}

.run-tick {
  color: var(--correct);
  font-weight: 600;
  margin-right: 0.35rem;
}

.run-entry-flag {
  margin-left: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted);
}

/* The Reference panel's door into a run: an ordinary button. As a 600
   underlined link it was the loudest thing on the page (UI audit #20,
   James 2026-10-02). */
.ref-run-link {
  display: inline-block;
  margin: 0.1rem 0 0.5rem;
  text-decoration: none;
}

/* The placement check that opens a run, and the rules page under the ladder.
   Both exist for one student: he wants the logic before the practice, and he
   stops when it is not clear (James, 2026-09-23). */
.run-check {
  margin: 0.4rem 0 0.2rem;
}

.check-stem {
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0.5rem 0 0.7rem;
}

.check-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.check-chip {
  min-width: 4.6rem;
  font-weight: 600;
}

.check-chip .check-n {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-right: 0.4rem;
}

.check-chip.is-right {
  border-color: var(--correct);
  color: var(--correct);
}

.check-chip.is-wrong {
  border-color: var(--wrong);
  color: var(--wrong);
}

.check-chip.is-dim {
  opacity: 0.45;
}

.check-feedback {
  margin: 0.7rem 0 0.6rem;
  line-height: 1.55;
}

.check-feedback.is-ok {
  color: var(--correct);
}

.check-feedback.is-wrong {
  color: var(--wrong);
}

.check-verdict {
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0.3rem 0 0.2rem;
}

.check-missed {
  margin: 0.5rem 0;
  line-height: 1.5;
}

.check-missed-stem {
  display: block;
}

.check-missed-ans {
  color: var(--correct);
  font-weight: 600;
  margin-right: 0.45rem;
}

.check-missed-why {
  color: var(--muted);
  font-size: 0.8125rem;
}

.check-skip {
  color: var(--muted);
}

.run-round {
  margin: 0.5rem 0;
  line-height: 1.6;
}

/* Rules: the four questions, in the order you ask them. */
.run-rules {
  margin-top: 1.1rem;
  border-top: 1px solid var(--line);
  padding-top: 0.8rem;
}

.rule-tree {
  list-style: none;
  counter-reset: rule;
  margin: 0.7rem 0 0.9rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rule-step {
  counter-increment: rule;
  display: grid;
  grid-template-columns: 1.7rem 1fr auto;
  gap: 0.2rem 0.6rem;
  align-items: baseline;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, 0.03);
}

.rule-step::before {
  content: counter(rule);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.8125rem;
}

.rule-q {
  font-weight: 600;
}

.rule-a {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

.rule-eg {
  grid-column: 2 / -1;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.rule-case {
  margin: 0.5rem 0;
}

.rule-case del {
  color: var(--muted);
}

@media (max-width: 560px) {
  .rule-step {
    grid-template-columns: 1.5rem 1fr;
  }
  .rule-a {
    grid-column: 2;
  }
}

/* The run breadcrumb above a unit. The unit keeps its own name. */
.run-crumb {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.run-crumb a,
.run-exit a {
  color: var(--accent);
}

.run-crumb a:hover,
.run-exit a:hover {
  text-decoration: underline;
}

.run-step {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted);
}

.run-row.is-coming:disabled {
  opacity: 1;
}

.run-row.is-coming {
  background: rgba(224, 195, 106, 0.08);
  border-color: rgba(224, 195, 106, 0.55);
}

.run-row.is-coming .status.is-planned,
.run-coming-note strong {
  color: #e0c36a;
}

/* `hidden` is display:none from the UA sheet, which an author `display` rule
   beats — .level-rail is a flex row, so hiding it on a run did nothing until
   this. Scoped to the chrome a run puts away, not a blunt [hidden] override. */
#home-title[hidden],
#rail-label[hidden],
#level-rail[hidden],
#home-search[hidden] {
  display: none;
}

.run-exit {
  margin-top: 0.9rem;
}

/* A step is an ARTICLES level, not an English level. A fluent adult placed at
   step 2 must not read it as being called A2 (James, 2026-09-23). */
.check-aside {
  margin: 0.6rem 0 0.2rem;
  color: var(--muted);
  line-height: 1.55;
}

/* The exception a question carries without being lengthened by it. */
.rule-caveat {
  display: block;
  margin-top: 0.2rem;
  font-style: normal;
  opacity: 0.85;
}

/* Intro card link tables (`links` in a card) render `<a class="link">`, and
   only `button.link` was styled — so the anchors fell back to the browser's
   default #0000EE on a near-black page and read as broken. 8 cards across 7
   units carry these. Found 2026-09-23 adding the open cloze unit's exit into
   the exam bank. */
a.link {
  color: var(--accent);
}

a.link:hover {
  text-decoration: underline;
}

/* The English in its own face (SERIF.md, James 2026-09-24): the serif is the
   English being learned, the sans is the app speaking. Only slots that hold
   English get it. `.practice-prompt` also carries Czech prompts, scores and
   labels, so the JS marks the English ones `--en`; Quiz chips the same. The
   number keys stay sans. Weight 400: 600 reads anxious in a book face. */
.practice-prompt.practice-prompt--en,
.prompt.prompt--en,
.rw-cue,
.check-stem {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
}
.type-in {
  font-family: var(--serif);
  font-size: 1.25rem;
}
.choice.choice--en,
.check-chip,
.opt {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 400;
}
.choice.choice--en .knum,
.check-chip .check-n,
.opt .knum {
  font-family: var(--font);
}
/* Match cards: only the English side, which the JS marks. */
.use-sheet-en,
.intro-ex .en,
button.m.m--en {
  font-family: var(--serif);
}
.dict-lemma {
  font-family: var(--serif);
  font-weight: 600;
}
/* Upright: an italic serif is harder for a learner to read, and the face
   already marks the example as English. */
.dict-example {
  font-family: var(--serif);
  font-style: normal;
}

/* F15 · Topics and More share #panel-more; each shows only its own part
   (look audit, 2026-09-25). Topics: the tree and the path. More: the
   dictionary, progress and backup. */
#panel-more.is-topics .home-more-block:not(#map-details) { display: none; }
#panel-more.is-more #map-details { display: none; }
/* More's own rows and the build stamp (James, 2026-09-26); Topics hides them. */
#panel-more.is-topics .more-only { display: none; }
/* The level chips: Topics only (James, 2026-09-29). */
#panel-more.is-more .topics-only { display: none; }
/* Topics on a wide screen (James, 2026-09-26): the tree beside the list and
   pinned, so pointing at a unit lights a part you can still see. It stays at
   the home column's width (James, 2026-10-02: it used to widen to ~1,150 px
   and the page jumped); narrower screens keep one column. */
@media (min-width: 1000px) {
  #panel-more.is-topics #map-more:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }
  #panel-more.is-topics #tree-portrait-card { position: sticky; top: 1rem; margin: 0; }
  #panel-more.is-topics #path-card { margin: 0; }
  #panel-more.is-topics #tree-portrait svg { max-height: calc(100vh - 7rem); }
}
/* Phone Topics (James, 2026-10-02): one box, not four. Under 480 px the Map
   details lose their indent and the Tree and Units cards their border and
   padding, so unit names get the width (UI audit #4). */
@media (max-width: 479.98px) {
  #panel-more.is-topics #map-details { padding-left: 0; padding-right: 0; }
  #panel-more.is-topics #tree-portrait-card,
  #panel-more.is-topics #path-card {
    border: 0;
    padding: 0;
    background: none;
  }
  #panel-more.is-topics #tree-portrait-card { margin-top: 1rem; }
}
#more-rows { margin: 0.5rem 0 1rem; }
#panel-more .build-stamp { margin: 1.25rem 0 0; }
/* Report a mistake: in More on the home screen, in the top bar everywhere
   else, where inside a unit it carries the question. */
body:has(#view-map:not([hidden]) #home-search:not([hidden])) .util-bar .pe-report-btn,
body:has(#view-map:not([hidden]) #panel-more.is-more:not([hidden])) .util-bar .pe-report-btn {
  display: none;
}

/* Links are silver since look C (2026-09-25), the same as soft text, so
   every text link carries a quiet underline. */
a.link,
button.link,
.explain-link,
.family-link,
.exam-revise-link,
.exam-tables-link,
.dict-units a,
.word-id-link,
.run-crumb a,
.run-exit a,
.deeplink-near a {
  text-decoration: underline;
  text-decoration-color: var(--muted);
  text-underline-offset: 0.15em;
}

/* Progress page (2026-09-28): a level per row, a thin bar each.
   Grey track, accent fill, never red. */
.progress-levels { display: grid; gap: 1rem; }
.progress-level {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
}
.progress-level-name { font-weight: 600; }
.progress-level-count { color: var(--muted); font-size: 0.9375rem; }
.progress-bar {
  grid-column: 2;
  height: 0.35rem;
  border-radius: 99px;
  background: rgba(160, 160, 160, 0.18);
  overflow: hidden;
}
.progress-bar-fill { height: 100%; background: var(--accent); border-radius: 99px; }
.progress-level-sub { grid-column: 2; color: var(--muted); font-size: 0.8125rem; }
.progress-bar + .progress-level-sub { margin-top: 0.15rem; }

/* Keyboard hints (js/key-hints.js) are for keyboards: a phone was told
   "Enter = next · Backspace = back" on every step (James, 2026-10-01). */
@media (hover: none) and (pointer: coarse) {
  .kbd-hint { display: none; }
}

/* ---- Search row (js/search.js, 2026-10-02) ---- */
.search-hits { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.search-hits[hidden] { display: none; }
/* Title and level on one line; kind, family and "Coming soon" under it,
 * so a long unit name on a phone does not squash them. */
.search-hit {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 0.8rem;
  align-items: baseline;
  padding: 0.55rem 0.5rem;
  border-top: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}
.search-hits li:first-child .search-hit { border-top: 0; }
a.search-hit:hover,
.search-hits li.is-active .search-hit { background: rgba(255, 255, 255, 0.04); }
/* Words and unit names are titles: the serif (James, 2026-10-02). */
.search-hit-title { grid-column: 1; grid-row: 1; font-family: var(--serif); font-size: 1.125rem; font-weight: 400; }
.search-hit-level { grid-column: 2; grid-row: 1; font-size: 0.8125rem; color: var(--muted); }
.search-hit-meta { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--muted); }
.search-hit-soon { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--muted); font-style: italic; }
.search-hits li.is-soon .search-hit-title { color: var(--muted); }
.search-note { margin: 0.5rem 0 0; }

/* Picture icons that Windows 10 can't draw (James, 2026-10-02: 🩼 and 🫤 were
   empty boxes). Emoji 13 and later, cut from Noto Color Emoji (SIL Open
   Font License, css/fonts/rue-emoji-OFL.txt) to just those glyphs,
   self-hosted, 9 small files: nothing is fetched from Google. A page
   loads only the file whose emoji it shows. The system's own emoji font
   comes first, so phones and Macs keep their pictures. */
@font-face {
  font-family: "RUE Emoji";
  src: url("fonts/rue-emoji-1.woff2") format("woff2");
  unicode-range: U+1F6D7, U+1F6DC, U+1F7F0, U+1FA75-1FA77, U+1FAAF;
  font-display: swap;
}
@font-face {
  font-family: "RUE Emoji";
  src: url("fonts/rue-emoji-2.woff2") format("woff2");
  unicode-range: U+1FA74, U+1FA7B, U+1FA86, U+1FA8E-1FA8F, U+1FA96, U+1FA99-1FAA0, U+1FAA2-1FAA7, U+1FAAA-1FAAE;
  font-display: swap;
}
@font-face {
  font-family: "RUE Emoji";
  src: url("fonts/rue-emoji-3.woff2") format("woff2");
  unicode-range: U+1F6FC, U+1FA83-1FA85, U+1FA87-1FA8A, U+1FA97-1FA98, U+1FAA1, U+1FAA9, U+1FADF;
  font-display: swap;
}
@font-face {
  font-family: "RUE Emoji";
  src: url("fonts/rue-emoji-4.woff2") format("woff2");
  unicode-range: U+1F6D6, U+1F6DD-1F6DF, U+1F6FB, U+1FA7C;
  font-display: swap;
}
@font-face {
  font-family: "RUE Emoji";
  src: url("fonts/rue-emoji-5.woff2") format("woff2");
  unicode-range: U+1F9CB, U+1FAD0-1FADC;
  font-display: swap;
}
@font-face {
  font-family: "RUE Emoji";
  src: url("fonts/rue-emoji-6.woff2") format("woff2");
  unicode-range: U+1F9A3-1F9A4, U+1F9AB-1F9AD, U+1FAA8, U+1FAB0-1FABF, U+1FACD-1FACF, U+1FAE7;
  font-display: swap;
}
@font-face {
  font-family: "RUE Emoji";
  src: url("fonts/rue-emoji-7.woff2") format("woff2");
  unicode-range: U+1F977, U+1F9CC, U+1FAC3-1FAC5, U+1FAC8, U+1FAEF;
  font-display: swap;
}
@font-face {
  font-family: "RUE Emoji";
  src: url("fonts/rue-emoji-8.woff2") format("woff2");
  unicode-range: U+1F90C, U+1F972, U+1F978-1F979, U+1FA75-1FA77, U+1FAC0-1FAC2, U+1FAC6, U+1FAE0-1FAE6, U+1FAE8-1FAEA, U+1FAEF-1FAFA;
  font-display: swap;
}
@font-face {
  font-family: "RUE Emoji";
  src: url("fonts/rue-emoji-9.woff2") format("woff2");
  unicode-range: U+1FA8B-1FA8D, U+1FACC, U+1FADD, U+1FAEB;
  font-display: swap;
}
.pic-icon,
.icon-chip {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "RUE Emoji", sans-serif;
}

/* The level-test result on home: a quiet panel, not a pop-up (James,
   2026-10-02). It sits above the search bar and goes once used. */
.welcome-inline {
  margin: 0.25rem 0 1rem;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
}
.welcome-inline[hidden] { display: none; }
.welcome-inline h2 { margin: 0 0 0.4rem; font-size: 1.0625rem; color: var(--text); }
.welcome-inline .welcome-levels { margin: 0 0 0.6rem; }
.welcome-inline .home-actions { margin-top: 0.6rem; }
/* "Your progress is kept on this device", until a few units are done. */
.home-device-note { margin: 0.8rem 0 0; font-size: 0.8125rem; color: var(--muted); }
.home-device-note[hidden] { display: none; }

/* ---- The serif rule (James, 2026-10-03: "consistent throughout the app,
   otherwise it's better not to have started"). Gentium for titles, unit
   names and English to learn or look up, standing on its own. The plain
   sans for everything the app says: instructions, buttons, notes, Czech,
   explanations, and the whole of a unit's intro except its card titles.
   English inside an explanation sentence stays in the sentence's face. */
h1, h2, h3,
.intro-card > .prompt,
.path-item .title,
.dict-units a,
.family-link,
.exam-revise-link,
.wordlist-row > div > strong,
.quiet-details > summary,
.run-rules > summary,
.reveal,
.star-en,
.sprint-tile[data-side="en"],
.sprint-grammar .sprint-type-card .prompt,
.sprint-recap-list li > b,
.order-token,
.order-built,
.dict-scale b,
.dict-chip:not(.is-level):not(.is-band):not(.is-theme) {
  font-family: var(--serif);
}
/* Level marks are Cinzel wherever they stand as a mark: Topics' buttons
   and the level box over the tree at a unit's end. */
.fruit-payoff-level {
  font-family: var(--caps);
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* Small grey labels that happen to be headings stay labels. */
.run-entry-flag,
.order-placeholder,
.sb-bin h3,
.sprint-recap h3,
.path-item .domain-tag {
  font-family: var(--sans);
}
/* Reference columns that hold English forms; meaning, use, level and Czech
   columns stay plain. */
.ref-table td.ref-col-base, .ref-table td.ref-col-past, .ref-table td.ref-col-pp,
.ref-table td.ref-col-form, .ref-table td.ref-col-choice, .ref-table td.ref-col-word,
.ref-table td.ref-col-noun, .ref-table td.ref-col-phrase, .ref-table td.ref-col-prep,
.ref-table td.ref-col-particle, .ref-table td.ref-col-modal, .ref-table td.ref-col-prefix,
.ref-table td.ref-col-suffix, .ref-table td.ref-col-subject, .ref-table td.ref-col-object,
.ref-table td.ref-col-poss_adj, .ref-table td.ref-col-poss_pron, .ref-table td.ref-col-reflexive,
.ref-table td.ref-col-unit, .ref-table td.ref-col-bare, .ref-table td.ref-col-def,
.ref-table td.ref-col-cnt, .ref-table td.ref-col-unc {
  font-family: var(--serif);
}

/* Build: make words from a root (js/word-build.js; James, 2026-10-05).
   Prefix tiles above the root, suffix tiles below, the tapped word under. */
.build-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.7rem 0;
}
.build-tile {
  font-family: var(--serif);
  font-size: 1rem;
  min-width: 3rem;
  padding: 0.4rem 0.6rem;
}
.build-tile.is-on {
  border-color: var(--focus);
  color: var(--ink);
  background: color-mix(in srgb, var(--focus) 18%, transparent);
}
.build-root {
  text-align: center;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0.2rem 0;
}
.build-sel {
  text-align: center;
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--ink-soft);
  min-height: 1.5rem;
  margin: 0.4rem 0 0.2rem;
}
.build-found {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.9rem 0 0.4rem;
}
.build-word {
  font-family: var(--serif);
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--correct);
  border-radius: var(--radius-btn);
  color: var(--correct);
}
.build-word.is-bonus {
  border-style: dashed;
}
.build-ok {
  color: var(--correct);
}
.build-no {
  color: var(--wrong);
}
.build-mean,
.build-parts {
  color: var(--muted);
}
.build-rest {
  margin: 0.8rem 0 0.4rem;
}
.build-rest-h {
  margin-bottom: 0.3rem;
}
.build-rest ul {
  margin: 0;
  padding-left: 1.1rem;
}
.build-rest li {
  margin: 0.2rem 0;
}
.build-nav {
  margin-top: 1rem;
  justify-content: flex-end;
}
/* A bases round: the middle row is words to pick from (P-build). */
.build-bases {
  margin: 0.9rem 0;
}
.build-base {
  font-weight: 700;
}

/* L1 flag (James, 2026-10-06: "flag in the header"). The flag is no taller
   than the report link, so the bar keeps its height; ::after gives a phone
   its 44 px target without adding any. Hidden while only Czech is offered. */
.util-bar .l1-pick { position: relative; display: flex; align-items: center; }
.l1-flag {
  position: relative;
  display: flex;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.l1-flag::after { content: ""; position: absolute; inset: -12px -10px; }
.l1-flag svg, .l1-opt svg {
  width: 21px;
  height: 14px;
  outline: 1px solid var(--line);
  border-radius: 2px;
}
.l1-flag:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.l1-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 9rem;
  padding: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.l1-menu[hidden] { display: none; }
.l1-opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 0.6rem;
  font: 14px var(--sans);
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--radius-btn);
  cursor: pointer;
  text-align: left;
}
.l1-opt:hover, .l1-opt:focus-visible { background: var(--bg); }
.l1-opt.is-on { font-weight: 600; }
/* The flag reads as a menu, and the menu says what it does in each
   language (James, 2026-10-07: learners did not know what the flags do). */
.l1-flag { align-items: center; gap: 3px; }
.l1-caret { font: 11px/1 var(--sans); color: var(--muted); }
.l1-menu { min-width: 15rem; }
.l1-menu-note {
  margin: 0.35rem 0.6rem 0.4rem;
  font: 12.5px/1.4 var(--sans);
  color: var(--muted);
}
.l1-opt-text { display: flex; flex-direction: column; line-height: 1.25; }
.l1-opt-hint { font-size: 12.5px; font-weight: 400; color: var(--muted); }
/* First-unit language row: quiet, in the page, gone once chosen. */
.l1-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin: 0 0 0.9rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  font: 13.5px/1.3 var(--sans);
  color: var(--muted);
}
.l1-ask[hidden] { display: none; }
.l1-ask-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 36px;
  padding: 0 0.6rem;
  font: inherit;
  color: var(--ink);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  cursor: pointer;
}
.l1-ask-opt svg { width: 21px; height: 14px; outline: 1px solid var(--line); border-radius: 2px; }
.l1-ask-opt.is-on { border-color: var(--accent); font-weight: 600; }
.l1-ask-opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* A text in Type (B1-PLAN engine item 3): the story so far above the gap,
   in the target-language serif; its English behind a button. */
.story {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--line, #ccc);
}
.story-title {
  margin: 0 0 0.5rem;
  font-weight: 600;
}
.story-line {
  margin: 0 0 0.35rem;
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.5;
}
.story-en-btn {
  margin-top: 0.25rem;
}
.story-en p {
  margin: 0.25rem 0 0;
  opacity: 0.8;
}