
/* ==========================================================================
   Nucpaedia — theme v2 "polished sage editorial". Presentation only.
   Replaces the earlier editorial-refinement override. Organised in the same
   order as the base sheet. Rules marked "undo: L###" exist only to
   neutralise a base-sheet declaration at that line.
   ========================================================================== */

/* ---------- 00 · TOKENS ------------------------------------------------ */
:root{
  /* surfaces */
  --bg:#f6f7f4; --surface:#ffffff; --surface-2:#eef1ed; --surface-3:#e3e9e3;
  --band:#e8efe9; --band-2:#dde6df;
  /* ink */
  /* --text-3 is the site-wide muted ink (breadcrumbs, captions, hints, meta).
     #6c7a75 scored 4.49:1 on white and 4.17:1 on --bg — both short of WCAG AA.
     #5b6964 is the same hue, dark enough to clear AA on every surface it lands on:
     5.75 on white, 5.35 on --bg, 5.05 on --surface-2, 4.67 on --surface-3. */
  --text:#1b2725; --text-2:#4d5b58; --text-3:#5b6964;
  --border:#d8dfd8; --border-strong:#b7c4bb; --hairline:rgba(27,39,37,.08);
  /* brand */
  --primary:#1f3a33; --accent:#3f6a59; --accent-ink:#2f5646; --accent-soft:#e4ede6;
  --link:#2f5646; --focus:#4f7c68;
  --navy-900:#1e302e; --navy-800:#27403a; --navy-700:#33544a;
  --teal-700:#335546; --teal-600:#3f6a59; --teal-500:#5f8471;
  --cyan-500:var(--accent); --cyan-400:#6f9683; --cyan-100:var(--accent-soft);
  --amber-500:#9c7a3f; --amber-100:#f3eddb;
  --red-600:#9d4b4d; --red-100:#f5e7e6;
  --green-600:#3b7252; --green-100:#e4eee6;
  --violet-600:#72628a; --violet-100:#ece8f2;
  /* elevation */
  --shadow-xs:0 1px 2px rgba(22,38,32,.06);
  --shadow-sm:0 1px 2px rgba(22,38,32,.05),0 3px 8px rgba(22,38,32,.06);
  --shadow-md:0 6px 16px rgba(22,38,32,.07),0 16px 40px rgba(22,38,32,.08);
  --shadow-lg:0 4px 12px rgba(16,30,25,.08),0 24px 64px rgba(16,30,25,.18);
  /* spacing — 8pt */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  /* type */
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --serif:var(--display); --text-serif:var(--display);
  /* 12px floor: --fs-2xs was .68rem (10.9px) and --fs-xs .74rem (11.8px).
     Tracked all-caps micro-labels may still sit below this; running text may not. */
  --fs-2xs:.75rem; --fs-xs:.8125rem; --fs-sm:.82rem; --fs-base:1rem;
  --fs-prose:1.0625rem; --fs-lg:1.2rem;
  --fs-h3:clamp(1.2rem,1.08rem + .5vw,1.42rem);
  --fs-h2:clamp(1.5rem,1.28rem + .9vw,1.9rem);
  --fs-h1:clamp(2.1rem,1.55rem + 2.2vw,3.1rem);
  --fs-display:clamp(2.6rem,1.9rem + 3.4vw,4.2rem);
  --fs-lead:clamp(1rem,.94rem + .3vw,1.14rem);
  --lh-tight:1.08; --lh-snug:1.28; --lh-body:1.6; --lh-prose:1.75;
  --track-caps:.11em;
  --w-display:400; --w-display-strong:600;   /* Newsreader ships 400/600 only */
  /* radius */
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;
  --radius:var(--r-md); --radius-sm:var(--r-sm); --radius-lg:var(--r-lg);
  /* stacking */
  --z-raised:1; --z-sticky:40; --z-header:100; --z-rail:110; --z-flyout:130;
  --z-dock:300; --z-overlay:350; --z-toast:400; --z-skip:500;
  /* layout — breakpoints: 640 phone | 900 tablet | 1100 article | 1280 container */
  --maxw:1280px; --nav-h:60px; --gutter:clamp(20px,4vw,40px);
}
html[data-theme="dark"]{
  --bg:#141c1b; --surface:#1b2523; --surface-2:#222e2b; --surface-3:#2b3935;
  --band:#182321; --band-2:#1e2b28;
  --text:#e7ece5; --text-2:#b5c2b9; --text-3:#90a198;
  --border:#2e3c37; --border-strong:#4a5d54; --hairline:rgba(231,236,229,.08);
  --primary:#c3d6c9; --accent:#93b7a0; --accent-ink:#b3d1bd; --accent-soft:#25352e;
  --link:#b3d1bd; --focus:#b3d1bd;
  --navy-900:#1a2523; --navy-800:#22302c; --navy-700:#2c3e38;
  --teal-700:#2f4a3f; --teal-600:#3c5e50; --teal-500:#4f7767;
  --cyan-500:#93b7a0; --cyan-400:#b3d1bd; --cyan-100:var(--accent-soft);
  --amber-500:#c39d5c; --amber-100:#3a3323;
  --red-600:#c5787a; --red-100:#3a2828;
  --green-600:#6fa585; --green-100:#213a2a;
  --violet-600:#a294ba; --violet-100:#302b3b;
  --shadow-xs:0 1px 2px rgba(0,0,0,.35);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 3px 8px rgba(0,0,0,.35);
  --shadow-md:0 8px 20px rgba(0,0,0,.35),0 20px 48px rgba(0,0,0,.4);
  --shadow-lg:0 30px 80px rgba(0,0,0,.6);
}

/* ---------- 01 · BASE + TYPOGRAPHY -------------------------------------- */
body{background:var(--bg);color:var(--text);line-height:var(--lh-body)}
h1,h2,h3,h4{font-family:var(--display);font-weight:var(--w-display);color:var(--text)}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:-.026em}
h2{font-size:var(--fs-h2);line-height:var(--lh-snug);letter-spacing:-.018em}
h3{font-size:var(--fs-h3);font-weight:var(--w-display-strong);letter-spacing:-.008em}
h4{font-weight:var(--w-display-strong)}
.container{max-width:var(--maxw);padding-left:var(--gutter);padding-right:var(--gutter)}
button,input,select,textarea{font-family:var(--font)}
input::placeholder,textarea::placeholder{color:var(--text-3);opacity:1}
.skip{background:var(--primary);color:#fff;z-index:var(--z-skip);border-radius:0 0 var(--r-sm) 0}
.eyebrow,.dash-hero .eyebrow{font-family:var(--font);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--accent-ink);line-height:1.8}
html[data-theme="dark"] .eyebrow{color:var(--accent-ink)}

/* ---------- 02 · BUTTONS, CHIPS, TAGS, FIELDS, FOCUS -------------------- */
.btn{border-radius:var(--r-sm);font-weight:500;box-shadow:none;white-space:nowrap}
.btn:hover{transform:none}                         /* undo: L132 */
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--surface);box-shadow:var(--shadow-xs)}
.btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--surface)}
html[data-theme="dark"] .btn-primary,html[data-theme="dark"] .btn-primary:hover{color:var(--bg)}
.btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--text)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--text-3)}
.btn-dark{background:var(--primary);color:#fff}
.btn .ic{width:15px;height:15px;flex:none}
.chip,.qb-seg button,.tsel-btns button,.sys-chip{border-radius:var(--r-pill);font-weight:500}
.chip.active,.qb-seg button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.tsel-btns button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.sys-chip:hover{transform:none;box-shadow:var(--shadow-xs);border-color:var(--accent)}
.tag{border-radius:var(--r-xs);font-weight:600;font-size:var(--fs-2xs);letter-spacing:.07em;
  background:var(--accent-soft);color:var(--accent-ink);padding:.22em .6em}
.kbd,.cmdk-kbd{border-radius:var(--r-xs)}
.field input,.field select,.field textarea,.toc .field,.gnm-search input,input.field,
.nav-search input,.qb-wrap input[type="text"],.nx-panel input,.nx-panel textarea{
  border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--border-strong);color:var(--text)}
.field input:focus,.field select:focus,.field textarea:focus,.toc input.field:focus,
.gnm-search input:focus,input.field:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r-sm)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,
[role="button"]:focus-visible,.chap-card:focus-visible,.idx-row:focus-visible,
.nplate-t:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r-sm)}

/* ---------- 03 · HEADER / TOPBAR / MEGA --------------------------------- */
header.site{background:color-mix(in srgb,var(--surface) 86%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--border);box-shadow:none;z-index:var(--z-header)}
.topbar{gap:var(--sp-4)}
.topbar .brand{display:flex;flex:0 0 auto;font-family:var(--display);font-size:1.42rem;
  font-weight:var(--w-display);letter-spacing:-.035em;gap:10px}
.hdr-crumb{flex:1 1 0;min-width:0;font-size:var(--fs-sm);white-space:nowrap}
.hdr-crumb a{flex:0 0 auto;overflow:hidden;text-overflow:ellipsis;max-width:24ch}
.hdr-crumb .crumb-cur{flex:0 1 auto;min-width:4ch}
.nav-search,.nav-actions{flex:0 0 auto}
.nav-search.cmdk-trigger{width:222px;margin-left:0;padding-left:34px;background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:none}
.nav-search.cmdk-trigger:hover{border-color:var(--border-strong);background:var(--surface)}
.cmdk-trigger .cmdk-ph{font-family:var(--font);font-style:normal;color:var(--text-3)}
.icon-btn{border-color:transparent;border-radius:var(--r-sm);color:var(--text-2)}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.icon-btn .ic{width:18px;height:18px}
.nav-actions{gap:var(--sp-1);margin-left:var(--sp-2)}
.nav-actions .btn{font-size:var(--fs-xs);padding:.5em .85em}
.nav-actions .btn-primary{background:transparent;color:var(--text-2);border-color:var(--border);box-shadow:none}
.nav-actions .btn-primary:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-strong)}
html[data-theme="dark"] .nav-actions .btn-primary{color:var(--text-2)}
html[data-theme="dark"] .nav-actions .btn-primary:hover{color:var(--text)}
.mega{background:var(--surface)}
.mega a,.navbtn{font-size:var(--fs-sm)}
.flyout,.rail-fly{border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:var(--sp-2);border-color:var(--border)}
.flyout a,.rail-fly a{border-radius:var(--r-sm)}
.flyout a:hover,.rail-fly a:hover{background:var(--accent-soft);color:var(--accent-ink)}
.rail-fly a.active-child{background:var(--accent-soft);color:var(--accent-ink)}

/* ---------- 04 · LEFT RAIL ---------------------------------------------- */
.rail{background:var(--surface);border-right:1px solid var(--border);box-shadow:none;z-index:var(--z-rail)}
.rail-link{height:46px;margin:0 var(--sp-2);padding:0 13px;width:auto;border-radius:var(--r-sm);color:var(--text-3)}
.rail-link:hover{background:var(--surface-2);color:var(--accent-ink)}
.rail-item.active .rail-link{background:var(--surface-2);color:var(--accent-ink)}
.rail-item.active>.rail-link::before{left:-8px;border-radius:0 3px 3px 0}
.rail-ic svg{stroke-width:1.5}
.rail-logo{border-bottom:1px solid var(--border)}
.rail-wm{font-family:var(--display);font-weight:var(--w-display);font-size:1.3rem;letter-spacing:-.03em}
.rail-tip{border-radius:var(--r-sm);font-weight:500}
.rail-pin{border-top:1px solid var(--border)}
.rail-zone span{font-weight:600;letter-spacing:var(--track-caps)}
.rail-fly .fly-h{font-family:var(--display);font-weight:var(--w-display-strong)}

/* ---------- 05 · CARDS / GRID / SECTION --------------------------------- */
.card,.mod-card,.stat,.start-card,.sys-card,.chap-card,
.pg-card,.calc-card,.worked,.sec-railcard,.recent,.fc-mstat,.nx-daily{
  border-radius:var(--r-md);box-shadow:var(--shadow-xs);transition:border-color .16s,box-shadow .16s}
.card.hover:hover,.mod-card:hover,.stat:hover,
.start-card:hover,.sys-card:hover,.chap-card:hover,.pg-card:hover,.calc-card:hover{
  transform:none;box-shadow:var(--shadow-sm);border-color:var(--border-strong)}
.card .body{padding:var(--sp-5);gap:var(--sp-2)}
.card h3{font-size:var(--fs-lg);font-weight:var(--w-display-strong)}
.card p{line-height:1.7;color:var(--text-2)}
.card .meta{font-size:var(--fs-xs);color:var(--text-3)}
.kicker,.card .kicker{font-size:var(--fs-2xs);letter-spacing:var(--track-caps);
  text-transform:uppercase;font-weight:600;color:var(--accent-ink)}
.grid{gap:var(--sp-4)}
.section{padding:var(--sp-7) 0}
.calc-card{border-top-width:2px}
.mod-card.feat{background:linear-gradient(150deg,var(--primary),var(--teal-600));color:#e6efe7}
.mod-card.feat h3{color:#fff}
.mod-card.feat p{color:#cfdfd3}
.mod-card.feat .mod-go{color:#b7d6c1}

/* ---------- 06 · CALLOUTS ----------------------------------------------- */
.callout{border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);margin:var(--sp-5) 0;
  background:var(--surface);border:1px solid var(--border);border-left-width:3px;box-shadow:none}
.callout .ct{font-size:var(--fs-2xs);letter-spacing:var(--track-caps);font-weight:600}
.c-pearl{background:var(--accent-soft);border-left-color:var(--accent)}
.c-guide{background:var(--green-100);border-left-color:var(--green-600)}
.c-study{background:var(--violet-100);border-left-color:var(--violet-600)}
.c-pit{background:var(--amber-100);border-left-color:var(--amber-500)}
.c-pit .ct{color:#7d5f2c}
html[data-theme="dark"] .c-pit .ct{color:var(--amber-500)}
.c-caution{background:var(--red-100);border-left-color:var(--red-600)}
.c-value{background:var(--surface-2);border-left-color:var(--border-strong)}
.qb-exp,.refvals,.tx-note{border-radius:var(--r-md);box-shadow:none}
.note-line{font-size:var(--fs-sm)}
.home-note{line-height:1.75;font-size:var(--fs-xs);margin:var(--sp-7) auto var(--sp-6)}

/* ---------- 07 · TABLES -------------------------------------------------- */
.tbl-wrap{border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);
  box-shadow:var(--shadow-xs);margin:var(--sp-5) 0}
table.data{font-size:var(--fs-sm)}
table.data thead th{background:var(--surface-2);color:var(--text-2);font-size:var(--fs-2xs);
  font-weight:600;letter-spacing:var(--track-caps);padding:11px 14px;
  border-bottom:1px solid var(--border-strong)}
table.data th,table.data td{padding:12px 14px;border-color:var(--border)}
table.data tbody tr:nth-child(even){background:color-mix(in srgb,var(--surface-2) 55%,var(--surface))}
table.data tbody tr:hover{background:color-mix(in srgb,var(--sys,var(--accent)) 12%,var(--surface))} /* undo: L327 */
table.data td.num{padding-right:14px}
table.data td .statbar{background:var(--surface-3);border-color:var(--border);border-radius:var(--r-xs)}
table.data td .statbar>span{border-radius:var(--r-xs)}

/* ---------- 08 · HOME: HERO BAND, NPLATE, STATBAND, INDEX --------------- */
.dash{padding:0 0 var(--sp-6);background:linear-gradient(180deg,var(--band) 0%,
  color-mix(in srgb,var(--band) 45%,var(--bg)) 52%,var(--bg) 100%)}
.dash-hero{grid-template-columns:minmax(0,1.22fr) minmax(300px,.88fr);gap:var(--sp-8);
  padding:var(--sp-7) 0 var(--sp-7);align-items:center}
/* Minimal hero: one weight, one colour, no italic. Leading and tracking opened up
   because 1.02 with -.038em read cramped rather than confident at display size.

   The size is driven by the container, not the viewport. The hero is a two-column
   grid whose ratio shifts across breakpoints, so a vw-based clamp cannot know how
   wide the text column actually is — at some widths the headline overflowed and
   broke "Your Nuclear Medicine" across two lines. "Your Nuclear Medicine" measures
   about 9.34x the font size in Newsreader, so 10.3cqw always leaves it room on one
   line whatever the column is doing. A non-breaking space keeps the discipline name
   together as a final guarantee. */
.dash-hero-txt{container-type:inline-size}
.dash-hero h1{font-size:max(2.1rem,min(3.6rem,10.3cqw));font-weight:var(--w-display);line-height:1.08;
  letter-spacing:-.02em;max-width:22ch;margin:.3em 0 .34em}
.dash-hero h1 em{color:var(--accent-ink);font-weight:var(--w-display)}
.dash-hero p.dh-lead{font-size:var(--fs-lead);line-height:var(--lh-prose);max-width:46ch;
  margin:0 0 var(--sp-6);color:var(--text-2)}
.dash-hero .dh-cta{gap:var(--sp-3)}
.dash-hero .dh-cta .btn{font-size:var(--fs-sm);padding:.85em 1.35em}
.nplate{background:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 82%,#fff);
  border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--shadow-lg)}
html[data-theme="dark"] .nplate{background:#22322d;border-color:#32463f}
.nplate-h{color:#c6d4c8;font-size:var(--fs-2xs);letter-spacing:var(--track-caps);margin:0 0 var(--sp-4);gap:var(--sp-3)}
.nplate-h a{color:#e5ebdd;font-size:var(--fs-2xs);font-weight:600}
.nplate-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:54px;gap:var(--sp-1)}
.nplate-t{aspect-ratio:auto;min-width:0;border-radius:var(--r-sm);background:#f4f6ef;border-color:#f4f6ef}
.nplate-t .s{font-family:var(--display);font-size:1.18rem;font-weight:var(--w-display);color:#22382c}
.nplate-t .s sup{font-size:.62rem}
/* The plate panel already flips (L2202) but its tiles did not, so in dark mode the
   flipped emission inks landed on a still-light tile. Flip the tiles with it. */
html[data-theme="dark"] .nplate-t{background:#1b2723;border-color:#1b2723}
html[data-theme="dark"] .nplate-t .s{color:#e7ece5}
.nplate-t i{width:5px;height:5px;top:7px;right:7px}
/* Legend + detail panel. The plate paints its own dark ground (--primary, or
   #22322d in dark) rather than a surface token, so everything here needs an
   explicit colour for BOTH themes — inheriting --text would be invisible on it.
   The two grounds are close enough in luminance that one set of inks clears AA
   on both; the dark block below only adjusts where it genuinely differs. */
.nplate-legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin:12px 2px 0;
  font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:#c6d4c8}
.nplate-legend span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.nplate-legend b{width:6px;height:6px;border-radius:50%;background:var(--lc);display:inline-block}
.nplate-detail{margin-top:12px;padding-top:12px;border-top:1px solid color-mix(in srgb,#c6d4c8 28%,transparent)}
.npd-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
.npd-name{font-family:var(--display);font-size:1.02rem;font-weight:var(--w-display);color:#f1f5ea}
.npd-name sup{font-size:.62em}
.npd-fam{display:inline-flex;align-items:center;gap:5px;font-size:.64rem;letter-spacing:.07em;
  text-transform:uppercase;color:#c6d4c8;white-space:nowrap}
.npd-fam b{width:6px;height:6px;border-radius:50%;background:var(--d);display:inline-block}
/* Two pairs per line. Four stacked rows cost 85px in a panel that sits in the
   hero; paired they cost half that and the four facts read as one block. */
.npd-rows{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);
  gap:3px 10px;margin:0;font-size:.74rem;align-items:baseline}
.npd-rows dt{color:#a9bdae;letter-spacing:.04em}
.npd-rows dd{margin:0;color:#e9efe1;font-variant-numeric:tabular-nums}
/* Clamped to two lines AND reserving two, so a one-line entry does not shrink
   the panel and shift everything below it. */
.npd-use{margin:8px 0 0;font-size:.72rem;line-height:1.45;color:#c6d4c8;min-height:2.9em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.npd-go{display:inline-block;margin-top:9px;font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;color:#e5ebdd;cursor:pointer}
.npd-go:hover{text-decoration:underline}
html[data-theme="dark"] .nplate-legend,html[data-theme="dark"] .npd-fam,
html[data-theme="dark"] .npd-use{color:#b7c8bc}
html[data-theme="dark"] .npd-rows dt{color:#9fb3a5}
html[data-theme="dark"] .npd-name{color:#eef3e8}
html[data-theme="dark"] .npd-rows dd{color:#e7ece5}
html[data-theme="dark"] .npd-go{color:#dbe5d3}
/* One pair per line below 520px: paired columns are only ~120px wide there, so a
   longer emission string wrapped and the panel changed height by 18px depending
   on which nuclide you picked. */
@media(max-width:520px){.nplate-legend{font-size:.58rem;gap:3px 9px}
  .npd-rows{font-size:.72rem;grid-template-columns:auto minmax(0,1fr)}}
.nplate-t::after{border-radius:var(--r-sm)}
.nplate-t:hover{transform:translateY(-2px);background:#fff;border-color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.22)}
.dash-sec{margin-top:0}
.statband{display:grid;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:var(--shadow-xs);margin:var(--sp-6) 0 var(--sp-2);overflow:hidden}
.sb{padding:var(--sp-5);display:flex;align-items:baseline;gap:var(--sp-3);
  border-left:1px solid var(--border);border-top:0;border-bottom:0}
.sb:first-child{border-left:0;padding-left:var(--sp-5)}
.sb b{font-family:var(--display);font-size:2.1rem;font-weight:var(--w-display);letter-spacing:-.035em;line-height:1}
.sb span{font-size:var(--fs-2xs);letter-spacing:var(--track-caps);color:var(--text-3);margin-top:0}
.idx-head{margin:var(--sp-7) 0 var(--sp-4);gap:var(--sp-4)}
.idx-head h2{font-size:var(--fs-h2);letter-spacing:-.025em}
.idx-head span{font-size:var(--fs-2xs);letter-spacing:var(--track-caps)}
.idx-row{grid-template-columns:36px minmax(0,1fr) 24px;gap:var(--sp-4);align-items:start;
  padding:var(--sp-5) var(--sp-3);border-top:1px solid var(--border);border-radius:var(--r-md)}
.idx-row:hover{background:var(--surface);box-shadow:var(--shadow-sm)}
.idx-no{font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent);padding-top:5px}
.idx-nm{font-size:1.3rem;line-height:1.3;font-weight:var(--w-display)}
.idx-ds{font-size:var(--fs-sm);line-height:1.65;color:var(--text-2);max-width:68ch}
.idx-go{font-size:1.05rem;color:var(--text-3);padding-top:4px;transition:transform .16s,color .16s}
.idx-row:hover .idx-go{transform:translateX(4px);color:var(--accent)}

/* ---------- 09 · SECTION OPENER / CHERO / SNAP / KEYNUMS / ACCORDION ---- */
.sec-hero{padding:var(--sp-5) 0 var(--sp-6);margin:0;border-bottom:1px solid var(--border);gap:var(--sp-5)}
.sec-mono{border-radius:var(--r-lg);background:var(--band);border-color:transparent;box-shadow:none}
.sec-mono svg{color:var(--accent)}
.sec-h1{font-size:var(--fs-h1);font-weight:var(--w-display);line-height:1.06}
.sec-lead{font-size:var(--fs-lead);line-height:var(--lh-prose);color:var(--text-2)}
.sec-section-label>span:first-child{font-family:var(--display);font-size:var(--fs-lg)}
.sec-count{font-size:var(--fs-2xs);letter-spacing:var(--track-caps)}
.sec-railcard{background:var(--surface);border:1px solid var(--border);padding:var(--sp-4) var(--sp-5)}
.sec-railcard h4{font-size:var(--fs-2xs);letter-spacing:var(--track-caps);font-family:var(--font);font-weight:600}
.chero{padding:var(--sp-6) var(--gutter) var(--sp-5);border-bottom:1px solid var(--border);
  background:linear-gradient(170deg,color-mix(in srgb,var(--sys,var(--accent)) 10%,var(--band)),var(--bg) 82%)}
.chero h1{font-size:var(--fs-h1);font-weight:var(--w-display)}
.chero .ci{opacity:.13;color:var(--sys,var(--accent))}
html[data-theme="dark"] .chero .ci{opacity:.17}
.snap{background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--sys,var(--accent));border-radius:var(--r-md);
  padding:var(--sp-5);margin:var(--sp-5) 0 var(--sp-3);box-shadow:var(--shadow-xs)}
.snap .lbl{font-size:var(--fs-2xs);letter-spacing:var(--track-caps);font-weight:600}
.snap p{font-size:1.12rem;line-height:1.58}
.keynums{display:flex;gap:var(--sp-3);border:0;margin:var(--sp-4) 0 var(--sp-5);flex-wrap:wrap}
.keynum{background:var(--surface-2);border:0;border-right:0;border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);margin:0;min-width:150px;flex:1 1 150px}
.keynum b{font-family:var(--display);font-size:1.35rem;font-weight:var(--w-display);
  color:var(--sys-ink,var(--accent-ink));line-height:1.25}
.keynum span{font-size:var(--fs-xs);color:var(--text-3)}
.tsel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--sp-5);box-shadow:var(--shadow-xs)}
.tsel-rec .rc{border-radius:var(--r-sm);background:var(--surface-2)}
details.acc{border-radius:var(--r-md);box-shadow:var(--shadow-xs);margin:var(--sp-3) 0}
details.acc>summary{padding:var(--sp-4) var(--sp-5);font-weight:var(--w-display-strong);font-size:1rem}
details.acc>summary::after{content:"";width:8px;height:8px;flex:none;margin-left:var(--sp-3);
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s var(--ease);color:var(--sys-ink,var(--accent-ink))}
details.acc[open]>summary::after{content:"";transform:rotate(-135deg) translate(-2px,-2px)}
#app details.acc>summary::after{color:var(--sys-ink,var(--accent-ink))}
details.acc[open]>summary{background:var(--surface-2);border-bottom:1px solid var(--border)}
details.acc .acc-body{padding:var(--sp-4) var(--sp-5) var(--sp-2)}
.chap-deck h2.chap-h{font-size:var(--fs-2xs);letter-spacing:var(--track-caps);font-weight:600}
.chap-grid{margin-top:var(--sp-4)}
.chap-card{padding:var(--sp-4) var(--sp-4)}
.chap-grid .chap-card h4{font-size:1.22rem;font-family:var(--display);font-weight:var(--w-display)}
.chap-grid .chap-card p{font-size:var(--fs-sm);line-height:1.7;color:var(--text-2)}
.chap-grid .chap-card .more{font-size:var(--fs-xs)}

/* ---------- 10 · ARTICLE ------------------------------------------------- */
.breadcrumb{font-size:var(--fs-xs);color:var(--text-3);padding:var(--sp-5) 0 var(--sp-3);line-height:1.7}
.article-wrap{gap:var(--sp-6);padding:var(--sp-5) 0 var(--sp-6)}
.prose{min-width:0;max-width:70ch}
.container>.prose:only-child{margin-left:auto;margin-right:auto}
.prose h1{font-size:var(--fs-h1);font-weight:var(--w-display);line-height:1.1;margin:.28em 0 .45em}
.prose h2{font-size:var(--fs-h2);font-weight:var(--w-display);padding-top:var(--sp-4);
  margin-top:var(--sp-7);border-top:1px solid var(--border)}
.prose h3{font-size:var(--fs-h3);font-weight:var(--w-display-strong)}
.prose>p,.prose>ul li,.prose>ol li,.prose>blockquote,.prose .subh,.prose .faq-a,.prose dd{
  font-size:var(--fs-prose);line-height:var(--lh-prose)}
.prose.fullart p,.prose.fullart>ul li,.prose.fullart>ol li{font-size:var(--fs-prose);line-height:var(--lh-prose)}
.prose .refs,ol.refs{font-size:var(--fs-sm);color:var(--text-2);line-height:1.7}
.refs-pending{font-size:var(--fs-sm);font-style:italic;color:var(--text-3)}
.toc{border-right:1px solid var(--border);padding-right:var(--sp-4);
  scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.toc h4{font-family:var(--font);font-size:var(--fs-2xs);letter-spacing:var(--track-caps);
  text-transform:uppercase;font-weight:600;color:var(--text-3)}
.toc a{font-size:var(--fs-xs);line-height:1.5;padding:6px 10px;border-left:2px solid transparent;
  border-radius:0 var(--r-sm) var(--r-sm) 0}
.toc a:hover{background:var(--surface-2);border-left-color:var(--border-strong);color:var(--text)}
.toc a.active{background:var(--accent-soft);border-left-color:var(--accent);color:var(--accent-ink)}
.article-aside .card{box-shadow:none;border-top:1px solid var(--border);border-radius:0}
.article-aside .card:hover{box-shadow:none;border-color:var(--border)}
.byline{padding:var(--sp-4) 0;margin:var(--sp-4) 0 var(--sp-2);gap:var(--sp-3) var(--sp-5);
  border-color:var(--border);font-size:var(--fs-sm)}
.byline b{font-size:var(--fs-2xs);letter-spacing:var(--track-caps)}
.pagenav{margin:var(--sp-6) 0;padding-top:var(--sp-5)}
.pagenav a{border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);border-color:var(--border)}
.pagenav a:hover{background:var(--surface-2);border-color:var(--border-strong)}
.pagenav small{font-size:var(--fs-xs);letter-spacing:.04em;color:var(--text-3)}

/* ---------- 11 · QUESTION BANK / FLASHCARDS ----------------------------- */
.qb-wrap{max-width:880px}
.qb-bar{top:calc(var(--nav-h) + var(--sp-2));z-index:var(--z-sticky);border-radius:var(--r-md);
  padding:var(--sp-2) var(--sp-4);box-shadow:var(--shadow-sm);
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sys-card{border-radius:var(--r-md);border-left-width:3px;padding:var(--sp-4) var(--sp-5)}
.sys-card h3{font-size:var(--fs-lg)}
.sys-card.all{background:linear-gradient(150deg,var(--primary),var(--teal-600));border-left-color:var(--cyan-400)}
.sys-card.all h3{color:#fff}
.sys-card.all span{color:#cbdfd2}
html[data-theme="dark"] .sys-card.all{background:linear-gradient(150deg,#25352e,#3c5e50)}
.aq-q,.qb-q{font-family:var(--display);font-size:1.15rem;font-weight:var(--w-display);line-height:1.5}
.opt{border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);
  margin:var(--sp-2) 0;background:var(--surface);transition:border-color .14s,background .14s,box-shadow .14s}
.opt:hover{border-color:var(--accent);background:var(--accent-soft)}
.opt.sel{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent-soft)}
.opt.correct{background:var(--green-100);border-color:var(--green-600);box-shadow:none}
.opt.wrong{background:var(--red-100);border-color:var(--red-600);box-shadow:none}
.opt .exp{border-top:1px dashed var(--border);margin-top:var(--sp-2);padding-top:var(--sp-2);font-size:var(--fs-sm)}
.qb-exp{border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);background:var(--surface-2)}
.qb-timer{font-weight:600}
.progress{height:6px;background:var(--surface-3)}
.progress>i{background:var(--accent)}
.fc-card,.flashcard .face{border-radius:var(--r-lg);box-shadow:var(--shadow-md);border-color:var(--border)}
.flashcard .back{background:var(--accent-soft)}
.fc-grades button{border-radius:var(--r-sm);font-weight:600}
.fc-mstat b{font-weight:var(--w-display)}
.fc-decks button.on .fc-badge{background:var(--accent);color:#fff}

/* ---------- 12 · OVERLAYS: CMDK, MODAL, DOCK, TOAST --------------------- */
.cmdk,.modal,.nx-ovl{background:rgba(18,30,26,.5);z-index:var(--z-overlay)}
.cmdk-box,.modal .box,.modal-card,.nx-panel{border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  border-color:var(--border);background:var(--surface)}
.cmdk-item,.cmdk-list a{border-radius:var(--r-sm)}
.nx-dock{border-radius:var(--r-md);box-shadow:var(--shadow-md);z-index:var(--z-dock);right:10px}
.nx-dock button{color:var(--text-2);border-radius:var(--r-sm)}
.nx-dock button:hover{background:var(--surface-2);color:var(--text)}
.nx-toast{border-radius:var(--r-md);z-index:var(--z-toast)}
.nx-x .ic,.brx-dx .ic,.modal .mhead .ic{width:16px;height:16px}
.mnav-extra .si .ic{width:15px;height:15px;vertical-align:-2px}
.nx-daily{border-radius:var(--r-md);box-shadow:none}
.readbar{background:var(--accent)}

/* ---------- 13 · FOOTER -------------------------------------------------- */
footer.site{background:var(--primary);color:#cfdad1;border-top:0;margin-top:var(--sp-9);
  padding-top:var(--sp-7)}
html[data-theme="dark"] footer.site{background:#101917}
footer.site a,footer.site .brand{color:#e3eade}
footer.site a:hover{color:#fff}
.colo-tag{color:#c4d3c7}
.colo-links a{color:#b8c8bb}
.colo-bottom,.legal{color:#a5b7a9;border-color:rgba(255,255,255,.12)}
footer.site .brand{font-family:var(--display);font-weight:var(--w-display)}

/* ---------- 14 · MOTION -------------------------------------------------- */
.reveal:not(.opt){transform:translateY(6px);transition-duration:.35s}
#app.route-in{animation-duration:.22s}

/* ---------- 15 · BREAKPOINTS -------------------------------------------- */
@media(min-width:641px){
  /* the rail already carries the mark; the topbar keeps the wordmark only */
  .topbar .brand .mark{display:none}
}
@media(min-width:1000px){
  .dash-sec>.idx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-7)}
  .dash-sec>.idx .idx-row{align-items:start}
}
@media(min-width:901px){
  .chero{margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);
    border-radius:var(--r-lg) var(--r-lg) 0 0}
}
@media(min-width:1101px){
  .article-wrap{grid-template-columns:220px minmax(0,1fr) 200px;gap:var(--sp-6)}
}
@media(max-width:1100px){
  .article-wrap{grid-template-columns:1fr;gap:var(--sp-5)}
  .toc,.article-aside{position:static;max-height:none}
  .toc{order:-1;border:1px solid var(--border);border-right:1px solid var(--border);
    border-radius:var(--r-md);padding:var(--sp-3)}
  .toc #toclist{max-height:150px;overflow-y:auto}
  .nav-search.cmdk-trigger{width:180px}
  .dash-hero{gap:var(--sp-6);grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr)}
}
@media(max-width:900px){
  .menu-toggle{display:grid}
  .nav-search{display:none}
  .nav-actions{margin-left:auto}
  .nav-actions .btn{display:none}
  .hdr-crumb{display:none}
  .topbar{gap:var(--sp-3)}
  .mega{display:grid;grid-template-rows:0fr;border-top:0;
    transition:grid-template-rows .28s var(--ease)}
  .mega>.container{overflow:hidden;min-height:0}
  header.site.nav-open .mega{display:grid;grid-template-rows:1fr;border-top:1px solid var(--border)}
  header.site.nav-open::after{content:"";position:fixed;inset:var(--nav-h) 0 0 0;
    background:rgba(18,30,26,.38);z-index:-1;pointer-events:none}
  header.site.nav-open #megarow{flex-direction:column;align-items:stretch;gap:0;padding:var(--sp-1) 0}
  #megarow>.navitem>.navbtn{min-height:48px;font-size:.98rem;border-bottom:1px solid var(--border)}
  header.site.nav-open .mnav-extra{display:flex;flex-direction:column;padding:var(--sp-1) 0}
  .dash-hero{grid-template-columns:1fr;gap:var(--sp-6);padding:var(--sp-5) 0 var(--sp-6)}
  .dash-hero h1{max-width:19ch}
  .dash-hero p.dh-lead{max-width:62ch}
  .nplate{max-width:560px;width:100%}
  .nplate-grid{grid-auto-rows:58px}
  .sec-grid{grid-template-columns:1fr}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .chero{padding-left:0;padding-right:0}
}
@media(max-width:640px){
  .topbar .brand{font-size:1.24rem}
  .topbar .brand .mark{width:26px;height:26px}
  .nav-actions{gap:var(--sp-1)}
  .dash{padding-bottom:var(--sp-5)}
  .dash-hero{padding-top:var(--sp-3);gap:var(--sp-5)}
  .dash-hero h1{max-width:16ch;line-height:1.06}
  .nplate{padding:var(--sp-4)}
  .nplate-grid{grid-auto-rows:54px}
  .statband{grid-template-columns:1fr 1fr}
  .sb{padding:var(--sp-4);gap:var(--sp-2)}
  .sb b{font-size:1.75rem}
  .sb:nth-child(3),.sb:nth-child(4){border-top:1px solid var(--border)}
  .sb:nth-child(3){border-left:0}
  .idx-head{align-items:flex-start;flex-direction:column;gap:2px;margin-top:var(--sp-6)}
  .idx-row{grid-template-columns:26px minmax(0,1fr) 18px;gap:var(--sp-3);padding:var(--sp-4) 0}
  .idx-nm{font-size:1.2rem}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .callout,.snap{padding:var(--sp-4)}
  .card .body{padding:var(--sp-4)}
  .keynum{min-width:0;flex:1 1 120px}
  .nx-dock{bottom:10px}
  footer.site{padding-bottom:80px}
}
@media (prefers-reduced-motion:reduce){
  .mega,.reveal,.reveal.seen,.card,.idx-row,.idx-row .idx-go,.nplate-t,.nplate-t:hover,
  .card.hover:hover,details.acc>summary::after{transition:none;transform:none}
}

/* ---------- 16 · PRINT --------------------------------------------------- */
@media print{
  .rail,.mega,.nx-dock,.readbar,.cmdk,.hdr-crumb,.nav-search{display:none!important}
  main,header.site,footer.site{margin-left:0!important}
  body{background:#fff;color:#000}
  .dash,.chero,.sec-hero{background:none!important}
  .callout,.snap,.card,.tbl-wrap,details.acc{box-shadow:none!important}
}
