:root {
  --canvas: #eceee9;
  --surface: #f5f7f2;
  --surface-strong: #ffffff;
  --text: #0f1210;
  --muted: #596255;
  /* Darkened from #737c6e (2026-08-20): at the old value, uncovered readiness rows measured
     4.02:1 on --surface, under the 4.5:1 AA floor. "Faint" must still be readable. */
  --faint: #656e61;
  --border: #c7cdc1;
  --border-soft: #dce1d7;
  --action-bg: #365f08;
  --action-fg: #ffffff;
  --action-hover: #294d00;
  --accent-soft: #e3f1d4;
  --focus: #2d6500;
  --danger: #9b3026;
  /* Answer-review verdicts. Text tones are chosen to clear 4.5:1 on their own tint. */
  --verdict-correct-bg: #e7f2dc;
  --verdict-correct-border: #4b7d15;
  --verdict-correct-text: #2f5309;
  --verdict-wrong-bg: #f7e2df;
  --verdict-wrong-border: #a63f33;
  --verdict-wrong-text: #7d2b21;
  --shadow: 0 16px 40px rgb(15 18 16 / 7%);
  --radius: 5px;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}

html[data-theme="dark"] {
  --canvas: #0b0d0a;
  --surface: #0f120e;
  --surface-strong: #151914;
  --text: #e5e9e1;
  --muted: #a8b0a3;
  --faint: #899383;
  --border: #384035;
  --border-soft: #262c24;
  --action-bg: #9aff40;
  --action-fg: #0b0d0a;
  --action-hover: #b3ff71;
  --accent-soft: #1a2b12;
  --focus: #b6ff76;
  --danger: #ff8a80;
  --verdict-correct-bg: #16250f;
  --verdict-correct-border: #6fbb2e;
  --verdict-correct-text: #b7f08a;
  --verdict-wrong-bg: #2b1512;
  --verdict-wrong-border: #d9695a;
  --verdict-wrong-text: #ffb3aa;
  --shadow: 0 18px 46px rgb(0 0 0 / 28%);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --canvas: #0b0d0a;
    --surface: #0f120e;
    --surface-strong: #151914;
    --text: #e5e9e1;
    --muted: #a8b0a3;
    --faint: #899383;
    --border: #384035;
    --border-soft: #262c24;
    --action-bg: #9aff40;
    --action-fg: #0b0d0a;
    --action-hover: #b3ff71;
    --accent-soft: #1a2b12;
    --focus: #b6ff76;
    --danger: #ff8a80;
  --verdict-correct-bg: #16250f;
  --verdict-correct-border: #6fbb2e;
  --verdict-correct-text: #b7f08a;
  --verdict-wrong-bg: #2b1512;
  --verdict-wrong-border: #d9695a;
  --verdict-wrong-text: #ffb3aa;
    --shadow: 0 18px 46px rgb(0 0 0 / 28%);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html {
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.6;
}

body {
  display: flex;
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  flex-direction: column;
  background:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px),
    var(--canvas);
  background-size: 56px 56px;
  background-position: -1px -1px;
}

a { color: inherit; }
button, input { font: inherit; }
h1, h2, h3, p { margin-block-start: 0; }
h1, h2, h3 { line-height: 1.22; letter-spacing: -.035em; }
h1 { font-size: clamp(2rem, 5vw, 4.35rem); }
h2 { font-size: clamp(1.35rem, 2vw, 2rem); }
h3 { font-size: 1.2rem; }

.shell {
  width: min(100% - 64px, 1160px);
  margin-inline: auto;
}

.site-header,
.site-footer {
  border-block: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.site-header { border-block-start: 0; }

.header-row {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  letter-spacing: -.03em;
  text-decoration: none;
}

.brand-mark {
  position: relative;
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--text);
  border-radius: 3px;
  background: var(--text);
  color: var(--canvas);
  font-size: .68rem;
  letter-spacing: -.08em;
}

.header-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.header-tools p { margin: 0; }

.catalog-status,
.status-pill {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 7px;
  padding-inline: 9px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.catalog-status::before,
.status-pill::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--action-bg);
  content: "";
}

.theme-control {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface-strong);
}

.theme-control button {
  min-width: 64px;
  min-height: 44px;
  padding-inline: 10px;
  border: 0;
  border-inline-end: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: .78rem;
}

.theme-control button:last-child { border-inline-end: 0; }
.theme-control button[aria-pressed="true"] { background: var(--text); color: var(--canvas); }

.demo-notice {
  border-block-end: 1px solid var(--border);
  background: var(--accent-soft);
}

.demo-notice .shell {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  padding-block: 8px;
  color: var(--text);
  font-size: .78rem;
}

.demo-notice strong {
  flex: 0 0 auto;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.landing,
.error-page,
.question-page {
  display: grid;
  flex: 1;
  gap: 48px;
  padding-block: 72px 88px;
}

.hero {
  display: grid;
  max-width: none;
  align-items: end;
  gap: 48px;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, .75fr);
}

.hero-copy { max-width: 760px; }
.hero h1 { max-width: 15ch; margin-block-end: 24px; }
.hero .lede { max-width: 64ch; color: var(--muted); font-size: 1.05rem; }

.eyebrow,
.section-label,
.metric-label {
  color: var(--muted);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.eyebrow { margin-block-end: 16px; }

.hero-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.signal-row {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border-block-end: 1px solid var(--border-soft);
}

.signal-row:last-child { border-block-end: 0; }
.signal-value { margin: 0; font-weight: 700; text-align: end; }
.signal-value.ready { color: var(--action-bg); }

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-block-end: 18px;
}

.section-heading h2 { margin: 0; }
.section-heading p { margin: 0; color: var(--muted); }

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.exam-card,
.resume-card { padding: 0; overflow: hidden; }

.card-band {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 22px;
  border-block-end: 1px solid var(--border);
  background: var(--surface-strong);
}

.card-band .eyebrow { margin: 0; }
.exam-notice {
  margin: 8px 0 0;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.exam-notice::before { content: "⏳ "; }
/* Landing value propositions — responsive grid, no fixed heights (content sets them). */
.value { margin-block-start: 8px; }
.value-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .value-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.value-item {
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, currentColor 4%, transparent);
}
.value-item h3 { margin: 0 0 8px; font-size: 1rem; }
.value-item p { margin: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.5; }

/* Right-rail ad layout (#118): content + sticky ad rail on desktop, stacked on mobile. */
.question-page { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
.question-content { min-width: 0; }
.ad-rail { min-width: 0; }
.ad-rail .adsbygoogle { display: block; min-height: 250px; }
@media (min-width: 1024px) {
  .question-page { grid-template-columns: minmax(0, 1fr) 300px; }
  .ad-rail { position: sticky; top: 24px; }
}
.card-band .muted { margin: 0; font-size: .8rem; }

.case-study-ref {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.case-study-ref a { color: var(--action-bg); }

.provenance-ref {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.provenance-ref.generated { color: #8a6d1a; }

/* AI-generated practice questions carry a light eggshell card so generated
   content is visually distinct from actual reference questions. */
/* THE SYSTEMIC FIX (2026-08-20). This card pins a LIGHT eggshell background in BOTH themes, but
   every descendant resolves theme variables — --surface-strong, --border, --muted, --verdict-*.
   In dark mode those go dark, so the answer-review options, source links, rationale panels and
   hint rendered dark-on-cream: unreadable. Patching children one at a time is whack-a-mole (the
   button was fixed that way and the option review was still broken one click deeper).
   A subtree that pins its own background must pin its own PALETTE. Re-declaring the light values
   here fixes every current child and every future one. */
.question-card-generated {
  background: #fdf6e3;
  color: #1a1a1a;
  --surface: #fdf6e3;
  --surface-strong: #fffdf6;
  --canvas: #f5ebcd;
  --text: #1a1a1a;
  --muted: #5c5330;
  --faint: #6b6240;
  --border: #d9c98f;
  --border-soft: #e8dcb4;
  --accent-soft: #eef3e0;
  --danger: #9b3026;
  --verdict-correct-bg: #e7f2dc;
  --verdict-correct-border: #4b7d15;
  --verdict-correct-text: #2f5309;
  --verdict-wrong-bg: #f7e2df;
  --verdict-wrong-border: #a63f33;
  --verdict-wrong-text: #7d2b21;
  color-scheme: light;
}
.question-card-generated .card-band { background: #f5ebcd; border-block-end-color: #e3d5a8; }
.question-card-generated .card-band .muted,
.question-card-generated .card-band .section-label { color: #6b5a1e; }
.question-card-generated h2,
.question-card-generated legend,
.question-card-generated .status-text,
.question-card-generated strong { color: #1a1a1a; }
/* This card pins its own light background in BOTH themes, so it must pin its own control
   colours too. Without this, a secondary button inside it inherited the dark theme's light
   foreground — near-white text on the eggshell card, measured at 1.14:1 and effectively
   invisible (found by the contrast sweep, 2026-08-20). Buttons are interactive, so this is a
   WCAG failure, not a cosmetic one. */
.question-card-generated .button-secondary,
.question-card-generated .button-secondary:link,
.question-card-generated .button-secondary:visited {
  color: #1a1a1a;
  border-color: #b9a86a;
  background: transparent;
}
.question-card-generated .button-secondary:hover,
.question-card-generated .button-secondary:focus-visible {
  color: #1a1a1a;
  background: #f5ebcd;
  border-color: #8a6d1a;
}
.question-card-generated p,
.question-card-generated li { color: #3d3524; }

.exam-main,
.resume-main {
  display: grid;
  align-items: end;
  gap: 32px;
  padding: 30px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.exam-main h3,
.resume-main h2 { margin-block-end: 12px; }
.exam-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); }
.exam-facts p { margin: 0; }
.card-actions { display: grid; justify-items: end; gap: 10px; }
.card-actions form, .card-actions p { margin: 0; }
.resume-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 10px; }

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 9px 17px;
  border: 1px solid var(--action-bg);
  border-radius: 3px;
  background: var(--action-bg);
  color: var(--action-fg);
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
}

.button:hover { background: var(--action-hover); border-color: var(--action-hover); }
.button-secondary { background: transparent; color: var(--text); border-color: var(--border); }
.button-secondary:hover { background: var(--surface-strong); border-color: var(--text); }

.button:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  z-index: 5;
  inset-block-start: -100px;
  inset-inline-start: 16px;
  padding: 8px 12px;
  border: 1px solid var(--text);
  background: var(--surface-strong);
}

.skip-link:focus { inset-block-start: 8px; }
.muted, .coming-later { color: var(--muted); }
.coming-later, .mock-exam-note { font-size: .82rem; }

.how ol {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  counter-reset: steps;
}

.how li {
  display: grid;
  min-height: 108px;
  align-content: space-between;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  counter-increment: steps;
}

.how li::before {
  color: var(--action-bg);
  content: "0" counter(steps);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
}

progress {
  inline-size: min(100%, 520px);
  block-size: 6px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: var(--border-soft);
}

progress::-webkit-progress-bar { background: var(--border-soft); }
progress::-webkit-progress-value { background: var(--action-bg); }
progress::-moz-progress-bar { background: var(--action-bg); }

.practice-context {
  color: var(--muted);
  font-size: .82rem;
}

.practice-context a { text-underline-offset: 4px; }

.question-page { gap: 28px; }
.question-header { max-width: 900px; }
.question-header h1 { margin-block-end: 22px; font-size: clamp(1.8rem, 4vw, 3rem); }
.question-progress { display: flex; align-items: center; gap: 14px; }
.question-progress span { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.question-card { width: min(100%, 900px); overflow: hidden; }
.question-body { padding: clamp(22px, 4vw, 40px); }
/* Question stems are multi-sentence prose, not headlines. 38ch capped them at ~38
   characters in a monospace face, wrapping them to roughly 60% of the card while the
   explanation below ran full width. 68ch sits inside the 45-75 character readability
   measure and matches the body copy it sits above. */
.question-card h2 { max-width: 68ch; margin-block-end: 26px; font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.45; }
.question-card fieldset { display: grid; gap: 10px; margin: 0 0 26px; padding: 0; border: 0; }
.question-card legend { margin-block-end: 12px; font-weight: 700; }
.selection-help { color: var(--muted); }

.option {
  display: grid;
  min-height: 58px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface-strong);
  cursor: pointer;
  gap: 12px;
  grid-template-columns: 20px 30px minmax(0, 1fr);
}

.option:hover { border-color: var(--muted); }
.option:has(input:checked) { border: 2px solid var(--focus); padding: 13px; background: var(--accent-soft); }
.option input { width: 20px; height: 20px; margin: 2px 0 0; }
.option-key { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--border); border-radius: 3px; font-weight: 700; line-height: 1; }
.option-copy { padding-block-start: 2px; }

/* Commit-before-reveal (issue #90, ADR-0034). Deliberately quiet: it sits between the
   options and Submit as one more optional field, not as a gate. Nothing here is
   required, marked, or styled as an error state when left empty. */
.commit-prompt { display: grid; max-width: 68ch; margin-block-end: 26px; gap: 8px; }
.commit-label { font-weight: 700; }
.commit-help { margin: 0; color: var(--muted); font-size: .92rem; }
.commit-prompt textarea {
  width: 100%;
  min-height: 84px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface-strong);
  color: var(--text);
  font: inherit;
  resize: vertical;
}

/* The juxtaposition: the learner's own words set against the decision frame that
   actually applied. Two panels rather than two paragraphs, so the comparison is
   readable at a glance and still stacks cleanly at 390px. */
.rationale-juxtaposition { display: grid; gap: 12px; margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.rationale-juxtaposition > * { margin: 0; padding: 12px 14px; border-radius: 3px; }
.rationale-juxtaposition p { margin: 0; }
.learner-rationale { border-inline-start: 3px solid var(--border); background: color-mix(in srgb, var(--muted) 7%, transparent); }
.learner-rationale p:last-child { white-space: pre-wrap; overflow-wrap: anywhere; }
.actual-rationale { border-inline-start: 3px solid var(--action-bg); background: var(--accent-soft); }
.rationale-juxtaposition .rationale-label {
  margin-block-end: 6px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.feedback { display: grid; gap: 14px; }
.feedback > * { margin: 0; }
.status-text {
  display: inline-flex;
  width: fit-content;
  min-height: 32px;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-inline-start: 3px solid currentColor;
  background: var(--accent-soft);
  color: var(--action-bg);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.status-text.incorrect { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.status-text.revealed { background: var(--surface-strong); color: var(--muted); }
.status-text::before { content: "●"; font-size: .65rem; }
.source-list { display: grid; margin: 6px 0 4px; padding: 0; gap: 8px; list-style: none; }
.source-list a { display: block; padding: 10px 12px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface-strong); color: var(--muted); overflow-wrap: anywhere; text-underline-offset: 4px; }

/* What the cited page establishes about this question, in the pack author's own words.
   Quiet by design: it is study material sitting under its citation, never a warning.
   Most items have no summary and then nothing here renders at all, so the neutral
   colours and the plain rule are what keep "absent" and "present" both look ordinary. */
.source-summary {
  max-width: 78ch;
  margin: 6px 0 0;
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--border-soft);
  color: var(--text);
  font-size: .92rem;
  line-height: 1.6;
}

.validation-error {
  padding: 10px 12px;
  border-inline-start: 4px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
  font-weight: 700;
}

.error-notice { max-width: 820px; padding: clamp(24px, 5vw, 48px); }
.error-notice h1 { max-width: 18ch; }
.error-notice form { display: grid; max-width: 520px; gap: 14px; margin-block-start: 24px; }
.error-notice input[type="password"] {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-strong);
  color: var(--text);
}

summary { display: flex; min-height: 44px; align-items: center; cursor: pointer; }

.site-footer {
  margin-block-start: auto;
  padding-block: 24px;
  color: var(--muted);
  font-size: .78rem;
}

.footer-row { display: flex; justify-content: space-between; gap: 24px; }

.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.lede { color: var(--muted); font-size: 1.05rem; }

.readiness-page { display: grid; flex: 1; gap: 40px; padding-block: 56px 88px; }
.readiness-header { max-width: 760px; }
.readiness-header h1 { margin-block-end: 14px; font-size: clamp(1.9rem, 4vw, 3.2rem); }
.readiness-page section { display: grid; gap: 14px; }

.evidence-state-card { padding: clamp(20px, 3vw, 28px); border-inline-start: 4px solid var(--border); }
.evidence-state-card.evidence-state-insufficient-evidence { border-inline-start-color: var(--faint); }
.evidence-state-card.evidence-state-building-coverage { border-inline-start-color: var(--action-bg); }
.evidence-state-card.evidence-state-consistent-practice-evidence { border-inline-start-color: var(--focus); }
.evidence-state-body { display: grid; gap: 10px; }
.evidence-state-label { margin: 0; font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; }
.evidence-state-body p:last-child { margin: 0; color: var(--muted); max-width: 72ch; }

.limitations-text { max-width: 76ch; color: var(--muted); font-size: .88rem; }

.currentness-card { padding: 0; }
.signal-value.warn { color: var(--danger); }
.currentness-note { margin: 0; }

.status-pill.stale-pill { color: var(--danger); border-color: var(--danger); margin-inline-start: 8px; }
.status-pill.stale-pill::before { background: var(--danger); }

.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }

.objective-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.objective-table caption { padding: 12px 16px; color: var(--muted); font-size: .8rem; text-align: start; caption-side: top; }
.objective-table th, .objective-table td { padding: 10px 16px; border-block-end: 1px solid var(--border-soft); text-align: start; white-space: nowrap; }
.objective-table th { background: var(--surface-strong); font-size: .73rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.objective-table tbody tr:last-child td { border-block-end: 0; }
.objective-table tr.objective-row-uncovered td { color: var(--faint); }

.mode-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mode-card { padding: 0; overflow: hidden; }
.mode-card-body { padding: 18px 20px; }
.mode-card-body dl, .mock-card dl { display: grid; margin: 0; gap: 8px; }
.mode-card-body dl div, .mock-card dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mode-card-body dt, .mock-card dt { color: var(--muted); font-size: .8rem; }
.mode-card-body dd, .mock-card dd { margin: 0; font-weight: 700; text-align: end; }

.mock-card { padding: clamp(18px, 3vw, 24px); }

.focus-list { display: grid; margin: 0; padding: 0; gap: 10px; list-style: none; }
.focus-item { padding: 14px 16px; }
.focus-item p { margin: 0; }
.focus-cta { margin-block-start: 4px; }

.history-list { display: grid; margin: 0; padding: 0; gap: 8px; list-style: none; }
.history-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 16px; font-size: .88rem; }
.history-mode { font-weight: 700; }

/* --- Report card (issue #71) ------------------------------------------------
   Extends the existing card/band system rather than introducing a second look.
   The one new device is the answer ledger: 60 ordinal chips in set order, which
   echoes the graph-paper canvas and encodes real information (where in the run
   the answers went wrong), not decoration. */
.report-page { display: grid; flex: 1; gap: 40px; padding-block: 56px 88px; }
.report-header { max-width: 760px; }
.report-header h1 { margin-block-end: 14px; font-size: clamp(1.9rem, 4vw, 3.2rem); }
.report-page section { display: grid; gap: 14px; }

.tally-card { padding: 0; overflow: hidden; }
.tally-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tally { padding: 20px 22px; border-inline-end: 1px solid var(--border-soft); }
.tally:last-child { border-inline-end: 0; }
.tally p { margin: 0; }
.tally-value { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 700; letter-spacing: -.05em; line-height: 1.05; color: var(--action-bg); }
.tally-value.tally-wrong { color: var(--danger); }
.tally-value.tally-revealed { color: var(--text); }
.tally-value.tally-quiet { color: var(--faint); }
.tally-note { margin: 0; padding: 14px 22px; border-block-start: 1px solid var(--border-soft); background: var(--surface-strong); color: var(--muted); font-size: .88rem; }

/* Outcome is carried by border STYLE as well as colour (solid fill / solid rule /
   double rule / dashed rule), so the ledger stays readable without colour vision. */
.ledger-legend { display: flex; flex-wrap: wrap; margin: 0; padding: 0; gap: 6px 18px; list-style: none; color: var(--muted); font-size: .8rem; }
.ledger-legend li { display: inline-flex; align-items: center; gap: 7px; }
.ledger-key { width: 15px; height: 15px; border: 3px solid var(--border); border-radius: 2px; }
.ledger-key.ledger-correct, .ledger-cell.ledger-correct { border-color: var(--action-bg); background: var(--action-bg); color: var(--action-fg); }
.ledger-key.ledger-wrong, .ledger-cell.ledger-wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 18%, var(--surface-strong)); color: var(--danger); }
.ledger-key.ledger-revealed, .ledger-cell.ledger-revealed { border-style: double; border-width: 4px; border-color: var(--faint); background: var(--accent-soft); color: var(--text); }
.ledger-key.ledger-unanswered, .ledger-cell.ledger-unanswered { border-style: dashed; border-color: var(--faint); background: var(--surface-strong); color: var(--faint); }

.ledger { display: grid; margin: 0; padding: 0; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); list-style: none; }
.ledger-cell {
  display: grid;
  min-height: 38px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--surface-strong);
  font-size: .74rem;
  font-weight: 700;
  text-decoration: none;
}

.ledger-cell:hover { border-color: var(--text); }
.objective-table tr.objective-row-study td { font-weight: 700; }
.objective-table tr.objective-row-study td:first-child { box-shadow: inset 3px 0 0 var(--danger); }

/* A reviewed question borrows the question page's geometry deliberately: the learner
   has just come from there, and one measure for the whole column keeps the stem and the
   explanation on the same right edge instead of the stem wrapping half as wide. */
.study-list { display: grid; width: min(100%, 900px); margin: 0; padding: 0; gap: 16px; list-style: none; }
.study-item { padding: 0; overflow: hidden; }
.study-item .card-band { align-items: center; }
.study-item .status-text { margin: 0; }
.study-body { display: grid; gap: 12px; padding: clamp(22px, 4vw, 40px); }
.study-body > * { margin: 0; }
.study-body h3 { font-size: clamp(1.02rem, 2.4vw, 1.2rem); line-height: 1.45; }
.answer-line { color: var(--muted); }
.rebuttal { padding-inline-start: 12px; border-inline-start: 2px solid var(--border); color: var(--muted); }

.next-card { padding: 22px; display: grid; gap: 14px; }
.next-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.next-actions form { margin: 0; }
.report-identity { margin: 0; font-size: .76rem; overflow-wrap: anywhere; }

@media (max-width: 820px) {
  .hero { align-items: stretch; gap: 28px; grid-template-columns: 1fr; }
  .hero-panel { display: grid; grid-template-columns: repeat(3, 1fr); }
  .signal-row { min-height: 76px; align-items: flex-start; flex-direction: column; justify-content: center; border-block-end: 0; border-inline-end: 1px solid var(--border-soft); }
  .signal-row:last-child { border-inline-end: 0; }
  .signal-value { text-align: start; }
  .exam-main, .resume-main { align-items: stretch; grid-template-columns: 1fr; }
  .card-actions { justify-items: stretch; }
  .resume-actions { flex-direction: column; align-items: stretch; }
}

@media (max-width: 680px) {
  body { background-size: 40px 40px; }
  .shell { width: min(100% - 28px, 1160px); }
  .header-row { min-height: auto; align-items: stretch; flex-direction: column; padding-block: 12px; }
  .header-tools { align-items: stretch; flex-direction: column; gap: 8px; }
  .catalog-status { justify-content: center; }
  .theme-control { width: 100%; }
  .theme-control button { flex: 1; }
  .landing, .error-page, .question-page { gap: 32px; padding-block: 42px 56px; }
  .hero h1 { max-width: none; }
  .hero-panel { grid-template-columns: 1fr; }
  .signal-row { min-height: 58px; align-items: center; flex-direction: row; justify-content: space-between; border-inline-end: 0; border-block-end: 1px solid var(--border-soft); }
  .signal-row:last-child { border-block-end: 0; }
  .signal-value { text-align: end; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .card-band { align-items: flex-start; flex-direction: column; gap: 4px; padding-block: 12px; }
  .exam-main, .resume-main { padding: 22px; }
  .button { width: 100%; }
  .how ol { grid-template-columns: 1fr; }
  .how li { min-height: 82px; }
  .question-progress { align-items: flex-start; flex-direction: column; gap: 8px; }
  .question-progress progress { width: 100%; }
  .option { grid-template-columns: 20px 28px minmax(0, 1fr); padding: 12px; }
  .option:has(input:checked) { padding: 11px; }
  .footer-row { flex-direction: column; gap: 8px; }
  .readiness-page { gap: 28px; padding-block: 32px 56px; }
  .mode-grid { grid-template-columns: 1fr; }
  .focus-cta .button { width: 100%; }
  .history-item { flex-direction: column; align-items: flex-start; gap: 4px; }
  .report-page { gap: 28px; padding-block: 32px 56px; }
  .tally-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tally { border-block-end: 1px solid var(--border-soft); }
  .tally:nth-child(2n) { border-inline-end: 0; }
  .tally:nth-last-child(-n+2) { border-block-end: 0; }
  .ledger { grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); }
  /* The stacked card-band keeps its left edge; only the desktop row is centred. */
  .study-item .card-band { align-items: flex-start; }
  .next-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Issue #55: a synthetic pack must never be mistaken for study material. */
.exam-synthetic-warning {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--warning-border, #b45309);
  background: var(--warning-surface, rgba(180, 83, 9, 0.08));
  color: var(--warning-text, #7c2d12);
  font-size: 0.9rem;
  line-height: 1.4;
}

@media (prefers-color-scheme: dark) {
  .exam-synthetic-warning {
    border-color: #d97706;
    background: rgba(217, 119, 6, 0.12);
    color: #fcd34d;
  }
}

.exam-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

/* Issue #163 / ADR-0048: the chooser tile's honest evidence chip. Reuses the same
   evidence-state colour language as .evidence-state-card / .scenario-state-label on
   purpose — a learner meets the same three states everywhere, so they read the same. */
.evidence-chip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 6px 0 0; font-size: .85rem; }
.evidence-chip-label {
  display: inline-flex;
  padding: 3px 10px;
  border-inline-start: 3px solid var(--faint);
  background: var(--surface-strong);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.evidence-chip-building-coverage .evidence-chip-label { border-inline-start-color: var(--action-bg); background: var(--accent-soft); }
.evidence-chip-consistent-practice-evidence .evidence-chip-label { border-inline-start-color: var(--focus); background: var(--accent-soft); }

/* Issue #86: a pack excluded from publication says so on its own tile. */
.exam-local-only {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  border: 1px dashed var(--muted-border, #64748b);
  background: rgba(100, 116, 139, 0.08);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* --- Scenario study mode (issue #91) ----------------------------------------
   Reuses the readiness page's geometry and the evidence-state colour language on
   purpose: a learner meets the same three states here and on the dashboard, so
   they must look the same. Only the reading column is new — prose gets a measure,
   because the whole point of this surface is that somebody actually reads it. */
.scenario-page { display: grid; flex: 1; gap: 40px; padding-block: 56px 88px; }
.scenario-header { max-width: 760px; }
.scenario-header h1 { margin-block-end: 14px; font-size: clamp(1.9rem, 4vw, 3.2rem); }
.scenario-page section { display: grid; gap: 14px; }
.scenario-sitting-note { max-width: 68ch; margin-block-start: 16px; padding-inline-start: 14px; border-inline-start: 3px solid var(--action-bg); color: var(--text); }

.scenario-list { display: grid; margin: 0; padding: 0; gap: 16px; list-style: none; }
.scenario-item { padding: 0; overflow: hidden; }
.scenario-item-body { display: grid; gap: 10px; padding: 20px 22px 0; }
.scenario-item-body > * { margin: 0; }
.scenario-item-body h3 { font-size: clamp(1.1rem, 2.4vw, 1.35rem); }
.scenario-item-body h3 a { color: inherit; text-underline-offset: 4px; }
.scenario-overview { max-width: 78ch; color: var(--muted); }
.scenario-item-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 10px; padding: 16px 22px 20px; }
.scenario-item-actions form { margin: 0; }

.scenario-state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: .9rem; }
.scenario-state-label {
  display: inline-flex;
  padding: 3px 10px;
  border-inline-start: 3px solid var(--faint);
  background: var(--surface-strong);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.scenario-state-building-coverage .scenario-state-label { border-inline-start-color: var(--action-bg); background: var(--accent-soft); }
.scenario-state-consistent-practice-evidence .scenario-state-label { border-inline-start-color: var(--focus); background: var(--accent-soft); }

.scenario-drill-card { display: grid; padding: 0; overflow: hidden; }
.scenario-drill-body { display: grid; gap: 12px; padding: 22px 24px; }
.scenario-drill-body > p { margin: 0; max-width: 76ch; }
.scenario-coverage { display: grid; margin: 4px 0 0; gap: 8px; }
.scenario-coverage div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.scenario-coverage dt { color: var(--muted); font-size: .8rem; }
.scenario-coverage dd { margin: 0; font-weight: 700; text-align: end; }
.scenario-drill-actions { display: grid; gap: 10px; padding: 18px 24px; border-block-start: 1px solid var(--border-soft); background: var(--surface-strong); }
.scenario-drill-actions form, .scenario-drill-actions p { margin: 0; }
.scenario-drill-note { font-size: .84rem; }

.scenario-section { padding: 0; overflow: hidden; }
.scenario-section-body { display: grid; gap: 12px; padding: 20px 24px; }
.scenario-section-body > * { margin: 0; max-width: 78ch; }
.scenario-section-body ul { padding-inline-start: 20px; display: grid; gap: 6px; }
.scenario-reading-note { padding: 12px 14px; border-inline-start: 3px solid var(--focus); background: var(--accent-soft); font-size: .9rem; }
.scenario-source { max-width: 78ch; font-size: .88rem; }

@media (max-width: 680px) {
  .scenario-page { gap: 28px; padding-block: 32px 56px; }
  .scenario-item-actions { justify-content: stretch; }
  .scenario-item-actions .button { width: 100%; }
  .scenario-coverage div { align-items: flex-start; flex-direction: column; gap: 2px; }
  .scenario-coverage dd { text-align: start; }
}

/* Answer review: the options are re-shown after answering, because "Correct answer: B"
   is meaningless once the list is gone. Colour is a reinforcement, never the only signal —
   each marked row also carries a border weight and the word "Correct" or "incorrect", so
   the meaning holds without colour vision. Unselected wrong options stay neutral. */
.option-review { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }

.option-review-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-inline-start: 3px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
}

.option-review-item.is-correct {
  border-color: var(--verdict-correct-border);
  border-inline-start-width: 5px;
  background: var(--verdict-correct-bg);
}

.option-review-item.is-chosen-wrong {
  border-color: var(--verdict-wrong-border);
  border-inline-start-width: 5px;
  background: var(--verdict-wrong-bg);
}

.option-review-item .option-key { font-weight: 700; }
.option-review-item .option-copy { min-width: 0; }

.option-verdict {
  grid-column: 2;
  color: var(--muted);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.option-review-item.is-correct .option-verdict { color: var(--verdict-correct-text); }
.option-review-item.is-chosen-wrong .option-verdict { color: var(--verdict-wrong-text); }

@media (max-width: 680px) {
  .option-review-item { grid-template-columns: 1fr; }
  .option-verdict { grid-column: 1; }
}

/* Progressive hint → answer reveal, untimed practice (ADR-0036) */
.hint-panel {
  margin: 1rem 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.hint-panel > summary {
  cursor: pointer;
  padding: 0.6rem 0.8rem;
  font-weight: 600;
  color: var(--text);
  list-style: none;
}
.hint-panel > summary::-webkit-details-marker { display: none; }
.hint-panel > summary::before { content: "› "; color: var(--muted); }
.hint-panel[open] > summary::before { content: "⌄ "; }
.hint-panel > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hint-body {
  padding: 0 0.8rem 0.8rem;
  border-top: 1px solid var(--border-soft);
  color: var(--text);
}
.hint-body p { margin: 0.6rem 0; }
.hint-sources { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.hint-sources a { color: var(--muted); word-break: break-word; }
.reveal-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
#reveal-toggle { margin-top: 1rem; }
.next-gate { display: inline-block; margin-top: 1.2rem; }
.next-gate[aria-disabled="true"] { opacity: 0.45; pointer-events: none; cursor: not-allowed; }
/* `.button` sets display, which overrides the UA `[hidden]` rule; restore hiding for the
   JS-toggled controls (Submit on single-select, the raw assist button, and — without
   JavaScript — the reveal toggle and gated Next). */
.button[hidden] { display: none; }
@media (max-width: 680px) {
  .reveal-actions { flex-direction: column; }
  .reveal-actions .button { width: 100%; }
}

/* --- Timed Mock Exam (REQ-P5/P6/P7, ADR-0049) ------------------------------------- */

.status-text.quiet { background: var(--surface-strong); color: var(--faint); }

.mock-item-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 16px; }
.mock-clear-form { margin-block-start: 8px; }
.mock-pager { display: flex; gap: 10px; margin-block: 24px; }

.mock-navigator { margin-block-start: 8px; }
.mock-countdown { margin: 0; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--action-bg); }

/* The navigator grid deliberately reuses the report card's `.ledger` geometry — same
   jump-grid idiom, a learner has already seen it once by the time a Mock exists. */
.ledger-key.ledger-answered, .ledger-cell.ledger-answered { border-color: var(--action-bg); background: var(--action-bg); color: var(--action-fg); }
.ledger-cell.ledger-flagged { box-shadow: inset 0 0 0 2px var(--danger); }
.ledger-key.ledger-flagged { border-color: var(--danger); }
.ledger-cell.ledger-deferred { border-style: dotted; border-width: 3px; }
.ledger-key.ledger-deferred { border-style: dotted; }
.ledger-cell.ledger-current { outline: 3px solid var(--focus); outline-offset: 2px; }

.mock-submit { display: grid; gap: 12px; padding: clamp(18px, 3vw, 24px); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }

.domain-filter { display: flex; align-items: center; gap: 10px; margin-block-end: 4px; }
.domain-filter select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface-strong); color: var(--text); }