/* =================================================================
   theme.css — editorial overlay loaded after app.css / verbs.css.
   Visual register: FT-ish pink paper, oversized serif headwords,
   hairline rules between sections, no surface fills, no button
   chrome. Cosmetic only — no JS contracts changed.

   Remove the two <link rel="stylesheet" href="theme.css"> lines from
   index.html and verbs.html to revert.
   ================================================================= */

/* Fonts are self-hosted from /fonts/ — no external dependency.
   Both shipped under SIL OFL 1.1; copyright + license in /fonts/OFL.txt.
   EB Garamond and Inter are both variable-weight; one file each covers
   every weight we use (400, 500, 600). */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/eb-garamond.woff2') format('woff2-variations');
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/eb-garamond-italic.woff2') format('woff2-variations');
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/inter.woff2') format('woff2-variations');
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================================================================
   TOKENS — overlay onto app.css's :root
   ================================================================ */
:root {
  --bg:        #fbf3e8;     /* FT-ish warm paper */
  --paper:     #fbf3e8;     /* alias for --bg — use as foreground colour on dark fills */
  --surface:   #fbf3e8;     /* same — no card differentiation */
  --paper-2:   #f4ebda;     /* one step darker for inputs */
  --fg:        #14110d;     /* near-black ink */
  --ink:       var(--fg);   /* alias used by body prose; resolves theme-aware */
  --muted:     #5e574c;
  --faint:     #736c68;
  --line:      #e6dbc4;     /* slightly stronger paper-tone */
  --rule:      #d8cdb6;     /* hairline */
  --border:    #e6dbc4;
  --accent:    #8a1538;     /* FT burgundy, used sparingly */
  --accent-2:  #f3e0e5;

  /* Article pills + correctness share one quiet palette.
     de = terracotta, het = moss — desaturated for editorial calm. */
  --de:        #7a2e34;
  --de-2:      #f3e1de;
  --het:       #28533f;
  --het-2:     #dde9da;
  --correct:   var(--het);
  --correct-2: var(--het-2);
  --incorrect: var(--de);
  --incorrect-2: var(--de-2);

  /* Tint palette — small, named set of background tints used for chips,
     pills, callout/inset boxes, sidebar hovers, and field cells across
     reference pages (phrasebook / grammar / pronunciation). Every chip
     and inset that needs a coloured background should reference one of
     these tokens instead of a hex literal — that way dark mode flips
     the whole palette in one place. Text on every tint is var(--fg). */
  --tint-neutral: #f0ede4;   /* default chip bg, sidebar hover */
  --tint-paper:   #faf7ee;   /* near-paper inset (slightly lighter than --surface) */
  --tint-warm:    #efe9d8;   /* warm beige — emphasis pills, marks, code */
  --tint-green:   #d8ecdb;   /* polite / formal / positive */
  --tint-orange:  #fbe6cc;   /* informal / casual */
  --tint-yellow:  #f3e3b6;   /* sign / notice */
  --tint-purple:  #e6e0f0;   /* staff question / response */
  --tint-blue:    #d3e8ee;   /* pattern / template */

  /* Status palette — bg/fg pairs for stateful feedback (right/wrong
     answers, difficulty tiers, score banners). Each pair is designed
     to read at WCAG AA in both themes. Use bg + fg as a unit; don't
     mix a status bg with --fg or vice versa. */
  --status-correct-bg:   #e7f5ea;
  --status-correct-fg:   #1b5e20;
  --status-incorrect-bg: #fbeaea;
  --status-incorrect-fg: #b71c1c;
  --status-partial-bg:   #fff3e0;
  --status-partial-fg:   #9c4221;  /* deeper orange so 4.5:1 against bg */

  --font:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'EB Garamond', 'Iowan Old Style', Georgia, serif;
  --radius: 4px;

  /* Layout dimensions. --header-height is used to offset the sticky
     sidebar so it sits below the sticky masthead rather than under it,
     and to cap the sidebar's max-height for independent scrolling. */
  --header-height: 58px;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
}

/* ================================================================
   HEADER — masthead + game switcher + progress; hairline below
   ================================================================ */
body > header {
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding: 0.65rem 1.5rem;
  gap: 0.85rem;
  position: sticky;
  top: 0;
  z-index: 100;
}
header h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: 0.005em;
  color: var(--fg);
  flex-grow: 0;
}

.game-nav {
  display: flex;
  gap: 0;
  margin-left: 0.5rem;
  align-items: baseline;
}
.game-nav__item {
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--faint);
  padding: 0.4rem 0.85rem;
  text-decoration: none;
  border-radius: 0;
  border-right: 1px solid var(--rule);
  transition: color 140ms;
}
.game-nav__item:last-child { border-right: none; }
.game-nav__item:hover { color: var(--fg); background: transparent; }
.game-nav__item.is-active {
  color: var(--fg);
  background: transparent;
  font-weight: 600;
}

/* Mobile hamburger — hidden on desktop. The drawer takes over for the
   thirteen-item nav at narrow widths where the horizontal row would
   otherwise overflow off-screen and hide most pages from tap reach. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.35rem 0.85rem 0.35rem 0.55rem;
  color: var(--fg);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.nav-toggle:hover { background: var(--paper-2); }
.nav-toggle__bars {
  width: 1rem;
  height: 0.65rem;
  position: relative;
  display: inline-block;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars { background: transparent; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
}
.nav-toggle__bars::before { top: 0; box-shadow: 0 4px 0 currentColor; }
.nav-toggle__bars::after  { bottom: 0; }
.nav-toggle__here { letter-spacing: 0.12em; }

/* ---- mobile drawer (≤720px) ----------------------------------- */
@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  /* The flat horizontal nav is hidden by default; it animates in as a
     full-height drawer when .is-open is set by the toggle button. */
  .game-nav {
    position: fixed;
    top: 0; right: 0;
    width: min(320px, 90vw);
    height: 100vh;
    background: var(--bg);
    border-left: 1px solid var(--rule);
    box-shadow: -8px 0 24px rgba(0,0,0,0.10);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 4.5rem 1.25rem 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 220ms ease-out, visibility 0s 220ms;
    visibility: hidden;
    z-index: 90;
  }
  .game-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 220ms ease-out;
  }
  .game-nav__item {
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding: 0.85rem 0.25rem;
    font-size: 0.85rem;
  }
  /* The theme-toggle sits at the bottom of the drawer rather than
     auto-margining to the right — flex direction is now column. */
  .game-nav theme-toggle {
    margin: 1.25rem 0 0;
    padding: 0;
    align-self: flex-start;
  }
}

#progress { margin-left: auto; }
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line);
}
.dot.current { background: var(--fg); }
.dot.correct { background: var(--correct); }
.dot.incorrect { background: var(--incorrect); }

/* ── level-picker atom ────────────────────────────────────────── */
.level-picker {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.75rem 0;
}
.level-pill {
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border-radius: 3px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
  transition: background 100ms, color 100ms, border-color 100ms;
}
.level-pill:hover { border-color: var(--muted); color: var(--fg); }
.level-pill.is-active {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

sidebar-toggle .icon-btn {
  border-color: transparent;
  color: var(--muted);
}
sidebar-toggle .icon-btn:hover { background: var(--paper-2); color: var(--fg); border-color: transparent; }
sidebar-toggle .icon-btn[aria-expanded="true"] {
  background: var(--paper-2);
  color: var(--fg);
  border-color: var(--rule);
}

/* ================================================================
   LAYOUT — keep the grid, add breathing room
   ================================================================ */
/* The page is a two-column grid: filter rail on the left, main content
   on the right. The whole grid centres in the viewport so neither half
   sits stranded on a wide display. */
.layout {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0;
}
.layout main {
  max-width: none;
  margin: 0;
  padding: 2rem 2.5rem 2.5rem;
  min-width: 0;
}
/* Collapsed rail: just the main column, narrower max so the reading
   measure stays comfortable. */
.layout.collapsed {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1180px;
}
.layout.collapsed #filter-bar { display: none; }
/* Sticky sidebar with INDEPENDENT internal scroll.
   - top is set to the header height so the rail sits visually BELOW
     the sticky masthead, not under it.
   - max-height caps the rail at viewport-minus-header, so when its
     content overflows the viewport it scrolls in place rather than
     forcing the user to scroll past the entire main column first.
   - overflow-y: auto activates the internal scroll; scrollbar-width
     keeps it visually quiet (Firefox standard, ignored elsewhere).
   `position: sticky` is inherited from app.css. */
#filter-bar {
  padding: 2rem 1.75rem 2rem 2rem;
  border-right: 1px solid var(--rule);
  top: var(--header-height);
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  /* Quiet, slim scrollbar that fits the paper aesthetic. Firefox uses
     the standard `scrollbar-color`; WebKit needs the pseudo-elements
     below. Both fall back gracefully on browsers that ignore them. */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
#filter-bar::-webkit-scrollbar {
  width: 6px;
}
#filter-bar::-webkit-scrollbar-track {
  background: transparent;
}
#filter-bar::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: 3px;
}
#filter-bar::-webkit-scrollbar-thumb:hover {
  background-color: var(--faint);
}
@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; }
  #filter-bar {
    border-right: none;
    border-bottom: 1px solid var(--rule);
    /* On mobile the rail becomes a top bar (app.css sets position: static),
       so the desktop sticky/scroll caps must be reset. */
    max-height: none;
    overflow-y: visible;
    padding: 1rem 1.25rem;
  }
  .layout main { padding: 1rem 1.25rem 2rem; }
}

/* Filter rail — quiet typography, no buttons-as-buttons */
.filter-row .label {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  font-size: 0.65rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.4rem;
}
.filter-row button {
  font-family: var(--font);
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.82rem;
}
.filter-row button:hover { background: var(--paper-2); }
.filter-row button.active {
  background: transparent;
  color: var(--fg);
  border-color: var(--fg);
  font-weight: 600;
}
.filter-row button.active .count { color: var(--muted); }
.filter-row .count {
  color: var(--faint);
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
}

/* Active-pool row — capacity input + reset, sits below the list row. */
.filter-row--pool {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
}
.filter-row--pool .pool-status {
  font-family: var(--font);
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.filter-row--pool .pool-capacity {
  font-family: var(--font);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.filter-row--pool .pool-capacity input {
  font-family: var(--font);
  font-size: 0.85rem;
  width: 3.25rem;
  padding: 0.18rem 0.35rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.filter-row--pool .ghost-btn {
  font-size: 0.78rem;
}

/* ================================================================
   STAGE
   ----------------------------------------------------------------
   The card is a single column. Children render in the order app.js
   emits them: card-meta · prompt · answer · clues · reveal · actions.
   No grid-template-areas, no container queries — when a future
   organism (a side-by-side compare card, the Distinction essay,
   etc.) actually needs multi-column placement, declare it there.

   The one piece of "responsive" behaviour kept here is `cqi`
   typography for the prompt, so the headline scales with the main
   column's actual width (the column gets narrower when the filter
   sidebar is open, wider when it's collapsed). That requires a
   single declaration of `container-type` on the stage wrapper —
   measured by `cqi`, not queried by `@container`.
   ================================================================ */
#stage {
  container-type: inline-size;
}

.card,
.card--assembly {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 1rem 0 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;     /* override app.css's align-items: start */
  gap: 1.5rem;
}

/* Sticky next-button at the bottom of the viewport so mouse users
   don't have to scroll to advance after a wrong answer. (Correct
   answers auto-advance — see onAnswer in app.js.) */
.card > .actions,
.card--assembly > .actions {
  position: sticky;
  bottom: 1rem;
  justify-content: flex-end;
  z-index: 5;
}

.card-meta,
.verb-card .card-meta {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--rule);
}

/* ---- Listening: transcribe mode (Phase 4) ----------------------- */
.listen-transcribe {
  margin: 0.6rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.listen-transcribe__input {
  width: 100%;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--fg);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  resize: vertical;
  min-height: 3.5rem;
}
.listen-transcribe__input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background: var(--paper-2);
}
.listen-transcribe__input[readonly] {
  color: var(--muted);
  background: transparent;
}
.structure-result__typed {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  margin: 0.3rem 0;
  padding: 0.35rem 0.6rem;
  background: var(--paper-2);
  border-radius: var(--radius);
}
.structure-result__typed-label {
  font-family: var(--font);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint);
  margin-right: 0.5rem;
}

/* Mastery indicator — five small dots that fill as the learner
   consolidates the word. Pushed to the right end of the meta line via
   auto-margin so the meta text stays left-aligned even when the line
   is short. */
.card-meta { display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }
.card-mastery {
  margin-left: auto;
  display: inline-flex;
  gap: 0.22rem;
  align-items: center;
}
.card-mastery__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  border: 1px solid var(--muted);
  background: transparent;
  display: inline-block;
}
.card-mastery__dot.is-filled {
  background: var(--muted);
}

/* Direction-flip control inline in the card meta line. Looks like the
   surrounding meta text (so it doesn't shout) but is plainly tappable
   on hover and focus. The ⇄ glyph signals the swap. */
.card-meta__flip {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--muted);
  cursor: pointer;
  transition: color 120ms, background 120ms, border-color 120ms;
}
.card-meta__flip:hover,
.card-meta__flip:focus-visible {
  color: var(--fg);
  background: var(--paper-2);
  border-color: var(--rule);
  outline: none;
}

/* ================================================================
   PROMPT — the editorial headword
   ================================================================ */
.prompt,
.verb-card .prompt {
  font-family: var(--serif);
  font-weight: 500;
  /* Container query inline-size unit — relative to the stage column,
     not the viewport. Caps at 4.4rem so it never overruns the line
     even in very wide layouts. */
  font-size: clamp(2.2rem, 7cqi, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--fg);
  margin: 0.5rem 0 0;
}
.prompt.secondary {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--fg);
  letter-spacing: 0;
}

/* Article — sits inline with the headword, dictionary-style: italic
   serif, subordinate but legible, distinct colour for de/het. */
.article {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.62em;
  letter-spacing: 0;
  text-transform: lowercase;
  padding: 0;
  background: transparent;
  border-radius: 0;
  margin-right: 0.4em;
  line-height: 1;
  vertical-align: baseline;
}
.article.art-de  { color: var(--de);  background: transparent; }
.article.art-het { color: var(--het); background: transparent; }

.etym {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--muted);
  margin: 0;
}

/* POS — italic serif aside */
.pos-badge {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: transparent;
  border: none;
  color: var(--faint);
  font-size: 0.85rem;
  margin-left: 0.65rem;
  vertical-align: 0.4em;
  text-transform: lowercase;
  letter-spacing: 0;
  padding: 0;
}

.key-hint {
  background: transparent;
  border: none;
  color: var(--faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
}

/* ================================================================
   ATOMS
   ================================================================ */

/* ---- <clue-audio> --------------------------------------------- */
clue-audio .audio-btn {
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--muted);
}
clue-audio .audio-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: transparent;
}
/* Compact variant for in-row contexts (lists rows, verb-card example
   rows, mc-row choices, etc.). Borderless and shrunk. Use:
   <clue-audio class="is-compact" data-src="..."></clue-audio>. */
clue-audio.is-compact .audio-btn {
  width: 1.4rem;
  height: 1.4rem;
  border-color: transparent;
}
clue-audio.is-compact svg { width: 11px; height: 11px; }

/* ---- <clue-image> --------------------------------------------- */
clue-image img {
  border-radius: 2px;
  border: 1px solid var(--rule);
}

/* ---- <clue-sentence> ------------------------------------------ */
clue-sentence .sentence-nl {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--fg);
}
clue-sentence .sentence-en {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---- <clue-stems> --------------------------------------------- */
clue-stems {
  font-family: var(--serif);
  font-size: 1.05rem;
}
clue-stems .stem {
  font-family: var(--serif);
  font-style: italic;
  color: var(--fg);
}
clue-stems .stem-meaning {
  font-family: var(--font);
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--faint);
  margin-left: 0.35em;
}
clue-stems .stem-plus {
  font-family: var(--serif);
  color: var(--faint);
  margin: 0 0.4em;
}

/* Nested sub-decomposition: `stofwisseling [ stof + wissel + ing ]`.
   Shown as a slightly-smaller bracketed group flowing inline after the
   parent stem. Brackets are dimmed and a touch heavier so the eye
   recognises them as a group container, not punctuation in the meaning. */
clue-stems .stem-decomp {
  margin-left: 0.4em;
  font-size: 0.88em;
  color: var(--muted);
}
clue-stems .stem-decomp__bracket {
  color: var(--faint);
  margin: 0 0.25em;
  font-style: normal;
}
clue-stems .stem-decomp .stem {
  color: var(--muted);
}
clue-stems .stem-decomp .stem-meaning {
  font-size: 0.62rem;
  color: var(--faint);
}
clue-stems .stem-decomp .stem-plus {
  color: var(--faint);
  margin: 0 0.3em;
}
/* Third-level nests get even more muted so depth reads as depth. */
clue-stems .stem-decomp .stem-decomp {
  font-size: 0.92em;
}

/* The "show stems" / "show image" reveal triggers are dictionary-margin
   notes, not buttons. Tiny italic underlined text in muted ink. */
clue-stems button.clue-btn,
clue-image button.clue-btn,
clue-sentence button.clue-btn {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--muted);
  background: transparent;
  border: none;
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
  padding: 0;
  letter-spacing: 0;
}
clue-stems button.clue-btn:hover,
clue-image button.clue-btn:hover,
clue-sentence button.clue-btn:hover {
  color: var(--fg);
  background: transparent;
}

/* ---- <answer-choices> — list-style, no buttons ----------------
   Two distinct .choice treatments live in this stylesheet on
   purpose: the words page (answer-choices) renders prose options
   in serif as a hairline-separated list (each row is a full
   English / Dutch phrase that needs reading rhythm); the verbs
   page (.mc-row .choice, further down) renders monospace tokens
   in a bordered grid because short conjugation forms align better
   with fixed glyph widths and gain meaning from vowel position.
   Same semantic role (multiple choice), different visual role.
   Correctness colours come from the shared --correct / --incorrect
   palette, so feedback reads the same on both. */
answer-choices {
  display: block;
  margin: 0;
}
answer-choices button.choice {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  background: transparent;
  border: none;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.9rem 0.25rem 0.9rem 2.4rem;
  min-height: 0;
  width: 100%;
  text-align: left;
  position: relative;
  color: var(--fg);
  transition: background 120ms;
}
answer-choices button.choice:last-child { border-bottom: 1px solid var(--rule); }
answer-choices button.choice:hover:not(:disabled) { background: var(--paper-2); }
answer-choices button.choice .key-hint {
  position: absolute;
  left: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--faint);
  font-family: var(--font);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
answer-choices button.choice.correct {
  color: var(--correct);
  font-weight: 500;
  background: transparent;
}
answer-choices button.choice.correct::before {
  content: '✓';
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  color: var(--correct); font-size: 1.1rem;
}
answer-choices button.choice.incorrect {
  color: var(--incorrect);
  text-decoration: line-through;
  text-decoration-color: var(--incorrect);
  background: transparent;
}
answer-choices button.choice.dim { opacity: 0.45; }
answer-choices .choice-text { font-family: var(--serif); }

/* ---- <stem-assembler> ----------------------------------------- */
stem-assembler .slots {
  background: transparent;
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
}
stem-assembler .slot {
  background: transparent;
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  min-height: 3.2rem;
  min-width: 6.5rem;
}
stem-assembler .slot.filled {
  border-style: solid;
  border-color: var(--fg);
  background: transparent;
}
stem-assembler .slot.correct {
  background: var(--correct-2);
  border-color: var(--correct);
  color: var(--correct);
}
stem-assembler .slot.incorrect {
  background: var(--incorrect-2);
  border-color: var(--incorrect);
  color: var(--incorrect);
}
stem-assembler .slot-placeholder { color: var(--faint); }
stem-assembler .slot-plus {
  font-family: var(--serif);
  color: var(--faint);
  font-size: 1.4rem;
}

stem-assembler .palette {
  margin-top: 0.85rem;
  gap: 0.65rem;
}
stem-assembler .palette-stem {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.55rem 0.8rem 0.5rem 1.7rem;
  min-width: 6.5rem;
  color: var(--fg);
}
stem-assembler .palette-stem:hover:not(:disabled) {
  background: var(--paper-2);
  border-color: var(--fg);
}
stem-assembler .palette-stem .key-hint {
  background: transparent;
  border: none;
  color: var(--faint);
  font-size: 0.62rem;
}
stem-assembler .stem-dutch {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--fg);
}
stem-assembler .stem-meaning-small {
  font-family: var(--font);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--faint);
  margin-top: 0.2rem;
}

/* ================================================================
   REVEAL CARD — the dictionary entry after the answer is settled
   ================================================================ */
.card > .answer {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  margin-top: 0.75rem;
}

.reveal-card {
  display: grid;
  gap: 1rem;
}

.reveal-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.reveal-head .article {
  font-size: 0.95rem;
  align-self: center;
}

.reveal-head clue-audio {
  margin-left: 0.35rem;
  align-self: center;
}

.reveal-dutch {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2.6rem;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.012em;
  color: var(--fg);
}

.reveal-gloss {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--muted);
  margin: 0;
}

/* The etymology line — no boxed background, just inline content. */
.reveal-etym {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: var(--serif);
}
.reveal-etym clue-stems {
  display: inline-flex;
  align-items: baseline;
  font-size: 1.05rem;
}
.reveal-etym__arrow {
  font-family: var(--serif);
  color: var(--faint);
  font-size: 1.15rem;
  margin: 0 0.15em;
}
.reveal-etym__sum {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--fg);
}

.reveal-topics {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.reveal-topics li {
  font-family: var(--font);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
  border: none;
  background: transparent;
}
.reveal-topics li + li::before {
  content: '·';
  color: var(--faint);
  margin-right: 0.5rem;
}

.reveal-see-also {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 1rem;
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}
.reveal-see-also em {
  font-style: italic;
  font-weight: 500;
  color: var(--fg);
}
.reveal-see-also__gloss {
  font-style: italic;
  color: var(--faint);
  font-size: 0.88rem;
  margin-left: 0.2em;
}

.reveal-verdict {
  font-family: var(--serif);
  font-style: italic;
  color: var(--faint);
  font-size: 0.95rem;
  margin: 0;
}
.reveal-verdict b {
  font-weight: 500;
  font-style: normal;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.reveal-verdict__sep { opacity: 0.6; margin: 0 0.2em; }

@media (max-width: 640px) {
  .reveal-dutch { font-size: 1.85rem; }
}

/* ================================================================
   BUTTONS — minimal. The "next" primary stays distinct, others
   become quiet text-with-underline or hairline outlines.
   ================================================================ */
button {
  font-family: var(--font);
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--fg);
  font-size: 0.88rem;
  padding: 0.45rem 0.95rem;
}
button:hover { background: var(--paper-2); }
button.primary {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
  font-weight: 500;
  letter-spacing: 0.02em;
}
button.primary:hover { background: #2a2620; }
button.danger {
  background: transparent;
  color: var(--incorrect);
  border-color: var(--incorrect);
}
button.danger:hover { background: var(--incorrect-2); }

/* ================================================================
   FOOTER
   ================================================================ */
footer {
  font-family: var(--font);
  color: var(--faint);
  border-top: 1px solid var(--rule);
  padding: 0.85rem 1.75rem;
  margin-top: 3rem;
}
.reset-link {
  font-family: var(--font);
  color: var(--faint);
  font-size: 0.78rem;
}
.reset-link:hover { color: var(--incorrect); }

/* ================================================================
   VERBS PAGE — same FT skin via verbs.css selectors
   ================================================================ */

/* Card chrome — transparent; content sits on paper like the words page. */
.verb-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 1rem 0 1.5rem;
  max-width: none;
}

/* The infinitive — the editorial headword for verb practice. */
.verb-card .infinitive {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 6.5vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  margin: 0.6rem 0 1.5rem;
}
.verb-card .infinitive .inf-word {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--fg);
}
.verb-card .infinitive .english-inline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--muted);
  margin-left: 0.4rem;
}
.verb-card .infinitive clue-audio { align-self: center; }

/* Sentence-frame prompt: "Ik ___ · perfectum" */
.verb-card .prompt {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0.5rem 0;
}
.verb-card .prompt .prompt-pronoun {
  font-family: var(--serif);
  color: var(--fg);
}
.verb-card .prompt .prompt-blank {
  font-family: var(--serif);
  font-style: italic;
  color: var(--faint);
  font-weight: 400;
}
.verb-card .prompt .prompt-tense {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}
.verb-card .prompt-en {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--muted);
  margin: 0 0 1.25rem;
}

/* Flags (separable / zijn) — keep their meaning via outline colour
   rather than coloured fills. Quiet but legible. */
.verb-card .flag {
  display: inline-block;
  font-family: var(--font);
  font-weight: 500;
  font-style: italic;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--muted);
}
.verb-card .flag.separable {
  background: transparent;
  border-color: var(--de);
  color: var(--de);
}
.verb-card .flag.zijn {
  background: transparent;
  border-color: var(--het);
  color: var(--het);
}

/* ---- Multiple-choice rows --------------------------------------
   Verbs need a 2-col grid (the tokens are short — "loop", "liep").
   Monospace restored so root-vowel changes are visually anchored. */

.mc-row {
  border-top: 1px solid var(--rule);
  padding: 1rem 0;
}
.mc-row .label {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.6rem;
}
.mc-row .choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
@media (max-width: 480px) {
  .mc-row .choices { grid-template-columns: 1fr; }
}
.mc-row button.choice {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--fg);
  padding: 0.65rem 0.85rem;
  text-align: left;
  min-height: 0;
}
.mc-row button.choice:hover:not(.answered) {
  background: var(--paper-2);
  border-color: var(--fg);
}
.mc-row button.choice.correct {
  background: var(--correct-2);
  border-color: var(--correct);
  color: var(--correct);
  font-weight: 500;
}
.mc-row button.choice.incorrect {
  background: var(--incorrect-2);
  border-color: var(--incorrect);
  color: var(--incorrect);
  text-decoration: line-through;
}
.mc-row button.choice .key-hint {
  border: none;
  background: transparent;
  color: var(--faint);
  font-size: 0.7rem;
}
/* Pedagogical highlights inside conjugation forms — the separable
   particle and the perfectum ge- prefix. Coloured ink, no fill. */
.mc-row button.choice .particle {
  background: transparent;
  color: var(--de);
  padding: 0;
  font-weight: 500;
}
.mc-row button.choice .ge {
  background: transparent;
  color: var(--het);
  padding: 0;
  font-weight: 500;
}

/* ---- Self-grade conjugation rows (alt mode) ------------------- */
.conj-row {
  border-top: 1px solid var(--rule);
  padding: 1rem 0;
}
.conj-row .label {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}
.conj-row .form {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--fg);
}
.conj-row .form.hidden {
  font-family: var(--serif);
  font-style: italic;
  color: var(--faint);
}
.conj-row .form .particle { background: transparent; color: var(--de); padding: 0; }
.conj-row .form .ge       { background: transparent; color: var(--het); padding: 0; }
.conj-row .controls button {
  font-family: var(--font);
  font-size: 0.78rem;
  background: transparent;
  border-color: var(--rule);
  color: var(--muted);
}
.conj-row .controls button.got  { color: var(--correct); border-color: var(--correct); }
.conj-row .controls button.miss { color: var(--incorrect); border-color: var(--incorrect); }
.conj-row.graded.correct   .form { color: var(--correct); }
.conj-row.graded.incorrect .form { color: var(--incorrect); }

/* ---- Sentence clue ------------------------------------------- */
.verb-card .sentence-clue { margin: 0 0 1rem; }
.verb-card .sentence-clue .clue-btn {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  background: transparent;
  border: none;
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
  padding: 0;
  color: var(--muted);
}
.verb-card .sentence-clue .clue-btn:hover { color: var(--fg); background: transparent; }
.verb-card .sentence-clue .clue-body {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
}
.verb-card .sentence-clue .ex-nl {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
}
.verb-card .sentence-clue .ex-en {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---- Stems strip (compact decomposition) --------------------- */
.verb-card .stems-strip {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--serif);
  font-size: 0.95rem;
}
.verb-card .stems-strip:hover {
  background: var(--paper-2);
  border-color: var(--fg);
}
.verb-card .stems-strip .stem-dutch {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--fg);
}
.verb-card .stems-strip .stem-meaning {
  font-family: var(--font);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--faint);
}
.verb-card .stems-strip .stem-plus {
  font-family: var(--serif);
  color: var(--faint);
}

/* ---- Examples (toggle + tabs + list) ------------------------- */
.verb-card .examples-toggle {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  background: transparent;
  border: none;
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
  padding: 0;
  color: var(--muted);
}
.verb-card .examples-toggle:hover { color: var(--fg); background: transparent; }

.verb-card .examples-body {
  border-top: 1px solid var(--rule);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

.verb-card .ex-tabs {
  border-bottom: 1px solid var(--rule);
}
.verb-card .ex-tab {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  background: transparent;
  border: none;
  padding: 0.35rem 0.7rem;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.verb-card .ex-tab:hover:not(.active) {
  background: transparent;
  color: var(--muted);
}
.verb-card .ex-tab.active {
  background: transparent;
  color: var(--fg);
  border-bottom-color: var(--fg);
}
.verb-card .ex-tab .ex-tab-count {
  color: inherit;
  opacity: 0.65;
}

.verb-card .ex-list .ex + .ex {
  border-top: 1px solid var(--rule);
  border-top-style: solid;
}
.verb-card .ex-list .ex-sub {
  font-family: var(--font);
  font-size: 0.65rem;
  color: var(--faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.verb-card .ex-list .ex-nl {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--fg);
}
.verb-card .ex-list .ex-en {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 0.95rem;
}

/* The small per-example form label */
.verb-card .examples .ex-form {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--faint);
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
}
.verb-card .examples .ex-nl {
  font-family: var(--serif);
  font-size: 1.05rem;
}
.verb-card .examples .ex-en {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---- Mode + Level live in the left filter rail on the verbs
   page now, styled like the words-page filter rows. ------------ */
#mode-bar.filter-row,
#level-bar.filter-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
#mode-bar .mode-toggle,
#level-bar .level-toggle {
  font-family: var(--font);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg);
  border-radius: var(--radius);
  padding: 0.35rem 0.6rem;
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#mode-bar .mode-toggle:hover,
#level-bar .level-toggle:hover { background: var(--paper-2); }
#mode-bar .mode-toggle.active,
#level-bar .level-toggle.active {
  background: transparent;
  border-color: var(--fg);
  color: var(--fg);
  font-weight: 600;
}

#class-bar {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
  margin-bottom: 0.6rem;
}
#class-bar .class-toggle {
  font-family: var(--font);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}
#class-bar .class-toggle:hover { background: var(--paper-2); color: var(--fg); }
#class-bar .class-toggle.active {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

#level-bar .lvl-count {
  color: var(--faint);
  font-family: var(--font);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}
#level-bar .level-toggle.active .lvl-count { color: var(--muted); }
#mode-bar.filter-row > .label,
#level-bar.filter-row > .label {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 0.5rem 0.3rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.3rem;
}

/* ================================================================
   ATOM — .row-icon-btn
   A small circular icon button for row-level actions: add, remove,
   already-done. One shape, three colour states.
   ================================================================ */
.row-icon-btn {
  font-family: var(--font);
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--fg);
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.row-icon-btn--add { color: var(--fg); border-color: var(--rule); }
.row-icon-btn--add:hover:not(:disabled) {
  background: var(--correct-2);
  border-color: var(--correct);
  color: var(--correct);
}
.row-icon-btn--remove { color: var(--faint); border-color: transparent; }
.row-icon-btn--remove:hover {
  background: var(--incorrect-2);
  border-color: var(--incorrect);
  color: var(--incorrect);
}
.row-icon-btn--done {
  color: var(--correct);
  border-color: var(--correct);
  background: var(--correct-2);
  cursor: default;
}

/* ================================================================
   MOLECULE — .word-row
   A single vocabulary word in a row context: Dutch (with article),
   English gloss, optional inline audio, and one row-icon-btn action.
   Used by the lists page (editor + search) and any future organism
   that needs to render a word in a horizontal row.
   ================================================================ */
.word-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 1rem;
  padding: 0.6rem 0.25rem;
  align-items: baseline;
  border-top: 1px solid var(--rule);
}
.word-row:last-child { border-bottom: 1px solid var(--rule); }
.word-row__dutch {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--fg);
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
}
.word-row__dutch clue-audio { display: inline-flex; }
/* Audio sizing comes from clue-audio.is-compact (set on the element
   in lists.js). No row-specific overrides needed here. */
.word-row__en {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 0.95rem;
}
.word-row--inactive .word-row__dutch,
.word-row--inactive .word-row__en {
  opacity: 0.55;
}

/* ================================================================
   LISTS PAGE — user-curated wordlists
   ================================================================ */

/* Override app.css's centred .lists-page so this page can use the same
   sidebar-rail pattern as words.html (rail on the left, main column to
   its right with a hairline divider, full viewport width). */
.lists-page {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Two-column layout: fixed-width sidebar (your lists) + main content
   (add words + editor). Sidebar is sticky so the collection stays in
   view as the editor scrolls. Mirrors the .layout rail on words.html,
   including the hairline border-right. */
.lists-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
.lists-overview {
  padding: 1.5rem 1.25rem 1.5rem 1.5rem;
  border-right: 1px solid var(--rule);
  position: sticky;
  top: 0;
  min-height: calc(100vh - 60px);
  align-self: start;
}
.lists-content {
  max-width: 1100px;
  padding: 1.5rem 2.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}
.word-search.is-hidden { display: none; }

@media (max-width: 760px) {
  .lists-layout { grid-template-columns: 1fr; }
  .lists-overview {
    position: static;
    min-height: 0;
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding: 1rem 1.25rem;
  }
  .lists-content { padding: 1rem 1.25rem 2rem; }
}

.section-eyebrow {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 1rem;
}

/* Molecule: section header with eyebrow on the left and actions on
   the right. Used by the lists-overview and the list-editor so
   contextual buttons always sit in the same place. */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.section-header .section-eyebrow {
  margin: 0;
}
.section-header__actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
/* In the narrow sidebar, ghost-buttons need to be tighter so they
   fit side-by-side under the eyebrow. */
.lists-overview .section-header__actions .ghost-btn {
  padding: 0.3rem 0.55rem;
  font-size: 0.72rem;
}

/* ---- overview (sidebar collection of all lists) -------------- */

.lists-collection {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.lists-collection__empty {
  font-family: var(--serif);
  font-style: italic;
  color: var(--faint);
  font-size: 0.95rem;
  padding: 0.5rem 0;
}
.list-row {
  border-top: 1px solid var(--rule);
}
.list-row:last-child { border-bottom: 1px solid var(--rule); }
.list-row__pick {
  width: 100%;
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.5rem 0.25rem;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.list-row__pick:hover { background: var(--paper-2); }
.list-row__dot {
  font-family: var(--serif);
  color: var(--faint);
  font-size: 0.85rem;
  line-height: 1;
}
.list-row.is-active .list-row__dot {
  color: var(--fg);
}
.list-row__name {
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.25;
  color: var(--fg);
  min-width: 0;
}
.list-row.is-active .list-row__name {
  font-weight: 500;
}
.list-row__count {
  font-family: var(--font);
  font-size: 0.72rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* Generic ghost button used across this page. */
.ghost-btn {
  font-family: var(--font);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--fg);
  padding: 0.45rem 0.85rem;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.ghost-btn:hover {
  background: var(--paper-2);
  border-color: var(--fg);
}
.ghost-btn--danger { color: var(--incorrect); border-color: var(--incorrect); }
.ghost-btn--danger:hover { background: var(--incorrect-2); }

.link-btn {
  font-family: var(--serif);
  font-style: italic;
  font-size: inherit;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---- editor (currently active list) -------------------------- */
.list-editor {
  padding: 1rem 0 0;
  border-top: 1px solid var(--rule);
}
.list-editor__empty {
  font-family: var(--serif);
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0;
}
.list-editor__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.list-editor__head-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.list-editor__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 4cqi, 2.4rem);
  color: var(--fg);
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0.15rem 0;
  flex: 1 1 auto;
  min-width: 0;
  letter-spacing: -0.005em;
}
.list-editor__name:hover,
.list-editor__name:focus {
  border-bottom-color: var(--rule);
  outline: none;
}
.list-editor__name:focus {
  border-bottom-color: var(--fg);
}
.list-editor__meta {
  font-family: var(--serif);
  font-style: italic;
  color: var(--faint);
  font-size: 0.95rem;
  margin: 0 0 1.5rem;
}
.list-editor__meta .verdict__num {
  font-style: normal;
  color: var(--muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.list-editor__meta .verdict__sep { margin: 0 0.4em; opacity: 0.6; }

.list-editor__rows {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.list-editor__empty-row {
  font-family: var(--serif);
  font-style: italic;
  color: var(--faint);
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
/* Editor and search both render their items as .word-row molecules —
   no list-specific row styles needed here. */

/* ---- search (add words) -------------------------------------- */
.search-input {
  width: 100%;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-faint, var(--faint));
  padding: 0.6rem 0;
  outline: none;
  color: var(--fg);
}
.search-input::placeholder { color: var(--faint); opacity: 0.7; }
.search-input:focus { border-bottom-color: var(--fg); }

.search-hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--faint);
  margin: 0.7rem 0 0.5rem;
}

.search-results {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Search results are .word-row molecules (see ATOM/MOLECULE block
   above). The "already in list" state uses .word-row--inactive. */

/* ================================================================
   STRUCTURE PAGE — sentence-ordering game
   ================================================================ */
.structure-card {
  gap: 1.5rem;
}
.structure-prompt {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.structure-prompt__en {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--fg);
  margin: 0;
  line-height: 1.35;
  flex: 1 1 auto;
  min-width: 0;
}
.structure-prompt__level {
  /* uses .meta-chip base; nothing structure-specific beyond alignment */
  align-self: center;
}
.structure-answer,
.structure-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.65rem 0.6rem;
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
}
.structure-answer {
  border-style: solid;
  background: var(--paper-2);
}
.structure-answer__hint {
  font-family: var(--serif);
  font-style: italic;
  color: var(--faint);
  font-size: 0.95rem;
}
.structure-token {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  line-height: 1.2;
  transition: background 120ms, border-color 120ms;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}
.structure-token:hover {
  background: var(--paper-2);
  border-color: var(--fg);
}
.structure-token--placed {
  background: var(--bg);
  border-color: var(--fg);
}
.structure-token--placed:hover {
  background: var(--de-2);
  border-color: var(--de);
}
/* Numeric shortcut badge inside each bank chip — kbd-style monospace */
.structure-token__key {
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  padding: 0.05em 0.35em;
  border: 1px solid var(--rule);
  border-radius: 3px;
  line-height: 1.2;
}
.structure-token:hover .structure-token__key { color: var(--muted); }

/* Result panel */
.structure-result {
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.structure-result__verdict {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin: 0;
}
.structure-result--correct .structure-result__verdict { color: var(--correct); }
.structure-result--incorrect .structure-result__verdict { color: var(--incorrect); }
.structure-result__original {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--fg);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.structure-result__en {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 1rem;
  margin: 0;
}
.structure-result__progress {
  font-family: var(--font);
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0.2rem 0 0;
}

/* Rules-engine probe — per-rule pass/fail entries in the result panel.
   Each rule is a small block: ✓/✗ mark, the rule label (linked into
   grammar.html), and an italic "why" line. Fails come first by the
   evaluator's sort. */
.structure-result__rules {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0 0;
  border-top: 1px dashed var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
/* Displacement-count lead — one-line summary that names the tokens
   the minimum-displaced-set says the user needs to move. Sits above
   the per-clause groups and frames the rule items as ways of
   understanding the move, not a list of independent violations. */
.rules-lead {
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg);
  margin: 0;
}
/* Per-clause group. Single-clause sentences render one group with
   no heading (same as today). Multi-clause sentences get a small
   eyebrow heading above each group so the user can map each rule
   result back to the part of the sentence it's evaluating. */
.rules-clause {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.rules-clause__heading {
  font-family: var(--font);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
  padding: 0 0 0.1rem;
  border-bottom: 1px solid var(--rule);
}
.rules-result {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  column-gap: 0.4rem;
  align-items: baseline;
}
.rules-result__mark {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1;
}
.rules-result--pass .rules-result__mark { color: var(--correct); }
.rules-result--fail .rules-result__mark { color: var(--incorrect); }
.rules-result__label {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.rules-result__label:hover { color: var(--accent); border-color: var(--accent); }
.rules-result__why {
  grid-column: 2;
  font-family: var(--serif);
  font-size: 0.92rem;
  font-style: italic;
  color: var(--muted);
  margin: 0.1rem 0 0;
  line-height: 1.45;
}

/* Filter row help text — small italic under the scope chips.
   flex-basis:100% forces a line break in the flex filter bar so
   a narrow help text never flows onto the same line as the next row. */
.filter-row__help {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--faint);
  margin: 0.4rem 0 0;
  padding-left: 0.5rem;
  flex-basis: 100%;
}

/* Dutch-term chips with an English gloss subtitle. The wrapper keeps
   the gloss visually anchored to its owner button — without it the
   column-gap on .filter-row would slot the gloss in as just another
   row, indistinguishable from the next chip. */
.chip-glossed {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.chip-glossed__gloss {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.72rem;
  color: var(--faint);
  padding-left: 0.6rem;
  line-height: 1.2;
  margin: 0 0 0.15rem;
}

/* Practice-card "See also" footer — cross-link from practice into the
   relevant grammar reference. Small, quiet, sits below the clue tray
   so the learner can ignore it during the round and read it after. */
.card-see-also {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.6rem 0 0;
  padding: 0.4rem 0 0;
  border-top: 1px solid var(--rule);
}
.card-see-also__link {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
}
.card-see-also__link:hover { color: var(--accent); }

/* ================================================================
   LISTEN PAGE — listening-comprehension game
   ================================================================ */

/* ----------------------------------------------------------------
   Listening filter bar — modus segmented control + separator
   ---------------------------------------------------------------- */

/* Modus row sits above the separator and has a little extra bottom
   breathing room to visually distance it from the scope filters */
.filter-row--modus {
  padding-bottom: 0.25rem;
}

/* Segmented control — two buttons that read as a single toggle unit */
.listen-mode-switch {
  display: flex;
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 0.5rem;
}
.listen-mode-switch button {
  flex: 1;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.5rem 0.4rem;
  font-size: 0.8rem;
  font-family: var(--font);
  text-align: center;
  cursor: pointer;
  transition: background 120ms, color 120ms;
  color: var(--muted);
}
.listen-mode-switch button + button {
  border-left: 1px solid var(--rule) !important;
}
.listen-mode-switch button:hover {
  background: var(--paper-2);
  color: var(--fg);
}
.listen-mode-switch button.active {
  background: var(--fg) !important;
  color: var(--bg) !important;
  font-weight: 600;
}

/* Thin rule between the mode toggle and the scope filters */
.filter-sep {
  flex-basis: 100%;
  height: 0;
  border: none;
  border-top: 1px solid var(--rule);
  margin: 0.5rem 0 0.25rem;
}

/* Inline annotation on a filter label — e.g. "niveau cumulatief" */
.filter-label-note {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--faint);
  margin-left: 0.4rem;
}

/* Add breathing room between scope filter rows */
.filter-row + .filter-row:not(.filter-row--modus) {
  margin-top: 1rem;
}

/* Prompt area: big play button + mode label side by side */
.listen-prompt {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
/* Wrapper that stacks the play button above its Space hint */
.listen-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}
.listen-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 2px solid var(--rule);
  background: var(--paper-2);
  color: var(--fg);
  cursor: pointer;
  transition: background 120ms, border-color 120ms, transform 80ms;
}
.listen-play-btn:hover {
  background: var(--bg);
  border-color: var(--fg);
}
.listen-play-btn:active {
  transform: scale(0.93);
}
/* Keyboard shortcut label below the play button, styled like chip keys */
.listen-play-hint {
  font-family: var(--font);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.05em 0.4em;
  border: 1px solid var(--rule);
  border-radius: 3px;
  line-height: 1.4;
}
.listen-prompt__meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.listen-prompt__mode {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--muted);
}

/* ================================================================
   SEARCH PAGE — dedicated lookup with full word detail
   ================================================================ */
.search-page {
  max-width: none;
  margin: 0;
  padding: 0;
}
.search-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
.search-rail {
  padding: 1.5rem 1.25rem 1.5rem 1.5rem;
  border-right: 1px solid var(--rule);
  position: sticky;
  top: 0;
  min-height: calc(100vh - 60px);
  align-self: start;
  display: flex;
  flex-direction: column;
}
.search-rail .section-eyebrow { margin-bottom: 0.6rem; }
.search-rail .search-results {
  overflow-y: auto;
  flex: 1 1 auto;
  margin-top: 0.5rem;
}

/* .word-row variants used on the search page. The molecule itself is
   declared once near the top of this stylesheet — these are only the
   page-specific deltas (clickable behaviour, level chip in the trailing
   slot, selected-row highlight). */
.search-results .word-row {
  cursor: pointer;
}
.search-results .word-row:hover,
.search-results .word-row:focus {
  background: var(--paper-2);
  outline: none;
}
.word-row--is-active { background: var(--paper-2); }
.word-row__level {
  font-family: var(--font);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* Detail panel: full word readout. */
.word-detail {
  padding: 2rem 2.5rem 3rem;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.word-detail__empty {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 1.05rem;
  padding-top: 4rem;
  text-align: center;
}
.word-detail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.word-detail__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 5cqi, 2.6rem);
  letter-spacing: -0.005em;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.word-detail__name clue-audio {
  font-size: 0.5em;
}
.word-detail__chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.meta-chip {
  font-family: var(--font);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius);
}
.meta-chip--quiet { color: var(--faint); }
.meta-chip--danger { color: var(--incorrect); border-color: var(--incorrect); }

.word-detail__section-eyebrow {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 0.6rem;
}
.word-detail__glosses {
  margin: 0;
  padding-left: 1.5rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--fg);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.word-detail__glosses li::marker { color: var(--faint); font-family: var(--font); font-size: 0.75rem; }

.word-detail__etym p {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 1rem;
  margin: 0;
}

.word-detail__verb-table {
  border-collapse: collapse;
  font-family: var(--serif);
  font-size: 0.95rem;
}
.word-detail__verb-table td {
  padding: 0.3rem 1rem 0.3rem 0;
  vertical-align: baseline;
}
.word-detail__verb-table td:first-child {
  font-family: var(--font);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  padding-right: 1.25rem;
  white-space: nowrap;
}

.word-detail__sentence-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.word-detail__sentence {
  border-top: 1px solid var(--rule);
  padding: 0.6rem 0;
}
.word-detail__sentence:last-child { border-bottom: 1px solid var(--rule); }
.word-detail__sentence-nl {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--fg);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.word-detail__sentence-en {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 0.15rem;
}

.word-detail__srs p {
  font-family: var(--font);
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

/* ---- Word family (Phase 3) -------------------------------------- */
/* Each group is one stem the current word shares — relatives render
   as small chips below the stem heading, capped to FAMILY_INLINE_LIMIT
   with the overflow behind `show all`. */
.word-detail__family-group {
  margin-bottom: 0.8rem;
}
.word-detail__family-group:last-child { margin-bottom: 0; }
.word-detail__family-stem {
  font-family: var(--font);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 0.4rem;
}
.word-detail__family-stem [lang="nl"] {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg);
}
.word-detail__family-gloss {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}
.word-detail__family-count {
  font-variant-numeric: tabular-nums;
  margin-left: 0.3rem;
  color: var(--faint);
}
.word-detail__family-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.4rem;
}
.word-detail__family-chip {
  font-family: var(--serif);
  font-size: 0.95rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  color: var(--fg);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.word-detail__family-chip:hover {
  background: var(--paper-2);
  border-color: var(--muted);
}
.word-detail__family-article {
  font-style: italic;
  font-size: 0.8rem;
  margin-right: 0.15rem;
}
.word-detail__family-article.art-de { color: var(--de); }
.word-detail__family-article.art-het { color: var(--het); }
.word-detail__family-hidden {
  display: contents;
}
.word-detail__family-more {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0.2rem 0.3rem;
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
}
.word-detail__family-more:hover { color: var(--fg); }

@media (max-width: 760px) {
  .search-layout { grid-template-columns: 1fr; }
  .search-rail {
    position: static;
    min-height: 0;
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding: 1rem 1.25rem;
  }
  .word-detail { padding: 1rem 1.25rem 2rem; }
}

/* Status line on the lists page sits in the header. */
.lists-page ~ header #status,
header #status {
  font-family: var(--serif);
  font-style: italic;
  color: var(--faint);
  font-size: 0.85rem;
  margin-left: auto;
}

/* ================================================================
   IDIOMS PAGE — sentence-length prompt, dictionary-style reveal
   ================================================================ */

/* The idiom prompt is a phrase, not a single word — scale it down
   from the words/verbs headword sizing so it sits comfortably on
   one line in the column. */
.prompt--idiom {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.6rem, 4.5cqi, 2.8rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--fg);
  margin: 0.4rem 0 0;
}

/* "literally: …" — the trap reading, set off with italic eyebrow. */
.idiom-literal {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--muted);
  margin: 0;
}
.idiom-literal em {
  font-style: italic;
  color: var(--faint);
  margin-right: 0.25em;
}

/* Etymology — the small piece of story behind the idiom. */
.idiom-etymology {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 62ch;
}

/* Example sentences — stacked NL/EN pairs, hairline-separated. */
.idiom-examples {
  margin: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.idiom-example {
  padding: 0.5rem 0;
}
.idiom-example + .idiom-example {
  border-top: 1px solid var(--rule);
}
.idiom-example__nl {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--fg);
  margin: 0;
}
.idiom-example__en {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0.1rem 0 0;
}

/* The reveal-card variant inherits the existing layout; only adds
   internal vertical rhythm. */
.reveal-card--idiom {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Idiom-word — a hoverable word inside the prompt. Looks like ordinary
   text except for a faint dotted underline; only shows real interaction
   affordance on hover/focus. Buttons (not spans) so they're keyboard-
   focusable and screen-reader navigable. */
.idiom-word {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: help;
  border-bottom: 1px dotted color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 3px;
  transition: color 120ms, border-bottom-color 120ms;
}
.idiom-word:hover,
.idiom-word:focus-visible {
  color: var(--accent, var(--fg));
  border-bottom-style: solid;
  border-bottom-color: currentColor;
  outline: none;
}

/* Shared popover. Positioned absolutely by JS; pointer-events disabled so
   the underlying word's mouseleave fires reliably. */
.word-popover {
  position: absolute;
  z-index: 50;
  max-width: 20rem;
  background: var(--paper, #fff);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.65rem 0.8rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms;
  font-family: var(--serif);
}
.word-popover[data-open] {
  opacity: 1;
  /* When open, allow pointer events so users can hover into the
     popover and click rule links. The default pointer-events:none
     keeps the popover from blocking hover detection on adjacent
     tokens while invisible. */
  pointer-events: auto;
}
.word-popover__dutch {
  font-weight: 500;
  font-size: 1rem;
  color: var(--fg);
  margin: 0;
}
.word-popover__english {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0.15rem 0 0;
}
/* Syntactic-role line — sentence-specific, drawn from the design-time
   structure annotation. Visually subordinate to the gloss but more
   present than the etymology. */
.word-popover__role {
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0.35rem 0 0;
}
.word-popover__etym {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--faint);
  margin: 0.45rem 0 0;
  padding-top: 0.4rem;
  border-top: 1px solid var(--rule);
}
.word-popover__rules {
  font-family: var(--font, system-ui, sans-serif);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--muted);
  margin: 0.5rem 0 0;
  padding-top: 0.4rem;
  border-top: 1px solid var(--rule);
}
.word-popover__rule-link {
  color: var(--accent, #6a4d2b);
  text-decoration: none;
  font-weight: 500;
}
.word-popover__rule-link:hover { text-decoration: underline; }
.word-popover__rule-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- focus ---------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- screen-reader utility ------------------------------------ */
.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;
}

/* ---- skip link ------------------------------------------------ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--fg);
  color: var(--bg);
  padding: 0.5rem 1rem;
  font-family: var(--font);
  font-size: 0.9rem;
  text-decoration: none;
  z-index: 100;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  top: 0;
}

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

/* ================================================================
   DARK MODE
   Same editorial register, dimmer paper. The palette is a hint warmer
   than a pure neutral dark — like aged paper under a low lamp — so the
   burgundy accent and the de/het colour pairs still feel like they
   belong to the light theme they're rotated from.

   Tokens map onto the existing semantic variables; components don't
   need to know dark mode exists.

   Two trigger paths:
     - user has no explicit choice and the OS prefers dark, OR
     - user has explicitly chosen 'dark' via <theme-toggle>.
   An explicit 'light' choice short-circuits both via the :not selector.
   ================================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg:        #241d15;
    --paper:     #241d15;
    --surface:   #241d15;
    --paper-2:   #2c2419;
    --fg:        #ede4d2;
    --muted:     #b0a48f;
    --faint:     #877c6c;
    --line:      #3a3127;
    --rule:      #3a3127;
    --border:    #3a3127;
    --accent:    #d56b85;
    --accent-2:  #3a1f26;

    --de:        #d49294;
    --de-2:      #44292e;
    --het:       #82b899;
    --het-2:     #25342d;
    --correct:   var(--het);
    --correct-2: var(--het-2);
    --incorrect: var(--de);
    --incorrect-2: var(--de-2);

    /* Tint palette — same hue families, deep desaturated variants that
       maintain ~6:1 contrast with --fg. */
    --tint-neutral: #2a241c;
    --tint-paper:   #2a2218;
    --tint-warm:    #3a2f1d;
    --tint-green:   #25342d;
    --tint-orange:  #3a2918;
    --tint-yellow:  #3a2f17;
    --tint-purple:  #2c2738;
    --tint-blue:    #1d2f37;

    /* Status palette — same hue families, dark bg + light fg paired
       to read ≥6:1 against each other. */
    --status-correct-bg:   #1f3826;
    --status-correct-fg:   #b3e4c0;
    --status-incorrect-bg: #3d1f23;
    --status-incorrect-fg: #f3b8be;
    --status-partial-bg:   #3d2c18;
    --status-partial-fg:   #fbd5a1;
  }
}
:root[data-theme='dark'] {
  --bg:        #241d15;
  --paper:     #241d15;
  --surface:   #241d15;
  --paper-2:   #2c2419;
  --fg:        #ede4d2;
  --muted:     #b0a48f;
  --faint:     #877c6c;
  --line:      #3a3127;
  --rule:      #3a3127;
  --border:    #3a3127;
  --accent:    #d56b85;
  --accent-2:  #3a1f26;

  --de:        #d49294;
  --de-2:      #44292e;
  --het:       #82b899;
  --het-2:     #25342d;
  --correct:   var(--het);
  --correct-2: var(--het-2);
  --incorrect: var(--de);
  --incorrect-2: var(--de-2);

  --tint-neutral: #2a241c;
  --tint-paper:   #2a2218;
  --tint-warm:    #3a2f1d;
  --tint-green:   #25342d;
  --tint-orange:  #3a2918;
  --tint-yellow:  #3a2f17;
  --tint-purple:  #2c2738;
  --tint-blue:    #1d2f37;

  --status-correct-bg:   #1f3826;
  --status-correct-fg:   #b3e4c0;
  --status-incorrect-bg: #3d1f23;
  --status-incorrect-fg: #f3b8be;
  --status-partial-bg:   #3d2c18;
  --status-partial-fg:   #fbd5a1;
}

/* ---- <theme-toggle> --------------------------------------------- */
/* Three-segment pill: each segment commits to that theme directly so
   the user never has to click through an intermediate state. The
   segment matching the current state is visually pressed. */
theme-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding-left: 0.5rem;
}
.theme-toggle__group {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 2px;
  gap: 0;
  background: transparent;
}
.theme-toggle__seg {
  background: transparent;
  border: none;
  border-radius: 999px;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  font-family: var(--serif);
  font-size: 0.9rem;
  line-height: 1;
  transition: color 120ms, background 120ms;
}
.theme-toggle__seg:hover { color: var(--fg); }
.theme-toggle__seg.is-active {
  background: var(--paper-2);
  color: var(--fg);
}