/*!
 * Neonatology Academy — Didactic Layer
 * ─────────────────────────────────────────────────────────────────────────────
 * The TEACHING presentation system. `redesign.css` made ~150 pages look like one
 * product; this layer makes the educational content on them *scannable* — so a
 * reader opening a page knows within two or three seconds what the topic is,
 * what matters most, and what number or threshold drives the decision.
 *
 * It owns five things and nothing else:
 *
 *   1. EMPHASIS   Clinical values and decision thresholds read louder than the
 *                 prose around them (`.nd-val`, `mark.nd-hl`).
 *   2. CALLOUTS   One shape per meaning, used everywhere: Board Pearl, Key
 *                 Points, Clinical Warning, Recommended Action, Note.
 *   3. ANSWERS    The question explanation reads as a taught argument: the
 *                 answer, why it is right, the one lesson, then why the rest
 *                 are wrong.
 *   4. MEASURE    A reading width and rhythm that suit continuous clinical prose.
 *   5. TABLES     Quiet rules, generous padding, numbers that stand out.
 *
 * THREE RULES, carried over from redesign.css and extended:
 *
 *   • ONE accent. Teal is the brand. Colour otherwise means STATUS or IMPORTANCE
 *     — never decoration.
 *   • PALE YELLOW IS A BUDGET. Yellow marks the ~5–15% of a page that a reader
 *     must leave with. It is reserved for the Board Pearl callout and inline
 *     `mark.nd-hl`. If a page looks yellow, the budget has been overspent and
 *     the yellow has stopped meaning anything.
 *   • COLOUR IS NEVER THE ONLY SIGNAL. Every callout carries an icon AND a word
 *     ("Board Pearl", "Clinical Warning"), so meaning survives greyscale,
 *     colour-blindness, forced-colours mode and a monochrome printout.
 *
 * Nothing here changes content or behaviour — visual layer only. Medical text is
 * never shortened, reordered in meaning, or rewritten by this file.
 *
 * LOAD ORDER: after redesign.css, before neo-editorial.css (Codex's Neo Summary
 * layer stays authoritative over the chapter reading view).
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── The yellow scale ───────────────────────────────────────────────────────
     Three steps, not one. A whole callout filled at the strength of an inline
     highlight reads as a warning block rather than a note, so the card ground
     is the palest step and the inline mark is the strongest. Ink is a dark warm
     brown rather than black: it belongs to the same family as the ground and
     still clears WCAG AAA on it (~11:1). */
  --nd-y-card:    #fffbea;   /* Board Pearl card ground — barely tinted      */
  --nd-y-mark:    #fff4c2;   /* inline highlight — the brief's #FFF4C2       */
  --nd-y-strong:  #ffeba3;   /* hover / nested emphasis                      */
  --nd-y-edge:    #e8c35c;   /* rails and borders                            */
  --nd-y-edge-2:  #f2dfa6;   /* hairlines inside a yellow block              */
  /* Measured, not estimated. Every pairing below clears WCAG AAA (7.0) for
     normal text, which matters because the labels are set small: at ~11.5px
     they are judged as normal text, not as large text. */
  --nd-y-ink:     #4a3608;   /* body ink on yellow   — 11.11:1 on y-card     */
  --nd-y-ink-2:   #6b4e0a;   /* label ink on yellow  —  7.44:1 on y-card     */

  /* ── Status grounds ───────────────────────────────────────────────────────
     Deliberately quieter than theme.css's gradients. A correct answer should
     read as settled, not celebratory. */
  --nd-ok-bg:     #f2fbf6;
  --nd-ok-edge:   #86cfa8;
  --nd-ok-ink:    #0b5733;
  --nd-no-bg:     #fdf4f4;
  --nd-no-edge:   #e9a8a8;
  --nd-no-ink:    #8a2222;
  --nd-warn-bg:   #fdf5ee;
  --nd-warn-edge: #dd8f4e;
  --nd-warn-ink:  #7a3c0e;   /* 7.85:1 on warn-bg                            */
  --nd-info-bg:   #f3f8fc;
  --nd-info-edge: #8fb9d6;
  --nd-info-ink:  #1b4a68;

  /* ── Ink ─────────────────────────────────────────────────────────────────── */
  --nd-ink:       #1b2733;   /* body — charcoal, not pure black               */
  --nd-ink-2:     #33444f;
  --nd-muted:     #5d6f7a;
  --nd-rule:      #dbe3e8;
  --nd-rule-soft: #eaeff2;

  /* ── Reading rhythm ──────────────────────────────────────────────────────
     Clinical prose is read closely and often on a phone at the bedside, so the
     base is 15.5px with generous leading. `--nd-measure` is the line length
     beyond which the eye loses its place returning to the left margin. */
  --nd-fs:        .97rem;
  --nd-lh:        1.72;
  --nd-measure:   72ch;
  --nd-measure-narrow: 62ch;

  /* ── Callout geometry — identical for every callout, by rule ────────────── */
  --nd-pad:       .85rem 1.05rem;
  --nd-rail:      3px;
  --nd-radius:    8px;
  --nd-gap:       .9rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. EMPHASIS — the numbers a reader is scanning for
   ═══════════════════════════════════════════════════════════════════════════

   `.nd-val` wraps a clinical value and its unit as ONE unbreakable token, so a
   threshold never wraps across a line as "pH <" / "7.20". It is bold and a
   step darker than the prose. It is NOT yellow — if every value were
   highlighted the yellow budget would be gone on the first paragraph.         */
.nd-val {
  font-weight: 700;
  color: var(--nd-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Inside an already-bold run, a value cannot get bolder — so it shifts weight
   instead of adding it, and stays legible rather than disappearing. */
strong .nd-val, b .nd-val, th .nd-val, h1 .nd-val, h2 .nd-val,
h3 .nd-val, h4 .nd-val, h5 .nd-val, h6 .nd-val {
  font-weight: 800;
  color: inherit;
}

/* The inline highlight. A `<mark>` element, so assistive technology announces
   it as marked text and the meaning does not depend on the colour. Padding is
   asymmetric and the box is slightly negative-margined so the highlight hugs
   the glyphs without pushing the line box open and loosening the leading. */
mark.nd-hl,
.nd-hl {
  background: var(--nd-y-mark);
  color: var(--nd-ink);
  padding: .08em .26em;
  margin: 0 -.04em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* A highlighted value keeps the bold but drops the darker ink, which would
   muddy against the yellow. */
mark.nd-hl .nd-val, .nd-hl .nd-val { color: var(--nd-y-ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   3. CALLOUTS — one shape per meaning
   ═══════════════════════════════════════════════════════════════════════════

   Every callout is the same object: a left rail in the status colour, a tinted
   ground, a small uppercase label with an icon, and body text. Only the hue and
   the label change. That is what makes them recognisable across Neo Summary, a
   question explanation, a guideline and a flashcard without the reader having
   to learn four vocabularies.                                                 */
.nd-pearl,
.nd-keypoints,
.nd-warn,
.nd-action,
.nd-note {
  margin: var(--nd-gap) 0;
  padding: var(--nd-pad);
  border-left: var(--nd-rail) solid;
  border-radius: 0 var(--nd-radius) var(--nd-radius) 0;
  font-size: var(--nd-fs);
  line-height: var(--nd-lh);
  /* Never let a callout be split across a column or page break — half a pearl
     at the foot of a printed page teaches nothing. */
  break-inside: avoid;
  page-break-inside: avoid;
}

/* The label row. `::before` carries the icon via Font Awesome's glyph so no
   markup change is needed at any call site; if the font fails to load the WORD
   is still there, which is the accessibility requirement. */
.nd-pearl > .nd-label,
.nd-keypoints > .nd-label,
.nd-warn > .nd-label,
.nd-action > .nd-label,
.nd-note > .nd-label {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: .715rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .085em;
  margin: 0 0 .4rem;
}

.nd-pearl > .nd-label::before,
.nd-keypoints > .nd-label::before,
.nd-warn > .nd-label::before,
.nd-action > .nd-label::before,
.nd-note > .nd-label::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .8rem;
  line-height: 1;
  flex: 0 0 auto;
}

/* Body text inside any callout: tight top/bottom so the block stays compact. */
.nd-pearl > :last-child,
.nd-keypoints > :last-child,
.nd-warn > :last-child,
.nd-action > :last-child,
.nd-note > :last-child { margin-bottom: 0; }

.nd-pearl p, .nd-keypoints p, .nd-warn p, .nd-action p, .nd-note p { margin: 0 0 .45rem; }

.nd-pearl ul, .nd-pearl ol,
.nd-keypoints ul, .nd-keypoints ol,
.nd-warn ul, .nd-warn ol,
.nd-action ul, .nd-action ol,
.nd-note ul, .nd-note ol {
  margin: .15rem 0 0;
  padding-left: 1.15rem;
}

.nd-pearl li, .nd-keypoints li, .nd-warn li, .nd-action li, .nd-note li {
  margin: 0 0 .3rem;
  break-inside: avoid;
}

/* ── Board Pearl ──────────────────────────────────────────────────────────
   The one thing to leave with. This is the ONLY block-level use of yellow in
   the system. */
.nd-pearl {
  background: var(--nd-y-card);
  border-left-color: var(--nd-y-edge);
  color: var(--nd-y-ink);
}
.nd-pearl > .nd-label { color: var(--nd-y-ink-2); }
.nd-pearl > .nd-label::before { content: "\f0eb"; }          /* lightbulb */
.nd-pearl .nd-val { color: var(--nd-y-ink); }
/* A highlight inside a pearl would be yellow on yellow, so it steps up a
   shade and keeps a hairline to stay distinguishable from the ground. */
.nd-pearl mark.nd-hl, .nd-pearl .nd-hl {
  background: var(--nd-y-strong);
  box-shadow: inset 0 0 0 1px var(--nd-y-edge-2);
}
.nd-pearl a { color: #7a4e06; text-underline-offset: 2px; }

/* ── Key Points ───────────────────────────────────────────────────────────
   Teal, the brand accent: the orienting summary of a topic. Distinct from the
   pearl, which is a single exam-grade fact. */
.nd-keypoints {
  background: #f1faf8;
  border-left-color: #0f766e;
  color: var(--nd-ink);
}
.nd-keypoints > .nd-label { color: #0b5f58; }
.nd-keypoints > .nd-label::before { content: "\f19d"; }      /* graduation-cap */

/* ── Clinical Warning ─────────────────────────────────────────────────────
   Safety information. Warm red-orange, never the same hue as an incorrect
   answer, because one is a hazard and the other is a score. */
.nd-warn {
  background: var(--nd-warn-bg);
  border-left-color: var(--nd-warn-edge);
  color: var(--nd-ink);
}
.nd-warn > .nd-label { color: var(--nd-warn-ink); }
.nd-warn > .nd-label::before { content: "\f071"; }           /* triangle-exclamation */

/* ── Recommended Action ───────────────────────────────────────────────────
   The bedside instruction in a guideline: what to DO, and when. */
.nd-action {
  background: var(--nd-info-bg);
  border-left-color: var(--nd-info-edge);
  color: var(--nd-ink);
}
.nd-action > .nd-label { color: var(--nd-info-ink); }
.nd-action > .nd-label::before { content: "\f0a4"; }         /* hand-point-right */

/* ── Note ─────────────────────────────────────────────────────────────────
   Context, caveats, and the "current practice differs" footnote that follows a
   book answer. Neutral by design — a note must not compete with a pearl. */
.nd-note {
  background: #f7f9fa;
  border-left-color: #a9b8c1;
  color: var(--nd-ink-2);
}
.nd-note > .nd-label { color: var(--nd-muted); }
.nd-note > .nd-label::before { content: "\f05a"; }           /* circle-info */

/* ═══════════════════════════════════════════════════════════════════════════
   3b. THE TEACHING ZONES — where the yellow is spent
   ═══════════════════════════════════════════════════════════════════════════

   OWNER 2026-10-04: highlight as heavily as possible in the places that TEACH —
   Neo Summary's Board Key Points and Overview, and the answer explanation — and
   take the emphasis out of the question scenario entirely.

   So in these zones a clinical value is not merely bold: it carries the pale
   yellow. Everywhere else — tables, guideline prose, flashcards — a value stays
   bold only, and the yellow there remains reserved for a cell the chapter's own
   key points single out. That split is what stops "more yellow" from becoming
   "yellow everywhere", which would leave none of it meaning anything.

   The question STEM is deliberately absent from this list AND has its emphasis
   removed at the source in app.js, so nothing in a vignette is marked at all —
   the reader meets the scenario exactly as it is written.                      */
.nst-reading-key-points .nd-val,   /* Neo Summary — Board Key Points */
.nst-reading-overview .nd-val,     /* Neo Summary — Overview / clinical summary */
#explanation-text-display .nd-val, /* question — why this is correct */
.nd-keypoints .nd-val,             /* question — key learning points */
.nd-answer-text .nd-val,           /* question — the answer itself */
.nd-opt-why .nd-val {              /* question — why each other choice is wrong */
  background: var(--nd-y-mark);
  color: var(--nd-ink);
  padding: .06em .24em;
  margin: 0 -.03em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ── The two Neo Summary sections the owner named ────────────────────────────
   Board Key Points and the Overview carry the yellow as a GROUND, not only as
   inline marks: marking values alone left them 1.4% yellow, which is not what
   "as much as you can" means.

   These two selectors deliberately out-specify
     #tab-book-summary .ns-editorial-topic .nst-reading-column { background:transparent!important }
   in neo-editorial.css, which flattens every reading column for the textbook
   look. That is an intentional choice by its author, and this overrides it for
   these two blocks ONLY — every other reading column stays flat.

   The ground is the palest step in the scale (#fffbea — cream, not yellow), so
   a whole chapter of it reads as paper rather than as highlighter. The inline
   marks inside then step UP to stay visible against it.                        */
#tab-book-summary .ns-editorial-topic .nst-reading-column.nst-reading-key-points,
#tab-book-summary .nst-reading-key-points {
  background: var(--nd-y-card) !important;
  border-left: var(--nd-rail) solid var(--nd-y-edge) !important;
  padding: .8rem 1rem !important;
  border-radius: 0 var(--nd-radius) var(--nd-radius) 0;
}

#tab-book-summary .ns-editorial-topic .nst-reading-column.nst-reading-overview,
#tab-book-summary .nst-reading-overview {
  background: #fffdf5 !important;
  border-left: var(--nd-rail) solid var(--nd-y-edge-2) !important;
  padding: .8rem 1rem !important;
  border-radius: 0 var(--nd-radius) var(--nd-radius) 0;
}

/* On a tinted ground the ordinary mark would wash out, so inside these two
   blocks a value takes the stronger step and a hairline to hold its edge. */
.nst-reading-key-points .nd-val,
.nst-reading-overview .nd-val {
  background: var(--nd-y-strong);
  box-shadow: inset 0 0 0 1px var(--nd-y-edge-2);
  color: var(--nd-y-ink);
}

/* Inside the Board Pearl the ground is ALREADY yellow, so a value there takes
   the darker pearl ink and no second wash of colour — otherwise the pearl turns
   into an unreadable block of flat yellow. */
.nd-pearl .nd-val {
  background: transparent;
  color: var(--nd-y-ink);
  padding: 0;
  margin: 0;
}

/* A value inside a cell the key points already marked would be yellow on
   yellow; Codex's clinical highlight owns that cell, so the value defers. */
.ns-clinical-highlight .nd-val {
  background: transparent;
  padding: 0;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. QUESTION EXPLANATION — the answer as a taught argument
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The answer, stated ──────────────────────────────────────────────────────
   Previously the reveal gave the LETTER only ("Correct Choice B"), so a reader
   reviewing a session had to look back up at the choices to recall what B
   actually said. Naming the option here closes that loop. */
.nd-answer {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 0 0 var(--nd-gap);
  padding: .8rem 1rem;
  background: var(--nd-ok-bg);
  border: 1px solid var(--nd-ok-edge);
  border-left: var(--nd-rail) solid var(--nd-ok-edge);
  border-radius: 0 var(--nd-radius) var(--nd-radius) 0;
  break-inside: avoid;
}

.nd-answer-key {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--nd-ok-ink);
  color: #fff;
  font-family: 'Plus Jakarta Sans', Inter, sans-serif;
  font-weight: 800;
  font-size: .9rem;
  line-height: 1;
}

.nd-answer-main { min-width: 0; }

.nd-answer-label {
  display: block;
  font-size: .685rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .085em;
  color: var(--nd-ok-ink);
  margin-bottom: .12rem;
}

.nd-answer-text {
  display: block;
  font-size: 1.005rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--nd-ink);
}

/* When the reader got it wrong the block states that in WORDS as well as
   colour, and the ring turns red — but the correct answer stays green, because
   the green belongs to the answer, not to the reader's score. */
.nd-answer.is-wrong { background: var(--nd-no-bg); border-color: var(--nd-no-edge); border-left-color: var(--nd-no-edge); }
.nd-answer.is-wrong .nd-answer-label { color: var(--nd-no-ink); }
.nd-answer.is-wrong .nd-answer-key   { background: var(--nd-no-ink); }

/* ── Option analysis ─────────────────────────────────────────────────────────
   theme.css painted EVERY distractor with a red rail and a pink ground, which
   told the reader nothing — they are all wrong by definition, and the one the
   reader actually chose was lost among them. Here the default is neutral, and
   colour is spent only on the two rows that carry information: the answer, and
   the reader's own mistake. */
.nd-opts {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: 0;
}

.nd-opt {
  display: grid;
  grid-template-columns: 1.55rem minmax(0, 1fr);
  gap: .1rem .55rem;
  padding: .58rem .8rem;
  background: #fbfcfd;
  border: 1px solid var(--nd-rule-soft);
  border-left: var(--nd-rail) solid var(--nd-rule);
  border-radius: 0 var(--nd-radius) var(--nd-radius) 0;
  font-size: .93rem;
  line-height: 1.62;
  color: var(--nd-ink-2);
  break-inside: avoid;
}

.nd-opt-key {
  grid-row: 1 / span 2;
  font-family: 'Plus Jakarta Sans', Inter, sans-serif;
  font-weight: 800;
  font-size: .9rem;
  color: var(--nd-muted);
  text-align: center;
  padding-top: .02em;
}

/* The option's own wording, so the reader does not have to scroll up. */
.nd-opt-text {
  font-weight: 650;
  color: var(--nd-ink);
  margin: 0;
}

.nd-opt-why { margin: 0; }

/* The reader's own incorrect pick — the single most useful row on the page. */
.nd-opt.is-chosen {
  background: var(--nd-no-bg);
  border-color: var(--nd-no-edge);
  border-left-color: var(--nd-no-edge);
}
.nd-opt.is-chosen .nd-opt-key { color: var(--nd-no-ink); }

/* A marker that says, in words, that this was the reader's answer. */
.nd-opt.is-chosen .nd-opt-text::after {
  content: "your answer";
  display: inline-block;
  margin-left: .45rem;
  padding: .06em .4em;
  border-radius: 3px;
  background: var(--nd-no-ink);
  color: #fff;
  font-family: 'Plus Jakarta Sans', Inter, sans-serif;
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  vertical-align: .1em;
  white-space: nowrap;
}

/* ── Section labels inside the explanation ──────────────────────────────── */
.nd-exp-h {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: .745rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .085em;
  color: var(--nd-muted);
  margin: var(--nd-gap) 0 .5rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--nd-rule-soft);
}
.nd-exp-h:first-child { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   5. MEASURE AND RHYTHM — continuous clinical prose
   ═══════════════════════════════════════════════════════════════════════════ */
.nd-prose {
  font-size: var(--nd-fs);
  line-height: var(--nd-lh);
  color: var(--nd-ink-2);
  max-width: var(--nd-measure);
}

.nd-prose > * + * { margin-top: .7rem; }
.nd-prose p { margin: 0 0 .7rem; }
.nd-prose > :last-child { margin-bottom: 0; }

/* Sub-headings inside prose: the brief's "Definition / Pathophysiology /
   Management" structure. Bound to the paragraph BELOW them, never orphaned at
   the foot of a column. */
.nd-prose h4, .nd-prose h5, .nd-sub {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: -.005em;
  color: #27404e;
  margin: 1.05rem 0 .35rem;
  break-after: avoid;
  page-break-after: avoid;
}

.nd-prose ul, .nd-prose ol { margin: .4rem 0 .7rem; padding-left: 1.2rem; }
.nd-prose li { margin: 0 0 .32rem; }
.nd-prose li > ul, .nd-prose li > ol { margin: .25rem 0 .2rem; }

/* Bold inside prose is reserved for the things the brief lists — diagnoses,
   doses, thresholds. Give it a little more colour separation than weight alone,
   so a scan picks it up without the page looking peppered. */
.nd-prose strong, .nd-prose b { font-weight: 700; color: var(--nd-ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   6. TABLES — quiet rules, numbers that stand out
   ═══════════════════════════════════════════════════════════════════════════

   Horizontal rules only. Vertical lines in a clinical table add ink without
   adding structure — the column edges are already given by the alignment.    */
.nd-table-wrap {
  margin: var(--nd-gap) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* A scrollable table needs to LOOK scrollable; a hairline frame bounds the
     scroll area so a cut-off column reads as "more to the right" rather than
     as a broken layout. */
  border: 1px solid var(--nd-rule-soft);
  border-radius: var(--nd-radius);
}

.nd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .905rem;
  line-height: 1.58;
  color: var(--nd-ink-2);
}

.nd-table caption {
  caption-side: top;
  text-align: left;
  padding: .6rem .85rem;
  font-size: .745rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .075em;
  color: var(--nd-muted);
  background: #f7f9fa;
  border-bottom: 1px solid var(--nd-rule);
}

.nd-table th {
  text-align: left;
  padding: .58rem .8rem;
  font-family: 'Plus Jakarta Sans', Inter, sans-serif;
  font-size: .775rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #2b4350;
  background: #f4f7f9;
  border-bottom: 2px solid var(--nd-rule);
  vertical-align: bottom;
}

.nd-table td {
  padding: .58rem .8rem;
  border-bottom: 1px solid var(--nd-rule-soft);
  vertical-align: top;
}

.nd-table tbody tr:last-child td { border-bottom: 0; }
.nd-table tbody tr:hover td { background: #f9fbfc; }

/* A row group header inside a long table. */
.nd-table .nd-tr-group td {
  background: #eef3f6;
  font-weight: 800;
  font-size: .775rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #2b4350;
}

/* Numeric columns align right and share a figure width so values compare down
   the column at a glance. */
.nd-table .nd-num, .nd-table td.nd-num, .nd-table th.nd-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

/* The exceptionally important cell. Same budget rule as everywhere else. */
.nd-table .nd-cell-hl { background: var(--nd-y-mark); color: var(--nd-y-ink); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   6b. NEO SUMMARY HEADING LADDER — one idea, three colours
   ═══════════════════════════════════════════════════════════════════════════

   OWNER 2026-10-04: the table titles and the subtitles should carry the same
   treatment as the subject band ("A. Cardiac Development") but in a different
   colour, so the levels are told apart at a glance.

   A cardiology chapter holds 10 subjects, 51 table titles and 165 subtitles, so
   the three levels need to be separable without reading them. They share the
   shape — a filled band, rounded, generous padding — and differ by HUE and by
   WEIGHT of fill, which is what makes the ladder legible rather than merely
   colourful:

     1  Subject    slate, solid, white text   — unchanged, set in redesign.css
     2  Table      teal,  solid, white text   — the brand hue
     3  Subtitle   teal,  pale,  teal text    — same hue, drained

   Both new levels are AAA: white on #1f5f58 is 7.40:1, #17514a on #e8f2f0 is
   7.95:1.

   `!important` is unavoidable on these: the topic header carries its background
   and its padding as INLINE style from the renderer, and the title and number
   carry inline colours. The three-class prefix is likewise deliberate — it has
   to out-specify neo-editorial.css, which flattens the header to transparent at
   two classes and loads after this file.                                       */

/* ── Level 2: the table title ─────────────────────────────────────────────── */
#tab-book-summary .ns-editorial-chapter .ns-editorial-topic .nst-header,
#tab-book-summary .ns-editorial-chapter .ns-editorial-topic .nst-header[data-open] {
  background: linear-gradient(180deg, #2a7169 0%, #1f5f58 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 8px !important;
  padding: .6rem .9rem !important;
  margin: 1.5rem 0 .75rem !important;
  box-shadow: 0 1px 2px rgba(20, 50, 46, .16);
  scroll-margin-top: 84px;
}

/* The number, the title and the chevron all sit on the band now, so each one
   has to give up the ink colour the renderer set on it inline. */
#tab-book-summary .ns-editorial-chapter .ns-editorial-topic .nst-header .nst-chapter-title,
#tab-book-summary .ns-editorial-chapter .ns-editorial-topic .nst-header .nst-chapter-num,
#tab-book-summary .ns-editorial-chapter .ns-editorial-topic .nst-header .ns-topic-number,
#tab-book-summary .ns-editorial-chapter .ns-editorial-topic .nst-header .nst-chevron,
#tab-book-summary .ns-editorial-chapter .ns-editorial-topic .nst-header .nst-label {
  color: #ffffff !important;
}

/* The number reads as a quiet index against the title, not as a second title. */
#tab-book-summary .ns-editorial-chapter .ns-editorial-topic .nst-header .nst-chapter-num,
#tab-book-summary .ns-editorial-chapter .ns-editorial-topic .nst-header .ns-topic-number {
  opacity: .72;
}

#tab-book-summary .ns-editorial-chapter .ns-editorial-topic .nst-header:hover {
  background: linear-gradient(180deg, #2f7d74 0%, #246a63 100%) !important;
}

#tab-book-summary .ns-editorial-chapter .ns-editorial-topic .nst-header:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -3px;
}

/* ── Level 3: the subtitle inside a table ─────────────────────────────────── */
#tab-book-summary .ns-clinical-section .ns-clinical-title,
#tab-book-summary .ns-editorial-topic .ns-clinical-section .ns-clinical-title {
  background: #e8f2f0;
  color: #17514a !important;
  border-left: var(--nd-rail) solid #2a7169;
  border-radius: 0 6px 6px 0;
  padding: .42rem .7rem;
  margin: 1.1rem 0 .6rem;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  scroll-margin-top: 90px;
}

@media (max-width: 720px) {
  #tab-book-summary .ns-editorial-chapter .ns-editorial-topic .nst-header {
    padding: .55rem .7rem !important;
    margin: 1.2rem 0 .6rem !important;
  }
  #tab-book-summary .ns-clinical-section .ns-clinical-title { font-size: 14px; }
}

@media print {
  #tab-book-summary .ns-editorial-chapter .ns-editorial-topic .nst-header,
  #tab-book-summary .ns-clinical-section .ns-clinical-title {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    break-after: avoid;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  :root {
    --nd-pad: .78rem .85rem;
    --nd-gap: .8rem;
  }

  /* Text must never touch the screen edge. */
  .nd-prose { max-width: none; }

  /* The answer block stacks so a long option is not squeezed into a third of
     the width beside the letter badge. */
  .nd-answer { gap: .55rem; padding: .7rem .8rem; }
  .nd-answer-text { font-size: .965rem; }

  /* The option letter moves above its text rather than holding a column. */
  .nd-opt {
    grid-template-columns: minmax(0, 1fr);
    gap: .15rem;
    padding: .55rem .7rem;
  }
  .nd-opt-key {
    grid-row: auto;
    text-align: left;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
  }

  .nd-table { font-size: .87rem; }
  .nd-table th, .nd-table td { padding: .5rem .65rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════════ */

/* Windows high-contrast / forced-colours. Tinted grounds are discarded by the
   OS, so the RAIL is what survives — keep it, and keep the label text. */
@media (forced-colors: active) {
  .nd-pearl, .nd-keypoints, .nd-warn, .nd-action, .nd-note,
  .nd-answer, .nd-opt {
    border-left-style: solid;
    border-left-width: var(--nd-rail);
    forced-color-adjust: none;
    border-left-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }
  mark.nd-hl, .nd-hl { background: Mark; color: MarkText; }
  .nd-answer-key { background: CanvasText; color: Canvas; }
  .nd-opt.is-chosen { border-left-style: double; border-left-width: 5px; }
  .nd-opt.is-chosen .nd-opt-text::after { background: CanvasText; color: Canvas; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. PRINT — guidelines and summaries are printed for rounds
   ═══════════════════════════════════════════════════════════════════════════

   Tinted grounds mostly do not survive a printer, so each callout keeps its
   rail as a solid black-ish rule and its label. Yellow is forced to print via
   print-color-adjust, because a Board Pearl that prints as plain text loses the
   only thing that made it findable on the page.                               */
@media print {
  .nd-pearl, .nd-keypoints, .nd-warn, .nd-action, .nd-note, .nd-answer, .nd-opt {
    border: 1px solid #999;
    border-left-width: var(--nd-rail);
    border-left-color: #333;
    box-shadow: none;
  }

  .nd-pearl, mark.nd-hl, .nd-hl, .nd-table .nd-cell-hl {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .nd-table-wrap { overflow: visible; border: 0; }
  .nd-table { font-size: 9.5pt; }
  .nd-table thead { display: table-header-group; }   /* repeat heads across pages */
  .nd-table tr, .nd-opt, .nd-answer, .nd-pearl { break-inside: avoid; }
  .nd-opt.is-chosen .nd-opt-text::after { border: 1px solid #333; background: transparent; color: #000; }
}