/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
  --bg: #f4f1ea;
  --surface: #fffdf8;
  --surface-alt: #f0e7d8;
  --ink: #1e1a16;
  --muted: #655d53;
  --accent: #0f766e;
  --accent-strong: #115e59;
  --border: #dccfb8;
  --good: #1f7a52;
  --bad: #9b2c2c;
  --pass-bg: rgba(31,122,82,0.08);
  --fail-bg: rgba(155,44,44,0.07);
  --shadow: 0 14px 36px rgba(53,41,23,.12);
  --radius: 20px;
  --radius-sm: 12px;
}
[data-theme="dark"] {
  --bg: #1b1814;
  --surface: #252018;
  --surface-alt: #2e271e;
  --ink: #f2ede4;
  --muted: #9e9080;
  --accent: #14b8a6;
  --accent-strong: #2dd4bf;
  --border: #3c342a;
  --good: #22c55e;
  --bad: #f87171;
  --pass-bg: rgba(34,197,94,.08);
  --fail-bg: rgba(248,113,113,.07);
  --shadow: 0 14px 36px rgba(0,0,0,.4);
}
[data-theme="dark"] body {
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.07), transparent 26%),
    radial-gradient(circle at left 20%, rgba(120,80,20,.10), transparent 20%),
    var(--bg);
}
[data-theme="dark"] .site-header { background: rgba(22,19,15,.9); border-bottom-color: rgba(60,52,42,.8); }
[data-theme="dark"] .panel       { background: rgba(37,32,24,.92); }
[data-theme="dark"] .option-card,
[data-theme="dark"] .arrange-item,
[data-theme="dark"] .match-row   { background: var(--surface); }

/* ── Reset / base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
.hidden { display: none !important; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background:
    radial-gradient(circle at top right, rgba(15,118,110,.12), transparent 26%),
    radial-gradient(circle at left 20%, rgba(199,143,62,.18), transparent 20%),
    var(--bg);
}
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; line-height: 1.15; margin: 0 0 .5rem; }
h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h2 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
h3 { font-size: 1rem; font-weight: 700; }
p  { margin: 0 0 .75rem; }
a  { color: inherit; }

/* ── Layout ────────────────────────────────────────────────────────────── */
.shell { width: min(1100px, calc(100% - 2rem)); margin: 0 auto; }
.page-content { padding: 2rem 0 4rem; }

/* ── Header ────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(10px);
  background: rgba(244,241,234,.88);
  border-bottom: 1px solid rgba(220,207,184,.8);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem 0;
}
.brand { font-family: 'Fraunces', Georgia, serif; font-size: 1.1rem; font-weight: 800; text-decoration: none; }
.top-nav { display: flex; align-items: center; gap: .75rem; }
.top-nav a { text-decoration: none; opacity: .75; transition: opacity .15s; }
.top-nav a:hover { opacity: 1; }
.theme-toggle {
  padding: .3rem .55rem; border-radius: 999px;
  background: var(--surface-alt); border: 1px solid var(--border);
  color: var(--ink); font-size: 1rem; line-height: 1; cursor: pointer;
}

/* ── Panel ─────────────────────────────────────────────────────────────── */
.panel {
  background: rgba(255,253,248,.92);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

/* ── Eyebrow / tags ────────────────────────────────────────────────────── */
.eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 .4rem;
}
.lede { color: var(--muted); max-width: 60ch; }
.muted-text { color: var(--muted); font-style: italic; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-ghost, .btn-submit, .btn-check {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1.1rem; border-radius: 999px;
  font-size: .9rem; font-weight: 600; text-decoration: none;
  cursor: pointer; border: none; transition: background .15s, opacity .15s;
}
.btn-primary  { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-strong); }
.btn-secondary { background: var(--surface-alt); border: 1px solid var(--border); color: var(--ink); }
.btn-secondary:hover { background: var(--border); }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.btn-ghost:hover { background: var(--surface-alt); }
.btn-submit {
  background: var(--accent); color: #fff; padding: .7rem 2rem;
  font-size: 1rem;
}
.btn-submit:hover { background: var(--accent-strong); }
.btn-check {
  background: var(--surface-alt); border: 1px solid var(--border);
  color: var(--muted); font-size: .82rem; padding: .35rem .9rem;
}
.btn-check:hover { background: var(--border); }

/* ── Home page ─────────────────────────────────────────────────────────── */
.home-hero {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem;
}
.hero-stats {
  display: flex; gap: 1rem; flex-shrink: 0;
}
.stat-card {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .9rem 1.2rem; text-align: center; min-width: 80px;
}
.stat-card strong { display: block; font-size: 1.6rem; font-weight: 800; color: var(--accent); }
.stat-card span   { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.lp-section { margin-bottom: 2.5rem; }
.lp-header  { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .9rem; }
.lp-header h2 { margin: 0; }
.lp-count   { font-size: .8rem; color: var(--muted); }
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
.module-card { margin-bottom: 0; }
.module-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .5rem; }
.module-card-title { font-size: 1rem; margin: .2rem 0 0; }
.module-domain-tag { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0; }
.module-card-meta  { font-size: .82rem; color: var(--muted); margin: .25rem 0 .75rem; }
.skill-tag { font-size: .72rem; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; padding: .1rem .45rem; }
.module-card-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.score-badge {
  flex-shrink: 0; font-size: .8rem; font-weight: 700; padding: .25rem .65rem;
  border-radius: 999px; white-space: nowrap;
}
.score-badge.pass  { background: var(--pass-bg); color: var(--good); border: 1px solid var(--good); }
.score-badge.retry { background: var(--fail-bg); color: var(--bad);  border: 1px solid var(--bad); }

.empty-state { text-align: center; padding: 3rem 2rem; }
.empty-state code { background: var(--surface-alt); padding: .15rem .4rem; border-radius: 4px; }

/* ── Quiz page ─────────────────────────────────────────────────────────── */
.quiz-hero {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; padding-bottom: 1.25rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.quiz-hero h1 { margin: .25rem 0 0; }

.q-nav-strip {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem;
}
.q-nav-dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-alt); border: 1px solid var(--border);
  font-size: .78rem; font-weight: 600; cursor: pointer; color: var(--ink);
  transition: background .12s, border-color .12s;
}
.q-nav-dot.active   { background: var(--accent); border-color: var(--accent); color: #fff; }
.q-nav-dot.answered { border-color: var(--accent); color: var(--accent); }

.progress-bar-shell {
  height: 4px; background: var(--surface-alt); border-radius: 999px; margin-bottom: 1.25rem; overflow: hidden;
}
.progress-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s; }

.question-stage { position: relative; }
.q-panel { display: none; }
.q-panel.active { display: block; }

/* Locked panel: answer has been revealed and can no longer be changed. */
.q-panel.q-locked .option-list,
.q-panel.q-locked .arrange-widget,
.q-panel.q-locked .match-widget,
.q-panel.q-locked .syn-widget {
  opacity: .72;
  filter: saturate(.75);
  cursor: not-allowed;
}
.q-panel.q-locked .option-list label,
.q-panel.q-locked .arrange-item,
.q-panel.q-locked .match-select,
.q-panel.q-locked .syn-btn {
  cursor: not-allowed;
}

.q-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .75rem; }
.q-number { font-size: .8rem; font-weight: 700; color: var(--muted); }
.q-type-tag {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--surface-alt); border: 1px solid var(--border);
  padding: .1rem .5rem; border-radius: 999px; color: var(--accent);
}
.q-diff { font-size: .72rem; padding: .1rem .5rem; border-radius: 999px; font-weight: 700; }
.diff-easy   { background: rgba(31,122,82,.1);  color: var(--good); }
.diff-medium { background: rgba(202,138,4,.12); color: #92400e; }
.diff-hard   { background: rgba(155,44,44,.1);  color: var(--bad); }
[data-theme="dark"] .diff-medium { color: #fbbf24; }

.q-stem { font-size: 1.1rem; margin-bottom: 1.1rem; line-height: 1.5; }
.q-hint { font-size: .85rem; color: var(--muted); margin-bottom: .75rem; font-style: italic; }

/* ── Exhibit ───────────────────────────────────────────────────────────── */
.exhibit {
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1.25rem;
}
.exhibit-caption {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin: 0 0 .6rem;
}
.exhibit-table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { padding: .4rem .75rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { font-weight: 700; background: var(--surface); }
.exhibit-image img { max-width: 100%; border-radius: var(--radius-sm); }
.exhibit-code pre {
  margin: 0;
  overflow-x: auto;
  background: #1f1b14;
  color: #f5ecd9;
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid #2a241a;
}
.exhibit-code code {
  font-family: ui-monospace, 'Cascadia Code', 'SFMono-Regular', Consolas, monospace;
  font-size: .85rem;
  background: transparent;
  color: inherit;
  white-space: pre;
}

/* ── Markdown-style inline code and fenced code blocks ─────────────────── */
/* Applied across the project anywhere content is piped through the md_code filter. */
code.md-inline-code {
  font-family: ui-monospace, 'Cascadia Code', 'SFMono-Regular', Consolas, monospace;
  font-size: .85em;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 .3em;
  color: #6b3a07;
  /* Don't force nowrap — let long tokens wrap inside narrow columns,
     and let the badge itself break across lines if it has to. */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: baseline;
  line-height: 1.4;
}
pre.md-code-block {
  margin: .6rem 0;
  padding: .85rem 1rem;
  background: #1f1b14;
  color: #f5ecd9;
  border: 1px solid #2a241a;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: .85rem;
  line-height: 1.45;
}
pre.md-code-block code {
  font-family: ui-monospace, 'Cascadia Code', 'SFMono-Regular', Consolas, monospace;
  background: transparent;
  color: inherit;
  padding: 0;
  border: 0;
  white-space: pre;
}
/* When a code block appears inside an option card or feedback panel, keep it readable. */
.option-row pre.md-code-block,
.q-feedback pre.md-code-block,
.review-explanation pre.md-code-block,
.review-opt-text pre.md-code-block { max-width: 100%; }

/* ── Options (single/multi choice) ─────────────────────────────────────── */
.option-list { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.option-row { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
.option-card {
  padding: .75rem 1rem; border-radius: var(--radius-sm);
  background: var(--surface-alt); border: 1px solid var(--border);
  transition: border-color .12s, background .12s;
}
.option-card:hover { border-color: var(--accent); background: rgba(15,118,110,.05); }
.option-card input { margin-top: .2rem; accent-color: var(--accent); flex-shrink: 0; }
.option-copy { display: flex; align-items: flex-start; gap: .6rem; }
.option-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  font-size: .78rem; font-weight: 700; flex-shrink: 0;
}
/* Letters on single/multi choice options carry no semantic meaning after shuffling,
   so hide them on the quiz UI and the review's option list. Letters used on ordering
   items (arrange + review order lists) still display to identify each step. */
.option-row .option-badge,
.review-opt-row .option-badge,
.arrange-item .arrange-item-key { display: none; }

/* ── Per-option feedback after Check answer ────────────────────────────── */
/* Applied to .option-row labels for single_choice / multiple_choice:       */
/*   opt-correct-selected   → user picked a correct option (green)         */
/*   opt-incorrect-selected → user picked a wrong option (red)             */
/*   opt-correct-missed     → correct option the user did NOT pick (green) */
.option-row.opt-correct-selected,
.option-row.opt-correct-missed {
  border-color: var(--good);
  background: var(--pass-bg);
}
.option-row.opt-incorrect-selected {
  border-color: var(--bad);
  background: var(--fail-bg);
}
.option-mark {
  margin-left: auto;
  flex-shrink: 0;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  padding: .15rem .45rem;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  min-width: 1.6rem;
  text-align: center;
}
.option-mark.correct   { color: var(--good); background: var(--pass-bg); }
.option-mark.incorrect { color: var(--bad);  background: var(--fail-bg); }
.option-mark.missed    { color: var(--good); background: transparent; }

/* ── Ordering / arrange widget ─────────────────────────────────────────── */
.arrange-widget { margin-bottom: 1rem; }
.arrange-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .arrange-layout { grid-template-columns: 1fr; } }
.arrange-col {}
.arrange-heading { font-size: .82rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }
.arrange-bank, .arrange-answer {
  list-style: none; margin: 0; padding: 0;
  min-height: 80px; display: flex; flex-direction: column; gap: .45rem;
}
.arrange-answer {
  border: 2px dashed var(--border); border-radius: var(--radius-sm);
  padding: .6rem; counter-reset: answer-counter;
}
.arrange-item {
  display: flex; align-items: center; gap: .65rem;
  cursor: grab; user-select: none; font-size: .9rem;
  padding: .6rem .85rem;
}
.arrange-item:active { cursor: grabbing; opacity: .8; }
.arrange-item-key {
  font-weight: 700; font-size: .78rem; color: var(--accent);
  min-width: 1.4rem; text-align: center;
}
.arrange-empty-hint { color: var(--muted); font-style: italic; font-size: .85rem; padding: .4rem; text-align: center; }
.arrange-answer-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; }
.arrange-counter { font-size: .78rem; color: var(--muted); }

/* ── Match widget ──────────────────────────────────────────────────────── */
.match-widget { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.match-row {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .65rem 1rem;
}
.match-term { font-weight: 700; min-width: 100px; }
.match-select {
  flex: 1; min-width: 180px;
  padding: .4rem .65rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); font-size: .88rem;
}
.match-select:focus { outline: 2px solid var(--accent); }

/* ── Sequential yes/no ─────────────────────────────────────────────────── */
.syn-widget { margin-bottom: 1rem; }
.syn-stmt {
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1rem; margin-bottom: .6rem;
}
.syn-stmt-num { font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: .35rem; }
.syn-stmt-text { margin: 0 0 .85rem; line-height: 1.5; }
.syn-btn-row { display: flex; gap: .6rem; }
.syn-btn {
  padding: .45rem 1.3rem; border-radius: 999px; font-weight: 700;
  font-size: .9rem; cursor: pointer; border: 2px solid var(--border);
  background: var(--surface); color: var(--ink);
  transition: background .12s, border-color .12s;
}
.syn-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.syn-btn:disabled { opacity: .5; cursor: default; }
.syn-btn.syn-selected { border-color: var(--accent); background: rgba(15,118,110,.12); color: var(--accent); }
.syn-stmt.syn-answered { opacity: .75; }
.syn-done { background: var(--pass-bg); border: 1px solid var(--good); border-radius: var(--radius-sm); padding: .5rem 1rem; color: var(--good); font-weight: 600; font-size: .88rem; }

/* Per-statement feedback (revealed on Check answer / lock) */
.syn-btn.syn-btn-correct {
  border-color: var(--good);
  background: var(--pass-bg);
  color: var(--good);
  opacity: 1;
}
.syn-btn.syn-btn-wrong {
  border-color: var(--bad);
  background: var(--fail-bg);
  color: var(--bad);
  opacity: 1;
  text-decoration: line-through;
}
.syn-stmt-feedback {
  margin-top: .85rem;
  padding: .7rem .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.syn-stmt-result {
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: .4rem;
}
.syn-stmt-result.correct   { color: var(--good); }
.syn-stmt-result.incorrect { color: var(--bad); }
.syn-stmt-explanation { font-size: .9rem; line-height: 1.5; color: var(--ink); }
.syn-stmt-explanation p:first-child { margin-top: 0; }
.syn-stmt-explanation p:last-child  { margin-bottom: 0; }

/* ── Check answer / feedback ───────────────────────────────────────────── */
.q-check-row { margin-top: 1rem; }
.q-feedback  { margin-top: .75rem; padding: .9rem 1rem; border-radius: var(--radius-sm); background: var(--surface-alt); border: 1px solid var(--border); }
.feedback-result { font-weight: 700; font-size: 1rem; margin-bottom: .5rem; }
.feedback-result.correct   { color: var(--good); }
.feedback-result.incorrect { color: var(--bad); }
.feedback-explanation { font-size: .9rem; margin-bottom: .5rem; }
.feedback-ref a { font-size: .82rem; color: var(--accent); text-decoration: underline; }

/* ── Quiz nav bar ──────────────────────────────────────────────────────── */
.quiz-nav-bar {
  display: flex; justify-content: space-between; margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.submit-row { margin-top: 1.5rem; text-align: center; }

/* ── Review page ───────────────────────────────────────────────────────── */
.review-hero {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem;
}
.review-hero.pass   { border-left: 4px solid var(--good); }
.review-hero.retry  { border-left: 4px solid var(--bad); }
.review-score-line  { font-size: 1.1rem; margin: .35rem 0 0; color: var(--muted); }
.review-score-line strong { color: var(--ink); font-size: 1.3rem; }
.review-hero-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-self: flex-start; }

.review-card { margin-bottom: 1.25rem; }
.review-card.correct { border-left: 3px solid var(--good); }
.review-card.incorrect { border-left: 3px solid var(--bad); }

.status-pill {
  font-size: .75rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px;
}
.status-pill.pass { background: var(--pass-bg); color: var(--good); border: 1px solid var(--good); }
.status-pill.fail { background: var(--fail-bg); color: var(--bad);  border: 1px solid var(--bad); }

.review-options { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1rem; }
.review-opt-row {
  display: flex; align-items: flex-start; gap: .75rem; padding: .6rem .9rem;
  border-radius: var(--radius-sm); background: var(--surface-alt);
  border: 1px solid var(--border);
}
.review-opt-row.is-correct { background: var(--pass-bg); border-color: var(--good); }
.review-opt-row.is-wrong   { background: var(--fail-bg); border-color: var(--bad); }
.review-opt-text { flex: 1; }
.review-opt-tags { display: flex; gap: .4rem; flex-shrink: 0; flex-wrap: wrap; }
.tag {
  font-size: .68rem; font-weight: 700; padding: .1rem .45rem;
  border-radius: 999px; text-transform: uppercase; letter-spacing: .05em;
}
.tag.correct  { background: var(--pass-bg); color: var(--good); border: 1px solid var(--good); }
.tag.selected { background: rgba(80,180,255,.12); color: #0284c7; border: 1px solid #0284c7; }
[data-theme="dark"] .tag.selected { color: #7dd3fc; border-color: #7dd3fc; }

.review-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1rem; }
@media (max-width: 600px) { .review-two-col { grid-template-columns: 1fr; } }
.review-order-list { margin: .5rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.review-order-list li {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem;
  border-radius: var(--radius-sm); background: var(--surface-alt); border: 1px solid var(--border); font-size: .9rem;
}
.review-order-list li.is-correct { background: var(--pass-bg); border-color: var(--good); }
.review-order-list li.is-wrong   { background: var(--fail-bg); border-color: var(--bad); }

.review-match-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.review-match-row {
  padding: .65rem 1rem; border-radius: var(--radius-sm);
  background: var(--surface-alt); border: 1px solid var(--border);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.review-match-row.is-correct { background: var(--pass-bg); border-color: var(--good); }
.review-match-row.is-wrong   { background: var(--fail-bg); border-color: var(--bad); }
.review-match-vals { display: flex; gap: 1.5rem; font-size: .88rem; color: var(--muted); flex-wrap: wrap; }
.review-match-vals strong { color: var(--ink); }
.review-match-defns { margin-top: .75rem; padding: .75rem; background: var(--surface); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.review-match-defns h4 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 .45rem; }
.review-match-defns p  { font-size: .88rem; margin: 0 0 .3rem; }

.review-syn-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.review-syn-row {
  padding: .75rem 1rem; border-radius: var(--radius-sm);
  background: var(--surface-alt); border: 1px solid var(--border);
}
.review-syn-row.is-correct { background: var(--pass-bg); border-color: var(--good); }
.review-syn-row.is-wrong   { background: var(--fail-bg); border-color: var(--bad); }
.review-syn-vals { display: flex; gap: 1.5rem; font-size: .88rem; color: var(--muted); margin-top: .4rem; flex-wrap: wrap; }
.review-syn-vals strong { color: var(--ink); }

.review-explanation { margin-bottom: .75rem; }
.review-explanation h3 { margin-bottom: .35rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.review-explanation p  { font-size: .92rem; line-height: 1.65; }
.review-ref a { font-size: .85rem; color: var(--accent); text-decoration: underline; }

/* ── View Exhibit button ────────────────────────────────────────────────── */
.btn-exhibit {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff; font-size: .9rem; font-weight: 600;
  border: none; cursor: pointer; transition: opacity .15s;
  margin: .5rem 0 1rem;
}
.btn-exhibit:hover { opacity: .85; }

/* ── Exhibit modal ───────────────────────────────────────────────────────── */
.exhibit-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
}
.exhibit-modal[hidden] { display: none; }
.exhibit-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.65); backdrop-filter: blur(3px);
}
.exhibit-modal-box {
  position: relative; z-index: 1;
  background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--border); box-shadow: 0 24px 64px rgba(0,0,0,.35);
  max-width: 90vw; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.exhibit-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem; border-bottom: 1px solid var(--border);
  gap: 1rem;
}
.exhibit-modal-caption { font-size: .9rem; font-weight: 600; color: var(--ink); flex: 1; }
.exhibit-modal-close {
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; color: var(--muted); padding: .2rem .4rem;
  border-radius: 4px; transition: background .15s;
}
.exhibit-modal-close:hover { background: var(--surface-alt); }
.exhibit-modal-img {
  display: block; max-width: 100%; max-height: 75vh;
  object-fit: contain; padding: .5rem;
}

/* ── Auth (login / verify) ─────────────────────────────────────────────── */
.auth-card {
  max-width: 28rem; margin: 4rem auto; padding: 2.25rem 2rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 4px 24px rgba(0,0,0,.04);
}
.auth-title { font-family: 'Fraunces', serif; margin: 0 0 .35rem; font-size: 1.7rem; }
.auth-sub   { margin: 0 0 1.4rem; color: var(--text-muted); }
.auth-form  { display: flex; flex-direction: column; gap: .55rem; }
.auth-label { font-size: .85rem; font-weight: 600; color: var(--text-muted); }
.auth-input {
  padding: .65rem .8rem; font-size: 1rem; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface-alt); color: var(--text);
  font-family: inherit;
}
.auth-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.auth-input-code {
  font-family: 'SF Mono', Menlo, monospace; font-size: 1.5rem;
  letter-spacing: .6rem; text-align: center;
}
.auth-submit {
  margin-top: .6rem; padding: .7rem 1rem; font-weight: 600;
  background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  cursor: pointer;
}
.auth-submit:hover { filter: brightness(1.05); }
.auth-resend { margin-top: 1rem; text-align: center; }
.auth-link {
  background: none; border: 0; color: var(--accent); cursor: pointer;
  font: inherit; text-decoration: underline;
}
.auth-alt {
  margin: 1.25rem 0 0; text-align: center; color: var(--text-muted);
  font-size: .9rem;
}
.auth-alt a { color: var(--accent); text-decoration: underline; }
.auth-flash {
  margin: 0 0 1rem; padding: .65rem .85rem; border-radius: 8px;
  font-size: .9rem;
}
.auth-flash-error { background: #fdecea; color: #8a1a13; border: 1px solid #f5b8b1; }
.auth-flash-info  { background: #e9f4ef; color: #1d5b41; border: 1px solid #b5dcc8; }
[data-theme="dark"] .auth-flash-error { background: #3a1a18; color: #f7c8c2; border-color: #6b2a25; }
[data-theme="dark"] .auth-flash-info  { background: #173529; color: #c3e5d4; border-color: #2c5c46; }

/* Header user pill + logout */
.user-pill {
  font-size: .8rem; padding: .25rem .6rem; background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted);
  max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-logout {
  font-size: .8rem; color: var(--text-muted); text-decoration: none;
  border: 1px solid var(--border); padding: .25rem .55rem; border-radius: 999px;
}
.user-logout:hover { color: var(--text); }