/* Handbook 10k — bespoke design system.
   Doctrine: research/UIUX-BRAIN.md §1. Calm, premium, honesty-by-design.
   Healthcare anti-patterns avoided: no neon, no dark-default dread, no AI gradient,
   no harsh motion. Functional meaning = icon + text, never color alone. WCAG AA. */

/* ---- tokens ---------------------------------------------------------- */
:root {
  /* Beccasue brand — warm champagne / cream / copper (the swan palette). Calm-luxe, AA-verified. */
  --paper: #f7f1e6;        /* Cream */
  --paper-2: #ece3d2;      /* Oatmeal */
  --surface: #fffdf8;      /* warm white */
  --surface-glass: rgba(255, 253, 248, 0.74);
  --ink: #2b2017;          /* warm near-black — ~14:1 on cream */
  --ink-soft: #574737;     /* secondary warm mocha — ~7:1 */
  --ink-faint: #6a5945;    /* tertiary warm taupe — AA: 5.97 paper, 5.27 oatmeal, 6.6 surface */
  --line: #e6dac4;
  --line-strong: #d6c6a8;

  /* brand tokens (decorative + readable) */
  --champagne: #c8a96a;    /* Champagne Gold — decorative engraving only (too light for text) */
  --gold: #c8a96a;
  --copper: #985f33;       /* Rich Copper — readable accent */
  --terracotta: #b5613f;   /* Warm Terracotta */
  --amber: #e0a23f;        /* Soft Amber / Saffron */
  --mocha: #6b4f3a;        /* Warm Mocha */
  --oatmeal: #ece3d2;

  /* functional accents — kept distinct + AA, paired with icon+text */
  --accent: #985f33;       /* copper — primary action / links (readable on cream) */
  --accent-soft: #f7f0e4;  /* lightened so copper Tier-A text passes AA on it */
  --safe: #43692f;         /* warm olive-green — safe range / NED; 5.4 on safe-soft */
  --safe-soft: #e9efda;
  --caution: #8a5a12;      /* deep amber — attention, not alarm */
  --caution-soft: #f6ecd6;
  --warning: #a23b2e;      /* restrained clay — TRUE warnings only */
  --warning-soft: #f6e3dd;
  --info: #6b4f3a;         /* warm mocha — neutral info */
  --info-soft: #efe7d8;

  /* tier accents (distinct hues; always paired w/ label) */
  --tier-s: #7d4a72;       /* plum — premium, distinct */
  --tier-a: #985f33;       /* copper */
  --tier-b: #8a5a12;       /* ochre */
  --tier-c: #6f6250;       /* taupe */

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-1: 0 1px 2px rgba(67,46,20,.06), 0 1px 3px rgba(67,46,20,.05);
  --shadow-2: 0 6px 20px -6px rgba(67,46,20,.16), 0 2px 6px rgba(67,46,20,.07);
  --shadow-glass: 0 12px 40px -12px rgba(67,46,20,.24);
  --grid: rgba(120,90,45,.045);  /* infinite-grid line tint */

  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --maxw: 1180px;
  --t: 200ms cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* infinite-grid 10k feel: fixed texture as a pseudo-element (no scroll repaints; works on iOS) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px 46px),
    radial-gradient(1100px 620px at 72% -12%, rgba(200,169,106,.10), transparent 62%),
    radial-gradient(900px 700px at -10% 110%, rgba(152,95,51,.06), transparent 60%);
}

h1,h2,h3,h4 { font-family: var(--font-serif); font-weight: 560; line-height: 1.18; letter-spacing: -.01em; color: var(--ink); margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.28rem; }
p { margin: 0 0 1rem; max-width: 72ch; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* remove the 300ms tap delay on interactive elements (keeps pinch-zoom) */
a, button, summary, input, label, .gloss, .hz-point, .fm-node, .brain-chip { touch-action: manipulation; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.skip-link { position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:.6rem 1rem; z-index:100; border-radius:0 0 8px 0; }
.skip-link:focus { left:0; }

/* ---- header / nav ---------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface-glass);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display:flex; align-items:center; gap:.8rem 1.1rem; min-height:64px; flex-wrap:wrap; padding:.5rem 0; }
.search { flex:1 1 150px; max-width:320px; }
.brand { display:flex; align-items:center; gap:.7rem; font-family:var(--font-serif); font-size:1.18rem; font-weight:600; color:var(--ink); }
.brand svg { width:28px; height:28px; flex:0 0 auto; }
.brand-logo { width:40px; height:40px; flex:0 0 auto; border-radius:10px; box-shadow:var(--shadow-1); }
.brand small { font-family:var(--font-sans); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); display:block; }
.nav-axis { margin-left:auto; display:flex; gap:.3rem; }
.nav-axis a { padding:.5rem .7rem; border-radius:999px; color:var(--ink-soft); font-size:.92rem; font-weight:500; min-height:44px; display:inline-flex; align-items:center; transition:background var(--t), color var(--t); }
.nav-axis a:hover { background:var(--paper-2); text-decoration:none; }
.nav-axis a.active { background:var(--accent); color:#fff; }
.search { display:flex; align-items:center; gap:.5rem; background:var(--surface); border:1px solid var(--line-strong); border-radius:999px; padding:.35rem .8rem; min-width:150px; }
.search input { border:0; background:transparent; font:inherit; color:var(--ink); width:100%; outline:none; text-overflow:ellipsis; }
.q-clear { border:0; background:transparent; color:var(--ink-faint); font-size:.95rem; line-height:1; cursor:pointer; padding:.25rem; min-width:24px; min-height:24px; border-radius:50%; }
.q-clear:hover { color:var(--accent); }
.search svg { width:16px; height:16px; color:var(--ink-faint); }

/* ---- hero ------------------------------------------------------------ */
.hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 1.5rem; }
.hero-crest { display:block; width:clamp(78px,11vw,108px); height:auto; margin:0 0 1.15rem; filter:drop-shadow(0 6px 18px rgba(67,46,20,.22)); }
/* elite raster crest variant (rotating illuminated seal) — read as an intentional tile, not a sticker */
.hero-crest-elite { width:clamp(104px,14vw,140px); border-radius:14px; filter:none; box-shadow:0 10px 28px rgba(67,46,20,.22); outline:1px solid rgba(201,162,74,.32); outline-offset:-1px; }
.lab-hero .hero-crest { width:clamp(72px,10vw,98px); }
/* shared ornamental section divider (the Courage rose/gold flourish) — drop <div class="brand-rule"></div> between sections */
.brand-rule { width:min(300px,58%); height:28px; margin:clamp(2.1rem,5vw,3.4rem) auto; background:url(../brand/divider.svg) center/contain no-repeat; opacity:.78; }
.brand-rule.tight { margin:clamp(1.4rem,3.5vw,2.2rem) auto; }
.hero .eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:1rem; }
.hero-kicker { font-family:var(--font-sans); font-size:.92rem; font-weight:500; letter-spacing:.02em; text-transform:none; color:var(--ink-soft); margin:0 0 1rem; max-width:36ch; line-height:1.45; }
.eyebrow a { display:inline-flex; align-items:center; min-height:24px; }
.me-read { display:inline-flex; align-items:center; min-height:24px; }
.source a { display:inline-flex; align-items:center; min-height:24px; }
.hero p.lede { font-size:1.18rem; color:var(--ink-soft); max-width:62ch; }
.hero-cta { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem 1rem; margin-top:1.6rem; }
.hero-cta-note { font-size:.9rem; color:var(--ink-faint); max-width:46ch; line-height:1.45; }
/* Hero aside — the quiet, findable line for the discharged reader (The Radical's map). Present, not loud. */
.hero p.lede-aside { margin-top:.85rem; font-size:1rem; line-height:1.55; color:var(--ink-faint); max-width:60ch; padding-left:.95rem; border-left:2px solid color-mix(in srgb, var(--tier-s) 42%, transparent); }
.brand-headline { font-size:clamp(2.4rem,6vw,4.2rem); line-height:1.05; letter-spacing:-.015em; color:var(--mocha); background:linear-gradient(100deg, var(--copper), var(--terracotta) 55%, var(--mocha)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
@supports not (-webkit-background-clip: text){ .brand-headline { color:var(--copper); -webkit-text-fill-color:currentColor; } }
.corpus-stat { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.75rem; margin-top:1.75rem; max-width:36rem; }
.corpus-stat .stat { background:var(--surface-glass); border:1px solid var(--line); border-radius:var(--radius); padding:.85rem 1rem; box-shadow:var(--shadow-1); text-align:center; }
.corpus-stat .stat b { font-family:var(--font-serif); font-size:clamp(1.35rem, 3.5vw, 1.65rem); display:block; line-height:1.1; color:var(--mocha); }
.corpus-stat .stat span { display:block; margin-top:.35rem; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; }

/* ---- cards / grids --------------------------------------------------- */
.grid { display:grid; gap:1.1rem; }
.grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.grid.cols-4 { grid-template-columns:repeat(4,1fr); }

.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.25rem 1.3rem; box-shadow:var(--shadow-1);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
  display:flex; flex-direction:column; gap:.55rem;
}
a.card:hover, button.card:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:var(--line-strong); text-decoration:none; }
.card h3 { margin:0; font-size:1.12rem; }
.card .meta { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-top:auto; }
.card .desc { color:var(--ink-soft); font-size:.93rem; }
.card .kicker { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; }

.section-card { position:relative; overflow:hidden; }
.section-card .icon { width:42px; height:42px; color:var(--accent); }
.section-card .count { position:absolute; top:1.1rem; right:1.2rem; font-family:var(--font-serif); font-size:1.5rem; color:var(--line-strong); }

/* ---- badges (tier + maturity) — shape + label, never color alone ----- */
.badge { display:inline-flex; align-items:center; gap:.35rem; font-size:.74rem; font-weight:600; padding:.2rem .55rem; border-radius:999px; border:1px solid; white-space:nowrap; line-height:1.4; }
.badge .sym { font-size:.9em; }
a.badge { min-height:30px; padding-block:.32rem; } /* tappable: AA target, ≥8px apart via gap */
.badge-tier-S { color:var(--tier-s); border-color:var(--tier-s); background:#f3e7f0; }
.badge-tier-A { color:var(--tier-a); border-color:var(--tier-a); background:var(--accent-soft); }
.badge-tier-B { color:var(--tier-b); border-color:var(--tier-b); background:var(--caution-soft); }
.badge-tier-C { color:var(--tier-c); border-color:var(--tier-c); background:var(--paper-2); }
.badge-mat { color:var(--ink-soft); border-color:var(--line-strong); background:var(--surface); }
.badge-mat[data-m="crystallized"]{ color:var(--safe); border-color:var(--safe); background:var(--safe-soft); }
.badge-mat[data-m="corroborated"]{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.badge-mat[data-m="contested"]{ color:var(--warning); border-color:var(--warning); background:var(--warning-soft); }

/* ---- thesis detail --------------------------------------------------- */
.thesis-head { border-bottom:1px solid var(--line); padding-bottom:1.25rem; margin-bottom:1.5rem; }
.thesis-q { font-size:1.05rem; color:var(--ink-soft); font-style:italic; border-left:3px solid var(--accent); padding-left:1rem; margin:1rem 0; }
.prose { max-width:74ch; overflow-wrap:anywhere; word-break:break-word; }
.prose a { overflow-wrap:anywhere; }
.prose img, .prose pre { max-width:100%; }
.prose h2 { font-size:1.45rem; margin-top:1.8rem; }
.prose h3 { font-size:1.15rem; margin-top:1.4rem; }
.prose ul, .prose ol { padding-left:1.3rem; }
.prose li { margin:.3rem 0; }
.prose table { border-collapse:collapse; width:100%; font-size:.9rem; margin:1rem 0; display:block; overflow-x:auto; }
.prose th, .prose td { border:1px solid var(--line); padding:.5rem .7rem; text-align:left; vertical-align:top; }
.prose th { background:var(--paper-2); font-weight:600; }
.prose code { background:var(--paper-2); padding:.1rem .35rem; border-radius:4px; font-size:.88em; }
.prose blockquote { border-left:3px solid var(--line-strong); margin:1rem 0; padding:.3rem 1rem; color:var(--ink-soft); }

.sources { margin-top:2rem; border-top:1px solid var(--line); padding-top:1.25rem; }
.source { display:flex; gap:.7rem; padding:.7rem 0; border-bottom:1px solid var(--line); font-size:.9rem; overflow-wrap:anywhere; }
.source .sid { font-weight:700; color:var(--ink-faint); flex:0 0 auto; }
.source > div { min-width:0; }
/* inline [Sx] citation markers — jump to the matching Sources entry below */
.cite-ref { color:var(--accent); font-weight:600; cursor:pointer; white-space:nowrap; text-decoration:none; }
.cite-ref:hover { text-decoration:underline; text-underline-offset:2px; }
.source { scroll-margin-top:5.5rem; border-radius:6px; padding-left:.4rem; margin-left:-.4rem; }
.source:focus { outline:none; }
.source.src-flash { animation:srcflash 1.7s ease-out; }
@keyframes srcflash { 0%,18% { background:var(--accent-soft); } 100% { background:transparent; } }
@media (prefers-reduced-motion:reduce){ .source.src-flash { animation:none; } }

/* ---- glossary tooltip ------------------------------------------------ */
.gloss { border-bottom:1.5px dotted var(--accent); cursor:help; color:inherit; position:relative; }
.gloss-pop {
  position:absolute; z-index:60; max-width:280px; background:var(--ink); color:#fff;
  padding:.6rem .8rem; border-radius:8px; font-size:.82rem; line-height:1.45; box-shadow:var(--shadow-2);
  opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity var(--t), transform var(--t);
}
.gloss-pop.show { opacity:1; visibility:visible; transform:translateY(0); }

/* ---- icon-array (X in 100 risk communication) ------------------------ */
.icon-array { display:grid; grid-template-columns:repeat(10, 1fr); gap:3px; max-width:240px; }
.icon-array .dot { aspect-ratio:1; border-radius:50%; background:var(--line-strong); }
.icon-array .dot.on { background:var(--caution); }
.icon-array .dot.on.safe { background:var(--safe); }
.risk-figure { display:flex; gap:1.25rem; align-items:center; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.25rem; box-shadow:var(--shadow-1); }
.risk-figure .num { font-family:var(--font-serif); font-size:2.2rem; line-height:1; }

/* ---- M-question cards (flip) ----------------------------------------- */
.qcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-1); padding:1.2rem; }
.qcard .qid { font-size:.72rem; font-weight:700; letter-spacing:.1em; color:var(--accent); }
.qcard .qtext { font-family:var(--font-serif); font-size:1.05rem; margin:.4rem 0 .6rem; }
.qcard .answer { display:block; margin-top:.7rem; padding:.7rem .85rem; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); transition:border-color var(--t), background var(--t); }
a.answer:hover { background:var(--accent-soft); border-color:var(--accent); text-decoration:none; }
.qcard .answer .alabel { font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; }
.qcard .answer .atitle { display:block; color:var(--ink); font-weight:500; margin:.2rem 0 .4rem; font-size:.95rem; line-height:1.4; }
.qcard .more-leads { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }

/* ---- feature: exercise dose dial (chart-by-data) --------------------- */
.dose-panel { background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--safe); border-radius:var(--radius); padding:1.25rem 1.4rem; box-shadow:var(--shadow-1); margin:1.25rem 0 1.75rem; }
.dose-panel h3 { margin:0 0 .2rem; }
.dose-panel .dose-cap { font-size:.9rem; color:var(--ink-soft); margin:.1rem 0 1rem; }
.dose-panel svg.dial { width:100%; height:auto; max-width:560px; display:block; }
.dose-panel .dose-cap .src { color:var(--ink-faint); font-size:.82rem; }
.dose-strength { display:inline-flex; align-items:center; gap:.45rem; margin-top:.9rem; font-size:.9rem; font-weight:500; color:var(--ink); background:var(--safe-soft); border:1px solid var(--safe); border-radius:999px; padding:.35rem .8rem; }
.dose-strength svg { width:17px; height:17px; color:var(--safe); }
.dose-caveat { display:flex; gap:.6rem; margin-top:1rem; font-size:.86rem; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:.85rem; }
.dose-caveat svg { width:18px; height:18px; color:var(--caution); flex:0 0 auto; margin-top:1px; }

/* ---- flagship: late-recurrence hazard + proven-levers ---------------- */
.hazard-panel { background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--tier-s); border-radius:var(--radius); padding:1.25rem 1.4rem; box-shadow:var(--shadow-2); margin:1.25rem 0 1.75rem; }
.hazard-panel h3 { margin:0 0 .2rem; }
.hazard-panel .hz-sub { font-size:.9rem; color:var(--ink-soft); margin:.1rem 0 1rem; }
.hazard-panel svg.hz { width:100%; height:auto; max-width:620px; display:block; }
.hz-point { cursor:pointer; transition:r var(--t); }
.hz-point:hover, .hz-point:focus-visible { outline:none; }
.hz-point:hover circle.pt, .hz-point:focus-visible circle.pt { r:7; }
.hz-point:focus-visible circle.ring { opacity:1; }
.hz-readout { margin:.7rem 0 0; font-size:.9rem; color:var(--ink); background:var(--paper-2); border-left:3px solid var(--tier-s); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:.6rem .85rem; min-height:2.4em; transition:background var(--t); }
.hz-readout b { color:var(--tier-s); }
.hz-annot { display:flex; gap:.6rem; margin-top:.9rem; font-size:.88rem; color:var(--ink-soft); }
.hz-annot svg { width:18px; height:18px; color:var(--tier-s); flex:0 0 auto; margin-top:1px; }
.hz-good { background:var(--safe-soft); border:1px solid var(--safe); border-radius:var(--radius-sm); padding:.7rem .9rem; margin-top:.9rem; font-size:.88rem; color:var(--ink); display:flex; gap:.6rem; }
.hz-good svg { width:18px; height:18px; color:var(--safe); flex:0 0 auto; margin-top:1px; }
.levers { list-style:none; margin:1.1rem 0 0; padding:0; display:grid; gap:.5rem; }
.levers li { margin:0; }
.lever { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .6rem; padding:.6rem .8rem; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); min-height:44px; transition:border-color var(--t), background var(--t); }
.lever .lv-text { min-width:0; }
.lever .lv-status { white-space:normal; }
a.lever:hover { background:var(--accent-soft); border-color:var(--accent); text-decoration:none; }
.lever svg { width:18px; height:18px; color:var(--safe); flex:0 0 auto; }
.lever .lv-text { color:var(--ink); font-size:.92rem; }
.lever .lv-text b { font-weight:600; }
.lever .lv-go { margin-left:auto; color:var(--ink-faint); font-size:.78rem; font-weight:600; }
.lever svg.ic-ask { color:var(--caution); }
.lever svg.ic-no { color:var(--ink-faint); }
.lv-status { margin-left:auto; font-size:.72rem; font-weight:600; padding:.18rem .55rem; border-radius:999px; border:1px solid; white-space:nowrap; }
.lv-status[data-s="in"] { color:var(--safe); border-color:var(--safe); background:var(--safe-soft); }
.lv-status[data-s="offered"] { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.lv-status[data-s="ask"] { color:var(--caution); border-color:var(--caution); background:var(--caution-soft); }
.lv-status[data-s="no"] { color:var(--ink-faint); border-color:var(--line-strong); background:var(--paper-2); }

/* ---- steelman → honest-bound panel ----------------------------------- */
.sm-grid { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin:1.1rem 0 .2rem; }
.sm-panel { border:1px solid var(--line); border-radius:var(--radius-sm); padding:.95rem 1.1rem; background:var(--paper); }
.sm-panel[data-side="for"] { border-left:3px solid var(--safe); }
.sm-panel[data-side="limit"] { border-left:3px solid var(--caution); }
.sm-panel .sm-head { display:flex; align-items:center; gap:.45rem; font-weight:600; font-size:.92rem; color:var(--ink); margin-bottom:.5rem; }
.sm-panel[data-side="for"] .sm-head svg { color:var(--safe); }
.sm-panel[data-side="limit"] .sm-head svg { color:var(--caution); }
.sm-panel .sm-head svg { width:18px; height:18px; flex:0 0 auto; }
.sm-panel ul { margin:0; padding-left:1.1rem; font-size:.88rem; color:var(--ink-soft); }
.sm-panel li { margin:.3rem 0; }
.sm-verdict { margin-top:1rem; font-size:.92rem; color:var(--ink); background:var(--accent-soft); border:1px solid var(--accent); border-radius:var(--radius-sm); padding:.8rem 1rem; }
@media (max-width:640px){ .sm-grid { grid-template-columns:1fr; } }

/* ---- choice comparison table ----------------------------------------- */
.choice-wrap { overflow-x:auto; margin:.5rem 0 .2rem; }
.choice-table { border-collapse:separate; border-spacing:0; width:100%; min-width:520px; font-size:.9rem; }
.choice-table th, .choice-table td { padding:.7rem .85rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.choice-table thead th { font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; border-bottom:2px solid var(--line-strong); }
.choice-table th[scope="row"] { font-family:var(--font-serif); font-size:1rem; color:var(--ink); font-weight:560; }
.choice-table th[scope="row"] a { color:var(--accent); display:inline-flex; align-items:center; min-height:24px; }
.choice-table .yes { color:var(--safe); font-weight:600; }
.choice-table .qual { color:var(--caution); font-weight:600; }
.choice-table .nope { color:var(--ink-soft); }

/* ---- before/after burden comparison ---------------------------------- */
.compare-panel { background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--radius); padding:1.25rem 1.4rem; box-shadow:var(--shadow-1); margin:1.25rem 0 1.75rem; }
.compare-panel h3 { margin:0 0 .2rem; }
.compare-panel .c-sub { font-size:.9rem; color:var(--ink-soft); margin:.1rem 0 1rem; }
.compare-row { display:grid; grid-template-columns:130px 1fr; gap:.7rem; align-items:center; margin:.55rem 0; }
.compare-row .c-label { font-size:.82rem; color:var(--ink-soft); font-weight:600; text-align:right; }
.compare-row .c-bar { height:24px; border-radius:6px; display:flex; align-items:center; padding:0 .6rem; font-size:.8rem; font-weight:600; color:#fff; white-space:nowrap; }
.compare-row .c-bar.then { background:var(--caution); }
.compare-row .c-bar.now { background:var(--safe); }
.compare-foot { font-size:.86rem; color:var(--ink-soft); margin-top:1rem; border-top:1px solid var(--line); padding-top:.85rem; }
.compare-scale { font-size:.74rem; color:var(--ink-faint); text-align:right; padding-right:.2rem; }

/* ---- metric key (OS vs PFS honesty primitive) ------------------------ */
.metric-key { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.85rem; margin:1.25rem 0 .4rem; }
.metric-key .mk { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius-sm); padding:.85rem 1rem; box-shadow:var(--shadow-1); }
.metric-key .mk .mk-abbr { font-family:var(--font-serif); font-size:1.05rem; color:var(--ink); }
.metric-key .mk .mk-full { font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin-left:.4rem; }
.metric-key .mk p { font-size:.88rem; color:var(--ink-soft); margin:.35rem 0 0; }
.metric-key .mk[data-kind="os"] { border-left-color:var(--safe); }
.mk-foot { font-size:.86rem; color:var(--ink-soft); margin:.2rem 0 1.5rem; display:flex; gap:.5rem; align-items:flex-start; }
.mk-foot svg { width:17px; height:17px; color:var(--accent); flex:0 0 auto; margin-top:2px; }

/* ---- section honest-framing note ------------------------------------- */
.section-note { display:flex; gap:.9rem; background:var(--info-soft); border:1px solid var(--line-strong); border-left:3px solid var(--info); border-radius:var(--radius); padding:1rem 1.2rem; margin:1.25rem 0 1.75rem; }
.section-note svg { width:22px; height:22px; color:var(--info); flex:0 0 auto; margin-top:2px; }
.section-note .sn-body { font-size:.92rem; }
.section-note .sn-body strong { color:var(--ink); }
.section-note .sn-avoid { display:block; margin-top:.4rem; color:var(--ink-soft); }
.section-note .sn-avoid b { color:var(--caution); }

/* ---- through-line cards (primary emotional nav) ---------------------- */
.throughline { border-top:3px solid var(--accent); }
.throughline .tl-icon { width:34px; height:34px; color:var(--accent); }
.throughline .tl-q { font-family:var(--font-serif); font-size:1.18rem; color:var(--ink); margin:.3rem 0; }
.throughline .tl-count { font-size:.78rem; color:var(--ink-faint); font-weight:600; }
.throughline .meta .badge { font-size:.68rem; }

/* ---- "what this means for me" answer cards (flagship §0.6) ----------- */
.mecard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-1); padding:1.2rem 1.3rem; display:flex; flex-direction:column; gap:.6rem; }
.mecard .me-id { font-size:.7rem; font-weight:700; letter-spacing:.1em; color:var(--accent); text-transform:uppercase; }
.mecard .me-q { font-family:var(--font-serif); font-size:1.08rem; color:var(--ink); margin:0; font-style:italic; }
.mecard .me-a { font-size:.92rem; color:var(--ink-soft); margin:0; }
.mecard .me-a .alabel { display:block; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin-bottom:.2rem; }
.mecard .me-do { display:flex; gap:.55rem; align-items:flex-start; background:var(--safe-soft); border:1px solid var(--safe); border-radius:var(--radius-sm); padding:.6rem .8rem; font-size:.88rem; color:var(--ink); }
.mecard .me-do svg { width:17px; height:17px; color:var(--safe); flex:0 0 auto; margin-top:2px; }
.mecard .me-foot { display:flex; align-items:center; gap:.5rem; margin-top:auto; }
.mecard .me-foot .me-read { margin-left:auto; font-size:.8rem; font-weight:600; color:var(--accent); }

/* ---- "your situation, decoded" snapshot ------------------------------ */
.decode-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:.85rem; margin-top:1rem; }
.fact { display:block; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius-sm); padding:.85rem 1rem; box-shadow:var(--shadow-1); transition:transform var(--t), box-shadow var(--t); }
a.fact:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); text-decoration:none; }
.fact .flabel { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; }
.fact .fvalue { font-family:var(--font-serif); font-size:1.12rem; color:var(--ink); margin:.15rem 0 .3rem; }
.fact .fnote { font-size:.84rem; color:var(--ink-soft); margin:0; }
.fact[data-safe="1"] { border-left-color:var(--safe); }

/* ---- de-identified care timeline (semantic ol, premium) -------------- */
.timeline { list-style:none; margin:1.25rem 0 0; padding:0; position:relative; }
.timeline::before { content:""; position:absolute; left:13px; top:8px; bottom:8px; width:2px; background:var(--line-strong); }
.timeline li { position:relative; padding:0 0 1.3rem 2.4rem; }
.timeline li:last-child { padding-bottom:0; }
.timeline .node { position:absolute; left:4px; top:2px; width:20px; height:20px; }
.timeline .when { font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.timeline .what { font-family:var(--font-serif); font-size:1.08rem; color:var(--ink); margin:.1rem 0; }
.timeline .tdetail { font-size:.88rem; color:var(--ink-soft); }
.timeline li[data-safe="1"] .when { color:var(--safe); }
.timeline li[data-upcoming="1"] .what::after { content:" · upcoming"; color:var(--ink-faint); font-family:var(--font-sans); font-size:.8rem; font-weight:500; }

/* ---- "How We Know" — the method, visualized -------------------------- */
.how-lead { font-size:1.15rem; color:var(--ink-soft); max-width:64ch; }
.how-sec { margin-top:clamp(2.4rem,6vw,3.6rem); }
.how-sec > .how-kicker { display:block; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--copper); font-weight:700; margin-bottom:.35rem; }
.how-sec > h2 { margin:0 0 .4rem; }
.how-sec > .how-sub { color:var(--ink-soft); max-width:68ch; margin:0 0 1.2rem; }

/* animated visual flow diagram — the method as a flow, not text */
.flowmap { position:relative; max-width:580px; margin:1.5rem auto 0; }
.fm-node { display:flex; align-items:center; gap:1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:.85rem 1.1rem; box-shadow:var(--shadow-1);
  opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; }
.fm-node.in { opacity:1; transform:none; }
.fm-node .fm-ic { flex:0 0 auto; width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--copper); }
.fm-node .fm-ic svg { width:24px; height:24px; }
.fm-node .fm-label { display:block; font-family:var(--font-serif); font-size:1.08rem; color:var(--ink); line-height:1.25; }
.fm-node .fm-sub { display:block; font-size:.83rem; color:var(--ink-soft); margin-top:.2rem; }
.fm-node[data-accent="safe"] .fm-ic { background:var(--safe-soft); color:var(--safe); }
.fm-node[data-accent="gold"] .fm-ic { background:#f3e7d4; color:#9a6a12; }
/* flowing connector */
.fm-link { height:32px; width:3px; margin:.15rem auto; background:var(--line-strong); border-radius:2px; position:relative; overflow:hidden; }
.fm-link::after { content:""; position:absolute; left:0; right:0; height:55%; top:0; background:linear-gradient(var(--copper),transparent); transform:translateY(-100%); animation:fmpulse 1.9s linear infinite; will-change:transform; }
@keyframes fmpulse { from { transform:translateY(-100%); } to { transform:translateY(320%); } }
/* honest branch (defer / contested) */
.fm-branch { display:flex; align-items:center; gap:.6rem; margin:.15rem 0 .15rem 2.4rem; padding:.5rem .8rem; border:1px dashed var(--line-strong); border-radius:var(--radius-sm); background:var(--paper-2); font-size:.85rem; color:var(--ink-soft);
  opacity:0; transform:translateY(10px); transition:opacity .55s ease, transform .55s ease; position:relative; }
.fm-branch::before { content:""; position:absolute; left:-1.1rem; top:50%; width:1rem; height:1px; background:var(--line-strong); }
.fm-branch.in { opacity:1; transform:none; }
.fm-branch svg { width:18px; height:18px; flex:0 0 auto; color:var(--caution); }
.fm-branch[data-kind="defer"] svg { color:var(--ink-faint); }
.fm-branch b { color:var(--ink); }
/* maturity progression inside a node */
.fm-mat { display:flex; align-items:center; gap:.45rem; margin-top:.4rem; flex-wrap:wrap; }
.fm-mat .arr { color:var(--ink-faint); font-size:.8rem; }
.fm-loop { text-align:center; margin-top:.3rem; font-size:.85rem; color:var(--copper); font-weight:600; display:flex; align-items:center; justify-content:center; gap:.4rem; }
.fm-loop svg { width:17px; height:17px; }
.fm-loop svg.spin { animation:fmspin 9s linear infinite; }
@keyframes fmspin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fm-link::after, .fm-loop svg.spin { animation:none; }
  .fm-node, .fm-branch { opacity:1; transform:none; transition:none; }
}

/* team board of brains */
.team { margin-top:1.1rem; }
.team .team-name { display:flex; align-items:center; gap:.5rem; font-family:var(--font-serif); font-size:1.08rem; color:var(--ink); margin:0 0 .55rem; }
.team .team-dot { width:11px; height:11px; border-radius:3px; flex:0 0 auto; }
.brain-chips { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.6rem; }
.brain-chip { display:block; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--champagne); border-radius:var(--radius-sm); padding:.6rem .8rem; box-shadow:var(--shadow-1); transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
a.brain-chip:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); text-decoration:none; }
.brain-chip .bc-name { font-weight:600; color:var(--ink); font-size:.95rem; }
.brain-chip .bc-role { font-size:.82rem; color:var(--ink-soft); margin-top:.1rem; }

/* confidence ladder */
.ladder { display:grid; gap:.6rem; max-width:680px; }
.ladder-step { display:flex; align-items:flex-start; gap:.8rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.75rem .95rem; box-shadow:var(--shadow-1); }
.ladder-step .ls-badge { flex:0 0 auto; }
.ladder-step .ls-text { font-size:.92rem; color:var(--ink-soft); }
.ladder-step .ls-text b { color:var(--ink); }

/* ---- consensus board (the brains converge — conversational) ---------- */
.consensus-frame { background:var(--accent-soft); border:1px solid var(--line-strong); border-left:3px solid var(--copper); border-radius:var(--radius); padding:1.1rem 1.3rem; margin:1.25rem 0 1.75rem; }
.consensus-frame p { margin:.3rem 0 0; font-size:.95rem; color:var(--ink); }
.consensus-frame .cf-rule { font-size:.85rem; color:var(--ink-soft); margin-top:.6rem; }
.persona-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.7rem; margin:1rem 0 .4rem; }
.persona { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.7rem .85rem; box-shadow:var(--shadow-1); }
.persona .p-name { font-family:var(--font-serif); font-size:1rem; color:var(--copper); }
.persona .p-voice { font-size:.84rem; color:var(--ink-soft); margin-top:.15rem; }
.persona.late { border-style:dashed; }
.vcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-1); padding:1.15rem 1.3rem; margin-bottom:1rem; }
.vcard .v-id { font-size:.72rem; font-weight:700; letter-spacing:.1em; color:var(--copper); text-transform:uppercase; }
.vcard .v-q { font-family:var(--font-serif); font-size:1.18rem; color:var(--ink); margin:.25rem 0 .6rem; }
.vcard .v-verdict { font-size:.96rem; color:var(--ink-soft); margin:0 0 .6rem; }
.vcard .v-verdict b, .vcard .v-verdict strong { color:var(--ink); }
.exchange { border-left:2px solid var(--line-strong); padding:.2rem 0 .2rem .9rem; margin:.7rem 0; display:grid; gap:.4rem; }
.exchange .turn { font-size:.9rem; color:var(--ink-soft); }
.exchange .turn .who { font-weight:600; color:var(--copper); }
.exchange .converged { font-size:.9rem; color:var(--safe); font-weight:600; display:flex; align-items:center; gap:.4rem; }
.exchange .converged svg { width:16px; height:16px; }
.vcard .v-foot { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-top:.5rem; }
.vcard .v-note { font-size:.86rem; color:var(--ink-faint); font-style:italic; margin:.5rem 0 0; }

/* ---- brain chapter (the synthesis layer — verbose, no skeleton) ------ */
.brain-chapter { margin:2.2rem 0 1rem; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--champagne); border-radius:var(--radius); padding:clamp(1.3rem,3vw,2rem) clamp(1.4rem,3vw,2.2rem); box-shadow:var(--shadow-1); }
.brain-chapter > h2 { margin:0 0 1rem; }
.brain-chapter .chapter-sec { padding:1rem 0; border-top:1px solid var(--line); }
.brain-chapter .chapter-sec:first-child { border-top:0; padding-top:0; }
.brain-chapter .chapter-sec h3 { color:var(--copper); margin:0 0 .5rem; }
.converge-plan { border-left-color:var(--copper); background:var(--accent-soft); }
.converge-plan .prose, .converge-plan h2 { }
.debate-full { margin-top:1.5rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.debate-full > summary { cursor:pointer; padding:1rem 1.3rem; font-weight:600; font-family:var(--font-serif); font-size:1.1rem; color:var(--ink); list-style:none; display:flex; align-items:center; gap:.5rem; min-height:44px; }
.debate-full > summary::before { content:"▸"; color:var(--copper); transition:transform var(--t); }
.debate-full[open] > summary::before { transform:rotate(90deg); }
.debate-full > summary:hover { color:var(--copper); }
.debate-full .prose { padding:0 1.3rem 1.3rem; max-width:none; }
.debate-full .prose h1, .debate-full .prose h2 { font-size:1.2rem; margin-top:1.4rem; }

/* ---- dedication monument (the base of the site) ---------------------- */
.dedication { background:#1b2027; color:#e6dfd2; padding:clamp(3rem,7vw,5.5rem) 0; border-top:1px solid #38404b; }
.dedication .wrap { max-width:1000px; }
.ded-head { text-align:center; margin-bottom:clamp(2rem,5vw,3rem); }
.ded-eyebrow { display:block; font-size:.82rem; letter-spacing:.26em; text-transform:uppercase; color:#cdae6e; font-weight:600; }
.ded-ornament { width:128px; height:24px; margin:1.1rem auto .9rem; display:block; color:#cdae6e; }
.ded-head h2 { font-family:var(--font-serif); color:#f6f0e4; font-weight:500; font-size:clamp(1.7rem,4vw,2.5rem); margin:0; letter-spacing:.01em; }
.tributes { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); }
.tribute { margin:0; text-align:center; }
.tribute .to { display:block; font-family:var(--font-serif); font-style:italic; color:#cdae6e; font-size:1.05rem; margin-bottom:.9rem; }
.tribute blockquote { margin:0; font-family:var(--font-serif); font-size:clamp(1.1rem,2.2vw,1.35rem); line-height:1.6; color:#f0eadd; }
.tribute blockquote.flow { font-size:clamp(1.05rem,1.9vw,1.22rem); line-height:1.7; }
.tribute .response { display:block; margin-top:1rem; font-size:.96rem; color:#bcb3a3; font-style:italic; }
.tribute.keystone { grid-column:1 / -1; margin-top:clamp(2rem,5vw,3rem); max-width:760px; margin-left:auto; margin-right:auto; padding-top:clamp(1.8rem,4vw,2.6rem); border-top:1px solid #38404b; }
.ded-creed { max-width:680px; margin:clamp(2.4rem,6vw,3.4rem) auto 0; text-align:center; padding-top:clamp(1.8rem,4vw,2.4rem); border-top:1px solid #38404b; }
.ded-creed p { color:#e6dfd2; font-size:1.02rem; line-height:1.7; margin:0 auto 1.1rem; max-width:none; }
.ded-creed .vow { font-family:var(--font-serif); font-size:clamp(1.25rem,3vw,1.7rem); color:#f6f0e4; letter-spacing:.01em; margin:0; }
.ded-creed .vow b { color:#cdae6e; font-weight:500; }
@media (max-width:680px){ .tributes { grid-template-columns:1fr; gap:2.5rem; } }
@media print {
  .dedication { background:#fff; color:#000; border-top:1px solid #ccc; }
  .ded-head h2, .ded-creed .vow, .tribute blockquote { color:#000; }
  .ded-eyebrow, .ded-ornament, .tribute .to, .ded-creed .vow b { color:#6b5520; }
  .tribute .response, .ded-creed p { color:#333; }
}

/* ---- footer / disclaimer --------------------------------------------- */
.disclaimer { background:var(--caution-soft); border-top:1px solid var(--line-strong); margin-top:3rem; }
.disclaimer .wrap { padding-top:1.5rem; padding-bottom:1.5rem; display:flex; gap:.8rem; align-items:flex-start; }
.disclaimer svg { width:22px; height:22px; color:var(--caution); flex:0 0 auto; margin-top:2px; }
.disclaimer p { font-size:.86rem; color:var(--ink-soft); margin:0; max-width:none; }

footer.legal { background:var(--paper-2); border-top:1px solid var(--line); padding:1.5rem 0; font-size:.82rem; color:var(--ink-faint); }

/* ---- closing next-step CTA (no dead ends) ---------------------------- */
.next-step { background:var(--accent-soft); border:1px solid var(--accent); border-radius:var(--radius); padding:1.1rem 1.3rem; margin:2rem 0 1rem; }
.next-step h3 { margin:0 0 .3rem; font-size:1.1rem; }
.next-step p { margin:0 0 .8rem; font-size:.92rem; color:var(--ink-soft); }
.next-step .ns-actions { display:flex; flex-wrap:wrap; gap:.6rem; }
.ns-btn { display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:.5rem 1rem; border-radius:999px; font-size:.9rem; font-weight:600; border:1px solid var(--accent); transition:background var(--t), color var(--t); }
.ns-btn.primary { background:var(--accent); color:#fff; }
.ns-btn.primary:hover { background:#7e4f2a; text-decoration:none; }
.ns-btn.ghost { background:transparent; color:var(--accent); }
.ns-btn.ghost:hover { background:#fff; text-decoration:none; }
.ns-btn svg { width:16px; height:16px; }

/* header print button */
.print-btn { display:inline-flex; align-items:center; gap:.4rem; min-height:44px; padding:.4rem .8rem; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-soft); font:inherit; font-size:.88rem; font-weight:500; cursor:pointer; transition:background var(--t), border-color var(--t); }
.print-btn:hover { background:var(--paper-2); border-color:var(--accent); color:var(--accent); }
.print-btn svg { width:16px; height:16px; }
@media (max-width:760px){ .print-btn .pb-text { display:none; } }

/* ---- search results -------------------------------------------------- */
.search-group { margin-top:1.5rem; }
.search-group h2 { font-size:1.05rem; color:var(--ink-soft); margin-bottom:.6rem; }
mark { background:#fbe7b0; color:var(--ink); border-radius:3px; padding:0 .12em; }
.chip-row { display:flex; flex-wrap:wrap; gap:.5rem; }
.chip-link { display:inline-flex; align-items:center; gap:.4rem; min-height:36px; padding:.35rem .8rem; background:var(--surface); border:1px solid var(--line-strong); border-radius:999px; font-size:.88rem; color:var(--ink); transition:background var(--t), border-color var(--t); }
a.chip-link:hover { background:var(--accent-soft); border-color:var(--accent); text-decoration:none; }
.result-row { display:flex; gap:.7rem; align-items:baseline; padding:.7rem 0; border-bottom:1px solid var(--line); }
a.result-row:hover { text-decoration:none; }
a.result-row:hover .rr-title { color:var(--accent); }
.result-row .rr-title { color:var(--ink); font-weight:500; }
.result-row .rr-badges { margin-left:auto; display:flex; gap:.35rem; flex:0 0 auto; }
.result-row .rr-bucket { font-size:.74rem; color:var(--ink-faint); }

/* ---- legend chips ---------------------------------------------------- */
.legend { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.legend .badge { cursor:default; }

/* ===== How it works — the Research Lab constellation ==================== */
.lab-stat .stat b { color:var(--copper); }
/* phones: the four hero stats wrap raggedly as content-width flex items — lay them out as a tidy 2x2 grid */
@media (max-width:560px){
  .lab-stat { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
  .lab-stat .stat { padding:.75rem .9rem; }
}
.fam-legend { display:flex; flex-wrap:wrap; gap:.5rem .9rem; margin:0 0 1.1rem; }
.fam-key { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--ink-soft); }
.fam-dot { width:9px; height:9px; border-radius:3px; flex:0 0 auto; }

.constellation-stage { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr); gap:1.4rem; align-items:start; }

/* the map (desktop): absolute nodes over a line layer, in a shared 0–100 coordinate space */
.constellation {
  position:relative; aspect-ratio:1.12/1; min-height:380px; overflow:visible;
  border:1px solid var(--line); border-radius:var(--radius);
  background:
    radial-gradient(120% 90% at 50% 12%, var(--surface) 0%, var(--paper) 62%, var(--paper-2) 100%);
  box-shadow:var(--shadow-1); padding:.4rem;
}
.constellation::before { /* faint engraved core, the shared mission */
  content:""; position:absolute; left:50%; top:42%; width:42%; aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle, rgba(152,95,51,.06), transparent 70%); pointer-events:none;
}
.constellation-lines { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
/* resting edges sit quietly behind the orbs (the orbs lead); a selected brain's edges light up and pop */
.con-line { stroke:var(--line-strong); stroke-width:1; vector-effect:non-scaling-stroke; opacity:.3; transition:stroke .3s, opacity .3s, stroke-width .3s; }
.con-line.spine { stroke:var(--mocha); opacity:.34; stroke-dasharray:3 3; }
.con-line.lit { stroke:var(--copper); opacity:.92; stroke-width:1.7; }
.con-line.spine.lit { stroke:var(--mocha); }

.brain-node {
  position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:.32rem;
  width:max-content; max-width:128px; padding:0; background:none; border:0; cursor:pointer; text-align:center;
  opacity:0; transition:opacity .5s ease;
}
.brain-node.in { opacity:1; }
.bn-orb {
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:1.5px solid color-mix(in srgb, var(--fam) 45%, var(--line));
  box-shadow:var(--shadow-1); color:var(--fam);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s, border-color .22s, background .22s;
}
.brain-node.hero .bn-orb { width:64px; height:64px; border-width:2px; }
.bn-orb .sigil { width:28px; height:28px; }
.brain-node.hero .bn-orb .sigil { width:34px; height:34px; }
.bn-text { display:flex; flex-direction:column; line-height:1.05; max-width:128px; }
/* map-mode labels use fixed px (non-scaling) so user text-zoom can't overflow/collide the absolute layout;
   the full, resizable identity lives in each node's aria-label and in the detail panel. List mode (below)
   restores resizable rem, where there's room to wrap. */
.bn-name { font-family:var(--font-serif); font-size:13px; color:var(--ink); font-weight:560; }
.bn-ep { font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); margin-top:.08rem; }
.brain-node:hover .bn-orb { transform:scale(1.1); box-shadow:var(--shadow-2); border-color:var(--fam); }
.brain-node:hover .bn-name { color:var(--copper); }
.brain-node.is-connected .bn-orb { border-color:var(--fam); background:color-mix(in srgb, var(--fam) 9%, var(--surface)); }
.brain-node.is-selected .bn-orb { transform:scale(1.16); background:color-mix(in srgb, var(--fam) 14%, var(--surface)); border-color:var(--fam); box-shadow:0 0 0 4px color-mix(in srgb, var(--fam) 22%, transparent), var(--shadow-2); }
.brain-node.hero.is-selected .bn-orb { transform:scale(1.12); }
.brain-node.is-selected .bn-name { color:var(--copper); font-weight:600; }
.brain-node:focus-visible { outline:none; }
.brain-node:focus-visible .bn-orb { outline:2.5px solid var(--accent); outline-offset:3px; }
.fam-heading { display:none; }   /* desktop: identity carried by colour + legend */

/* the introduction panel */
.brain-detail { position:sticky; top:90px; min-height:300px; }
.bd-card {
  background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--fam);
  border-radius:var(--radius); padding:1.3rem 1.4rem; box-shadow:var(--shadow-2);
  animation:bdfade .4s ease;
}
@keyframes bdfade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.bd-top { display:flex; gap:.9rem; align-items:center; margin-bottom:.85rem; }
.bd-sigil { flex:0 0 auto; width:58px; height:58px; border-radius:15px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--fam) 12%, var(--surface)); border:1px solid color-mix(in srgb, var(--fam) 35%, var(--line)); color:var(--fam); }
.bd-sigil .sigil { width:32px; height:32px; }
/* deepen the family hue toward ink so this small epithet text clears AA 4.5:1 for every family
   (raw --terracotta was 4.35:1); the hue stays recognizable. Decorative uses keep raw --fam. */
.bd-ep { display:block; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:color-mix(in srgb, var(--fam) 80%, var(--ink)); font-weight:700; }
.bd-name { font-family:var(--font-serif); font-size:1.42rem; margin:.05rem 0 .15rem; line-height:1.1; }
.bd-role { display:flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--ink-soft); }
.bd-intro { font-size:1rem; color:var(--ink-soft); line-height:1.6; margin:0 0 1rem; }
.bd-sig { display:flex; gap:.55rem; align-items:flex-start; font-size:.9rem; color:var(--ink); background:var(--paper-2); border-radius:var(--radius-sm); padding:.65rem .8rem; }
.bd-sig svg { width:18px; height:18px; flex:0 0 auto; color:var(--champagne); margin-top:.1rem; }
.bd-foot { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin-top:1rem; padding-top:.85rem; border-top:1px solid var(--line); }
.bd-stat { font-size:.84rem; color:var(--ink-faint); font-weight:500; }
.bd-stat .sym { color:var(--tier-s); }
.bd-meta-tag { display:inline-block; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--mocha); background:var(--info-soft); border-radius:999px; padding:.12rem .5rem; }
/* signature answer — the brain's strongest cited thesis (concrete proof of its work) */
.bd-flagship { display:block; margin-top:.85rem; padding:.7rem .85rem; background:var(--paper-2); border:1px solid var(--line); border-left:3px solid var(--fam); border-radius:var(--radius-sm); transition:border-color var(--t), box-shadow var(--t), background var(--t); }
.bd-flagship:hover { border-left-color:var(--fam); box-shadow:var(--shadow-1); text-decoration:none; background:color-mix(in srgb, var(--fam) 6%, var(--paper-2)); }
.bd-flagship:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.bf-label { display:block; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fam); font-weight:700; margin-bottom:.2rem; }
.bf-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-family:var(--font-serif); font-size:.96rem; color:var(--ink); line-height:1.3; }
.bf-badges { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.45rem; }
.bd-rel { margin-top:.9rem; }
.bd-rel-h { display:block; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; margin-bottom:.45rem; }
.bd-rel-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.bd-rel-chip { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-sans); font-size:.78rem; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.3rem .65rem; min-height:30px; cursor:pointer; transition:border-color var(--t), background var(--t), color var(--t); }
.bd-rel-chip .rc-dot { width:7px; height:7px; border-radius:50%; background:var(--fam); flex:0 0 auto; }
.bd-rel-chip .rc-ep { color:var(--ink-faint); }
.bd-rel-chip:hover { border-color:var(--fam); background:color-mix(in srgb, var(--fam) 8%, var(--surface)); color:var(--ink); text-decoration:none; }
.bd-rel-chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.bd-link { display:inline-flex; align-items:center; min-height:30px; font-size:.88rem; font-weight:600; margin-left:auto; }
/* touch devices: grow the smallest controls to the 44px comfort target (iOS HIG / WCAG 2.5.5 AAA) */
@media (pointer: coarse){
  .bd-rel-chip { min-height:44px; padding-block:.5rem; }
  .bd-link { min-height:44px; }
}

/* ===== architecture (very high level) ================================== */
.arch-flow { display:flex; flex-wrap:wrap; align-items:stretch; gap:.6rem; margin:.4rem 0 1rem; }
.arch-card { display:flex; flex-direction:column; flex:1 1 190px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.05rem; box-shadow:var(--shadow-1);
  opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease, box-shadow var(--t), border-color var(--t); }
.arch-card.in { opacity:1; transform:none; }
a.arch-card { text-decoration:none; }
a.arch-card:hover { box-shadow:var(--shadow-2); border-color:var(--line-strong); }
a.arch-card.in:hover { transform:translateY(-3px); }
a.arch-card:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.arch-go { display:inline-flex; align-items:center; gap:.3rem; margin-top:.7rem; font-size:.8rem; font-weight:600; color:var(--copper); opacity:.85; transition:opacity var(--t), gap var(--t); }
.arch-go svg { width:15px; height:15px; }
a.arch-card:hover .arch-go { opacity:1; gap:.5rem; }
@media (prefers-reduced-motion: reduce){ a.arch-card.in:hover { transform:none; } .arch-go { transition:none; } }
.arch-ic { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--accent-soft); color:var(--copper); }
.arch-ic svg { width:23px; height:23px; }
.arch-step { display:block; font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; margin:.6rem 0 .15rem; }
.arch-card h3 { font-size:1.04rem; margin:0 0 .3rem; }
.arch-card p { font-size:.86rem; color:var(--ink-soft); margin:0; line-height:1.5; }
.arch-arrow { display:flex; align-items:center; color:var(--line-strong); flex:0 0 auto; align-self:center; }
.arch-arrow svg { width:24px; height:24px; transition:transform var(--t); }
/* below the width where four cards fit one row (~1024), stack the flow and point arrows DOWN (not sideways) */
@media (max-width:1024px){
  .arch-flow { flex-direction:column; align-items:stretch; }
  .arch-card { flex:1 1 auto; width:100%; }
  .arch-arrow { align-self:center; }
  .arch-arrow svg { transform:rotate(90deg); }
}
@media (prefers-reduced-motion: reduce){ .arch-arrow svg { transition:none; } }
.arch-loop { display:flex; align-items:center; gap:.55rem; font-size:.9rem; color:var(--copper); font-weight:600; background:var(--accent-soft); border-radius:var(--radius-sm); padding:.7rem .95rem; }
.arch-loop svg { width:19px; height:19px; flex:0 0 auto; animation:fmspin 12s linear infinite; }
.arch-conf { margin-top:1.8rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem 1.4rem; box-shadow:var(--shadow-1);
  opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease; }
.arch-conf.in { opacity:1; transform:none; }
.arch-conf h3 { font-size:1.12rem; margin:0 0 .3rem; }
.conf-cols { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.conf-h { display:block; font-size:.8rem; letter-spacing:.04em; color:var(--ink); font-weight:700; margin-bottom:.6rem; }
.conf-row { display:flex; flex-wrap:wrap; align-items:flex-start; gap:.4rem .65rem; font-size:.86rem; color:var(--ink-soft); margin-bottom:.55rem; line-height:1.45; }
.conf-row .badge, .conf-tier { flex:0 0 auto; }
.conf-row > span:last-child { min-width:0; flex:1 1 0; }
.conf-tier { min-width:64px; }
.arch-paper { margin-top:1.8rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem 1.4rem; box-shadow:var(--shadow-1); }
.arch-paper h3 { font-size:1.12rem; margin:.15rem 0 .3rem; }
.paper-steps { margin:.4rem 0 0; padding:0; list-style:none; counter-reset:ps; display:grid; gap:.7rem; }
.paper-steps li { position:relative; padding-left:2.2rem; color:var(--ink-soft); font-size:.96rem; line-height:1.5; counter-increment:ps; }
.paper-steps li::before { content:counter(ps); position:absolute; left:0; top:.05rem; width:1.55rem; height:1.55rem; border-radius:50%; background:var(--accent-soft); color:var(--copper); font-weight:700; font-size:.82rem; display:grid; place-items:center; font-family:var(--font-sans); }
.paper-steps li strong { color:var(--ink); }
.arch-gold { display:flex; align-items:center; gap:.7rem; margin-top:1rem; padding:.85rem 1.1rem; border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--copper); font-weight:600; font-size:.95rem; line-height:1.4; text-decoration:none; border:1px solid var(--line); transition:transform var(--t), box-shadow var(--t); }
.arch-gold:hover { transform:translateY(-1px); box-shadow:var(--shadow-1); }
.arch-gold svg { width:18px; height:18px; flex:0 0 auto; margin-left:auto; }
.arch-cta { margin-top:1.8rem; text-align:center; }
.arch-cta p { color:var(--ink-soft); max-width:62ch; margin:0 auto 1rem; font-size:.96rem; }
.arch-cta .ns-actions { justify-content:center; }
@media (prefers-reduced-motion: reduce) {
  .brain-node, .arch-card, .arch-conf { opacity:1; transform:none; transition:none; }
  .bd-card { animation:none; }
  .arch-loop svg { animation:none; }
  .bn-orb, .con-line { transition:none; }
}
/* Windows High Contrast / forced-colors: box-shadow rings are stripped, so the selected/connected/lit
   states would vanish. Restore them with system colors so selection stays visible. */
@media (forced-colors: active) {
  .brain-node.is-selected .bn-orb { outline:3px solid Highlight; outline-offset:2px; }
  .brain-node.is-connected .bn-orb { outline:1.5px dashed LinkText; outline-offset:2px; }
  .con-line { stroke:CanvasText; }
  .con-line.lit { stroke:Highlight; opacity:1; }
}

/* ---- responsive ------------------------------------------------------ */
@media (max-width: 1024px){ .grid.cols-4{grid-template-columns:repeat(2,1fr);} .grid.cols-3{grid-template-columns:repeat(2,1fr);} }
/* constellation → single column with a list-mode map, panel below */
@media (max-width: 900px){
  .constellation-stage { grid-template-columns:1fr; }
  .brain-detail { position:static; min-height:0; }
}
@media (max-width: 780px){
  .constellation { position:static; aspect-ratio:auto; min-height:0; overflow:visible; padding:14px 2px;
    display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem .6rem; background:none; border:0; box-shadow:none; }
  .constellation::before { display:none; }
  .constellation-lines { display:none; }
  .fam-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:.4rem; grid-column:1/-1; margin:.7rem 0 -.1rem; font-family:var(--font-serif); font-size:1.02rem; color:var(--ink); }
  .fam-heading:first-child { margin-top:0; }
  .fam-heading .fam-blurb { font-family:var(--font-sans); font-size:.76rem; font-weight:400; color:var(--ink-faint); }
  .brain-node { position:static; transform:none; flex-direction:row; gap:.6rem; max-width:none; width:100%; min-width:0;
    background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--fam); border-radius:var(--radius-sm);
    padding:.55rem .65rem; box-shadow:var(--shadow-1); opacity:1; text-align:left; }
  .brain-node .bn-text { min-width:0; }
  .brain-node .bn-name { overflow-wrap:anywhere; }
  .brain-node.hero { border-left-width:4px; }
  .bn-orb { width:40px; height:40px; flex:0 0 auto; }
  .brain-node.hero .bn-orb { width:40px; height:40px; }
  .bn-orb .sigil, .brain-node.hero .bn-orb .sigil { width:22px; height:22px; }
  .bn-text { align-items:flex-start; max-width:none; min-width:0; }
  .bn-name { font-size:.9rem; }   /* list mode: resizable text, room to wrap */
  .bn-ep { font-size:.7rem; overflow-wrap:anywhere; }   /* break the uppercase epithet so big text can't overflow the card */
  .brain-node.is-selected { background:color-mix(in srgb, var(--fam) 9%, var(--surface)); }
  .brain-node.is-selected .bn-orb, .brain-node:hover .bn-orb { transform:none; }
  .brain-node.is-selected { box-shadow:0 0 0 2px color-mix(in srgb, var(--fam) 40%, transparent); }
  .conf-cols { grid-template-columns:1fr; gap:1.1rem; }
}
@media (max-width: 360px){
  .constellation { grid-template-columns:1fr; }
}
@media (max-width: 760px){
  /* compact 3-row header: brand + print / full-width search / full-bleed scrollable nav strip
     (no hamburger-JS, so every page stays reachable on a phone) */
  .topbar-inner{ --hpad: clamp(1rem, 4vw, 2.5rem); height:auto; min-height:0; padding:.55rem var(--hpad) 0; gap:.45rem .6rem; flex-wrap:wrap; }
  .brand{ font-size:1.02rem; gap:.55rem; margin-right:auto; }
  .brand-logo{ width:32px; height:32px; border-radius:8px; }
  .brand small{ font-size:.58rem; letter-spacing:.12em; }
  .search{ order:4; flex:1 1 100%; min-width:0; max-width:none; }
  .nav-axis{
    order:5; margin:0 calc(-1 * var(--hpad)); padding:0 var(--hpad) .3rem;
    flex:0 0 auto; width:calc(100% + 2 * var(--hpad));
    flex-wrap:nowrap; overflow-x:auto; gap:.3rem;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x proximity; scroll-padding-inline:var(--hpad);
  }
  .nav-axis::-webkit-scrollbar{ display:none; }
  .nav-axis a{ white-space:nowrap; flex:0 0 auto; scroll-snap-align:start; padding:.45rem .75rem; font-size:.88rem; }
  /* edge fades = "there's more" affordance; classes toggled from app.js on scroll/resize */
  .nav-axis.fade-r{ -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 34px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 34px), transparent); }
  .nav-axis.fade-l{ -webkit-mask-image:linear-gradient(to right, transparent, #000 34px); mask-image:linear-gradient(to right, transparent, #000 34px); }
  .nav-axis.fade-l.fade-r{ -webkit-mask-image:linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent); mask-image:linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent); }
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr;}
}

/* print / handbook parity */
@media print {
  .topbar, .nav-axis, .search, .disclaimer { display:none; }
  body { background:#fff; }
  .card, .qcard { box-shadow:none; border-color:#ccc; break-inside:avoid; }
  a { color:#000; text-decoration:underline; }
}

/* ===================================================================
   THE SHIELD — the counter-move atlas (#/shield)
   Built/hardened by the SHIELD-PAGE cron. Calm-premium tokens only.
   =================================================================== */
.shield{ max-width:var(--measure-wide, 1080px); margin:0 auto; padding:0 clamp(16px,4vw,32px); }
.shield .reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s var(--t), transform .5s var(--t); }
.shield .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .shield .reveal{ opacity:1; transform:none; transition:none; } }

/* Hero */
.shd-hero{ position:relative; padding:clamp(32px,7vw,72px) 0 clamp(20px,4vw,36px); border-bottom:1px solid color-mix(in srgb, var(--ink) 12%, transparent); overflow:hidden; }
.shd-aegis{ position:absolute; top:clamp(-10px,2vw,18px); right:clamp(-22px,-1vw,8px); width:clamp(120px,22vw,230px); height:auto; pointer-events:none; z-index:0; opacity:.5; }
.shd-aegis-body{ fill:color-mix(in srgb,var(--tier-s) 8%,transparent); stroke:color-mix(in srgb,var(--tier-s) 28%,transparent); stroke-width:1.5; }
.shd-aegis-in{ fill:none; stroke:color-mix(in srgb,var(--accent) 30%,transparent); stroke-width:1.2; }
.shd-aegis-chk{ fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:.65; }
.shd-hero > :not(.shd-aegis){ position:relative; z-index:1; }
.shd-eyebrow{ display:inline-block; font-family:var(--font-sans); font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:.74rem; color:var(--accent); }
.shd-title{ font-family:var(--font-serif); font-weight:560; line-height:1.06; letter-spacing:-.01em; font-size:clamp(2rem,6vw,3.6rem); margin:.35em 0 .2em; color:var(--ink); max-width:18ch; }
.shd-lede{ font-size:clamp(1.02rem,1.6vw,1.22rem); line-height:1.55; color:var(--ink-soft); max-width:62ch; }
.shd-lede em{ color:var(--ink); font-style:italic; }
/* sticky scroll-spy sub-nav */
.shd-subnav{ position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; gap:.5rem .55rem; margin-top:clamp(18px,3vw,28px); padding:.55rem 0; background:linear-gradient(180deg, var(--paper) 70%, transparent); }
.shd-jump{ font-family:var(--font-sans); font-size:.84rem; font-weight:560; color:var(--ink-soft); cursor:pointer; padding:.5rem .85rem; border:1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius:999px; background:var(--surface); transition:all var(--t); min-height:32px; }
.shd-jump:hover{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.shd-jump:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.shd-jump.active{ color:#fff; background:var(--accent); border-color:var(--accent); }

/* Sections */
.shd-sec{ padding:clamp(30px,5.5vw,58px) 0 clamp(34px,6vw,64px); border-bottom:0; }
/* ornamental chapter break between sections (brand divider) — replaces the faint 1px line that read as a monolith */
.shd-sec::before{ content:""; display:block; width:min(300px,64%); height:30px; margin:0 auto clamp(26px,4.5vw,46px);
  background:url(../brand/divider.svg) center/contain no-repeat; opacity:.82; }
.shd-h{ font-family:var(--font-serif); font-weight:560; font-size:clamp(1.4rem,3vw,2rem); letter-spacing:-.01em; color:var(--ink); display:flex; align-items:center; gap:.6rem; }
.shd-h-n{ display:inline-flex; align-items:center; justify-content:center; width:1.95em; height:1.95em; flex:0 0 auto;
  border-radius:50%; background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent);
  font-family:var(--font-sans); font-weight:700; font-size:.64em; letter-spacing:.02em; }
.shd-sec-lede{ color:var(--ink-soft); font-size:1.02rem; line-height:1.55; max-width:60ch; margin:.6rem 0 1.4rem; }
.shd-sec-lede a{ color:var(--accent); }

/* Doctrine spine */
.shd-doc-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,280px), 1fr)); gap:clamp(12px,2vw,18px); margin-top:1.2rem; }
.shd-card{ display:flex; flex-direction:column; gap:.5rem; padding:clamp(18px,2.4vw,26px); background:var(--surface); border:1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius:var(--radius); box-shadow:var(--shadow-1); text-decoration:none; transition:transform var(--t), box-shadow var(--t), border-color var(--t); transition-delay:calc(var(--i,0) * 35ms); position:relative; overflow:hidden; }
.shd-card::before{ content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--tier-s); opacity:.0; transition:opacity var(--t); }
.shd-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:color-mix(in srgb, var(--accent) 50%, transparent); }
.shd-card:hover::before{ opacity:1; }
.shd-kicker{ font-family:var(--font-sans); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.7rem; color:var(--accent); }
.shd-card-t{ font-family:var(--font-serif); font-weight:560; font-size:1.16rem; line-height:1.2; color:var(--ink); margin:0; }
.shd-card-d{ font-size:.95rem; line-height:1.5; color:var(--ink-soft); margin:0; flex:1; }
.shd-card-cite{ font-family:var(--font-sans); font-size:.8rem; font-weight:560; color:var(--accent); margin-top:.3rem; }

/* Build placeholders (replaced as the cron fleshes out each section) */
.shd-placeholder{ margin-top:1rem; padding:clamp(20px,4vw,34px); border:1px dashed color-mix(in srgb, var(--ink) 22%, transparent); border-radius:var(--radius); color:var(--ink-faint); font-style:italic; background:color-mix(in srgb, var(--paper-2) 50%, transparent); text-align:center; }

/* Footer */
.shd-foot{ padding:clamp(28px,5vw,48px) 0 clamp(48px,8vw,80px); }
.shd-foot p{ color:var(--ink-faint); font-size:.92rem; line-height:1.55; max-width:60ch; }
.shd-foot-link{ color:var(--accent); font-weight:560; }

/* The Atlas — filter chips + modality groups + expandable rows */
.shd-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 clamp(18px,3vw,28px); }
.shd-chip{ font-family:var(--font-sans); font-size:.82rem; font-weight:560; color:var(--ink-soft); background:var(--surface); border:1px solid color-mix(in srgb,var(--ink) 16%,transparent); border-radius:999px; padding:.5rem .9rem; cursor:pointer; transition:all var(--t); min-height:32px; }
.shd-chip:hover{ border-color:var(--accent); color:var(--accent); }
.shd-chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.shd-atlas-grid{ display:flex; flex-direction:column; gap:clamp(22px,3.5vw,34px); }
.shd-grp.shd-hide{ display:none; }
.shd-grp-h{ font-family:var(--font-serif); font-weight:560; font-size:clamp(1.04rem,2vw,1.18rem); color:var(--ink); margin:0 0 .75rem; padding-bottom:.5rem; border-bottom:2px solid color-mix(in srgb,var(--accent) 28%,transparent); display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; }
.shd-grp-note{ font-family:var(--font-sans); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--safe); background:var(--safe-soft); padding:.12rem .45rem; border-radius:5px; }
.shd-rows{ display:flex; flex-direction:column; gap:.5rem; }
.shd-row{ background:var(--surface); border:1px solid color-mix(in srgb,var(--ink) 12%,transparent); border-left:3px solid var(--tier-a); border-radius:var(--radius-sm); overflow:hidden; transition:border-color var(--t), box-shadow var(--t); }
.shd-row[open]{ box-shadow:var(--shadow-1); border-color:color-mix(in srgb,var(--accent) 38%,transparent); }
.shd-row.no-move{ border-left-color:var(--caution); }
.shd-row-sum{ display:flex; align-items:center; gap:.75rem; padding:.8rem 1rem; cursor:pointer; list-style:none; min-height:32px; font-family:var(--font-sans); }
.shd-row-sum::-webkit-details-marker{ display:none; }
.shd-row-sum::after{ content:"+"; font-size:1.25rem; line-height:1; color:var(--accent); transition:transform var(--t); flex:none; margin-left:auto; }
.shd-row[open] .shd-row-sum::after{ transform:rotate(45deg); }
.shd-row-sum:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.shd-row-eff{ font-weight:600; color:var(--ink); font-size:.98rem; line-height:1.35; }
.shd-row-tier{ font-size:.72rem; font-weight:700; padding:.16rem .5rem; border-radius:6px; flex:none; }
.shd-row-tier.tier-s{ background:color-mix(in srgb,var(--tier-s) 16%,transparent); color:var(--tier-s); }
.shd-row-tier.tier-a{ background:var(--accent-soft); color:var(--accent); }
.shd-row-body{ padding:0 1rem 1rem; }
.shd-row-move{ color:var(--ink-soft); line-height:1.55; font-size:.95rem; margin:.2rem 0 .65rem; }
.shd-nomove-tag{ display:inline-block; font-family:var(--font-sans); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--caution); background:var(--caution-soft); padding:.12rem .45rem; border-radius:5px; margin-right:.35rem; }
.shd-row-cite{ display:inline-flex; align-items:center; min-height:28px; padding-block:.15rem; font-family:var(--font-sans); font-size:.8rem; font-weight:560; color:var(--accent); text-decoration:none; }
.shd-row-cite:hover{ text-decoration:underline; }

/* ============================================================================
   THE HANDBOOK — the one fused page (#/handbook)
   Explain + Her questions + Consensus + By-topic, on a single canvas.
   ========================================================================== */
.hb-hero{ padding-bottom:1.2rem; }

/* elegant labelled section divider — replaces bare wall-to-wall H2s */
.hb-sep{ display:flex; align-items:center; gap:1rem; margin:3.2rem 0 1rem; }
.hb-sep h2{ margin:0; font-size:1.5rem; min-width:0; }
@media(max-width:460px){ .hb-sep h2{ font-size:1.22rem; } }
.hb-sep::before{ content:""; width:18px; height:1.5px; background:var(--accent); border-radius:2px; flex:none; }
.hb-sep::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line-strong),transparent); }

/* orient band: facts (left) + timeline (right) */
.hb-orient{ display:grid; grid-template-columns:1.25fr .9fr; gap:2.2rem; align-items:start; }
.hb-orient .desc{ margin-top:0; }
.hb-orient-tl{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.25rem; box-shadow:var(--shadow-1); }
@media(max-width:860px){ .hb-orient{ grid-template-columns:1fr; gap:1.4rem; } }

/* consensus-flow diagram */
.hb-flow-wrap{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.5rem 1.1rem; box-shadow:var(--shadow-1); }
.consensus-flow{ display:block; width:100%; max-width:760px; height:auto; margin:0 auto; }
.hb-flow-cap{ margin:.8rem auto 0; max-width:70ch; text-align:center; }

/* her four worries — the group banners that organise the questions */
.tl-group{ margin-top:1.6rem; scroll-margin-top:5rem; }
.tl-banner{ display:flex; align-items:center; gap:1rem; padding:.95rem 1.2rem; margin:1.4rem 0 .9rem;
  border:1px solid var(--line-strong); border-left:4px solid var(--accent); border-radius:var(--radius);
  background:linear-gradient(105deg, var(--accent-soft), var(--surface) 70%); }
.tl-banner svg{ width:30px; height:30px; color:var(--accent); flex:none; }
.tl-banner h3{ margin:.05rem 0 .12rem; font-size:1.32rem; }
.tl-banner p{ margin:0; color:var(--ink-soft); font-size:.92rem; line-height:1.45; }
.tl-step{ font-family:var(--font-sans); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); }
.tl-count{ margin-left:auto; align-self:flex-start; flex:none; font-family:var(--font-sans); font-size:.72rem; font-weight:600; color:var(--ink-faint); background:var(--paper-2); border-radius:999px; padding:.2rem .6rem; }
@media(max-width:560px){ .tl-count{ display:none; } }

/* the fusion unit: human side | evidence side */
.qa-unit{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-1); margin:.85rem 0; overflow:hidden; }
.qa-head{ display:flex; align-items:center; gap:.55rem; padding:.55rem 1.1rem; border-bottom:1px solid var(--line); background:var(--paper-2); }
.qa-id{ font-family:var(--font-sans); font-weight:700; font-size:.78rem; letter-spacing:.06em; color:var(--accent); flex:none; }
.qa-q-mini{ font-family:var(--font-sans); font-size:.82rem; color:var(--ink-soft); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qa-topic{ margin-left:auto; flex:none; display:inline-flex; align-items:center; min-height:26px; font-family:var(--font-sans); font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); text-decoration:none; border:1px solid var(--line-strong); border-radius:999px; padding:.14rem .6rem; }
.qa-topic:hover{ color:var(--accent); border-color:var(--accent); text-decoration:none; }
.qa-body{ display:grid; grid-template-columns:1fr 1fr; }
.qa-human{ padding:1.15rem 1.25rem; }
.qa-evidence-side{ padding:1.15rem 1.25rem; border-left:1px solid var(--line); background:linear-gradient(180deg, rgba(236,227,210,.28), transparent 120px); }
@media(max-width:780px){ .qa-body{ grid-template-columns:1fr; } .qa-evidence-side{ border-left:none; border-top:1px solid var(--line); } }
.qa-q{ font-family:var(--font-serif); font-size:1.2rem; line-height:1.42; color:var(--ink); margin:0 0 .9rem; }
.qa-lbl{ display:block; font-family:var(--font-sans); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); margin-bottom:.3rem; }
.qa-plain p{ margin:0 0 1rem; color:var(--ink-soft); line-height:1.62; }
.qa-do{ display:flex; gap:.55rem; align-items:flex-start; background:var(--safe-soft); border:1px solid #d4e0bf; border-radius:var(--radius-sm); padding:.65rem .8rem; color:var(--ink); line-height:1.5; font-size:.94rem; }
.qa-do svg{ width:20px; height:20px; flex:none; color:var(--safe); margin-top:1px; }
.qa-consensus p{ margin:0; color:var(--ink-soft); line-height:1.62; font-size:.96rem; }
.qa-consensus b, .qa-consensus strong{ color:var(--ink); }
.qa-consensus a{ color:var(--accent); }
.qa-note{ border-left:3px solid var(--accent); padding-left:.75rem; color:var(--ink-faint); font-style:italic; font-size:.9rem; margin:.95rem 0 0; }
.qa-cites{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-top:1rem; }
.qa-cites .kicker{ margin-right:.1rem; }
.qa-visual{ padding:0 1.25rem 1.2rem; border-top:1px solid var(--line); }
.qa-visual .dose-panel, .qa-visual .hazard-panel{ margin-top:1.1rem; }
.exchange.compact{ margin:.95rem 0 0; }
.exchange.compact .turn{ font-size:.86rem; }

/* by-topic band sits comfortably under the questions */
.hb-topics{ margin-top:.4rem; }

/* Emergencies — urgent but calm (caution accent, never panic-red) */
.shd-emg-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,260px),1fr)); gap:clamp(12px,2vw,18px); }
.shd-emg{ display:flex; flex-direction:column; gap:.5rem; padding:clamp(16px,2.2vw,22px); background:var(--caution-soft); border:1px solid color-mix(in srgb,var(--caution) 30%,transparent); border-left:4px solid var(--caution); border-radius:var(--radius); }
.shd-emg-flag{ display:inline-flex; align-items:center; gap:.35rem; align-self:flex-start; font-family:var(--font-sans); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--caution); }
.shd-emg-flag svg{ color:var(--caution); }
.shd-emg-sign{ font-family:var(--font-serif); font-weight:560; font-size:1.04rem; line-height:1.25; color:var(--ink); margin:0; }
.shd-emg-move{ font-size:.92rem; line-height:1.5; color:var(--ink-soft); margin:0; flex:1; }

/* Honest boundaries */
.shd-bound-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,280px),1fr)); gap:clamp(12px,2vw,18px); }
.shd-bound{ padding:clamp(18px,2.4vw,26px); background:var(--surface); border:1px solid color-mix(in srgb,var(--ink) 12%,transparent); border-radius:var(--radius); box-shadow:var(--shadow-1); transition:transform var(--t), box-shadow var(--t); transition-delay:calc(var(--i,0)*35ms); }
.shd-bound:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.shd-bound-k{ font-family:var(--font-serif); font-weight:560; font-size:1.12rem; color:var(--ink); margin:0 0 .5rem; }
.shd-bound-d{ font-size:.95rem; line-height:1.55; color:var(--ink-soft); margin:0 0 .65rem; }

/* The gauntlet ladder */
.shd-gaunt{ background:linear-gradient(180deg, color-mix(in srgb,var(--tier-s) 6%,var(--surface)), var(--surface)); border:1px solid color-mix(in srgb,var(--ink) 12%,transparent); border-radius:var(--radius); padding:clamp(20px,3vw,32px); }
.shd-gaunt-stat{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem .9rem; margin-bottom:1.3rem; }
.shd-gaunt-num{ font-family:var(--font-serif); font-weight:600; font-size:clamp(1.8rem,5vw,2.8rem); color:var(--tier-s); line-height:1; letter-spacing:-.01em; }
.shd-gaunt-lab{ font-family:var(--font-sans); font-size:.86rem; font-weight:560; color:var(--ink-soft); }
.shd-gaunt-ladder{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; counter-reset:none; }
.shd-tier{ display:flex; align-items:flex-start; gap:.85rem; padding:.7rem .9rem; background:var(--surface); border:1px solid color-mix(in srgb,var(--ink) 10%,transparent); border-radius:var(--radius-sm); position:relative; }
.shd-tier::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:3px 0 0 3px; background:linear-gradient(180deg,var(--tier-s),var(--accent)); opacity:calc(.35 + var(--lit,0)); }
.shd-tier-n{ font-family:var(--font-sans); font-weight:700; font-size:.82rem; color:var(--accent); flex:none; min-width:1.9rem; padding-top:.05rem; }
.shd-tier-body{ display:flex; flex-direction:column; gap:.1rem; }
.shd-tier-name{ font-family:var(--font-sans); font-weight:600; font-size:.95rem; color:var(--ink); }
.shd-tier-t{ font-size:.86rem; color:var(--ink-faint); line-height:1.4; }
.shd-gaunt-foot{ margin:1.2rem 0 0; font-size:.9rem; line-height:1.55; color:var(--ink-soft); font-style:italic; }

/* Hero ledger stat-strip */
.shd-stats{ list-style:none; display:flex; flex-wrap:wrap; gap:clamp(14px,3vw,32px); margin:clamp(18px,3vw,26px) 0 0; padding:0; }
.shd-stats li{ display:flex; flex-direction:column; gap:.1rem; }
.shd-stat-n{ font-family:var(--font-serif); font-weight:600; font-size:clamp(1.5rem,3.4vw,2.1rem); line-height:1; color:var(--tier-s); letter-spacing:-.01em; }
.shd-stat-l{ font-family:var(--font-sans); font-size:.76rem; font-weight:560; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); }

/* ===================================================================
   THE SHIELD — godlike layer (elite UI/UX polish, tokens only)
   =================================================================== */
.shield .shd-title{ text-wrap:balance; }
.shd-title-accent{ color:var(--accent); font-style:italic; position:relative; white-space:nowrap; }
.shd-title-accent::after{ content:""; position:absolute; left:0; right:0; bottom:.03em; height:.10em; background:color-mix(in srgb,var(--accent) 26%,transparent); border-radius:2px; z-index:-1; }

/* Hero frontispiece depth + a tasteful checkmark draw */
.shd-hero::before{ content:""; position:absolute; inset:-30% -20% auto -20%; height:130%; background:radial-gradient(58% 80% at 80% 14%, color-mix(in srgb,var(--tier-s) 10%,transparent), transparent 70%); pointer-events:none; z-index:0; }
.shd-aegis{ transition:opacity .8s var(--t); }
.shd-aegis-chk{ stroke-dasharray:64; stroke-dashoffset:64; animation:shd-draw 1100ms 280ms var(--t) forwards; }
@keyframes shd-draw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce){ .shd-aegis-chk{ animation:none; stroke-dashoffset:0; } }

/* Chapter-marker section headers — number + hairline rule */
.shd-h::after{ content:""; flex:1 1 auto; height:1px; background:linear-gradient(90deg, color-mix(in srgb,var(--ink) 18%,transparent), transparent); margin-left:.5rem; align-self:center; }
.shd-h-n{ font-variant-numeric:tabular-nums; }

/* Doctrine cards — top accent sweep + kicker dot */
.shd-card{ isolation:isolate; }
.shd-card::after{ content:""; position:absolute; inset:0 0 auto 0; height:2px; background:linear-gradient(90deg,var(--tier-s),var(--accent)); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--t); z-index:2; }
.shd-card:hover::after{ transform:scaleX(1); }
.shd-kicker::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-right:.45rem; vertical-align:middle; }

/* Atlas rows — hover tint, open spine intensify */
.shd-row:hover{ border-color:color-mix(in srgb,var(--accent) 28%,transparent); }
.shd-row-sum:hover{ background:color-mix(in srgb,var(--accent-soft) 50%,transparent); }
.shd-row[open]{ border-left-width:4px; }

/* Gauntlet ladder — ramping spine intensity + hover advance */
.shd-tier{ transition:transform var(--t), border-color var(--t); }
.shd-tier:nth-child(1){--lit:0} .shd-tier:nth-child(2){--lit:.12} .shd-tier:nth-child(3){--lit:.24} .shd-tier:nth-child(4){--lit:.36} .shd-tier:nth-child(5){--lit:.48} .shd-tier:nth-child(6){--lit:.58} .shd-tier:nth-child(7){--lit:.65}
.shd-tier:hover{ transform:translateX(3px); border-color:color-mix(in srgb,var(--accent) 32%,transparent); }

/* Emergency cards — gentle lift */
.shd-emg{ transition:transform var(--t), box-shadow var(--t); }
.shd-emg:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }

/* Reveal — whisper of scale */
.shield .reveal{ transform:translateY(16px) scale(.992); }
.shield .reveal.in{ transform:none; }

/* Footer — centered, ruled */
.shd-foot{ text-align:center; border-top:1px solid color-mix(in srgb,var(--ink) 8%,transparent); margin-top:.5rem; }
.shd-foot p{ margin-inline:auto; }

/* ---- Handbook godlike pass (UIUX-BRAIN doctrine: icon-arrays, two-axis nav, calm motion) ---- */
/* hero scope row: honest "what's inside" at a glance */
.hb-scope{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem .9rem; padding:0; margin:1.1rem 0 0; }
.hb-scope li{ font-family:var(--font-sans); font-size:.82rem; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.32rem .8rem; }
.hb-scope strong{ color:var(--accent); font-weight:700; }

/* two-axis worry navigation — her mental model, jump to the loudest worry */
.worry-nav{ display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; margin:.4rem 0 1.6rem; }
@media(max-width:760px){ .worry-nav{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:430px){ .worry-nav{ grid-template-columns:1fr; } }
.worry-card{ display:flex; flex-direction:column; align-items:flex-start; gap:.18rem; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:.85rem .95rem;
  box-shadow:var(--shadow-1); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.worry-card svg{ width:26px; height:26px; color:var(--accent); margin-bottom:.2rem; }
.worry-card .wc-step{ font-family:var(--font-sans); font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); }
.worry-card .wc-title{ font-family:var(--font-serif); font-size:1.02rem; line-height:1.22; color:var(--ink); }
.worry-card .wc-meta{ font-family:var(--font-sans); font-size:.76rem; color:var(--ink-faint); margin-top:.1rem; }
.worry-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--line-strong); }
.worry-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* risk-array — the doctrine's signature "X in 100" risk primitive (distinct from the legacy .icon-array waffle) */
.risk-array{ display:block; width:100%; box-sizing:border-box; margin:1.1rem 0 0; padding:1rem 1.1rem 1.1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); }
.ia-head{ display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap; margin-bottom:.7rem; }
.ia-big{ font-family:var(--font-serif); font-size:1.5rem; font-weight:560; color:var(--caution); }
.ia-lbl{ font-family:var(--font-sans); font-size:.86rem; color:var(--ink-soft); }
.risk-array svg{ display:block; width:100%; max-width:330px; height:auto; aspect-ratio:1/1; }
.ia-cap{ margin:.8rem 0 0; font-size:.9rem; line-height:1.55; color:var(--ink-soft); max-width:62ch; }
.ia-cap strong{ color:var(--ink); }
.ia-cap a{ color:var(--accent); }

/* calm elevation: the fusion unit lifts gently on hover; honest, never jumpy */
.qa-unit{ transition:box-shadow .2s ease, transform .2s ease; }
.qa-unit:hover{ box-shadow:var(--shadow-2); }
.qa-topic:focus-visible, .qa-cites a:focus-visible, .qa-consensus a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion: reduce){
  .worry-card, .qa-unit{ transition:none; }
  .worry-card:hover{ transform:none; }
}

/* Atlas row — the real patient question (detail-on-demand, quiet quote) */
.shd-row-q{ margin:.1rem 0 .7rem; padding:.55rem .8rem; background:color-mix(in srgb,var(--paper-2) 45%,transparent); border-left:2px solid color-mix(in srgb,var(--ink) 18%,transparent); border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-family:var(--font-serif); font-style:italic; font-size:.92rem; line-height:1.5; color:var(--ink-soft); }
.shd-row-q-lab{ display:block; font-family:var(--font-sans); font-style:normal; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:.2rem; }

/* Atlas controls bar — legend + open/close-all */
.shd-atlas-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem 1rem; margin:0 0 1.1rem; padding:.7rem .9rem; background:color-mix(in srgb,var(--paper-2) 35%,transparent); border:1px solid color-mix(in srgb,var(--ink) 10%,transparent); border-radius:var(--radius-sm); }
.shd-legend{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; }
.shd-leg-item{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-sans); font-size:.78rem; color:var(--ink-faint); }
.shd-toggle-all{ font-family:var(--font-sans); font-size:.8rem; font-weight:560; color:var(--accent); background:var(--surface); border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); border-radius:999px; padding:.45rem .9rem; cursor:pointer; min-height:32px; transition:all var(--t); }
.shd-toggle-all:hover{ background:var(--accent-soft); border-color:var(--accent); }
.shd-toggle-all:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Atlas search */
.shd-search{ display:inline-flex; align-items:center; gap:.5rem; flex:1 1 220px; min-width:160px; padding:.4rem .7rem; background:var(--surface); border:1px solid color-mix(in srgb,var(--ink) 16%,transparent); border-radius:999px; color:var(--ink-faint); transition:border-color var(--t); }
.shd-search:focus-within{ border-color:var(--accent); color:var(--accent); outline:2px solid var(--accent); outline-offset:2px; }
.shd-search-in{ flex:1; min-width:0; border:0; background:transparent; font-family:var(--font-sans); font-size:.86rem; color:var(--ink); min-height:28px; }
.shd-search-in::placeholder{ color:var(--ink-faint); }
.shd-search-in:focus{ outline:none; }
.shd-row.shd-srch-hide{ display:none; }
.shd-atlas-none{ padding:clamp(20px,4vw,32px); text-align:center; color:var(--ink-faint); font-style:italic; background:color-mix(in srgb,var(--paper-2) 40%,transparent); border-radius:var(--radius); }

/* Persona strip — the brain's authorial voice */
.shd-persona{ display:flex; gap:clamp(14px,2.5vw,22px); align-items:flex-start; margin:clamp(20px,3vw,30px) 0 0; padding:clamp(18px,2.6vw,26px); background:linear-gradient(180deg, color-mix(in srgb,var(--tier-s) 5%,var(--surface)), var(--surface)); border:1px solid color-mix(in srgb,var(--ink) 10%,transparent); border-radius:var(--radius); }
.shd-persona-sigil{ flex:none; width:clamp(28px,5vw,40px); height:auto; color:var(--tier-s); margin-top:.15rem; }
.shd-persona-q{ font-family:var(--font-serif); font-size:clamp(1rem,1.7vw,1.18rem); line-height:1.5; color:var(--ink); margin:0 0 .55rem; max-width:64ch; }
.shd-persona-q em{ font-style:italic; color:var(--accent); }
.shd-persona-by{ font-family:var(--font-sans); font-weight:600; font-size:.86rem; color:var(--ink-soft); margin:0; }
.shd-persona-ep{ color:var(--tier-s); font-weight:560; }

/* Atlas result count */
.shd-bar-actions{ display:inline-flex; align-items:center; gap:.7rem; }
.shd-count{ font-family:var(--font-sans); font-size:.78rem; font-weight:560; color:var(--ink-faint); white-space:nowrap; }

/* Print — The Shield prints as a clean document (handbook is meant to be saved/shared) */
@media print{
  .shield .reveal{ opacity:1 !important; transform:none !important; }
  .shd-aegis, .shd-subnav, .shd-chips, .shd-search, .shd-toggle-all, .shd-bar-actions{ display:none !important; }
  .shd-hero::before{ display:none !important; }
  .shd-atlas-bar{ background:none; border:0; padding:0; }
  .shd-row[data-search]{ /* force every atlas row open in print */ }
  .shd-row{ break-inside:avoid; }
  details.shd-row > .shd-row-body{ display:block !important; }
  .shd-card, .shd-bound, .shd-emg, .shd-gaunt, .shd-tier{ break-inside:avoid; box-shadow:none; }
  .shd-grp.shd-hide{ display:block !important; }
  .shd-row.shd-srch-hide{ display:block !important; }
  .shield{ max-width:none; }
}

/* Programmatic heading focus (jump target) — no outline, but keep keyboard focus-visible */
.shd-h:focus:not(:focus-visible){ outline:none; }
.shd-h:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* More from The Shield — the judgment-calls index */
.shd-more{ margin-top:clamp(20px,3vw,30px); padding-top:clamp(18px,2.5vw,26px); border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent); }
.shd-more-h{ font-family:var(--font-sans); font-weight:700; font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); margin:0 0 .9rem; }
.shd-more-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:.65rem; }
.shd-more-card{ display:flex; flex-direction:column; gap:.2rem; padding:.8rem .9rem; background:var(--surface); border:1px solid color-mix(in srgb,var(--ink) 11%,transparent); border-radius:var(--radius-sm); text-decoration:none; transition:border-color var(--t), transform var(--t), box-shadow var(--t); }
.shd-more-card:hover{ border-color:color-mix(in srgb,var(--accent) 45%,transparent); transform:translateY(-2px); box-shadow:var(--shadow-1); }
.shd-more-t{ font-family:var(--font-serif); font-weight:560; font-size:1rem; color:var(--ink); line-height:1.2; }
.shd-more-d{ font-size:.84rem; color:var(--ink-soft); line-height:1.4; }
.shd-more-id{ font-family:var(--font-sans); font-size:.74rem; font-weight:600; color:var(--accent); margin-top:.15rem; }

/* Aegis — on narrow screens, shrink + fade to a faint corner emblem so it never competes with the wrapping title */
@media (max-width:640px){
  .shd-aegis{ width:84px; opacity:.26; top:4px; right:0; }
}
@media (max-width:380px){
  .shd-aegis{ width:64px; opacity:.2; }
}

/* Sections clear the sticky sub-nav for browser-find / anchor / keyboard scrolling */
.shd-sec, .shd-hero{ scroll-margin-top:84px; }

/* Emergency cards are now whole-card links (larger tap target for urgent content) */
a.shd-emg{ text-decoration:none; color:inherit; }
a.shd-emg:focus-visible{ outline:2px solid var(--caution); outline-offset:3px; }
.shd-emg-cite{ font-family:var(--font-sans); font-size:.78rem; font-weight:600; color:var(--caution); margin-top:.15rem; }
a.shd-emg:hover .shd-emg-cite{ text-decoration:underline; }

/* Footer — mission + wayfinding */
.shd-foot-mission{ font-family:var(--font-serif); font-size:clamp(1.05rem,2vw,1.3rem); line-height:1.5; color:var(--ink); max-width:54ch; margin:0 auto 1.1rem; }
.shd-foot-mission em{ color:var(--accent); font-style:italic; }
.shd-foot-links{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:center; margin-bottom:1.1rem; }
.shd-foot-note{ font-size:.86rem; color:var(--ink-faint); }

/* Closing dedication — The Radical's benediction for the discharged reader. Healing, elegant, honest:
   it vows to keep looking, it never claims to have found. Mirrors the home dedication's reverence. */
.shd-dedication{ text-align:center; margin-top:clamp(36px,6vw,64px); padding:clamp(30px,5vw,56px) clamp(20px,4vw,44px); border-radius:var(--radius); border:1px solid color-mix(in srgb, var(--tier-s) 22%, transparent); background:linear-gradient(180deg, color-mix(in srgb, var(--tier-s) 6%, var(--surface)), var(--surface)); }
.shd-ded-eyebrow{ display:block; font-family:var(--font-sans); font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--tier-s); margin-bottom:.6rem; }
.shd-ded-ornament{ display:block; width:128px; height:24px; color:color-mix(in srgb, var(--tier-s) 60%, transparent); margin:0 auto .35rem; }
.shd-ded-h{ font-family:var(--font-serif); font-weight:560; font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1.18; color:var(--ink); margin:.1rem 0 1.15rem; }
.shd-ded-body{ max-width:60ch; margin:0 auto; }
.shd-ded-body p{ font-family:var(--font-serif); font-size:clamp(1rem,1.5vw,1.12rem); line-height:1.64; color:var(--ink-soft); margin:0 0 1rem; }
.shd-ded-body em{ font-style:italic; color:var(--accent); }
.shd-ded-creed-line strong{ color:var(--ink); font-weight:600; }
.shd-ded-to{ font-family:var(--font-serif); font-style:italic; font-size:1.02rem; color:var(--ink-faint); margin:1.5rem 0 .35rem; }
.shd-ded-vow{ font-family:var(--font-serif); font-weight:600; font-size:clamp(1.15rem,2.2vw,1.5rem); letter-spacing:.005em; color:var(--accent); margin:0; }

/* ============ THE RADICAL'S READ (10) — Dr. Anne Sorensen weighs in on the whole map ============ */
.shd-sec-radical{ margin-top:clamp(8px,1.5vw,16px); }
/* Persona — tier-S plum tint (research team), distinct from the frontier's copper Maverick voice */
.shd-rad-persona{ display:flex; gap:clamp(12px,2.2vw,20px); align-items:flex-start; margin:0 0 clamp(16px,2.6vw,24px); padding:clamp(16px,2.4vw,24px); background:linear-gradient(180deg, color-mix(in srgb,var(--tier-s) 6%,var(--surface)), var(--surface)); border:1px solid color-mix(in srgb,var(--ink) 10%,transparent); border-left:3px solid var(--tier-s); border-radius:var(--radius); }
.shd-rad-sigil{ flex:none; width:clamp(28px,5vw,40px); height:auto; color:var(--tier-s); margin-top:.15rem; }
.shd-rad-persona-q{ font-family:var(--font-serif); font-size:clamp(1rem,1.7vw,1.18rem); line-height:1.5; color:var(--ink); margin:0 0 .55rem; max-width:64ch; }
.shd-rad-persona-q em{ font-style:italic; color:var(--accent); }
.shd-rad-persona-by{ font-family:var(--font-sans); font-weight:600; font-size:.86rem; color:var(--ink-soft); margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .6rem; }
.shd-rad-persona-ep{ color:var(--tier-s); font-weight:560; }
.shd-rad-persona-new{ font-weight:500; font-size:.76rem; color:var(--ink-faint); font-style:italic; }
/* The First Law — her guiding boundary (accent tint: a law, not an alarm) */
.shd-rad-law{ display:flex; gap:clamp(12px,2vw,18px); align-items:flex-start; margin:0 0 clamp(16px,2.6vw,24px); padding:clamp(16px,2.4vw,22px) clamp(16px,2.6vw,24px); background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 7%,var(--surface)), var(--surface)); border:1px solid color-mix(in srgb,var(--accent) 24%,transparent); border-left:4px solid var(--accent); border-radius:var(--radius); box-shadow:var(--shadow-1); }
.shd-rad-law > svg{ flex:none; color:var(--accent); margin-top:.15rem; }
.shd-rad-law-h{ font-family:var(--font-serif); font-weight:560; font-size:clamp(1.05rem,1.9vw,1.28rem); color:var(--ink); margin:0 0 .35rem; }
.shd-rad-law-d{ font-size:.94rem; line-height:1.55; color:var(--ink-soft); margin:0 0 .6rem; max-width:64ch; }
.shd-rad-law-d em{ font-style:normal; font-weight:700; color:var(--accent); }
/* Verdict filter chips */
.shd-rad-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 .9rem; }
.shd-rad-chip{ font-family:var(--font-sans); font-size:.82rem; font-weight:560; color:var(--ink-soft); background:var(--surface); border:1px solid color-mix(in srgb,var(--ink) 16%,transparent); border-radius:999px; padding:.5rem .9rem; cursor:pointer; transition:all var(--t); min-height:32px; }
.shd-rad-chip:hover{ border-color:var(--accent); color:var(--accent); }
.shd-rad-chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.shd-rad-chip.active .shd-chip-n{ background:rgba(255,255,255,.22); color:#fff; }
.shd-rad-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* The verdict grid of cards */
.shd-rad-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:clamp(12px,1.8vw,18px); margin-top:.4rem; }
.shd-rad-card{ display:flex; flex-direction:column; gap:.55rem; padding:clamp(15px,2vw,20px); background:var(--surface); border:1px solid color-mix(in srgb,var(--ink) 12%,transparent); border-radius:var(--radius); text-decoration:none; transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
.shd-rad-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:color-mix(in srgb,var(--accent) 40%,transparent); }
.shd-rad-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.shd-rad-card.shd-hide{ display:none; }
.shd-rad-card-top{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .5rem; }
.shd-rad-card-t{ font-family:var(--font-serif); font-weight:560; font-size:clamp(1.02rem,1.6vw,1.16rem); line-height:1.3; color:var(--ink); }
.shd-rad-card-read{ font-size:.9rem; line-height:1.55; color:var(--ink-soft); }
.shd-rad-card-cite{ margin-top:auto; font-family:var(--font-sans); font-weight:600; font-size:.78rem; color:var(--accent); font-variant-numeric:tabular-nums; }
.shd-rad-none{ font-family:var(--font-serif); font-style:italic; color:var(--ink-faint); margin:.6rem 0 0; }
.shd-rad-foot{ margin-top:clamp(16px,2.4vw,22px); font-size:.92rem; color:var(--ink-soft); }
/* Anne's read on each brain's section page — her site-wide margin note */
.section-note .sn-radical{ display:block; margin-top:.7rem; padding-top:.7rem; border-top:1px dashed color-mix(in srgb,var(--tier-s) 32%,transparent); color:var(--ink-soft); }
.section-note .sn-radical-by{ display:inline-flex; align-items:center; gap:.3rem; font-family:var(--font-sans); font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--tier-s); margin-right:.4rem; }
.section-note .sn-radical-by svg{ width:13px; height:13px; color:var(--tier-s); }

/* Chip counts */
.shd-chip-n{ display:inline-flex; align-items:center; justify-content:center; min-width:1.25em; padding:0 .25em; margin-left:.15em; font-size:.72em; font-weight:700; border-radius:999px; background:color-mix(in srgb,var(--ink) 10%,transparent); color:var(--ink-faint); }
.shd-chip.active .shd-chip-n{ background:rgba(255,255,255,.22); color:#fff; }

/* ============ THE FRONTIER (06) — investigational edge & alternative shelf, graded honestly ============ */
.shd-sec-fr{ margin-top:clamp(8px,1.5vw,16px); }
/* The substitution boundary — the danger line the whole section obeys (clay/warning accent, calm not alarmist) */
.shd-fr-boundary{ display:flex; gap:clamp(12px,2vw,18px); align-items:flex-start; margin:0 0 clamp(18px,3vw,28px); padding:clamp(16px,2.4vw,22px) clamp(16px,2.6vw,24px); background:linear-gradient(180deg, color-mix(in srgb,var(--warning) 7%,var(--surface)), var(--surface)); border:1px solid color-mix(in srgb,var(--warning) 26%,transparent); border-left:4px solid var(--warning); border-radius:var(--radius); box-shadow:var(--shadow-1); }
.shd-fr-boundary > svg{ flex:none; color:var(--warning); margin-top:.15rem; }
.shd-fr-boundary-h{ font-family:var(--font-serif); font-weight:560; font-size:clamp(1.05rem,1.9vw,1.28rem); color:var(--ink); margin:0 0 .35rem; }
.shd-fr-boundary-d{ font-size:.94rem; line-height:1.55; color:var(--ink-soft); margin:0 0 .6rem; max-width:64ch; }
.shd-fr-boundary-d em{ font-style:normal; font-weight:700; color:var(--warning); }
/* Frontier class chips */
.shd-fr-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 .9rem; }
.shd-fr-chip{ font-family:var(--font-sans); font-size:.82rem; font-weight:560; color:var(--ink-soft); background:var(--surface); border:1px solid color-mix(in srgb,var(--ink) 16%,transparent); border-radius:999px; padding:.5rem .9rem; cursor:pointer; transition:all var(--t); min-height:32px; }
.shd-fr-chip:hover{ border-color:var(--accent); color:var(--accent); }
.shd-fr-chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.shd-fr-chip.active .shd-chip-n{ background:rgba(255,255,255,.22); color:#fff; }
.shd-fr-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* Verdict legend + pills */
.shd-fr-legend{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem; margin:0 0 clamp(16px,2.6vw,24px); padding:.6rem .85rem; background:color-mix(in srgb,var(--paper-2) 32%,transparent); border:1px solid color-mix(in srgb,var(--ink) 10%,transparent); border-radius:var(--radius-sm); }
.shd-fr-leg-note{ font-family:var(--font-sans); font-size:.76rem; font-style:italic; color:var(--ink-faint); margin-left:auto; }
.shd-fr-verdict{ display:inline-flex; align-items:center; gap:.32rem; font-family:var(--font-sans); font-size:.72rem; font-weight:700; letter-spacing:.01em; padding:.2rem .55rem; border-radius:999px; border:1px solid currentColor; white-space:nowrap; }
.shd-fr-verdict svg{ flex:none; }
.shd-fr-verdict.v-ok{   color:var(--safe);    background:var(--safe-soft); }
.shd-fr-verdict.v-warm{ color:var(--caution); background:var(--caution-soft); }
.shd-fr-verdict.v-open{ color:var(--ink-faint); background:var(--info-soft); }
.shd-fr-verdict.v-no{   color:var(--warning); background:var(--warning-soft); }
/* The grader's voice — the Maverick frames the frontier (gate authorship made visible; copper tint vs Haddad's plum) */
.shd-fr-voice{ display:flex; gap:clamp(12px,2.2vw,20px); align-items:flex-start; margin:0 0 clamp(18px,3vw,28px); padding:clamp(16px,2.4vw,24px); background:linear-gradient(180deg, color-mix(in srgb,var(--terracotta) 6%,var(--surface)), var(--surface)); border:1px solid color-mix(in srgb,var(--ink) 10%,transparent); border-left:3px solid var(--terracotta); border-radius:var(--radius); }
.shd-fr-voice-sigil{ flex:none; width:clamp(26px,4.5vw,34px); height:auto; color:var(--terracotta); margin-top:.15rem; }
.shd-fr-voice-q{ font-family:var(--font-serif); font-size:clamp(1rem,1.7vw,1.16rem); line-height:1.5; color:var(--ink); margin:0 0 .55rem; max-width:64ch; }
.shd-fr-voice-q em{ font-style:italic; color:var(--accent); }
.shd-fr-voice-by{ font-family:var(--font-sans); font-weight:600; font-size:.86rem; color:var(--ink-soft); margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .6rem; }
.shd-fr-voice-ep{ color:var(--terracotta); font-weight:560; }
.shd-fr-voice-gate{ font-weight:500; font-size:.76rem; color:var(--ink-faint); font-style:italic; }
/* Honest distribution ribbon — the frontier's grading, mapped (honesty-by-design, computed from the entries) */
.shd-fr-tally{ margin:0 0 clamp(18px,3vw,28px); }
.shd-fr-tally-bar{ display:flex; gap:3px; height:30px; border-radius:999px; overflow:hidden; }
.shd-fr-tally-seg{ flex:var(--n) 1 0; min-width:36px; display:flex; align-items:center; justify-content:center; border-top:3px solid currentColor; }
.shd-fr-tally-seg.v-ok{   color:var(--safe);      background:var(--safe-soft); }
.shd-fr-tally-seg.v-warm{ color:var(--caution);   background:var(--caution-soft); }
.shd-fr-tally-seg.v-open{ color:var(--ink-faint); background:var(--info-soft); }
.shd-fr-tally-seg.v-no{   color:var(--warning);   background:var(--warning-soft); }
.shd-fr-tally-n{ font-family:var(--font-sans); font-weight:700; font-size:.82rem; font-variant-numeric:tabular-nums; }
.shd-fr-tally-cap{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem 1.1rem; margin:.6rem 0 0; }
.shd-fr-tally-keys{ display:inline-flex; flex-wrap:wrap; gap:.4rem .9rem; }
.shd-fr-tally-key{ display:inline-flex; align-items:center; gap:.34rem; font-family:var(--font-sans); font-size:.74rem; font-weight:600; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.shd-fr-tally-dot{ width:9px; height:9px; border-radius:3px; flex:none; }
.shd-fr-tally-dot.v-ok{ background:var(--safe); }
.shd-fr-tally-dot.v-warm{ background:var(--caution); }
.shd-fr-tally-dot.v-open{ background:var(--ink-faint); }
.shd-fr-tally-dot.v-no{ background:var(--warning); }
.shd-fr-tally-line{ font-family:var(--font-serif); font-style:italic; font-size:.92rem; color:var(--ink-soft); }
.shd-fr-tally-line em{ font-style:italic; color:var(--accent); }
/* Lanes + rows */
.shd-fr-grid{ display:flex; flex-direction:column; gap:clamp(20px,3vw,30px); }
.shd-fr-lane.shd-hide{ display:none; }
.shd-fr-lane-h{ font-family:var(--font-sans); font-weight:700; font-size:.76rem; text-transform:uppercase; letter-spacing:.07em; color:var(--accent); margin:0 0 .8rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .8rem; }
.shd-fr-lane-note{ font-weight:560; text-transform:none; letter-spacing:0; font-size:.8rem; color:var(--ink-faint); }
.shd-fr-rows{ display:flex; flex-direction:column; gap:.6rem; }
/* godlike tap floor (>=28px, sub-pixel-safe) for the frontier cite links — esp. on mobile */
.shd-fr-row .shd-row-cite, .shd-fr-boundary .shd-row-cite{ min-height:32px; }
/* AA: deepen the plum tier-S badge letter on the frontier (3.09 -> >=4.5); frontier-scoped, atlas unchanged */
.shd-fr-row .shd-row-tier.tier-s{ color:color-mix(in srgb, var(--tier-s) 58%, var(--ink)); background:color-mix(in srgb,var(--tier-s) 12%,transparent); }
.shd-fr-row{ background:var(--surface); border:1px solid color-mix(in srgb,var(--ink) 11%,transparent); border-left:3px solid var(--line-strong); border-radius:var(--radius-sm); transition:border-color var(--t), box-shadow var(--t); }
.shd-fr-row.v-ok{   border-left-color:var(--safe); }
.shd-fr-row.v-warm{ border-left-color:var(--caution); }
.shd-fr-row.v-open{ border-left-color:var(--ink-faint); }
.shd-fr-row.v-no{   border-left-color:var(--warning); }
.shd-fr-row[open]{ box-shadow:var(--shadow-1); border-left-width:5px; }
.shd-fr-sum{ display:flex; align-items:center; justify-content:space-between; gap:.6rem 1rem; flex-wrap:wrap; padding:.85rem 1rem; cursor:pointer; list-style:none; min-height:44px; }
.shd-fr-sum::-webkit-details-marker{ display:none; }
.shd-fr-row summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm); }
.shd-fr-name{ font-family:var(--font-serif); font-weight:560; font-size:clamp(1rem,1.7vw,1.12rem); line-height:1.25; color:var(--ink); }
.shd-fr-meta{ display:inline-flex; align-items:center; gap:.45rem; flex:none; }
/* expand affordance — matches the atlas '+'→'×' so the dossier rows read as openable */
.shd-fr-meta::after{ content:"+"; font-size:1.2rem; line-height:1; color:var(--accent); transition:transform var(--t); flex:none; margin-left:.15rem; }
.shd-fr-row[open] .shd-fr-meta::after{ transform:rotate(45deg); }
.shd-fr-row[open] .shd-fr-name{ color:var(--accent); }
.shd-fr-body{ padding:0 1rem 1rem; display:flex; flex-direction:column; gap:.5rem; }
.shd-fr-f{ display:flex; flex-direction:column; gap:.12rem; margin:0; font-size:.92rem; line-height:1.5; color:var(--ink-soft); max-width:66ch; }
.shd-fr-lab{ font-family:var(--font-sans); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); }
.shd-fr-risk .shd-fr-lab{ color:color-mix(in srgb, var(--warning) 70%, var(--ink)); } /* AA: deepen the danger label to >=4.5 on the tinted box */
.shd-fr-risk{ padding:.5rem .75rem; background:color-mix(in srgb,var(--warning) 5%,transparent); border-radius:var(--radius-sm); }
.shd-fr-none{ padding:clamp(20px,4vw,32px); text-align:center; color:var(--ink-faint); font-style:italic; background:color-mix(in srgb,var(--paper-2) 40%,transparent); border-radius:var(--radius); }
/* Practical-protection cluster (predatory clinic / cost / not-CAR-T) — the patient's safety checklist */
.shd-fr-practical-wrap{ margin-top:clamp(22px,3.4vw,34px); padding-top:clamp(18px,2.5vw,26px); border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent); }
.shd-fr-practical-h{ font-family:var(--font-serif); font-weight:560; font-size:clamp(1.15rem,2vw,1.4rem); color:var(--ink); margin:0 0 .35rem; text-wrap:balance; }
.shd-fr-practical-lede{ font-size:.92rem; line-height:1.55; color:var(--ink-soft); margin:0 0 1rem; max-width:62ch; }
.shd-fr-practical{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:.7rem; }
.shd-fr-prac{ display:flex; flex-direction:column; gap:.3rem; padding:.95rem 1.05rem; background:var(--surface); border:1px solid color-mix(in srgb,var(--ink) 11%,transparent); border-top:3px solid var(--accent); border-radius:var(--radius-sm); text-decoration:none; transition:border-color var(--t), transform var(--t), box-shadow var(--t); }
.shd-fr-prac:hover{ transform:translateY(-2px); box-shadow:var(--shadow-1); border-top-color:var(--terracotta); }
.shd-fr-prac:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.shd-fr-prac-t{ font-family:var(--font-serif); font-weight:560; font-size:1.05rem; color:var(--ink); line-height:1.2; }
.shd-fr-prac-d{ font-size:.86rem; color:var(--ink-soft); line-height:1.45; }
.shd-fr-prac-id{ font-family:var(--font-sans); font-size:.74rem; font-weight:600; color:var(--accent); margin-top:.1rem; }
@media (prefers-reduced-motion:reduce){ .shd-fr-prac:hover, .shd-fr-row[open]{ transform:none; } }
@media print{
  .shd-fr-chips, .shd-fr-legend{ display:none !important; }
  .shd-fr-lane.shd-hide{ display:block !important; }
  .shd-fr-row{ break-inside:avoid; box-shadow:none; }
  details.shd-fr-row > .shd-fr-body{ display:flex !important; }
  .shd-fr-boundary, .shd-fr-prac{ break-inside:avoid; box-shadow:none; }
}

/* 07 · what the brains make of ivermectin — opinion grounded in cited facts (no human evidence to grade) */
.iv-ribbon{ display:flex; flex-wrap:wrap; align-items:center; gap:.55rem .9rem; margin:0 0 clamp(16px,2.4vw,22px); }
.iv-ribbon-sub{ font-size:.9rem; color:var(--ink-soft); line-height:1.5; max-width:64ch; }
.iv-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,248px),1fr)); gap:clamp(10px,1.6vw,14px); margin:0 0 clamp(18px,3vw,26px); }
.iv-fact{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(13px,1.8vw,18px); display:flex; flex-direction:column; gap:.4rem; box-shadow:var(--shadow-1); }
.iv-fact-t{ font-family:var(--font-serif); font-weight:560; font-size:1rem; line-height:1.25; color:var(--ink); margin:0; }
.iv-fact-d{ font-size:.875rem; line-height:1.5; color:var(--ink-soft); margin:0; }
.iv-fact-src{ margin-top:auto; padding-top:.3rem; font-family:var(--font-sans); font-size:.77rem; font-weight:600; color:var(--accent); min-height:32px; display:inline-flex; align-items:center; align-self:flex-start; }
.iv-fact-src:hover{ text-decoration:underline; text-underline-offset:2px; }
.iv-boundary{ margin-top:0; }
.iv-voices-h{ font-family:var(--font-serif); font-weight:560; font-size:clamp(1.15rem,2.2vw,1.4rem); color:var(--ink); margin:clamp(20px,3.5vw,32px) 0 clamp(12px,2vw,18px); }
.iv-voices{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr)); gap:clamp(12px,1.8vw,16px); }
.iv-voice{ background:linear-gradient(180deg, color-mix(in srgb,var(--fam,var(--accent)) 5%,var(--surface)), var(--surface)); border:1px solid var(--line); border-left:3px solid var(--fam,var(--accent)); border-radius:var(--radius); padding:clamp(14px,2vw,18px); display:flex; flex-direction:column; gap:.55rem; box-shadow:var(--shadow-1); }
.iv-voice-hero{ border-left-width:4px; }
.iv-voice-head{ display:flex; align-items:center; gap:.6rem; }
.iv-voice-sigil{ flex:none; width:26px; height:26px; color:var(--fam,var(--accent)); }
.iv-voice-id{ display:flex; flex-direction:column; line-height:1.18; min-width:0; }
.iv-voice-name{ font-family:var(--font-sans); font-weight:700; font-size:.9rem; color:var(--ink); }
.iv-voice-ep{ font-family:var(--font-sans); font-size:.73rem; font-weight:600; letter-spacing:.02em; color:var(--fam,var(--accent)); }
.iv-voice-q{ font-family:var(--font-serif); font-size:.96rem; line-height:1.5; color:var(--ink-soft); margin:0; }
.iv-voice-q em{ font-style:italic; color:var(--ink); font-weight:500; }
.iv-foot{ margin:clamp(18px,3vw,26px) 0 0; font-family:var(--font-serif); font-size:clamp(1rem,1.8vw,1.16rem); line-height:1.5; color:var(--ink); max-width:66ch; }
@media print{ .iv-voice, .iv-fact, .iv-boundary{ break-inside:avoid; box-shadow:none; } }

/* tier badges for B/C — used by the frontier + the repurposed/foods sections */
.shd-row-tier.tier-b{ background:var(--caution-soft); color:var(--tier-b); }
.shd-row-tier.tier-c{ background:var(--paper-2); color:var(--tier-c); }

/* 07 · other repurposed drugs */
.rp-provenance{ margin-bottom:clamp(16px,2.6vw,24px); }
.rp-rows{ margin-bottom:clamp(20px,3vw,28px); }
.rp-panel span strong{ color:var(--accent); font-weight:700; }
.rp-chip, .dn-chips a{ display:inline-flex; align-items:center; min-height:30px; padding:.25rem .65rem; border:1px solid var(--line-strong); border-radius:999px; font-family:var(--font-sans); font-size:.78rem; font-weight:600; color:var(--accent); background:var(--surface); }
.rp-chip:hover, .dn-chips a:hover{ border-color:var(--accent); background:var(--accent-soft); }

/* 08 · food & nutrition — unified panel */
.foods-layer{ margin-bottom:clamp(20px,3.2vw,32px); }
.foods-h{ font-family:var(--font-serif); font-weight:560; font-size:clamp(1.1rem,2vw,1.35rem); color:var(--ink); margin:clamp(18px,3vw,28px) 0 .2rem; }
.foods-layer:first-of-type .foods-h{ margin-top:clamp(10px,1.6vw,16px); }
.foods-sub{ color:var(--ink-soft); font-size:.92rem; line-height:1.5; max-width:64ch; margin:0 0 1rem; }
.foods-levers .iv-fact{ border-left:3px solid var(--safe); }
.iv-fact-t .shd-row-tier{ vertical-align:middle; margin-left:.35rem; }
.foods-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 .85rem; }
.foods-chip{ font-family:var(--font-sans); font-size:.82rem; font-weight:560; color:var(--ink-soft); background:var(--surface); border:1px solid color-mix(in srgb,var(--ink) 16%,transparent); border-radius:999px; padding:.5rem .9rem; cursor:pointer; transition:background var(--t),border-color var(--t),color var(--t); min-height:44px; display:inline-flex; align-items:center; }
.foods-chip:hover{ border-color:var(--accent); color:var(--accent); }
.foods-chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.foods-chip.active .shd-chip-n{ background:rgba(255,255,255,.22); color:#fff; }
.foods-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.foods-shelf-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:clamp(10px,1.6vw,14px); }
.foods-shelf-card{ display:flex; flex-direction:column; gap:.45rem; padding:clamp(13px,1.8vw,17px); background:var(--surface); border:1px solid color-mix(in srgb,var(--ink) 12%,transparent); border-radius:var(--radius-sm); text-decoration:none; transition:transform var(--t),box-shadow var(--t),border-color var(--t); }
a.foods-shelf-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-1); border-color:color-mix(in srgb,var(--accent) 38%,transparent); }
a.foods-shelf-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.foods-shelf-card.foods-hide{ display:none; }
.foods-shelf-top{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .45rem; }
.foods-shelf-n{ font-family:var(--font-serif); font-weight:560; font-size:clamp(1rem,1.5vw,1.1rem); line-height:1.3; color:var(--ink); }
.foods-shelf-s{ font-size:.86rem; line-height:1.48; color:var(--ink-soft); }
.foods-shelf-cite{ margin-top:auto; font-family:var(--font-sans); font-weight:600; font-size:.76rem; color:var(--accent); font-variant-numeric:tabular-nums; }
.foods-shelf-none{ font-family:var(--font-serif); font-style:italic; color:var(--ink-faint); margin:.5rem 0 0; }
.foods-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,222px),1fr)); gap:clamp(10px,1.5vw,13px); }
.food-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.8rem .9rem; display:flex; flex-direction:column; gap:.3rem; }
.food-name{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; font-family:var(--font-sans); font-weight:700; font-size:.9rem; color:var(--ink); }
.food-state{ font-size:.84rem; line-height:1.45; color:var(--ink-soft); }
.foods-myths{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,258px),1fr)); gap:clamp(10px,1.6vw,14px); }
.foods-myth{ background:color-mix(in srgb,var(--warning) 5%,var(--surface)); border:1px solid color-mix(in srgb,var(--warning) 22%,transparent); border-radius:var(--radius-sm); padding:.85rem 1rem; }
.foods-myth-m{ font-family:var(--font-serif); font-weight:600; font-size:.97rem; color:var(--ink); margin:0 0 .25rem; text-decoration:line-through; text-decoration-color:color-mix(in srgb,var(--warning) 55%,transparent); }
.foods-myth-r{ font-size:.86rem; line-height:1.5; color:var(--ink-soft); margin:0; }
@media (prefers-reduced-motion:reduce){ a.foods-shelf-card:hover{ transform:none; } }

/* 09 · dendritic-cell nested summary */
.dn-persona{ margin-bottom:clamp(16px,2.6vw,22px); }
.dn-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr)); gap:clamp(10px,1.6vw,14px); margin-bottom:clamp(14px,2.4vw,20px); }
.dn-col{ background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--line-strong); border-radius:var(--radius-sm); padding:1rem 1.05rem; }
.dn-col.dn-ok{ border-top-color:var(--safe); }
.dn-col.dn-open{ border-top-color:var(--ink-faint); }
.dn-col.dn-warm{ border-top-color:var(--accent); }
.dn-col-h{ font-family:var(--font-sans); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:0 0 .4rem; }
.dn-col-d{ font-size:.9rem; line-height:1.5; color:var(--ink-soft); margin:0; }
.dn-chips-wrap{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:clamp(14px,2.4vw,20px); }
.dn-chips-lab{ font-family:var(--font-sans); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); }
.dn-chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.dn-cta{ display:block; background:linear-gradient(180deg,color-mix(in srgb,var(--terracotta) 7%,var(--surface)),var(--surface)); border:1px solid color-mix(in srgb,var(--terracotta) 26%,transparent); border-left:4px solid var(--terracotta); border-radius:var(--radius); padding:clamp(14px,2.2vw,20px); transition:box-shadow var(--t),transform var(--t); }
.dn-cta:hover{ box-shadow:var(--shadow-1); transform:translateY(-2px); }
.dn-cta:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.dn-cta-t{ display:block; font-family:var(--font-serif); font-weight:560; font-size:1.1rem; color:var(--ink); }
.dn-cta-d{ display:block; font-size:.88rem; line-height:1.5; color:var(--ink-soft); margin:.25rem 0 .5rem; max-width:62ch; }
.dn-cta-go{ display:inline-flex; font-family:var(--font-sans); font-weight:600; font-size:.85rem; color:var(--terracotta); }

/* 10 · using this with your team */
.team-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,258px),1fr)); gap:clamp(12px,1.8vw,16px); }
.team-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(14px,2vw,20px); }
.team-h{ font-family:var(--font-serif); font-weight:560; font-size:1.06rem; color:var(--ink); margin:0 0 .4rem; }
.team-d{ font-size:.9rem; line-height:1.55; color:var(--ink-soft); margin:0; }
.team-d em{ font-style:normal; font-weight:600; color:var(--ink); }
.team-trust{ display:flex; align-items:flex-start; gap:.55rem; margin:clamp(16px,2.6vw,22px) 0 0; padding:.85rem 1rem; background:var(--accent-soft); border-radius:var(--radius-sm); font-size:.86rem; line-height:1.5; color:var(--ink-soft); }
.team-trust svg{ flex:none; color:var(--safe); margin-top:2px; }
@media print{ .food-card,.dn-col,.dn-cta,.team-card,.foods-myth,.foods-shelf-card{ break-inside:avoid; box-shadow:none; } }
@media (prefers-reduced-motion:reduce){ .dn-cta:hover{ transform:none; } }

/* converged-plan purpose line — frames the densest block as the take-to-your-team synthesis */
.plan-purpose{ display:flex; gap:.6rem; align-items:flex-start; margin:0 0 1rem; padding-bottom:1rem; border-bottom:1px solid var(--line-strong); font-family:var(--font-sans); font-size:.92rem; line-height:1.55; color:var(--ink-soft); }
.plan-purpose svg{ width:22px; height:22px; flex:none; color:var(--accent); margin-top:1px; }
.plan-purpose strong{ color:var(--ink); }

/* handbook print parity — each question prints as a coherent block; interactive chrome hidden */
@media print {
  .worry-nav, .ask-fab, .debate-full { display:none !important; }
  .qa-unit, .tl-banner, .hb-flow-wrap, .converge-plan, .hb-orient-tl, .persona { break-inside:avoid; box-shadow:none; }
  .qa-unit, .hb-flow-wrap, .converge-plan { border-color:#ccc; }
  .qa-head, .qa-evidence-side { background:#fff; }
  .qa-visual > * { box-shadow:none; break-inside:avoid; }
  .hb-sep::after { background:#ccc; }
}

/* consensus-flow: the horizontal diagram becomes illegible when scaled below ~600px - hide it there and let
   the caption (which describes the same flow in words) stand. Presentation-integrity across viewports. */
@media (max-width:600px){
  .consensus-flow{ display:none; }
  .hb-flow-cap{ text-align:left; margin:0; max-width:none; }
  .hb-flow-wrap{ padding:1.1rem 1.2rem; }
}

/* ===================================================================
   POLISH CAMPAIGN · iter 1 — global navigation chrome + elite
   interaction baseline. Calm-premium tokens only; reduced-motion +
   print + forced-colors safe. (demonolith: the long pages gain a
   sense of place and a one-tap way home.)
   =================================================================== */

/* reading-progress — a hairline that fills L→R as the page is read.
   Sits as a quiet accent over the very top edge of the sticky header. */
.read-progress{ position:fixed; inset:0 0 auto 0; height:3px; z-index:50; pointer-events:none; }
.read-progress__bar{ display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--copper), var(--terracotta) 58%, var(--amber));
  box-shadow:0 0 8px -1px rgba(152,95,51,.5); border-radius:0 3px 3px 0;
  transition:width .12s linear; will-change:width; }
@media (prefers-reduced-motion:reduce){ .read-progress__bar{ transition:none; } }

/* back-to-top — surfaces only after a long scroll; bottom-LEFT so it
   never collides with the Ask FAB (bottom-right, z-60). */
.to-top{ position:fixed; left:max(16px, env(safe-area-inset-left)); bottom:max(16px, env(safe-area-inset-bottom));
  z-index:55; width:48px; height:48px; display:grid; place-items:center; color:var(--accent);
  background:var(--surface-glass); -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
  border:1px solid var(--line-strong); border-radius:50%; cursor:pointer; box-shadow:var(--shadow-2);
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.94); pointer-events:none;
  transition:opacity .26s var(--t), transform .26s var(--t), visibility .26s var(--t), background var(--t), border-color var(--t); }
.to-top.show{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--surface); border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-glass); }
.to-top:active{ transform:translateY(0) scale(.95); }
.to-top svg{ width:22px; height:22px; }
.to-top:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  .to-top{ transition:opacity .26s linear, visibility .26s linear; }
  .to-top:hover{ transform:none; }
}
@media print{ .read-progress, .to-top{ display:none !important; } }
@media (forced-colors:active){ .to-top{ border-color:ButtonText; } .read-progress__bar{ background:Highlight; } }

/* elite interaction baseline — a subtle lift + tactile press on the
   primary controls; everything else inherits the existing calm hovers. */
.ns-btn{ transition:background var(--t), color var(--t), transform var(--t), box-shadow var(--t); }
.ns-btn.primary{ box-shadow:0 1px 2px rgba(67,46,20,.14); }
.ns-btn.primary:hover{ transform:translateY(-1px); box-shadow:0 9px 22px -9px rgba(152,95,51,.55); }
.ns-btn.ghost:hover{ transform:translateY(-1px); }
.ns-btn:active{ transform:translateY(0) scale(.985); }
.nav-axis a{ transition:background var(--t), color var(--t), transform var(--t), box-shadow var(--t); }
.nav-axis a.active{ box-shadow:0 4px 13px -6px rgba(152,95,51,.6); }
.nav-axis a:active{ transform:scale(.97); }
.print-btn{ transition:background var(--t), border-color var(--t), color var(--t), transform var(--t); }
.print-btn:active{ transform:scale(.97); }
@media (prefers-reduced-motion:reduce){
  .ns-btn, .nav-axis a, .print-btn{ transition:background var(--t), color var(--t), border-color var(--t); }
  .ns-btn.primary:hover, .ns-btn.ghost:hover, .ns-btn:active,
  .nav-axis a:active, .print-btn:active{ transform:none; }
}

/* ===================================================================
   POLISH CAMPAIGN · iter 2 — scroll-reveal + count-up (home + handbook).
   General .reveal; the higher-specificity .shield .reveal / method-node
   variants keep their own rules. The SPA is JS-required (the view renders
   nothing without JS), so a no-JS reader never sees hidden content.
   Reduced-motion → instant final state, no transform.
   =================================================================== */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .55s var(--t), transform .55s var(--t); will-change:opacity, transform; }
.reveal.in{ opacity:1; transform:none; will-change:auto; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }
/* hero stat strip: steady-width digits so the count-up never reflows */
.corpus-stat .stat b{ font-variant-numeric:tabular-nums; }
.corpus-stat .stat{ transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
.corpus-stat .stat:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:var(--line-strong); }
@media (prefers-reduced-motion:reduce){ .corpus-stat .stat:hover{ transform:none; } }

/* ===================================================================
   POLISH CAMPAIGN · iter 3 — the elite control system. ONE refined
   hover-lift + tactile-press language across every chip / pill / filter /
   cite-link / badge-link / card. Focus = the existing global ring.
   Tokens only; reduced-motion → no transform; mobile tap comfort ≥44px.
   =================================================================== */
/* give the whole control family a transform transition so lift + press read smoothly */
.shd-jump, .shd-chip, .shd-fr-chip, .shd-toggle-all, .chip-link, .rp-chip, .dn-chips a,
.bd-rel-chip, .qa-topic, a.badge, .shd-row-cite, .iv-fact-src, .shd-emg-cite{
  transition:background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
/* hover: a quiet 1px lift on the pill / chip / filter controls */
.shd-jump:hover, .shd-chip:hover, .shd-fr-chip:hover, .shd-toggle-all:hover,
.chip-link:hover, .rp-chip:hover, .dn-chips a:hover, .bd-rel-chip:hover, .qa-topic:hover{ transform:translateY(-1px); }
/* press: a tactile scale-in on every clickable surface */
.shd-jump:active, .shd-chip:active, .shd-fr-chip:active, .shd-toggle-all:active,
.chip-link:active, .rp-chip:active, .dn-chips a:active, .bd-rel-chip:active, .qa-topic:active,
a.badge:active, .shd-row-cite:active, .iv-fact-src:active, .shd-emg-cite:active{ transform:scale(.96); }
.card:active, a.card:active, .shd-card:active, .shd-more-card:active, .shd-bound:active,
.shd-fr-prac:active, .dn-cta:active, .arch-card:active, .worry-card:active, .fact:active, .brain-chip:active{ transform:scale(.99); }
/* the topbar search delegates its focus ring to the pill wrapper (the input clears its own
   outline) — without this, a keyboard user gets no visible focus on the main search box */
.search:focus-within{ outline:2px solid var(--accent); outline-offset:2px; }
/* touch comfort: every small pill/chip clears the 44px tap target on coarse pointers
   (qa.js runs a fine pointer, so this is verified separately by the coarse polish check) */
@media (pointer:coarse){
  .shd-jump, .shd-chip, .shd-fr-chip, .shd-toggle-all, .chip-link, .rp-chip, .dn-chips a,
  .qa-topic, a.badge, .shd-row-cite, .iv-fact-src, .shd-emg-cite{ min-height:44px; }
  .shd-fr-row .shd-row-cite, .shd-fr-boundary .shd-row-cite{ min-height:44px; } /* beat the frontier 32px floor on touch */
  .qa-topic, a.badge{ padding-block:.45rem; }
}
@media (prefers-reduced-motion:reduce){
  .shd-jump:hover, .shd-chip:hover, .shd-fr-chip:hover, .shd-toggle-all:hover,
  .chip-link:hover, .rp-chip:hover, .dn-chips a:hover, .bd-rel-chip:hover, .qa-topic:hover,
  .shd-jump:active, .shd-chip:active, .shd-fr-chip:active, .shd-toggle-all:active,
  .chip-link:active, .rp-chip:active, .dn-chips a:active, .bd-rel-chip:active, .qa-topic:active,
  a.badge:active, .shd-row-cite:active, .iv-fact-src:active, .shd-emg-cite:active,
  .card:active, a.card:active, .shd-card:active, .shd-more-card:active, .shd-bound:active,
  .shd-fr-prac:active, .dn-cta:active, .arch-card:active, .worry-card:active, .fact:active, .brain-chip:active{ transform:none; }
}

/* ===================================================================
   POLISH CAMPAIGN · iter 4 — Shield demonolith: an at-a-glance contents
   map of the ten-part page (the sticky pill sub-nav stays; this gives the
   reader the whole shape up front + a calm way in). Tokens only.
   =================================================================== */
.shd-toc{ margin:clamp(16px,2.6vw,26px) 0 clamp(6px,1.2vw,12px); }
.shd-toc-lead{ font-family:var(--font-sans); font-size:.9rem; line-height:1.5; color:var(--ink-soft); margin:0 0 .8rem; }
.shd-toc-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 212px), 1fr)); gap:.6rem; }
.shd-toc-item{ display:flex; align-items:center; gap:.7rem; width:100%; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid color-mix(in srgb, var(--ink) 11%, transparent); border-radius:var(--radius-sm);
  padding:.7rem .85rem; min-height:44px; font-family:var(--font-sans);
  transition:border-color var(--t), transform var(--t), box-shadow var(--t), background var(--t); }
.shd-toc-item:hover{ border-color:color-mix(in srgb, var(--accent) 45%, transparent); transform:translateY(-2px); box-shadow:var(--shadow-1); background:color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.shd-toc-item:active{ transform:scale(.99); }
.shd-toc-item:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.shd-toc-n{ font-family:var(--font-serif); font-weight:600; font-size:1.05rem; color:var(--accent); font-variant-numeric:tabular-nums; flex:none; min-width:1.5em; }
.shd-toc-tx{ display:flex; flex-direction:column; min-width:0; }
.shd-toc-t{ font-weight:600; font-size:.92rem; color:var(--ink); line-height:1.2; }
.shd-toc-d{ font-size:.78rem; color:var(--ink-faint); line-height:1.3; }
@media (prefers-reduced-motion:reduce){ .shd-toc-item:hover, .shd-toc-item:active{ transform:none; } }
@media print{ .shd-toc{ display:none; } }

/* ===================================================================
   POLISH CAMPAIGN · iter 5 — Handbook demonolith: a slim worry-progress
   rail that sticks just below the live topbar while reading the 15
   questions, lighting the worry in view. Hidden on phones (the cards +
   the global reading-progress carry it; the 3-row mobile header leaves
   no room for a second sticky bar). Tokens only.
   =================================================================== */
.hb-worries{ position:relative; }
.hb-rail{ display:none; }
@media (min-width:781px){
  .hb-rail{ position:sticky; top:calc(var(--topbar-h, 65px) + 8px); z-index:6;
    display:flex; flex-wrap:wrap; gap:.4rem; padding:.45rem; margin:0 0 1.3rem;
    background:var(--surface-glass); -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
    border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow-1); }
}
.hb-rail-pill{ display:inline-flex; align-items:center; gap:.45rem; min-height:38px; padding:.35rem .85rem;
  border-radius:999px; border:1px solid transparent; background:transparent; cursor:pointer;
  font-family:var(--font-sans); font-size:.84rem; font-weight:560; color:var(--ink-soft);
  transition:background var(--t), color var(--t), border-color var(--t), transform var(--t); }
.hb-rail-pill:hover{ background:var(--paper-2); color:var(--ink); }
.hb-rail-pill:active{ transform:scale(.97); }
.hb-rail-pill:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.hb-rail-pill.active{ background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 4px 13px -6px rgba(152,95,51,.6); }
.hb-rail-n{ font-variant-numeric:tabular-nums; font-weight:700; opacity:.65; }
.hb-rail-pill.active .hb-rail-n{ opacity:.9; }
.hb-rail-t{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:20ch; }
@media (prefers-reduced-motion:reduce){ .hb-rail-pill:active{ transform:none; } }
@media (forced-colors:active){ .hb-rail-pill.active{ outline:2px solid Highlight; } }
@media print{ .hb-rail{ display:none !important; } }

/* ===================================================================
   POLISH CAMPAIGN · iter 6 — Home as a calm overture: the 1-2-3 becomes
   a connected, numbered FLOW (not three loose cards), and the hero
   tightens on small screens so the headline + lede + CTA lead without a
   wall of scroll. Tokens only; reduced-motion + forced-colors safe.
   =================================================================== */
.flow-steps{ list-style:none; margin:1rem 0 1rem; padding:0; display:flex; align-items:stretch; gap:1.7rem; }
.flow-step{ flex:1 1 0; min-width:0; position:relative; display:flex; flex-direction:column; gap:.5rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.2rem;
  box-shadow:var(--shadow-1); transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
.flow-step:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:var(--line-strong); }
.flow-num{ width:36px; height:36px; flex:none; border-radius:50%; background:var(--accent-soft); color:var(--copper);
  font-family:var(--font-serif); font-weight:600; font-size:1.18rem; display:grid; place-items:center; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--copper) 22%,transparent); }
.flow-kicker{ font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; }
.flow-step h3{ font-size:1.06rem; margin:.05rem 0 .15rem; }
.flow-step p{ font-size:.89rem; color:var(--ink-soft); margin:0; line-height:1.55; max-width:none; }
/* connective tissue: a quiet arrow riding in the gap between steps (→ desktop, ↓ stacked) */
.flow-step:not(:last-child)::after{ content:"→"; position:absolute; top:50%; right:-1.2rem; transform:translateY(-50%);
  color:var(--line-strong); font-size:1.2rem; line-height:1; font-weight:400; pointer-events:none; }
@media (max-width:760px){
  .flow-steps{ flex-direction:column; gap:1.6rem; }
  .flow-step:not(:last-child)::after{ top:auto; right:auto; left:50%; bottom:-1.2rem; transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){ .flow-step:hover{ transform:none; } }
@media (forced-colors:active){ .flow-step:not(:last-child)::after{ color:CanvasText; } }

/* hero tightening on small screens → the headline + lede + CTA + stats lead with less scroll */
@media (max-width:560px){
  .hero{ padding-top:clamp(1.1rem,4vw,2rem); padding-bottom:1rem; display:flex; flex-direction:column; }
  .hero-crest{ width:clamp(64px,18vw,78px); margin-bottom:.7rem; }
  .hero .eyebrow, .hero-kicker{ margin-bottom:.7rem; }
  .hero p.lede{ font-size:1.02rem; }
  .hero p.lede-aside{ order:8; margin-top:.75rem; font-size:.94rem; }
  .hero-cta{ order:5; margin-top:.85rem; }
  .hero .legend{ order:6; margin-top:.75rem !important; }
  .corpus-stat{ order:7; gap:.45rem; margin-top:.85rem; max-width:none; }
  .corpus-stat .stat{ padding:.55rem .45rem; }
  .corpus-stat .stat b{ font-size:1.2rem; }
  .corpus-stat .stat span{ font-size:.62rem; letter-spacing:.03em; }
}

/* ===================================================================
   POLISH CAMPAIGN · iter 7 — SVG & motion craft. A hover micro-motion
   on the brand mark, a stroke draw-in on the dedication ornament, and a
   gentle fade-up of the monument when it scrolls into view. All cheap
   (transform / opacity / stroke-dashoffset), all reduced-motion-safe:
   the reveal/draw live inside `no-preference` and only engage once JS
   adds `.fx-armed`, so a reduced-motion or no-JS reader sees everything.
   =================================================================== */
/* brand mark — a calm tilt+lift, ONLY on hover/focus (never autoplay) */
.brand-logo{ transition:transform var(--t), box-shadow var(--t); }
.brand:hover .brand-logo, .brand:focus-visible .brand-logo{ transform:scale(1.07) rotate(-3deg); box-shadow:var(--shadow-2); }
@media (prefers-reduced-motion:reduce){ .brand:hover .brand-logo, .brand:focus-visible .brand-logo{ transform:none; } }

@keyframes dedDraw{ from{ stroke-dashoffset:60; } to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion:no-preference){
  /* hidden-until-revealed state applies ONLY once JS arms it (so no-JS shows all) */
  .dedication.fx-armed .tribute, .dedication.fx-armed .ded-creed{ opacity:0; transform:translateY(14px); transition:opacity .7s var(--t), transform .7s var(--t); }
  .dedication.fx-armed.is-in .tribute{ opacity:1; transform:none; }
  .dedication.fx-armed.is-in .ded-creed{ opacity:1; transform:none; transition-delay:160ms; }
  .dedication.fx-armed .ded-ornament line, .dedication.fx-armed .ded-ornament path{ stroke-dasharray:60; stroke-dashoffset:60; }
  .dedication.fx-armed.is-in .ded-ornament line{ animation:dedDraw 1000ms var(--t) forwards; }
  .dedication.fx-armed.is-in .ded-ornament path{ animation:dedDraw 1000ms 240ms var(--t) forwards; }
}

/* ===================================================================
   POLISH CAMPAIGN · iter 8 — typographic rhythm & density. Elite
   line-breaking: balance multi-line headings (no lonely last word),
   and pretty body copy (no typographic orphans). Progressive — older
   engines ignore it. Pairs with the existing ch-bounded measures.
   =================================================================== */
h1, h2, h3, h4,
.brand-headline, .shd-title, .shd-h, .shd-card-t, .shd-sec .shd-h,
.tl-banner h3, .qa-q, .flow-step h3, .bd-name, .shd-fr-name,
.shd-toc-t, .team-h, .foods-h, .iv-voices-h, .next-step h3, .hb-sep h2{ text-wrap:balance; }
p, .lede, .desc, .shd-lede, .shd-sec-lede, .qa-plain p, .qa-consensus p,
.shd-card-d, .shd-bound-d, .shd-fr-f, .mecard .me-a, .prose p, .prose li,
.flow-step p, .team-d, .iv-fact-d, .qa-do span{ text-wrap:pretty; }
/* steadier long-form rhythm in dense prose blocks (thesis body, plan, debate) */
.prose{ line-height:1.65; }

/* ===================================================================
   POLISH CAMPAIGN · iter 9 — A11y + resilience gauntlet. In forced-colors
   (Windows high-contrast) the copper "active" backgrounds are stripped,
   so selected pills became indistinguishable from the rest — restore a
   system-coloured marker. Plus a print-parity backstop for interactive
   chrome. (The skip-link bug is fixed in app.js.)
   =================================================================== */
@media (forced-colors:active){
  .nav-axis a.active{ outline:3px solid Highlight; outline-offset:-3px; }
  .shd-chip.active, .shd-fr-chip.active, .shd-jump.active{ outline:2px solid Highlight; outline-offset:-2px; }
}
@media print{
  .ask-fab, .ask-panel, .to-top, .read-progress, .hb-rail, .shd-toc, .worry-nav{ display:none !important; }
}

/* ===================================================================
   POLISH CAMPAIGN · iter 10 — the last 2%: a correct light color-scheme,
   brand-themed native controls, a brand-tinted text selection, and
   refined thin scrollbars on the horizontal scroll regions. The quiet
   finishing details of a 10k experience.
   =================================================================== */
:root{ color-scheme:light; accent-color:var(--accent); }
::selection{ background:color-mix(in srgb, var(--accent) 22%, var(--paper)); color:var(--ink); }
.choice-wrap, .prose table, .shd-rows{ scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.choice-wrap::-webkit-scrollbar, .prose table::-webkit-scrollbar{ height:8px; }
.choice-wrap::-webkit-scrollbar-thumb, .prose table::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:999px; }