/* ============================================================
   THE ANNOTATED NOTEBOOK — reading experience (Phase 2, Task 3).
   Everything in here is scoped .nb-notes and restyles the classes
   rendering.py emits (restyle, NEVER rename — the pipeline and the
   reading scripts own those names). Two emitted callout families
   exist: inline promotions (.note-callout.note-callout--X with
   > strong + > span) and blockquote promotions (blockquote.callout-X
   with .callout-icon-col + .callout-body). Both are covered.

   Voices (DESIGN.md):
   · body/UI = the canonical sans; serif italic = the examiner + sparse
     editorial accents ONLY
   · callouts use the SEMANTIC admonition palette (DESIGN.md §2): each
     type wears its own muted accent + icon + kicker. examiner-insight
     alone keeps the serif-italic examiner voice (now GOLD); exam-tip is
     a plain GREEN sans note; every other type is quiet accented ink.
   · bracketed inline definitions stay as quiet, unhighlighted prose
   Discipline (test-enforced): zero raw colors — tokens/color-mix only.
   ============================================================ */

/* ---------- 1 · The reading voice --------------------------------- */
.nb-notes {
  font: var(--nb-type-prose);
  color: var(--nb-ink);
  overflow-wrap: break-word;
}
.nb-notes p,
.nb-notes ul,
.nb-notes ol {
  margin: 0 0 var(--nb-s4);
}

/* The pipeline's .note-prose-surface was a painted panel in the old
   theme. In the notebook the page IS the paper: the wrapper becomes
   invisible and prose sits directly on the dotted grid, exactly like
   the approved demo's copy blocks. */
.nb-notes .note-prose-surface {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

/* ---------- 2 · Headings ------------------------------------------- */
.nb-notes h2,
.nb-notes h3,
.nb-notes h4 {
  font-family: var(--nb-sans);
  font-weight: 700;
  color: var(--nb-ink);
  letter-spacing: -0.01em;
}
.nb-notes h2 {
  margin: var(--nb-s9) 0 var(--nb-s4);
  padding-bottom: var(--nb-s2);
  border-bottom: 1px solid var(--nb-border); /* thin rule under h2 */
  font-size: var(--nb-text-2xl);
  line-height: 1.25;
}
/* Section-opening accent bar under the h2 text (above the full-width
   hairline) -- lifts the h2 clear of bold body text. Open-page h2s only:
   box/review/objective headings restyle h2 as an in-card title and must
   NOT carry the bar (reset below). */
.nb-notes h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: var(--nb-s2);
  background: var(--nb-blue);
  border-radius: 2px;
}
.nb-notes :is(.note-worked-example,
              .note-worked-example-body,
              .note-practical,
              .note-practical-note,
              .note-derivation,
              .note-review-section,
              .nt-objectives-card) :is(h2, h3)::after,
.nb-notes .nb-paywall-title::after {
  content: none;
}
/* h3 is the REAL top of the emitted heading tree (the corpus writes ###/####
   and the first h2 is dropped server-side), so it carries the same
   section-header treatment as h2 — rule + accent bar, one step smaller.
   Box titles (worked example / practical / review / objectives) restyle
   their own h3 and are excluded from the bar above. */
.nb-notes h3 {
  margin: var(--nb-s8) 0 var(--nb-s3);
  padding-bottom: var(--nb-s2);
  border-bottom: 1px solid var(--nb-border);
  font-size: var(--nb-text-xl);
  line-height: 1.3;
}
.nb-notes h3::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  margin-top: var(--nb-s2);
  background: var(--nb-blue);
  border-radius: 2px;
}
/* h4 reads as a subtopic title, one canonical token step above body prose. */
.nb-notes h4 {
  margin: var(--nb-s6) 0 var(--nb-s3);
  font-size: var(--nb-text-lg);
  line-height: 1.35;
}

/* The note's first <h2> duplicated the page-header H1. It is now dropped
   server-side (_nb_drop_first_heading, notebook-proof path) so note-reading.js
   never scans it into a phantom "On this page" entry — no CSS hide needed. */

/* ---------- 3 · Lead paragraphs ------------------------------------
   rendering.py tags the first plain paragraph after each h2/h3. */
.nb-notes .note-lead {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: var(--nb-ink);
}

/* ---------- 4 · Lists ----------------------------------------------- */
.nb-notes ul,
.nb-notes ol {
  padding-left: var(--nb-s5);
}
.nb-notes li {
  margin-bottom: var(--nb-s2);
}
.nb-notes li::marker {
  color: var(--nb-ink-3); /* quiet structural marks, not content */
}
/* markdown often wraps li text in <p> — collapse the double margin */
.nb-notes li > p {
  margin-bottom: var(--nb-s1);
}
.nb-notes li > p:last-child {
  margin-bottom: 0;
}

/* ---------- 5 · Concepts + tiers ------------------------------------
   Bracketed inline definitions remain ordinary prose. The leading concept
   term keeps a little extra weight so the definition is still easy to scan. */

/* Extended-tier flag. CIE marks supplement content the Extended tier must
   study; the server promotes its rocket marker to this tag (_nb_flag_extended).
   Tier is the student's own wayfinding ("extra for me"), so it wears the blue
   ink as a calm chip — never the examiner's red. */
.nb-notes .nb-tier {
  display: inline-block;
  font: var(--nb-type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nb-blue);
  background: var(--nb-blue-wash);
  border: 1px solid color-mix(in srgb, var(--nb-blue) 30%, transparent);
  padding: 0.12em 0.5em;
  border-radius: var(--nb-r-pill);
  vertical-align: 0.08em;
  margin-right: 0.4em;
  white-space: nowrap;
}

.nb-notes .note-concept > strong {
  font-weight: 700;
}

/* ---------- 6 · Callouts — the SEMANTIC admonition system ------------
   The owner asked for each callout type to be identifiable at a glance:
   its own muted accent, matching icon + kicker, harmonious NOT rainbow.
   This is the ONE documented relaxation of the three-ink rule (DESIGN.md
   §2 "Callout admonition palette") — the accents are SEMANTIC (each maps
   to a specific purpose), never decorative candy.

   Each type sets one local var, --adm (its accent token); the shared base
   below resolves the tint bg, the FULL hairline (no banned one-side
   stripe), and the kicker/icon colour from that single var. Both emitted
   families are covered:
     · inline   blockquote.note-callout.note-callout--X  (> strong + > span)
     · document blockquote.callout-X  (.callout-icon-col + .callout-body)
   The examiner's serif-italic voice is now reserved for examiner-insight
   ONLY (in gold); exam-tip is a plain GREEN sans note. Icons are pure CSS
   unicode — no icon lib.
   -------------------------------------------------------------------- */

/* Shared aside anatomy for BOTH families: a soft tint wash of the type's
   accent over paper, a full hairline in the same accent, quiet ink body. */
.nb-notes .note-callout,
.nb-notes blockquote[class^="callout-"],
.nb-notes blockquote[class*=" callout-"] {
  --adm: var(--nb-ink-2); /* fallback until a type sets its accent */
  display: block;
  margin: var(--nb-s6) 0;
  padding: var(--nb-s4) var(--nb-s5);
  background: color-mix(in srgb, var(--adm) var(--nb-adm-tint), var(--nb-paper));
  border: 1px solid color-mix(in srgb, var(--adm) 28%, transparent);
  border-radius: var(--nb-r-md);
  font: var(--nb-type-prose);
  color: var(--nb-ink);
}

/* Per-type accent (semantic). One assignment each; everything else
   (bg / border / kicker / icon) derives from --adm. */
.nb-notes .note-callout--misconception,
.nb-notes blockquote.callout-misconception { --adm: var(--nb-adm-warn); }
/* Dark night-desk: the warm terracotta wash muted the cool --nb-ink body a
   touch. Thin the misconception wash so the body ink reads crisper (higher
   contrast), still comfortably AA on the darker paper. Kicker/border keep the
   full accent. */
html.theme-dark .nb-notes .note-callout--misconception,
html.theme-dark .nb-notes blockquote.callout-misconception {
  background: color-mix(in srgb, var(--adm) 6%, var(--nb-paper));
}
.nb-notes .note-callout--exam-tip,
.nb-notes blockquote.callout-exam-tip { --adm: var(--nb-adm-tip); }
.nb-notes .note-callout--insight,
.nb-notes blockquote.callout-examiner { --adm: var(--nb-adm-insight); }
.nb-notes blockquote.callout-key-point { --adm: var(--nb-adm-key); }
.nb-notes blockquote.callout-definition { --adm: var(--nb-adm-def); }
.nb-notes .note-callout--example,
.nb-notes blockquote.callout-illustrative-example { --adm: var(--nb-adm-example); }
.nb-notes .note-callout--out-of-scope,
.nb-notes blockquote.callout-out-of-scope { --adm: var(--nb-adm-scope); }
.nb-notes .note-callout--mnemonic { --adm: var(--nb-adm-mnemonic); }
.nb-notes .note-callout--math-skill { --adm: var(--nb-adm-mathskill); }

/* — Inline family: small-caps kicker in the accent, a leading glyph, and
     a plain-ink body. — */
.nb-notes .note-callout > strong {
  display: block;
  margin-bottom: var(--nb-s2);
  font: var(--nb-type-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--adm);
}
.nb-notes .note-callout > strong::before {
  content: var(--adm-glyph, "\2022"); /* the type's icon, colour = accent */
  display: inline-block;
  margin-right: var(--nb-s2);
  font-weight: 700;
  transform: translateY(0.02em);
}
.nb-notes .note-callout > span {
  display: block;
}
/* out-of-scope reads a shade quieter in the body — a "you may stop here" */
.nb-notes .note-callout--out-of-scope > span {
  color: var(--nb-ink-2);
}

/* — Per-type icon glyph (unicode, pure CSS). Simple + consistent size. — */
.nb-notes .note-callout--misconception { --adm-glyph: "\0021"; }        /* ! warning */
.nb-notes .note-callout--exam-tip { --adm-glyph: "\2713"; }             /* ✓ tick */
.nb-notes .note-callout--insight { --adm-glyph: "\2731"; }              /* ✱ star */
.nb-notes .note-callout--example { --adm-glyph: "\25C8"; }              /* ◈ figure */
.nb-notes .note-callout--out-of-scope { --adm-glyph: "\2013"; }        /* – dash */
.nb-notes .note-callout--mnemonic { --adm-glyph: "\2726"; }             /* ✦ memory spark */
.nb-notes .note-callout--math-skill { --adm-glyph: "\221A"; }           /* √ math technique */
.nb-notes blockquote.callout-misconception { --adm-glyph: "\0021"; }
.nb-notes blockquote.callout-exam-tip { --adm-glyph: "\2713"; }
.nb-notes blockquote.callout-examiner { --adm-glyph: "\2731"; }
.nb-notes blockquote.callout-key-point { --adm-glyph: "\25C6"; }        /* ◆ key idea */
.nb-notes blockquote.callout-definition { --adm-glyph: "\00A7"; }       /* § defined term */
.nb-notes blockquote.callout-illustrative-example { --adm-glyph: "\25C8"; }
.nb-notes blockquote.callout-out-of-scope { --adm-glyph: "\2013"; }

/* — Examiner insight KEEPS the examiner's serif-italic voice, now in GOLD
     (examiner-insight / examiner only — exam-tip is a plain green sans note
     per the owner's brief). — */
.nb-notes .note-callout--insight,
.nb-notes blockquote.callout-examiner {
  font-family: var(--nb-serif);
  font-style: italic;
  font-size: var(--nb-text-md);
  line-height: 1.5;
}
.nb-notes .note-callout--insight > strong {
  font-family: var(--nb-serif);
  font-style: italic;
  font-size: var(--nb-text-sm);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: none;
}
.nb-notes .note-callout--insight > strong::before {
  font-style: normal;
  transform: rotate(-4deg); /* the hand never stamps perfectly straight */
}

/* -- Proportionality -- the equation-family relationship note (SI unit /
     Variables / Rearrangements prose). Speaks in the SLIM WE-callout
     register (mini label, 3px left rule, light wash), NOT the admonition
     register: no icon badge, no full frame, no rounded card. Bronze -- a
     warm relationship annotation, quieter than the examiner gold. -- */
.nb-notes .note-callout--proportionality {
  --adm: var(--nb-adm-proportion);
  padding: var(--nb-s2) var(--nb-s3) var(--nb-s3);
  background: color-mix(in srgb, var(--adm) 7%, transparent);
  border: none;
  border-left: 3px solid var(--adm);
  border-radius: 0;
}
.nb-notes .note-callout--proportionality > strong {
  margin-bottom: 2px;
  letter-spacing: 0.08em; /* match .note-we-callout-label tracking */
}
.nb-notes .note-callout--proportionality > strong::before {
  content: none; /* slim register: no icon glyph */
}

/* — Blockquote family internals: the empty icon column becomes a small
     round accent badge carrying the type glyph; the body's leading
     <strong> becomes the accent kicker. — */
.nb-notes blockquote[class^="callout-"],
.nb-notes blockquote[class*=" callout-"] {
  display: flex;
  align-items: flex-start;
  gap: var(--nb-s3);
}
.nb-notes .callout-icon-col {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  margin-top: 0.1em; /* optically on the first line */
  border-radius: var(--nb-r-pill);
  background: color-mix(in srgb, var(--adm) 16%, transparent);
  color: var(--adm);
  font-family: var(--nb-sans);
  font-style: normal;
  font-size: var(--nb-text-sm);
  font-weight: 700;
  line-height: 1;
}
.nb-notes .callout-icon-col::before {
  content: var(--adm-glyph, "\2022");
}
/* examiner insight badge: the star sits a touch smaller in serif to echo
   the examiner voice; every other type stays sans. */
.nb-notes blockquote.callout-examiner .callout-icon-col {
  font-family: var(--nb-serif);
}
.nb-notes .callout-body {
  flex: 1 1 auto;
  min-width: 0;
}
.nb-notes .callout-body p {
  margin-bottom: var(--nb-s2);
}
.nb-notes .callout-body p:last-child {
  margin-bottom: 0;
}
.nb-notes .callout-body p:first-child > strong:first-child {
  display: block;
  margin-bottom: var(--nb-s1);
  font: var(--nb-type-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--adm);
}
/* examiner insight body + kicker keep the serif-italic examiner voice (gold) */
.nb-notes blockquote.callout-examiner {
  font-family: var(--nb-serif);
  font-style: italic;
  font-size: var(--nb-text-md);
  line-height: 1.5;
}
.nb-notes blockquote.callout-examiner .callout-body p:first-child > strong:first-child {
  font-family: var(--nb-serif);
  font-style: italic;
  font-size: var(--nb-text-sm);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* ---------- 7 · Key idea ---------------------------------------------
   A raised card sliver with a canonical sans label and study-prose body. */
.nb-notes .note-key-idea {
  display: block;
  margin: var(--nb-s6) 0;
  padding: var(--nb-s4) var(--nb-s5);
  background: var(--nb-paper-raised);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-lg);
  box-shadow: var(--nb-shadow-1);
}
.nb-notes .note-key-idea-label {
  display: block;
  margin-bottom: var(--nb-s1);
  font: var(--nb-type-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nb-blue);
}
.nb-notes .note-key-idea-text {
  display: block;
  font: var(--nb-type-prose);
}

/* ---------- 8 · Section takeaway -------------------------------------
   A sunken summary block; each point is ticked off in the student's
   pen. */
.nb-notes .note-section-takeaway {
  margin: var(--nb-s6) 0;
  padding: var(--nb-s4) var(--nb-s5);
  background: var(--nb-paper-sunken);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-md);
}
.nb-notes .note-section-takeaway-label {
  display: block;
  margin-bottom: var(--nb-s2);
  font-size: var(--nb-text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nb-ink-2);
}
.nb-notes .note-section-takeaway-text {
  margin: 0;
  font: var(--nb-type-prose);
}
.nb-notes .note-section-takeaway-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nb-notes .note-section-takeaway-list > li {
  position: relative;
  margin-bottom: var(--nb-s2);
  padding-left: var(--nb-s5);
  font: var(--nb-type-prose);
}
.nb-notes .note-section-takeaway-list > li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--nb-blue);
}

/* ---------- 9 · Worked example ---------------------------------------
   A raised sheet with the examiner's allocation wink in the corner. */
.nb-notes .note-worked-example {
  position: relative;
  margin: var(--nb-s7) 0;
  padding: var(--nb-s5) var(--nb-s6);
  background: var(--nb-paper-raised);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-lg);
  box-shadow: var(--nb-shadow-1);
}
.nb-notes .note-worked-example::before {
  content: "[worked example]";
  position: absolute;
  top: var(--nb-s3);
  right: var(--nb-s4);
  font-family: var(--nb-serif);
  font-style: italic;
  font-weight: 600;
  font-size: var(--nb-text-xs);
  color: var(--nb-red);
  white-space: nowrap;
}
.nb-notes .note-worked-example > h2,
.nb-notes .note-worked-example > h3,
.nb-notes .note-worked-example > h4 {
  margin: 0 0 var(--nb-s3);
  /* Symmetric side padding keeps the centred title balanced in the box while
     still clearing the absolute [worked example] corner label on the right. */
  padding: 0 var(--nb-s10);
  border: none;
  font-size: var(--nb-text-lg);
  text-align: center;
}
.nb-notes .note-worked-example-body > h2,
.nb-notes .note-worked-example-body > h3,
.nb-notes .note-worked-example-body > h4 {
  margin: var(--nb-s4) 0 var(--nb-s2);
  padding: 0;
  border: none;
  font-size: var(--nb-text-base);
  letter-spacing: 0.01em;
}
.nb-notes .note-worked-example-body > p:last-child,
.nb-notes .note-worked-example-body > ul:last-child,
.nb-notes .note-worked-example-body > ol:last-child {
  margin-bottom: 0;
}

/* ---------- 9b · Core-practical box ----------------------------------
   Sibling of the worked-example box; the definition-teal voice marks it
   as a lab/experiment rather than a judgment moment. Shares the field
   rows below with the worked-example body. */
.nb-notes .note-practical {
  position: relative;
  margin: var(--nb-s7) 0;
  /* P1 "stacked left" layout (owner pick, 2026-07-03): fields run full-width
     with kickers above them, so the box returns to the standard inner
     padding — content aligns to the padding edge, no grid gutter to fight. */
  padding: var(--nb-s5) var(--nb-s6);
  background: var(--nb-paper-raised);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-lg);
  box-shadow: var(--nb-shadow-1);
}
.nb-notes .note-practical::before {
  content: "[ core practical ]";
  /* P1: left-aligned document voice — tag sits above the title, both left. */
  display: block;
  text-align: left;
  margin-bottom: 2px;
  font: var(--nb-type-label);
  color: var(--nb-adm-def);
}
.nb-notes .note-practical > h2,
.nb-notes .note-practical > h3,
.nb-notes .note-practical > h4 {
  margin: 0 0 var(--nb-s4);
  padding: 0 0 var(--nb-s2);
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--nb-border);
  font-size: var(--nb-text-lg);
}

/* Practical Note — a lightweight lab-technique block; reuses the Core Practical
   shell + field rows but carries a distinct green corner label so it never
   reads as a numbered Core Practical. */
.nb-notes .note-practical-note {
  position: relative;
  margin: var(--nb-s7) 0;
  padding: var(--nb-s5) var(--nb-s6);
  background: var(--nb-paper-raised);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-lg);
  box-shadow: var(--nb-shadow-1);
}
.nb-notes .note-practical-note::before {
  content: "[ practical note ]";
  position: absolute;
  top: var(--nb-s3);
  right: var(--nb-s4);
  font: var(--nb-type-label);
  color: var(--nb-adm-tip);
  white-space: nowrap;
}
.nb-notes .note-practical-note > h4 {
  margin: 0 0 var(--nb-s3);
  padding: 0 var(--nb-s10) 0 0; /* clears the corner allocation */
  border: none;
  font-size: var(--nb-text-lg);
}

/* Derivation — a mathematical proof box; worked-example shell with a distinct
   steel-navy corner voice that marks it as a proof rather than a judgment. */
.nb-notes .note-derivation {
  position: relative;
  margin: var(--nb-s7) 0;
  padding: var(--nb-s5) var(--nb-s6);
  background: var(--nb-paper-raised);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-lg);
  box-shadow: var(--nb-shadow-1);
}
.nb-notes .note-derivation::before {
  content: "[ derivation ]";
  position: absolute;
  top: var(--nb-s3);
  right: var(--nb-s4);
  font: var(--nb-type-label);
  color: var(--nb-adm-derivation);
  white-space: nowrap;
}
.nb-notes .note-derivation > h4 {
  margin: 0 0 var(--nb-s3);
  padding: 0 var(--nb-s10) 0 0; /* clears the corner allocation */
  border: none;
  font-size: var(--nb-text-lg);
}
/* Internal step headings (###) kept inside the proof body must stay quiet
   in-card subheads, not open-page section headers (rule/bar reset above). */
.nb-notes .note-derivation-body > h3 {
  margin: var(--nb-s4) 0 var(--nb-s2);
  padding: 0;
  border: none;
  font-size: var(--nb-text-lg);
}
.nb-notes .note-derivation-body > p:last-child {
  margin-bottom: 0;
}

/* ---------- 9c · Structured field rows -------------------------------
   Shared by .note-practical-body and .note-worked-example-body. P1 "stacked
   left" (owner pick, 2026-07-03): the old two-column grid stranded labels in
   a wide gutter and squeezed the content — each field now runs full-width
   with its label as a small kicker above it. */
.nb-notes .note-field {
  display: block;
  margin: 0 0 var(--nb-s4);
}
.nb-notes .note-field:last-child {
  margin-bottom: 0;
}
.nb-notes .note-field-label {
  display: block;
  margin-bottom: 4px;
  font: var(--nb-type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nb-ink-2);
}
/* practicals speak in the definition-teal lab voice */
.nb-notes .note-practical .note-field-label {
  color: var(--nb-adm-def);
  margin-bottom: 6px;
}
/* Practical density (owner request, 2026-07-09): the method fields packed
   too much text too tightly. Looser row rhythm, a touch more label-to-value
   air, hairline seams between consecutive plain rows, and a slightly taller
   reading line. Scoped to .note-practical only -- WE boxes keep their pace.
   The --warn variant paints its own wash + accent edge, so it is exempt
   from the seam (a hairline against the wash reads as a glitch). */
.nb-notes .note-practical .note-field {
  margin-bottom: var(--nb-s5);
}
.nb-notes .note-practical .note-field:last-child {
  margin-bottom: 0;
}
.nb-notes .note-practical
  .note-field:not(.note-field--warn) + .note-field:not(.note-field--warn) {
  border-top: 1px solid var(--nb-border);
  padding-top: var(--nb-s4);
}
.nb-notes .note-practical-body {
  line-height: 1.75;
}
.nb-notes .note-field-value > :first-child { margin-top: 0; }
.nb-notes .note-field-value > :last-child { margin-bottom: 0; }
.nb-notes .note-field--warn {
  padding: var(--nb-s2) var(--nb-s3) var(--nb-s3);
  border-left: 3px solid var(--nb-adm-warn);
  background: color-mix(in srgb, var(--nb-adm-warn) 7%, transparent);
}
.nb-notes .note-field--warn .note-field-label {
  color: var(--nb-adm-warn);
}

/* ---------- 10 · Review sections (recap + progress check) ------------
   Sunken end-of-note blocks with a chip kicker. The progress list is
   interactive: note-reading.js injects the .esa-check SVG per item
   and persists checks — the SVG classes below are its contract. */
.nb-notes .note-review-section {
  margin: var(--nb-s8) 0 var(--nb-s6);
  padding: var(--nb-s5) var(--nb-s6);
  background: var(--nb-paper-sunken);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-lg);
}
.nb-notes .note-review-heading {
  margin: 0 0 var(--nb-s1);
  padding: 0;
  border: none;
  font-size: var(--nb-text-lg);
  line-height: 1.3;
}
.nb-notes .note-review-kicker {
  /* "Key Points" / "Self-Assessment" tags removed per owner feedback —
     the section heading already names the block. */
  display: none;
  align-items: center;
  margin: 0 0 var(--nb-s4);
  padding: var(--nb-s1) var(--nb-s3);
  background: var(--nb-paper-raised);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-pill);
  font-size: var(--nb-text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nb-ink-2);
}
.nb-notes .note-review-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nb-notes .note-review-list > li {
  margin-bottom: var(--nb-s3);
  font: var(--nb-type-prose);
}
.nb-notes .note-review-list > li:last-child {
  margin-bottom: 0;
}
.nb-notes .note-review-list > li p {
  margin: 0;
}
/* Recap points are clean, calm bullets (owner request) — a small round
   disc in quiet ink, optically centred on the first line. NOT the blue
   tick (the progress-check circles below keep their own hollow marker). */
.nb-notes .note-review-section--recap .note-review-list > li {
  position: relative;
  padding-left: var(--nb-s5);
}
.nb-notes .note-review-section--recap .note-review-list > li::before {
  content: "";
  position: absolute;
  left: var(--nb-s1);
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: var(--nb-r-pill);
  background: var(--nb-ink-3);
}

/* — Progress check: self-assessment checkboxes. — */
.nb-notes .note-review-section--progress .note-review-list > li {
  display: grid;
  grid-template-columns: var(--nb-s5) 1fr;
  gap: var(--nb-s3);
  align-items: start;
  padding: var(--nb-s1) 0;
  cursor: pointer;
  border-radius: var(--nb-r-sm);
}
/* no-JS fallback: a plain drawn box; suppressed once the SVG lands */
.nb-notes .note-review-section--progress .note-review-list > li::before {
  content: "";
  width: var(--nb-s4);
  height: var(--nb-s4);
  margin-top: 0.2em;
  border: 1.5px solid var(--nb-border-strong);
  border-radius: var(--nb-r-pill);
}
.nb-notes .note-review-section--progress .note-review-list.has-svg-checks > li::before {
  content: none;
}
/* Marker and sentence are PINNED to their tracks. The li's inline content is
   wrapped server-side in one .note-review-text span — without the pin, inline
   KaTeX spans would auto-flow into the narrow marker column and chop the
   sentence across grid cells. */
.nb-notes .note-review-section--progress .note-review-list > li > .esa-check {
  grid-column: 1;
  grid-row: 1;
}
.nb-notes .note-review-section--progress .note-review-list:not(.has-svg-checks) > li::before {
  grid-column: 1;
  grid-row: 1;
}
.nb-notes .note-review-section--progress .note-review-list > li > .note-review-text {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.nb-notes .note-review-list > li > .note-review-text {
  display: block;
  margin: 0;
}
.nb-notes .note-review-section--progress .note-review-list.has-svg-checks > li > .esa-check {
  width: var(--nb-s5);
  height: var(--nb-s5);
  margin-top: 0.1em;
  overflow: visible;
  pointer-events: none;
  transform-origin: center;
  transition: transform var(--nb-dur-1) var(--nb-ease);
}
.nb-notes .note-review-section--progress .note-review-list > li:active > .esa-check {
  transform: scale(0.92);
}
.nb-notes .esa-check-g {
  transform-box: fill-box;
  transform-origin: center;
}
.nb-notes .esa-check-box {
  fill: transparent;
  stroke: var(--nb-border-strong);
  stroke-width: 1.7;
}
.nb-notes .note-review-list.has-svg-checks.anim-ready > li > .esa-check .esa-check-box {
  transition:
    stroke var(--nb-dur-1) var(--nb-ease),
    fill var(--nb-dur-1) var(--nb-ease);
}
.nb-notes .note-review-list > li:hover .esa-check-box {
  stroke: var(--nb-blue);
  fill: var(--nb-blue-wash);
}
.nb-notes .note-review-list > li.is-checked .esa-check-box {
  stroke: var(--nb-blue);
  fill: var(--nb-blue-wash);
}
/* the tick draws itself like a pen stroke (dash contract from JS) */
.nb-notes .esa-check-tick {
  fill: none;
  /* Rest = no ink. A round-capped dash that is fully offset still paints a
     leftover round CAP at the path's start point (the "stray dot" defect),
     so the resting tick is drawn in transparent ink and only inks up blue
     once the box is checked. The pen-stroke draw-in still runs on the
     dashoffset; the colour flips instantly to blue at the same moment. */
  stroke: transparent;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--esa-tick-len, 16);
  stroke-dashoffset: var(--esa-tick-len, 16);
}
.nb-notes .note-review-list > li.is-checked .esa-check-tick {
  stroke: var(--nb-blue);
  stroke-dashoffset: 0;
}
.nb-notes .note-review-list.has-svg-checks.anim-ready > li > .esa-check .esa-check-tick {
  transition: stroke-dashoffset var(--nb-dur-2) var(--nb-ease);
}
@keyframes nb-check-pop {
  0% { transform: scale(0.6); }
  100% { transform: scale(1); }
}
.nb-notes .esa-check-g.is-popping {
  animation: nb-check-pop var(--nb-dur-2) var(--nb-ease);
}
/* a checked line settles into quiet ink — done, not deleted */
.nb-notes .note-review-list > li.is-checked p {
  color: var(--nb-ink-2);
}
@media (prefers-reduced-motion: reduce) {
  .nb-notes .note-review-list > li > .esa-check,
  .nb-notes .esa-check-tick,
  .nb-notes .esa-check-box { transition: none; }
  .nb-notes .note-review-list > li:active > .esa-check { transform: none; }
  .nb-notes .esa-check-g.is-popping { animation: none; }
}

/* ---------- 11 · Learning objectives card -----------------------------
   The hero card above the prose, in the topic-card grammar: blue caps
   eyebrow, standard study-prose instruction, statically drawn ticks in
   the student's pen, syllabus codes as chips. The legacy 42px icon
   badge is retired (no icon color-coding in the notebook). */
.nb-notes .nt-objectives-card {
  margin: 0 0 var(--nb-s7);
  padding: var(--nb-s5) var(--nb-s6);
  background: var(--nb-paper-raised);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-lg);
  box-shadow: var(--nb-shadow-1);
}
.nb-notes .nt-objectives-icon-column {
  display: none;
}
.nb-notes .nt-objectives-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nb-s3);
}
.nb-notes .nt-objective-heading {
  margin: 0;
  padding: 0;
  border: none;
  font: var(--nb-type-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nb-blue);
}
.nb-notes .nt-objectives-count {
  font: var(--nb-type-label);
  color: var(--nb-ink-2);
  white-space: nowrap;
}
.nb-notes .nt-objectives-subtitle {
  margin: var(--nb-s2) 0 0;
  font: var(--nb-type-prose);
  color: var(--nb-ink-2);
}
.nb-notes .nt-objectives-rule {
  height: 1px;
  margin: var(--nb-s4) 0;
  background: var(--nb-border);
}
.nb-notes .nt-objective-list {
  list-style: none;
  display: grid;
  gap: var(--nb-s3);
  margin: 0;
  padding: 0;
}
.nb-notes .nt-objective-item {
  display: flex;
  align-items: flex-start;
  gap: var(--nb-s3);
  margin: 0;
  font: var(--nb-type-prose);
}
/* A hollow pen-nib marker (the nb-empty glyph grammar), NOT a blue tick:
   objectives are aspirational targets the pen has not yet touched, not
   completed judgments. A filled/coloured check would claim they are done. */
.nb-notes .nt-objective-gutter {
  position: relative;
  flex-shrink: 0;
  width: var(--nb-s4);
  height: var(--nb-s4);
  margin-top: 0.2em;
}
.nb-notes .nt-objective-gutter::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.4em;
  width: var(--nb-s2);
  height: var(--nb-s2);
  transform: translateX(-50%);
  border: 1.5px solid var(--nb-border-strong);
  border-radius: var(--nb-r-pill);
}
.nb-notes .nt-objective-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.nb-notes .nt-objective-text p {
  display: inline; /* pipeline nests <p> inside the span */
  margin: 0;
}
.nb-notes .obj-code {
  display: inline-flex;
  align-items: center;
  margin-right: var(--nb-s2);
  padding: 0 var(--nb-s2);
  background: var(--nb-paper-sunken);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-pill);
  font: var(--nb-type-label);
  color: var(--nb-ink-2);
  white-space: nowrap;
}
.nb-notes .nt-objective-dash {
  display: none; /* the chip already separates code from text */
}
/* extended-tier objective: the quiet annotation that replaced the 🚀 */
.nb-notes .nt-objective-item.obj--extended .nt-objective-copy::after {
  content: "extended";
  display: inline-block;
  margin-left: var(--nb-s2);
  padding: 0 var(--nb-s2);
  background: var(--nb-blue-wash);
  border: 1px solid color-mix(in srgb, var(--nb-blue) 30%, transparent);
  border-radius: var(--nb-r-pill);
  font: var(--nb-type-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nb-blue);
}

/* ---------- 12 · Tables ------------------------------------------------
   Hairline rules, a sunken header row, no zebra. */
.nb-notes .note-table-scroll {
  position: relative;
  margin: var(--nb-s6) 0;
  overflow-x: auto;
  background-color: var(--nb-paper-raised);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-md);
  /* B1: the horizontal edge scroll-shadow (ink gradients pinned to the left/
     right edges) read as a glow bleeding off the table even when the table fit
     with no scroll. Removed — the border alone frames the table; overflow-x
     still lets wide tables scroll. */
}
.nb-notes .note-table-scroll table {
  width: 100%;
  border-collapse: collapse;
  font: var(--nb-type-prose);
}
.nb-notes .note-table-scroll th {
  background: var(--nb-paper-sunken);
  font: var(--nb-type-label);
  text-align: left;
  color: var(--nb-ink);
}
.nb-notes .note-table-scroll th strong,
.nb-notes .note-table-scroll td strong {
  font-weight: 700;
}
.nb-notes .note-table-scroll th,
.nb-notes .note-table-scroll td {
  padding: var(--nb-s3) var(--nb-s4);
  border-bottom: 1px solid var(--nb-border);
  vertical-align: top;
}
.nb-notes .note-table-scroll tr:last-child td {
  border-bottom: none;
}
/* B2: restore the row hover-highlight the legacy noteviewer.css had (dropped in
   the notebook skin). A subtle royal-blue wash with a short transition; the
   accent token is theme-aware, so it reads correctly in light and dark. */
.nb-notes .note-table-scroll tbody td {
  transition: background-color 120ms ease;
}
.nb-notes .note-table-scroll tbody tr:hover td {
  background-color: color-mix(in srgb, var(--nb-adm-key) 8%, transparent);
}
.nb-notes .note-table-scroll td p {
  margin: 0;
}
/* In-cell math legibility: KaTeX stacks inline \frac numerators/denominators
   at ~0.7x, which at table-cell size makes π/2-style fractions illegible.
   KaTeX's own sheet sets .katex to 1.21em, so this value REPLACES that one —
   1.45em ≈ a 1.2x bump over the default, lifting fraction digits back to
   body-text size. Scoped to table cells only; display equations and prose
   math keep their current size. */
.nb-notes .note-table-scroll th .katex,
.nb-notes .note-table-scroll td .katex {
  font-size: 1.45em;
}

/* ---------- 13 · Figures -----------------------------------------------
   A hairline frame on raised paper; the caption is a serif-italic
   margin note. */
.nb-notes .note-figure {
  margin: var(--nb-s7) 0;
  padding: var(--nb-s4);
  background: var(--nb-paper-raised);
  border: 1px solid var(--nb-border-figure);
  border-radius: var(--nb-r-md);
}
.nb-notes .note-figure-img-area img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--nb-r-sm);
}
.nb-notes .note-figure-caption {
  margin-top: var(--nb-s3);
  font-family: var(--nb-serif);
  font-style: italic;
  font-size: var(--nb-text-sm);
  line-height: 1.5;
  text-align: center;
  color: var(--nb-ink-2);
}
/* Figures inside the working boxes (worked example / core practical /
   practical note / derivation) rendered visibly smaller than open-page
   figures: box padding (24px each side) plus figure padding (16px each side)
   cost the image 80px of width. Thin the frame padding and pull the frame
   back toward the box edges -- the boxes all share 24px (--nb-s6) horizontal
   padding, so calc(-1 * s6 + s2) leaves a constant 8px inset inside the box
   border (never overflows it). Figure radius (r-md 8px) stays inside the box
   radius (r-lg 12px). Vertical margins keep the .note-figure default. */
.nb-notes :is(.note-worked-example,
              .note-practical,
              .note-practical-note,
              .note-derivation) .note-figure {
  padding: var(--nb-s2);
  margin-left: calc(-1 * var(--nb-s6) + var(--nb-s2));
  margin-right: calc(-1 * var(--nb-s6) + var(--nb-s2));
}

/* Safety net — any image the figure wrapper did NOT catch. The renderer only
   wraps a STANDALONE `<p><img></p>` in `.note-figure`; an image glued into a
   heading (`### ![](x.png)Title` → `<h4><img>Title</h4>`), sitting inline in a
   paragraph, or sharing a paragraph with siblings stays a bare <img>. Without
   the legacy `.note-body img` rule on this page, those escape ALL sizing and
   render at raw intrinsic size ("full expanded"). Constrain + skin them to the
   figure look so every image reads consistently. The `.note-figure-img-area
   img` rule above (its parent excluded by :not) keeps its in-frame treatment. */
.nb-notes img {
  max-width: 100%;
  height: auto;
}
.nb-notes :not(.note-figure-img-area) > img {
  display: block;
  margin: var(--nb-s5) auto;
  padding: var(--nb-s2);
  background: var(--nb-paper-raised);
  border: 1px solid var(--nb-border-figure);
  border-radius: var(--nb-r-sm);
  box-shadow: var(--nb-shadow-1);
}
/* A heading-glued image becomes a block above its heading text — the diagram
   reads as a figure, the title follows underneath, both inside the heading. */
.nb-notes :is(h1, h2, h3, h4, h5, h6) > img {
  margin-bottom: var(--nb-s3);
}

/* ---------- 14 · Math, chemistry, rules, links -------------------------- */
.nb-notes .katex-display {
  margin: var(--nb-s5) 0;
  padding: var(--nb-s2) var(--nb-s5) var(--nb-s2) 0;
  overflow-x: auto;
  overflow-y: hidden;
  /* The edge scroll-shadow (paper covers + ink gradients, same machinery B1
     removed from tables) painted faint vertical smudges over the dotted paper
     at both equation edges even with nothing to scroll. Removed — equations
     sit directly on the paper; overflow-x still lets wide ones scroll. */
}
/* Word-built equations (KaTeX \text{…}) are prose, not a formula line — let
   them WRAP at ≤480px instead of forcing a horizontal scroll of sentences. */
@media (max-width: 480px) {
  .nb-notes .katex-display .katex,
  .nb-notes .katex-display .katex .text,
  .nb-notes .katex-display .katex .mord.text {
    white-space: normal;
  }
}
.nb-notes .esa-chem {
  font-family: inherit; /* chemistry terms are content, not UI */
}
.nb-notes hr {
  height: 1px;
  margin: var(--nb-s7) 0;
  border: none;
  background: var(--nb-border);
}
/* content links write in the pen: underlined, low stroke */
.nb-notes p a,
.nb-notes li a,
.nb-notes td a {
  color: var(--nb-blue);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--nb-dur-1) var(--nb-ease);
}
.nb-notes p a:hover,
.nb-notes li a:hover,
.nb-notes td a:hover {
  color: var(--nb-blue-strong);
}

/* ---------- 15 · End-of-note chrome --------------------------------------
   Practice CTA, prev/next, and the paywall's resting place. */
.nb-notes .nb-notes-practice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nb-s3);
  margin: var(--nb-s8) 0 0;
  padding: var(--nb-s4) var(--nb-s5);
  background: var(--nb-paper-sunken);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-lg);
}
.nb-notes .nb-notes-practice-label {
  margin-right: var(--nb-s2);
  font-size: var(--nb-text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nb-ink-2);
}
.nb-notes .nb-notes-practice-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nb-s2);
}

.nb-notes .nb-notes-pagination {
  display: flex;
  justify-content: space-between;
  gap: var(--nb-s4);
  margin-top: var(--nb-s7);
  padding-top: var(--nb-s5);
  border-top: 1px solid var(--nb-border);
}
.nb-notes .nb-pagenav {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nb-s1);
  max-width: 48%;
  white-space: normal; /* topic titles wrap; nb-btn's nowrap is for labels */
  text-align: left;
}
.nb-notes .nb-pagenav--next {
  align-items: flex-end;
  text-align: right;
  margin-left: auto;
}
.nb-notes .nb-pagenav-dir {
  font-size: var(--nb-text-sm);
  font-weight: 600;
}
.nb-notes .nb-pagenav-title {
  font-size: var(--nb-text-base);
  font-weight: 500;
  line-height: 1.4;
  color: var(--nb-ink-2);
}
.nb-notes .nb-pagenav:hover .nb-pagenav-title {
  color: var(--nb-ink);
}

/* the sealed sheet centres itself in either gating branch */
.nb-notes .nb-paywall-wrap {
  display: flex;
  justify-content: center;
  margin: var(--nb-s8) 0;
}
/* the sheet keeps its own voice — undo the article's heading/list rhythm */
.nb-notes .nb-paywall-title {
  margin: 0;
  padding: 0 var(--nb-s8) 0 0; /* clears the corner allocation */
  border: none;
  font: var(--nb-type-editorial);
  letter-spacing: normal;
}
.nb-notes .nb-paywall p {
  margin: 0;
}
.nb-notes .nb-paywall ul {
  padding: 0;
}
.nb-notes .nb-paywall li {
  margin: 0;
}
/* …then restore the sheet's own rhythm (the article rules above would
   otherwise flatten the demo's spacing) */
.nb-notes .nb-paywall-lede {
  margin-top: var(--nb-s3);
}
.nb-notes .nb-paywall-list {
  margin: var(--nb-s5) 0 0;
}

/* ---------- 16 · Small screens ------------------------------------------- */
@media (max-width: 860px) {
  .nb-notes h2 {
    margin-top: var(--nb-s7);
  }
  .nb-notes h3 {
    margin-top: var(--nb-s7);
  }
  .nb-notes .note-worked-example,
  .nb-notes .note-review-section {
    padding: var(--nb-s4) var(--nb-s5);
  }
  /* Mirror the in-box figure pull-back to the narrower s5 box padding so the
     8px inset inside the worked-example border holds at phone width too. */
  .nb-notes .note-worked-example .note-figure {
    margin-left: calc(-1 * var(--nb-s5) + var(--nb-s2));
    margin-right: calc(-1 * var(--nb-s5) + var(--nb-s2));
  }
  .nb-notes .nt-objectives-card {
    padding: var(--nb-s4) var(--nb-s5);
  }
  .nb-notes .nb-notes-pagination {
    flex-direction: column;
  }
  .nb-notes .nb-pagenav,
  .nb-notes .nb-pagenav--next {
    max-width: 100%;
  }
}

/* At phone width the table can breathe less — tighten the cell rhythm,
   allow hyphenation, and hold columns to a sane floor so long
   words wrap cleanly instead of shredding into one-letter-per-line columns.
   The scroll-shadow affordance above signals the remaining overflow. */
@media (max-width: 480px) {
  .nb-notes .note-table-scroll th,
  .nb-notes .note-table-scroll td {
    padding: var(--nb-s2) var(--nb-s3);
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }
  .nb-notes .note-table-scroll td {
    min-width: 6.5em;
  }
}

/* Display math ($$…$$) is centred throughout the notebook — in the open page
   (Key Equations, derivations in prose) as well as inside the working boxes
   (owner pick, 2026-07-04). KaTeX's own default is centred; we simply let it. */
.nb-notes .katex-display {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.nb-notes .katex-display > .katex {
  text-align: center;
}
/* …EXCEPT inside the working boxes (owner pick, 2026-07-03 — "Format 1
   centered ledger"): worked-example / derivation / practical working-out
   reads as a solution, so equations centre on quiet hairline ledger rows. */
.nb-notes :is(.note-worked-example-body,
              .note-derivation-body,
              .note-practical-body) .katex-display {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 0 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--nb-ink) 12%, transparent);
}
.nb-notes :is(.note-worked-example-body,
              .note-derivation-body,
              .note-practical-body) .katex-display > .katex {
  text-align: center;
}

/* Step kickers — bare Given / Working / Equation-used labels above their
   equations. Spoken in the illustrative-example periwinkle-slate (distinct
   from result emerald / interp slate-cyan / scenario slate / proportion
   bronze); the colour + uppercase alone segment the step (no accent tick —
   it read as a stray hyphen before the label). Light #4A5578: 6.8:1 on
   paper, 7.3:1 on raised; dark #9AA6D0: 7.5:1 on paper, 6.9:1 on raised. */
.nb-notes .note-step-label {
  margin: var(--nb-s5) 0 2px;
  font: var(--nb-type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nb-adm-example);
}
/* When the kicker opens its container the segment gap collapses back to
   the old quiet rhythm. */
.nb-notes .note-step-label:first-child {
  margin-top: var(--nb-s3);
}

/* Result / Interpretation / Scenario callouts inside WE + derivation bodies —
   the moments a scanning student must find instantly. Result speaks fully in
   emerald (wash, label, and the equation ink itself); Interpretation is the
   quieter slate-cyan reading in study prose; Scenario is the neutral
   slate problem statement in plain body ink. */
.nb-notes .note-we-callout {
  margin: var(--nb-s3) 0 0;
  padding: var(--nb-s2) var(--nb-s3) var(--nb-s3);
}
.nb-notes .note-we-result {
  border-left: 3px solid var(--nb-adm-result);
  background: color-mix(in srgb, var(--nb-adm-result) 12%, transparent);
}
.nb-notes .note-we-interp {
  border-left: 3px solid var(--nb-adm-interp);
  background: color-mix(in srgb, var(--nb-adm-interp) 7%, transparent);
}
.nb-notes .note-we-scenario {
  border-left: 3px solid var(--nb-adm-scenario);
  background: color-mix(in srgb, var(--nb-adm-scenario) 7%, transparent);
}
.nb-notes .note-we-callout-label {
  display: block;
  margin-bottom: 2px;
  font: var(--nb-type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nb-notes .note-we-result .note-we-callout-label { color: var(--nb-adm-result); }
.nb-notes .note-we-interp .note-we-callout-label { color: var(--nb-adm-interp); }
/* scenario body stays default ink -- a problem statement, not examiner voice */
.nb-notes .note-we-scenario .note-we-callout-label { color: var(--nb-adm-scenario); }
.nb-notes .note-we-callout-body p { margin: 0; }
.nb-notes .note-we-result .note-we-callout-body,
.nb-notes .note-we-result .note-we-callout-body .katex {
  color: var(--nb-adm-result);
}
.nb-notes .note-we-result .note-we-callout-body { font-weight: 600; }
.nb-notes .note-we-interp .note-we-callout-body {
  font: var(--nb-type-prose);
}
/* equations inside a callout: the callout is the frame — no ledger rule */
.nb-notes .note-we-callout .katex-display {
  padding: 2px 0;
  margin: 4px auto;
  border-bottom: none;
}

/* Standalone chemical equations (chemistry notebook only) — the renderer
   wraps half-equations / ionic / full equations in .note-chem-equation.
   A quiet equation plate: centred at the study-prose size, subtle
   definition-teal tint behind a hairline frame. No icon, no heavy border —
   the equation itself is the content. */
.nb-notes .note-chem-equation {
  margin: var(--nb-s3) 0 var(--nb-s4);
  padding: var(--nb-s3) var(--nb-s4);
  background: color-mix(in srgb, var(--nb-adm-def) 6%, var(--nb-paper));
  border: 1px solid color-mix(in srgb, var(--nb-adm-def) 26%, transparent);
  border-radius: var(--nb-r-sm);
  text-align: center;
  font-size: var(--nb-text-md);
}
.nb-notes .note-chem-equation > p { margin: 0; }
/* Consecutive plates read as one reaction ledger: collapse the gap to
   --nb-s1. Negative top margin folds into the previous plate's --nb-s4
   bottom margin (16 - 12 = 4px) — correct under both margin-collapsing
   normal flow and non-collapsing flex/grid parents. */
.nb-notes .note-chem-equation + .note-chem-equation {
  margin-top: calc(var(--nb-s1) - var(--nb-s4));
}