/* ===========================================================================
 * subjects/vocab/styles.css — the Vocabulary Builder's own surfaces
 * ===========================================================================
 * SCOPED SHEET. Every rule here is prefixed with :where(.vocab-app), the class
 * VocabApp puts on its root (subjects/vocab/app.jsx) in BOTH embeddings — the
 * Learning Lab workspace view and the standalone Vocabulary Builder product
 * mode. Keep it that way: this sheet loads after every component sheet, so an
 * unscoped rule here silently wins app-wide ties (finding C6).
 *
 * :where() contributes NO specificity, so the prefix restricts matching
 * without shifting any cascade result — e.g. app-surface.css's
 * `html[data-surface] .progress-bar-track` still outranks
 * `.flashcards-screen .progress-bar-track` exactly as before.
 *
 * The app-wide rules that used to live here (:root tokens, the element rules,
 * .topbar, .icon-btn, the .mode-screen / .mode-header / .progress-bar family)
 * moved to shared-chrome.css at the repo root, which loads early.
 * ========================================================================= */
/* No `min-height: 100vh`: this is the vocab subject root, inside main.stage's
   `zoom` — measured 1045px painted against a 950px window. `.shell` (and
   `.subject-root`'s 806px phone box) carry the same cream from outside it. */
:where(.vocab-app).app { background: var(--bg); }

:where(.vocab-app) .app-main { padding: 0 0 60px; }

:where(.vocab-app) .topbar-right { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }

/* ---------- BUTTONS ---------- */
:where(.vocab-app) .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font-family: var(--font-ui); font-weight: 600; border: 1px solid transparent;
  border-radius: 14px; padding: 12px 18px; font-size: 15px;
  background: var(--surface); color: var(--ink);
  transition: transform .1s, background .15s, box-shadow .15s;
}

:where(.vocab-app) .btn-sm { padding: 9px 14px; font-size: 13px; border-radius: 10px; }

:where(.vocab-app) .btn-lg { padding: 16px 22px; font-size: 16px; border-radius: 16px; }

:where(.vocab-app) .btn-primary { background: var(--ink); color: var(--cream); border-color: var(--ink); }

:where(.vocab-app) .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

:where(.vocab-app) .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink-10); }

:where(.vocab-app) .btn-ghost:hover { background: var(--surface); border-color: var(--ink-30); }

:where(.vocab-app) .btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- BADGES ---------- */
:where(.vocab-app) .pos-badge {
  font-family: var(--font-display); font-style: italic; font-size: 13px;
  color: var(--ink-50);
}

/* ================= HOME SCREEN ================= */
:where(.vocab-app) .home-screen { padding: 0 20px 40px; }

:where(.vocab-app) .ring-center { display: flex; flex-direction: column; align-items: center; justify-content: center; }

:where(.vocab-app) .ring-num {
  font-family: var(--font-display); font-size: 28px; font-weight: 700;
  line-height: 1; color: var(--ink);
}

:where(.vocab-app) .ring-sub {
  font-size: 11px; color: var(--ink-soft); letter-spacing: 0.4px;
  text-transform: uppercase; margin-top: 2px; font-weight: 600;
}

/* Modes list */
:where(.vocab-app) .modes-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

:where(.vocab-app) .mode-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--ink-10);
  border-radius: var(--radius); padding: 14px 16px;
  cursor: pointer; font-family: inherit; color: inherit;
  text-align: left; transition: transform .15s, box-shadow .15s;
  width: 100%; box-shadow: var(--shadow-sm);
}

:where(.vocab-app) .mode-row:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

:where(.vocab-app) .mode-row-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--cream);
}

/* Practice mode icons — distinct hues at matched oklch L/C so the icons read
   as a colorful set (not 3 browns + 1 green) while still sitting in the warm
   cream/ink world.
   SEMANTIC-AXIS RULE (study R2-28/D11, mirrored in shared-icons.jsx
   __CHIP_HUES): a chip labels a CATEGORY, success/danger label an ANSWER, so a
   categorical row must sit >= 30 deg in OKLCH hue from success #5B7A4A
   (H 135.1) and danger #A0412E (H 33.1). `coral` (H 35.1, 2 deg off danger)
   and `sage` (H 154.7, 20 deg off success) FAIL that bar and are no longer
   assigned to any vocab mode row — they stay defined only so nothing that
   still references the class breaks. Do not re-assign them. */
:where(.vocab-app) .mode-row.mode-lavender .mode-row-icon { background: oklch(0.55 0.13 295); }

 /* violet — Definition Quiz */
:where(.vocab-app) .mode-row.mode-teal     .mode-row-icon { background: oklch(0.55 0.10 200); }

 /* teal   — Words in Context */
:where(.vocab-app) .mode-row.mode-indigo   .mode-row-icon { background: oklch(0.52 0.12 250); }

 /* indigo — Fill in the Blank */
:where(.vocab-app) .mode-row.mode-plum     .mode-row-icon { background: oklch(0.50 0.13 340); }

 /* plum   — Synonyms & Antonyms */
:where(.vocab-app) .mode-row.mode-marigold .mode-row-icon { background: oklch(0.62 0.13 75);  }

 /* amber  — Flashcards */
:where(.vocab-app) .mode-row.mode-ink .mode-row-icon { background: var(--ink); }

 /* green      — RETIRED, see rule above */
:where(.vocab-app) .mode-row-body { flex: 1; min-width: 0; }

:where(.vocab-app) .mode-row-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.15;
  display: flex; align-items: center; gap: 8px; min-width: 0;
}

:where(.vocab-app) .mode-row-resume {
  font-family: var(--font-ui, inherit);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px 2.5px; border-radius: 99px;
  background: var(--ink); color: var(--cream, #fff);
  flex-shrink: 0;
}

:where(.vocab-app) .mode-row-sub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; line-height: 1.35; }

:where(.vocab-app) .mode-row-arrow { color: var(--ink-30); flex-shrink: 0; }

:where(.vocab-app) .mode-row:hover .mode-row-arrow { color: var(--ink); }

/* Sections */
:where(.vocab-app) .section-h {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 24px 0 12px;
}

:where(.vocab-app) .section-h h2 {
  font-family: var(--font-display); font-size: 18px;
  font-weight: 600; letter-spacing: -0.01em; margin: 0;
}

/* Word of the day */
/* Read-only → inset surface, no border/shadow (see surface language in
   shared-app-shell.jsx). The word chips below it ARE tappable, so they keep
   the raised --surface treatment. */
:where(.vocab-app) .wotd-card {
  background: var(--bg-inset, var(--cream-2)); border: none;
  border-radius: var(--radius-inset); padding: 20px;
  box-shadow: none; position: relative; overflow: hidden;
  margin-bottom: 8px;
}

:where(.vocab-app) .wotd-card::before {
  content: ""; position: absolute; top: -30px; right: -30px;
  width: 100px; height: 100px; background: var(--accent-marigold-tint);
  border-radius: 50%; z-index: 0;
}

:where(.vocab-app) .wotd-head { display: flex; gap: 6px; align-items: center; margin-bottom: 12px; position: relative; z-index: 1; }

:where(.vocab-app) .wotd-word {
  font-family: var(--font-display); font-size: 32px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 4px;
  position: relative; z-index: 1;
}

:where(.vocab-app) .wotd-phon {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft);
  margin-bottom: 12px; position: relative; z-index: 1;
}

:where(.vocab-app) .wotd-def { font-size: 14px; line-height: 1.5; margin-bottom: 8px; position: relative; z-index: 1; }

:where(.vocab-app) .wotd-ex {
  font-family: var(--font-display); font-style: italic;
  font-size: 14px; color: var(--ink-70); line-height: 1.45;
  position: relative; z-index: 1;
}

/* Recent sessions */
:where(.vocab-app) .session-list { display: flex; flex-direction: column; gap: 8px; }

:where(.vocab-app) .session-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--ink-10);
  border-radius: var(--radius);
  font-family: inherit; color: inherit; text-align: left;
  width: 100%; box-sizing: border-box;
}

:where(.vocab-app) .session-row-clickable {
  cursor: pointer;
  grid-template-columns: 1fr auto auto auto;
  transition: border-color 0.15s, background 0.15s;
}

:where(.vocab-app) .session-row-clickable:hover { border-color: var(--accent, #c6623c); }

:where(.vocab-app) .session-row-chev { color: var(--ink-soft); flex-shrink: 0; }

:where(.vocab-app) .session-mode {
  font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

:where(.vocab-app) .session-score { font-variant-numeric: tabular-nums; font-size: 13px; }

:where(.vocab-app) .score-big { font-family: var(--font-display); font-size: 18px; font-weight: 700; }

:where(.vocab-app) .score-small { color: var(--ink-soft); font-size: 12px; }

:where(.vocab-app) .session-date { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

:where(.vocab-app) .session-bar { display: none; }

 /* hide bar in narrow layout */

/* Word chips grid — auto-fills the column it is given (the deck is a wide mode
   screen now), with a floor of 2: min() drops the track min to half the row
   minus half the gap once the container is narrower than 2×165, so a small
   phone still gets two chips per row instead of one column of stripes. */
:where(.vocab-app) .word-chip-grid {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(min(165px, calc(50% - 3px)), 1fr));
}

:where(.vocab-app) .word-chip {
  background: var(--surface); border: 1px solid var(--ink-10); border-radius: 10px;
  padding: 9px 12px; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  color: var(--ink); text-align: left; font-size: 13px;
  transition: border-color .15s;
}

:where(.vocab-app) .word-chip:hover { border-color: var(--ink-30); }

:where(.vocab-app) .wc-word {
  font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
}

/* Long words (>12 chars, study C15 — "compassionat/e" mid-word breaks):
   drop the single-line ellipsis truncation in favor of a wrapped, hyphenated
   break plus a smaller type size, so the whole word stays legible instead of
   being cut. The grid row auto-sizes, so a chip growing to two lines here
   doesn't disturb its neighbors. */
:where(.vocab-app) .word-chip--long .wc-word {
  white-space: normal; font-size: 11.5px; line-height: 1.3;
}

/* Status fills. The FILL is the status signal; the LABEL is always the deck's
   near-black ink (study R2-27/D10). --accent-sage-ink is rebound at runtime to
   theme.success (#5B7A4A), which on the sage tint measured 3.77:1 — the words
   the student had actually earned were the faintest thing on the screen and
   read as disabled next to the 14.19:1 un-met chips. Inheriting .word-chip's
   var(--ink) puts mastered at 11.67:1 and learning at 8.87–11.61:1 across
   every tint, so all three states share one label ink and only the paper
   changes. Do NOT re-introduce a per-status .wc-word color. */
:where(.vocab-app) .word-chip-mastered { background: var(--accent-sage-tint); border-color: transparent; }

:where(.vocab-app) .word-chip-learning { background: var(--accent-marigold-tint); border-color: transparent; }

/* Chip legend (R2-27) — one read-only line above the grid so green/gold are
   decoded rather than guessed. The swatches wear the SAME classes the chips
   do (.word-chip + status), so the legend cannot drift from the grid: a hue
   edit above moves both. --swatch only strips the button geometry. */
:where(.vocab-app) .word-chip--swatch {
  width: 13px; height: 13px; min-width: 0; flex: none;
  padding: 0; border-radius: 4px; cursor: default; pointer-events: none;
}

:where(.vocab-app) .deck-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  margin: 10px 0 2px; padding: 7px 10px;
  background: var(--bg-inset, var(--cream-2)); border: none;
  border-radius: var(--radius-inset);
  color: var(--ink-70); font-size: 11.5px; line-height: 1.4;
}

:where(.vocab-app) .deck-legend-item { display: inline-flex; align-items: center; gap: 6px; }

:where(.vocab-app) .ses-stat { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

:where(.vocab-app) .ses-known { color: var(--accent-sage-ink); font-weight: 700; }

:where(.vocab-app) .ses-studying { color: var(--accent-coral-ink); font-weight: 600; }

/* ================= FLASHCARDS ================= */
:where(.vocab-app) .flashcards-screen {
  display: flex; flex-direction: column; gap: 14px;
}

:where(.vocab-app) .flashcards-screen .progress-bar-track,
:where(.vocab-app) .flashcards-screen .flashcard-stage,
:where(.vocab-app) .flashcards-screen .rate-row { margin-left: 20px; margin-right: 20px; }

:where(.vocab-app) .flashcard-stage {
  perspective: 1200px; min-height: 360px;
  display: flex; align-items: center; justify-content: center;
}

:where(.vocab-app) .flashcard {
  width: 100%; min-height: 360px; position: relative;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.8,.2,1); cursor: pointer;
}

:where(.vocab-app) .flashcard.flipped { transform: rotateY(180deg); }

:where(.vocab-app) .flashcard-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  background: var(--surface); border: 1px solid var(--ink-10);
  border-radius: var(--radius-lg); padding: 22px;
  display: flex; flex-direction: column; box-shadow: var(--shadow);
}

:where(.vocab-app) .flashcard-front { background: linear-gradient(135deg, var(--surface) 0%, var(--cream-2) 100%); }

:where(.vocab-app) .flashcard-back { transform: rotateY(180deg); overflow-y: auto; }

:where(.vocab-app) .card-corner { display: flex; gap: 6px; align-items: center; }

:where(.vocab-app) .card-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }

:where(.vocab-app) .card-word {
  font-family: var(--font-display); font-size: 44px;
  font-weight: 700; line-height: 1; text-align: center; letter-spacing: -0.02em;
  word-break: break-word;
}

:where(.vocab-app) .card-phon { font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }

:where(.vocab-app) .speak-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--cream); border: 1px solid var(--ink-10); border-radius: 999px;
  padding: 7px 14px; cursor: pointer; font-family: inherit; font-size: 12px;
  color: var(--ink); margin-top: 10px;
}

:where(.vocab-app) .card-hint {
  text-align: center; font-size: 11px; color: var(--ink-30);
  letter-spacing: 0.08em; text-transform: uppercase;
}

:where(.vocab-app) .card-back-body { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }

:where(.vocab-app) .back-word { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -0.02em; }

:where(.vocab-app) .back-def { font-size: 15px; line-height: 1.45; }

:where(.vocab-app) .back-section { border-top: 1px solid var(--ink-10); padding-top: 10px; }

:where(.vocab-app) .back-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; font-weight: 700; }

:where(.vocab-app) .back-example { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--ink-70); line-height: 1.4; }

:where(.vocab-app) .back-mnemonic { font-size: 13px; color: var(--ink); }

:where(.vocab-app) .back-etym { font-size: 12px; color: var(--ink-70); line-height: 1.4; }

:where(.vocab-app) .back-pills { display: flex; flex-wrap: wrap; gap: 5px; }

:where(.vocab-app) .pill { font-size: 12px; padding: 3px 10px; border-radius: 999px; }

:where(.vocab-app) .pill-sage { background: var(--accent-sage-tint); color: var(--accent-sage-ink); }

:where(.vocab-app) .pill-coral { background: var(--accent-coral-tint); color: var(--accent-coral-ink); }

:where(.vocab-app) .rate-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

:where(.vocab-app) .rate-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 14px 14px; min-height: 62px;
  border: 2px solid var(--ink-10); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font-family: inherit; cursor: pointer; transition: all .15s;
}

:where(.vocab-app) .rate-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

:where(.vocab-app) .rate-btn-label { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }

:where(.vocab-app) .rate-btn-sub { font-size: 11px; color: var(--ink-soft); }

:where(.vocab-app) .rate-skip { border-color: var(--ink-10); }

:where(.vocab-app) .rate-reviewed { border-color: var(--ink); background: var(--ink); color: var(--cream); }

:where(.vocab-app) .rate-reviewed .rate-btn-label { color: var(--cream); }

:where(.vocab-app) .rate-reviewed .rate-btn-sub { color: rgba(244, 239, 230, 0.6); }

:where(.vocab-app) .rate-reviewed.is-disabled,
:where(.vocab-app) .rate-reviewed:disabled {
  background: var(--ink-10); border-color: var(--ink-10); color: var(--ink-30);
  cursor: not-allowed; transform: none; box-shadow: none;
}

:where(.vocab-app) .rate-reviewed.is-disabled .rate-btn-label,
:where(.vocab-app) .rate-reviewed:disabled .rate-btn-label { color: var(--ink-30); }

:where(.vocab-app) .rate-reviewed.is-disabled .rate-btn-sub,
:where(.vocab-app) .rate-reviewed:disabled .rate-btn-sub { color: var(--ink-30); }

/* ================= QUIZ ================= */
:where(.vocab-app) .quiz-screen { display: flex; flex-direction: column; }

:where(.vocab-app) .quiz-screen .quiz-body { padding: 0 20px; display: flex; flex-direction: column; gap: 14px; }

/* Desktop measure: the prompt card and the choice rows are a question, not a
   layout — at the full column they rendered as ~790px bands with the
   eliminator marooned at the far edge. Unscoped on purpose: every vocab mode
   that runs through the quiz screen (definition, context, blanks, synonyms,
   antonyms, analogies) and the word workout share this body and want it.
   `width: 100%` is load-bearing: the body is a column-flex ITEM, and an auto
   cross-axis margin cancels the stretch, so without it the measure shrink-
   wraps each question and the card changes width question to question. */
html[data-surface="desktop"] :where(.vocab-app) .quiz-body { width: 100%; max-width: 600px; margin-inline: auto; }

/* Read-only stimulus → inset, per the app's surface language (study R2-25):
   this card wore the same var(--surface) fill + shadow as the tappable
   choices below it, which is a dead-tap invitation on the most repeated
   screen in the app. */
:where(.vocab-app) .quiz-prompt-card {
  background: var(--bg-inset); border: none;
  border-radius: var(--radius-inset); padding: 20px; box-shadow: none;
}

:where(.vocab-app) .quiz-instr {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 12px; font-weight: 700;
}

:where(.vocab-app) .quiz-word-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }

:where(.vocab-app) .quiz-word {
  font-family: var(--font-display); font-size: 36px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1; word-break: break-word;
}

:where(.vocab-app) .quiz-sentence {
  font-size: 17px; line-height: 1.5; font-family: var(--font-serif-body);
}

:where(.vocab-app) .quiz-sentence strong {
  font-weight: 700;
}

:where(.vocab-app) .quiz-subprompt { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft); flex-wrap: wrap; }

:where(.vocab-app) .quiz-options { display: grid; gap: 8px; }

:where(.vocab-app) .opt-def { font-size: 12px; color: var(--ink-70); line-height: 1.4; }

:where(.vocab-app) .opt-src { color: var(--ink-soft); }

:where(.vocab-app) .opt-src em { font-family: var(--font-display); font-style: italic; color: var(--ink-70); }


:where(.vocab-app) .opt-elim {
  align-self: center;
  width: 28px; height: 28px; border-radius: 999px;
  border: 1px solid var(--ink-30);
  background: transparent; color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; transition: all .15s;
}

:where(.vocab-app) .opt-elim:hover { border-color: var(--ink-soft); color: var(--ink); }

:where(.vocab-app) .opt-elim.is-on {
  background: var(--accent-coral-tint);
  border-color: var(--accent-coral);
  color: var(--accent-coral-ink);
}

:where(.vocab-app) .opt-mark { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

:where(.vocab-app) .opt-mark-correct { background: var(--accent-sage); color: #fff; }

:where(.vocab-app) .opt-mark-wrong { background: var(--accent-coral); color: #fff; }

/* McItem .mc-* rules retired here in favor of the canonical unscoped
 * rules in components/items/mc-item.css (Sub-phase D). Vocab inherits the
 * canonical visual; no surface-specific tweaks needed. */

/* AnalogyItem .an-* rules retired here in favor of the canonical
 * unscoped rules in components/items/analogy-item.css (Sub-phase D part 2).
 * Vocab quiz inherits the canonical visual; .exam-screen overrides below
 * still apply for vocab-exam-specific tweaks (eyebrow hide, box-shadow
 * selected). */

/* Exam scope — analogy section shares the .exam-screen tree (set on
   ExamScreen's root). Map .an-* onto the existing .exam-opt visual so
   the section feels identical to synonym/completion items. The exam
   uses text tags (rendered via renderRightAdornment), not pill icons. */
:where(.vocab-app) .exam-screen .an-eyebrow { display: none; }

:where(.vocab-app) .exam-review .an-eyebrow { display: none; }

:where(.vocab-app) .exam-screen .an-stem,
:where(.vocab-app) .exam-review .an-stem {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; letter-spacing: -0.005em;
  line-height: 1.3; margin: 0 0 12px;
  text-wrap: pretty;
}

:where(.vocab-app) .exam-screen .an-stem-a,
:where(.vocab-app) .exam-screen .an-stem-b { text-transform: uppercase; }

:where(.vocab-app) .exam-screen .an-stem-as { color: var(--ink-70); font-style: italic; font-weight: 500; }

:where(.vocab-app) .exam-screen .an-stem-blank { color: var(--ink-soft); }

:where(.vocab-app) .exam-screen .an-choices { display: grid; gap: 8px; }

:where(.vocab-app) .exam-screen .an-choice {
  display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px;
  background: var(--surface); border: 1.5px solid var(--ink-10); border-radius: var(--radius);
  padding: 11px 14px; cursor: pointer; color: inherit;
  text-align: left; transition: all .15s; font-size: 14px; line-height: 1.4;
}

/* Tracks the tighter exam padding above (14px right padding + 1.5px border). */
:where(.vocab-app) .exam-screen .an-choice-row { --an-elim-inset: 15.5px; }

/* Hover keyed off the ROW — the eliminate × overlays the choice button but is
   no longer inside it. */
:where(.vocab-app) .exam-screen .an-choice-row:hover .an-choice:not(:disabled) { border-color: var(--ink-30); }

:where(.vocab-app) .exam-screen .an-choice:disabled { cursor: default; }

:where(.vocab-app) .exam-screen .an-choice.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(184,110,62,0.18); }

:where(.vocab-app) .exam-screen .an-letter {
  background: var(--ink-10); color: var(--ink-70); border-radius: 6px;
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px; font-family: var(--font-mono);
}

:where(.vocab-app) .exam-screen .an-choice.is-selected .an-letter { background: var(--accent); color: #fff; }

:where(.vocab-app) .exam-screen .an-choice-main { min-width: 0; }

:where(.vocab-app) .exam-screen .an-choice-as { color: var(--ink-soft); font-style: italic; }

:where(.vocab-app) .exam-screen .an-choice.is-correct { background: var(--accent-sage-tint); border-color: var(--accent-sage); color: var(--accent-sage-ink); }

:where(.vocab-app) .exam-screen .an-choice.is-correct .an-letter { background: var(--accent-sage); color: #fff; }

:where(.vocab-app) .exam-screen .an-choice.is-wrong { background: var(--accent-coral-tint); border-color: var(--accent-coral); color: var(--accent-coral-ink); }

:where(.vocab-app) .exam-screen .an-choice.is-wrong .an-letter { background: var(--accent-coral); color: #fff; }

/* The eliminated dim lives on the row (it must take the × with it). */
:where(.vocab-app) .exam-screen .an-choice-row.is-eliminated { opacity: 0.5; }

:where(.vocab-app) .exam-screen .an-choice.is-eliminated .an-choice-text {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--ink-30);
}

/* The exam × is 26px, so its reserved slot shrinks with it. */
:where(.vocab-app) .exam-screen .an-elim-spacer { width: 26px; height: 26px; }

:where(.vocab-app) .exam-screen .an-elim {
  width: 26px; height: 26px; border-radius: 999px;
  border: 1.5px solid var(--ink-10); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-30); cursor: pointer; user-select: none;
  font-size: 13px; font-weight: 600;
}

:where(.vocab-app) .exam-screen .an-elim.is-on {
  background: var(--accent-coral-tint);
  border-color: var(--accent-coral);
  color: var(--accent-coral-ink);
}

:where(.vocab-app) .quiz-reveal {
  background: var(--accent-marigold-tint); border-radius: var(--radius);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 6px;
  animation: slideUp .3s ease;
}

@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } }

:where(.vocab-app) .reveal-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

:where(.vocab-app) .reveal-word { font-family: var(--font-display); font-size: 20px; font-style: italic; font-weight: 600; }

:where(.vocab-app) .reveal-phon { font-family: var(--font-mono); font-size: 12px; color: var(--ink-70); }

:where(.vocab-app) .reveal-def { font-size: 14px; line-height: 1.4; }

:where(.vocab-app) .reveal-ex { font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--ink-70); line-height: 1.4; }

:where(.vocab-app) .reveal-hint { font-size: 12px; padding: 8px 12px; background: rgba(255,255,255,0.55); border-radius: 10px; }

/* P0.6 — advance CTA pinned to the foot of the scroller.
   Before: the button was the last line of the reveal card, so every wrong
   answer cost a scroll at the exact moment a discouraged student decides
   whether to continue. Sticky INSIDE the app's scroller (.shell), full-bleed
   against the page background with a hairline above — the same idiom as the
   onboarding footer (.onboard-foot, index.html). The bar keeps its normal-flow
   slot, so nothing shifts when it pins or unpins. */
:where(.vocab-app) .quiz-screen .quiz-advance {
  position: sticky;
  bottom: 0;
  z-index: 3;
  /* Full-bleed against .quiz-body's 20px gutters. */
  margin: 0 -20px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--line);
}

:where(.vocab-app) .quiz-screen .quiz-advance .btn { width: 100%; }

/* A sticky element can't leave its containing block, so the screen's own 40px
   bottom padding would strand the bar 40px above the end of the scroll. While
   the bar is up, the bar IS the bottom. */
:where(.vocab-app) .quiz-screen.has-advance { padding-bottom: 0; }

/* ================= SESSION COMPLETE ================= */
:where(.vocab-app) .session-complete {
  text-align: center; padding: 40px 20px 60px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}

:where(.vocab-app) .sc-burst { animation: pop .5s cubic-bezier(.2,1.2,.4,1); }

@keyframes pop { from { transform: scale(0.3); opacity: 0; } }

:where(.vocab-app) .sc-title {
  font-family: var(--font-display); font-size: 30px; font-style: italic;
  font-weight: 500; margin: 0;
}

:where(.vocab-app) .sc-stats { display: flex; gap: 26px; margin: 16px 0; }

:where(.vocab-app) .sc-stat { text-align: center; }

:where(.vocab-app) .sc-num {
  font-family: var(--font-display); font-size: 36px; font-style: italic;
  line-height: 1; color: var(--accent-coral-ink);
}

:where(.vocab-app) .sc-lbl { font-size: 11px; color: var(--ink-soft); margin-top: 4px; letter-spacing: 0.06em; }

:where(.vocab-app) .sc-actions { display: flex; gap: 10px; margin-top: 16px; width: 100%; }

:where(.vocab-app) .sc-actions > * { flex: 1; }

:where(.vocab-app) .empty-state { text-align: center; padding: 60px 20px; }

:where(.vocab-app) .empty-state h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; }

/* ================= STATS ================= */
:where(.vocab-app) .stats-section {
  background: var(--bg-inset, var(--cream-2)); border: none; border-radius: var(--radius-inset);
  padding: 18px; margin: 0 20px 12px;
}

:where(.vocab-app) .stats-section h3 {
  font-family: var(--font-display); font-size: 16px;
  font-weight: 600; margin: 0 0 14px;
}

:where(.vocab-app) .empty-inline { color: var(--ink-soft); font-size: 13px; padding: 14px 0; text-align: center; }


:where(.vocab-app) .tab {
  background: none; border: none; padding: 9px 10px; font-family: inherit; font-size: 13px;
  color: var(--ink-soft); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}

:where(.vocab-app) .tab.active { color: var(--ink); border-bottom-color: var(--accent-coral); font-weight: 600; }

:where(.vocab-app) .field {}

:where(.vocab-app) .field-label { font-size: 13px; font-weight: 600; margin-bottom: 4px; }

:where(.vocab-app) .field-hint { font-size: 11px; color: var(--ink-soft); margin-bottom: 8px; }

:where(.vocab-app) .chip {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ink-10);
  background: var(--surface); cursor: pointer; font-family: inherit; font-size: 12px; color: var(--ink);
  text-transform: capitalize;
}

:where(.vocab-app) .chip.active { background: var(--ink); color: var(--cream); border-color: var(--ink); }

:where(.vocab-app) .toggle {
  width: 40px; height: 22px; border-radius: 999px; background: var(--ink-10); border: none;
  position: relative; cursor: pointer; padding: 0; transition: background .2s;
}

:where(.vocab-app) .toggle.on { background: var(--accent-sage); }

:where(.vocab-app) .toggle-dot {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff;
  border-radius: 50%; transition: left .2s;
}

:where(.vocab-app) .toggle.on .toggle-dot { left: 20px; }

:where(.vocab-app) .msg { font-size: 12px; color: var(--accent-sage-ink); padding: 7px 10px; background: var(--accent-sage-tint); border-radius: 8px; }

/* ================= EXAM ================= */
/* Exam active — header now via the shared <ModeHeader>; only the
   counter typography rules remain here (passed through the `meta` slot). */
:where(.vocab-app) .exam-screen { padding: 0 0 40px; }

:where(.vocab-app) .exam-counter { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

:where(.vocab-app) .exam-counter strong { color: var(--ink); font-size: 14px; }

:where(.vocab-app) .exam-answered { display: none; }

:where(.vocab-app) .exam-progress-track {
  display: flex; gap: 3px; margin: 0 20px 18px; flex-wrap: wrap;
}

:where(.vocab-app) .exam-dot {
  flex: 1; min-width: 10px; height: 5px; border-radius: 3px;
  background: var(--ink-10); border: none; padding: 0;
}

:where(.vocab-app) .exam-dot.done { background: var(--accent-sage); }

:where(.vocab-app) .exam-dot.active { height: 7px; background: var(--ink); }

:where(.vocab-app) .exam-body { padding: 0 20px 20px; }

:where(.vocab-app) .exam-qtype {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-soft); margin-bottom: 14px; font-weight: 700;
}

:where(.vocab-app) .exam-prompt-syn {
  font-family: var(--font-display); font-size: 36px; font-weight: 700;
  letter-spacing: 0.02em; color: var(--ink); text-align: center;
  padding: 26px 16px; background: var(--surface);
  border-radius: var(--radius-lg); margin-bottom: 20px;
  border: 1px solid var(--ink-10);
}

:where(.vocab-app) .exam-prompt-sent {
  font-size: 17px; line-height: 1.55; color: var(--ink);
  padding: 20px; background: var(--surface);
  border-radius: var(--radius-lg); margin-bottom: 20px;
  border: 1px solid var(--ink-10);
  font-family: var(--font-display); font-weight: 500;
}

:where(.vocab-app) .exam-options { display: flex; flex-direction: column; gap: 8px; }

:where(.vocab-app) .exam-opt {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 2px solid var(--ink-10);
  border-radius: 12px; padding: 12px 14px;
  cursor: pointer; font-family: inherit; color: var(--ink);
  text-align: left; transition: all .12s; font-size: 14px;
  position: relative;
}

:where(.vocab-app) .exam-opt.picked { border-color: var(--ink); background: var(--bg); }

:where(.vocab-app) .exam-opt.eliminated { opacity: 0.5; cursor: default; }

:where(.vocab-app) .exam-opt.eliminated .exam-opt-text {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--ink-30);
}

:where(.vocab-app) .exam-opt-letter {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--ink-10);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; flex-shrink: 0;
}

:where(.vocab-app) .exam-opt.picked .exam-opt-letter { background: var(--ink); color: var(--surface); border-color: var(--ink); }

:where(.vocab-app) .exam-opt-text { flex: 1; line-height: 1.4; }

:where(.vocab-app) .exam-opt-tag {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 7px; border-radius: 999px; font-weight: 700; flex-shrink: 0;
}

:where(.vocab-app) .tag-correct { background: var(--accent-sage); color: white; }

:where(.vocab-app) .tag-wrong { background: var(--accent-coral); color: white; }

:where(.vocab-app) .tag-correct-picked { background: var(--accent-sage); color: white; }

:where(.vocab-app) .exam-nav {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ink-10);
}

/* Review */
:where(.vocab-app) .exam-review { padding: 0 0 40px; }

:where(.vocab-app) .exam-score-card {
  background: var(--bg-inset, var(--cream-2)); border: none;
  border-radius: var(--radius-inset); padding: 20px; margin: 0 20px 12px;
  display: flex; flex-direction: column; gap: 14px; align-items: stretch;
}

:where(.vocab-app) .exam-score-main { display: flex; align-items: baseline; gap: 12px; }

:where(.vocab-app) .exam-score-pct {
  font-family: var(--font-display); font-size: 48px; font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums;
}

:where(.vocab-app) .ex-pct-sign { font-size: 24px; color: var(--ink-soft); margin-left: 2px; }

:where(.vocab-app) .exam-score-sub { font-size: 13px; color: var(--ink-70); }

:where(.vocab-app) .exam-score-actions { display: flex; gap: 8px; }

:where(.vocab-app) .exam-score-actions > * { flex: 1; }

:where(.vocab-app) .exam-review-grid { display: flex; flex-direction: column; gap: 10px; padding: 0 20px; }

:where(.vocab-app) .exam-review-sidebar {
  background: var(--surface); border: 1px solid var(--ink-10);
  border-radius: var(--radius); padding: 8px;
  display: flex; flex-direction: row; gap: 4px;
  overflow-x: auto;
}

:where(.vocab-app) .ex-sidebar-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-soft); padding: 6px 4px; font-weight: 700;
  flex-shrink: 0; align-self: center;
}

:where(.vocab-app) .ex-sidebar-item {
  display: flex; align-items: center; gap: 4px;
  background: var(--bg); border: 1px solid var(--ink-10);
  cursor: pointer; padding: 6px 9px; border-radius: 8px;
  font-family: inherit; font-size: 12px; color: var(--ink);
  flex-shrink: 0;
}

:where(.vocab-app) .ex-sidebar-item.active { background: var(--ink); color: var(--cream); border-color: var(--ink); }

:where(.vocab-app) .ex-si-num { font-variant-numeric: tabular-nums; font-weight: 700; }

:where(.vocab-app) .ex-si-preview { display: none; }

:where(.vocab-app) .ex-si-mark { font-weight: 700; font-size: 11px; }

:where(.vocab-app) .ex-sidebar-item.correct { border-color: var(--accent-sage); color: var(--accent-sage-ink); }

:where(.vocab-app) .ex-sidebar-item.wrong { border-color: var(--accent-coral); color: var(--accent-coral-ink); }

:where(.vocab-app) .ex-sidebar-item.skipped { color: var(--ink-50); }

:where(.vocab-app) .ex-sidebar-item.active.correct,
:where(.vocab-app) .ex-sidebar-item.active.wrong,
:where(.vocab-app) .ex-sidebar-item.active.skipped { color: var(--cream); }

:where(.vocab-app) .exam-review-main {
  background: var(--surface); border: 1px solid var(--ink-10);
  border-radius: var(--radius); padding: 18px;
}

:where(.vocab-app) .exam-options-review .exam-opt { cursor: default; }

:where(.vocab-app) .exam-options-review .exam-opt.is-correct { border-color: var(--accent-sage); background: var(--accent-sage-tint); }

:where(.vocab-app) .exam-options-review .exam-opt.is-wrong { border-color: var(--accent-coral); background: var(--accent-coral-tint); }

/* Revealed exam options stay disabled (no further interaction) but should
   stay fully visible — without this, the browser dims the green/red feedback
   to ~50% which makes it hard to read. */
:where(.vocab-app) .exam-options-review .exam-opt:disabled,
:where(.vocab-app) .exam-options-review .exam-opt[disabled] {
  opacity: 1; cursor: default;
}

/* Inline-feedback explanation card sits between the options and the action
   bar (instant mode). Same look as the end-of-test review, just placed
   in-flow so the answer/feedback/next sit together. */
:where(.vocab-app) .exam-explain-inline { margin-top: 14px; }

:where(.vocab-app) .exam-explain {
  margin-top: 16px; padding: 14px; background: var(--bg);
  border-radius: 12px; border: 1px dashed var(--ink-10);
}

:where(.vocab-app) .ex-explain-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-soft); font-weight: 700; margin-bottom: 6px;
}

:where(.vocab-app) .exam-explain p { margin: 0 0 12px; font-size: 13px; line-height: 1.55; }

:where(.vocab-app) .ex-word-card { background: var(--bg-inset, var(--cream-2)); border: none; border-radius: var(--radius-inset); padding: 12px; }

:where(.vocab-app) .ex-word-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }

:where(.vocab-app) .ex-word-term { font-family: var(--font-display); font-size: 17px; font-weight: 700; }

:where(.vocab-app) .ex-word-pos { font-family: var(--font-display); font-style: italic; font-size: 12px; color: var(--ink-soft); }

:where(.vocab-app) .ex-word-def { font-size: 12px; line-height: 1.5; color: var(--ink-70); margin-bottom: 4px; }

:where(.vocab-app) .ex-word-ex {
  font-family: var(--font-display); font-style: italic; font-size: 12px; color: var(--ink-70);
  border-left: 2px solid var(--ink-10); padding-left: 8px; line-height: 1.4;
}

:where(.vocab-app) .exam-review-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--ink-10);
}

:where(.vocab-app) .ex-review-count { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }