/* ==========================================================================
   notebook-blocks.css: the few pieces a converter28 page draws that the
   notebook sheet does not already style (noteviewer/blocks_render.py).

   A converter28 page reuses notebook-notes.css for every component it
   shares with the markdown pages (objectives card, callouts, worked
   examples, field rows, result panels, tables, figures, review cards).
   This sheet only adds:
     1. the callout body wrapper (a <div> of paragraphs, where the markdown
        page had one <span>),
     2. the docx's empty paragraphs and rules (spacing, not content),
     3. the callout kinds that are new with the Subjects28 corpus (owner
        ruling F8: each gets its own kind; accent + glyph are PROPOSALS
        until the owner's design review, /_c28/callouts/ on a DEBUG server).
   Colours are the callout admonition tokens only (DESIGN.md, Callout
   admonition palette): no new hue enters here. The practice pages
   (flashcards, MCQ, questions) load it too; every other
   rule is scoped to the notes sheet or to converter28 classes.
   ========================================================================== */

/* 1 · Callout body: paragraphs sit flush with the callout's own padding. */
.nb-notes .note-callout-body > :first-child { margin-top: 0; }
.nb-notes .note-callout-body > :last-child { margin-bottom: 0; }
.nb-notes .note-we-callout-body > :first-child,
.nb-notes .note-field-value > :first-child { margin-top: 0; }
.nb-notes .note-we-callout-body > :last-child,
.nb-notes .note-field-value > :last-child { margin-bottom: 0; }

/* 2 · Spacing paragraphs and rules of the docx carry no words: the page's own
   rhythm, headings and cards part its sections (owner 2026-09-29: a line inside
   a section cut it from its own heading; the live site never drew them). */
.nb-notes .note-spacer { display: none; }
.nb-notes .note-divider[hidden] { display: none; }

/* 3 · New callout kinds (proposed accent and glyph, pending review).
   Shape, spacing, kicker and wash come from the shared .note-callout rules;
   each kind sets only --adm and --adm-glyph, like the kinds before it. */
.nb-notes .note-callout--pinned { --adm: var(--nb-adm-def); --adm-glyph: "\25CF"; }              /* ● pin head */
.nb-notes .note-callout--representation-note { --adm: var(--nb-adm-interp); --adm-glyph: "\2261"; } /* ≡ */
.nb-notes .note-callout--reading-convention { --adm: var(--nb-adm-interp); --adm-glyph: "\2192"; }  /* → */
.nb-notes .note-callout--reading-the-equation { --adm: var(--nb-adm-mathskill); --adm-glyph: "\003D"; } /* = */
.nb-notes .note-callout--key-equations { --adm: var(--nb-adm-mathskill); --adm-glyph: "\03A3"; }   /* Σ */
.nb-notes .note-callout--graphing-activity { --adm: var(--nb-adm-mathskill); --adm-glyph: "\2197"; } /* ↗ */
.nb-notes .note-callout--drawing-guidance { --adm: var(--nb-adm-tip); --adm-glyph: "\270E"; }      /* ✎ */
.nb-notes .note-callout--diagram { --adm: var(--nb-adm-example); --adm-glyph: "\25A2"; }           /* ▢ */
.nb-notes .note-callout--phrasing-precision { --adm-glyph: "\201C"; }                               /* “ */
.nb-notes .note-callout--safety { --adm-glyph: "\25B2"; }                                            /* ▲ */

/* A pin with no words (the docx's 📌 alone) gets the kicker every callout
   has, NOTE, from the renderer (owner review 2026-09-29: a lone dot at the
   start of the text read as a stray bullet). */
/* The diagram accent is a periwinkle slate: its kicker and glyph take the
   ink (The One-Ink Rule), as the illustrative example's do. */
.nb-notes .note-callout--diagram > strong { color: var(--nb-ink); }

/* 4 · An inline equation chunk wider than its column (a bracket group KaTeX
   cannot break, on a phone): notebook-blocks.js marks it, and it alone scrolls
   sideways within itself. Unmarked equations keep their plain inline box. */
.nb-notes .katex-html > .base.esa-math-wide {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  vertical-align: bottom;
}

/* 5 · Figures take the share of the page's column they took of Word's text
   column (blocks_render._figure_share: --fig-w), a full-width Word picture the
   whole column, and never more than their own pixels (--fig-px). A phone
   column is too narrow for a share: there every figure takes the column. */
.nb-notes .note-figure-img-area img.note-figure-img {
  width: var(--fig-w, auto);
  max-width: min(100%, var(--fig-px, 100%));
}
@media (max-width: 640px) {
  .nb-notes .note-figure-img-area img.note-figure-img { width: 100%; }
}

/* 6 · Content pictures on a white card (dark theme, picture answers): site-pictures.css,
   linked by both page bases so every page has it. */

/* 7 · The check of a worked answer: its own panel in the answer's emerald
   stripe with a lighter wash and body ink (the answer panel keeps the loud
   value); right under the answer the two read as one block. The answer's
   entry note (SAT: ways to enter) sits in the answer panel in body ink. */
.nb-notes .note-we-check {
  border-left: 3px solid var(--nb-adm-result);
  background: color-mix(in srgb, var(--nb-adm-result) 5%, transparent);
}
.nb-notes .note-we-check .note-we-callout-label { color: var(--nb-adm-result); }
.nb-notes .note-we-result + .note-we-check {
  margin-top: 0;
  padding-top: var(--nb-s3);
  border-top: 1px solid color-mix(in srgb, var(--nb-adm-result) 22%, transparent);
}
.nb-notes .note-we-check .note-we-callout-body > * + * { margin-top: var(--nb-s2); }
.nb-notes .note-we-answer-note {
  margin-top: var(--nb-s2);
  color: var(--nb-ink);
}
.nb-notes .note-we-answer-note p { margin: 0; }

/* 8 · A header cell of numbers or maths (a table of values: t | 0 | 4 | 8)
   reads at the value size, not the small label size of a word heading; it
   keeps the header row's weight and sunken fill. */
.nb-notes .note-table-scroll th.note-th-value {
  font-size: var(--nb-text-md);
}

/* 9 · The practice pages (flashcards, MCQ, questions) draw converter28 blocks
   outside the notes sheet, where the sheet's own sizing does not reach: a
   picture shrinks to its column (a Word-sized 387px plot on a 316px phone
   column), a card's padding counts inside its width, and a table scrolls
   sideways inside its own box instead of pushing the page wider. The notes
   sheet keeps its own rules (a table that does not fit stacks). */
img:is(.note-figure-img, .note-inline-img) {
  max-width: 100%;
  height: auto;
}
/* a practice figure at its notes-page size (blocks_render NOTES_COLUMN), never
   wider than its column or its own pixels */
img.note-figure-img[style*="--fig-w"]:not(.nb-notes *) {
  width: var(--fig-w, auto);
  max-width: min(100%, var(--fig-px, 100%));
}
.note-table-scroll:not(.nb-notes *) {
  position: relative;  /* KaTeX's absolute MathML layer stays in the box */
  max-width: 100%;
  overflow-x: auto;
  /* the notes sheet's table look in a practice card (owner review 2026-09-30:
     a topic question's table read as bare text, 'Harpreet27'): a hairline
     frame hugging the table, rules between rows, a sunken header row */
  width: fit-content;
  margin: var(--nb-s3) 0;
  background-color: var(--nb-paper-raised);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-md);
}
.note-table-scroll:not(.nb-notes *) > table {
  border-collapse: collapse;
}
.note-table-scroll:not(.nb-notes *) :is(th, td) {
  padding: var(--nb-s2) var(--nb-s4);
  border-bottom: 1px solid var(--nb-border);
  text-align: left;
  vertical-align: top;
  /* a cell never splits a number or a word to squeeze its table (owner
     2026-10-02: an AP Calculus table of values read 12 as 1 over 2 at 390px,
     the question's own overflow-wrap: anywhere let every column shrink to one
     character). break-word keeps each word's width in the table's sizing, so
     a table too wide overflows its frame and table-fit.js stacks it */
  overflow-wrap: break-word;
}
/* on a phone the cells take a narrower side gutter, so a short table of
   values (t: 2 4 5 8 12) stays a table instead of stacking */
@media (max-width: 480px) {
  .note-table-scroll:not(.nb-notes *) :is(th, td) {
    padding: var(--nb-s2) var(--nb-s3);
  }
}
.note-table-scroll:not(.nb-notes *) th {
  background: var(--nb-paper-sunken);
  font-weight: 600;
}
.note-table-scroll:not(.nb-notes *) tr:last-child > td {
  border-bottom: 0;
}
.note-table-scroll:not(.nb-notes *) :is(th, td) p {
  margin: 0;
}
/* 9b · A practice table that would be cut off stacks into labelled rows, at
   every width (The No-Spill Rule; owner 2026-10-01: "make sure nothing like
   this ever happens again", of 467 practice tables cut at 390px and an AP
   Calculus table of values that hid an answer's column at every width).
   table-fit.js marks it data-nb-fit="stack" and gives each cell a clone of its
   column's header (maths stays maths), as the notes stack theirs: one card per
   row, the first cell its title. Labels keep their case: "Li", "kJ/mol". A
   table that fits never meets these rules; the label and value wrappers only
   exist in a table that has stacked once, and read as plain cells again when
   the frame grows back. */
.note-table-scroll:not(.nb-notes *) .nb-cell-label {
  display: none;
}
.note-table-scroll:not(.nb-notes *) .nb-cell-value {
  display: contents;
}
.note-table-scroll[data-nb-fit="stack"]:not(.nb-notes *) {
  width: auto;
}
.note-table-scroll[data-nb-fit="stack"]:not(.nb-notes *) > table,
.note-table-scroll[data-nb-fit="stack"]:not(.nb-notes *) > table > tbody,
.note-table-scroll[data-nb-fit="stack"]:not(.nb-notes *) > table > tbody > tr {
  display: block;
}
.note-table-scroll[data-nb-fit="stack"]:not(.nb-notes *) > table > thead {
  display: none;
}
.note-table-scroll[data-nb-fit="stack"]:not(.nb-notes *) > table > tbody > tr + tr {
  border-top: 1px solid var(--nb-border);
}
.note-table-scroll[data-nb-fit="stack"]:not(.nb-notes *) > table > tbody > tr > td {
  display: block;
  overflow-wrap: anywhere;
}
.note-table-scroll[data-nb-fit="stack"]:not(.nb-notes *) > table > tbody > tr > td:has(> .nb-cell-label) {
  display: grid;
  grid-template-columns: minmax(min-content, 36%) minmax(0, 1fr);
  gap: var(--nb-s2);
  align-items: start;
}
.note-table-scroll[data-nb-fit="stack"]:not(.nb-notes *) > table > tbody > tr > td:first-child {
  background: var(--nb-paper-sunken);
  font-weight: 600;
}
.note-table-scroll[data-nb-fit="stack"]:not(.nb-notes *) > table > tbody > tr > td:last-child {
  border-bottom: 0;
}
/* The label reads at the cell's own size, a step bolder: a header of maths
   (-2.1, x = 0.9) at the small label size came out smaller than its value. */
.note-table-scroll[data-nb-fit="stack"]:not(.nb-notes *) .nb-cell-label {
  display: block;
  min-width: 0;
  font-weight: 600;
  color: var(--nb-ink);
  overflow-wrap: break-word;
}
.note-table-scroll[data-nb-fit="stack"]:not(.nb-notes *) .nb-cell-value {
  display: block;
  min-width: 0;
}
/* A topic question's picture sits centred in the notes' figure frame, its
   caption a centred italic note under it (owner review 2026-09-30: the picture
   hugged the left edge, its caption a plain line under it). MCQ pictures keep
   their own card (the picture-answer guide). */
:is(.tq-question, .tq-model-body) .note-figure {
  width: fit-content;
  max-width: 100%;
  margin: var(--nb-s4) auto;
  padding: var(--nb-s3);
  background: var(--nb-paper-raised);
  border: 1px solid var(--nb-border-figure);
  border-radius: var(--nb-r-md);
}
:is(.tq-question, .tq-model-body) .note-figure-img-area img {
  display: block;
  margin: 0 auto;
  border-radius: var(--nb-r-sm);
}
:is(.tq-question, .tq-model-body) .note-figure-caption {
  display: block;
  margin-top: var(--nb-s2);
  font: italic 400 var(--nb-text-sm)/1.5 var(--nb-serif);
  text-align: center;
  color: var(--nb-ink);
}
/* a list in a question, an answer, an option or a card keeps its bullets or
   numbers inside the text column (they hung in the margin at 0 padding) */
:is(.tq-question, .tq-model-body, .mcq-question, .mcq-opt-text, .mcq-reasoning, .nb-fc-text) :is(ul, ol):not(.esa-steps) {
  margin: var(--nb-s2) 0;
  padding-left: 1.4em;
}

/* 10 · Step labels and calculator status (owner review 2026-09-29: a bold
   label run into its sentence looked odd). A step label (Problem, Strategy,
   Step 1 ...) is the kicker line above its words, as Working always was; the
   notes sheet styles that kicker, the practice pages get the same look here.
   A question's 'No calculator.' / 'Calculator.' lead is no pill (owner
   2026-10-01: "SO UGLY ... no pill"): an instruction line of its own above
   the question's words, as an exam paper prints it, a line-drawn calculator
   (struck through when none is allowed) and the words, in the ink, with no
   box. In a step's or a field's label it stays on the label's line. */
.esa-calc-tag {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.4em;
  /* The strip hangs its own left padding into the margin, so the calculator
     sits on the question's text edge (owner 2026-10-08: "the way the question
     starts it weird. There is a space"). On the study desk the sunken strip is
     the desk's own tone, so the padding alone showed, as a 7px indent at the
     start of 18,294 questions (5,925 topic questions, 12,369 MCQs; browser scan,
     tools/audit/corpus28/render_audit/stem_start_scan.py). */
  margin: 0 0 var(--nb-s2) -0.55em;
  /* a sunken strip behind it, so it reads as the paper's instruction, not a
     line of the question (owner 2026-10-01: "make a background so it stands
     out"); a soft rectangle, never the pill */
  padding: 0.3em 0.75em 0.3em 0.55em;
  background: var(--nb-paper-sunken);
  border-radius: var(--nb-r-md);
  font: var(--nb-type-label);
  color: var(--nb-ink);
}
.esa-calc-icon {
  position: relative;
  display: inline-flex;
  flex: none;
  width: 1.4em;
  height: 1.4em;
}
.esa-calc-icon svg {
  width: 100%;
  height: 100%;
}
/* none allowed: a stroke from corner to corner, and the calculator cut clear
   along it so the stroke reads at this size (a band masked out of the glyph) */
.esa-calc-tag[data-calc="none"] .esa-calc-icon svg {
  -webkit-mask-image: linear-gradient(to top right, #000 calc(50% - 0.16em), transparent 0 calc(50% + 0.16em), #000 0);
  mask-image: linear-gradient(to top right, #000 calc(50% - 0.16em), transparent 0 calc(50% + 0.16em), #000 0);
}
.esa-calc-tag[data-calc="none"] .esa-calc-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.1em;
  min-width: 1.5px;
  height: 128%;
  border-radius: var(--nb-r-pill);
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-45deg);
}
:is(.note-step-label, .note-field-label) .esa-calc-tag {
  display: inline-flex;
  margin: 0 0 0 var(--nb-s2);
  padding: 0.15em 0.6em 0.15em 0.45em;
  vertical-align: -0.25em;
}
.note-step-label:not(.nb-notes *) {
  margin: var(--nb-s4) 0 2px;
  font: var(--nb-type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nb-ink);
}
.note-step-label:not(.nb-notes *) + p { margin-top: 0; }

/* 11 · A model answer, set in the question's own manner (owner 2026-10-01:
   "make it match the aesthetic of the question itself"). practice28.
   _answer_html draws the rows:
     a part     its letter in the student's blue, in the same left gutter the
                question gives its parts, a hairline between parts; the part's
                steps sit inside it, in the body column
     a step     its number small in the ink beside its words; its working
                under them, flush left on a thin rule (the question's given
                data sits on a blue rule, the answer's working on an ink one)
     a mark     a line that is only a mark, "(1 point)", small and italic at
                the right, as the question prints its marks
     the check  last, below a hairline, its tick in the worked example's
                emerald; its Check word stays in the ink
   The step number stays in the text for screen readers. */
.esa-steps {
  --esa-part-w: 2.75rem;  /* the question's part gutter (.tq-part) */
  --esa-num-w: 1.5rem;
  list-style: none;
  margin: var(--nb-s3) 0 0;
  padding: 0;
}
.esa-step {
  display: grid;
  grid-template-columns: var(--esa-num-w) minmax(0, 1fr);
  column-gap: var(--nb-s3);
  align-items: baseline;
  padding: var(--nb-s2) 0;
}
.esa-step-mark {
  font: var(--nb-type-label);
  font-variant-numeric: tabular-nums;
  color: var(--nb-ink);
  white-space: nowrap;
}
.esa-step--item .esa-step-mark::before { content: attr(data-n); }
.esa-step--part {
  grid-template-columns: var(--esa-part-w) minmax(0, 1fr);
  padding: var(--nb-s4) 0;
  border-top: 1px solid var(--nb-border);
}
.esa-step--part:first-child {
  padding-top: var(--nb-s1);
  border-top: 0;
}
.esa-step--part > .esa-step-mark {
  font-size: var(--nb-text-base);
  color: var(--nb-blue);
}
.esa-step--part > .esa-step-body > .esa-steps { margin-top: 0; }
.esa-step--part > .esa-step-body > .esa-steps > .esa-step:first-child { padding-top: 0; }
.esa-step--check {
  margin-top: var(--nb-s2);
  padding-top: var(--nb-s4);
  border-top: 1px solid var(--nb-border);
}
.esa-step--check > .esa-step-mark { color: var(--nb-adm-result); }
.esa-step--check > .esa-step-mark::before { content: "\2713"; }
.esa-step-body { min-width: 0; }
.esa-step-body > .esa-step-title { margin: 0 0 var(--nb-s2); }
.esa-step-body > :last-child { margin-bottom: 0; }
/* the working: flush left under the step's words, on a thin ink rule */
.esa-step-body > .esa-math--display {
  margin: var(--nb-s2) 0;
  padding: var(--nb-s1) 0 var(--nb-s1) var(--nb-s3);
  border-left: 2px solid var(--nb-border-strong);
  text-align: left;
}
.esa-step-body > .esa-math--display .katex-display {
  margin: 0;
  text-align: left;
}
.esa-step-body > .esa-math--display .katex-display > .katex { text-align: left; }
.esa-step-body > .esa-math--display + .esa-math--display { margin-top: calc(-1 * var(--nb-s2)); }
.esa-step-marks {
  margin: var(--nb-s1) 0 0;
  text-align: right;
  font-size: var(--nb-text-sm);
  font-style: italic;
  line-height: 1.4;
  color: var(--nb-ink);
}
@media (max-width: 600px) {
  .esa-steps { --esa-part-w: 2.25rem; --esa-num-w: 1.25rem; }
  .esa-step { column-gap: var(--nb-s2); }
}
.esa-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 12 · A module subject's rail names the module the page is in, above its own
   chapters, with the way back to the module picker (owner 2026-09-29: the rail
   listed the other modules, which are papers of their own). */
.nb-rail-module {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--nb-s3);
  margin-top: var(--nb-s1);
}
.nb-rail-module-name { color: var(--nb-ink); text-decoration: none; }
.nb-rail-module-all { color: var(--nb-blue); font-size: var(--nb-text-sm); }

/* An inline equation and the punctuation written right after it stay on one
   line (owner review 2026-09-30: 'member of A' then '. [1]' on the next line). */
.nb-math-keep { white-space: nowrap; }
/* The equation itself may still break between its own boxes, so a long one
   fits a phone; only the seam between its last box and the punctuation is
   held (browser check 2026-09-30: 363 phone pages had an over-wide line). */
.nb-math-keep .katex { white-space: normal; }
/* In a normal-space KaTeX the browser still breaks between the last box and
   the comma after it (AP Calculus AB 8.1 Q5, owner 2026-10-01: 'function D'
   then ', where' on the next line). An equation of one box has nothing to
   break inside, so it keeps the nowrap and the seam holds. (Two or three
   boxes kept whole pushed 37 and 136 equations past a phone's line; one box
   pushes none.) A box note-math-fit.js has joined to its punctuation
   (.nb-math-join) is a box too: counting only bare .base boxes read
   "P(E) =" plus its joined fraction as one box, held them on one line and ran
   52px past a phone's line (AP Statistics 2.4, drop of 2026-10-04). */
.nb-math-keep .katex:not(:has(.katex-html > :is(.base, .nb-math-join) ~ :is(.base, .nb-math-join))) { white-space: nowrap; }

/* 13 · Key Definitions written one under another share ONE box (owner
   2026-10-01): the label once, each definition its own row, a hairline in the
   box's accent between rows (blocks_render.stack_definitions). */
.nb-notes .note-callout--stack .note-def-row > :first-child { margin-top: 0; }
.nb-notes .note-callout--stack .note-def-row > :last-child { margin-bottom: 0; }
.nb-notes .note-callout--stack .note-def-row + .note-def-row {
  margin-top: var(--nb-s3);
  padding-top: var(--nb-s3);
  border-top: 1px solid color-mix(in srgb, var(--adm) 28%, transparent);
}

/* 14 · The tier chip on the practice cards (owner 2026-10-01: "make an
   extended visual for flashcards and TQs ... right now it just says Extended
   like normal text"). The notes draw it (notebook-notes.css .nb-notes
   .nb-tier); the practice pages loaded no rule, so the chip read as a word.
   Same flag here: Extended (CIE IGCSE) or Higher (Edexcel Maths A). On
   a flashcard it sits on its own line above the words. */
:is(.nb-fc-text, .tq-question, .mcq-question, .mcq-opt-text, .tq-model-body) .nb-tier {
  /* the notes' tier flag, one look sitewide (owner 2026-10-01, his picture) */
  display: inline-block;
  padding: 0.22em 0.8em 0.22em 0.7em;
  vertical-align: 0.12em;
  margin-right: 0.45em;
  font: var(--nb-type-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nb-tier-ink, var(--nb-ink));
  background: var(--nb-tier-fill, var(--nb-blue-wash));
  border: 0;
  border-left: 3px solid var(--nb-tier-edge, var(--nb-blue));
  border-radius: var(--nb-r-pill);
  white-space: nowrap;
}
.nb-fc-text .nb-tier {
  display: table;
  margin: 0 auto var(--nb-s3);
}
/* the topic question's one-ink rule is (0,4,0) !important; the chip keeps its blue */
/* The tier flag's colours (owner 2026-10-01: "make it more brighter a bit
   text white and color more saturated"): white words on a saturated blue
   (AA: 6.5:1 by night, 5.9:1 by day), the left edge a brighter blue by night
   and a deeper one by day so it still reads against the fill. */
html.theme-light {
  --nb-tier-ink: var(--nb-on-blue);  /* white by day */
  --nb-tier-fill: #1F5FE0;
  --nb-tier-edge: #0B3FB4;
}
html.theme-dark,
html:not(.theme-light) {
  --nb-tier-ink: var(--nb-feedback-ink);  /* pure white by night */
  --nb-tier-fill: #2457D6;
  --nb-tier-edge: #7EB0FF;
}
/* the topic question's one-ink rule is (0,4,0) !important: the flag keeps its white */
:is(.tq-shell, .nb-qg-practice) .tq-paper.nb-tq-card :is(.tq-question, .tq-model-body) .nb-tier { color: var(--nb-tier-ink) !important; }

/* 15 · Maths is never seen as its raw TeX (owner 2026-10-01: "when i refresh
   it shows the latex as normal text until 2 secs later"). KaTeX draws every
   equation once the page has loaded (katex-init.js); until it has, the
   equation keeps its place but is not shown. Should KaTeX never run, the raw
   words show after 4 seconds rather than staying hidden. */
.esa-math:not(:has(.katex, .katex-error)) {
  visibility: hidden;
  animation: esa-math-reveal 0s linear 4s forwards;
}
@keyframes esa-math-reveal { to { visibility: visible; } }

/* 16 · A box's rows after a panel, and head rows (sitewide
   render audit, owner 2026-10-04: "is the step 2 too close to the answer box").
   A row that follows a result, check or interpretation panel starts below it on
   the field seam, as a row after a row does; anything else after a panel keeps
   a line's space. A label with nothing of its own (Working over Step 1, Step 2;
   Answer over Equation used, Given) heads the rows under it: no seam between the
   head and its first row. */
.nb-notes :is(.note-practical-body, .note-worked-example-body, .note-derivation-body) > .note-we-callout + :not(.note-we-callout) {
  margin-top: var(--nb-s4);
}
.nb-notes :is(.note-practical-body, .note-worked-example-body, .note-derivation-body) > .note-we-callout + .note-field:not(.note-field--warn) {
  margin-top: var(--nb-s5);
  padding-top: var(--nb-s4);
  border-top: 1px solid var(--nb-border);
}
.nb-notes :is(.note-practical, .note-worked-example, .note-derivation) .note-field.note-field--head {
  margin-bottom: var(--nb-s2);
}
.nb-notes :is(.note-practical, .note-worked-example, .note-derivation)
  .note-field.note-field--head:not(.note-field--warn) + .note-field:not(.note-field--warn) {
  border-top: 0;
  padding-top: 0;
}