/*!
 * Neonatology Academy — Unified Design Layer (redesign)
 * ─────────────────────────────────────────────────────────────────────────────
 * Loaded LAST on every page. Its job is to make ~150 pages that were each built
 * with their own prefixed mini-system (cg-, lr-, qi-, hq-, nst-, gl-, spc2-,
 * nnt-) read as ONE product.
 *
 * Three rules drive everything here:
 *   1. ONE accent. Teal is the brand. Colour otherwise means STATUS
 *      (correct / incorrect / warning / info) — never decoration.
 *   2. ONE surface. White card, 1px slate border, 10px radius, soft shadow.
 *      No coloured card borders, no per-card gradients.
 *   3. ONE rhythm. Shared spacing scale, shared page width, shared header.
 *
 * Nothing in here changes content or behaviour — visual layer only.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Brand ramp — the only decorative hue in the system */
  --nx-brand-50:  #f0fdfa;
  --nx-brand-100: #ccfbf1;
  --nx-brand-200: #99f6e4;
  --nx-brand-400: #2dd4bf;
  --nx-brand-500: #14b8a6;
  --nx-brand:     #0f766e;
  --nx-brand-700: #115e59;
  --nx-brand-900: #134e4a;

  /* Ink / neutral ramp */
  --nx-ink:       #0f172a;
  --nx-ink-2:     #1e293b;
  --nx-ink-3:     #334155;
  --nx-muted:     #64748b;
  --nx-muted-2:   #94a3b8;
  /* Surfaces are a WARM neutral (beige) ramp, not cool slate. Cards stay pure
     white so they lift off the ground; everything behind and inset from them is
     warm. Borders are warmed to match — a cool slate hairline on a beige ground
     reads muddy. Text stays slate: warm surface, cool ink is a deliberate pair,
     and re-tinting body copy risks legibility for no gain. */
  --nx-line:      #dce7eb;
  --nx-line-soft: #edf3f5;
  --nx-bg:        #f1f6f8;
  --nx-surface:   #ffffff;
  --nx-surface-2: #f6fafb;
  --nx-surface-3: #e6eff2;   /* inset: progress tracks, wells, empty states */

  /* Status — reserved for meaning */
  --nx-ok:        #047857;
  --nx-ok-bg:     #ecfdf5;
  --nx-bad:       #b91c1c;
  --nx-bad-bg:    #fef2f2;
  --nx-warn:      #b45309;
  --nx-warn-bg:   #fffbeb;
  --nx-info:      #0369a1;
  --nx-info-bg:   #f0f9ff;

  /* Elevation — deliberately shallow; this is a reading product */
  --nx-shadow-1:  0 1px 2px rgba(15, 23, 42, .04);
  --nx-shadow-2:  0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --nx-shadow-3:  0 4px 12px rgba(15, 23, 42, .07);

  /* Geometry */
  --nx-r-sm: 6px;
  --nx-r:    10px;
  --nx-r-lg: 14px;

  /* Layout */
  --nx-page-max: 1240px;
  --nx-gutter:   clamp(1rem, 3vw, 2rem);

  /* Type scale */
  --nx-fs-eyebrow: .7rem;
  --nx-fs-caption: .8rem;
  --nx-fs-sm:      .875rem;
  --nx-fs-body:    1rem;
  --nx-fs-h3:      1.05rem;
  --nx-fs-h2:      1.375rem;
  --nx-fs-h1:      clamp(1.6rem, 2.6vw, 2.1rem);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. BASE
   ═══════════════════════════════════════════════════════════════════════════ */
/* `html:root body` (0,1,2) so the warm ground also wins over per-page rules
   like specialty.html's `body.quiz-body-page { background:#f8fafc }` (0,1,1),
   which otherwise left the quiz runner on the old cool grey while its answer
   choices had gone warm. No page sets a dark body — checked all 152. */
html:root body {
  background: var(--nx-bg) !important;
  color: var(--nx-ink-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Legacy palette remap ─────────────────────────────────────────────────
   styles.css still defines the original palette, and the rest of the codebase
   leans on it hard: --border-color alone is referenced 10,842 times,
   --brand-color 3,095, --brand-light 553, --primary-light 632. Those tokens
   are the reason a cool slate kept resurfacing through inline styles the
   component rules below could never reach — e.g. the Neo Summary's table
   headers are inline `background:var(--brand-color)`, which rendered royal
   blue on 23 tables, with 142 zebra rows in cool blue underneath.

   Re-pointing the tokens fixes every one of those usages at once, and retires
   the royal blue that had been competing with teal as a second brand colour.
   (styles.css sets these on :root too; redesign.css loads last, so it wins.) */
:root {
  --bg-main:        var(--nx-bg);
  --bg-primary:     var(--nx-bg);
  --bg-card:        var(--nx-surface);
  --border-color:   var(--nx-line);
  --primary-light:  var(--nx-surface-2);

  --brand-color:    var(--nx-brand);
  --brand-hover:    var(--nx-brand-700);
  --brand-light:    var(--nx-surface-2);

  /* Only used to give `linear-gradient(--brand-color, --secondary-color)` some
     travel, so keep it a lighter teal rather than flattening it. */
  --secondary-color: var(--nx-brand-500);
  --secondary-light: var(--nx-brand-50);
}

/* Hardcoded cool-blue panel that no token reaches. */
.nst-reading-column { background: var(--nx-surface-2) !important; }

/* Remaining hardcoded cool greys that no token reaches: nav chrome, the
   homepage trust band, and the per-row "Practice new" button (17 of them in
   the specialty list, so the cold grey was the most repeated one left). */
/* Target the icon and secondary CTA variants by name. The PRIMARY "Start
   Studying" button carries no modifier class at all, so a `:not(...)` filter
   catches it and leaves white text on a pale ground (measured ratio 1.06). */
.nnt-cta-btn.nnt-btn-icon, .nnt-cta-btn.nnt-btn-secondary,
.nnt-search-close, .nnt-search-tips,
.home-trust, .spc2-btn-sm {
  background: var(--nx-surface-2) !important;
  border-color: var(--nx-line) !important;
}
.spc2-btn-sm:hover {
  background: var(--nx-brand-50) !important;
  border-color: var(--nx-brand-200) !important;
  color: var(--nx-brand) !important;
}

h1, h2, h3, h4 {
  color: var(--nx-ink);
  letter-spacing: -.012em;
  font-weight: 700;
}

/* Consistent, visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--nx-brand);
  outline-offset: 2px;
  border-radius: var(--nx-r-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. DECORATIVE-COLOUR NEUTRALISATION
   The single biggest source of visual noise: icon chips coloured with arbitrary
   inline hexes (17 specialty hues, 10 guideline-section hues, 8 QI-stat hues —
   including invalid values like `background:amber`). Colour was carrying no
   information, only decoration. Every one of these becomes a calm brand tint.
   Status colour is re-applied deliberately in §8.
   ═══════════════════════════════════════════════════════════════════════════ */
[class*="-icon"][style*="background"],
[class$="icon"][style*="background"],
/* Un-classed icon chips: a box with an inline hex background whose only child
   is a FontAwesome glyph. This is how most of the rainbow was actually built. */
div[style*="background:#"]:has(> i[class*="fa-"]),
div[style*="background: #"]:has(> i[class*="fa-"]),
span[style*="background:#"]:has(> i[class*="fa-"]),
span[style*="background: #"]:has(> i[class*="fa-"]),
.qi-icon, .af-icon, .hq-icon, .sys-icon, .spc2-icon,
.cg-sec-icon, .lr-cat-icon, .step-icon-box {
  background: var(--nx-brand-50) !important;
  background-image: none !important;
  color: var(--nx-brand) !important;
  border: 1px solid var(--nx-brand-100) !important;
  box-shadow: none !important;
}

/* Icon glyphs inside those chips inherit the brand colour */
[class*="-icon"][style*="background"] > i,
[class$="icon"][style*="background"] > i,
div[style*="background:#"]:has(> i[class*="fa-"]) > i,
div[style*="background: #"]:has(> i[class*="fa-"]) > i,
span[style*="background:#"]:has(> i[class*="fa-"]) > i,
.qi-icon > i, .af-icon > i, .hq-icon > i,
.cg-sec-icon > i, .lr-cat-icon > i {
  color: var(--nx-brand) !important;
}

/* Safety net for the same decorative-rainbow habit inside a hero. (The four
   homepage stat glyphs — teal / cyan / violet / amber — were fixed at source in
   index.html, since the colour sat on the chip, not the glyph.) */
.hero i[style*="color"] { color: var(--nx-brand-200) !important; }

/* Inline-coloured glyphs sitting next to headings — decoration, not status */
h1 > i[style*="color"], h2 > i[style*="color"],
h3 > i[style*="color"], h4 > i[style*="color"] {
  color: var(--nx-brand) !important;
}

/* KPI numbers were rendered in eight different inline hues on one screen.
   The number is the data; the label carries the meaning. */
.dash-kpi-val[style*="color"],
.dash-kpi-val {
  color: var(--nx-ink) !important;
  font-weight: 750 !important;
  letter-spacing: -.02em !important;
}
.dash-kpi-label {
  color: var(--nx-muted) !important;
  font-weight: 650 !important;
}

/* Simulator hub tiles carry their number colour inline via a CSS var. */
.progress-card > div[id^="stats-"] { color: var(--nx-ink) !important; }

/* ── Specialty cards ──────────────────────────────────────────────────────
   The question bank rendered 17 specialty cards in 17 different hues — card
   border, header tint, title colour and the "Start Questions" button all keyed
   to a per-specialty accent. Seventeen colours can't encode anything a reader
   can hold, so it was pure noise on the busiest screen in the product.
   The whole system already runs off three custom properties, so re-pointing
   those collapses it to one accent — the 3px top rule stays, and now reads as
   a shared brand detail instead of a colour code.                          */
.specialty-card[data-spec] {
  --sp-color:  var(--nx-brand);
  --sp-bg:     var(--nx-brand-50);
  --sp-border: var(--nx-brand-200);
  border-color: var(--nx-line) !important;
}
.specialty-card[data-spec] .spc2-name { color: var(--nx-ink) !important; }
.specialty-card[data-spec]:hover      { border-color: var(--nx-brand-200) !important; }
.spc2-btn-primary {
  background: var(--nx-brand) !important;
  border-color: var(--nx-brand) !important;
  color: #fff !important;
}
.spc2-btn-primary:hover { background: var(--nx-brand-700) !important; }

/* Lab-reference category dots used 10 hues to encode the category the reader
   is already sitting under a labelled header for, and the QI bar charts gave
   each bar of a single-series chart its own colour. Both are decoration. */
.lr-test-dot { background: var(--nx-brand) !important; }
.bar-fill    { background: var(--nx-brand) !important; }

/* Board-content "Start" buttons were tinted per exam domain — 17 more hues. */
.ec-btn-sub.filled {
  background: var(--nx-brand) !important;
  border-color: var(--nx-brand) !important;
  color: #fff !important;
}
.ec-btn-sub.filled:hover { background: var(--nx-brand-700) !important; }

/* Quiz-runner context chips (system / topic) were sky-blue and violet. They
   label the current question, they don't rank it — one quiet neutral chip. */
.qb-badge.badge-system, .qb-badge.badge-topic {
  background: var(--nx-surface-2) !important;
  color: var(--nx-ink-3) !important;
  border: 1px solid var(--nx-line) !important;
}

/* ── Specialty list ───────────────────────────────────────────────────────
   The 17 specialties were a 4-up card grid, which made the busiest screen in
   the product read as a wall. They are a LIST — one per row, stacked, with
   every icon on the same left edge so the eye runs straight down them.
   Each card keeps its markup; only the axis changes: the card flips from a
   column (icon block above, body below) to a row, and the body's children
   (name → progress → counts → actions) become the row's columns.        */
.specialty-grid {
  grid-template-columns: 1fr !important;
  gap: .5rem !important;
}

.specialty-card.spc2 {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  border-radius: var(--nx-r) !important;
}
/* No lift on hover — rows in a list should not jump; tint instead. */
.specialty-card.spc2:hover {
  transform: none !important;
  background: var(--nx-brand-50) !important;
}

/* The header shrinks to an icon rail on the left edge. */
.specialty-card.spc2 .spc2-header {
  flex: 0 0 auto !important;
  border-bottom: none !important;
  border-right: 1px solid var(--nx-line) !important;
  padding: .55rem .7rem !important;
  gap: .45rem !important;
}
/* The 3px brand accent moves from the top edge to the left edge. */
.specialty-card.spc2 .spc2-header::before {
  top: 0 !important; bottom: 0 !important; right: auto !important;
  width: 3px !important; height: auto !important;
  border-radius: var(--nx-r) 0 0 var(--nx-r) !important;
}
.specialty-card.spc2 .spc2-icon {
  width: 34px !important; height: 34px !important;
  font-size: 1rem !important;
  border-radius: 9px !important;
}
.specialty-card.spc2 .spc2-header .spc2-score-badge { margin-left: 0 !important; }

/* The body becomes the row itself. */
.specialty-card.spc2 .spc2-body {
  flex-direction: row !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: .5rem .85rem !important;
  min-width: 0 !important;
}
/* min-width fits the longest label ("Fetal & Maternal Medicine") so no
   specialty name is ever ellipsised at desktop width. */
.specialty-card.spc2 .spc2-name {
  flex: 1 1 13rem !important;
  min-width: 11.75rem !important;
  max-width: 18rem !important;
  margin: 0 !important;
  font-size: .95rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Takes whatever slack is left once the name is fully legible. */
.specialty-card.spc2 .spc2-prog-wrap {
  flex: 1 1 6rem !important;
  min-width: 70px !important;
  margin: 0 !important;
}
.specialty-card.spc2 .spc2-prog-info {
  flex: 0 0 auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
.specialty-card.spc2 .spc2-actions {
  flex: 0 0 auto !important;
  flex-direction: row !important;
  margin-top: 0 !important;
  gap: .35rem !important;
}

/* Below tablet the row would crush, so let it wrap onto two lines while the
   icon rail stays put on the left — the vertical line of icons is the point. */
@media (max-width: 860px) {
  .specialty-card.spc2 .spc2-body { flex-wrap: wrap !important; row-gap: .4rem !important; }
  .specialty-card.spc2 .spc2-name { flex: 1 1 100% !important; }
}

/* Coloured card borders / left accent rails → neutral */
[class*="card"][style*="border-left"],
[class*="card"][style*="border-top:"],
.cg-sec-card,
.dash-card {
  border-color: var(--nx-line) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. SURFACES — one card, used everywhere
   ═══════════════════════════════════════════════════════════════════════════ */
.hq-card,
.cg-sec-card,
.cg-chapter,
.dash-card,
.qi-card,
.measure-card,
.card,
.panel,
.stat-card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r);
  box-shadow: var(--nx-shadow-2);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.hq-card:hover,
.cg-sec-card:hover,
.dash-card:hover,
.qi-card:hover {
  border-color: var(--nx-brand-200);
  box-shadow: var(--nx-shadow-3);
  transform: translateY(-1px);
}

/* The homepage "primary" quick card kept its own solid-teal fill, which made it
   read as a button in a grid of links. Make it a peer with a brand hairline. */
.hq-card.hq-primary {
  background: var(--nx-surface) !important;
  border: 1px solid var(--nx-brand) !important;
  box-shadow: var(--nx-shadow-2) !important;
}
.hq-card.hq-primary .hq-title { color: var(--nx-brand) !important; }
.hq-card.hq-primary .hq-sub   { color: var(--nx-muted) !important; }

/* Panel headers were a navy→royal-blue gradient bar — the only dark block on an
   otherwise light page, and a second brand colour competing with the teal.
   Make them quiet card headers. */
/* theme.css sets this with `> h3:first-of-type !important`, so match that
   specificity or the override silently loses. */
/* `:root` prefixes are here to out-specify theme.css, which sets these with
   `!important` at up to (0,3,1) — e.g. `.flashcard-controls-panel
   .progress-card > h3:first-of-type`. Source order alone does not win. */
:root .quiz-config-panel > h3:first-of-type,
:root .panel > h3:first-of-type,
:root .progress-card > h3:first-of-type,
:root .flashcard-controls-panel .progress-card > h3:first-of-type {
  background: var(--nx-surface-2) !important;
  background-image: none !important;
  color: var(--nx-ink) !important;
  border-bottom: 1px solid var(--nx-line) !important;
  font-size: var(--nx-fs-h3) !important;
  padding: .8rem 1.1rem !important;
}
:root .quiz-config-panel > h3:first-of-type i,
:root .panel > h3:first-of-type i,
:root .progress-card > h3:first-of-type i,
:root .flashcard-controls-panel .progress-card > h3:first-of-type i { color: var(--nx-brand) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   5. PAGE HEADER — one hero, not six
   Each page had its own gradient banner at a different height, radius, padding
   and title size. Unify the geometry and the gradient; shrink it so the actual
   content starts above the fold.
   ═══════════════════════════════════════════════════════════════════════════ */
.cg-hero,
.lr-hero,
.qi-hero,
.gl-header,
.ec-header {
  background: linear-gradient(120deg, #0d2b4e 0%, #10456f 45%, var(--nx-brand) 100%) !important;
  border-radius: var(--nx-r) !important;
  padding: 1.5rem clamp(1.25rem, 3vw, 2rem) !important;
  margin-bottom: 1.25rem !important;
  border: none !important;
  box-shadow: var(--nx-shadow-2) !important;
  text-align: left !important;
  min-height: 0 !important;
}

/* Some pages hang the hero directly off <body> (which only carries the
   section-nav offset), so it ran flush to the viewport edge while the content
   below it was inset. Give those the standard gutter. */
body > .cg-hero,
body > .lr-hero,
body > .qi-hero,
body > .gl-header,
body > .ec-header {
  margin-left: var(--nx-gutter) !important;
  margin-right: var(--nx-gutter) !important;
  margin-top: var(--nx-gutter) !important;
}

.cg-hero-title,
.lr-hero h1,
.qi-hero h1,
.gl-header h1,
.ec-header h1,
.cg-hero h1 {
  font-size: var(--nx-fs-h1) !important;
  color: #fff !important;
  margin: .2rem 0 .35rem !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

.cg-hero-sub,
.lr-hero p,
.qi-hero p,
.cg-hero p,
.gl-header > p {
  font-size: var(--nx-fs-sm) !important;
  color: rgba(255, 255, 255, .78) !important;
  max-width: 68ch !important;
  margin: 0 !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

.cg-hero-eyebrow {
  font-size: var(--nx-fs-eyebrow) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--nx-brand-200) !important;
  font-weight: 700 !important;
}

/* Badges/chips sitting inside a hero stay glass — never white cards.
   (Written after §6 in source order would be cleaner, but the extra descendant
   selector already beats the bare `.qi-stat` card rule.) */
.lr-hero-badge,
.cg-hero-stat,
.qi-hero .pill,
.qi-hero .qi-stat,
.cg-hero .cg-hero-stat,
.lr-hero .lr-stat {
  background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: .28rem .7rem !important;
  font-size: var(--nx-fs-caption) !important;
  font-weight: 600 !important;
}

/* The guideline "bedside action box" is a genuine emphasis block, but it was a
   third distinct blue sitting directly under the header. Keep the weight, drop
   the extra hue: deep ink with a brand rule down the side. */
.gl-bedside {
  background: linear-gradient(135deg, #16233a 0%, #1f3350 100%) !important;
  border-left: 3px solid var(--nx-brand-400) !important;
  border-radius: var(--nx-r) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. STAT TILES — compact and uniform
   Pages opened with rows of large multi-coloured number tiles (the QI page had
   eight) that pushed real content below the fold. Same tile everywhere, half
   the height, neutral ink, brand number.
   ═══════════════════════════════════════════════════════════════════════════ */
.lr-stat,
.qi-stat,
.stat-box,
.stat-card,
.dash-kpi,
.progress-card {
  background: var(--nx-surface) !important;
  border: 1px solid var(--nx-line) !important;
  border-radius: var(--nx-r) !important;
  box-shadow: var(--nx-shadow-1) !important;
  padding: .8rem 1rem !important;
  text-align: left !important;
}

.lr-stat-num, .qi-stat-num, .stat-value {
  font-size: 1.5rem !important;
  font-weight: 750 !important;
  color: var(--nx-ink) !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
}

.lr-stat-lbl, .qi-stat-lbl, .stat-label {
  font-size: var(--nx-fs-eyebrow) !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: var(--nx-muted) !important;
  font-weight: 650 !important;
  margin-top: .15rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. BUTTONS — primary / secondary / ghost, and nothing else
   ═══════════════════════════════════════════════════════════════════════════ */
.btn, button.btn, a.btn,
.btn-primary, .btn-secondary, .btn-start-form {
  font-family: inherit;
  font-weight: 650;
  border-radius: var(--nx-r-sm);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  cursor: pointer;
}

.btn-primary, .btn-start-form {
  background: var(--nx-brand) !important;
  background-image: none !important;
  border: 1px solid var(--nx-brand) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-start-form:hover {
  background: var(--nx-brand-700) !important;
  border-color: var(--nx-brand-700) !important;
}

.btn-secondary {
  background: var(--nx-surface) !important;
  border: 1px solid var(--nx-line) !important;
  color: var(--nx-ink-3) !important;
}
.btn-secondary:hover {
  border-color: var(--nx-brand-200) !important;
  color: var(--nx-brand) !important;
  background: var(--nx-brand-50) !important;
}

/* Buttons inside a dark hero keep the glass treatment */
.cg-hero .btn-secondary, .lr-hero .btn-secondary, .qi-hero .btn-secondary,
.hero .btn-secondary {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .25) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. STATUS — colour restored where it carries meaning
   ═══════════════════════════════════════════════════════════════════════════ */
.pill-ok, .badge-ok {
  background: var(--nx-ok-bg) !important;
  color: var(--nx-ok) !important;
  border: 1px solid #a7f3d0 !important;
}
.pill-draft, .badge-draft {
  background: var(--nx-warn-bg) !important;
  color: var(--nx-warn) !important;
  border: 1px solid #fde68a !important;
}
.pill-lock, .badge-lock {
  background: var(--nx-surface-2) !important;
  color: var(--nx-muted) !important;
  border: 1px solid var(--nx-line) !important;
}
.badge-error {
  background: var(--nx-bad-bg) !important;
  color: var(--nx-bad) !important;
  border: 1px solid #fecaca !important;
}

.pill-ok, .pill-draft, .pill-lock,
.badge-ok, .badge-draft, .badge-lock, .badge-error {
  border-radius: 999px !important;
  padding: .15rem .55rem !important;
  font-size: var(--nx-fs-eyebrow) !important;
  font-weight: 650 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. SECTION HEADINGS — the same shape on every page
   ═══════════════════════════════════════════════════════════════════════════ */
.home-quick-head h2, .section-head h2 {
  font-size: var(--nx-fs-h2) !important;
  margin: 0 0 .2rem !important;
}
.home-quick-head p, .section-head p {
  font-size: var(--nx-fs-sm) !important;
  color: var(--nx-muted) !important;
  margin: 0 !important;
}

/* The homepage container had no width limit and no gutter, so every section
   below the hero sat flush against the viewport edge while the hero's own
   padding held its content 48px in — the whole page read as misaligned.
   One measure, one gutter, applied to the container itself. */
main.container {
  max-width: var(--nx-page-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--nx-gutter) !important;
}

/* …except when the in-page section-nav is open. That rail is `position:fixed`
   and section-nav.css clears it by padding the container left by the rail width
   — an offset the blanket `padding-inline` above would silently overwrite,
   dropping the whole Neo Summary layout underneath the rail. Restate the offset
   here so the two rules stop fighting. */
body.snav-on main.container,
body.snav-on .container {
  max-width: none !important;
  margin-inline: 0 !important;
  padding-right: var(--nx-gutter) !important;
}
@media (min-width: 1100px) {
  body.snav-on main.container,
  body.snav-on .container {
    padding-left: calc(var(--snav-w, 232px) + clamp(1rem, 3vw, 3rem)) !important;
  }
  body.snav-on.snav-shift-body main.container,
  body.snav-on.snav-shift-body .container {
    padding-left: var(--nx-gutter) !important;  /* body already carries the shift */
  }
}
@media (max-width: 1099px) {
  body.snav-on main.container,
  body.snav-on .container { padding-left: var(--nx-gutter) !important; }
}

/* With the container now guttered, the homepage hero becomes a card like every
   other page's hero instead of a full-bleed band — same radius, same edges. */
main.container .hero {
  /* Same gradient as every other page header — the homepage hero was still
     navy -> royal blue, so the flagship page did not match its own system. */
  background: linear-gradient(120deg, #0d2b4e 0%, #10456f 45%, var(--nx-brand) 100%) !important;
  border-radius: var(--nx-r) !important;
  padding: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 3.5vw, 2.5rem) !important;
  margin-top: var(--nx-gutter) !important;
  overflow: hidden !important;
}

main.container > .tab-content > .home-quick {
  margin-top: 2.25rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9b. WARM SURFACES
   The tokens above turn the page ground beige, but several components hardcode
   a cool slate (#e2e8f0 / #f1f5f9 / #f8fafc) and would sit on the warm ground
   as cold grey patches. These are the ones that show.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Progress tracks — the unfilled part of every bar. Teal still fills them.
   `.qbs-dot` is the same idea: an unanswered question in the quiz strip. */
.spc2-prog-wrap,
.bar-track,
.progress-bar-track,
.qbs-dot {
  background: var(--nx-surface-3) !important;
}

/* Question answer choices: warm resting surface, teal only on hover/selection.
   theme.css sets .qb-choice with !important, so match its weight. */
:root .qb-choice, :root .choice-item {
  background: var(--nx-surface-2) !important;
  border-color: var(--nx-line) !important;
}
:root .qb-choice:hover:not(.locked),
:root .choice-item:hover:not(.locked) {
  background: var(--nx-brand-50) !important;
  border-color: var(--nx-brand) !important;
}
:root .qb-choice-letter {
  background: var(--nx-surface-3) !important;
  color: var(--nx-ink-3) !important;
}
/* Correct / incorrect states keep their own semantics — never warm those. */
:root .qb-choice.correct, :root .choice-item.correct {
  background: var(--nx-ok-bg) !important;
  border-color: var(--nx-ok) !important;
}
:root .qb-choice.incorrect, :root .choice-item.incorrect {
  background: var(--nx-bad-bg) !important;
  border-color: var(--nx-bad) !important;
}

/* Inputs, search fields and wells */
input[type="text"], input[type="search"], input[type="number"],
select, textarea,
.cg-search-box, .lr-search, .search-input, .nst-search {
  background: var(--nx-surface) !important;
  border-color: var(--nx-line) !important;
}

/* The in-page section-nav rail and any empty state */
.snav, .section-nav, .empty-state {
  background: var(--nx-surface-2) !important;
  border-color: var(--nx-line) !important;
}
:root { --snav-bg: var(--nx-surface-2); --snav-border: var(--nx-line); }

/* ═══════════════════════════════════════════════════════════════════════════
   9c. NEO SUMMARY READING DENSITY
   Measured at 1280px before this block: each chapter split its prose into two
   equal 411px columns ("Board Key Points" | overview), so lines ran 5-6 words;
   the overview was also justified and capped at 74ch, and table cells held
   only 2.7-4.5 words per line. Asked for: more words on every line.
     1. Stack the spread — both columns go full width (~2x per line alone).
     2. A condensed reading face at the same size, not a smaller one — an
        earlier pass deliberately raised these sizes, so width comes from the
        letterforms. IBM Plex Sans Condensed keeps numerals unambiguous, which
        matters in dose tables. Loaded only on index.html.
     3. Left-aligned, no line cap: long justified lines stretch word spacing.
     4. Tighter table cells.
     5. The specialty picker moves from a 280px side rail to a row of pills
        above the content, and the Neo Summary may run wider on big screens.
   Why 5: tables were the weak spot (3.48 words per line across 1,035 cells)
   and the limit is table width, not column allocation — letting the browser
   size columns itself moved it only to 3.53, and only 4 of 333 tables
   mis-allocate. A live A/B gave 3.48 -> 4.69 at 1280px with the rail moved
   above, 5.73 at 1600px with the page widened too. (Just narrowing the rail
   to 240px was tried first: it wrapped two specialty labels.)
   Scoped to .neo-summary-pane so nothing outside the Neo Summary changes.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --nx-font-reading: 'IBM Plex Sans Condensed', 'Roboto Condensed', 'Arial Narrow',
                     'Inter', system-ui, sans-serif;
}

/* Every chapter's text and tables. Font Awesome glyphs are excluded — giving an
   <i class="fa-…"> another font-family turns its icon into a blank box. */
.neo-summary-pane .neo-summary-table-container,
.neo-summary-pane .neo-summary-table-container :not(i):not([class*="fa-"]) {
  font-family: var(--nx-font-reading) !important;
}

/* 1. One column: key points above, overview below, each at full width. */
.neo-summary-pane .nst-reading-spread {
  grid-template-columns: minmax(0, 1fr) !important;
  background: var(--nx-surface-2) !important;
}
.neo-summary-pane .nst-reading-key-points {
  border-right: 0 !important;
  border-bottom: 1px solid var(--nx-line) !important;
}

/* 3. Overview prose: same 16px, left-aligned, no 74ch cap, no auto-hyphens. */
.neo-summary-pane .nst-reading-overview {
  max-width: none !important;
  text-align: left !important;
  hyphens: manual !important;
  -webkit-hyphens: manual !important;
  font-size: 1rem !important;
  line-height: 1.62 !important;
}
.neo-summary-pane .nst-reading-key-points ul {
  font-size: .95rem !important;
  line-height: 1.6 !important;
}
/* The "Board Key Points" label was still the old #3b7dd8 blue. */
.neo-summary-pane .nst-reading-key-points > strong,
.neo-summary-pane .nst-reading-key-points > strong i {
  color: var(--nx-brand) !important;
}

/* 4. Table cells: same type size, less padding around it. */
.neo-summary-pane .nst-table td,
.neo-summary-pane .nst-table th {
  padding: .5rem .6rem !important;
}
.neo-summary-pane .nst-table td {
  font-size: .95rem !important;
  line-height: 1.5 !important;
}

/* 5. Specialty picker: a compact row of pills above the content instead of a
   280px side rail, so tables get the full width. Selectors carry the
   #tab-book-summary prefix to outrank theme.css's own !important rules for
   these buttons (same specificity, later source). flex-direction must be reset
   too — styles.css stacks them as a column, which made a first attempt 718px
   tall. :active is written after :hover so the selected pill stays filled. */
#tab-book-summary .neo-summary-layout {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 1rem !important;
}
#tab-book-summary .neo-summary-sidebar {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: .35rem !important;
  padding: .55rem !important;
  position: static !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}
#tab-book-summary .neo-summary-sidebar-btn {
  width: auto !important;
  flex: 0 0 auto !important;
  gap: .4rem !important;
  margin: 0 !important;
  padding: .38rem .75rem !important;
  font-size: .8rem !important;
  border-radius: 999px !important;
  border: 1px solid var(--nx-line) !important;
  background: var(--nx-surface) !important;
  color: var(--nx-ink-3) !important;
}
#tab-book-summary .neo-summary-sidebar-btn i {
  width: auto !important;
  font-size: .8rem !important;
}
#tab-book-summary .neo-summary-sidebar-btn:hover {
  background: var(--nx-brand-50) !important;
  border-color: var(--nx-brand-200) !important;
  color: var(--nx-brand) !important;
}
#tab-book-summary .neo-summary-sidebar-btn.active {
  background: var(--nx-brand) !important;
  border-color: var(--nx-brand) !important;
  color: #fff !important;
}
#tab-book-summary .neo-summary-sidebar-btn.active i { color: #fff !important; }

/* Phones: one swipeable row of full-size pills. Wrapping measured 390px tall
   at 375px (11 rows) with 29px pills — under the site's 44px touch minimum.
   The row scrolls inside itself, so the page never scrolls sideways. */
@media (max-width: 860px) {
  #tab-book-summary .neo-summary-sidebar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  #tab-book-summary .neo-summary-sidebar-btn {
    min-height: 44px !important;
    white-space: nowrap !important;
  }
}

/* On big screens the Neo Summary may use more than the site's 1240px measure —
   tables take it all. Prose is capped separately: a 1,500px line of running
   text (25+ words) is harder to track back from, which would defeat the point. */
@media (min-width: 1300px) {
  body:has(#tab-book-summary.active) main.container { max-width: 1600px !important; }
  #tab-book-summary .nst-reading-overview,
  #tab-book-summary .nst-reading-key-points ul { max-width: 130ch !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9d. FIXES FROM THE FIRST FULL-SIZE VISUAL PASS
   Found by headless-Edge screenshots at 1280/1600px — none of these showed up
   in computed-style measurements.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Homepage pricing band: it sets white text on its dark gradient, but
   styles.css, design-tokens.css and this file each colour every <h3>/<p>
   directly, and a direct rule beats inherited colour — so the heading rendered
   navy on navy. Pre-existing; this layer only repeated the same colour. */
.home-pricing-preview h3,
.home-pricing-preview p { color: #fff !important; }

/* Lab References category counts carried a per-category inline hue (rose,
   amber, cyan, violet) — the decorative rainbow retired everywhere else. */
.lr-cat-count {
  color: var(--nx-brand) !important;
  border-color: var(--nx-brand-200) !important;
}

/* "Where would you like to start?": six cards in a five-column grid left the
   sixth alone on its own row. Three columns gives two even rows. Desktop only —
   theme.css already stacks it to one column on phones. */
@media (min-width: 900px) {
  .home-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Question-bank rows: the card's settings icon is position:absolute (top-right
   of the old card header). When that header became the narrow left rail of a
   row, the icon landed on the score badge — covering 23 of its 37px, so "New"
   read as "N". In the row layout it now flows in the rail beside the badge. */
.specialty-card.spc2 .spc2-header .card-config-icon {
  position: static !important;
  top: auto !important;
  right: auto !important;
}

/* Question-bank rows overflowed their card by 10px at 1280px (824px card, 835px
   of row), clipping "Practice new". Two changes:
   1. The count and the status stack ("0/21 answered" over "Not started"),
      141px → ~85px; the 53px row already has the height for two short lines.
   2. The row wraps when the CARD is narrow, not only when the window is — the
      Custom Practice panel narrows the list at desktop widths too. One line
      needs ~790px (rail 136 + name 188 + bar 70 + counts 85 + actions 236 +
      gaps and padding).                                                     */
.specialty-card.spc2 .spc2-prog-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  line-height: 1.25 !important;
}
.specialty-card.spc2 { container-type: inline-size; }
@container (max-width: 800px) {
  .specialty-card.spc2 .spc2-body { flex-wrap: wrap !important; row-gap: .4rem !important; }
  .specialty-card.spc2 .spc2-name { flex: 1 1 100% !important; max-width: none !important; }
}

/* Section sidebar (Lab References, Flashcards, …): styles.css centres every
   <button>, and the rail's items are buttons — so one-line labels floated to
   the middle while wrapped ones filled the width, a ragged column of icons. */
.snav-link {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Top bar between phone and wide desktop. The full bar (logo, six sections,
   three actions) needs 1,227px, but the phone menu only took over at ≤880px —
   so from 881px to ~1,245px "Start Studying" ran off the right edge (113px
   over at 1100px). Two steps:
   ≤1259px  the section icons and the NEW badge go (−136px): a text-only bar;
   ≤1180px  the hamburger takes over — text-only still needs 1,091px, which a
            1,101px window with a 17px Windows scrollbar cannot give. Here the
            menu opens as a panel under its button, not a full-width sheet.   */
@media (max-width: 1259px) {
  .nnt-nav .nnt-link > i:first-child,
  .nnt-nav .nnt-badge-new { display: none !important; }
}
@media (max-width: 1180px) {
  .nnt-nav { display: none !important; }
  .nnt-hamburger { display: flex !important; }
}
@media (min-width: 881px) and (max-width: 1180px) {
  .nnt-mob-menu {
    left: auto !important;
    right: 1rem !important;
    width: 360px !important;
    max-width: calc(100vw - 2rem) !important;
    top: calc(var(--nnt-h) + .4rem) !important;
    border: 1px solid var(--nnt-border) !important;
    border-radius: 12px !important;
  }
}

/* Flashcards side panel: theme.css zeroes the padding of both of its cards
   (`.flashcard-controls-panel .progress-card { padding: 0 }`) so the header
   bar can run edge to edge, then re-pads only the header, the intro and the
   specialty picker. The deck counts, "Session Progress", the Correct/Wrong
   tiles, the Reset button and the whole "Spaced Repetition" card sat flush
   against the border, 20px left of everything above them. One inset for all. */
:root .flashcard-controls-panel .progress-card > :not(h3:first-of-type):not(.btn) {
  padding-left: 1.1rem !important;
  padding-right: 1.1rem !important;
}
:root .flashcard-controls-panel .progress-card > :first-child:not(h3) { padding-top: .9rem !important; }
:root .flashcard-controls-panel .progress-card > :last-child:not(.btn) { padding-bottom: 1rem !important; }
:root .flashcard-controls-panel .progress-card > .btn {
  margin: .9rem 1.1rem 1.1rem !important;
  width: calc(100% - 2.2rem) !important;
}

/* NICU Calculators — the dark patient-profile panel. MY REGRESSION: this
   file's form rule (`input[type=number], select … { background:
   var(--nx-surface) !important }`) replaced .profile-input's dark fill but not
   its white text, so Sex, GA weeks/days and both weights were white on white —
   a typed gestational age was invisible. Date/time inputs escaped only because
   the rule doesn't list them. The profile's controls get the dark treatment
   back, with dark native pickers; the subtitle (#475569 on navy, ~2.3:1) and
   the off-palette sky-blue heading are brought into line. */
#calculator-profile-wrapper .profile-input {
  background: rgba(255, 255, 255, .07) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  color-scheme: dark;
}
#calculator-profile-wrapper .profile-input::placeholder { color: rgba(255, 255, 255, .45) !important; }
#calculator-profile-wrapper select.profile-input option { color: var(--nx-ink); background: #fff; }
#calculator-profile-wrapper h3 { color: #fff !important; }
#calculator-profile-wrapper h3 i { color: #5eead4 !important; }
#calculator-profile-wrapper .text-muted { color: #a8b3c4 !important; }

/* Calculator sub-tabs carry two icons each — the section icon and a chevron
   meant to swap in on hover — but no stylesheet implements the swap, so both
   always showed ("📅 ⌄ Age & Maturity"). These are tabs, not menus: the
   chevron goes. */
.calc-sub-btn .hover-icon { display: none !important; }

/* Section headings are a flex row (title left, note right) that never
   wrapped: in the 326px Ballard column the note kept its width and squeezed
   "New Ballard Maturity Score" to 125px across four lines. Now the note drops
   below the title whenever the two don't fit side by side. */
.section-title { flex-wrap: wrap !important; row-gap: .35rem !important; column-gap: 1rem !important; }
/* theme.css sets weight 800 and near-black on the whole .section-title, so its
   explanatory note inherited heading weight — a second bold title. */
.section-title > .text-muted {
  font-family: var(--nx-font, inherit) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  color: var(--nx-muted) !important;
}

/* NICU Quality: the hero's count pills were centred under left-aligned text,
   and 8 KPI tiles in 5–6 auto columns left a ragged second row. Pills align
   with the text; on desktop the tiles make two even rows of four. */
.qi-stats { justify-content: flex-start !important; }
/* This page loads neither theme.css nor its heading rules, so the title fell
   back to styles.css's Outfit — the only page headed in it. Plus Jakarta Sans
   is already loaded here (body and nav use it). */
.qi-hero h1 { font-family: 'Plus Jakarta Sans', Inter, sans-serif !important; }
@media (min-width: 1000px) {
  #dash-kpis.dash-kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* Simulator hub header: the two actions sat in an unclassed 363px flex box,
   so "View My Progress" and "Admin Dashboard" each broke onto two lines. They
   keep one line and the box stops shrinking; on phones they may wrap as a
   pair instead. (The inline indigo on the admin button was removed in
   simulator.html — the only indigo left on the site.) */
.sim-hero-actions { flex: 0 0 auto !important; flex-wrap: wrap; }
.sim-hero-actions .btn { white-space: nowrap !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   9e. NEO SUMMARY FIGURES — numbered, and beside the Board Key Points
   Figures used to follow the table (and its references), ~800px below the key
   points they illustrate, and only 32 of 166 carried a number — an internal
   one at that ("Figure card-01.3"). app.js now builds a lead row: key points
   left, figures right — an even half-and-half split — with the table below at
   full width. Every figure is numbered per chapter (Figure 5.1, 5.2, …); a
   click still opens it full size for the finest labels.
   ═══════════════════════════════════════════════════════════════════════════ */
.nst-lead--figs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  border-bottom: 1px solid var(--nx-line);
}
.nst-lead--figs > .nst-reading-spread { min-width: 0; }
.nst-lead--figs .nst-reading-column:last-child { border-bottom: 0 !important; }
.nst-lead--figs > .nst-figures {
  align-items: stretch !important;
  justify-content: flex-start;
  gap: 1rem !important;
  padding: 1rem 1.1rem !important;
  border-left: 1px solid var(--nx-line);
  background: var(--nx-surface);
  min-width: 0;
}
.nst-lead--figs .nst-figure { max-width: none !important; margin: 0 !important; }
.nst-lead--figs .nst-figure-img {
  width: 100% !important;
  max-height: none !important;
  border-radius: 6px;
}
.nst-lead--figs .nst-figure figcaption {
  max-width: none !important;
  text-align: left !important;
  font-size: .82rem !important;
  line-height: 1.5 !important;
  margin-top: .5rem !important;
}
.nst-figure-img[onclick] { cursor: zoom-in; }
.nst-fig-num {
  font-weight: 800;
  color: var(--nx-ink);
  white-space: nowrap;
}
/* Question-bank explanation figures: shown with the explanation, after answering,
   never with the stem (the files are named after the answer). The figure, its number
   and its caption are the chapter's own — resolved from Neo Summary at render time —
   so the caption now runs to real length rather than the bare "Figure 1" it once was. */
.q-figure { margin: 1rem 0 .35rem; max-width: 620px; }
.q-figure-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  background: #fff;
  cursor: zoom-in;
}
.q-figure figcaption { margin-top: .4rem; font-size: .82rem; color: var(--nx-muted); line-height: 1.45; }
/* Back-link to the figure where it lives, so the reader can reach the table and the
   text around it. Kept on the caption line rather than given a row of its own. */
.q-figure figcaption .q-figure-src {
  white-space: nowrap;
  margin-left: .35rem;
  color: var(--nx-accent, #2f6f7e);
  text-decoration: none;
  font-weight: 600;
}
.q-figure figcaption .q-figure-src:hover { text-decoration: underline; }

/* Below tablet width two columns would each be too narrow to read: the
   figures drop under the key points — still above the table. */
@media (max-width: 900px) {
  .nst-lead--figs { grid-template-columns: minmax(0, 1fr); }
  .nst-lead--figs > .nst-figures { border-left: 0; border-top: 1px solid var(--nx-line); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. TABLES — legible, scrollable, quiet
   ═══════════════════════════════════════════════════════════════════════════ */
.nst-table, .gl-table, .clinical-table, .audit-table, .lr-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--nx-line) !important;
  border-radius: var(--nx-r) !important;
  overflow: hidden !important;
  background: var(--nx-surface) !important;
}
.nst-table th, .gl-table th, .clinical-table th, .audit-table th, .lr-table th {
  background: var(--nx-surface-2) !important;
  color: var(--nx-ink-3) !important;
  font-size: var(--nx-fs-eyebrow) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--nx-line) !important;
}
.nst-table td, .gl-table td, .clinical-table td, .audit-table td, .lr-table td {
  border-bottom: 1px solid var(--nx-line-soft) !important;
}
.nst-table tr:last-child td, .gl-table tr:last-child td,
.clinical-table tr:last-child td, .audit-table tr:last-child td {
  border-bottom: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .cg-hero, .lr-hero, .qi-hero, .gl-header, .ec-header {
    padding: 1.15rem 1rem !important;
  }
}
@media (max-width: 640px) {
  :root { --nx-fs-h1: 1.45rem; --nx-fs-h2: 1.2rem; }
  .lr-stat, .qi-stat, .stat-box { padding: .65rem .75rem !important; }
  .lr-stat-num, .qi-stat-num { font-size: 1.25rem !important; }
}

/* ── Touch targets ────────────────────────────────────────────────────────
   Measured at 375px: the specialty list's two action buttons were 29px and
   27px tall (34 of them, side by side, so mis-taps were likely), and the
   header chrome ran 28-36px. 44px is the floor for a reliable thumb tap.
   Scoped to small screens so desktop keeps its tighter, denser controls.  */
@media (max-width: 860px) {
  /* `:not(.nnt-hide-mobile)` matters: forcing `display` here without it
     overrode nav.css's `.nnt-cta-btn.nnt-hide-mobile { display:none }`, which
     brought "Start Studying" back at 375px and pushed the hamburger off the
     right edge — the mobile menu became unreachable. */
  .spc2-btn-primary, .spc2-btn-sm,
  .qb-btn, .btn, .btn-sm, .qb-nav-toggle, .qb-tb-btn,
  .nnt-hamburger, .nnt-search-btn, .nnt-search-close, .qnp-close,
  .nnt-cta-btn:not(.nnt-hide-mobile) {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .nnt-cta-btn.nnt-btn-icon, .nnt-hamburger, .nnt-search-btn,
  .nnt-search-close, .qnp-close {
    min-width: 44px !important;
  }
  /* Give the two stacked row actions room to breathe apart. */
  .specialty-card.spc2 .spc2-actions { gap: .5rem !important; }

  /* Footer link lists sat at a 22px line box — fine with a mouse, cramped for
     a thumb. Pad rather than force a height so the columns keep their rhythm. */
  .global-footer a {
    display: inline-block !important;
    padding-block: .7rem !important;   /* 22px line box + 2x11px = 44px */
  }

  /* Text that measured under 13px on a phone. Badges are conventionally small,
     but 11.5px is past the point where they stay comfortably readable. */
  .hero-tag { font-size: .8rem !important; }
  .hq-sub, .spc2-prog-info, .nnt-logo-name { font-size: .8125rem !important; }
  .gl-badge, .qb-badge, .qb-meta-r { font-size: .775rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. PRINT — guideline and summary pages are printed for rounds
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  .neo-topnav,
.section-nav,
.global-footer,
.cg-hero,
.lr-hero,
.qi-hero { display: none !important; }
  body { background: #fff !important; }
  a[href]::after { content: "" !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEO SUMMARY — CHAPTER HEADINGS
   Each chapter opened with dark text on the page background and a hairline
   under it, so a reader scrolling a 55-topic specialty had nothing to catch
   the eye and no clear sense of where one chapter ended and the next began.
   The heading is now a solid slate band: white text on grey, with an icon,
   which both names the chapter and separates it from the one above.

   These rules carry !important AND higher specificity than the editorial
   sheet's own heading rule, because that sheet loads after this one; matching
   its !important alone would lose on source order, so the selector adds the
   parent section and the second class to win on specificity instead.
   ═══════════════════════════════════════════════════════════════════════════ */

#tab-book-summary .ns-editorial-chapter .ns-medical-subject > .ns-subject-heading.ns-group-hdr {
  display: flex !important;
  align-items: center;
  gap: .7rem;
  /* The band, not the page, now carries the chapter's identity. */
  background: linear-gradient(180deg, #55707f 0%, #47606e 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 10px !important;
  padding: .72rem 1rem .72rem .85rem !important;
  /* Generous space ABOVE and tight below: the heading belongs to what follows
     it, and the gap is what tells the eye a new chapter has started. */
  margin: 2.6rem 0 1rem !important;
  font-size: 19px !important;
  line-height: 1.3;
  letter-spacing: -.01em;
  box-shadow: 0 1px 2px rgba(20, 40, 50, .18), 0 6px 14px -8px rgba(20, 40, 50, .35);
  scroll-margin-top: 84px;
}

/* The icon sits in its own lighter tile so the band reads as a label rather
   than a coloured rectangle, and so the eye lands on it when scanning. */
#tab-book-summary .ns-editorial-chapter .ns-medical-subject > .ns-subject-heading.ns-group-hdr::before {
  content: "\f5fd";                       /* layer-group */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 13px;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, .17);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

/* The first chapter needs no separating gap — nothing precedes it. */
#tab-book-summary .ns-editorial-chapter .ns-medical-subject:first-of-type > .ns-subject-heading.ns-group-hdr {
  margin-top: .6rem !important;
}

/* A chapter that could not be mapped keeps the shape but changes colour, so it
   reads as a problem to fix rather than as an ordinary chapter. */
#tab-book-summary .ns-editorial-chapter .ns-medical-subject > .ns-subject-heading.ns-group-hdr[id^="ns-unmapped-"] {
  background: linear-gradient(180deg, #9a6b4f 0%, #85583f 100%) !important;
}

/* Hold the chapters apart as blocks, so the page reads as a sequence of
   chapters rather than one continuous run of topic cards. */
#tab-book-summary .ns-editorial-chapter .ns-medical-subject {
  padding-bottom: .35rem;
}

@media (max-width: 720px) {
  #tab-book-summary .ns-editorial-chapter .ns-medical-subject > .ns-subject-heading.ns-group-hdr {
    font-size: 17px !important;
    padding: .62rem .8rem .62rem .7rem !important;
    margin-top: 2rem !important;
    align-items: flex-start;
  }
  #tab-book-summary .ns-editorial-chapter .ns-medical-subject > .ns-subject-heading.ns-group-hdr::before {
    width: 26px; height: 26px; font-size: 12px;
  }
}