/* =============================================================
   quiz.css — student-facing quiz player.
   Loaded alongside movie.css and scoped the same way (under .hdwk), so it
   inherits the same design tokens (--teal, --accent, --line, --soft, …)
   and reads as part of the same story world, not a bolted-on Bootstrap
   widget. This file carries the same literal-hex-fallback exemption as
   movie.css (see the note at the top of that file).

   The player is a card table. Thirteen-year-olds sort cards into trays,
   pick a lettered card, drag a card up the order — so every tappable thing
   is drawn as a card: a 2px ink outline, a hard offset shadow when it is
   lifted, and the colour of the tray it belongs to. One colour per tray,
   per pair, per option letter; never one teal for everything. The page
   uses the full width of the screen (same 1320px measure as the story
   topbar), and nothing a pupil reads or taps is under 16px.
   ============================================================= */

.hdwk .quiz-wrap {
  max-width: 1320px; margin: 0 auto; padding: 14px 32px 40px;
}

/* On a wide screen the mode chooser and the homework band share one row
   above the question; everything else keeps the full width. Scoped to the
   PLAYER (the wrap that holds the question card) — the library, the results
   page and the drills share this sheet and keep their own stacking. */
@media (min-width: 900px) {
  .hdwk .quiz-wrap:has(> .quiz-card) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 20px; align-items: stretch; }
  .hdwk .quiz-wrap:has(> .quiz-card) > * { grid-column: 1 / -1; margin-top: 0; margin-bottom: 0; }
  .hdwk .quiz-wrap:has(> .quiz-card) > .quiz-mode { grid-column: 1; }
  .hdwk .quiz-wrap:has(> .quiz-card) > .quiz-homework { grid-column: 2; }
}

/* The brand name is two words; on a phone it was breaking between them. */
.hdwk .topbar__brand { white-space: nowrap; }

/* Was the only warm block on a cool page, full-width, first in source order —
   so the eye hit a notice before the question. Now a quiet line that keeps
   the accent only as a rule, and carries an actual link. */
.hdwk .quiz-guestnote {
  margin-bottom: 14px; padding: 6px 14px;
  border-left: 4px solid var(--accent);
  color: var(--ink); font-size: 15px;
}
.hdwk .quiz-guestnote a { color: var(--teal); font-weight: 700; }

/* ---- difficulty picker (per-story quiz) ---- */
.hdwk .quiz-diffpicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.hdwk .quiz-diffpicker__label { font-size: 14px; font-weight: 700; color: var(--ink); margin-right: 2px; }
.hdwk .quiz-chip {
  display: inline-flex; align-items: center; text-decoration: none; font-size: 14px; font-weight: 700;
  color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 7px 15px;
  min-height: 40px;
}
.hdwk .quiz-chip:hover { background: var(--mint); }
.hdwk .quiz-chip.is-active { background: var(--ink); color: var(--paper); }
.hdwk .quiz-crosslink { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--teal); text-decoration: underline; text-decoration-color: var(--teal2); text-underline-offset: 3px; }

/* ---- mixed-quiz filter panel ---- */
.hdwk .quiz-filters { margin-bottom: 18px; padding: 12px 16px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.hdwk .quiz-filters > summary { cursor: pointer; font-weight: 700; color: var(--teal); font-size: 15px; list-style: none; min-height: 32px; display: flex; align-items: center; }
.hdwk .quiz-filters > summary::-webkit-details-marker { display: none; }
.hdwk .quiz-filters__form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; align-items: end; }
.hdwk .quiz-filters__form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink); font-weight: 700; }
.hdwk .quiz-filters__form input, .hdwk .quiz-filters__form select {
  font: inherit; font-size: 15px; padding: 9px 12px; border: 2px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink);
}

.hdwk .quiz-empty { text-align: center; padding: 40px 20px; color: var(--ink); font-size: 17px; }
.hdwk .quiz-empty p { margin-bottom: 16px; }

/* ---- progress rail ---------------------------------------------------
   One dot per question, big enough to read from a desk away. Done = filled
   teal with a tick; part-done = half gold; the one you are on = gold with a
   tangerine ring, and larger. State is shape AND colour, never colour
   alone. */
.hdwk .quiz-rail { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.hdwk .quiz-dot {
  appearance: none; cursor: pointer; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--paper); padding: 0;
  position: relative; display: grid; place-items: center;
  transition: transform .15s ease, background .15s ease;
}
/* The dot stays visually small; the TARGET reaches the project's 44px floor. */
.hdwk .quiz-dot::after { content: ""; position: absolute; inset: -12px; }
.hdwk .quiz-dot:hover { transform: scale(1.15); }
.hdwk .quiz-dot:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hdwk .quiz-dot.is-answered { background: var(--teal2); border-color: var(--teal-deep); }
.hdwk .quiz-dot.is-answered::before {
  content: ""; width: 5px; height: 9px; margin-top: -2px;
  border: solid var(--paper); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
/* Started but not finished — half filled, so the rail reads at a glance as
   "there is something still to do here" without claiming it is empty. */
.hdwk .quiz-dot.is-partial {
  border-color: var(--gold-ink);
  background: linear-gradient(90deg, var(--gold) 50%, var(--paper) 50%);
}
.hdwk .quiz-dot.is-current {
  background: var(--gold); border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--accent);
  transform: scale(1.2);
}
.hdwk .quiz-dot.is-current::before { display: none; }

/* ---- question card ---------------------------------------------------
   The one big card on the table: ink outline, cyan offset shadow. */
.hdwk .quiz-card {
  background: var(--paper); border: 2px solid var(--ink); border-radius: 22px;
  box-shadow: 8px 8px 0 var(--cyan);
  padding: clamp(20px, 3vw, 36px); min-height: 260px;
  animation: hdwk-rise .3s ease both;
}
.hdwk .quiz-q__meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.hdwk .quiz-q__num {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .02em;
  color: var(--paper); background: var(--ink); border-radius: 999px; padding: 6px 14px;
}
/* Difficulty is a coloured sticker with dark text on it — mint, gold,
   tangerine — so the three read apart at a glance and all stay AA. */
.hdwk .quiz-q__diff {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; border: 2px solid var(--ink); color: var(--ink); background: var(--paper);
}
.hdwk .quiz-q__diff--easy { background: var(--color-primary-light); }
.hdwk .quiz-q__diff--medium { background: var(--gold); }
.hdwk .quiz-q__diff--hard { background: var(--accent); }
/* MINIMUM READING SIZE. These are 13-14 year olds, often on a phone, often
   in bad light. Nothing a student reads or taps is below 16px; the things
   they pick between are 17-18px. */
.hdwk .quiz-q__prompt {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15;
  color: var(--ink); margin: 6px 0 22px; text-wrap: balance;
}
.hdwk .quiz-q__body { min-height: 120px; }

/* ---- MC ------------------------------------------------------------
   Each option is a card with its letter on it. The letters are counted by
   CSS (the JS only ever writes the option text), and each gets its own
   colour so "the gold one" is a thing a pupil can say. */
.hdwk .quiz-mc { display: grid; grid-template-columns: 1fr; gap: 12px; counter-reset: quiz-opt; }
@media (min-width: 860px) { .hdwk .quiz-mc { grid-template-columns: 1fr 1fr; } }
.hdwk .quiz-mc__option {
  --opt: var(--cyan);
  --opt-ink: var(--ink);
  display: flex; align-items: center; gap: 14px;
  text-align: left; font: inherit; font-size: 17px; font-weight: 600; line-height: 1.35; cursor: pointer;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 16px; padding: 14px 18px 14px 14px; min-height: 64px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.hdwk .quiz-mc__option::before {
  counter-increment: quiz-opt; content: counter(quiz-opt, upper-alpha);
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  background: var(--opt); color: var(--opt-ink); border: 2px solid var(--ink);
}
.hdwk .quiz-mc__option:nth-child(2) { --opt: var(--gold); }
.hdwk .quiz-mc__option:nth-child(3) { --opt: var(--accent); }
.hdwk .quiz-mc__option:nth-child(4) { --opt: var(--teal2); }
.hdwk .quiz-mc__option:nth-child(5) {
  --opt: var(--ib-blue);
  --opt-ink: var(--paper);
}
.hdwk .quiz-mc__option:nth-child(6) { --opt: var(--mint2); }
.hdwk .quiz-mc__option:hover { background: var(--mint); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.hdwk .quiz-mc__option:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hdwk .quiz-mc__option.is-selected {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--gold); transform: translate(-2px, -2px);
}
.hdwk .quiz-mc__option.is-selected::before { background: var(--gold); color: var(--ink); border-color: var(--paper); }
.hdwk .quiz-mc__option.is-selected::after {
  content: "\2713"; margin-left: auto; font-size: 22px; font-weight: 800; color: var(--gold);
}

/* ---- typed ---- */
.hdwk .quiz-typed { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.hdwk .quiz-typed__label { font-size: 16px; font-weight: 700; color: var(--ink); }
.hdwk .quiz-typed__input {
  font: inherit; font-size: 22px; font-weight: 600; padding: 14px 18px; min-height: 60px;
  border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); color: var(--ink);
}
.hdwk .quiz-typed__input:focus { outline: none; border-color: var(--ink); box-shadow: 4px 4px 0 var(--gold); }
.hdwk .quiz-typed__hint { font-size: 15px; color: var(--muted); }

/* ---- chronology -----------------------------------------------------
   Items are counted, because here the order IS the answer. */
.hdwk .quiz-chrono__hint, .hdwk .quiz-match__hint { font-size: 16px; color: var(--ink); margin: 0 0 14px; }
.hdwk .quiz-chrono { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: quiz-step; }
.hdwk .quiz-chrono__item {
  display: flex; align-items: center; gap: 12px; background: var(--paper); border: 2px solid var(--ink);
  border-radius: 14px; padding: 10px 12px 10px 14px; min-height: 64px; touch-action: none;
}
.hdwk .quiz-chrono__item::before {
  counter-increment: quiz-step; content: counter(quiz-step);
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  background: var(--gold); color: var(--ink); border: 2px solid var(--ink);
}
.hdwk .quiz-chrono__item.is-dragging { box-shadow: 6px 6px 0 var(--accent); z-index: 2; position: relative; background: var(--mint); }
.hdwk .quiz-chrono__handle { cursor: grab; color: var(--muted); font-size: 20px; touch-action: none; user-select: none; padding: 0 4px; }
.hdwk .quiz-chrono__label { flex: 1 1 auto; font-size: 17px; font-weight: 600; color: var(--ink); }
.hdwk .quiz-chrono__controls { display: flex; gap: 6px; }
.hdwk .quiz-chrono__btn {
  appearance: none; cursor: pointer; width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--ink);
  background: var(--paper); color: var(--ink); font-size: 18px; font-weight: 700; line-height: 1;
}
.hdwk .quiz-chrono__btn:disabled { opacity: .25; cursor: default; }
.hdwk .quiz-chrono__btn:hover:not(:disabled) { background: var(--cyan); }
.hdwk .quiz-chrono__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- match-up -------------------------------------------------------
   A pair shares a colour: cyan, gold, tangerine, teal, blue, amber. The
   colour sits on the border AND a thick left stripe so the pairing reads
   even where two tints are close. */
.hdwk .quiz-match { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.hdwk .quiz-match__col { display: flex; flex-direction: column; gap: 10px; }
.hdwk .quiz-match__item {
  --pair: var(--ink);
  --pair-soft: var(--paper);
  text-align: left; font: inherit; font-size: 17px; font-weight: 600; line-height: 1.35; cursor: pointer;
  background: var(--pair-soft); border: 2px solid var(--ink); border-left-width: 8px; border-left-color: var(--pair);
  border-radius: 14px; padding: 12px 14px; min-height: 56px; color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.hdwk .quiz-match__item:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.hdwk .quiz-match__item:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hdwk .quiz-match__item.is-selected {
  background: var(--ink); color: var(--paper); border-left-color: var(--gold);
  box-shadow: 4px 4px 0 var(--gold); transform: translate(-2px, -2px);
}
.hdwk .quiz-match__item.is-paired.quiz-match--c1 {
  --pair: var(--cyan);
  --pair-soft: var(--color-info-bg);
}
.hdwk .quiz-match__item.is-paired.quiz-match--c2 {
  --pair: var(--gold);
  --pair-soft: var(--gold-soft);
}
.hdwk .quiz-match__item.is-paired.quiz-match--c3 {
  --pair: var(--accent);
  --pair-soft: var(--accent-soft);
}
.hdwk .quiz-match__item.is-paired.quiz-match--c4 {
  --pair: var(--teal2);
  --pair-soft: var(--mint);
}
.hdwk .quiz-match__item.is-paired.quiz-match--c5 {
  --pair: var(--ib-blue);
  --pair-soft: var(--color-bg-subtle);
}
.hdwk .quiz-match__item.is-paired.quiz-match--c6 {
  --pair: var(--amber);
  --pair-soft: var(--color-warning-bg);
}
.hdwk .quiz-match__item.is-paired { border-color: var(--pair); border-left-color: var(--pair); }
@media (max-width: 520px) { .hdwk .quiz-match { grid-template-columns: 1fr; } }

/* ---- nav bar --------------------------------------------------------
   Sticks to the foot of the window at every width, as a solid bar, so
   "Next" is always under the thumb however tall the sort board gets. On a
   phone the site's tab bar (and, on a first visit, the cookie notice) is
   fixed to the same edge, so the bar sits above them: quiz.js measures what
   is really there into --quiz-foot, and the value below is what holds until
   it has. It was below the fold on six questions in ten. */
.hdwk .quiz-wrap {
  --quiz-foot: 0px;
}
@media (max-width: 991.98px) {
  .hdwk .quiz-wrap {
    --quiz-foot: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}
.hdwk .quiz-navbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 22px; padding: 12px 0;
  position: sticky; bottom: var(--quiz-foot, 0px); z-index: 5;
  background: var(--mint); border-top: 2px solid var(--line);
}
.hdwk .quiz-navbar__pos {
  font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 6px 14px;
}

.hdwk .quiz-btn {
  font: inherit; font-weight: 800; font-size: 17px; border-radius: 14px; padding: 13px 24px; min-height: 52px; cursor: pointer;
  border: 2px solid var(--ink); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.hdwk .quiz-btn:disabled { opacity: .4; cursor: default; }
.hdwk .quiz-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hdwk .quiz-btn--primary { background: var(--gold); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.hdwk .quiz-btn--primary:hover:not(:disabled) { background: var(--accent); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.hdwk .quiz-btn--primary:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.hdwk .quiz-btn--ghost { background: var(--paper); color: var(--ink); }
.hdwk .quiz-btn--ghost:hover:not(:disabled) { background: var(--mint); }

/* ---- results: score -------------------------------------------------
   Three solid blocks, no gradient: deep teal with a gold number for a great
   run, gold with ink for a fair one, ink with a tangerine number for "have
   another go". Each is a different colour AND a different number, so it is
   never colour alone. */
.hdwk .quiz-score {
  text-align: center; padding: 32px 20px; border-radius: 22px; margin-bottom: 20px;
  border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--cyan); position: relative; color: var(--paper);
}
.hdwk .quiz-score--great { background: var(--teal-deep); }
.hdwk .quiz-score--great .quiz-score__num { color: var(--gold); }
.hdwk .quiz-score--ok { background: var(--gold); color: var(--ink); box-shadow: 8px 8px 0 var(--accent); }
.hdwk .quiz-score--retry { background: var(--ink); box-shadow: 8px 8px 0 var(--gold); }
.hdwk .quiz-score--retry .quiz-score__num { color: var(--accent); }
.hdwk .quiz-score__num { font-family: var(--font-display); font-size: clamp(44px, 6vw, 72px); font-weight: 800; line-height: 1; }
.hdwk .quiz-score__pct { font-size: 17px; font-weight: 600; margin-top: 8px; }
.hdwk .quiz-score__fresh {
  position: absolute; top: 12px; right: 14px; font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; background: var(--paper); color: var(--ink); border-radius: 999px; padding: 4px 10px;
}

/* ---- results: badges ---- */
.hdwk .quiz-badges { margin-bottom: 22px; }
.hdwk .quiz-badges__h { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 10px; }
.hdwk .quiz-badges__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.hdwk .quiz-badge { display: flex; align-items: center; gap: 14px; background: var(--gold-soft); border: 2px solid var(--gold); border-radius: 16px; padding: 14px 16px; }
.hdwk .quiz-badge__icon { font-size: 32px; line-height: 1; }
.hdwk .quiz-badge__name { font-weight: 800; font-size: 17px; color: var(--ink); }
.hdwk .quiz-badge__desc { font-size: 14px; color: var(--muted); }

/* ---- results: mastery ---- */
.hdwk .quiz-mastery { margin-bottom: 22px; }
.hdwk .quiz-mastery__h { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 10px; }
.hdwk .quiz-mastery__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.hdwk .quiz-mastery__row { background: var(--paper); border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.hdwk .quiz-mastery__row.is-mastered { border-color: var(--teal2); background: var(--mint); }
.hdwk .quiz-mastery__head { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; margin-bottom: 8px; }
.hdwk .quiz-mastery__label { font-weight: 700; color: var(--ink); }
.hdwk .quiz-mastery__stat { font-family: var(--font-mono); font-weight: 700; color: var(--teal); }
.hdwk .quiz-mastery__bar { height: 10px; border-radius: 5px; background: var(--mint2); overflow: hidden; border: 1px solid var(--line); }
.hdwk .quiz-mastery__fill { height: 100%; background: var(--cyan); }
.hdwk .quiz-mastery__row.is-mastered .quiz-mastery__fill { background: var(--teal2); }

/* ---- results: review ------------------------------------------------
   Teal, not green. Every other correct/wrong pair in this app is teal
   against tangerine on purpose — a green tick beside the tangerine cross is
   exactly the red/green pairing the palette exists to avoid. */
.hdwk .quiz-review { margin-bottom: 20px; }
.hdwk .quiz-review__h { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 12px; }
.hdwk .quiz-review__item {
  display: flex; gap: 14px; padding: 16px 18px; margin-bottom: 10px;
  background: var(--paper); border: 2px solid var(--line); border-left-width: 8px; border-radius: 16px;
}
.hdwk .quiz-review__item.is-correct { border-left-color: var(--teal2); }
.hdwk .quiz-review__item.is-wrong { border-left-color: var(--accent); }
.hdwk .quiz-review__item.is-partial { border-left-color: var(--gold); }
.hdwk .quiz-review__mark {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; color: var(--ink);
}
.hdwk .quiz-review__item.is-correct .quiz-review__mark { background: var(--teal2); }
.hdwk .quiz-review__item.is-wrong .quiz-review__mark { background: var(--accent); }
/* Part-right earns marks, so it sits on the right-answer side of the palette
   — gold, and showing its own count instead of a tick. */
.hdwk .quiz-review__item.is-partial .quiz-review__mark { background: var(--gold); font-size: 12px; font-family: var(--font-mono); }
.hdwk .quiz-review__body { min-width: 0; flex: 1 1 auto; }
.hdwk .quiz-review__part { font-size: 15px; color: var(--ink); font-weight: 700; }
.hdwk .quiz-review__part::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); border: 1.5px solid var(--ink); margin-right: 6px; vertical-align: -1px; }
.hdwk .quiz-review__held {
  font-size: 15px; color: var(--ink); background: var(--gold-soft);
  border: 2px solid var(--gold-line); padding: 12px 14px; border-radius: 14px;
}
.hdwk .quiz-review__prompt { font-weight: 700; font-size: 17px; color: var(--ink); margin-bottom: 6px; }
.hdwk .quiz-review__answer, .hdwk .quiz-review__correct { font-size: 15px; color: var(--muted); }
/* Highlighter, not coloured type: tangerine on white is 3:1, so the answer
   text stays ink and the colour sits behind it and under it. */
.hdwk .quiz-review__correct span, .hdwk .quiz-review__answer span {
  color: var(--ink); font-weight: 700; padding: 1px 5px; border-radius: 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hdwk .quiz-review__correct span { background: var(--mint2); border-bottom: 2px solid var(--teal2); }
.hdwk .quiz-review__answer span { background: var(--accent-soft); border-bottom: 2px solid var(--accent); }
.hdwk .quiz-review__explain { font-size: 15px; color: var(--ink); margin-top: 8px; line-height: 1.5; }

.hdwk .quiz-endactions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hdwk .quiz-endactions__note { margin: 0; align-self: center; font-weight: 700; color: var(--ink); }

@media (max-width: 600px) {
  .hdwk .quiz-wrap { padding: 10px 16px 24px; }
  .hdwk .quiz-crosslink { margin-left: 0; width: 100%; }
  .hdwk .quiz-card { padding: 18px 16px; border-radius: 18px; box-shadow: 5px 5px 0 var(--cyan); }
  .hdwk .quiz-btn { padding: 12px 18px; font-size: 16px; }
  .hdwk .quiz-navbar__pos { font-size: 14px; padding: 5px 11px; }
}

/* ---- classify: sort cards into trays --------------------------------
   Two grounds. The tray at the top is where unplaced cards live; the
   trays below are where they go. A card is the same object in both, so
   it keeps its appearance when it moves — moving it must not look like
   replacing it. Each tray has its own colour; a card takes the colour
   of the tray it lands in, so the finished board is a colour map of the
   pupil's answer.

   Sized for two readers at once: a pupil holding a phone, and a class
   reading the projector from the back of Rm 523. `.quiz-sort--board`
   scales the type and the targets rather than restyling anything, so
   there is one set of rules to keep true, not two. */
.hdwk .quiz-sort__hint { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0 0 8px; }

/* Correctness is withheld until the end, so the interface must be confident
   about the one thing it CAN report: how much is placed. */
.hdwk .quiz-sort__count {
  display: inline-block; font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  color: var(--ink); background: var(--gold); border: 2px solid var(--ink); border-radius: 999px;
  padding: 4px 12px; margin: 0 0 12px;
}

/* Screen-reader-only announcements ("Iron placed in Simple elemental"). */
.hdwk .quiz-sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* cursor:grab does not exist on a touch screen, so nothing at rest said these
   could be moved. The grip does. */
.hdwk .quiz-sort__grip {
  color: var(--muted); font-size: 13px; margin-right: 8px; vertical-align: 1px;
}

.hdwk .quiz-sort__tray {
  display: flex; flex-wrap: wrap; gap: 10px;
  min-height: 72px; padding: 12px;
  border: 2px dashed var(--ink); border-radius: var(--radius);
  background: var(--cream); margin-bottom: 16px;
}

.hdwk .quiz-sort__done {
  font-size: 16px; font-weight: 700; color: var(--ink); margin: 4px auto;
  background: var(--color-primary-light); border: 2px solid var(--ink); border-radius: 999px; padding: 8px 16px;
}
.hdwk .quiz-sort__done::before { content: "\2713  "; }

.hdwk .quiz-sort__board {
  display: grid;
  grid-template-columns: repeat(var(--quiz-sort-cols, 3), minmax(0, 1fr));
  gap: 14px;
}

/* One colour per tray. The first five trays on a board are cyan, gold,
   tangerine, teal, blue; a second branch of a tree carries on from teal so
   the two sides never share a colour. Dark text on the light ones, white on
   the blue. */
.hdwk .quiz-sort__bucket {
  --bk: var(--cyan);
  --bk-ink: var(--ink);
  --bk-soft: var(--color-info-bg);
  border: 2px solid var(--ink); border-radius: var(--radius);
  background: var(--bk-soft); padding: 0 0 10px; overflow: hidden;
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.hdwk .quiz-sort__bucket:nth-child(2) {
  --bk: var(--gold);
  --bk-soft: var(--gold-soft);
}
.hdwk .quiz-sort__bucket:nth-child(3) {
  --bk: var(--accent);
  --bk-soft: var(--accent-soft);
}
.hdwk .quiz-sort__bucket:nth-child(4) {
  --bk: var(--teal2);
  --bk-soft: var(--mint);
}
.hdwk .quiz-sort__bucket:nth-child(5) {
  --bk: var(--ib-blue);
  --bk-ink: var(--paper);
  --bk-soft: var(--color-bg-subtle);
}
.hdwk .quiz-sort__bucket:nth-child(6) {
  --bk: var(--amber);
  --bk-soft: var(--color-warning-bg);
}
.hdwk .quiz-sort__branch:nth-child(2) .quiz-sort__bucket:nth-child(1) {
  --bk: var(--teal2);
  --bk-ink: var(--ink);
  --bk-soft: var(--mint);
}
.hdwk .quiz-sort__branch:nth-child(2) .quiz-sort__bucket:nth-child(2) {
  --bk: var(--ib-blue);
  --bk-ink: var(--paper);
  --bk-soft: var(--color-bg-subtle);
}
.hdwk .quiz-sort__branch:nth-child(2) .quiz-sort__bucket:nth-child(3) {
  --bk: var(--amber);
  --bk-ink: var(--ink);
  --bk-soft: var(--color-warning-bg);
}

/* The drop target lights up under the pointer. Without it a drag onto a
   tray is a guess until you let go. */
.hdwk .quiz-sort__bucket.is-over {
  box-shadow: 5px 5px 0 var(--ink); transform: translate(-2px, -2px);
}

.hdwk .quiz-sort__bucket-name {
  font-family: var(--font-display); font-size: 17px; font-weight: 800; line-height: 1.2;
  color: var(--bk-ink); background: var(--bk); border-bottom: 2px solid var(--ink);
  margin: 0 0 10px; padding: 10px 12px; text-align: center; min-height: 48px;
  display: flex; align-items: center; justify-content: center;
  /* A long label must never escape its box. "Compound substance" in a
     third-of-a-branch column at board size spilled straight over the
     border and over the next bucket. */
  overflow-wrap: anywhere;
  /* Not `auto`: on a phone the browser broke "vibrating" as "vi-brating" in
     a heading with room for the whole word on the next line. */
  hyphens: manual;
}

@media (max-width: 600px) {
  .hdwk .quiz-sort__bucket-name { font-size: 15px; padding: 8px 8px; }
}

.hdwk .quiz-sort__drop { display: flex; flex-direction: column; gap: 8px; min-height: 56px; padding: 0 10px; }

/* An empty tray used to be 44px of blank white saying nothing. The drop div
   is built by appendChild only, so :empty matches reliably. */
.hdwk .quiz-sort__drop:empty {
  display: grid; place-items: center; margin: 0 10px; padding: 0;
  border: 2px dashed var(--bk); border-radius: 12px;
}

.hdwk .quiz-sort__drop:empty::after {
  content: "drop cards here"; font-size: 15px; font-weight: 600; color: var(--muted);
}

.hdwk .quiz-sort__card {
  font: inherit; font-size: 17px; font-weight: 700; color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink);
  border-radius: 12px; padding: 11px 14px;
  min-height: 48px;              /* thumb-sized: this is tapped, not clicked */
  cursor: grab; text-align: center;
  touch-action: none;            /* or the browser scrolls instead of dragging */
  user-select: none;
  /* Cards read as objects that lift; trays as flat ground beneath them. */
  box-shadow: 2px 2px 0 var(--ink);
}
/* A placed card takes its tray's colour on the stripe down its left edge. */
.hdwk .quiz-sort__bucket .quiz-sort__card { border-left: 8px solid var(--bk); box-shadow: none; }

.hdwk .quiz-sort__card:hover { background: var(--mint); }
.hdwk .quiz-sort__card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* In hand: the card goes ink with a gold shadow, the same "picked" signal
   as a chosen option, so one rule serves every question type. */
.hdwk .quiz-sort__card.is-selected {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--gold); transform: translate(-2px, -2px);
}
.hdwk .quiz-sort__card.is-selected .quiz-sort__grip,
.hdwk .quiz-sort__card.is-selected .quiz-sort__cap { color: var(--mint2); }

.hdwk .quiz-sort__card.is-dragging {
  cursor: grabbing; z-index: 5; position: relative; background: var(--paper); color: var(--ink);
  box-shadow: 6px 6px 0 var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
  .hdwk .quiz-sort__card { transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease; }
}
@media (prefers-reduced-motion: reduce) {
  .hdwk .quiz-card, .hdwk .quiz-mc__option, .hdwk .quiz-match__item, .hdwk .quiz-btn,
  .hdwk .quiz-dot, .hdwk .quiz-sort__bucket { transition: none; animation: none; }
}

/* ---- board mode: the same quiz, read from the back of the room ----
   Scoped to `.quiz-board` on the root, which the template sets, rather than
   to a class on the bucket grid: the unplaced cards sit in the tray ABOVE
   that grid, so a modifier on the grid would scale up half the cards and
   leave the other half small. */
.quiz-board .quiz-sort__card { font-size: 22px; min-height: 64px; padding: 14px 18px; }
.quiz-board .quiz-sort__bucket-name { font-size: 20px; }
.quiz-board .quiz-sort__drop { min-height: 72px; }
.quiz-board .quiz-sort__hint { font-size: 18px; }
.quiz-board .quiz-sort__tray { min-height: 80px; }
.quiz-board .quiz-q__prompt { font-size: 36px; line-height: 1.15; }
.quiz-board .quiz-mc__option,
.quiz-board .quiz-match__item { font-size: 21px; min-height: 64px; }
.quiz-board .quiz-typed__input { font-size: 26px; }

/* Five trays do not fit across a phone. One column each is unreadable,
   so they wrap to two and the labels stay legible. */
@media (max-width: 600px) {
  .hdwk .quiz-sort__board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hdwk .quiz-sort__bucket-name { font-size: 15px; padding: 8px; min-height: 44px; }
  .hdwk .quiz-sort__card { font-size: 16px; padding: 10px 8px; }
  .hdwk .quiz-sort__drop, .hdwk .quiz-sort__drop:empty { padding: 0 8px; margin: 0 8px; }
  .hdwk .quiz-sort__drop:empty { padding: 0; }
}

/* Shown in every tray only while a card is selected — see quiz.js. */
.hdwk .quiz-sort__here {
  font: inherit; font-size: 16px; font-weight: 800;
  color: var(--ink); background: var(--paper);
  border: 2px dashed var(--ink); border-radius: 12px;
  padding: 10px; min-height: 48px; cursor: pointer;
}
.hdwk .quiz-sort__here:hover { background: var(--gold); border-style: solid; }
.hdwk .quiz-sort__here:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.quiz-board .quiz-sort__here { font-size: 18px; min-height: 60px; }

/* ---- picture cards ----------------------------------------------------
   A card can carry a ball-and-stick molecule instead of a formula, the way
   the booklet asks the question: look at the atoms, not at a symbol. */
.hdwk .quiz-sort__card--pic { padding: 10px 12px; min-width: 124px; }

.hdwk .quiz-mol {
  display: block;
  width: 104px;
  height: 62px;
  margin: 0 auto;
  overflow: visible;
}

.hdwk .quiz-sort__cap {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 4px;
}

/* ---- the tree layout --------------------------------------------------
   With a layout the trays sit under their branch, so the board mirrors the
   booklet's diagram: substances on one side, mixtures on the other, and it is
   visible WHICH branch each group belongs to. Without one they stay a plain
   grid, which is right for a two-tray question. */
.hdwk .quiz-sort__board--tree {
  display: grid;
  /* 400px, not 260: a branch holding three trays side by side needs real
     width, and at 260 the two branches sat next to each other leaving ~95px
     per tray. Below this the branches stack, which still reads as the tree
     — substances above mixtures — and gives every label room. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 16px;
  align-items: start;
}

.hdwk .quiz-sort__branch {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--paper);
}
.hdwk .quiz-sort__branch:nth-child(2) { background: var(--cream); }

.hdwk .quiz-sort__branch-name {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  margin: 0 0 10px;
}

.hdwk .quiz-sort__branch-cols {
  display: grid;
  grid-template-columns: repeat(var(--quiz-branch-cols, 2), minmax(0, 1fr));
  gap: 10px;
}

.quiz-board .quiz-mol { width: 150px; height: 92px; }
.quiz-board .quiz-sort__branch-name { font-size: 18px; }
/* Inside a branch the trays share the branch's width, so they cannot carry
   the full board-mode heading size. */
.quiz-board .quiz-sort__branch .quiz-sort__bucket-name { font-size: 16px; }
.quiz-board .quiz-sort__cap { font-size: 15px; }

@media (max-width: 600px) {
  /* Two trays side by side inside a branch is already tight on a phone;
     three is unreadable, so a branch stacks instead. */
  .hdwk .quiz-sort__branch-cols { grid-template-columns: 1fr; }
  .hdwk .quiz-mol { width: 78px; height: 48px; }
  .hdwk .quiz-sort__card--pic { min-width: 92px; }
}

/* ---- the quiz library -------------------------------------------------
   One page listing every quiz a student can take. Before this a quiz was
   only reachable if someone handed you its URL. */
.hdwk .quiz-lib__h {
  font-family: var(--font-display); font-size: 26px; color: var(--teal);
  margin: 0 0 6px;
}

.hdwk .quiz-lib__lede { color: var(--muted); font-size: 14px; margin: 0 0 20px; }

/* ---- Claim a guest quiz after signing in ---------------------------- */
.hdwk .quiz-claim {
  max-width: 34rem;
  margin: 2rem auto;
  padding: 1.75rem;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  text-align: center;
}
.hdwk .quiz-claim__title {
  margin: 0 0 .75rem;
  font-size: 1.35rem;
  color: var(--teal);
}
.hdwk .quiz-claim__score { margin: 0 0 .75rem; font-size: 1.1rem; color: var(--ink); }
.hdwk .quiz-claim__note { margin: 0 0 1.25rem; color: var(--muted); font-size: .95rem; }
.hdwk .quiz-claim__actions {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
}


/* ---- board mode: the gaps ------------------------------------------------
   The player scales its cards but everything AROUND them stayed phone-sized,
   and drag-to-order was not scaled at all. A 760px column on a 1920px
   projector also wastes the room it is being shown in. */
.quiz-board .quiz-wrap { max-width: 1600px; }

/* The teacher's screen — the guest note is noise there. */
.quiz-board .quiz-guestnote { display: none; }

.quiz-board .quiz-chrono__item { font-size: 20px; padding: 14px 12px; }
.quiz-board .quiz-chrono__label { font-size: 21px; }
.quiz-board .quiz-chrono__btn { width: 48px; height: 48px; font-size: 22px; }
.quiz-board .quiz-chrono__hint { font-size: 18px; }
.quiz-board .quiz-sort__count { font-size: 16px; }
.quiz-board .quiz-sort__drop:empty::after { font-size: 17px; }

.quiz-board .quiz-dot { width: 24px; height: 24px; }
.quiz-board .quiz-q__num { font-size: 16px; }
.quiz-board .quiz-q__diff { font-size: 15px; padding: 6px 16px; }
.quiz-board .quiz-btn { font-size: 19px; padding: 14px 26px; }
.quiz-board .quiz-navbar__pos { font-size: 17px; }

/* At the back of a room a 2px border is not a signal. */
.quiz-board .quiz-sort__bucket.is-over { box-shadow: 8px 8px 0 var(--ink); }

/* The payoff moment of a whole-class quiz was its least readable screen. */
.quiz-board .quiz-review__prompt { font-size: 20px; }
.quiz-board .quiz-review__answer,
.quiz-board .quiz-review__correct,
.quiz-board .quiz-review__explain { font-size: 18px; }
.quiz-board .quiz-score__num { font-size: 80px; }

/* The guest note on the RESULTS screen offers the save, so it needs more
   presence than the quiet pre-quiz note (.quiz-guestnote) it sits near. */
.hdwk .quiz-guestsave {
  margin: 0 0 14px;
  padding: 16px 18px;
  background: var(--gold-soft);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  text-align: center;
}
.hdwk .quiz-guestsave__text {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 16px;
}

/* ---- set homework ----
   The band at the top of a homework: what it is, when it is due. A set
   homework has no filter controls (the questions are the teacher's, fixed),
   so this replaces them rather than sitting beside them. */
.hdwk .quiz-homework {
  margin-bottom: 14px; padding: 14px 18px 14px 20px;
  border: 2px solid var(--ink); border-left: 10px solid var(--gold);
  border-radius: var(--radius); background: var(--paper);
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.hdwk .quiz-homework__title { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.2; color: var(--ink); }
.hdwk .quiz-homework__meta { font-size: 15px; color: var(--muted); }
.hdwk .quiz-homework__meta strong { color: var(--accent); }
/* The preview note — second meta line — is a tangerine sticker, so a teacher
   never mistakes a run-through for a recorded attempt. */
.hdwk .quiz-homework__meta + .quiz-homework__meta {
  align-self: flex-start; margin-top: 4px; padding: 3px 10px; border-radius: 999px;
  background: var(--accent-soft); border: 1.5px solid var(--accent); color: var(--ink); font-weight: 600; font-size: 13.5px;
}

/* Practice / quiz chooser. Two cards, not a switch: one of them writes a
   score down and the other deliberately does not, and that is worth spelling
   out. Selection carries on border, weight, tint AND a tick — never colour
   alone. */
.hdwk .quiz-mode {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.hdwk .quiz-mode__opt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 16px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  text-decoration: none;
  min-height: 56px;
  transition: background .12s ease;
}

.hdwk .quiz-mode__opt:hover { background: var(--mint); }
.hdwk .quiz-mode__opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hdwk .quiz-mode__opt.is-on { background: var(--ink); }

.hdwk .quiz-mode__name {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
}
.hdwk .quiz-mode__opt.is-on .quiz-mode__name { color: var(--gold); }
.hdwk .quiz-mode__opt.is-on .quiz-mode__name::after { content: " \2713"; }

.hdwk .quiz-mode__what {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-top: 2px;
}
.hdwk .quiz-mode__opt.is-on .quiz-mode__what { color: var(--mint2); }

/* The reference table, practice only. Closed by default so it never pushes
   the question off the screen. */
.hdwk .quiz-ref {
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.hdwk .quiz-ref__open {
  cursor: pointer;
  padding: 11px 14px;
  font-weight: 700;
  color: var(--teal);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.hdwk .quiz-ref__scroll { overflow-x: auto; padding: 0 12px 12px; }
/* Fixed layout, or an empty gap cell collapses to nothing and the groups
   stop lining up — helium ends up next to hydrogen instead of above neon.
   The min-width makes the panel scroll rather than squeeze. */
.hdwk .quiz-ref__table {
  border-collapse: separate;
  border-spacing: 2px;
  table-layout: fixed;
  min-width: 666px;
}

.hdwk .quiz-ref__cell {
  width: 34px;
  height: 34px;
  padding: 2px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  line-height: 1.05;
}

.hdwk .quiz-ref__gap { width: 34px; height: 34px; padding: 0; border: 0; }
.hdwk .quiz-ref__mass { display: block; font-size: 8px; color: var(--muted); }
.hdwk .quiz-ref__sym { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.hdwk .quiz-ref__z { display: block; font-size: 8px; color: var(--muted); }

/* =============================================================
   The player on a phone (390px is the size it is checked at).
   Everything a pupil taps is at least 44px; everything they read is at
   least 16px.
   ============================================================= */

/* A question's picture: "look at the box below" needs the box. */
.hdwk .quiz-q__figure { max-width: 440px; margin: 0 0 16px; }
.hdwk .quiz-q__figure svg { display: block; width: 100%; height: auto; }

/* Said once, when answers from an earlier visit were put back. */
.hdwk .quiz-restored {
  margin: 0 0 12px; padding: 10px 14px; font-size: 16px; font-weight: 700; color: var(--ink);
  background: var(--gold-soft); border: 2px solid var(--gold-line); border-radius: 12px;
}

/* The way back out is a real target, not a 30px chip. Scoped to the player
   page (the only one that carries the library URL) — the story pages share
   the chip. */
.hdwk[data-quiz-library-url] .topbar .chip-link { min-height: 44px; padding: 0 16px; font-size: 16px; color: var(--ink); }

/* The drag handle is a thumb-sized grip. */
.hdwk .quiz-chrono__handle {
  min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; font-size: 24px;
}

@media (max-width: 767px) {
  /* A finger on a card or a row scrolls the page; placing is by tap, and
     ordering by the arrows or the grip (see qtypes/classify.js). */
  .hdwk .quiz-sort__card { touch-action: manipulation; cursor: pointer; }
  .hdwk .quiz-chrono__item { touch-action: pan-y; }
}

@media (max-width: 600px) {
  /* The bar runs edge to edge so nothing shows through beside it. */
  .hdwk .quiz-navbar { margin-left: -16px; margin-right: -16px; padding: 10px 16px; }
  .hdwk .quiz-navbar__pos { font-size: 16px; }

  /* One row that scrolls, dots a full 44px apart, so a thumb lands on the
     dot it meant. Wrapped, the 44px targets of neighbouring dots overlapped. */
  .hdwk .quiz-rail {
    flex-wrap: nowrap; overflow-x: auto; gap: 20px; padding: 12px 12px; margin: 0 -16px 8px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .hdwk .quiz-rail::-webkit-scrollbar { display: none; }
  .hdwk .quiz-dot { flex: 0 0 24px; width: 24px; height: 24px; }
  .hdwk .quiz-dot::after { inset: -10px; }

  .hdwk .quiz-q__meta { font-size: 16px; }
  .hdwk .quiz-q__num, .hdwk .quiz-q__diff { font-size: 16px; }
  .hdwk .quiz-typed__hint,
  .hdwk .quiz-homework__meta,
  .hdwk .quiz-sort__bucket-name,
  .hdwk .quiz-sort__drop:empty::after,
  .hdwk .quiz-review__part,
  .hdwk .quiz-review__answer,
  .hdwk .quiz-review__correct,
  .hdwk .quiz-review__explain { font-size: 16px; }
  .hdwk[data-quiz-library-url] .topbar__sub { font-size: 16px; }
  /* A long homework title was squeezed between the brand and Back and
     broken over five lines. It gets the line under them instead. */
  .hdwk[data-quiz-library-url] .topbar { flex-wrap: wrap; row-gap: 4px; }
  .hdwk[data-quiz-library-url] .topbar__sub { order: 3; flex: 1 1 100%; }
}

/* =============================================================
   The types built from short answers: tick-all, formula, calculation,
   balancing, equations, multi-part (qtypes/*.js, qtypes/_parts.js).
   Same card table as everything above: 2px ink outlines, a hard offset
   shadow on what is in hand, one colour per kind of thing. Boxes a pupil
   types in are white; boxes a pupil still has to fill are gold; what is
   filled goes mint.
   ============================================================= */

/* ---- tick all that apply: the letter becomes a box to tick ---- */
.hdwk .quiz-mc__hint { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 12px; }
.hdwk .quiz-mc__option--tick::before {
  content: ""; counter-increment: none; background: var(--paper); border-radius: 8px;
}
.hdwk .quiz-mc__option--tick.is-selected::before {
  content: "\2713"; background: var(--gold); color: var(--ink); border-color: var(--paper);
}
.hdwk .quiz-mc__option--tick.is-selected::after { content: none; }

/* ---- one short answer ---- */
.hdwk .quiz-part {
  font: inherit; font-size: 20px; font-weight: 600; color: var(--ink);
  min-height: 52px; padding: 8px 14px; width: 100%; max-width: 420px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 12px;
}
.hdwk .quiz-part--short { width: 6.5em; max-width: 100%; text-align: center; padding: 8px 6px; }
.hdwk .quiz-part:focus,
.hdwk .quiz-formula__input:focus { outline: none; box-shadow: 4px 4px 0 var(--gold); }
.hdwk .quiz-part::placeholder { color: var(--muted); font-weight: 400; }

/* ---- the formula field ---------------------------------------------
   The keys sit directly above the field so they stay in view with a
   phone's keyboard up. Subscript and superscript are switches: off they
   are white, on they are ink with a gold shadow — the same "in hand" look
   as a picked card — and say so in words underneath. */
.hdwk .quiz-formula { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.hdwk .quiz-fkeys { display: flex; flex-wrap: wrap; gap: 8px; }
.hdwk .quiz-fkey {
  appearance: none; cursor: pointer; font: inherit; font-size: 22px; font-weight: 800; line-height: 1;
  flex: 1 1 56px; min-width: 56px; min-height: 52px; padding: 6px 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 12px;
  box-shadow: 3px 3px 0 var(--cyan);
}
.hdwk .quiz-fkey[aria-pressed] { flex: 1 1 148px; box-shadow: 3px 3px 0 var(--accent); white-space: nowrap; }
.hdwk .quiz-fkey sub, .hdwk .quiz-fkey sup { font-size: .65em; }
.hdwk .quiz-fkey__name { font-size: 16px; font-weight: 700; }
.hdwk .quiz-fkey:hover { background: var(--mint); }
.hdwk .quiz-fkey:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.hdwk .quiz-fkey:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hdwk .quiz-fkey.is-on {
  background: var(--ink); color: var(--gold); box-shadow: 3px 3px 0 var(--gold);
}
.hdwk .quiz-formula__input {
  font: inherit; font-size: 26px; font-weight: 700; letter-spacing: .02em; color: var(--ink);
  min-height: 60px; padding: 10px 16px; width: 100%;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 14px;
}
.hdwk .quiz-formula__state {
  font-size: 16px; font-weight: 700; color: var(--ink);
  background: var(--gold-soft); border: 2px solid var(--gold-line); border-radius: 10px; padding: 6px 12px;
}
.hdwk .quiz-formula__state:empty { display: none; }
.hdwk .quiz-formula__preview { min-height: 44px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hdwk .quiz-formula__reads { font-size: 16px; color: var(--muted); }
.hdwk .quiz-formula__typeset {
  font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1.5;
  background: var(--mint2); border-bottom: 3px solid var(--teal2); border-radius: 6px; padding: 0 8px;
}
.hdwk .quiz-formula__typeset sub, .hdwk .quiz-formula__typeset sup,
.hdwk .quiz-eq__formula sub, .hdwk .quiz-eq__formula sup { font-size: .68em; line-height: 0; }
.hdwk .quiz-formula__tip { font-size: 16px; color: var(--muted); margin: 14px 0 0; }
@media (hover: none) { .hdwk .quiz-formula__tip { display: none; } }

/* Several formula fields in one question: only the one in use shows keys. */
.hdwk .quiz-formula--compact { gap: 6px; }
.hdwk .quiz-formula--compact .quiz-fkeys,
.hdwk .quiz-formula--compact .quiz-formula__state { display: none; }
.hdwk .quiz-formula--compact.is-active .quiz-fkeys { display: flex; }
.hdwk .quiz-formula--compact.is-active .quiz-formula__state:not(:empty) { display: block; }
.hdwk .quiz-formula--compact .quiz-formula__input { font-size: 22px; min-height: 52px; padding: 8px 12px; }
.hdwk .quiz-formula--compact .quiz-formula__preview { min-height: 0; }
.hdwk .quiz-formula--compact .quiz-formula__typeset { font-size: 24px; }

/* ---- a calculation: number, then unit ---- */
.hdwk .quiz-numeric { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.hdwk .quiz-numeric__field { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.hdwk .quiz-part--number { width: 9em; font-size: 24px; min-height: 60px; }
.hdwk .quiz-numeric__unit {
  font-size: 22px; font-weight: 800; color: var(--ink); min-height: 60px; display: inline-flex; align-items: center;
}
.hdwk .quiz-numeric__unitlabel { margin: 18px 0 8px; }
.hdwk .quiz-part--unit { width: 9em; }
.hdwk .quiz-units { display: flex; flex-wrap: wrap; gap: 10px; }
.hdwk .quiz-units__opt {
  appearance: none; cursor: pointer; font: inherit; font-size: 19px; font-weight: 700; color: var(--ink);
  min-height: 52px; min-width: 76px; padding: 8px 18px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--cyan);
}
.hdwk .quiz-units__opt:hover { background: var(--mint); }
.hdwk .quiz-units__opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hdwk .quiz-units__opt.is-selected { background: var(--ink); color: var(--gold); box-shadow: 3px 3px 0 var(--gold); }

/* ---- equations: balancing boxes and slots ---- */
.hdwk .quiz-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 10px; margin-top: 6px; }
.hdwk .quiz-eq__term { display: inline-flex; align-items: center; gap: 8px; }
.hdwk .quiz-eq__box { width: 56px; min-height: 56px; font-size: 24px; font-weight: 800; background: var(--gold-soft); }
.hdwk .quiz-eq__box:not(:placeholder-shown), .hdwk .quiz-eq__box:focus { background: var(--paper); }
.hdwk .quiz-eq__formula { font-size: 28px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.hdwk .quiz-eq__sign { font-size: 26px; font-weight: 800; color: var(--muted); }
.hdwk .quiz-eq__sign--arrow { color: var(--accent); font-size: 32px; }
.hdwk .quiz-eq__input { flex: 1 1 200px; max-width: 320px; }
.hdwk .quiz-eq--formula > .quiz-formula { flex: 1 1 220px; }
.hdwk .quiz-eq__slot,
.hdwk .quiz-cloze__gap {
  appearance: none; cursor: pointer; font: inherit; font-size: 18px; font-weight: 700; color: var(--muted);
  min-height: 48px; min-width: 112px; padding: 6px 14px;
  background: var(--gold-soft); border: 2px dashed var(--ink); border-radius: 12px;
}
.hdwk .quiz-eq__slot:focus-visible, .hdwk .quiz-cloze__gap:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hdwk .quiz-eq__slot.is-active,
.hdwk .quiz-cloze__gap.is-active { background: var(--gold); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); border-style: solid; }
.hdwk .quiz-eq__slot.is-filled,
.hdwk .quiz-cloze__gap.is-filled { background: var(--mint2); color: var(--ink); border-style: solid; }

/* ---- the word bank: cards to pick up by tap ---- */
.hdwk .quiz-bank {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding: 14px;
  background: var(--soft); border: 2px dashed var(--ink); border-radius: 16px;
}
.hdwk .quiz-bank__word {
  appearance: none; cursor: pointer; font: inherit; font-size: 18px; font-weight: 700; color: var(--ink);
  min-height: 48px; padding: 8px 16px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink);
}
.hdwk .quiz-bank__word:hover { background: var(--mint); }
.hdwk .quiz-bank__word:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.hdwk .quiz-bank__word:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hdwk .quiz-bank__word.is-used { box-shadow: none; border-style: dashed; color: var(--muted); }

/* ---- multi-part: passage, table, list ---- */
.hdwk .quiz-cloze { font-size: 19px; line-height: 2.9; color: var(--ink); margin: 0; }
.hdwk .quiz-cloze__gap { display: inline-flex; align-items: center; justify-content: center; margin: 0 4px; vertical-align: middle; line-height: 1.2; }
.hdwk .quiz-cloze .quiz-part { display: inline-block; width: 8.5em; margin: 0 4px; vertical-align: middle; line-height: 1.2; }
.hdwk .quiz-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.hdwk .quiz-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 17px; color: var(--ink); border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; }
.hdwk .quiz-table th, .hdwk .quiz-table td { padding: 10px 10px; text-align: center; border-bottom: 2px solid var(--line); border-left: 2px solid var(--line); }
.hdwk .quiz-table tr > :first-child { border-left: 0; text-align: left; }
.hdwk .quiz-table tbody tr:last-child > * { border-bottom: 0; }
.hdwk .quiz-table thead th { background: var(--cyan); color: var(--ink); font-weight: 800; border-bottom: 2px solid var(--ink); }
.hdwk .quiz-table tbody th { background: var(--soft); font-weight: 700; }
.hdwk .quiz-table td { font-weight: 600; }
.hdwk .quiz-table__blank { background: var(--gold-soft); }
.hdwk .quiz-table__blank .quiz-part--short { width: 100%; min-width: 64px; }
.hdwk .quiz-table__blank .quiz-formula { min-width: 150px; text-align: left; }
.hdwk .quiz-plist { display: flex; flex-direction: column; gap: 14px; }
.hdwk .quiz-plist__row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr); gap: 12px; align-items: start; }
.hdwk .quiz-plist__label { font-size: 18px; font-weight: 700; color: var(--ink); padding-top: 12px; }

/* ---- review: what exactly was wrong ---- */
.hdwk .quiz-review__feedback {
  font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.45;
  background: var(--gold-soft); border-left: 5px solid var(--gold); border-radius: 0 10px 10px 0;
  padding: 8px 12px; margin: 8px 0;
}
.hdwk .quiz-review__parts { list-style: none; margin: 6px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hdwk .quiz-review__parts li {
  display: grid; grid-template-columns: 28px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 4px 10px; align-items: baseline;
  font-size: 16px; color: var(--ink); padding: 6px 8px; border-radius: 8px;
}
.hdwk .quiz-review__parts li.is-ok { background: var(--soft); }
.hdwk .quiz-review__parts li.is-off { background: var(--accent-soft); }
.hdwk .quiz-review__partmark { font-weight: 800; text-align: center; }
.hdwk .quiz-review__partlabel { color: var(--muted); }
.hdwk .quiz-review__partgiven { font-weight: 700; }
.hdwk .quiz-review__partright { font-weight: 700; }

@media (max-width: 600px) {
  .hdwk .quiz-fkey[aria-pressed] { flex: 1 1 132px; }
  .hdwk .quiz-eq--slots { flex-direction: column; align-items: stretch; gap: 6px; }
  .hdwk .quiz-eq--slots .quiz-eq__sign { align-self: center; line-height: 1; }
  .hdwk .quiz-eq--slots .quiz-eq__sign--arrow { transform: rotate(90deg); }
  .hdwk .quiz-eq__input { flex: 0 0 auto; max-width: none; }
  .hdwk .quiz-eq__formula { font-size: 24px; }
  .hdwk .quiz-eq__box { width: 52px; }
  .hdwk .quiz-plist__row { grid-template-columns: 1fr; gap: 4px; }
  .hdwk .quiz-plist__label { padding-top: 0; }
  /* A table is too wide for a phone, so each row becomes a card: the row's
     name across the top, then its cells side by side, each under its own
     column heading. Nothing scrolls sideways. */
  .hdwk .quiz-table__scroll { overflow-x: visible; }
  .hdwk .quiz-table { font-size: 16px; border: 0; border-radius: 0; overflow: visible; display: block; }
  .hdwk .quiz-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hdwk .quiz-table tbody { display: flex; flex-direction: column; gap: 12px; }
  .hdwk .quiz-table tr {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    border: 2px solid var(--ink); border-radius: 14px; overflow: hidden;
  }
  .hdwk .quiz-table tbody th {
    grid-column: 1 / -1; background: var(--cyan); border: 0; border-bottom: 2px solid var(--ink);
    padding: 8px 12px; font-size: 17px; text-align: left;
  }
  .hdwk .quiz-table td {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
    padding: 8px 6px 10px; border: 0; border-left: 2px solid var(--line); font-size: 18px;
  }
  .hdwk .quiz-table tr > td:first-of-type { border-left: 0; }
  .hdwk .quiz-table tr > td:first-child { text-align: center; }
  .hdwk .quiz-table td::before { content: attr(data-label); font-size: 16px; font-weight: 700; color: var(--ink); }
  .hdwk .quiz-review__parts li { grid-template-columns: 28px minmax(0, 1fr); }
  .hdwk .quiz-review__partgiven, .hdwk .quiz-review__partright { grid-column: 2; }
}

/* ---- written answer ----------------------------------------------------
   A box that grows with the writing, 18px so a phone never zooms into it,
   and a quiet guide to how much to write. */
.hdwk .quiz-written { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.hdwk .quiz-written__label { font-size: 16px; font-weight: 700; color: var(--ink); }
.hdwk .quiz-written__input {
  font: inherit; font-size: 18px; line-height: 1.5; padding: 12px 16px; min-height: 120px; resize: none; overflow: hidden;
  border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); color: var(--ink);
}
.hdwk .quiz-written__input:focus { outline: none; box-shadow: 4px 4px 0 var(--gold); }
.hdwk .quiz-written__guide { margin: 0; font-size: 15px; color: var(--muted); }

/* Review. Not marked yet is its own state: neither the teal tick nor the
   tangerine cross, a plain outline that says "wait". */
.hdwk .quiz-review__item.is-pending { border-left-color: var(--line); }
.hdwk .quiz-review__item.is-pending .quiz-review__mark { background: var(--soft); }
.hdwk .quiz-written__given {
  font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--soft);
  border-radius: 10px; padding: 8px 12px; margin: 4px 0 8px; overflow-wrap: anywhere;
}
.hdwk .quiz-written__state { font-size: 16px; font-weight: 600; color: var(--ink); margin: 6px 0; }
.hdwk .quiz-written__score { font-size: 17px; font-weight: 800; color: var(--ink); margin: 6px 0; }
.hdwk .quiz-written__points { list-style: none; margin: 6px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hdwk .quiz-written__points li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: baseline;
  font-size: 16px; color: var(--ink); padding: 6px 8px; border-radius: 8px; background: var(--soft);
}
.hdwk .quiz-written__points li.is-met { background: var(--mint2); }
.hdwk .quiz-written__points li.is-missed { background: var(--accent-soft); }
.hdwk .quiz-written__tick { font-weight: 800; text-align: center; }
.hdwk .quiz-written__note {
  font-size: 16px; color: var(--ink); padding: 8px 12px; margin: 8px 0;
  border-left: 5px solid var(--teal2); background: var(--paper);
}
.hdwk .quiz-written__model {
  font-size: 16px; line-height: 1.5; color: var(--ink); margin-top: 8px; padding: 8px 12px;
  border: 2px dashed var(--line); border-radius: 10px;
}
.hdwk .quiz-written__model-h { display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }

/* ---- a set homework, compact ----
   A set homework is sat in class on a laptop: the question, its answer area
   and the drag targets have to fit one screen with the nav below. The
   homework band, the meta row and the prompt give room back; the prompt
   keeps its line breaks, so "(b)" starts its own line as it does on paper. */
.hdwk .quiz-wrap:has(> .quiz-homework) > .quiz-homework { padding: 8px 14px 8px 16px; gap: 2px; margin-bottom: 8px; }
.hdwk .quiz-wrap:has(> .quiz-homework) .quiz-homework__title { font-size: 17px; }
.hdwk .quiz-wrap:has(> .quiz-homework) .quiz-homework__meta { font-size: 14px; }
.hdwk .quiz-wrap:has(> .quiz-homework) .quiz-card { padding: clamp(14px, 2vw, 24px); min-height: 0; box-shadow: 5px 5px 0 var(--cyan); }
.hdwk .quiz-wrap:has(> .quiz-homework) .quiz-q__meta { margin-bottom: 8px; }
.hdwk .quiz-wrap:has(> .quiz-homework) .quiz-q__prompt {
  font-size: clamp(18px, 1.7vw, 22px); line-height: 1.3; margin: 2px 0 12px;
  white-space: pre-line; text-wrap: pretty;
}
.hdwk .quiz-wrap:has(> .quiz-homework) .quiz-q__body { min-height: 0; }
.hdwk .quiz-wrap:has(> .quiz-homework) .quiz-sort__tray { min-height: 56px; padding: 8px; margin-bottom: 10px; }
.hdwk .quiz-wrap:has(> .quiz-homework) .quiz-sort__count { margin-bottom: 8px; }
.hdwk .quiz-wrap:has(> .quiz-homework) .quiz-sort__board { gap: 10px; }
@media (min-width: 900px) {
  .hdwk .quiz-wrap:has(> .quiz-homework) .quiz-sort__board { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
.hdwk .quiz-wrap:has(> .quiz-homework) .quiz-atom__stage { max-width: min(460px, 46vh); }
.hdwk .quiz-wrap:has(> .quiz-homework) .quiz-atom__group { margin-bottom: 8px; padding: 8px 12px 10px; }
.hdwk .quiz-wrap:has(> .quiz-homework) .quiz-atom { gap: 12px; }
@media (max-width: 600px) {
  .hdwk .quiz-wrap:has(> .quiz-homework) .quiz-q__prompt { font-size: 18px; }
}

/* =============================================================
   Per-quiz options (science/quiz_options.py): the Reference button, the
   countdown, "I don't know", the note to self, the reflection step and the
   neutral rail of a quiz the teacher marks first. Card-table look as above;
   tangerine and gold for time running short, never red. 16px text and 44px
   targets throughout.
   ============================================================= */

.hdwk .quiz-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.hdwk .quiz-tools__ref { min-height: 44px; padding: 8px 16px; font-size: 16px; }

.hdwk .quiz-navbar__mid { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hdwk .quiz-timer {
  font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 6px 12px;
  min-width: 4.5em; text-align: center; font-variant-numeric: tabular-nums;
}
.hdwk .quiz-timer:empty { display: none; }
.hdwk .quiz-timer.is-low { background: var(--gold); }
.hdwk .quiz-timer.is-last { background: var(--accent); color: var(--paper); border-color: var(--ink); }

.hdwk .quiz-timewarn {
  margin: 0; padding: 10px 14px; font-size: 16px; font-weight: 700; color: var(--ink);
  background: var(--gold-soft); border: 2px solid var(--gold-ink); border-radius: 12px;
}

/* "I don't know": quiet until chosen, then a plain line and Undo. */
.hdwk .quiz-idk {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 18px; padding-top: 14px; border-top: 2px dashed var(--line);
}
.hdwk .quiz-idk__btn { min-height: 44px; padding: 8px 16px; font-size: 16px; }
.hdwk .quiz-idk__said { margin: 0; flex: 1 1 16rem; font-size: 16px; color: var(--ink); }
.hdwk .quiz-idk.is-chosen { border-top-style: solid; }

/* Note to self: small, optional, under the question. */
.hdwk .quiz-note { margin-top: 14px; display: grid; gap: 6px; }
.hdwk .quiz-note__label { font-size: 16px; font-weight: 700; color: var(--muted); }
.hdwk .quiz-note__box,
.hdwk .quiz-reflect__box {
  width: 100%; max-width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--paper); border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px;
  min-height: 44px; resize: vertical;
}
.hdwk .quiz-note__box:focus-visible,
.hdwk .quiz-reflect__box:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--ink); }

/* The reflection step. */
.hdwk .quiz-reflect__intro { margin: 0 0 14px; font-size: 16px; color: var(--muted); }
.hdwk .quiz-reflect__row { display: grid; gap: 6px; margin-bottom: 16px; }
.hdwk .quiz-reflect__label { font-size: 17px; font-weight: 700; color: var(--ink); }

/* Results held for the teacher: answered is one neutral style, no tick. */
.hdwk .quiz-rail--neutral .quiz-dot.is-answered,
.hdwk .quiz-rail--neutral .quiz-dot.is-skipped { background: var(--ink); border-color: var(--ink); }
.hdwk .quiz-rail--neutral .quiz-dot.is-answered::before,
.hdwk .quiz-rail--neutral .quiz-dot.is-skipped::before {
  content: ""; width: 6px; height: 6px; margin: 0; border: 0; border-radius: 50%;
  background: var(--paper); transform: none;
}
.hdwk .quiz-rail--neutral .quiz-dot.is-partial { border-color: var(--ink); background: linear-gradient(90deg, var(--muted) 50%, var(--paper) 50%); }
/* A skip is not an answer: a dash, never a tick. */
.hdwk .quiz-dot.is-skipped { background: var(--soft); border-color: var(--ink); }
.hdwk .quiz-dot.is-skipped::before { content: ""; width: 10px; height: 0; border-top: 2.5px solid var(--ink); }
.hdwk .quiz-dot.is-current.is-skipped { background: var(--gold); }

.hdwk .quiz-review__item.is-skipped { border-left-color: var(--muted); }
.hdwk .quiz-review__item.is-skipped .quiz-review__mark { background: var(--muted); }

/* Notes to self and the reflection, together at the end. */
.hdwk .quiz-sitting {
  margin: 18px 0; padding: 16px 18px; background: var(--paper);
  border: 2px solid var(--line); border-radius: 16px;
}
.hdwk .quiz-sitting__h { margin: 0 0 10px; font-family: var(--font-display); font-size: 20px; color: var(--ink); }
.hdwk .quiz-sitting__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hdwk .quiz-sitting__item { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.hdwk .quiz-sitting__item:last-child { border-bottom: 0; padding-bottom: 0; }
.hdwk .quiz-sitting__q { font-size: 16px; font-weight: 700; color: var(--teal); }
.hdwk .quiz-sitting__prompt { font-size: 16px; color: var(--muted); }
.hdwk .quiz-sitting__text { font-size: 16px; color: var(--ink); overflow-wrap: anywhere; }
.hdwk .quiz-sitting__late {
  margin: 12px 0; padding: 8px 14px; font-size: 16px; font-weight: 700;
  background: var(--gold-soft); border-left: 6px solid var(--gold-ink); border-radius: 8px;
}

/* On a wide screen a homework has no mode chooser, so the Reference links
   take that empty cell beside the homework band rather than a row. */
@media (min-width: 900px) {
  .hdwk .quiz-wrap:has(> .quiz-card) > .quiz-tools { grid-column: 1; grid-row: 1; justify-content: flex-start; }
}

@media (max-width: 600px) {
  .hdwk .quiz-tools { justify-content: stretch; }
  .hdwk .quiz-tools__ref { flex: 1 1 auto; }
  .hdwk .quiz-navbar .quiz-btn { white-space: nowrap; }
  .hdwk .quiz-navbar__mid { flex-wrap: nowrap; }
  /* Three things fit the bar on a phone, not four: with a clock, the clock
     takes the position pill's place ("Question 3 of 26" is on the card). */
  .hdwk .quiz-navbar__mid:has(.quiz-timer:not(:empty)) .quiz-navbar__pos { display: none; }
}

/* ---- practice: feedback under the question just checked ---- */
.hdwk .quiz-fb {
  margin-top: 18px; padding: 14px 18px;
  border: 2px solid var(--ink); border-left-width: 8px; border-radius: 14px;
  background: var(--paper); color: var(--ink);
}
.hdwk .quiz-fb.is-correct { border-left-color: var(--teal2); }
.hdwk .quiz-fb.is-wrong { border-left-color: var(--accent); }
.hdwk .quiz-fb p { margin: 0 0 6px; }
.hdwk .quiz-fb__verdict { font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.hdwk .quiz-fb__answer span { font-weight: 700; }
.hdwk .quiz-fb__explain { color: var(--ink); font-size: 15px; }
.hdwk .quiz-fb__badge { margin-top: 10px; font-weight: 700; color: var(--teal); }
.hdwk .quiz-navbar__stop { margin-left: auto; }

/* ---- practice: the step label, the Criterion A helper, Try a similar one ---
   The label says how much help the question gives. The information button
   opens the rubric with this step's band marked; nothing here is a number a
   student could compare. */
.hdwk .quiz-ladder { margin: -4px 0 16px; }
.hdwk .quiz-ladder__line { display: flex; align-items: center; gap: 10px; }
.hdwk .quiz-ladder__label {
  font-size: 17px; color: var(--ink); background: var(--gold-soft);
  border: 2px solid var(--ink); border-radius: 999px; padding: 4px 14px;
}
.hdwk .quiz-ladder__info {
  min-width: 44px; min-height: 44px; font-size: 22px; line-height: 1; cursor: pointer;
  color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 50%;
}
.hdwk .quiz-ladder__info:hover, .hdwk .quiz-ladder__info[aria-expanded="true"] { background: var(--mint); }
.hdwk .quiz-rubric {
  margin-top: 12px; padding: 14px 16px; background: var(--paper);
  border: 2px solid var(--ink); border-radius: 14px;
}
.hdwk .quiz-rubric__title { font-family: var(--font-display); font-size: 18px; font-weight: 800; margin: 0 0 10px; }
.hdwk .quiz-rubric__strandname { font-size: 16px; font-weight: 700; margin: 12px 0 6px; color: var(--teal); }
.hdwk .quiz-rubric__bands { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hdwk .quiz-rubric__band {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 4px 12px; align-items: baseline;
  padding: 8px 10px; border-radius: 10px; border: 2px solid var(--line); font-size: 16px;
}
.hdwk .quiz-rubric__band.is-here { border-color: var(--ink); background: var(--gold-soft); }
.hdwk .quiz-rubric__bandname { font-family: var(--font-mono); font-size: 14px; font-weight: 700; }
.hdwk .quiz-rubric__here {
  grid-column: 2; justify-self: start; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 2px 10px;
}
.hdwk .quiz-rubric__toggle { margin-top: 12px; min-height: 44px; }
.hdwk .quiz-similar { margin-top: 14px; }
.hdwk .quiz-similar__note { margin: 8px 0 0; font-size: 15px; }
@media (max-width: 520px) {
  .hdwk .quiz-rubric__band { grid-template-columns: 1fr; }
  .hdwk .quiz-rubric__here { grid-column: 1; }
}

/* ---- practice: end screen ---- */
.hdwk .quiz-end__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 20px; }
.hdwk .quiz-end__fact { padding: 14px 16px; background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; }
.hdwk .quiz-end__term { font-size: 15px; font-weight: 700; color: var(--muted); margin: 0 0 4px; }
.hdwk .quiz-end__value { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 800; }
.hdwk .quiz-end__h { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin: 0 0 8px; }
.hdwk .quiz-end__revise { margin-bottom: 20px; }
.hdwk .quiz-end__links { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 17px; }
.hdwk .quiz-end__link { color: var(--teal); font-weight: 700; display: inline-block; min-height: 32px; }
.hdwk .quiz-end__none { font-size: 17px; margin: 0 0 16px; }