/* ═══════════════════════════════════════════════════════════════════════════
   qbank.css — styles for qbank.html (question answering page)
   Linked from: qbank.html at repo root as outlines/assets/qbank.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── RESET & BASE ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
b, strong { font-weight: 700 !important; }
body { margin: 0; background: #fff; color: #1c1c1c; font-family: 'Georgia', serif; }

/* ── COLOR TOKENS ─────────────────────────────────────────────────────────── */
:root {
  --ink:        #1c1c1c;
  --muted:      #6b6b6b;
  --border:     #e2e0d8;
  --accent:     #2a5fa8;
  --correct:    #1a6e40;
  --correct-bg: #eaf7ef;
  --wrong:      #9b2424;
  --wrong-bg:   #fdf0f0;
  --tag:        #e8eef8;
  --tag-ink:    #2a5fa8;
  --qbank:      #6b21a8;
  --qbank-bg:   #f3e8ff;
  --hint-bg:    #fdf8e8;
  --hint-br:    #e8d38a;
  --hint-fg:    #7a5a00;
}

/* ── TOP NAV ─────────────────────────────────────────────────────────────── */
.topnav {
  position: sticky; top: 0; z-index: 100;
  background: #fff; border-bottom: 1.5px solid #e8e8e8;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; height: 48px; gap: 8px;
}
.topnav-left  { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
/* Holds the account chip, which site.js renders into it. `position: relative`
   is what the chip's menu anchors to — without it the menu would position
   itself against the page instead of against the name it drops from. */
.topnav-right {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; flex-shrink: 0; position: relative;
}

.nav-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 6px;
  border: 1.5px solid #ddd; background: #fff; color: #333;
  font-family: 'Georgia', serif; font-size: 12.5px;
  font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap; user-select: none;
}
.nav-btn:hover  { background: #f4f4f4; border-color: #bbb; color: #111; }
.nav-btn.home-btn       { border-color: #2563eb; color: #2563eb; }
.nav-btn.home-btn:hover { background: #eff6ff; }
/* The wordmark, and the way home. These values are index.html's .brand rule,
   copied deliberately and matching outline.css's copy of it: the identity has
   to read the SAME on every page. It is NOT a .nav-btn — no border, no fill,
   no padding box — because boxing it put the site's name in the same visual
   language as the Back and Next controls beside it. */
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; color: inherit; text-decoration: none;
}
.nav-brand:hover { text-decoration: none; }
.nav-brand img {
  width: 30px; height: 30px; border-radius: 8px;
  object-fit: cover; flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(13, 43, 94, 0.04);
}
.nav-brand span {
  font-size: 1.12rem; font-weight: 800; letter-spacing: 0.055em;
  color: #0d2b5e; line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
/* Narrow bars drop the word and keep the mark, exactly as the library's topbar
   does — the icon alone still reads as the way home. */
@media (max-width: 700px) {
  .nav-brand span { display: none; }
}
.nav-btn.disabled       { opacity: 0.3; pointer-events: none; }
.nav-btn.back-btn       { border-color: var(--qbank); color: var(--qbank); }
.nav-btn.back-btn:hover { background: var(--qbank-bg); }

/* ── COOKIE NOTICE ────────────────────────────────────────────────────────── */
#cookie-notice {
  background: #f8f9ff; border-bottom: 1.5px solid #d0d8f0;
  padding: 10px 20px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 12.5px; color: #444; font-family: 'Georgia', serif;
}
#cookie-notice.hidden { display: none; }
#cookie-notice p { margin: 0; flex: 1; }
#cookie-dismiss {
  font-size: 12px; font-weight: 600; padding: 4px 12px;
  border-radius: 6px; border: 1.5px solid #c0c8e0;
  background: #fff; color: #444; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}
#cookie-dismiss:hover { background: #eef2f8; border-color: #9baac8; }

/* ── LOADING STATE ────────────────────────────────────────────────────────── */
#loading {
  max-width: 600px; margin: 80px auto; text-align: center;
  font-size: 15px; color: var(--muted); font-family: 'Georgia', serif;
}
#loading.hidden { display: none; }
#error-msg {
  max-width: 600px; margin: 60px auto; padding: 24px 28px;
  border: 1.5px solid #f5b7b7; border-radius: 8px; background: #fdf0f0;
  color: var(--wrong); font-size: 14px; font-family: 'Georgia', serif;
  line-height: 1.7; white-space: pre-wrap;
}
#error-msg.hidden { display: none; }

/* ── QUESTION LAYOUT ─────────────────────────────────────────────────────── */
#qbank-app { display: none; } /* shown by JS after load */
#qbank-app.ready { display: block; }

.q-layout {
  display: flex; align-items: flex-start;
  max-width: 1560px; margin: 0 auto;
  padding: 18px 22px 60px; gap: 22px;
}

/* ── SIDENAV ─────────────────────────────────────────────────────────────────
   A full question list rather than a strip of numbered squares: each row shows
   its scored state, its number, and the opening words of the stem, so a student
   scanning for "the nitroglycerin one" can find it without paging through. The
   column is its own sticky viewport-height panel — header, scrolling list, and
   a pinned timer footer. */
.q-sidenav {
  flex-shrink: 0; width: 272px;
  display: flex; flex-direction: column;
  position: sticky; top: 60px;
  align-self: flex-start;
  height: calc(100vh - 80px);
  border: 1.5px solid var(--border); border-radius: 10px;
  background: #fcfcfa; overflow: hidden;
}

.qn-head {
  padding: 11px 13px 9px; border-bottom: 1.5px solid var(--border);
  background: #f4f4f0; flex-shrink: 0;
}
.qn-head-title {
  font-size: 13px; font-weight: 700; color: #0d2b5e;
  line-height: 1.35; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.qn-head-count {
  font-size: 11.5px; color: var(--muted); margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.qn-list {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 4px 0;
}

.qn-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
}
.qn-item:hover     { background: #f2f5fc; }
.qn-item.qn-active { background: #eef4ff; border-left-color: var(--accent); }

/* Scored state — a ring by default, filled ✓ / ✗ once the question is answered */
.qn-stat {
  flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid #d5d5cd; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1; color: #fff; font-family: sans-serif;
}
.qn-item.qn-correct .qn-stat { background: var(--correct); border-color: var(--correct); }
.qn-item.qn-correct .qn-stat::before { content: '\2713'; }
.qn-item.qn-wrong   .qn-stat { background: var(--wrong);   border-color: var(--wrong); }
.qn-item.qn-wrong   .qn-stat::before { content: '\2715'; }

.qn-num {
  flex-shrink: 0; min-width: 16px; text-align: right;
  font-size: 12px; font-weight: 700; color: var(--muted); line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.qn-item.qn-active .qn-num { color: var(--accent); }

/* Opening words of the stem, clipped — enough to recognise the question by */
.qn-stem {
  flex: 1; min-width: 0;
  font-size: 12px; line-height: 1.35; color: #444;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qn-item.qn-active .qn-stem { color: var(--ink); font-weight: 600; }

/* Mark flag — hidden unless the student marked the question */
.qn-flag { flex-shrink: 0; font-size: 11px; color: #c99700; display: none; }
.qn-item.qn-marked .qn-flag { display: block; }

/* ── SIDENAV TIMER FOOTER ────────────────────────────────────────────────── */
.qn-timer {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-top: 1.5px solid var(--border);
  background: #f4f4f0;
}
.timer-btn {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid #d5d5cd; background: #fff; color: var(--muted);
  font-size: 12px; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.timer-btn:hover { border-color: var(--accent); color: var(--accent); background: #f0f5ff; }
.timer-btn.paused { border-color: #c99700; color: #c99700; background: #fffaeb; }
.timer-block { line-height: 1.2; }
.timer-val {
  font-size: 14px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; font-family: sans-serif;
}
.qn-timer.paused .timer-val { color: #b0b0a8; }
/* The question clock alone, stopped because the question has been answered
   (the session clock keeps running). Same grey as a manual pause. */
.timer-val.frozen { color: #b0b0a8; }
.timer-lbl {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}

/* ── MAIN QUESTION AREA ──────────────────────────────────────────────────── */
.q-main { flex: 1; min-width: 0; }

/* Prev / Next — live in the top nav bar (.topnav-nav, in the markup)
   rather than a fixed bar of their own, so they're always visible without
   any risk of overlapping .q-sidenav — the topnav is already full-width and
   sits above the two-column layout entirely, not beside it. */
.topnav-nav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.arrow-btn {
  font-size: 12.5px; font-weight: 600;
  padding: 5px 14px; border-radius: 6px;
  border: 1.5px solid var(--border);
  background: #fff; color: var(--ink);
  cursor: pointer; font-family: 'Georgia', serif;
  transition: background 0.1s, border-color 0.1s;
}
.arrow-btn:hover           { background: #f4f4f4; border-color: #bbb; }
.arrow-btn:disabled,
.arrow-btn[disabled]       { opacity: 0.3; pointer-events: none; }

/* Question cards — one visible at a time */
.q-card        { display: none; }
.q-card.active { display: block; }
.q-card {
  background: #fff; border: 1.5px solid var(--border);
  border-radius: 10px; overflow: hidden;
}

.q-header {
  padding: 16px 20px 12px; border-bottom: 1px solid var(--border);
  background: #fafafa; display: flex; align-items: flex-start; gap: 12px;
}
.q-meta { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.q-badge {
  font-size: 11px; font-weight: 600;
  background: var(--tag); color: var(--tag-ink);
  padding: 3px 9px; border-radius: 5px; white-space: nowrap;
}
/* Will-test indicator — hidden until the correct answer is revealed (qbank.js
   syncWillTest). Matches .tag-will in outline.css so the two read as one system. */
.q-willtest {
  display: none;
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; white-space: nowrap;
  background: #dc2626; color: #fff;
  padding: 2px 6px; border-radius: 4px;
}
.q-willtest.visible { display: block; }

/* Coverage indicator — same reveal gate as .q-willtest, and the same teal as
   .tag-nofa in outline.css so a lecture and its questions read as one system. */
.q-nofa {
  display: none;
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; white-space: nowrap;
  background: #0f766e; color: #fff;
  padding: 2px 6px; border-radius: 4px;
}
.q-nofa.visible { display: block; }

/* Provenance badge. Unlike .q-willtest it is visible from the start: knowing a
   question is the professor's own is context for answering it rather than part
   of the answer. Generated questions carry no badge — they are the default, and
   a badge on 10 of every 11 cards is noise. */
.q-inhouse {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; white-space: nowrap;
  padding: 2px 6px; border-radius: 4px;
  background: #0d2b5e; color: #fff;
}

.q-source {
  font-size: 10px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 80px;
}
.q-text { font-size: 14.5px; line-height: 1.65; color: var(--ink); flex: 1; }

/* Stem key underline — revealed after answer */
.stem-key { }
.stem-key.revealed {
  text-decoration: underline;
  text-decoration-color: #c45400;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
  /* Browsers default this to `auto`, which gaps the underline around every
     descender — a "p" or "q" in a key phrase chops the rule into pieces. This
     is a marker-pen highlight rather than typographic underlining, so it has to
     run unbroken through the descenders. The -webkit- line is the older spelling
     Safari used before 15.4. */
  -webkit-text-decoration-skip: none;
  text-decoration-skip-ink: none;
}

/* ── QUESTION TOOL BAR ────────────────────────────────────────────────────
   Info and Notes open a panel below the bar; Mark is a persistent toggle
   the QBank builder can filter on; Calculator opens the shared floating pad. */
.q-tools {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 8px 18px; border-bottom: 1px solid var(--border);
  background: #fff;
}
.qtool {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; font-family: sans-serif;
  padding: 6px 11px; border-radius: 6px;
  border: 1.5px solid transparent; background: none;
  color: var(--muted); cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.qtool:hover { background: #f2f5fc; color: var(--accent); }
.qtool.open  { border-color: var(--accent); color: var(--accent); background: #eef4ff; }
.qtool-right { margin-left: auto; }
.qtool.marked { border-color: #c99700; color: #a67c00; background: #fffaeb; }
/* Per-question Anki copy — only meaningful once the answer is on screen, so it
   rides the same .q-answered flag the card already sets when it is scored. */
.qtool-anki { display: none; }
.q-card.q-answered .qtool-anki { display: inline-flex; }
.qtool-anki.copied { border-color: #2e7d4f; color: #2e7d4f; background: #f0f9f3; }
.qtool-anki.copy-failed { border-color: #b3261e; color: #b3261e; background: #fdf0ef; }
/* Settings → "Anki buttons" off. Overrides the .q-answered rule above, which
   is what would otherwise bring the button back the moment a question scores. */
html[data-anki-ui="off"] .qtool-anki { display: none !important; }
/* Read More — held back on the same terms, and for a stronger reason than the
   Anki button: the section it opens usually states the answer outright. */
.qtool-outline { display: none; }
.q-card.q-answered .qtool-outline { display: inline-flex; }
.qtool-outline.open {
  border-color: var(--qbank); color: var(--qbank); background: var(--qbank-bg);
}
/* Hint — the ONE control in this row that is useful BEFORE the answer is on
   screen, so unlike Read More and Anki it is never held back by .q-answered.
   Amber rather than the row's blue: it is help, and it should be legible as a
   deliberate choice to take help rather than as another neutral tool. */
.qtool-hint.open {
  border-color: var(--hint-br); color: var(--hint-fg); background: var(--hint-bg);
}

/* ── READ MORE — OUTLINE SECTION IN PLACE OF THE CHOICES ─────────────────────
   The card carries the outline box and the choices in the same slot and shows
   exactly one of them. Nothing is torn down to make room, so a scored question
   comes back with its colouring, its opened explanations, and its struck-out
   options intact — .reading is the only thing that changed.

   The stem and the tool bar stay put above, which is what makes this a reading
   pane for THIS question rather than a detour to the outline page: the button
   that opened it is still under your cursor to close it again. */
.read-more { display: none; }
.q-card.reading .read-more { display: block; }
.q-card.reading .choices,
.q-card.reading .multi-hint,
.q-card.reading .multi-row,
.q-card.reading .shared-exp,
.q-card.reading .reveal-row { display: none; }

/* Sized to its content by fitOutlineFrame(), and capped here: past this height
   the frame scrolls on its own so the stem and the tool bar stay on screen
   instead of being pushed off by a long section. */
.rm-body { display: flex; }
.rm-frame {
  flex: 1; width: 100%; border: 0; background: #fff;
  min-height: 160px; max-height: 68vh;
}
.rm-msg {
  padding: 18px; font-family: 'Georgia', serif;
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
}

/* Info / Hint / Notes drawers — one slot, three tenants (see PANELS in
   qbank.js), so opening a second one never stacks height onto the card. */
.q-panel { display: none; padding: 12px 18px; background: #fbfbf8; border-bottom: 1px solid var(--border); }
.q-panel.visible { display: block; }
/* The hint reads as a remark, not as a data table like Info: serif, one line,
   an amber ground so it is unmistakably not the explanation. */
.hint-panel {
  background: var(--hint-bg); border-bottom-color: var(--hint-br);
  display: none; align-items: baseline; gap: 9px;
}
.hint-panel.visible { display: flex; }
.hint-icon { flex-shrink: 0; font-size: 13px; line-height: 1.6; }
.hint-text {
  font-family: 'Georgia', serif; font-size: 13.5px; line-height: 1.6;
  color: var(--hint-fg);
}
.ki-row { font-size: 13px; line-height: 1.7; color: var(--ink); }
.ki-row .ki-lbl {
  display: inline-block; min-width: 92px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted); font-family: sans-serif;
}
.note-area {
  width: 100%; min-height: 90px; resize: vertical;
  padding: 9px 11px; border: 1.5px solid var(--border); border-radius: 7px;
  font-family: 'Georgia', serif; font-size: 13px; line-height: 1.6;
  color: var(--ink); background: #fff; outline: none;
}
.note-area:focus { border-color: var(--accent); }
.note-hint { font-size: 11px; color: var(--muted); font-style: italic; margin-top: 5px; }

/* ── CALCULATOR ──────────────────────────────────────────────────────────── */
#calc-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 200;
  width: 236px; border: 1.5px solid var(--border); border-radius: 10px;
  background: #fff; box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  overflow: hidden; font-family: sans-serif;
}
#calc-panel.hidden { display: none; }
.calc-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; background: #f4f4f0; border-bottom: 1.5px solid var(--border);
}
.calc-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.calc-close {
  border: none; background: none; color: var(--muted);
  font-size: 12px; cursor: pointer; padding: 2px 4px; line-height: 1;
}
.calc-close:hover { color: var(--wrong); }
.calc-display {
  padding: 12px 12px; text-align: right;
  font-size: 24px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.calc-keys {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border); border-top: 1px solid var(--border);
}
.calc-key {
  border: none; background: #fff; color: var(--ink);
  font-size: 15px; font-weight: 600; padding: 12px 0;
  cursor: pointer; transition: background 0.1s;
}
.calc-key:hover   { background: #f0f4fc; }
.calc-key:active  { background: #e2eafa; }
.calc-fn  { background: #f6f6f3; color: var(--muted); font-size: 13px; }
.calc-op  { background: #f6f6f3; color: var(--accent); }
.calc-eq  { background: var(--accent); color: #fff; }
.calc-eq:hover { background: #24528f; }
.calc-zero { grid-column: span 2; }

/* ── CHOICES ─────────────────────────────────────────────────────────────── */
.choices { padding: 10px 18px 4px; user-select: none; }
.choice {
  display: flex; flex-direction: column;
  box-sizing: border-box; width: 100%;
  padding: 6px 10px; margin-bottom: 5px;
  border: 1.5px solid var(--border); border-radius: 7px;
  background: #fff; cursor: pointer; text-align: left;
  font-size: 13.5px; color: var(--ink);
  transition: border-color 0.1s, background 0.1s;
  user-select: none;
}
/* Hover only on unanswered, unlocked, unstruck, uncolored choices */
.choice:hover:not(.reveal-locked):not(.struck):not(.correct):not(.wrong) {
  border-color: var(--accent); background: #f5f8ff;
}
.choice.correct      { border-color: var(--correct); background: var(--correct-bg); }
.choice.wrong        { border-color: var(--wrong);   background: var(--wrong-bg); }
/* No pointer-events lock on revealed choices: selectChoice() already refuses
   a revealed question, and the CSS version also killed the right-click that
   un-strikes an eliminated choice — strike state stays editable after
   Reveal All on purpose. */
.choice.struck       { opacity: 0.45; }
.choice.struck .choice-text { text-decoration: line-through; }

.choice-main { display: flex; align-items: center; gap: 9px; width: 100%; }
.ltr-badge {
  font-size: 11px; font-weight: 600;
  min-width: 22px; height: 22px; border-radius: 5px;
  background: #f0f0f0; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.1s, color 0.1s;
}
.choice.correct .ltr-badge { background: var(--correct); color: #fff; }
.choice.wrong   .ltr-badge { background: var(--wrong);   color: #fff; }
.choice.picked  .ltr-badge { background: var(--accent);  color: #fff; }
.choice-text { flex: 1; line-height: 1.45; }
.strike-btn {
  font-size: 10px; line-height: 1; padding: 2px 5px; border-radius: 4px;
  border: 1px solid #e0e0e0; background: transparent; color: #bbb;
  cursor: pointer; flex-shrink: 0; margin-left: auto;
  transition: color 0.1s, border-color 0.1s; pointer-events: all; user-select: none;
}
.strike-btn:hover          { color: var(--wrong); border-color: var(--wrong); }
.choice.struck .strike-btn { color: var(--wrong); border-color: var(--wrong); }

/* ── SELECT ALL THAT APPLY (in-house only, §13.5) ─────────────────────────────
   A ticked choice is blue: deliberately neither of the two verdict colours, so
   "I have chosen this" never reads as "this is right" before Check is pressed.
   After Check the row takes its green or red like any other, and .you-picked
   adds a marker so a near-miss stays legible — which letters you chose, and
   which of them were wrong, are both still on screen.                       */
.multi-hint {
  margin: 8px 18px 0; padding: 6px 11px;
  border-left: 3px solid var(--accent); border-radius: 0 5px 5px 0;
  background: #f2f6fd; color: #2a4a78;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 12px; font-weight: 500;
}
.multi-hint b { color: var(--accent); }

.choice.picked { border-color: var(--accent); background: #f0f5fd; }

/* Sits over the letter badge, so the tick reads at a glance down the column. */
.choice.you-picked .ltr-badge::after {
  content: '✓'; position: absolute; margin: -16px 0 0 16px;
  font-size: 9px; line-height: 1;
  background: var(--accent); color: #fff;
  border-radius: 50%; padding: 2px 3px;
}
.choice.you-picked .ltr-badge { position: relative; overflow: visible; }
.choice.you-picked { box-shadow: inset 3px 0 0 var(--accent); }

.multi-row {
  padding: 8px 18px 0; display: flex; align-items: center; gap: 10px;
}
.check-btn {
  font-size: 12.5px; font-weight: 700; padding: 6px 16px;
  border-radius: 6px; border: 1.5px solid var(--accent);
  background: var(--accent); color: #fff; cursor: pointer;
  font-family: 'Georgia', serif;
  transition: background 0.1s, border-color 0.1s, opacity 0.1s;
}
.check-btn:hover:not(:disabled) { background: #24518f; border-color: #24518f; }
.check-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.check-btn.check-right {
  background: var(--correct); border-color: var(--correct); opacity: 1;
}
.check-btn.check-wrong {
  background: var(--wrong); border-color: var(--wrong); opacity: 1;
}
.multi-count {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 11.5px; color: var(--muted);
}

/* ── EXPLANATIONS ────────────────────────────────────────────────────────── */
.choice-exp { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e2e0d8; font-size: 13px; line-height: 1.55; }
.choice-exp.visible { display: block; }
.rat-text b, .rat-text strong { font-weight: 700 !important; }

/* Shared rationale — in-house questions carry one explanation for the whole
   question instead of one per choice, so it sits below the choice list and
   opens once the question is scored. */
.shared-exp {
  display: none;
  margin: 6px 18px 2px; padding: 11px 14px;
  border: 1.5px solid #d4bbf5; border-left-width: 4px;
  border-radius: 7px; background: #fdfbff;
  font-size: 13px; line-height: 1.6;
}
.shared-exp.visible { display: block; }
.shared-exp-lbl {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: #6b21a8; margin-bottom: 5px;
}

/* ── PAUSE OVERLAY ────────────────────────────────────────────────────────
   Covers everything while the clock is stopped. z-index sits above the
   calculator (200) so a pause taken with the pad open still hides the page. */
#pause-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(28, 28, 28, 0.74);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
/* id + class, so this beats the bare #pause-overlay display:flex above. */
#pause-overlay.hidden { display: none; }
.pause-box {
  cursor: default; text-align: center;
  padding: 34px 48px; border-radius: 12px;
  background: #fff; border: 1.5px solid var(--border);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
}
.pause-icon { font-size: 30px; color: #c99700; line-height: 1; }
.pause-title {
  margin-top: 10px; font-size: 21px; font-weight: 700;
  letter-spacing: 0.02em; color: var(--ink);
}
.pause-hint {
  margin-top: 7px; font-size: 12px; color: var(--muted);
  font-family: sans-serif;
}

/* Stem image — shown before the student answers (pathology/radiology only) */
.stem-img-wrap { padding: 14px 20px 4px; text-align: center; }
.stem-img {
  display: inline-block; max-width: 100%; max-height: 380px;
  object-fit: contain; border-radius: 6px; border: 1px solid #ddd;
}
.stem-img-wrap .slide-ref { text-align: center; }

.slide-img-wrap { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e8e8e8; }
.slide-thumb {
  display: block; width: 70%; max-height: 360px;
  object-fit: contain; border-radius: 6px; border: 1px solid #ddd;
}
.slide-ref { margin-top: 6px; font-style: italic; font-size: 12px; color: var(--muted); }

/* ── REVEAL ROW ──────────────────────────────────────────────────────────── */
.reveal-row { padding: 4px 18px 14px; display: flex; align-items: center; gap: 10px; }
.reveal-all-btn {
  font-size: 12.5px; font-weight: 600; padding: 6px 14px;
  border-radius: 6px; border: 1.5px solid var(--border);
  background: #fff; color: var(--ink); cursor: pointer;
  font-family: 'Georgia', serif; transition: background 0.1s, border-color 0.1s;
}
.reveal-all-btn:hover { background: #f4f4f4; border-color: #bbb; }
.q-reset-btn {
  font-size: 14px; font-weight: 600; padding: 5px 10px;
  border-radius: 6px; border: 1.5px solid #e0a0a0;
  background: #fff; color: var(--wrong); cursor: pointer;
  font-family: 'Georgia', serif; transition: background 0.1s, border-color 0.1s;
}
.q-reset-btn:hover { background: var(--wrong-bg); border-color: var(--wrong); }

/* ── COMPLETION SCREEN ───────────────────────────────────────────────────── */
#completion-screen {
  display: none;
  max-width: 700px; margin: 40px auto 80px;
  padding: 0 20px; font-family: 'Georgia', serif;
}
#completion-screen.active { display: block; }

.completion-header {
  text-align: center; margin-bottom: 32px;
}
.completion-title {
  font-size: 22px; font-weight: 700; color: #0d2b5e;
  margin: 0 0 6px;
}
.completion-score {
  font-size: 15px; color: var(--muted);
}
.completion-score strong { color: var(--ink); }

/* Bar graph */
.score-bar-wrap {
  background: #f0f2f8; border-radius: 8px;
  overflow: hidden; height: 36px;
  display: flex; margin: 20px 0 8px;
}
.score-bar-correct {
  background: var(--correct); height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  transition: width 0.6s ease; white-space: nowrap; overflow: hidden;
  min-width: 0;
}
.score-bar-wrong {
  background: var(--wrong); height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  transition: width 0.6s ease; white-space: nowrap; overflow: hidden;
  min-width: 0;
}
.bar-legend {
  display: flex; gap: 20px; justify-content: center;
  font-size: 12.5px; color: var(--muted); margin-bottom: 32px;
}
.legend-dot {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; margin-right: 5px; vertical-align: middle;
}
.legend-correct { background: var(--correct); }
.legend-wrong   { background: var(--wrong); }

/* Perfect score message */
.all-correct-msg {
  text-align: center; padding: 28px 24px;
  background: var(--correct-bg); border: 1.5px solid var(--correct);
  border-radius: 10px; color: var(--correct);
  font-size: 15px; line-height: 1.6;
}
.all-correct-msg strong { font-size: 18px; display: block; margin-bottom: 6px; }

/* Review section */
.review-section { margin-top: 8px; }
.review-title {
  font-size: 13px; font-weight: 700; color: #0d2b5e;
  text-transform: uppercase; letter-spacing: 0.09em;
  border-bottom: 1px solid #d0d8e8; padding-bottom: 4px;
  margin: 0 0 16px;
}
.review-lecture {
  margin-bottom: 20px;
}
.review-lecture-name {
  font-size: 14px; font-weight: 700; color: var(--ink);
  margin: 0 0 8px; display: flex; align-items: center; gap: 8px;
}
.review-lecture-name::before {
  content: ''; display: inline-block;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--wrong); flex-shrink: 0;
}
.review-topics {
  list-style: none; margin: 0; padding: 0 0 0 22px;
}
.review-topics li {
  font-size: 13.5px; color: #444; margin-bottom: 5px;
  display: flex; align-items: flex-start; gap: 8px;
}
.review-topics li::before {
  content: '–'; color: var(--wrong); font-weight: 700;
  flex-shrink: 0; margin-top: 1px;
}

/* Anki section — one row per bucket of the session. Sits below the review list
   because it is what you do NEXT: the review names what you missed, this hands
   you the cards for it. */
.anki-section { margin-top: 32px; }
.anki-hint {
  font-size: 12.5px; color: var(--muted);
  line-height: 1.5; margin: -8px 0 14px;
}
/* Settings → "Anki buttons" off takes the results screen's whole Anki block
   with it — a section headed "Anki cards from this session" is no more use to
   someone who does not use Anki than the per-question button was. */
html[data-anki-ui="off"] .anki-section { display: none; }
.anki-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 7px;
  background: #fff;
}
.anki-dot {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; flex-shrink: 0;
}
.ank-all   { background: #4a5a7a; }
.ank-right { background: var(--correct); }
.ank-wrong { background: var(--wrong); }
.ank-skip  { background: #b9bec9; }
.anki-lbl {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.anki-count {
  margin-left: auto; font-size: 12px; color: var(--muted);
  white-space: nowrap;
}
.anki-copy-btn {
  flex-shrink: 0; padding: 5px 12px; border-radius: 6px;
  border: 1.5px solid #6b4fa0; background: #fff; color: #6b4fa0;
  font-family: 'Georgia', serif; font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.anki-copy-btn:hover:not(:disabled) { background: #f3eeff; }
.anki-copy-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.anki-copy-btn.copied {
  background: #1a6e40; border-color: #1a6e40; color: #fff;
}
.anki-copy-btn.copy-failed {
  background: #9b2424; border-color: #9b2424; color: #fff;
}

/* "Saved as …" on the completion screen. Quiet on purpose — it is a
   reassurance and a way through to the rename, not a result. */
.session-saved {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 9px;
  margin: 30px auto 0; padding: 11px 16px;
  border: 1.5px solid var(--border); border-radius: 8px;
  background: #fafbfe; max-width: 560px;
  font-family: 'Georgia', serif; font-size: 13px;
}
.session-saved .ss-label { color: var(--muted); }
.session-saved .ss-name  { font-weight: 700; color: var(--ink); }
.session-saved .ss-btn {
  padding: 4px 11px; border-radius: 6px;
  border: 1.5px solid var(--border); background: #fff;
  color: var(--ink); font-family: inherit; font-size: 12px;
  font-weight: 600; cursor: pointer; text-decoration: none;
}
.session-saved .ss-btn:hover { background: #f4f4f4; border-color: #bbb; }

.completion-restart {
  display: block; margin: 32px auto 0;
  padding: 10px 28px; border-radius: 7px;
  border: 1.5px solid var(--border); background: #fff;
  color: var(--ink); font-size: 13.5px; font-weight: 600;
  font-family: 'Georgia', serif; cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.completion-restart:hover { background: #f4f4f4; border-color: #bbb; }

/* ── TEXT HIGHLIGHT ──────────────────────────────────────────────────────── */
.user-highlight {
  background: #ffe066; cursor: pointer; border-radius: 2px;
  padding: 0; margin: 0; display: inline;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.user-highlight:hover { background: #ffd633; }

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .q-layout  { padding: 16px 14px 60px; gap: 16px; }
  .q-sidenav { width: 220px; }
}

@media (max-width: 820px) {
  .nav-btn       { padding: 5px 9px; font-size: 13px; }
  .topnav        { padding: 0 10px; }
  .q-layout      { flex-direction: column; padding: 12px 10px 40px; gap: 12px; }
  /* The list stays vertical on a phone — the stem previews are what make it
     usable, and they do not survive being turned on their side. It just stops
     being sticky and gets a capped height instead. */
  .q-sidenav {
    position: static; width: 100%; height: auto; max-height: 260px;
  }
  .qn-list   { max-height: 150px; }
  .q-tools   { padding: 6px 10px; }
  .qtool     { padding: 5px 8px; font-size: 11px; }
  .q-panel   { padding: 10px 12px; }
  #calc-panel { right: 12px; bottom: 12px; width: 214px; }
  .topnav-nav { gap: 5px; }
  .arrow-btn { padding: 5px 10px; font-size: 11.5px; }
  .q-header  { padding: 12px 14px 10px; }
  .choices   { padding: 8px 12px 4px; }
  .reveal-row { padding: 4px 12px 12px; }
  .slide-thumb { width: 90%; max-height: 240px; }
  /* The count is the first thing to go when the row runs out of room — the
     label and the button both have to stay readable. */
  .anki-row   { flex-wrap: wrap; gap: 8px; }
  .anki-count { margin-left: auto; font-size: 11.5px; }
  .stem-img-wrap { padding: 10px 14px 2px; }
  .stem-img      { max-height: 240px; }
  #cookie-notice { padding: 10px 14px; }
  /* More of the phone's short viewport, since there is no second column
     competing for it. */
  .rm-frame { max-height: 76vh; }
}

/* ── DARK MODE (the Appearance setting) ─────────────────────────────────────────
   site.js writes data-theme on <html>: absent means follow the OS, "dark"
   and "light" force it. One mechanism rather than a second palette: the
   whole page is inverted with hue preserved, then images are inverted back
   so figures, slides and the icon stay as authored. The filter sits on the
   ROOT element on purpose — the filter spec exempts the root from creating
   a containing block, so position:fixed overlays (settings, pause screen,
   notices) keep working. Scoped to screen so printing never inverts. */
@media screen and (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    filter: invert(0.925) hue-rotate(180deg);
    background: #fff;   /* inverts to the page's dark canvas */
  }
  html:not([data-theme="light"]) img,
  html:not([data-theme="light"]) video {
    filter: invert(1) hue-rotate(180deg);
  }
}
@media screen {
  html[data-theme="dark"] {
    filter: invert(0.925) hue-rotate(180deg);
    background: #fff;
  }
  html[data-theme="dark"] img,
  html[data-theme="dark"] video {
    filter: invert(1) hue-rotate(180deg);
  }
}

/* ── SECTION NOTE, UNDER READ MORE (qbank.js buildSectionNote) ────────────
   The same sticky note the outline page shows under this section's heading,
   bound to the same stored key. */
.rm-note { margin-top: 10px; }
.rm-note-lbl {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: #8a6d1a; margin-bottom: 4px;
}
.sn-area {
  display: block; width: 100%; min-height: 58px; resize: vertical;
  box-sizing: border-box; padding: 10px 12px;
  background: #fff9d6; border: 1.5px solid #e8d48a; border-radius: 8px;
  font-family: inherit; font-size: 13px; line-height: 1.55;
  color: #3a3115; outline: none;
}
.sn-area:focus { border-color: #c9a227; }
.rm-note-hint { font-size: 10.5px; color: #a08c4a; margin-top: 3px; }