/* Approved topic-question card. Shared grader/pager hooks stay unchanged. */
.nb-tq-card.tq-paper {
  --tq-pad: var(--nb-s6);
  padding: var(--nb-s6);
  min-height: 0;
  overflow: visible;
  background: var(--nb-paper-raised);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-lg);
  box-shadow: var(--nb-shadow-1);
  color: var(--nb-ink);
  font-family: var(--nb-sans);
}
/* The marks sit WITH the question: in the right margin, on the question's
   first line, at every width (owner list 2026-09-24, item 8). The phone block
   below used to drop the grid to one column and move the marks to grid-row 1,
   so on a phone "3 marks" stood alone on a row ABOVE the question, right
   aligned, with a 16px gap under it: 34px of empty band before the sentence
   began. Above 500px this two-column row holds; the phone block keeps the
   marks on the same first line in a way that gives the question back its
   full width below it (see there).
   align-items is BASELINE, not start: start lined up the two boxes' tops, and
   a 15px label beside a 20px/30px question line sat 8px above the question's
   first baseline on desktop (measured 361 vs 369 at 1440). Baseline puts the
   allocation on the line it belongs to. */
.nb-tq-card .tq-q-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-content: start;
  align-items: baseline;
  min-height: 0;
  /* the number sits close to its sentence, neither stuck nor far (owner 2026-09-30) */
  gap: var(--nb-s3);
}
/* The question's own number (the docx's Q1, Q2 ...) in the margin, as the MCQ
   card draws it (owner 2026-09-29: the topic questions showed no numbers). */
.nb-tq-card .tq-q-no {
  /* in the pure ink: bright white at night, black by day, at the question's own
     size and set apart by weight alone (owner 2026-09-30: the middle ground) */
  font: var(--nb-type-prose);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--nb-feedback-ink);
  white-space: nowrap;
}
.nb-tq-card .tq-q-main { min-width: 0; }
/* A question that opens with a picture or a table: the number, the
   calculator line and the marks stand at its top, not level with the
   picture's caption at its foot (owner 2026-10-01: "the image before the
   question ... messes up the look") */
.nb-tq-card .tq-q-head:has(.tq-question > :first-child:is(.note-figure, .note-table-scroll, .esa-math--display, figure)) {
  align-items: start;
}
.nb-tq-card .tq-question {
  margin: 0;
  /* the question reads as prose, not a heading (owner 2026-09-30: too bulky) */
  font: var(--nb-type-prose);
  color: var(--nb-ink);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.nb-tq-card .tq-question p { margin: 0 0 var(--nb-s3); }
.nb-tq-card .tq-question p:last-child { margin-bottom: 0; }

/* ---------- One standard topic question (owner 2026-09-30) -----------------
   "The math topic questions are so bulky ... you cant distinguish from data
   and captions and given data or info ... make tqs all one standard. pretty
   and not overwhelming", in the manner of the notes' worked examples (smaller
   text, colour, lines). practice28._tq_html places the blocks; nothing here
   changes a word:
     .tq-stem   the question's set-up, as prose
     given data a displayed equation sits in a quiet inset with a blue edge,
                so what the student is TOLD reads apart from what they must DO
                (tables keep the notes' table look; pictures keep their frame
                and caption from notebook-blocks.css)
     .tq-parts  one row per part: the label in the student's blue in a left
                gutter, the part's words, its marks small and italic at the
                right; a hairline between parts, as between worked-example
                sections; a sub-part (i) set in under its part */
.nb-tq-card .tq-stem > * + * { margin-top: var(--nb-s3); }
.nb-tq-card :is(.tq-question, .tq-stem, .tq-part-body) > .esa-math--display {
  margin: var(--nb-s3) 0;
  padding: var(--nb-s2) var(--nb-s4);
  background: var(--nb-paper-sunken);
  border-left: 2px solid color-mix(in srgb, var(--nb-blue) 55%, transparent);
  border-radius: 0 var(--nb-r-sm) var(--nb-r-sm) 0;
}
/* The hairline above the parts divides the stem from them, so it is drawn
   only under a stem. A question that opens on its (a) has no stem: the line
   sat at the top with nothing above it (owner 2026-10-02, Edexcel 4MA1 1.1
   Q30; 359 questions, plus 72 with only the tier chip above), and its first
   part starts where any question's words start. */
.nb-tq-card .tq-stem + .tq-parts {
  margin-top: var(--nb-s4);
  border-top: 1px solid var(--nb-border);
}
.nb-tq-card .tq-parts:not(.tq-stem + .tq-parts) > .tq-part:first-child { padding-top: 0; }
.nb-tq-card .tq-part {
  --tq-part-gutter: 2.75rem;
  display: grid;
  grid-template-columns: var(--tq-part-gutter) minmax(0, 1fr) auto;
  column-gap: var(--nb-s3);
  align-items: baseline;
  padding: var(--nb-s3) 0;
  border-bottom: 1px solid var(--nb-border);
}
.nb-tq-card .tq-part:last-child { border-bottom: 0; padding-bottom: 0; }
.nb-tq-card .tq-part--sub { padding-left: var(--tq-part-gutter); }
.nb-tq-card .tq-part-label {
  font: var(--nb-type-label);
  font-size: var(--nb-text-base);
  font-variant-numeric: tabular-nums;
  color: var(--nb-blue);
  white-space: nowrap;
}
.nb-tq-card .tq-part--sub .tq-part-label { color: var(--nb-ink); }
/* (0,5,0) and !important: the label's blue beats the card's one-ink
   catch-all further down (.tq-shell / .nb-qg-practice .tq-paper.nb-tq-card
   .tq-question *, an !important at (0,4,0)), which keeps every other word in
   the ink; a sub-part's label stays in the ink. */
:is(.tq-shell, .nb-qg-practice) .tq-paper.nb-tq-card .tq-question .tq-part-label { color: var(--nb-blue) !important; }
:is(.tq-shell, .nb-qg-practice) .tq-paper.nb-tq-card .tq-question .tq-part--sub .tq-part-label { color: var(--nb-ink) !important; }
.nb-tq-card .tq-part-body { min-width: 0; }
.nb-tq-card .tq-part-body > * + * { margin-top: var(--nb-s3); }
.nb-tq-card .tq-part-marks {
  font-size: var(--nb-text-sm);
  font-style: italic;
  line-height: 1.4;
  color: var(--nb-ink);
  white-space: nowrap;
}
/* Phones: the marks drop under the part's words (a third column squeezed a
   sub-part's words into ~150px at 390), and a sub-part steps in by less. */
@media (max-width: 600px) {
  .nb-tq-card .tq-part {
    --tq-part-gutter: 2.25rem;
    grid-template-columns: var(--tq-part-gutter) minmax(0, 1fr);
    column-gap: var(--nb-s2);
  }
  .nb-tq-card .tq-part-marks { grid-column: 2; margin-top: var(--nb-s1); }
  .nb-tq-card .tq-part--sub { padding-left: var(--nb-s5); }
}
.nb-tq-meta {
  display: flex;
  align-items: center;
  gap: var(--nb-s3);
}
.nb-tq-allocation {
  /* the pure ink, white at night (owner 2026-09-30: white, not red) */
  color: var(--nb-feedback-ink);
  font: var(--nb-type-control);
  font-style: normal;
  white-space: nowrap;
}
.qg[data-grade="full"] .nb-tq-allocation {
  color: var(--nb-success);
}
.nb-tq-card .tq-rule {
  height: 1px;
  border: 0;
  background: var(--nb-border);
  margin: var(--nb-s5) 0;
}
.nb-tq-card .qg-form { margin: 0; }
.nb-tq-card .tq-answer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nb-s3);
  margin-bottom: var(--nb-s3);
}
.nb-tq-card .tq-answer-label {
  color: var(--nb-ink);
  font: var(--nb-type-control);
  line-height: 1.5;
}
.nb-tq-save-status {
  display: inline-flex;
  align-items: center;
  gap: var(--nb-s1);
  color: var(--nb-ink);
  font: var(--nb-type-ui);
  font-size: var(--nb-text-xs);
  /* one ink (owner, 2026-09-26: "are these white or what???"): a 12 or 13px
     word at 400 is smoothed into the night paper and reads grey even in full
     ink, so it takes 500, the second weight, in both themes */
  font-weight: 500;
}
.nb-tq-save-status[data-saved="true"]::before { content: "✓"; }
.nb-tq-card .qg-saved { display: none; }
.nb-tq-card .qg-input {
  width: 100%;
  min-height: 146px;
  padding: var(--nb-s3) var(--nb-s4);
  border: 1px solid var(--nb-control-border);
  border-radius: var(--nb-r-md);
  box-shadow: none;
  font: var(--nb-type-prose);
  color: var(--nb-ink);
  resize: vertical;
  caret-color: var(--nb-blue);
}
html .nb-tq-card .qg-input:not(.is-locked) { background: var(--nb-paper-raised); }
html .nb-tq-card .qg-input::placeholder { color: var(--nb-ink); opacity: 1; font-style: italic; }  /* full ink, italic so an empty field never reads as filled (owner, 2026-09-26) */
.nb-tq-card .qg-input:hover:not(:focus):not(.is-locked) { border-color: var(--nb-ink); }
.nb-tq-card .qg-input:focus-visible {
  border-color: var(--nb-blue);
  outline: 2px solid var(--nb-blue);
  outline-offset: 2px;
}
.nb-tq-card .qg-input.is-locked { background: var(--nb-paper-sunken); color: var(--nb-ink); }
.nb-tq-card .qg-hint {
  margin: var(--nb-s2) 0 0;
  color: var(--nb-error);
  font: var(--nb-type-ui);
  font-size: var(--nb-text-sm);
}
.nb-tq-card .tq-signin-hint { color: var(--nb-ink); }
.nb-tq-answer-meta {
  display: flex;
  /* flex-end, not space-between: this row used to hold the key-terms help
     line on the left and the counts on the right. With the help line gone
     the counts are its only child, and space-between would have parked
     them on the LEFT under the textarea. */
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--nb-s4);
  margin-top: var(--nb-s2);
  color: var(--nb-ink);
  font: var(--nb-type-ui);
  font-size: var(--nb-text-xs);
  /* one ink (owner, 2026-09-26: "are these white or what???"): a 12 or 13px
     word at 400 is smoothed into the night paper and reads grey even in full
     ink, so it takes 500, the second weight, in both themes */
  font-weight: 500;
}
.nb-tq-counts { white-space: nowrap; }
.nb-tq-counts:has(.is-near, .is-max) .nb-tq-word-count { display: none; }
.nb-tq-card .tq-char-count:is(.is-near, .is-max) {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  font-size: var(--nb-text-xs);
}
.nb-tq-card .nb-tq-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nb-s4);
  margin-top: var(--nb-s6);
}
.nb-tq-card .tq-reveal { margin: 0; }
/* The AI notice (Website list v1.0, item 6): next to Mark answer, before
   first use and always, never dismissible. It takes the auto margin so the
   notice and the button sit together at the right edge. */
.nb-tq-card .qg-ai-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 0 auto;
  font-size: var(--nb-text-xs);
  font-weight: 500;
  line-height: 1.4;
  color: var(--nb-ink);
}
.nb-tq-card .qg-ai-notice .ai-notice-ic { flex: none; }
.nb-tq-card .qg-ai-notice + .tq-mark-btn { margin-left: 0; }
.nb-tq-secondary-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nb-s1);
  min-width: 0;
}
.nb-tq-card .tq-reveal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--nb-s2);
  min-block-size: 44px;
  padding: var(--nb-s2) 0;
  background: transparent;
  border: 0;
  border-radius: var(--nb-r-sm);
  box-shadow: none;
  color: var(--nb-blue);
  font: var(--nb-type-ui);
  font-size: var(--nb-text-sm);
  font-weight: 500;
  white-space: nowrap;
}
/* Hover only where there is a hover (mobile audit 2026-09-25, S-028a): on a
   touch screen a tap leaves :hover behind, so the reveal kept the hover ink
   and Mark answer stayed dark and lifted after marking. Each stays before
   its :active rule, so the equal-specificity press still wins on a mouse. */
@media (hover: hover) {
  .nb-tq-card .tq-reveal-btn:hover { color: var(--nb-blue-strong); }
}
.nb-tq-card .tq-mark-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nb-s2);
  min-block-size: 44px;
  padding: 10px var(--nb-s4);
  margin-left: auto;
  background: var(--nb-blue);
  border: 0;
  border-radius: var(--nb-r-sm);
  box-shadow: none;
  color: var(--nb-on-blue);
  font: var(--nb-type-control);
  transition: background-color var(--nb-dur-1) var(--nb-ease), transform var(--nb-dur-1) var(--nb-ease);
}
.nb-tq-card .tq-mark-btn svg { color: inherit; }
@media (hover: hover) {
  .nb-tq-card .tq-mark-btn:hover:not(:disabled) { background: var(--nb-blue-strong); transform: translateY(-1px); }
}
.nb-tq-card .tq-mark-btn:active:not(:disabled) { transform: translateY(0); }
.nb-tq-card .tq-mark-btn:disabled { opacity: 1; cursor: wait; }
.nb-tq-card .tq-reveal-btn:focus-visible,
.nb-tq-card .tq-mark-btn:focus-visible { outline: 2px solid var(--nb-blue); outline-offset: 2px; }
html .nb-tq-card .tq-reveal-panel {
  margin: var(--nb-s6) 0 0;
  padding: var(--nb-s6) 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--nb-border);
  border-radius: 0;
  box-shadow: none;
}
.nb-tq-card .nb-tq-model-title {
  margin: 0 0 var(--nb-s1);
  padding: 0 0 var(--nb-s3);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--nb-border);
  color: var(--nb-ink);
  font: var(--nb-type-control);
  font-size: var(--nb-text-md);
  line-height: 1.5;
}
.nb-tq-card .nb-tq-model-title::before,
.nb-tq-card .nb-tq-model-title::after { content: none; }
.nb-tq-card .tq-model-body {
  color: var(--nb-ink-2);
  font: var(--nb-type-prose);
  max-width: 70ch;
}
.nb-tq-card .tq-model-body p { margin: 0 0 var(--nb-s3); }
.nb-tq-card .tq-model-body ul,
.nb-tq-card .tq-model-body ol { margin: 0; padding-left: var(--nb-s5); }
.nb-tq-card .tq-model-body li { padding: var(--nb-s1) 0 var(--nb-s1) var(--nb-s1); }
/* The model answer reads like the notes' worked example (owner 2026-10-05,
   from the model-answer census and its pictures: "perfect i like them all").
   notebook-blocks.css section 11 draws the rows; here, on the card:
     a step   a part of the answer: its STEP n label in the box teal (the
              row's own number, its label font), its words, its working flush
              left with no rule, a hairline between parts;
     the check the last part, its CHECK label in the worked example's green
              and no glyph (the sans has no U+2713; the fallback symbol font
              drew it like a root sign);
     a part   keeps its letter in the question's blue gutter, its steps inside;
     an item  (a numbered list, 6 answers) keeps its number.
   "Model answer" reads as the box's title over a hairline. */
.nb-tq-card .tq-model-body ol.esa-steps { margin: var(--nb-s2) 0 0; padding-left: 0; }
.nb-tq-card .tq-model-body li.esa-step { padding: var(--nb-s2) 0; }
.nb-tq-card .tq-model-body li.esa-step:not(.esa-step--part):not(.esa-step--item) {
  display: block;
  margin: 0;
  padding: var(--nb-s4) 0;
  border-top: 1px solid var(--nb-border);
}
.nb-tq-card .tq-model-body ol.esa-steps > li.esa-step:not(.esa-step--part):not(.esa-step--item):not(.esa-step--check):first-child {
  padding-top: var(--nb-s1);
  border-top: 0;
}
.nb-tq-card .tq-model-body li.esa-step:not(.esa-step--part):not(.esa-step--item) > .esa-step-mark {
  display: block;
  margin: 0 0 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nb-tq-card .tq-model-body li.esa-step:not(.esa-step--part):not(.esa-step--item):not(.esa-step--check) > .esa-step-mark:not(:empty)::before { content: "Step "; }
.nb-tq-card .tq-model-body li.esa-step:not(.esa-step--part):not(.esa-step--item):not(.esa-step--check) > .esa-step-mark:empty { display: none; }
.nb-tq-card .tq-model-body li.esa-step--check > .esa-step-mark::before { content: "Check"; }
.nb-tq-card .tq-model-body .esa-step-title > .esa-step-check { display: none; }
.nb-tq-card .tq-model-body .esa-step-body > .esa-math--display {
  padding-left: 0;
  border-left: 0;
}
.nb-tq-card .tq-model-body li.esa-step--part { padding: var(--nb-s4) 0; }
.nb-tq-card .tq-model-body li.esa-step--part:first-child { padding-top: var(--nb-s1); }
.nb-tq-card .tq-model-body .esa-step--part > .esa-step-body > ol.esa-steps { margin-top: 0; }
.nb-tq-card .tq-model-body .esa-step--part > .esa-step-body > ol.esa-steps > li.esa-step:first-child { padding-top: 0; }
:is(.tq-shell, .nb-qg-practice) .tq-paper.nb-tq-card .tq-model-body .esa-step--part > .esa-step-mark { color: var(--nb-blue) !important; }
:is(.tq-shell, .nb-qg-practice) .tq-paper.nb-tq-card .tq-model-body .esa-step--check > .esa-step-mark { color: var(--nb-adm-result) !important; }
:is(.tq-shell, .nb-qg-practice) .tq-paper.nb-tq-card .tq-model-body li.esa-step:not(.esa-step--part):not(.esa-step--item):not(.esa-step--check) > .esa-step-mark { color: var(--nb-adm-def) !important; }
/* ⚑ DISPLAY MATHS STAYS INSIDE THE SHEET (owner list 2026-09-24, item 4).
   A worked answer is a column of $$...$$ lines, and KaTeX sets each one as a
   single nowrap row. On a phone the sheet's text column is ~310px, so a line
   such as "sum of anticlockwise moments = sum of clockwise moments" (529px)
   ran straight through the sheet's right border and off the screen: measured
   on 12 physics answers at 390px, up to 200px past the edge. Two layers, the
   same pair the notes use for the same shape (notebook-notes.css):
     1. The equation breaks between KaTeX's own .base boxes, i.e. after a
        relation or an operator, exactly where inline maths already breaks.
        Only the .katex row goes to white-space: normal; every .base keeps
        KaTeX's nowrap, so a number never loses its unit or a unit its power.
     2. Anything still wider (one .base longer than the column, a long
        fraction) scrolls sideways inside its own .katex-display, never the
        sheet and never the page.
   Scoped to every zone of the card that renders authored or examiner maths.

   ⚑ AND IT GETS ITS SPACING BACK (desktop too). notebook-grader.css's
   `.tq-model-body :first-child` / `:last-child` zero every first and last
   child's margin; each .katex-display is the only child of its wrapping span,
   so both of its margins went to 0 and consecutive display lines touched.
   Stacked fractions collided: the denominator of a = dv/dt sat on the
   numerator of the next line. This rule is (0,3,0) and loads later, so it
   wins without touching those resets. The padding is the clearance
   overflow-y: hidden needs so a tall fraction is never shaved. */
.nb-tq-card :is(.tq-question, .tq-model-body, .tq-kp-label, .tq-block-body) .katex-display {
  max-width: 100%;
  margin: var(--nb-s2) 0;
  padding-block: var(--nb-s1);
  overflow-x: auto;
  overflow-y: hidden;
}
.nb-tq-card :is(.tq-question, .tq-model-body, .tq-kp-label, .tq-block-body) .katex-display > .katex {
  white-space: normal;
}
/* ⚑ A LINE THAT IS ONE BOX STILL WRAPS WHERE IT IS PROSE (item 4 refix).
   Breaking between .base boxes left every line whose widest box is itself
   wider than the column, and at 360px that was 18 model-answer lines, 11 at
   390. Most are one 	ext{} run: "5.0 N in the direction of the 8.0 N force",
   "(bounces back, so negative)", and the AP Chemistry equation
   "C3H8(g) + 5 O2(g) -> 3 CO2(g) + 4 H2O(g)", which is written as 	ext{}
   runs, so its + and arrow are letters to KaTeX. KaTeX writes every space
   inside 	ext{} as U+00A0, so nothing in the box could break.
   topic-question-card.js turns back into ordinary spaces only the ones a line
   may break at: after an operator, and between two words of a phrase. Never
   after a number (so "5.0 N", "3.6 cm", "5 O2" stay whole), never before an
   operator (a line ends on the +, it does not start with it), and never
   between two short tokens (what units look like: "m s", "N m"). Each such
   space is a <span class="tq-math-gap"> and the box is marked .tq-math-wrap.
   Only those spans may wrap; everything else in the box keeps KaTeX's
   nowrap, the run included, so a run is never torn from the subscript beside
   it ("3 CO" | "2(g)" when the whole run was allowed to wrap) and a fraction
   or a power is never split. The box drops KaTeX's min-content width for
   auto: it stays one line wherever it fits and breaks only when it does not. */
.nb-tq-card :is(.tq-question, .tq-model-body, .tq-kp-label, .tq-block-body) .katex-display .base.tq-math-wrap {
  width: auto;
}
.nb-tq-card :is(.tq-question, .tq-model-body, .tq-kp-label, .tq-block-body) .katex-display .tq-math-gap {
  white-space: normal;
}
/* ⚑ AND WHAT STILL CANNOT FIT SAYS THAT IT SCROLLS (item 4 refix). A long
   fraction or root has no break in it, so it scrolls inside its own box, and
   on a touch screen nothing showed that: the line was simply cut at the
   sheet's edge, mid-word ("so negati"). topic-question-card.js marks such a
   display .tq-math-scrolls (and .is-scrolled / .is-at-end as the reader
   moves it), and this rule fades the edge that has more beyond it, the way a
   strip of paper runs on under a fold. A mask, not an overlay, so it needs
   no knowledge of the paper behind it. The bottom band of the box is left
   out of the mask so the scrollbar, or the drawn track below, is never
   faded with the maths. */
.nb-tq-card :is(.tq-question, .tq-model-body, .tq-kp-label, .tq-block-body) .katex-display.tq-math-scrolls,
.nb-tq-card :is(.tq-question, .tq-model-body, .tq-kp-label, .tq-block-body) .katex .base.tq-math-scrolls {
  --tq-fade-l: var(--nb-ink);
  --tq-fade-r: transparent;
  padding-bottom: var(--nb-s3);
  scrollbar-width: thin;
  scrollbar-color: var(--nb-quiet-3) transparent;  /* a scroll thumb keeps the quiet ink */
  -webkit-mask-image:
    linear-gradient(to right, var(--tq-fade-l), var(--nb-ink) var(--nb-s7), var(--nb-ink) calc(100% - var(--nb-s7)), var(--tq-fade-r)),
    linear-gradient(var(--nb-ink), var(--nb-ink));
  mask-image:
    linear-gradient(to right, var(--tq-fade-l), var(--nb-ink) var(--nb-s7), var(--nb-ink) calc(100% - var(--nb-s7)), var(--tq-fade-r)),
    linear-gradient(var(--nb-ink), var(--nb-ink));
  -webkit-mask-size: 100% 100%, 100% var(--nb-s3);
  mask-size: 100% 100%, 100% var(--nb-s3);
  -webkit-mask-position: 0 0, 0 100%;
  mask-position: 0 0, 0 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.nb-tq-card :is(.tq-question, .tq-model-body, .tq-kp-label, .tq-block-body) .katex-display.tq-math-scrolls.is-scrolled,
.nb-tq-card :is(.tq-question, .tq-model-body, .tq-kp-label, .tq-block-body) .katex .base.tq-math-scrolls.is-scrolled {
  --tq-fade-l: transparent;
}
.nb-tq-card :is(.tq-question, .tq-model-body, .tq-kp-label, .tq-block-body) .katex-display.tq-math-scrolls.is-at-end,
.nb-tq-card :is(.tq-question, .tq-model-body, .tq-kp-label, .tq-block-body) .katex .base.tq-math-scrolls.is-at-end {
  --tq-fade-r: var(--nb-ink);
}
/* A touch screen draws its scrollbar only while a finger is moving it, so
   there the display carries its own: a hairline track along the bottom band
   and a 2px thumb whose width and place are the visible share of the line
   (--tq-thumb, --tq-thumb-at, written by topic-question-card.js). Painted as
   the box's own background, which stays put while the maths scrolls over it. */
@media (pointer: coarse) {
  .nb-tq-card :is(.tq-question, .tq-model-body, .tq-kp-label, .tq-block-body) .katex-display.tq-math-scrolls,
  .nb-tq-card :is(.tq-question, .tq-model-body, .tq-kp-label, .tq-block-body) .katex .base.tq-math-scrolls {
    background-image:
      linear-gradient(var(--nb-quiet-3), var(--nb-quiet-3)),
      linear-gradient(var(--nb-border), var(--nb-border));
    background-size: var(--tq-thumb, 30%) 2px, 100% 1px;
    background-position: var(--tq-thumb-at, 0%) calc(100% - 1px), 0 calc(100% - 1px);
    background-repeat: no-repeat;
  }
}
/* ⚑ INLINE MATHS WIDER THAN ITS LINE SCROLLS IN ITS OWN BOX (TQ follow-up
   2026-09-24). topic-question-card.js puts .tq-math-scrolls on an inline
   .base only when that one box is wider than the line it sits on (the AI
   feedback's "F_net = sqrt(...)" ran 40px through the sheet's right edge at
   390px); the fade and the touch track are the display's, above. Capped at
   the line's width, the box is always alone on its line, so aligning its
   top to the line changes nothing beside it; a scroll box's baseline is its
   bottom edge, which would lift the formula by its depth. overflow-y stays
   hidden: KaTeX's strut already makes the box as tall as the ink. */
.nb-tq-card :is(.tq-question, .tq-model-body, .tq-kp-label, .tq-block-body) .katex .base.tq-math-scrolls {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  vertical-align: top;
}
/* ⚑ ON A PHONE NOTHING ON THE CARD SCROLLS SIDEWAYS (The No-Sideways Rule,
   DESIGN.md; owner, 2026-09-27: "i dont want this happening anywhere in
   mobile mode"). The fades and the drawn track above are the desk's: below
   861px note-math-fit.js lays out every display and inline formula of the
   four zones itself (each relation opening its line, the type smaller only
   for a piece that cannot break) and topic-question-card.js never marks a
   box .tq-math-scrolls, so a display has nothing to scroll and shows its
   overflow on both axes (visible beside hidden computes to auto). A display
   loosened on the desk and carried across 861px by a rotation is held
   whole again: its gaps stop wrapping and its box goes back to KaTeX's own
   min-content, so a .base never breaks inside itself where the engine
   measures it whole. The feedback, which quotes URLs, breaks a word or a
   URL longer than its line inside itself (the page used to widen by the
   URL and push the pager's Next off the screen); KaTeX never does. The
   lines the engine draws are the notes' own: each holds its line whole with
   a gap between lines only, and an aligned or hanging layout
   (data-math-align) sets them left inside one block, centred on the zone. */
@media (max-width: 860px) {
  .nb-tq-card :is(.tq-question, .tq-model-body, .tq-kp-label, .tq-block-body) .katex-display .nb-math-line {
    display: block;
    white-space: nowrap;
  }
  .nb-tq-card :is(.tq-question, .tq-model-body, .tq-kp-label, .tq-block-body) .katex-display .nb-math-line + .nb-math-line {
    margin-top: var(--nb-s2);
  }
  .nb-tq-card :is(.tq-question, .tq-model-body, .tq-kp-label, .tq-block-body) .katex-display[data-math-align] > .katex > .katex-html {
    display: inline-block;
    text-align: left;
  }
  .nb-tq-card :is(.tq-question, .tq-model-body, .tq-kp-label, .tq-block-body) .katex-display {
    overflow: visible;
  }
  .nb-tq-card :is(.tq-question, .tq-model-body, .tq-kp-label, .tq-block-body) .katex-display .base.tq-math-wrap {
    width: min-content;
  }
  .nb-tq-card :is(.tq-question, .tq-model-body, .tq-kp-label, .tq-block-body) .katex-display .tq-math-gap {
    white-space: nowrap;
  }
  .nb-tq-card .tq-block-body {
    overflow-wrap: break-word;
  }
  .nb-tq-card :is(.tq-question, .tq-model-body, .tq-kp-label, .tq-block-body) .katex {
    overflow-wrap: normal;
  }
  .nb-tq-card :is(.tq-question, .tq-model-body, .tq-kp-label, .tq-block-body) pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .nb-tq-card :is(.tq-question, .tq-model-body, .tq-kp-label, .tq-block-body) code {
    overflow-wrap: anywhere;
  }
}
.nb-tq-card .nb-tq-model-note {
  margin: var(--nb-s4) 0 0;
  color: var(--nb-ink-2);
  font: var(--nb-type-ui);
  font-size: var(--nb-text-sm);
}
:is(.nb-qg-practice, .tq-shell) .tq-grade-head .tq-q-marks--score {
  margin-left: auto;
  color: var(--nb-ink);
}
.qg[data-grade="zero"] .nb-tq-card .tq-q-marks--score,
.qg[data-grade="zero"] .nb-tq-card .tq-q-marks--score > * {
  color: var(--nb-red);
}
.qg[data-grade="full"] .nb-tq-card .tq-q-marks--score,
.qg[data-grade="full"] .nb-tq-card .tq-q-marks--score > * {
  color: var(--nb-success);
}
/* The question numbers belong in the existing pager below the sheet. */

/* ⚑ MARK ANSWER NEVER LIES OVER VIEW MODAL ANSWER (mobile audit 2026-09-25,
   S-G4). The row is one nowrap line, and the reveal's column could shrink
   below its own longest word ("answer", beside a chevron), so with large text
   or page zoom the reveal ran on underneath Mark answer, which is painted
   after it: at 390px and 2x text 71px of it was covered, and at 150% or 200%
   zoom a tap on the reveal marked the answer instead. Now the column never
   shrinks below that word and the row wraps: Mark answer keeps the line
   beside the reveal while the reveal's words can still fit there (it takes
   extra lines if it needs them, as at 320px, S-034), and drops to its own
   line, still at the right edge, when they cannot. At default text every
   phone keeps the one row it has today. */
@media (max-width: 720px) {
  .nb-tq-card .nb-tq-actions {
    flex-wrap: wrap;
    row-gap: var(--nb-s2);
  }
  .nb-tq-secondary-actions {
    flex: 1 1 0;
    min-width: min-content;
  }
  /* The AI notice takes a line of its own, right above Mark answer, which
     keeps the right edge (Website list v1.0, item 6). */
  .nb-tq-card .qg-ai-notice { flex: 1 1 100%; justify-content: flex-end; }
  .nb-tq-card .qg-ai-notice + .tq-mark-btn { margin-left: auto; }
  .nb-tq-card .tq-reveal-btn {
    white-space: normal;
    text-align: start;
  }
}

@media (max-width: 500px) {
  /* --tq-pad moves WITH the padding. The marked-answer rule and the model
     panel bleed to the sheet edge with margin-inline: calc(-1 * --tq-pad)
     (notebook-grader.css section 7), and this rule used to shrink the padding
     to 20px while --tq-pad stayed 24px, so on a phone the rule poked 4px past
     BOTH edges of the sheet on every marked card (measured 3.5px at 390). */
  .nb-tq-card.tq-paper { --tq-pad: var(--nb-s5); padding: var(--tq-pad); }
  /* On a phone the marks share the question's FIRST LINE and the rest of the
     question takes the full width under them, the way an exam paper sets a
     mark in the margin. A second column would have held the marks' 56px for
     the whole height of the question (a long question went from 5 lines to 7
     and "25 m" lost its unit to the next line), and the old stacked row put
     them alone above the sentence. So the two boxes share one grid cell:
     .tq-q-main fills it, the marks sit at its top-right corner on the same
     first baseline (align-items: baseline above), and a float at the head of
     the question reserves exactly that corner on line one only. 4.25rem is
     the widest allocation the label can print, measured: "12 marks" is
     64.9px at this size (the corpus tops out at "7 marks", 55.9px); plus the
     --nb-s3 gap. 1.5em is one line of the question (its line-height). */
  .nb-tq-card .tq-q-head { grid-template-columns: minmax(0, 1fr); }
  /* the question number takes its own first line on a phone, above the
     question and its marks corner (owner 2026-09-29) */
  .nb-tq-card .tq-q-no { grid-area: 1 / 1; }
  .nb-tq-card .tq-q-main,
  .nb-tq-card .nb-tq-meta { grid-area: 2 / 1; }
  .nb-tq-card .nb-tq-meta { justify-self: end; }
  .nb-tq-card .tq-question::before {
    content: "";
    float: right;
    width: calc(4.25rem + var(--nb-s3));
    height: 1.5em;
  }
  /* The head is a size container so the corner can stand down when the head
     is too narrow to hold it (the @container rule after this block). The
     row-gap only acts once that second row exists: the resting phone head is
     one cell, so nothing moves at normal text sizes. */
  .nb-tq-card .tq-q-head {
    container: tq-head / inline-size;
    row-gap: var(--nb-s2);
  }
  .nb-tq-card .qg-input { min-height: 160px; }
  .nb-tq-card .nb-tq-actions { gap: var(--nb-s2); }
  /* Mark answer never breaks: below about 334px (a 320px phone) the nowrap
     reveal left it 88px and its label went onto two lines beside a one-line
     link (S-034). Now the button keeps its width and the quieter reveal link
     takes the second line instead. Above 334px the row fits and nothing
     moves. */
  .nb-tq-card .tq-reveal-btn { gap: var(--nb-s1); font-size: var(--nb-text-xs); white-space: normal; text-align: start; }
  .nb-tq-card .tq-mark-btn { flex: none; padding-inline: var(--nb-s3); font-size: var(--nb-text-sm); }
  .nb-tq-card .tq-mark-label { white-space: nowrap; }
  .nb-tq-save-status { text-align: right; }
  .nb-tq-card .tq-grade-head { flex-wrap: wrap; }
}
/* ⚑ THE MARKS TAKE THEIR OWN ROW ONLY WHERE THE CORNER CANNOT HOLD THEM
   (mobile audit round 2, S-R1-1). With large text or page zoom the head
   narrows until the corner float leaves a sliver beside it: at 195 CSS px the
   first line put "Def" beside the float and "ine" under it, and at 160 CSS px
   the float was wider than the head, so the first line dropped under it and
   the baseline-aligned "2 marks" followed it down onto "Define". Once the head
   is narrower than the reserve (4.25rem plus the 12px --nb-s3 gap, written as
   a literal because var() cannot appear in a query) plus the widest first
   word (about 6.5rem, "Calculate" at the title size), the marks stand on
   their own row above the question, still right-aligned, and the question
   gets the full width back. rem follows the reader's text size and zoom, so
   at default text no phone reaches this and the corner layout (owner list
   2026-09-24, item 8) is untouched. The container only exists at 500px and
   below, so nothing here can match on a wider screen. */
@container tq-head (max-width: calc(10.75rem + 12px)) {
  .nb-tq-card .nb-tq-meta {
    grid-area: 2 / 1;
    align-self: start;
  }
  .nb-tq-card .tq-q-main { grid-area: 3 / 1; }
  .nb-tq-card .tq-question::before { content: none; }
}
/* ⚑ ON A PHONE THE VERDICT KEEPS A CORNER, NOT A COLUMN (TQ round 2,
   2026-09-24). notebook-grader.css sets each mark-scheme row as two tracks at
   480px and down: the point, and a fixed 5.5rem verdict column. At 320px that
   left the point 106px ("States the | reaction is | first order | overall",
   six lines for one sentence), and a long word had nowhere to go but under
   the verdict or out of the sheet. The verdict only ever stands beside the
   FIRST line, so here it keeps just that corner, the way the marks keep
   theirs beside the question (item 8, above): the row is one block, the
   verdict sits in its top-right corner, and a float at the head of the row
   reserves the verdict's box plus the old --nb-s4 gap on line one only. Line
   one is exactly as wide as before; every later line has the row's full
   width. topic-question-card.js (fitLongWords) then breaks only a piece that
   still collides, and sets --tq-kp-corner-gap to 0 on a row whose opening
   word ran into the old gap without reaching the verdict, so that word stays
   whole beside it as it always did. 1em is less than one line of the point
   (line-height 1.65em), so the float shortens line one and nothing else;
   where a power or a fraction on line two rises into the verdict's line box,
   the script sets --tq-kp-corner-h so the corner reaches that line as well.
   Scoped to the notebook page, whose row is the notebook grid (the legacy
   twin sets its own flex row). */
@media (max-width: 480px) {
  .nb-qg-body .tq-kp {
    display: flow-root;
    position: relative;
  }
  .nb-qg-body .tq-kp::before {
    content: "";
    float: right;
    width: calc(5.5rem + var(--tq-kp-corner-gap, var(--nb-s4)));
    height: var(--tq-kp-corner-h, 1em);
  }
  .nb-qg-body .tq-kp-label {
    display: block;
  }
  .nb-qg-body .tq-kp-status {
    position: absolute;
    top: var(--nb-s3);
    right: var(--nb-s1);
    width: 5.5rem;
  }
}
/* A word that collides is hyphenated by the browser's dictionary (the page is
   lang="en") inside its own span only, so no other line end is touched. */
.nb-tq-card .tq-kp-label .tq-kp-long--hyph {
  -webkit-hyphens: auto;
  hyphens: auto;
}
/* What the browser would tear after a dash or a bar stays on one line:
   a charge and its state symbol ("Ba2+(aq)", never "Ba2+" | "(aq)") or its
   closing bracket ("[OH-]", never "[OH-" | "]"), a dash before a digit ("6.63e-34", "s-1", "24-36", "carbon-12"), an absolute value
   ("|Dp|") and an arrow typed as text ("->"). topic-question-card.js
   (kpKeeps) wraps each in this span. */
.nb-tq-card .tq-kp-label .tq-kp-keep {
  white-space: nowrap;
}
/* Reader preference pass: the question text, answer reference, and grader use
   the page's full ink. Blue, green, and examiner red remain state colours. */
.tq-shell .tq-model-body,
.tq-shell .nb-tq-model-note,
.tq-shell .tq-kp-label,
.tq-shell .tq-kp.is-matched .tq-kp-label,
.tq-shell .tq-block-body,
.tq-shell .tq-feedback-band,
.tq-shell .tq-kp-status,
.nb-qg-practice .tq-model-body,
.nb-qg-practice .nb-tq-model-note,
.nb-qg-practice .tq-kp-label,
.nb-qg-practice .tq-kp.is-matched .tq-kp-label,
.nb-qg-practice .tq-block-body,
.nb-qg-practice .tq-feedback-band,
.nb-qg-practice .tq-kp-status,
.nb-tq-card .tq-answer-label,
.nb-tq-card .nb-tq-save-status,
.nb-tq-card .nb-tq-answer-meta,
.tq-shell .nb-tq-answer-meta {
  color: var(--nb-ink);
}
.tq-shell .tq-model-body,
.tq-shell .nb-tq-model-note,
.tq-shell .tq-grade-card,
.tq-shell .tq-grade-card *:not(.katex, .katex *),
.tq-shell .tq-feedback-band,
.tq-shell .tq-feedback-band *:not(.katex, .katex *),
.nb-qg-practice .tq-model-body,
.nb-qg-practice .nb-tq-model-note,
.nb-qg-practice .tq-grade-card,
.nb-qg-practice .tq-grade-card *:not(.katex, .katex *),
.nb-qg-practice .tq-feedback-band,
.nb-qg-practice .tq-feedback-band *:not(.katex, .katex *) {
  font-style: normal;
}
.tq-shell .tq-model-body em,
.tq-shell .tq-model-body i,
.nb-qg-practice .tq-model-body em,
.nb-qg-practice .tq-model-body i {
  font-style: normal;
}
.tq-shell .tq-grade-card,
.tq-shell .tq-grade-card *:not(.katex, .katex *),
.tq-shell .tq-feedback-band,
.tq-shell .tq-feedback-band *:not(.katex, .katex *),
.nb-qg-practice .tq-grade-card,
.nb-qg-practice .tq-grade-card *:not(.katex, .katex *),
.nb-qg-practice .tq-feedback-band,
.nb-qg-practice .tq-feedback-band *:not(.katex, .katex *) {
  font-family: var(--nb-sans);
}
.tq-shell .tq-kp-status,
.tq-shell .tq-kp.is-matched .tq-kp-status,
.nb-qg-practice .tq-kp-status,
.nb-qg-practice .tq-kp.is-matched .tq-kp-status {
  font-size: var(--nb-text-sm);
  font-weight: 600;
}
.tq-shell .tq-block-title,
.nb-qg-practice .tq-block-title {
  color: var(--nb-blue);
  font: var(--nb-type-control);
  font-style: normal;
}
:is(.tq-shell, .nb-qg-practice) .nb-tq-card .tq-grade-title,
:is(.tq-shell, .nb-qg-practice) .nb-tq-card .tq-grade-sub {
  color: var(--nb-blue);
}
.tq-shell .tq-grade-card .tq-grade-reset,
.nb-qg-practice .tq-grade-card .tq-grade-reset { font-family: var(--nb-sans); font-style: normal; }

/* The legacy note viewer assigns muted ink directly to rendered paragraphs and
   headings. Keep authored question/reference prose on the card's full ink too. */
.tq-shell .tq-paper.nb-tq-card .tq-question,
.tq-shell .tq-paper.nb-tq-card .tq-question *,
.tq-shell .tq-paper.nb-tq-card .tq-signin-hint,
.tq-shell .tq-paper.nb-tq-card .tq-model-body,
.tq-shell .tq-paper.nb-tq-card .tq-model-body *,
.tq-shell .tq-paper.nb-tq-card .nb-tq-model-title,
.tq-shell .tq-paper.nb-tq-card .nb-tq-model-note,
.tq-shell .tq-paper.nb-tq-card .tq-kp-label *,
.tq-shell .tq-paper.nb-tq-card .tq-block-body *,
.nb-qg-practice .tq-paper.nb-tq-card .tq-question,
.nb-qg-practice .tq-paper.nb-tq-card .tq-question *,
.nb-qg-practice .tq-paper.nb-tq-card .tq-model-body,
.nb-qg-practice .tq-paper.nb-tq-card .tq-model-body *,
.nb-qg-practice .tq-paper.nb-tq-card .nb-tq-model-title,
.nb-qg-practice .tq-paper.nb-tq-card .nb-tq-model-note,
.nb-qg-practice .tq-paper.nb-tq-card .tq-kp-label *,
.nb-qg-practice .tq-paper.nb-tq-card .tq-block-body * {
  color: var(--nb-ink) !important;
}

/* ---------- THE MARKED ANSWER (owner, 2026-10-07) ------------------------
   "why does the grader look like this?? ... make it look nice and match our
   theme". It now speaks the MCQ response's language (notebook-mcq.css
   section 7), which the owner chose for the multiple-choice page, without
   becoming a card inside the card: on the sheet itself, parted by hairlines.

     THE VERDICT   a 44px mark beside the score: full marks a filled tick,
                   none a filled cross, part of them a ring filled as far as
                   the score goes (--tq-score-frac, written by grader.js). The
                   score is the headline, in the verdict's colour; under it
                   one quiet line on how it was marked (or "Marking your
                   answer…" while it waits). Reset keeps its corner.
     THE SCHEME    "Mark scheme", then one row per point: a 22px filled tick
                   or cross (a neutral ring for a line the student's tick or
                   the tools decided), the point in the ink at the prose
                   size, what it earned at the right.
     THE FEEDBACK  a pen beside "Examiner feedback", then the marker's words
                   as paragraphs and a real list (grader.js drawDoc), with
                   their maths in KaTeX's own faces, as in the question.

   Two kinds of maths ran wrong here and are mended, not restyled: the card's
   catch-alls above set every descendant in the sans, upright, so KaTeX lost
   its fonts and its italic (those selectors now stop at .katex), and an
   equation stood a size above its words. Every colour is a token; the
   verdict inks are the MCQ response's (--nb-adm-tip, --nb-adm-warn). */
.nb-qg-practice .nb-tq-card {
  --tq-verdict: var(--nb-ink);
  --tq-verdict-ring: color-mix(in srgb, var(--nb-ink) 14%, transparent);
}
.nb-qg-practice .qg[data-grade="full"] .nb-tq-card { --tq-verdict: var(--nb-adm-tip); }
.nb-qg-practice .qg[data-grade="zero"] .nb-tq-card { --tq-verdict: var(--nb-adm-warn); }

/* The region: a hairline across the sheet and room above it, in place of the
   old 2px quiet rule. */
.nb-qg-practice .nb-tq-card .tq-grade-card {
  margin-top: var(--nb-s8);
  padding: var(--nb-s6) var(--tq-pad) 0;
  border-top: 1px solid var(--nb-border);
}

/* The verdict head: mark | score over its line | Reset. */
.nb-qg-practice .nb-tq-card .tq-grade-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas:
    "badge score reset"
    "badge sub   reset";
  align-items: center;
  column-gap: var(--nb-s4);
  row-gap: 2px;
  margin: 0;
  padding-bottom: var(--nb-s5);
  border-bottom: 1px solid var(--nb-border);
}
.nb-qg-practice .nb-tq-card .tq-grade-badge {
  grid-area: badge;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--nb-r-pill);
  background: var(--tq-verdict-ring);
  color: var(--nb-paper-raised);
}
.nb-qg-practice .tq-grade-glyph { display: none; }
.nb-qg-practice .qg[data-grade="full"] .tq-grade-badge { background: var(--nb-adm-tip); }
.nb-qg-practice .qg[data-grade="full"] .tq-grade-glyph--full { display: block; }
.nb-qg-practice .qg[data-grade="zero"] .tq-grade-badge { background: var(--nb-adm-warn); }
.nb-qg-practice .qg[data-grade="zero"] .tq-grade-glyph--zero { display: block; }
/* Part marks: the ring fills clockwise from the top as far as the score. */
.nb-qg-practice .qg[data-grade="partial"] .tq-grade-badge {
  background: conic-gradient(var(--nb-adm-tip) calc(var(--tq-score-frac, 0.5) * 1turn), var(--tq-verdict-ring) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), var(--nb-ink) calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), var(--nb-ink) calc(100% - 5px));
}
/* While the grade is in flight the mark waits as an empty ring. */
.nb-qg-practice .nb-tq-card .tq-grade-card.is-loading .tq-grade-badge {
  background: var(--tq-verdict-ring);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), var(--nb-ink) calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), var(--nb-ink) calc(100% - 2px));
}
.nb-qg-practice .nb-tq-card .tq-grade-card.is-loading .tq-grade-glyph { display: none; }

/* The score is the headline: "2 / 3 marks", the unit a step quieter. */
.nb-qg-practice .qg .nb-tq-card .tq-grade-head .tq-q-marks--score {
  grid-area: score;
  margin: 0;
  font-family: var(--nb-sans);
  font-size: var(--nb-text-xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--tq-verdict);
}
.nb-qg-practice .qg .nb-tq-card .tq-grade-head .tq-q-marks--score > * {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
.nb-qg-practice .qg .nb-tq-card .tq-grade-head .tq-q-marks--score .tq-q-marks-unit {
  font-weight: 400;
}
.nb-qg-practice .nb-tq-card .tq-grade-head-text {
  grid-area: sub;
  display: block;
  margin: 0;
}
.nb-qg-practice .nb-tq-card .tq-grade-title { display: none; }
.nb-qg-practice .nb-tq-card .tq-grade-head .tq-grade-sub {
  font: var(--nb-type-ui);
  font-size: var(--nb-text-sm);
  color: var(--nb-ink);
}
.nb-qg-practice .nb-tq-card .tq-grade-reset {
  grid-area: reset;
  align-self: center;
}

/* The scheme. */
.nb-qg-practice .nb-tq-card .tq-grade-body { padding-top: var(--nb-s5); }
.nb-qg-practice .nb-tq-card .tq-kp-heading {
  margin: 0 0 var(--nb-s1);
  font: var(--nb-type-label);
  font-size: var(--nb-text-md);
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  color: var(--nb-ink);
}
.nb-qg-practice .nb-tq-card .tq-kp {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--nb-s5);
  padding: var(--nb-s3) 0;
  background: none;
}
.nb-qg-practice .nb-tq-card .tq-kp-label {
  padding-left: 34px;
  color: var(--nb-ink);
}
/* The mark: a 22px disc (::before) with its glyph cut out of the paper over
   it (::after). Missed is the default; met and decided-by-the-tick are the
   two states grader.js names. */
.nb-qg-practice .nb-tq-card .tq-kp-label::before,
.nb-qg-practice .nb-tq-card .tq-kp.is-matched .tq-kp-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc((1lh - 22px) / 2);
  width: 22px;
  height: 22px;
  border-radius: var(--nb-r-pill);
  background: var(--nb-adm-warn);
  transform: none;
  animation: none;
}
.nb-qg-practice .nb-tq-card .tq-kp-label::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc((1lh - 22px) / 2);
  width: 22px;
  height: 22px;
  background: var(--nb-paper-raised);
  -webkit-mask: var(--tq-kp-glyph) center / 14px 14px no-repeat;
  mask: var(--tq-kp-glyph) center / 14px 14px no-repeat;
}
.nb-qg-practice .nb-tq-card .tq-kp {
  --tq-kp-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}
.nb-qg-practice .nb-tq-card .tq-kp.is-matched {
  --tq-kp-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 7'/%3E%3C/svg%3E");
}
.nb-qg-practice .nb-tq-card .tq-kp.is-matched .tq-kp-label::before {
  background: var(--nb-adm-tip);
  animation: tq-kp-in var(--nb-dur-2) var(--nb-ease) both;
}
.nb-qg-practice .nb-tq-card .tq-kp.is-tool .tq-kp-label::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--nb-border-strong);
}
.nb-qg-practice .nb-tq-card .tq-kp.is-tool .tq-kp-label::after { content: none; }
@keyframes tq-kp-in {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
/* What the point earned: "1 mark" in the met ink, the rest in the ink. */
.nb-qg-practice .nb-tq-card .tq-kp-status,
.nb-qg-practice .nb-tq-card .tq-kp.is-matched .tq-kp-status {
  font-family: var(--nb-sans);
  font-size: var(--nb-text-sm);
  font-style: normal;
  font-weight: 500;
  color: var(--nb-ink);
}
.nb-qg-practice .nb-tq-card .tq-kp.is-matched .tq-kp-status {
  font-weight: 600;
  color: var(--nb-adm-tip);
}

/* The feedback. */
.nb-qg-practice .nb-tq-card .tq-feedback-band {
  margin: var(--nb-s5) 0 0;
  padding: var(--nb-s5) 0 var(--nb-s2);
  border-top: 1px solid var(--nb-border);
}
.nb-qg-practice .nb-tq-card .tq-block-title,
.nb-qg-practice .nb-tq-card .tq-block-title--accent {
  display: flex;
  align-items: center;
  gap: var(--nb-s3);
  margin: 0 0 var(--nb-s3);
  font: var(--nb-type-label);
  font-size: var(--nb-text-md);
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  color: var(--nb-ink);
}
.nb-qg-practice .nb-tq-card .tq-block-title svg {
  flex: none;
  color: var(--nb-ink);
}
.nb-qg-practice .nb-tq-card .qg-feedback-text {
  max-width: 68ch;
  font: var(--nb-type-prose);
  line-height: 1.6;
  font-variant-numeric: lining-nums;
  text-wrap: pretty;
}
.nb-qg-practice .nb-tq-card .qg-feedback-text .tq-fb-p {
  margin: 0 0 var(--nb-s2);
}
.nb-qg-practice .nb-tq-card .qg-feedback-text .tq-fb-p:last-child { margin-bottom: 0; }
.nb-qg-practice .nb-tq-card .qg-feedback-text .tq-fb-list {
  margin: 0 0 var(--nb-s3);
  padding-left: 1.35em;
}
.nb-qg-practice .nb-tq-card .qg-feedback-text .tq-fb-list:last-child { margin-bottom: 0; }
.nb-qg-practice .nb-tq-card .qg-feedback-text .tq-fb-list li {
  margin: 0 0 var(--nb-s1);
  padding-left: 0.25em;
}
.nb-qg-practice .nb-tq-card .qg-feedback-text .tq-fb-list li::marker { color: var(--nb-ink); }

/* The maths reads at its words' size, in KaTeX's own faces. */
.nb-qg-practice .nb-tq-card :is(.tq-kp-label, .qg-feedback-text) .katex { font-size: 1.08em; }
.nb-qg-practice .nb-tq-card .qg-feedback-text .tq-math--display .katex-display { margin: var(--nb-s2) 0; }

@media (max-width: 500px) {
  .nb-qg-practice .nb-tq-card .tq-grade-head {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    column-gap: var(--nb-s3);
  }
  .nb-qg-practice .nb-tq-card .tq-grade-badge { width: 40px; height: 40px; }
  .nb-qg-practice .qg .nb-tq-card .tq-grade-head .tq-q-marks--score { font-size: var(--nb-text-lg); }
}
@media (max-width: 480px) {
  /* the phone's corner verdict (above) keeps its top; the mark keeps line one */
  .nb-qg-body .nb-tq-card .tq-kp-status { top: var(--nb-s3); }
}
@media (prefers-reduced-motion: reduce) {
  .nb-qg-practice .nb-tq-card .tq-kp.is-matched .tq-kp-label::before { animation: none; }
}