/* ==========================================================================
   PrepMora — exam surface.
   Deliberately theme-independent: always the light, academic Bluebook-style
   screen, in dark mode as well. Nothing here reads the site's theme tokens.
   ========================================================================== */

/* Tokens live on :root, not on .exam — the drawer and toast are siblings of
   .exam, and scoping the palette to .exam left them with no background at all. */
:root {
  --e-bg: #ffffff;
  --e-panel: #f7f8fa;
  --e-ink: #1a1c1f;
  --e-ink-2: #4a5058;
  --e-ink-3: #767d87;
  --e-line: #d6dae0;
  --e-line-soft: #e7eaee;
  /* Answer boxes need a firmer edge than general hairlines to read as boxes */
  --e-choice-line: #b9c0ca;
  --e-accent: #1668c4;
  --e-accent-hover: #12579f;
  --e-accent-soft: #e8f1fc;
  --e-good: #1a7f4b;
  --e-good-soft: #e6f4ec;
  --e-bad: #c0392f;
  --e-bad-soft: #fdecea;
  --e-warn: #b46a00;
  --e-warn-soft: #fdf3e2;

  --e-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --e-serif: "Noto Serif", "Source Serif 4", Georgia, "Times New Roman", serif;
  --e-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* Question typography — the sizes the whole screen is judged on */
  --e-q-size: 17px;
  --e-q-leading: 1.62;
}

/* Reading & Writing carries far more text than a maths stem, so it sits half a
   pixel below the shared size to keep long passages comfortable. */
.exam.mode-rw {
  --e-q-size: 16px;
}

.exam {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--e-bg);
  color: var(--e-ink);
  font-family: var(--e-sans);
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden;
}

.exam *,
.exam *::before,
.exam *::after {
  box-sizing: border-box;
}

/* Component classes set `display`, which would otherwise beat the UA rule for
   [hidden]. Everything toggled from JS relies on this winning. */
[hidden] {
  display: none !important;
}

/* :where() keeps this reset at one class of weight. As plain `.exam button`
   it outranked every single-class button rule below, so the black Next and
   question-count pills, the outlined footer buttons, the blue Check button,
   the Hide/pause outlines and the ABC ring all rendered as bare text. */
.exam :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  /* iPad: no double-tap zoom on a quick second tap, no grey tap flash */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.exam :focus-visible {
  outline: 2px solid var(--e-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 6px;
  background: var(--e-accent);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  transition: top 0.16s ease;
}

.skip-link:focus {
  top: 16px;
}

/* --- Header ------------------------------------------------------------- */

.exam-header {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 10px 20px 12px;
  border-bottom: 1px solid var(--e-line);
  flex: none;
}

.exam-header-left,
.exam-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.exam-header-right {
  justify-content: flex-end;
}

.hbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--e-ink);
  transition: background-color 0.14s ease;
}

/* Hover colours only where a real hover exists — on a touch screen :hover
   sticks to whatever was tapped last and leaves it looking pressed. */
@media (hover: hover) {
  .hbtn:hover {
    background: var(--e-panel);
  }
}

/* Tool buttons carry a label under the icon, like the real test app */
.tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--e-ink-2);
  transition: background-color 0.14s ease, color 0.14s ease;
}

@media (hover: hover) {
  .tool:hover {
    background: var(--e-panel);
    color: var(--e-ink);
  }
}

.tool.is-on {
  background: var(--e-accent-soft);
  color: var(--e-accent);
}

.tool svg {
  display: block;
}

/* --- Timer -------------------------------------------------------------- */

.timer-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.timer-clock {
  font-size: 27px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1.05;
  min-width: 3.4ch;
  text-align: center;
}

.timer-clock.is-hidden-value {
  letter-spacing: 0.12em;
  color: var(--e-ink-3);
}

.timer-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.timer-pause {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--e-line);
  color: var(--e-ink-2);
  transition: border-color 0.14s ease, color 0.14s ease;
}

@media (hover: hover) {
  .timer-pause:hover {
    border-color: var(--e-ink-3);
    color: var(--e-ink);
  }
}

.timer-toggle {
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid var(--e-line);
  font-size: 13.5px;
  color: var(--e-ink-2);
  transition: border-color 0.14s ease, color 0.14s ease;
}

@media (hover: hover) {
  .timer-toggle:hover {
    border-color: var(--e-ink-3);
    color: var(--e-ink);
  }
}

.streak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--e-line);
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- Split body --------------------------------------------------------- */

.exam-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.pane-left {
  flex: 0 0 46%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--e-bg);
  overflow: hidden;
}

.pane-right {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The draggable divider between the calculator and the question */
.splitter {
  flex: none;
  width: 11px;
  cursor: col-resize;
  position: relative;
  background: var(--e-bg);
  border-left: 1px solid var(--e-line);
  border-right: 1px solid var(--e-line);
  touch-action: none;
}

.splitter::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  background: repeating-linear-gradient(
    to bottom,
    var(--e-ink-3) 0 2px,
    transparent 2px 4px
  );
  opacity: 0.55;
}

.splitter:hover::before,
.splitter.is-dragging::before {
  opacity: 1;
}

body.is-resizing {
  cursor: col-resize;
  -webkit-user-select: none;
  user-select: none;
}

.exam.calc-off .pane-left,
.exam.calc-off .splitter {
  display: none;
}

/* --- Math explanation beside the question ------------------------------- */
/* Baran, 4 Oct 2026: in the drawer the walkthrough sat squeezed against the
   right edge, over a dimmed calculator. A Math explanation now opens in the
   page itself: the calculator steps out to the left, the question slides over
   into its place, and the walkthrough comes in from the right as a card with
   room on both sides. Closing plays the same move backwards (exam.js,
   openExplain / closeExplain). Reading & Writing keeps the drawer. */

.exam {
  /* The explanation's column; the question keeps the rest of the width.
     The graph is the box minus Desmos's expression list, which stays 320px
     whatever the box, and every view was checked with a ~380px graph. The
     740px floor keeps it near that on an iPad in landscape (1180px: graph
     352px, question 440px); there the question gives way. */
  --explain-w: clamp(740px, 56vw, 980px);
  --shift-time: 0.48s;
  --shift-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.pane-explain {
  flex: 0 0 0px;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.exam.explain-open .pane-explain {
  flex-basis: var(--explain-w);
}

/* !important: the splitter keeps the calculator's width as an inline style. */
.exam.explain-open .pane-left {
  flex-basis: 0% !important;
}

.exam.explain-open .splitter {
  width: 0;
  border-left-width: 0;
  border-right-width: 0;
  pointer-events: none;
}

.exam.explain-open .splitter::before {
  opacity: 0;
}

.exam.explain-open .calc-shell {
  opacity: 0;
  transform: translateX(-28px);
}

/* The calculator is out of sight, so its button stops looking pressed;
   pressing it brings the calculator back and closes the explanation. */
.exam.explain-open #calc-btn.is-on {
  background: none;
  color: var(--e-ink-2);
}

/* Animated only while the explanation opens or closes: a transition left on
   the calculator's width would make the splitter lag behind the pointer. */
.exam.is-shifting .pane-left,
.exam.is-shifting .pane-explain {
  transition: flex-basis var(--shift-time) var(--shift-ease);
}

.exam.is-shifting .splitter {
  transition: width var(--shift-time) var(--shift-ease),
    border-width var(--shift-time) var(--shift-ease);
}

.exam.is-shifting .calc-shell {
  transition: opacity 0.3s ease, transform var(--shift-time) var(--shift-ease);
}

/* A fixed width, so nothing inside reflows and Desmos never resizes while the
   column opens. Until the column is wider than the card, the card rides in on
   its left edge; after that it settles in the middle. */
.explain-card {
  width: min(820px, calc(var(--explain-w) - 48px));
  margin: 16px auto;
  border: 1px solid var(--e-line);
  border-radius: 12px;
  background: var(--e-bg);
  box-shadow: 0 1px 3px rgba(20, 28, 40, 0.06),
    0 18px 40px -28px rgba(16, 24, 40, 0.35);
}

.explain-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 20px;
  border-bottom: 1px solid var(--e-line);
}

.explain-card-title {
  margin: 0;
  font-family: var(--e-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.explain-card-body {
  padding: 14px 20px 20px;
}

/* The graph takes the height the screen can spare, never less than the 430px
   every walkthrough view was checked at (a short screen scrolls the column).
   320px = the exam's header and footer (86 + 65) plus the card around the
   graph: its margins, title row, step bar and padding. */
.pane-explain .wt-calc {
  height: clamp(430px, calc(100vh - 320px), 640px);
  height: clamp(430px, calc(100svh - 320px), 640px);
}

/* Narrower screens give the graph the card's margins and padding back. */
@media (max-width: 1299px) {
  .explain-card {
    width: min(820px, calc(var(--explain-w) - 32px));
  }

  .explain-card-head {
    padding-left: 16px;
  }

  .explain-card-body {
    padding: 12px 16px 16px;
  }
}

/* Under ~1100px two columns do not fit (an iPad held upright): the
   explanation takes the whole width and the question slides out to the
   left. */
@media (max-width: 1099px) {
  .exam {
    --explain-w: 100vw;
  }
}

/* Under 740px the panes stack (see "Narrow screens"), so the column's size
   is its height: the explanation fills the page and rises from the bottom. */
@media (max-width: 739px) {
  .exam.explain-open .pane-explain {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .exam.is-shifting .pane-left,
  .exam.is-shifting .pane-explain,
  .exam.is-shifting .splitter,
  .exam.is-shifting .calc-shell {
    transition: none;
  }
}

/* --- Calculator --------------------------------------------------------- */

.calc-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 18px 0 18px 18px;
  border: 1px solid var(--e-line);
  border-radius: 10px;
  overflow: hidden;
  min-height: 0;
  box-shadow: 0 1px 3px rgba(20, 28, 40, 0.06);
}

.calc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--e-line);
  background: var(--e-bg);
  flex: none;
}

.calc-title {
  font-weight: 600;
  font-size: 15px;
}

.calc-mode {
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px solid var(--e-line);
  font-size: 13.5px;
  background: var(--e-bg);
  cursor: pointer;
}

.calc-mount {
  flex: 1;
  min-height: 0;
  position: relative;
}

.calc-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
  color: var(--e-ink-2);
  font-size: 14px;
}

.calc-mount.is-failed .calc-fallback {
  display: flex;
}

/* --- Passage (Reading & Writing) ---------------------------------------- */

.passage-pane {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 26px 34px 60px;
}

.passage {
  max-width: 62ch;
  margin: 0 auto;
  font-family: var(--e-serif);
  font-size: var(--e-q-size);
  line-height: var(--e-q-leading);
  color: var(--e-ink);
}

.passage p + p,
.passage p + table,
.passage table + p {
  margin-top: 1em;
}

/* Block quotations in the source are indented; keep that relationship */
.passage .quoted {
  padding-left: 18px;
  border-left: 2px solid var(--e-line);
}

/* Rhetorical-synthesis questions present research notes as a bulleted list */
.passage .note-list {
  margin: 10px 0 0;
  padding-left: 22px;
}

.passage .note-list li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.passage-pane.hl-armed {
  cursor: text;
}

.passage-pane.hl-armed .passage::selection,
.passage-pane.hl-armed .passage *::selection,
.choices.hl-armed .choice-text::selection,
.choices.hl-armed .choice-text *::selection {
  background: #ffe89a;
}

/* With the highlighter armed, choice text becomes selectable rather than
   swallowing the drag as a click on the answer. */
.choices.hl-armed .choice-text {
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
}

/* Touch highlighting: a finger selects with the system handles and never
   lifts a mouse button, so a small button follows the selection instead. */
.hl-pop {
  position: fixed;
  z-index: 95;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--e-ink);
  color: #fff;
  font: 600 14px/1 var(--e-sans);
  box-shadow: 0 8px 24px -8px rgba(16, 24, 40, 0.55);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hl-pop:focus-visible {
  outline: 2px solid var(--e-accent);
  outline-offset: 2px;
}

/* The mark itself — Bluebook's soft yellow wash, readable over serif text */
mark.hl {
  background: #fff2a8;
  color: inherit;
  padding: 1px 0;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

mark.hl.has-note {
  border-bottom: 2px solid #d9a400;
  cursor: help;
}

.hl-menu {
  position: fixed;
  z-index: 90;
  display: none;
  gap: 2px;
  padding: 4px;
  border-radius: 9px;
  border: 1px solid var(--e-line);
  background: var(--e-bg);
  box-shadow: 0 10px 26px -10px rgba(16, 24, 40, 0.4);
  font-family: var(--e-sans);
  font-size: 14px;
}

.hl-menu.is-open {
  display: flex;
}

.hl-menu button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 7px;
  color: var(--e-ink);
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}

@media (hover: hover) {
  .hl-menu button:hover {
    background: var(--e-panel);
  }
}

/* --- Question ----------------------------------------------------------- */

/* Centred so a calc-off question on a 1728-1920px laptop doesn't hug the
   left edge with a half-screen gap beside it. */
.q-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 34px 120px;
}

.q-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--e-line);
  margin-bottom: 20px;
}

.q-number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 5px;
  background: var(--e-ink);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.q-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--e-ink);
  transition: background-color 0.14s ease;
}

@media (hover: hover) {
  .q-mark:hover {
    background: var(--e-panel);
  }
}

.q-mark svg {
  color: var(--e-ink-3);
}

.q-mark.is-on svg {
  color: var(--e-warn);
  fill: var(--e-warn);
}

.q-head-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.q-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  color: var(--e-ink-2);
  transition: background-color 0.14s ease, color 0.14s ease;
}

@media (hover: hover) {
  .q-icon:hover {
    background: var(--e-panel);
    color: var(--e-ink);
  }
}

/* The A-B-C strike toggle that turns elimination mode on */
.abc-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  border-radius: 999px;
  border: 1.5px solid var(--e-ink);
  font-family: var(--e-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  position: relative;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.abc-toggle::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 1.5px;
  background: currentColor;
}

.abc-toggle.is-on {
  background: var(--e-ink);
  color: #fff;
}

/* Question content: serif, 17px, generous leading */
.q-stem {
  font-family: var(--e-serif);
  font-size: var(--e-q-size);
  line-height: var(--e-q-leading);
  color: var(--e-ink);
}

.q-stem p + p {
  margin-top: 0.9em;
}

.q-figure {
  margin: 18px 0;
  padding: 4px;
  text-align: center;
}

.q-figure img {
  display: block;
  max-width: 420px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* R&W figures open the passage pane. They widen to the passage column (bank
   tables were hard to read at 420px), never past their own pixel size, and
   stay short enough to fit the visible pane: 210px (180px on short screens)
   is the header, footer, pane padding and figure margin. Never shorter than
   400px, never taller than 560px, so the passage still starts in view. */
.passage-pane .q-figure img {
  width: auto;
  max-width: 100%;
  max-height: clamp(400px, calc(100vh - 210px), 560px);
  max-height: clamp(400px, calc(100svh - 210px), 560px);
}

@media (max-height: 760px) {
  .passage-pane .q-figure img {
    max-height: clamp(400px, calc(100vh - 180px), 560px);
    max-height: clamp(400px, calc(100svh - 180px), 560px);
  }
}

.q-table {
  margin: 16px 0;
  border-collapse: collapse;
  font-family: var(--e-serif);
  font-size: 16px;
}

.q-table th,
.q-table td {
  border: 1px solid var(--e-ink);
  padding: 7px 16px;
  text-align: center;
}

.q-table th {
  font-weight: 600;
  background: var(--e-panel);
}

/* --- Choices ------------------------------------------------------------ */

.choices {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 22px;
}

.choice-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.exam .choice {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  /* Uniform padding keeps every choice on the same rhythm; the row still grows
     with its content so long options breathe instead of clipping. */
  padding: 13px 15px;
  min-height: 56px;
  text-align: left;
  /* The frame is always drawn, not just on hover or selection — every choice
     sits in a visible box of the same width, and only its height responds to
     how much text it holds.
     Selector is deliberately `.exam .choice` (two classes), not just `.choice`
     (one class) — `.exam button` resets border:0 at (0,1,1) specificity,
     which beats a bare `.choice` at (0,1,0) regardless of source order and
     silently zeroed this border. */
  border: 1.5px solid var(--e-choice-line);
  border-radius: 9px;
  background: var(--e-bg);
  position: relative;
  transition: border-color 0.14s ease, background-color 0.14s ease,
    box-shadow 0.14s ease;
}

@media (hover: hover) {
  .choice:hover {
    border-color: var(--e-ink-3);
  }
}

.choice-letter {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex: none;
  border-radius: 999px;
  border: 1.5px solid var(--e-ink-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--e-ink);
  transition: background-color 0.14s ease, border-color 0.14s ease,
    color 0.14s ease;
}

.choice-text {
  flex: 1;
  min-width: 0;
  font-family: var(--e-serif);
  font-size: var(--e-q-size);
  line-height: 1.45;
}

.choice-text > * + * {
  margin-top: 4px;
}

/* A choice can itself be a graph ("Which of the following graphs…"). Those
   SVGs carry only a viewBox and the PNGs are 1,100-1,500 px wide, so an
   unsized <img> took the whole choice width or its own pixel width: four
   517 px graphs, or 1,500 px ones scrolling sideways (question bank 6e6a3241
   and 36f068e2, 4 Oct 2026). Same size as the test screen's .bb-ctext img. */
.choice-text .q-figure {
  margin: 4px 0;
  padding: 0;
}

.choice-text img {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
  margin: 0;
}

/* Check button lives inside the choice and only appears once it is picked */
.choice-check {
  flex: none;
  padding: 7px 17px;
  border-radius: 999px;
  background: var(--e-accent);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease,
    background-color 0.14s ease;
  /* width is animated by the flex gap collapsing, so the text reflows smoothly */
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}

@media (hover: hover) {
  .choice-check:hover {
    background: var(--e-accent-hover);
  }
}

.choice.is-picked {
  border-color: var(--e-accent);
  box-shadow: inset 0 0 0 1px var(--e-accent);
}

.choice.is-picked .choice-letter {
  background: var(--e-accent);
  border-color: var(--e-accent);
  color: #fff;
}

.choice.is-picked .choice-check {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  max-width: 160px;
  padding-left: 17px;
  padding-right: 17px;
}

.choice.is-correct {
  border-color: var(--e-good);
  background: var(--e-good-soft);
  box-shadow: inset 0 0 0 1px var(--e-good);
}

.choice.is-correct .choice-letter {
  background: var(--e-good);
  border-color: var(--e-good);
  color: #fff;
}

.choice.is-wrong {
  border-color: var(--e-bad);
  background: var(--e-bad-soft);
  box-shadow: inset 0 0 0 1px var(--e-bad);
}

.choice.is-wrong .choice-letter {
  background: var(--e-bad);
  border-color: var(--e-bad);
  color: #fff;
}

/* Eliminated: dimmed, softened, and struck clean through */
.choice.is-out {
  opacity: 0.4;
  filter: blur(0.35px) grayscale(0.55);
  background: var(--e-panel);
  border-color: var(--e-line-soft);
  cursor: not-allowed;
  pointer-events: none;
}

.choice.is-out::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 1.5px;
  background: var(--e-ink-2);
  filter: none;
}

.choice.is-out .choice-check {
  display: none;
}

/* The circled letter beside each choice that removes it from play */
.exam .elim {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1.5px solid var(--e-ink-2);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--e-ink-2);
  position: relative;
  transition: border-color 0.14s ease, color 0.14s ease,
    background-color 0.14s ease;
}

.elim::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 1.4px;
  background: currentColor;
}

@media (hover: hover) {
  .elim:hover {
    border-color: var(--e-ink);
    color: var(--e-ink);
  }
}

.elim.is-on {
  background: var(--e-ink);
  border-color: var(--e-ink);
  color: #fff;
}

/* The elimination column keeps its space when the tool is off, so switching it
   on never shifts the answer boxes sideways. */
.choices:not(.elim-mode) .elim {
  visibility: hidden;
  pointer-events: none;
}

.undo-elim {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--e-accent);
  text-decoration: underline;
  padding: 4px 2px;
}

/* --- Student-produced response ------------------------------------------ */

.spr {
  margin-top: 22px;
  max-width: 430px;
}

.spr-label {
  font-size: 13.5px;
  color: var(--e-ink-2);
  margin-bottom: 8px;
}

.spr-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 16px;
  border: 1.5px solid var(--e-line);
  border-radius: 10px;
  background: var(--e-bg);
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

.spr-field:focus-within {
  border-color: var(--e-accent);
}

.spr-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  padding: 12px 0;
  font-family: var(--e-serif);
  font-size: var(--e-q-size);
  color: var(--e-ink);
}

.spr-btn {
  flex: none;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--e-accent);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  transition: background-color 0.14s ease;
}

@media (hover: hover) {
  .spr-btn:hover {
    background: var(--e-accent-hover);
  }
}

.spr-btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

.spr.is-correct .spr-field {
  border-color: var(--e-good);
  background: var(--e-good-soft);
}

.spr.is-wrong .spr-field {
  border-color: var(--e-bad);
  background: var(--e-bad-soft);
}

.spr.is-wrong .spr-input {
  color: var(--e-bad);
}

.spr.is-wrong .spr-btn {
  background: var(--e-bg);
  color: var(--e-ink);
  border: 1.5px solid var(--e-line);
}

@media (hover: hover) {
  .spr.is-wrong .spr-btn:hover {
    border-color: var(--e-ink-3);
  }
}

.spr-hint {
  margin-top: 9px;
  font-size: 13.5px;
  color: var(--e-ink-2);
}

/* --- Verdict + explanation ---------------------------------------------- */

.verdict {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 16px;
  border-radius: 9px;
  font-size: 14.5px;
  font-weight: 600;
}

.verdict.is-shown {
  display: flex;
}

.verdict.good {
  background: var(--e-good-soft);
  color: var(--e-good);
}

.verdict.bad {
  background: var(--e-bad-soft);
  color: var(--e-bad);
}

.explain-inline {
  display: none;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--e-line);
}

.explain-inline.is-shown {
  display: block;
}

.explain-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--e-ink-3);
  margin-bottom: 10px;
}

.rationale {
  font-family: var(--e-serif);
  font-size: 16px;
  line-height: 1.68;
  color: var(--e-ink);
}

.rationale p + p {
  margin-top: 0.85em;
}

/* --- Footer ------------------------------------------------------------- */

.exam-footer {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 11px 20px;
  border-top: 1px solid var(--e-line);
  background: var(--e-bg);
}

.footer-left,
.footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-right {
  justify-content: flex-end;
}

.fbtn {
  padding: 9px 17px;
  border-radius: 999px;
  border: 1px solid var(--e-line);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--e-ink);
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

.fbtn-primary {
  background: var(--e-ink);
  border-color: var(--e-ink);
  color: #fff;
}

@media (hover: hover) {
  .fbtn:hover {
    border-color: var(--e-ink-3);
    background: var(--e-panel);
  }
  .fbtn-primary:hover {
    background: #000;
    border-color: #000;
  }
}

.fbtn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

.bank-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--e-ink);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- Question bank popup ------------------------------------------------ */

.bank-pop {
  position: absolute;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
  z-index: 60;
  background: var(--e-bg);
  border: 1px solid var(--e-line);
  border-radius: 14px;
  box-shadow: 0 20px 48px -18px rgba(16, 24, 40, 0.34);
  display: none;
  flex-direction: column;
  max-height: min(70vh, 620px);
}

.bank-pop.is-open {
  display: flex;
}

.bank-pop-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 13px;
  border-bottom: 1px solid var(--e-line-soft);
}

.bank-pop-title {
  font-size: 19px;
  font-weight: 700;
}

.bank-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 12px 18px;
  font-size: 13.5px;
  color: var(--e-ink-2);
}

.bank-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.set-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px 12px;
}

.set-btn {
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--e-line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--e-ink);
  white-space: nowrap;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

@media (hover: hover) {
  .set-btn:hover {
    border-color: var(--e-ink-3);
    background: var(--e-panel);
  }
}

.set-btn[disabled] {
  opacity: 0.38;
  pointer-events: none;
}

.set-label {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 13px;
  color: var(--e-ink-3);
}

.bank-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 4px 18px 18px;
  overflow-y: auto;
}

/* Tile colour is the question's difficulty; the corner badge is your result. */
.tile {
  position: relative;
  aspect-ratio: 1.35;
  border-radius: 9px;
  border: 1.5px solid transparent;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

@media (hover: hover) {
  .tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -4px rgba(16, 24, 40, 0.3);
  }
}

.tile.d-easy {
  background: #e4f6e9;
  color: #14663c;
}

.tile.d-medium {
  background: #fdf3d6;
  color: #8a6100;
}

.tile.d-hard {
  background: #fde5e2;
  color: #a5342a;
}

.tile.is-current {
  border-color: var(--e-ink);
  box-shadow: 0 0 0 2px rgba(26, 28, 31, 0.12);
}

.tile-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--e-bg);
}

.tile-badge svg {
  display: block;
}

/* --- Activity + info ---------------------------------------------------- */

.meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 16px;
}

.meta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 10px;
  border: 1px solid var(--e-line);
  font-size: 14.5px;
  font-weight: 600;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

@media (hover: hover) {
  .meta-btn:hover {
    border-color: var(--e-ink-3);
    background: var(--e-panel);
  }
}

.meta-btn.is-on {
  border-color: var(--e-accent);
  background: var(--e-accent-soft);
  color: var(--e-accent);
}

.meta-count {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--e-panel);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.meta-btn.is-on .meta-count {
  background: #fff;
}

.meta-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  justify-content: center;
  border-radius: 999px;
}

.meta-panel {
  display: none;
  border-top: 1px solid var(--e-line-soft);
  padding: 14px 18px 18px;
  max-height: 240px;
  overflow-y: auto;
}

.meta-panel.is-open {
  display: block;
}

.log-row {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--e-line-soft);
  font-size: 14px;
}

.log-row:last-child {
  border-bottom: 0;
}

.log-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.log-mark.ok {
  background: var(--e-good-soft);
  color: var(--e-good);
}

.log-mark.no {
  background: var(--e-bad-soft);
  color: var(--e-bad);
}

.log-time {
  font-family: var(--e-mono);
  font-size: 13px;
  color: var(--e-ink-3);
  font-variant-numeric: tabular-nums;
}

.info-grid {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 9px 16px;
  font-size: 14px;
}

.info-grid dt {
  color: var(--e-ink-3);
}

.info-grid dd {
  margin: 0;
  font-weight: 500;
}

.empty-note {
  font-size: 14px;
  color: var(--e-ink-3);
  padding: 6px 0;
}

/* --- Right drawer (reference, explanation, directions) ------------------ */

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 92vw);
  z-index: 70;
  /* Opaque on purpose: the exam screen sits behind it and must not read through */
  background: var(--e-bg);
  color: var(--e-ink);
  font-family: var(--e-sans);
  font-size: 15px;
  line-height: 1.5;
  border-left: 1px solid var(--e-line);
  box-shadow: -18px 0 44px -26px rgba(16, 24, 40, 0.45);
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
}

.drawer.is-open {
  transform: none;
}

/* A Math walkthrough needs room for its graph beside Desmos's expression
   list: at 560px the graph was ~200px wide (1 Oct 2026). */
.drawer:has(.wt-calc) {
  width: min(760px, 94vw);
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--e-line);
  flex: none;
}

.drawer-title {
  font-size: 18px;
  font-weight: 700;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.drawer *,
.drawer *::before,
.drawer *::after {
  box-sizing: border-box;
}

.drawer :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(16, 24, 40, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.drawer-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* --- Reference sheet ---------------------------------------------------- */

.ref-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ref-cell {
  border: 1px solid var(--e-line);
  border-radius: 9px;
  padding: 14px 10px;
  text-align: center;
  font-family: var(--e-serif);
  font-size: 14px;
  background: var(--e-bg);
}

.ref-cell svg {
  margin: 0 auto 10px;
  display: block;
}

.ref-facts {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--e-line);
  font-family: var(--e-serif);
  font-size: 16px;
  line-height: 1.7;
}

.ref-facts li {
  margin-bottom: 8px;
  list-style: none;
}

/* --- Toast -------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 78px;
  transform: translate(-50%, 12px);
  z-index: 80;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--e-ink);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --- KaTeX tuning ------------------------------------------------------- */

.exam .katex {
  font-size: 1.04em;
}

.exam .katex-display {
  margin: 0.7em 0;
}

/* Two fractions on consecutive lines (\dfrac, <br>, \dfrac) touched: the upper
   denominator ran into the lower numerator, because a line box ends exactly at
   a tall inline formula's edge (Practice Test #3 math1:21, 2026-09-26). An
   inline-block's margin box counts toward its line box, so a formula carrying a
   fraction or an array gets air above and below it. Same rule in bluebook.css
   and base.css. */
:not(.katex-display) > .katex:has(.mfrac, .mtable) {
  display: inline-block;
  margin: 0.25em 0;
}

/* --- Narrow screens ----------------------------------------------------- */

/* --- Short screens ------------------------------------------------------ */
/* A 15.6" laptop at 125-150% scaling (1280x585, 1366x633, 1536x729) and an
   iPad in landscape (1180x760) leave far less height than a MacBook; the
   header, the footer and the 120px run-out under the question were taking
   the room a typical question needed, so it scrolled before its last choice. */

@media (max-height: 760px) {
  .exam-header {
    padding-top: 6px;
    padding-bottom: 7px;
  }
  .timer-block {
    gap: 2px;
  }
  .timer-clock {
    font-size: 23px;
  }
  .tool {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .passage-pane {
    padding-top: 18px;
    padding-bottom: 40px;
  }
  .calc-shell {
    margin-top: 12px;
    margin-bottom: 12px;
  }
  .q-wrap {
    padding-top: 14px;
    padding-bottom: 64px;
  }
  .q-head {
    margin-bottom: 14px;
  }
  .choices {
    gap: 9px;
    margin-top: 16px;
  }
  .exam .choice {
    min-height: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .exam-footer {
    padding-top: 7px;
    padding-bottom: 7px;
  }
  .bank-pop {
    bottom: 56px;
  }
  .toast {
    bottom: 66px;
  }
}

/* --- Narrow screens ----------------------------------------------------- */
/* Side by side down to the narrowest iPad held upright (744px), as in
   Bluebook; stacked, an 11" iPad upright (834px) scrolled long choice sets.
   Only a phone-width screen stacks. */

@media (max-width: 739px) {
  .exam-body {
    flex-direction: column;
  }
  .pane-left {
    flex: 0 0 44%;
  }
  .splitter {
    display: none;
  }
  .calc-shell {
    margin: 12px 12px 0;
  }
  .q-wrap {
    padding: 16px 18px 90px;
  }
}

/* iPad portrait (768-834px) still fits the three-column header with its
   tool labels; the second header row is only needed below that. */
@media (max-width: 760px) {
  .exam-header {
    grid-template-columns: 1fr auto;
    row-gap: 8px;
  }
  .exam-header-right {
    grid-column: 1 / -1;
    justify-content: space-between;
  }
  .tool span {
    display: none;
  }
}

/* --- Touch screens ------------------------------------------------------ */
/* iPad: the cross-out circles, the ABC toggle, the pause button and the
   divider were under a fingertip's size. Hit areas grow; nothing moves. */

@media (pointer: coarse) {
  .splitter::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    right: -10px;
  }
  .exam .elim::before,
  .abc-toggle::before {
    content: "";
    position: absolute;
    inset: -7px;
  }
  .q-icon,
  .timer-pause,
  .timer-toggle {
    position: relative;
  }
  .q-icon::before {
    content: "";
    position: absolute;
    inset: -6px;
  }
  .timer-pause::before {
    content: "";
    position: absolute;
    inset: -8px -4px -8px -8px;
  }
  .timer-toggle::before {
    content: "";
    position: absolute;
    inset: -8px -6px -8px -4px;
  }
  .set-btn {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  /* under 16px, iOS zooms the page when the select is tapped */
  .calc-mode {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 16px;
  }
}