/* ============================================================
pepteyes.com — clinical reference design system
============================================================ */
:root{
/* Brand blues, taken from the logo. --teal names kept: renaming 100+ call sites
buys nothing, and the role each variable plays is unchanged. */
--teal:#1564C0; --teal-deep:#062C7D; --teal-light:#06A6C6; --teal-wash:#EAF2FB;
--ink:#0B2530; --ink-2:#37545E; --ink-3:#6E8B94; --ink-4:#9BB0B7;
--line:#DCE7EB; --line-soft:#EDF3F5;
--bg:#FFFFFF; --bg-2:#F5F9FA; --bg-3:#EEF4F6;
--good:#0F7B4F; --good-bg:#E9F6EF; --good-line:#BEE3CE;
--bad:#A4322A; --bad-bg:#FCEFED; --bad-line:#F0D2CC;
--warn:#A9691A; --warn-bg:#FBF1E1; --warn-line:#EEDBB9;
--info:#1564C0; --info-bg:#E6F2F4; --info-line:#C2DFE4;
--accent:#C2571F;
--sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
--serif:'Source Serif 4','Iowan Old Style',Georgia,'Times New Roman',serif;
--shadow-s:0 1px 2px rgba(11,37,48,.06),0 2px 6px rgba(11,37,48,.05);
--shadow-m:0 2px 6px rgba(11,37,48,.07),0 12px 28px rgba(11,37,48,.09);
--radius:14px; --wrap:1220px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);
font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* height:auto is not optional here. Every ![]()
carries explicit width/height
attributes for layout stability, and without this the browser keeps the
attribute height while max-width shrinks the width — which letterboxed the
1080x1350 infographic into a tall white box with a small graphic centred in
it, and read as "the infographic is broken". */
img,svg{max-width:100%}
img{height:auto}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.18;letter-spacing:-.018em;color:var(--ink);margin:0}
h1{font-size:clamp(2.1rem,4.4vw,3.35rem)}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
h3{font-size:1.22rem}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
:focus-visible{outline:3px solid var(--teal-light);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:#fff;padding:10px 16px;border-radius:8px;box-shadow:var(--shadow-m)}
/* ---------- logo ---------- */
/* Wordmark set in Poppins to match the artwork's geometric letterforms; Inter
is the fallback and is close enough that a font-load failure is not visible
as a broken logo. */
.logo-lockup{display:inline-flex;align-items:center;text-decoration:none!important}
.logo-words{display:flex;align-items:baseline;gap:1px;
font-family:'Poppins',var(--sans)}
/* --logo-size is set per call site so a 26px lockup in the admin bar and a 34px
one in the site header still differ now that there is no glyph to scale. */
.logo-name{font-size:var(--logo-size,1.38rem);font-weight:700;letter-spacing:-.018em;
color:var(--logo-ink);line-height:1}
.logo-eyes{color:var(--logo-sub)}
.logo-dot{font-size:calc(var(--logo-size,1.38rem) * .59);font-weight:600;letter-spacing:-.005em;
color:var(--logo-dot,var(--logo-ink));margin-left:1px;line-height:1}
/* ---------- top bars ---------- */
.utility{background:var(--teal-deep);color:rgba(255,255,255,.82);font-size:12.5px;letter-spacing:.03em}
.utility .wrap{display:flex;gap:22px;align-items:center;justify-content:space-between;min-height:36px;flex-wrap:wrap}
.utility a{color:#fff;opacity:.86}
.utility .u-left{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.u-badge{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#fff}
.u-badge svg{flex:none}
header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:26px;min-height:72px}
/* ── Main navigation ───────────────────────────────────────────────────────
One markup tree, two behaviours: a hover/click dropdown at desktop widths and
a stacked accordion below 900px. Built on , so every panel opens
with JavaScript disabled; public/js/nav.js only adds sibling-closing, Escape
and click-outside. */
nav.main{margin-left:auto;display:flex;align-items:center}
.navdrawer{display:contents}
.navtoggle{display:none}
/* Belt and braces for a desktop with JavaScript off: browsers disagree on
whether author styles can reveal the contents of a closed . Where
this wins the bar renders normally; where it does not, nav.js has already
set the drawer open, and with JS off the reader falls back to a hamburger
that still works. */
.navdrawer:not([open])>.nav-list{display:flex}
.nav-list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav-item{position:relative}
.nav-link,.nav-group>summary{display:flex;align-items:center;gap:5px;
padding:9px 13px;border-radius:9px;font-size:14.6px;font-weight:600;
color:var(--ink-2);cursor:pointer;white-space:nowrap;list-style:none}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-link:hover,.nav-group>summary:hover{background:var(--bg-3);color:var(--teal);text-decoration:none}
.nav-link[aria-current],.nav-group>summary.here{color:var(--teal);background:var(--teal-wash)}
.nav-group[open]>summary{background:var(--bg-3);color:var(--teal)}
.nav-group>summary .chev{transition:transform .16s ease;opacity:.6;margin-top:1px}
.nav-group[open]>summary .chev{transform:rotate(180deg)}
.nav-group>summary:focus-visible{outline:3px solid var(--teal-light);outline-offset:2px}
.nav-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:70;
min-width:290px;padding:8px;border-radius:14px;background:#fff;
border:1px solid var(--line);box-shadow:0 18px 44px -12px rgba(11,37,48,.22),0 2px 8px rgba(11,37,48,.06);
animation:navIn .14s ease}
@keyframes navIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
/* Sized so the longest category ("Sexual Health & Melanocortin") sits on one
line in each of two columns. At the old width every other name wrapped, which
doubled the panel's height and made a tidy list look ragged. */
.nav-panel-wide{min-width:740px;display:grid;grid-template-columns:238px 1fr;gap:4px 14px}
.nav-col{display:flex;flex-direction:column;min-width:0}
/* Fills what was otherwise a large empty block beside seven rows of categories,
and says something worth knowing while it is there. */
.nav-note{margin:auto 0 4px;padding:11px;border-top:1px solid var(--line-soft);
font-size:12.2px;line-height:1.5;color:var(--ink-3)}
.nav-lead{list-style:none;margin:0;padding:0}
.nav-lead a{display:block;padding:9px 11px;border-radius:9px;color:var(--ink)}
.nav-lead a:hover{background:var(--teal-wash);text-decoration:none}
.nav-lead b{display:block;font-size:14.4px;font-weight:700;letter-spacing:-.005em}
.nav-lead span{display:block;margin-top:1px;font-size:12.8px;color:var(--ink-3);font-weight:500}
.nav-lead a[aria-current] b{color:var(--teal)}
.nav-cats{border-left:1px solid var(--line-soft);padding-left:12px}
.nav-panel:not(.nav-panel-wide) .nav-cats{border-left:0;padding-left:0;
border-top:1px solid var(--line-soft);margin-top:6px;padding-top:8px}
.nav-cats-h{margin:6px 0 4px;padding:0 11px;font-size:11.4px;font-weight:800;
letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.nav-cats ul{list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:1fr 1fr;gap:0 6px}
.nav-cats a{display:block;padding:5.5px 10px;border-radius:8px;
font-size:13.1px;font-weight:600;color:var(--ink-2);line-height:1.35}
.nav-cats a:hover{background:var(--bg-3);color:var(--teal);text-decoration:none}
/* ---------- hero ---------- */
.hero{background:linear-gradient(168deg,#062C7D 0%,#1564C0 58%,#12808F 100%);color:#fff;
padding:clamp(46px,6vw,80px) 0 clamp(52px,6vw,74px);position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;inset:0;opacity:.16;pointer-events:none;
background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.55) 1px,transparent 0);background-size:26px 26px}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:54px;align-items:center}
.hero h1{color:#fff;font-size:clamp(2.25rem,4.6vw,3.5rem);margin-bottom:18px}
.hero .lede{font-size:clamp(1.02rem,1.5vw,1.19rem);color:rgba(255,255,255,.88);max-width:60ch;margin-bottom:26px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;color:#9FDCE5;margin-bottom:16px}
.eyebrow::before{content:'';width:26px;height:2px;background:#9FDCE5;border-radius:2px}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px;max-width:560px}
.hstat{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:14px 16px}
.hstat b{display:block;font-family:var(--serif);font-size:1.85rem;line-height:1.1;color:#fff}
.hstat span{font-size:12.4px;color:rgba(255,255,255,.76);letter-spacing:.02em}
.hero-card{background:#fff;color:var(--ink);border-radius:18px;padding:26px 28px;box-shadow:0 20px 50px rgba(4,32,40,.3)}
.hero-card h3{font-family:var(--sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.scale-row{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line-soft)}
.scale-row:first-of-type{border-top:0}
.scale-row .n{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
font-size:13px;font-weight:700;color:#fff;background:var(--teal)}
.scale-row .n[data-n="1"]{background:#B33F34}.scale-row .n[data-n="2"]{background:#C2571F}
.scale-row .n[data-n="3"]{background:#A9691A}.scale-row .n[data-n="4"]{background:#2C8B6A}
.scale-row .n[data-n="5"]{background:#0F7B4F}
.scale-row b{font-size:14.5px;display:block}
.scale-row small{color:var(--ink-3);font-size:13.2px;line-height:1.5;display:block}
/* ---------- search + filters ---------- */
.toolbar{position:sticky;top:72px;z-index:50;background:rgba(255,255,255,.96);
backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:16px 0}
.search-box{position:relative;display:flex;align-items:center}
.search-box svg{position:absolute;left:16px;color:var(--ink-3)}
.search-box input{width:100%;padding:14px 16px 14px 46px;font:inherit;font-size:16px;
border:1.5px solid var(--line);border-radius:12px;background:var(--bg-2);color:var(--ink)}
.search-box input:focus{outline:none;border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px rgba(21,100,192,.11)}
.filter-row{display:flex;gap:10px;align-items:center;margin-top:14px;min-width:0}
/* One horizontal rail at every width, not just on a phone. Wrapped, fourteen
category chips plus six status chips took three rows and about 150px of
height before the first peptide; as a rail they take one row each and the
library starts above the fold. The fade on the right edge is the only hint
that there is more — a scrollbar under a row of pills reads as a mistake. */
.chips{display:flex;gap:8px;flex-wrap:nowrap;align-items:center;min-width:0;
overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
scroll-snap-type:x proximity;overscroll-behavior-x:contain;
padding-bottom:2px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
.chips::-webkit-scrollbar{display:none}
.chips > .chip{flex:none;scroll-snap-align:start}
/* Nothing is hidden from a keyboard: focus scrolls the rail to the chip. */
.chips > .chip:focus-visible{scroll-snap-align:center}
.chip{padding:7px 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;
font:inherit;font-size:13.6px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.14s}
.chip:hover{border-color:var(--teal-light);color:var(--teal)}
.chip[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.chip .c{opacity:.62;font-weight:500;margin-left:5px}
.filter-label{font-size:12.4px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);flex:none}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-secondary{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff}
.hero-secondary:hover{background:rgba(255,255,255,.2);color:#fff}
.toolbar-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:12px;flex-wrap:wrap}
.result-count{font-size:13.8px;color:var(--ink-3)}
.result-count b{color:var(--ink)}
.sort-sel{font:inherit;font-size:13.8px;padding:7px 11px;border:1.5px solid var(--line);border-radius:9px;background:#fff;color:var(--ink-2)}
/* ---------- section headings ---------- */
.section{padding:clamp(44px,5vw,66px) 0}
.section.alt{background:var(--bg-2);border-block:1px solid var(--line)}
.sec-head{max-width:74ch;margin-bottom:30px}
.sec-head .eyebrow{color:var(--teal)}
.sec-head .eyebrow::before{background:var(--teal)}
.sec-head p{color:var(--ink-2);font-size:1.03rem;margin-top:10px}
/* ---------- peptide cards ---------- */
.cat-group{margin-bottom:46px;scroll-margin-top:200px}
.cat-head{display:flex;align-items:baseline;gap:14px;padding-bottom:12px;margin-bottom:22px;
border-bottom:2px solid var(--teal);flex-wrap:wrap}
.cat-head h2{font-size:1.55rem}
.cat-head .cat-count{font-size:13px;font-weight:700;color:var(--teal);background:var(--teal-wash);
padding:3px 10px;border-radius:999px;letter-spacing:.02em}
.cat-head p{margin:0;font-size:14.4px;color:var(--ink-3);flex:1 1 260px;min-width:220px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
display:flex;flex-direction:column;overflow:hidden;transition:.16s;position:relative}
.pcard:hover{border-color:var(--teal-light);box-shadow:var(--shadow-m);transform:translateY(-2px)}
.pcard-top{padding:18px 20px 14px;border-bottom:1px solid var(--line-soft)}
.pcard-badges{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.4px;font-weight:700;
letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:6px;border:1px solid}
.badge.good{color:var(--good);background:var(--good-bg);border-color:var(--good-line)}
.badge.bad{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-line)}
.badge.warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
.badge.info{color:var(--info);background:var(--info-bg);border-color:var(--info-line)}
.pcard h3{font-size:1.3rem;margin-bottom:4px}
.pcard h3 a{color:var(--ink)}
.pcard h3 a:hover{color:var(--teal);text-decoration:none}
.pcard .aka{font-size:13.2px;color:var(--ink-3);margin:0}
.pcard .chem{font-size:13.2px;color:var(--ink-2);margin:9px 0 0;line-height:1.5}
.ev-meter{display:flex;align-items:center;gap:9px;margin-top:13px}
.ev-bars{display:flex;gap:3px}
.ev-bars i{width:19px;height:6px;border-radius:3px;background:var(--line);display:block}
.ev-bars i.on{background:var(--ev-c,var(--teal))}
.ev-meter small{font-size:12.2px;font-weight:700;color:var(--ev-c,var(--teal));letter-spacing:.03em}
.pcard-body{padding:16px 20px;flex:1;display:grid;gap:14px}
.mini{display:grid;gap:7px}
.mini-h{display:flex;align-items:center;gap:6px;font-size:11.4px;font-weight:800;
letter-spacing:.1em;text-transform:uppercase}
.mini-h.pro{color:var(--good)} .mini-h.con{color:var(--bad)}
.mini ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.mini li{font-size:13.7px;line-height:1.48;color:var(--ink-2);padding-left:17px;position:relative}
.mini li::before{position:absolute;left:0;top:.06em;font-weight:800}
.mini.pro li::before{content:'+';color:var(--good)}
.mini.con li::before{content:'−';color:var(--bad)}
.pcard-foot{padding:13px 20px;background:var(--bg-2);border-top:1px solid var(--line-soft);
display:flex;gap:10px;align-items:center;justify-content:space-between}
.btn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13.8px;font-weight:700;
padding:9px 15px;border-radius:9px;border:1.5px solid var(--teal);color:var(--teal);
background:#fff;cursor:pointer;transition:.14s;text-decoration:none!important}
.btn:hover{background:var(--teal-wash)}
.btn.solid{background:var(--teal);color:#fff}
.btn.solid:hover{background:var(--teal-deep)}
.btn.ghost{border-color:var(--line);color:var(--ink-2)}
.btn.ghost:hover{border-color:var(--teal-light);color:var(--teal);background:#fff}
.btn.lg{font-size:15px;padding:12px 22px}
/* ---------- infographic modal ---------- */
dialog.ig{border:0;padding:0;border-radius:16px;max-width:min(94vw,760px);width:100%;
box-shadow:0 30px 90px rgba(4,32,40,.4);background:#fff}
dialog.ig::backdrop{background:rgba(6,32,40,.66);backdrop-filter:blur(3px)}
.ig-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:14px 18px;border-bottom:1px solid var(--line)}
.ig-head strong{font-family:var(--serif);font-size:1.1rem}
.ig-body{padding:16px;background:var(--bg-2);max-height:74vh;overflow:auto}
.ig-body img{display:block;width:100%;border-radius:10px;box-shadow:var(--shadow-s);background:#fff}
.icon-btn{border:1px solid var(--line);background:#fff;border-radius:9px;width:34px;height:34px;
display:grid;place-items:center;cursor:pointer;color:var(--ink-2);flex:none}
.icon-btn:hover{border-color:var(--teal);color:var(--teal)}
/* ---------- detail page ---------- */
.detail-hero{background:var(--bg-2);border-bottom:1px solid var(--line);padding:30px 0 34px}
.crumbs{font-size:13.4px;color:var(--ink-3);margin-bottom:16px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--ink-3)} .crumbs a:hover{color:var(--teal)}
.detail-hero h1{margin:8px 0 10px}
.detail-hero .aka{color:var(--ink-3);font-size:15px;margin-bottom:14px}
.byline{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13.6px;color:var(--ink-3);
padding:13px 0 0;border-top:1px solid var(--line);margin-top:18px}
.byline b{color:var(--ink-2)}
.rev-dot{width:26px;height:26px;border-radius:50%;background:var(--teal-wash);color:var(--teal);
display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}
.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start;padding:38px 0 60px}
.toc{position:sticky;top:96px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.toc h4{font-family:var(--sans);font-size:11.6px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:t}
.toc a{display:block;padding:6px 9px;border-radius:7px;font-size:14px;color:var(--ink-2);font-weight:500}
.toc a:hover{background:var(--bg-2);color:var(--teal);text-decoration:none}
.facts{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:30px}
.facts-cap{font-family:var(--sans);font-size:11.6px;font-weight:800;letter-spacing:.11em;
text-transform:uppercase;color:var(--ink-3);padding:13px 18px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.facts table{width:100%;border-collapse:collapse}
.facts th{text-align:left;padding:12px 18px;font-size:13.4px;font-weight:700;color:var(--ink-3);
width:190px;vertical-align:top;border-bottom:1px solid var(--line-soft);background:#fff}
.facts td{padding:12px 18px;font-size:14.6px;border-bottom:1px solid var(--line-soft);color:var(--ink)}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:0}
.prose h2{margin:38px 0 14px;scroll-margin-top:110px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--ink-2)}
.prose>p:first-of-type{font-size:1.09rem;color:var(--ink)}
.pc-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.pc-item{border:1px solid var(--line);border-left:4px solid var(--x-accent);border-radius:11px;
padding:15px 18px;background:var(--x-bg)}
.pc-item .t{display:flex;align-items:flex-start;gap:11px;justify-content:space-between;margin-bottom:5px}
.pc-item .t b{font-size:15.6px;color:var(--x-title);font-family:var(--serif);font-weight:600;line-height:1.3}
.pc-item p{margin:0;font-size:14.5px;color:var(--x-body);line-height:1.56}
.pips{display:flex;gap:3px;flex:none;margin-top:5px}
.pips i{width:7px;height:7px;border-radius:2px;background:var(--x-dim);display:block}
.pips i.on{background:var(--x-accent)}
.pips-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--x-accent);
margin-right:2px;align-self:center}
.pro-list{--x-accent:var(--good);--x-bg:var(--good-bg);--x-title:#0B3D28;--x-body:#3B5B4C;--x-dim:#CBE3D5}
.con-list{--x-accent:var(--bad);--x-bg:var(--bad-bg);--x-title:#5C2119;--x-body:#6B473F;--x-dim:#F0D2CC}
.callout{border-radius:12px;padding:17px 20px;margin:22px 0;border:1px solid;display:flex;gap:14px;align-items:flex-start}
.callout svg{flex:none;margin-top:2px}
.callout p{margin:0;font-size:14.6px;line-height:1.58}
.callout b{display:block;margin-bottom:3px;font-size:14.6px}
.callout.danger{background:var(--bad-bg);border-color:var(--bad-line);color:#5C2119}
.callout.warn{background:var(--warn-bg);border-color:var(--warn-line);color:#5E3B0F}
.callout.info{background:var(--info-bg);border-color:var(--info-line);color:#0A3A43}
.tick-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.tick-list li{position:relative;padding-left:26px;font-size:14.8px;color:var(--ink-2)}
.tick-list li::before{content:'';position:absolute;left:0;top:.48em;width:9px;height:9px;
border-radius:50%;border:2.5px solid var(--teal)}
.tick-list.stop li::before{border-color:var(--bad)}
.ig-panel{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:26px 0}
.ig-panel-head{padding:14px 18px;background:var(--bg-2);border-bottom:1px solid var(--line);
display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.ig-panel-head b{font-family:var(--serif);font-size:1.05rem}
.ig-panel img{display:block;width:100%}
.tag-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.tag{font-size:12.4px;color:var(--ink-2);background:var(--bg-3);border-radius:6px;padding:3px 9px}
.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.rel{border:1px solid var(--line);border-radius:11px;padding:14px 16px;display:block;background:#fff}
.rel:hover{border-color:var(--teal-light);text-decoration:none;box-shadow:var(--shadow-s)}
.rel b{display:block;font-size:15px;color:var(--ink);margin-bottom:3px}
.rel span{font-size:12.8px;color:var(--ink-3)}
/* ---------- board / editorial ---------- */
.board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.member{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:#fff}
.member .av{width:46px;height:46px;border-radius:12px;background:linear-gradient(150deg,var(--teal-light),var(--teal-deep));
display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;margin-bottom:13px}
.member b{display:block;font-family:var(--serif);font-size:1.08rem;line-height:1.3}
.member .creds{font-size:13.2px;color:var(--teal);font-weight:600;margin:3px 0 2px}
.member .focus{font-size:12.4px;color:var(--ink-3);letter-spacing:.03em;text-transform:uppercase;font-weight:700}
.member p{font-size:14px;color:var(--ink-2);margin:10px 0 0;line-height:1.55}
.principles{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.principle{border-top:3px solid var(--teal);padding-top:15px}
.principle b{font-family:var(--serif);font-size:1.1rem;display:block;margin-bottom:6px}
.principle p{font-size:14.6px;color:var(--ink-2);margin:0}
.ph-notice{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:12px;
padding:15px 18px;margin-bottom:24px;color:#5E3B0F;font-size:14.4px;display:flex;gap:13px;align-items:flex-start}
.ph-notice b{display:block;margin-bottom:3px}
.ph-inline{font-size:11.4px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-line);padding:2px 7px;border-radius:5px}
/* ---------- footer ---------- */
footer.site{background:var(--teal-deep);color:rgba(255,255,255,.72);padding:52px 0 30px;margin-top:10px;font-size:14.4px}
footer.site h4{font-family:var(--sans);color:#fff;font-size:12.2px;letter-spacing:.12em;
text-transform:uppercase;margin:0 0 13px;font-weight:700}
footer.site a{color:rgba(255,255,255,.76)}
footer.site a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:36px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot-about p{font-size:14.2px;line-height:1.6;margin:14px 0 0;max-width:42ch}
.foot-legal{border-top:1px solid rgba(255,255,255,.14);margin-top:36px;padding-top:22px;
font-size:12.8px;line-height:1.65;color:rgba(255,255,255,.6);display:grid;gap:12px}
.foot-legal strong{color:rgba(255,255,255,.85)}
/* ---------- misc ---------- */
.empty{text-align:center;padding:60px 20px;color:var(--ink-3)}
.empty b{display:block;font-family:var(--serif);font-size:1.3rem;color:var(--ink);margin-bottom:6px}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:1000px){
.hero-grid{grid-template-columns:1fr;gap:34px}
.detail-layout{grid-template-columns:minmax(0,1fr);gap:30px}
.toc{position:static}
.foot-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:760px){
.toolbar{position:static}
header.site .wrap{flex-wrap:wrap;gap:0;min-height:0;padding-top:10px;padding-bottom:6px}
header.site .wrap>a:first-child{flex:1 1 auto}
.utility .u-left{gap:12px}
.utility .wrap>span:last-child{display:none}
.grid{grid-template-columns:1fr}
.hero-stats{grid-template-columns:1fr;max-width:none}
.foot-grid{grid-template-columns:1fr}
.facts th{width:auto;display:block;padding-bottom:2px;border:0}
.facts td{display:block;padding-top:0}
}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.01ms!important;transition-duration:.01ms!important}
html{scroll-behavior:auto}
}
@media print{
header.site,.toolbar,footer.site,.utility,.toc,.pcard-foot{display:none!important}
body{font-size:11pt}
}
/* ---------- interactions + confused-with ---------- */
.tick-list.warnlist li::before{border-color:var(--warn)}
.tick-list li b{color:var(--ink)}
.confused-list{display:grid;gap:14px;margin-top:16px}
.confused{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--bg-2)}
.confused-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.confused-head b{font-family:var(--serif);font-size:1.1rem;color:var(--ink)}
.confused-head a{text-decoration:none}
.confused-head a:hover b{color:var(--teal)}
.confused p{margin:0 0 12px;font-size:14.7px;color:var(--ink-2);line-height:1.57}
/* ---------- compare ---------- */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);margin:26px 0}
table.cmp{width:100%;border-collapse:collapse;min-width:660px}
table.cmp th,table.cmp td{padding:13px 18px;text-align:left;vertical-align:top;
border-bottom:1px solid var(--line-soft);font-size:14.6px}
table.cmp thead th{background:var(--bg-2);border-bottom:2px solid var(--line);position:sticky;top:0}
table.cmp thead th:first-child{width:170px}
table.cmp tbody th{font-size:13.4px;font-weight:700;color:var(--ink-3);width:170px;background:#fff}
table.cmp tbody tr:nth-child(even) th,table.cmp tbody tr:nth-child(even) td{background:var(--bg-2)}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:0}
.cmp-name{font-family:var(--serif);font-size:1.22rem;display:block;margin-bottom:6px;color:var(--ink)}
.cmp-name:hover{color:var(--teal)}
.cmp-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:26px 0}
.cmp-col h3{font-family:var(--sans);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
color:var(--ink-3);margin-bottom:12px}
.cmp-pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.cmp-pair{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#fff;display:block}
.cmp-pair:hover{border-color:var(--teal-light);box-shadow:var(--shadow-s);text-decoration:none}
.cmp-pair b{display:block;font-family:var(--serif);font-size:1.06rem;color:var(--ink);margin-bottom:5px}
.cmp-pair span{font-size:13.4px;color:var(--ink-3);line-height:1.5;display:block}
@media (max-width:760px){ .cmp-cols{grid-template-columns:1fr} }
/* ---------- preview / pre-review banner ---------- */
.preview-bar{background:#8A3A12;color:#fff;font-size:13.4px;line-height:1.5;padding:9px 0}
.preview-bar .wrap{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.preview-bar strong{color:#FFE2CE}
.preview-bar span{color:rgba(255,255,255,.88)}
/* ============================================================
GLOSSARY
============================================================ */
/* inline auto-link woven into monograph copy — present, not shouting */
a.gl{color:var(--teal);text-decoration:underline;text-decoration-color:rgba(21,100,192,.32);
text-underline-offset:2px;text-decoration-thickness:1px}
a.gl:hover{text-decoration-color:var(--teal)}
/* ---------- index hero ---------- */
.gl-hero{background:linear-gradient(180deg,var(--bg-2),var(--bg));border-bottom:1px solid var(--line);
padding:30px 0 34px}
.gl-hero h1{margin:6px 0 0}
.gl-count{font-size:14px;color:var(--ink-3);letter-spacing:.02em;margin:12px 0 0}
.gl-count b{color:var(--teal);font-weight:700}
.gl-lede{font-family:var(--serif);font-size:1.12rem;line-height:1.6;color:var(--ink-2);
max-width:74ch;margin:14px 0 0}
.gl-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.gl-pill{display:inline-flex;align-items:center;min-height:38px;padding:0 15px;border-radius:999px;
border:1px solid var(--line);background:#fff;color:var(--ink-2);font-size:13.4px;font-weight:500;
transition:border-color .2s cubic-bezier(.32,.72,0,1),color .2s cubic-bezier(.32,.72,0,1)}
.gl-pill:hover{border-color:var(--teal);color:var(--teal);text-decoration:none}
/* ---------- index sections ---------- */
.gl-sections{padding:8px 24px 60px}
.gl-sec{scroll-margin-top:96px;padding:34px 0;border-bottom:1px solid var(--line-soft)}
.gl-sec:last-child{border-bottom:0}
.gl-sec-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.gl-sec-head h2{font-size:clamp(1.34rem,2.1vw,1.72rem)}
.gl-sec-count{font-size:12.4px;color:var(--ink-3);background:var(--bg-3);border-radius:999px;padding:3px 11px}
.gl-intro{color:var(--ink-2);max-width:78ch;margin:12px 0 0;font-size:15.6px}
.gl-grid{list-style:none;margin:20px 0 0;padding:0;
display:grid;grid-template-columns:repeat(3,1fr);gap:2px 26px}
.gl-grid li{border-top:1px solid var(--line-soft)}
.gl-grid a{display:block;padding:9px 2px;font-size:15px;color:var(--ink-2)}
.gl-grid a:hover{color:var(--teal);text-decoration:none}
@media (max-width:900px){.gl-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.gl-grid{grid-template-columns:1fr}}
/* ---------- term page ---------- */
.gl-term{padding:26px 24px 70px}
.gl-article{max-width:74ch}
.gl-kicker{font-size:12.2px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
color:var(--ink-3);margin:0 0 8px}
.gl-kicker a{color:var(--ink-3)}
.gl-kicker a:hover{color:var(--teal)}
.gl-article h1{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.gl-summary{font-family:var(--serif);font-size:1.2rem;line-height:1.55;color:var(--ink);
margin:16px 0 0;padding-bottom:22px;border-bottom:1px solid var(--line)}
.gl-body{margin-top:24px}
.gl-body p{color:var(--ink-2);font-size:16.6px;line-height:1.72;margin:0 0 1.15em}
.gl-body p:last-child{margin-bottom:0}
.gl-related{margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.gl-related h2{font-size:1.14rem;margin-bottom:14px}
.gl-rel-row{display:flex;flex-wrap:wrap;gap:8px}
a.gl-rel{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;
border:1px solid var(--line);background:var(--bg-2);color:var(--ink-2);font-size:13.6px}
a.gl-rel:hover{border-color:var(--teal);color:var(--teal);background:#fff;text-decoration:none}
.gl-back{margin:34px 0 0;font-size:14.4px}
/* ---------- worked-example figures ---------- */
.gl-figs{margin:38px 0 0;padding:24px 22px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius)}
.gl-figs.teaser{margin:18px 0 0;padding:18px 18px 14px;background:#fff}
.gl-figs-h{font-size:1.1rem;margin-bottom:10px}
.gl-figcap{font-size:14.4px;color:var(--ink-2);margin:0 0 16px;max-width:72ch}
.gl-fig-grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:14px}
.gl-fig{margin:0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;min-width:0}
.gl-fig.wide{grid-column:1 / -1}
.gl-fig img{display:block;width:100%;height:auto;border-radius:5px}
.gl-fig figcaption{font-size:12.2px;color:var(--ink-3);padding:8px 4px 2px;line-height:1.42}
.gl-method{font-size:12.2px;color:var(--ink-4);margin:14px 0 0;font-style:italic}
@media (max-width:820px){.gl-fig-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.gl-fig-grid{grid-template-columns:1fr}}
/* ---------- "terms used on this page", on monographs ---------- */
.gl-used{margin:40px 0 0;padding:22px 22px 18px;background:var(--bg-2);
border:1px solid var(--line);border-radius:var(--radius)}
.gl-used h2{font-size:1.06rem;margin:0 0 14px}
.gl-used dl{margin:0}
.gl-used dt{margin-top:12px;font-weight:600;font-size:14.8px}
.gl-used dt:first-child{margin-top:0}
.gl-used dd{margin:2px 0 0;color:var(--ink-2);font-size:14.2px;line-height:1.55}
/* ---------- glossary lane in site search ---------- */
.gl-search{margin:0 0 20px;padding:16px 18px;background:var(--bg-2);
border:1px solid var(--line);border-radius:var(--radius)}
.gl-search-cap{font-size:12.2px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
color:var(--ink-3);margin:0 0 10px}
.gl-search ul{list-style:none;margin:0;padding:0}
.gl-search li{padding:7px 0;border-top:1px solid var(--line-soft)}
.gl-search li:first-child{border-top:0}
.gl-search a{font-weight:600;font-size:14.8px}
.gl-search span{display:block;color:var(--ink-3);font-size:13.4px;line-height:1.5;margin-top:2px}
/* ---------- editorial disclosure bar (replaces the old preview banner) ---------- */
.disclosure-bar{background:var(--bg-3);border-bottom:1px solid var(--line);
font-size:12.8px;color:var(--ink-2);line-height:1.5}
.disclosure-bar .wrap{padding-top:7px;padding-bottom:7px}
.disclosure-bar a{color:var(--teal);text-decoration:underline;
text-decoration-color:rgba(21,100,192,.35);text-underline-offset:2px}
/* ============================================================
BLOG
============================================================ */
.blog-body{padding:8px 24px 64px}
/* The old boxed-card blog styles lived here; superseded by the editorial
treatment further down this file. */
/* ---------- article ---------- */
.post{padding:26px 24px 70px;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center}
.post > *{width:100%;max-width:78ch}
.post-article{max-width:78ch}
.post-article h1{font-size:clamp(2rem,4vw,2.9rem);line-height:1.14}
.post-dek{font-family:var(--serif);font-size:1.24rem;line-height:1.52;color:var(--ink-2);margin:16px 0 0}
.post-byline{display:flex;gap:12px;align-items:center;margin:22px 0 0;padding:16px 0;
border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.post-byline b{color:var(--ink)}
.post-byline span{font-size:14.6px;color:var(--ink-2);display:block}
.post-byline small{display:block;font-size:12.8px;color:var(--ink-3);margin-top:2px}
.post-takeaways{margin:30px 0 0;padding:22px 24px;background:var(--info-bg);
border:1px solid var(--info-line);border-radius:var(--radius)}
.post-takeaways h2{font-size:1.06rem;margin:0 0 12px}
.post-takeaways ul{margin:0;padding-left:20px}
.post-takeaways li{margin:0 0 9px;color:var(--ink);font-size:15.4px;line-height:1.6}
.post-takeaways li:last-child{margin-bottom:0}
.post-toc{margin:26px 0 0;padding:18px 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2)}
.post-toc b{display:block;font-size:12.2px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.post-toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px}
.post-toc li{margin:0 0 6px;font-size:14.2px;break-inside:avoid}
@media (max-width:620px){.post-toc ol{columns:1}}
.post-body{margin-top:34px}
.post-body section{scroll-margin-top:96px}
.post-body h2{font-size:clamp(1.32rem,2.4vw,1.72rem);margin:36px 0 14px}
.post-body p{color:var(--ink-2);font-size:16.8px;line-height:1.74;margin:0 0 1.15em}
.post-unknowns{margin:40px 0 0;padding:22px 24px;background:var(--warn-bg);
border:1px solid var(--warn-line);border-radius:var(--radius);scroll-margin-top:96px}
.post-unknowns h2{font-size:1.1rem;margin:0 0 6px}
.post-unknowns-lede{font-size:14.2px;color:var(--ink-2);margin:0 0 12px}
.post-unknowns ul{margin:0;padding-left:20px}
.post-unknowns li{margin:0 0 9px;font-size:15.2px;line-height:1.62;color:var(--ink)}
.post-faq{margin:40px 0 0;scroll-margin-top:96px}
.post-faq h2{font-size:1.3rem;margin:0 0 14px}
.post-faq details{border:1px solid var(--line);border-radius:11px;margin:0 0 10px;background:#fff}
.post-faq summary{cursor:pointer;padding:14px 18px;font-weight:600;font-size:15.4px;list-style:none;
display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.post-faq summary::-webkit-details-marker{display:none}
.post-faq summary::after{content:"+";color:var(--teal);font-weight:700;flex:none}
.post-faq details[open] summary::after{content:"–"}
.post-faq details > div{padding:0 18px 16px;color:var(--ink-2);font-size:15.2px;line-height:1.68}
.post-refs{margin:40px 0 0;scroll-margin-top:96px}
.post-refs h2{font-size:1.3rem;margin:0 0 6px}
.post-refs-lede{font-size:14.2px;color:var(--ink-3);margin:0 0 14px}
.post-refs ol{margin:0;padding-left:22px}
.post-refs li{margin:0 0 11px;font-size:14.8px;line-height:1.62;color:var(--ink-2)}
.press-outlet{color:var(--ink-3);font-size:13.5px}
.post-refs li b{color:var(--ink)}
.ref-search{margin-left:6px;font-size:12.8px;white-space:nowrap}
.post-monos,.post-related{margin:40px 0 0}
.post-monos h2,.post-related h2{font-size:1.3rem;margin:0 0 14px}
/* ============================================================
RECONSTITUTION CALCULATOR
============================================================ */
.calc-wrap{padding:8px 24px 70px;max-width:900px}
.calc{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
padding:22px 24px 16px;margin-top:22px}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px 20px}
.calc-field label{display:block;font-size:13.4px;font-weight:600;color:var(--ink);margin-bottom:6px}
.calc-field input,.calc-field select{width:100%;font:inherit;font-size:16px;color:var(--ink);
background:#fff;border:1px solid var(--line);border-radius:9px;padding:10px 12px;min-height:44px}
.calc-field input:focus,.calc-field select:focus{outline:3px solid var(--teal-light);outline-offset:1px;border-color:var(--teal)}
.calc-field small{display:block;font-size:12.2px;color:var(--ink-3);margin-top:5px;line-height:1.4}
.calc-combo{display:flex;gap:8px}
.calc-combo input{flex:1;min-width:0}
.calc-combo select{width:88px;flex:none}
.calc-note{font-size:12.4px;color:var(--ink-3);margin:14px 0 0}
.calc-out{margin-top:22px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.calc-headline{display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:20px;align-items:center;
padding:22px 24px;background:var(--teal-wash);border-bottom:1px solid var(--line)}
@media (max-width:700px){.calc-headline{grid-template-columns:1fr}}
.calc-big-label{display:block;font-size:12.2px;letter-spacing:.08em;text-transform:uppercase;
font-weight:700;color:var(--teal-deep)}
.calc-big b{font-family:var(--serif);font-size:clamp(2.4rem,6vw,3.4rem);line-height:1;color:var(--teal-deep);
display:inline-block;margin:4px 6px 0 0}
.calc-big-unit{font-size:1.1rem;color:var(--teal-deep);font-weight:600}
.calc-big small{display:block;font-size:13.4px;color:var(--ink-2);margin-top:6px}
.calc-syringe{min-width:0}
.calc-syringe svg{display:block;width:100%;height:auto}
.calc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:1px;background:var(--line)}
.calc-stats .stat{background:#fff;padding:16px 18px}
.calc-stats b{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--ink);line-height:1.1}
.calc-stats span{display:block;font-size:12.4px;color:var(--ink-3);margin-top:4px;line-height:1.4}
.calc-warnings:not(:empty){padding:16px 24px;background:var(--warn-bg);border-top:1px solid var(--warn-line)}
.calc-warnings p{margin:0 0 8px;font-size:14.2px;line-height:1.55;color:var(--ink)}
.calc-warnings p:last-child{margin-bottom:0}
.calc-table-wrap{margin-top:44px}
.calc-table-wrap h2{font-size:1.32rem;margin-bottom:8px}
.calc-table-wrap > p{color:var(--ink-2);font-size:15.4px;max-width:70ch}
.calc-table-scroll{overflow-x:auto;margin-top:16px;border:1px solid var(--line);border-radius:var(--radius)}
.calc-table{width:100%;border-collapse:collapse;font-size:15px;min-width:460px}
.calc-table th{text-align:left;font-size:12.4px;letter-spacing:.05em;text-transform:uppercase;
color:var(--ink-3);font-weight:700;padding:12px 16px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.calc-table td{padding:12px 16px;border-bottom:1px solid var(--line-soft);color:var(--ink-2)}
.calc-table tr:last-child td{border-bottom:0}
.calc-table td b{color:var(--ink)}
.calc-table tr.over td{background:var(--warn-bg)}
.over-tag{font-size:11.6px;color:var(--warn);white-space:nowrap}
.calc-fig{margin:26px 0 0;text-align:center}
.calc-fig img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:10px;background:#fff;padding:8px}
.calc-fig figcaption{font-size:12.8px;color:var(--ink-3);margin-top:10px}
.calc-seq{margin:20px 0 26px;text-align:center}
.calc-seq img{max-width:100%;height:auto}
.calc-prose{margin-top:48px;max-width:74ch}
.calc-prose h2{font-size:clamp(1.28rem,2.3vw,1.66rem);margin:36px 0 12px;scroll-margin-top:96px}
.calc-prose p{color:var(--ink-2);font-size:16.6px;line-height:1.72;margin:0 0 1.1em}
.calc-vials{margin-top:48px}
.calc-vials h2{font-size:1.32rem;margin-bottom:16px}
.calc-vial-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px}
.calc-vial-row figure{margin:0;display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:start;
border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:#fff}
.calc-vial-row img{width:110px;height:auto}
.calc-vial-row figcaption{font-size:14.2px;color:var(--ink-2);line-height:1.6}
.calc-vial-row figcaption b{color:var(--ink)}
/* ---------- calculator pointer on relevant glossary terms ---------- */
.gl-tool{margin:30px 0 0;padding:16px 20px;border:1px solid var(--info-line);
background:var(--info-bg);border-radius:var(--radius)}
.gl-tool b{display:block;font-size:14.6px;color:var(--ink);margin-bottom:4px}
.gl-tool span{font-size:14.2px;color:var(--ink-2);line-height:1.6}
/* ---------- plain-language summary ---------- */
.plain{margin-top:52px;padding-top:36px;border-top:2px solid var(--line)}
.plain h2{font-size:clamp(1.36rem,2.5vw,1.8rem)}
.plain-lede{color:var(--ink-2);font-size:15.6px;margin:8px 0 24px;max-width:66ch}
.plain-steps{list-style:none;margin:0;padding:0;display:grid;gap:2px;
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--line)}
.plain-steps li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;
padding:18px 20px;background:#fff}
.plain-n{display:flex;align-items:center;justify-content:center;width:28px;height:28px;
border-radius:50%;background:var(--teal);color:#fff;font-size:13.6px;font-weight:700;flex:none}
.plain-steps div{font-size:16.6px;line-height:1.62;color:var(--ink-2)}
.plain-steps b{color:var(--ink);font-weight:700}
.plain-hero{font-size:1.34em;color:var(--teal-deep)!important}
.plain-guard{display:block;margin-top:7px;font-size:14px;color:var(--warn);font-weight:500}
.plain-steps li.plain-warn{background:var(--warn-bg)}
.plain-steps li.plain-warn .plain-n{background:var(--warn)}
.plain-steps small{display:block;margin-top:8px;font-size:13.6px;color:var(--ink-2);line-height:1.58}
@media (max-width:560px){
.plain-steps li{grid-template-columns:1fr;gap:8px}
.plain-steps div{font-size:15.6px}
}
.plain-card{margin-top:26px}
.plain-card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
flex-wrap:wrap;margin-bottom:12px}
.plain-card-head b{font-size:15px;color:var(--ink)}
.plain-card svg{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius)}
.plain-mistakes{margin-top:34px;padding:22px 24px;background:var(--bg-2);
border:1px solid var(--line);border-radius:var(--radius)}
.plain-mistakes h3{font-size:1.08rem;margin:0 0 14px}
.plain-mistakes ul{margin:0;padding-left:20px}
.plain-mistakes li{margin:0 0 12px;font-size:15.2px;line-height:1.62;color:var(--ink-2)}
.plain-mistakes li:last-child{margin-bottom:0}
.plain-mistakes b{color:var(--ink)}
/* ---------- mode switch ---------- */
.mode-switch{display:inline-flex;gap:2px;margin-top:20px;padding:3px;background:var(--bg-3);
border:1px solid var(--line);border-radius:999px}
.mode-btn{font:inherit;font-size:14px;font-weight:600;color:var(--ink-2);background:none;border:0;
padding:9px 22px;border-radius:999px;cursor:pointer;min-height:40px;
transition:background .2s cubic-bezier(.32,.72,0,1),color .2s cubic-bezier(.32,.72,0,1)}
.mode-btn:hover{color:var(--teal)}
.mode-btn.is-on{background:#fff;color:var(--teal-deep);box-shadow:var(--shadow-s)}
.mode-btn:focus-visible{outline:3px solid var(--teal-light);outline-offset:2px}
/* ---------- simple mode ---------- */
.simple{margin-top:26px}
.simple-grid{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:34px;align-items:start}
@media (max-width:860px){.simple-grid{grid-template-columns:1fr}}
.simple-col h3{font-size:1.02rem;margin:0 0 12px}
.syr-cards{display:grid;gap:10px}
.syr-card input{position:absolute;opacity:0;width:0;height:0}
.syr-card-in{display:grid;grid-template-columns:62px 1fr;gap:12px;align-items:center;
border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;cursor:pointer;
transition:border-color .2s cubic-bezier(.32,.72,0,1),background .2s cubic-bezier(.32,.72,0,1)}
.syr-card-in b{font-size:15px;color:var(--ink)}
.syr-card-in img{width:100%;height:auto;grid-column:2;grid-row:1}
.syr-card-in small{grid-column:1;grid-row:2;font-size:12px;color:var(--ink-3)}
.syr-card:hover .syr-card-in{border-color:var(--teal-light)}
.syr-card input:checked + .syr-card-in{border-color:var(--teal);background:var(--teal-wash)}
.syr-card input:focus-visible + .syr-card-in{outline:3px solid var(--teal-light);outline-offset:2px}
.simple-row{display:grid;grid-template-columns:74px 1fr;gap:18px;align-items:start;
padding:20px 0;border-bottom:1px solid var(--line-soft)}
.simple-row.no-img{grid-template-columns:1fr}
.simple-row:last-child{border-bottom:0}
.simple-vial{width:74px;height:auto}
@media (max-width:520px){
.simple-row{grid-template-columns:1fr}
.simple-vial{display:none}
}
.chip-group{display:flex;flex-wrap:wrap;gap:8px}
.chip-opt input{position:absolute;opacity:0;width:0;height:0}
.chip-opt span{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
padding:0 18px;border:1.5px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;
font-size:15px;font-weight:600;color:var(--ink-2);
transition:border-color .2s cubic-bezier(.32,.72,0,1),color .2s cubic-bezier(.32,.72,0,1)}
.chip-opt:hover span{border-color:var(--teal-light);color:var(--teal)}
.chip-opt input:checked + span{border-color:var(--teal);color:var(--teal-deep);background:var(--teal-wash)}
.chip-opt input:focus-visible + span{outline:3px solid var(--teal-light);outline-offset:2px}
.chip-other span{border-style:dashed}
.other-line{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13.2px;color:var(--ink-3)}
.other-line input{font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line);
border-radius:9px;padding:9px 12px;min-height:44px;max-width:170px}
.other-line input:focus{outline:3px solid var(--teal-light);outline-offset:1px;border-color:var(--teal)}
.chip-caveat{font-size:12.8px;color:var(--ink-3);margin:12px 0 0;line-height:1.5;max-width:56ch}
/* calculator: the optional peptide picker and its protocol dose steps (2026-10-12) */
.pick{margin:0 0 22px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--teal-wash)}
.pick-label{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font-family:var(--serif);font-size:1.08rem;font-weight:600;color:var(--ink);margin:0 0 10px}
.pick-label span{font-family:var(--sans);font-size:11.6px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.pick select{font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;
padding:10px 12px;min-height:46px;width:100%;max-width:480px}
.pick select:focus{outline:3px solid var(--teal-light);outline-offset:1px;border-color:var(--teal)}
.pick-hint{font-size:13px;color:var(--ink-3);margin:10px 0 0;line-height:1.5;max-width:72ch}
.pick-note{margin:12px 0 0;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:10px;
font-size:14px;line-height:1.55;color:var(--ink-2);max-width:72ch}
.pick-note a{color:var(--teal);font-weight:600}
.pick-steps{margin:0 0 14px}
.pick-steps-label{font-size:13px;font-weight:600;color:var(--ink-3);margin:0 0 8px}
.simple-answer{margin-top:30px;padding:26px 28px 22px;border:1.5px solid var(--line);
border-radius:var(--radius);background:var(--bg-2)}
.simple-sentence{font-size:clamp(1.12rem,2.4vw,1.5rem);color:var(--ink);margin:0 0 18px;line-height:1.45}
.simple-sentence b{color:var(--ink)}
.simple-units{color:var(--teal-deep)!important;font-size:1.5em;font-family:var(--serif)}
.simple-ruler svg{display:block;width:100%;height:auto}
.simple-facts{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:18px;padding-top:16px;
border-top:1px solid var(--line)}
.simple-facts span{font-size:14px;color:var(--ink-3)}
.simple-facts b{color:var(--ink);font-size:15.4px}
.simple-answer .calc-warnings:not(:empty){margin-top:16px;border-radius:10px;
border:1px solid var(--warn-line);border-top:1px solid var(--warn-line)}
/* ---------- mcg / mg switch in simple mode ---------- */
.dose-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
flex-wrap:wrap;margin-bottom:12px}
.dose-head h3{margin:0}
.unit-switch{display:inline-flex;gap:2px;padding:3px;background:var(--bg-3);
border:1px solid var(--line);border-radius:999px}
.unit-btn{font:inherit;font-size:13.4px;font-weight:700;color:var(--ink-3);background:none;border:0;
padding:7px 16px;border-radius:999px;cursor:pointer;min-height:38px;
transition:background .2s cubic-bezier(.32,.72,0,1),color .2s cubic-bezier(.32,.72,0,1)}
.unit-btn:hover{color:var(--teal)}
.unit-btn.is-on{background:#fff;color:var(--teal-deep);box-shadow:var(--shadow-s)}
.unit-btn:focus-visible{outline:3px solid var(--teal-light);outline-offset:2px}
.simple-both{font-size:14.2px;color:var(--ink-3);margin:-8px 0 16px}
/* the ruler needs breathing room on a phone, where it scales hardest */
.simple-ruler{margin:0 -4px}
@media (max-width:560px){
.simple-answer{padding:20px 16px 18px}
.simple-ruler{margin:0 -8px}
}
/* ---------- reverse solve: how much water? ---------- */
.wsolve{margin-top:26px}
.wsolve-intro{max-width:70ch;margin-bottom:22px}
.wsolve-intro h2{font-size:clamp(1.24rem,2.6vw,1.66rem);margin-bottom:8px}
.wsolve-intro p{color:var(--ink-2);font-size:15.6px;line-height:1.65;margin:0}
.wsolve-grid{display:grid;grid-template-columns:minmax(260px,330px) 1fr;gap:24px;align-items:start}
@media (max-width:800px){.wsolve-grid{grid-template-columns:1fr}}
.wsolve-inputs{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px 14px}
.wsolve-inputs .adm-f > span{display:block;font-size:13.2px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.wsolve-inputs input,.wsolve-inputs select{width:100%;font:inherit;font-size:16px;color:var(--ink);
background:#fff;border:1px solid var(--line);border-radius:9px;padding:10px 12px;min-height:44px}
.wsolve-inputs input:focus,.wsolve-inputs select:focus{outline:3px solid var(--teal-light);
outline-offset:1px;border-color:var(--teal)}
.wsolve-inputs .adm-f{margin-bottom:16px}
.wsolve-dose{display:grid;grid-template-columns:1fr 92px;gap:10px}
.wsolve-answer{background:var(--teal-wash);border:1.5px solid var(--info-line);
border-radius:var(--radius);padding:26px 28px 22px}
.wsolve-lead{font-size:12.4px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
color:var(--teal-deep);margin:0 0 4px}
.wsolve-big{margin:0 0 10px;line-height:1.05}
.wsolve-big b{font-family:var(--serif);font-size:clamp(2.6rem,7vw,3.8rem);color:var(--teal-deep)}
.wsolve-big span{font-size:1.06rem;font-weight:600;color:var(--teal-deep);margin-left:8px}
.wsolve-sub{font-size:15.4px;color:var(--ink-2);line-height:1.6;margin:0 0 16px;max-width:60ch}
.wsolve-check{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;padding:12px 16px;
background:var(--good-bg);border:1px solid var(--good-line);border-radius:10px;font-size:13.8px;
color:#0A5A3A;line-height:1.55}
.wsolve-check b{flex:none}
.wsolve-check.bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.wsolve-facts{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:16px;padding-top:14px;
border-top:1px solid var(--info-line)}
.wsolve-facts span{font-size:13.8px;color:var(--ink-3)}
.wsolve-facts b{color:var(--ink);font-size:15px}
.wsolve-answer .calc-warnings:not(:empty){margin-top:14px;border-radius:10px;border:1px solid var(--warn-line)}
.wsolve-alt,.wsolve-worked{margin-top:34px;max-width:74ch}
.wsolve-alt h3,.wsolve-worked h3{font-size:1.12rem;margin:0 0 8px}
.wsolve-alt p,.wsolve-worked p{color:var(--ink-2);font-size:15.2px;line-height:1.62;margin:0 0 14px}
.calc-table tr.exact td{background:var(--teal-wash);font-weight:600}
.exact-tag{font-size:11.4px;color:var(--teal-deep);background:#fff;border-radius:5px;
padding:2px 7px;margin-left:6px;font-weight:700}
.wsolve-worked ol{margin:0 0 16px;padding-left:22px}
.wsolve-worked li{color:var(--ink-2);font-size:15.6px;line-height:1.7;margin-bottom:8px}
.wsolve-worked b{color:var(--ink)}
.wsolve-formula{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
padding:12px 16px;font-size:14.6px}
.wsolve-formula code{font-size:14.6px;color:var(--teal-deep);font-weight:600}
.wsolve-eg{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:10px;
padding:14px 18px;font-size:14.8px;line-height:1.66}
/* ============================================================
HOME — PHONE
The filters were the problem: 14 category chips under
flex-wrap became 14 full-width rows, roughly 1,600px of
controls before the first peptide. They become a single
swipeable rail here.
The rest follows from putting content ahead of chrome:
one primary action, one line of stats instead of three
boxes, and the explanatory panel deferred to the page that
already exists for it.
============================================================ */
@media (max-width:760px){
/* ---------- hero: say one thing, offer one action ---------- */
.hero{padding:30px 0 34px}
.hero::after{opacity:.09} /* less texture behind small type */
.hero-grid{gap:26px}
.hero h1{font-size:clamp(1.86rem,7.4vw,2.3rem);line-height:1.14;letter-spacing:-.026em;margin-bottom:12px}
.eyebrow{font-size:11.4px;margin-bottom:12px}
.eyebrow::before{width:18px}
/* Drop the second sentence rather than crop the paragraph. Clamping cuts a
line mid-thought; removing a whole sentence still reads as written. */
.hero .lede{font-size:1rem;line-height:1.58;margin-bottom:22px}
.lede-more{display:none}
.hero-actions{flex-direction:column;align-items:stretch;gap:10px}
.hero-actions .btn{width:100%;justify-content:center;min-height:50px;font-size:15.4px}
/* the secondary action stops competing and becomes a quiet link */
.hero-secondary{background:none;border:0;color:#BEE8EF;min-height:auto!important;
padding:6px 0;text-decoration:underline;text-decoration-color:rgba(190,232,239,.4);
text-underline-offset:3px}
.hero-secondary:hover{background:none;color:#fff}
/* three stat boxes stacked were 240px of chrome; one line reads faster */
.hero-stats{display:flex;grid-template-columns:none;gap:0;margin-top:24px;
border-top:1px solid rgba(255,255,255,.2);padding-top:18px}
.hstat{background:none;border:0;padding:0;flex:1;text-align:left}
.hstat + .hstat{border-left:1px solid rgba(255,255,255,.18);padding-left:14px}
.hstat b{font-size:1.5rem}
.hstat span{font-size:11.4px;line-height:1.3;display:block;margin-top:2px}
/* The 1-5 scale is the whole premise, so it stays — compressed, not cut. */
.hero-card{padding:18px 18px 14px;border-radius:14px;box-shadow:0 10px 26px rgba(4,32,40,.22)}
.hero-card h3{font-size:11.4px;margin-bottom:10px}
.scale-row{padding:7px 0;gap:10px}
.scale-row .n{width:26px;height:26px;font-size:13px;flex:none}
.scale-row b{font-size:13.6px}
.scale-row small{font-size:11.8px;line-height:1.4}
/* ---------- filters: one swipeable rail each ---------- */
.toolbar{padding:16px 0 14px}
.filter-row{display:block;margin-top:14px}
.filter-label{display:block;margin-bottom:8px;font-size:11.4px}
.chips{flex-wrap:nowrap;overflow-x:auto;gap:8px;
margin:0 -20px;padding:2px 20px 8px;
scrollbar-width:none;-webkit-overflow-scrolling:touch;
scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;white-space:nowrap;min-height:44px;padding:0 16px;
display:inline-flex;align-items:center;font-size:14px;scroll-snap-align:start}
.search-box input{min-height:52px;font-size:16px} /* 16px stops iOS zooming */
.toolbar-meta{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);
display:flex;align-items:center;justify-content:space-between;gap:12px}
.result-count{font-size:13.4px}
.sort-sel{min-height:44px;font-size:14px}
/* ---------- the library itself ---------- */
.section{padding:28px 0}
.cat-group{margin-bottom:30px}
.cat-head h2{font-size:1.3rem}
.cat-head p{font-size:14px;line-height:1.55}
.cat-head .cat-count{font-size:12px}
.grid{gap:12px}
.pcard{padding:18px 18px 16px;border-radius:14px}
.pcard h3{font-size:1.12rem}
.wrap{padding:0 20px}
.sec-head h2{font-size:1.42rem}
}
/* narrow phones: hold the type, tighten the frame */
@media (max-width:380px){
.wrap{padding:0 16px}
.chips{margin:0 -16px;padding:2px 16px 8px}
.hero h1{font-size:1.72rem}
.hstat b{font-size:1.32rem}
.hstat span{font-size:10.8px}
}
/* ── longevity stack: claim-level evidence audit ────────────────────────── */
.lstack{max-width:900px}
.lsum{border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:26px 0}
.lsum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.lsum-grid div{text-align:center}
.lsum-grid b{display:block;font-size:30px;line-height:1.05;letter-spacing:-.02em}
.lsum-grid span{display:block;font-size:12.5px;color:var(--muted);margin-top:5px}
.lsum-note{margin:16px 0 0;font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
.lwhy,.lladder,.lchanged,.lreadme,.lrefs{margin:34px 0}
.lrungs{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px}
.lrung{display:grid;grid-template-columns:14px 150px 1fr auto;gap:12px;align-items:center;
border:1px solid var(--line);border-radius:10px;padding:11px 14px;cursor:pointer;font-size:14px}
.lrung:hover,.lrung:focus{border-color:var(--accent);outline:none}
.lrung span{color:var(--muted);font-size:13.5px}
.lrung em{font-style:normal;font-size:12px;color:var(--muted);white-space:nowrap}
.lt{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.lt-mechanism{background:#B33F34}.lt-animal{background:#C2571F}
.lt-biomarker{background:#A9691A}.lt-outcome{background:#0F7B4F}
.lcontrols{position:sticky;top:0;z-index:5;display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:26px 0 18px}
.lfilter{display:flex;flex-direction:column;gap:5px}
.lfilter label{font-size:12px;color:var(--muted)}
.lfilter select{padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--bg);
color:inherit;font:inherit;font-size:14px}
.lcount{flex:1 1 100%;margin:0;font-size:13px;color:var(--muted)}
.lcount-strict{color:#0F7B4F;font-weight:600}
.lgrid{display:grid;gap:16px}
.lcard{border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.lgrid.is-strict .lcard{opacity:.97}
.lcard[hidden]{display:none}
.lcard-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.lcard-head h3{margin:0;font-size:19px;letter-spacing:-.01em}
.lcard-head h3 small{font-weight:400;color:var(--muted);font-size:13px;margin-left:7px}
.lcard-role{margin:3px 0 0;font-size:13px;color:var(--muted)}
.lstatus{font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:20px;white-space:nowrap;
text-transform:uppercase;letter-spacing:.03em;cursor:help}
.lstatus-current{background:#E6F4EE;color:#0F7B4F}
.lstatus-paused{background:#FBE9E7;color:#B33F34}
.lstatus-selective{background:#FDF0DC;color:#A9691A}
.lstatus-medical{background:#EAF0FA;color:#2B5FA8}
.lcard-sum{margin:12px 0 0;font-size:15px;line-height:1.6}
.lspread{display:flex;align-items:center;gap:10px;margin:14px 0 0;flex-wrap:wrap}
.lspread-bar{position:relative;flex:1;min-width:120px;height:6px;border-radius:3px;background:var(--line)}
.lspread-bar i{position:absolute;top:0;bottom:0;border-radius:3px;
background:linear-gradient(90deg,#B33F34,#A9691A,#0F7B4F)}
.lspread-end{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.lspread-end[data-ev="5"],.lspread-end[data-ev="4"]{color:#0F7B4F}
.lspread-end[data-ev="3"]{color:#A9691A}
.lspread-end[data-ev="2"]{color:#C2571F}
.lspread-end[data-ev="1"]{color:#B33F34}
.lspread-label{flex:1 1 100%;font-size:12.5px;color:var(--muted)}
.lcard-more{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.lcard-more summary{cursor:pointer;font-size:13px;color:var(--muted);font-weight:600}
.lclaims{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:12px}
.lc{border-left:3px solid var(--line);padding:2px 0 2px 14px}
.lc[hidden]{display:none}
.lc[data-ev="5"],.lc[data-ev="4"]{border-left-color:#0F7B4F}
.lc[data-ev="3"]{border-left-color:#A9691A}
.lc[data-ev="2"]{border-left-color:#C2571F}
.lc[data-ev="1"]{border-left-color:#B33F34}
.lc-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.lc-claim{font-weight:650;font-size:15px}
.lc-ev{white-space:nowrap;font-size:12px;display:flex;gap:6px;align-items:baseline}
.lc-ev b{font-variant-numeric:tabular-nums}
.lc-ev span{color:var(--muted)}
.lc-ev[data-ev="5"] b,.lc-ev[data-ev="4"] b{color:#0F7B4F}
.lc-ev[data-ev="3"] b{color:#A9691A}
.lc-ev[data-ev="2"] b{color:#C2571F}
.lc-ev[data-ev="1"] b{color:#B33F34}
.lc-tier{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-top:5px}
.lc-detail{margin:8px 0 0;font-size:14.5px;line-height:1.6}
.lc-caveat{margin:7px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.lc-caveat b{color:inherit}
.lreg,.ldose{margin:12px 0 0;font-size:13px;color:var(--muted)}
.lnote{font-style:italic}
.lgone{margin:12px 0 0;font-size:13px;color:var(--muted);font-style:italic}
.ltime{padding-left:20px;display:grid;gap:10px;font-size:14.5px;line-height:1.6}
.lrefs ol{padding-left:20px;display:grid;gap:8px;font-size:13.5px;line-height:1.55}
@media(max-width:760px){
.lsum-grid{grid-template-columns:repeat(2,1fr);gap:14px}
.lsum-grid b{font-size:24px}
.lrung{grid-template-columns:12px 1fr;gap:8px}
.lrung span{grid-column:1/-1}
.lrung em{grid-column:1/-1}
.lcontrols{position:static}
.lfilter{flex:1 1 100%}
.lfilter select{width:100%}
.lcard-head{flex-direction:column;gap:8px}
.lc-head{flex-direction:column;gap:3px}
}
/* ============================================================
ARTICLES — editorial treatment
The index used to borrow the glossary's hero and render as a
grid of bordered boxes. A publication reads differently:
a masthead, one genuinely featured piece, and sections
separated by rules rather than boxed in.
============================================================ */
.blog-masthead{background:#fff;border-bottom:1px solid var(--line);padding:30px 0 34px}
.blog-eyebrow{font-size:11.6px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--topic,var(--teal));margin:4px 0 10px}
.blog-masthead h1{font-size:clamp(2.1rem,4.6vw,3.3rem);letter-spacing:-.028em;line-height:1.08}
.blog-standfirst{font-family:var(--serif);font-size:clamp(1.06rem,1.7vw,1.28rem);line-height:1.56;
color:var(--ink-2);max-width:60ch;margin:16px 0 0}
.blog-figures{display:flex;flex-wrap:wrap;gap:0;margin:26px 0 0;padding-top:20px;
border-top:1px solid var(--line)}
.blog-figures > div{padding-right:34px;margin-right:34px;border-right:1px solid var(--line-soft)}
.blog-figures > div:last-child{border-right:0;margin-right:0;padding-right:0}
.blog-figures dt{font-size:11.4px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
font-weight:700;margin-bottom:3px}
.blog-figures dd{margin:0;font-family:var(--serif);font-size:1.68rem;font-weight:700;
color:var(--ink);line-height:1}
/* topic rail — sticky under the header, scrollable on a phone */
.blog-rail{background:rgba(255,255,255,.94);backdrop-filter:saturate(1.6) blur(10px);
border-bottom:1px solid var(--line);position:sticky;top:72px;z-index:30}
.blog-rail-in{display:flex;gap:6px;overflow-x:auto;padding:9px 0;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.blog-rail-in::-webkit-scrollbar{display:none}
.blog-rail a{flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;
min-height:40px;padding:0 14px;border-radius:9px;font-size:13.8px;font-weight:600;color:var(--ink-2)}
.blog-rail a:hover{background:var(--bg-3);color:var(--topic,var(--teal));text-decoration:none}
.blog-rail a span{font-size:11.8px;color:var(--ink-4);font-weight:500}
/* the featured piece gets real weight, not just first position */
.blog-lead{padding:40px 0 34px;border-bottom:1px solid var(--line);position:relative}
.blog-lead::before{content:'';position:absolute;top:0;left:0;width:56px;height:3px;
background:var(--topic,var(--teal))}
.blog-lead-flag{font-size:11.2px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
color:var(--ink-4);margin:0 0 14px}
.blog-lead h2{font-size:clamp(1.72rem,3.7vw,2.62rem);letter-spacing:-.026em;line-height:1.14;
margin:8px 0 14px;max-width:20ch}
.blog-lead h2 a{color:var(--ink)}
.blog-lead h2 a:hover{color:var(--topic,var(--teal));text-decoration:none}
.blog-lead-dek{font-family:var(--serif);font-size:1.14rem;line-height:1.6;color:var(--ink-2);
max-width:62ch;margin:0 0 14px}
.blog-lead-points{list-style:none;margin:20px 0 0;padding:0;max-width:64ch;
display:grid;gap:9px}
.blog-lead-points li{position:relative;padding-left:20px;font-size:14.8px;line-height:1.6;color:var(--ink-2)}
.blog-lead-points li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;
border-radius:50%;background:var(--topic,var(--teal));opacity:.5}
.blog-lead-go{margin:22px 0 0;font-size:14.8px;font-weight:600}
.blog-lead-go a{color:var(--topic,var(--teal))}
/* topic sections */
.blog-sec{padding:38px 0 10px;scroll-margin-top:124px}
.blog-sec-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
padding-bottom:10px;border-bottom:2px solid var(--topic,var(--teal))}
.blog-sec-head h2{font-size:clamp(1.24rem,2.2vw,1.6rem);letter-spacing:-.02em}
.blog-sec-count{font-size:12.2px;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.blog-sec-blurb{color:var(--ink-2);font-size:15.2px;line-height:1.6;max-width:72ch;margin:14px 0 0}
/* cards: hairline-led, not boxed */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
gap:0 34px;margin-top:12px}
.post-card{padding:22px 0 20px;border-top:1px solid var(--line-soft);background:none;border-radius:0}
.post-card:hover{box-shadow:none;border-color:var(--line)}
.post-card h3{font-size:1.16rem;line-height:1.32;margin:0 0 8px;letter-spacing:-.014em}
.post-card h3 a{color:var(--ink)}
.post-card h3 a:hover{color:var(--topic,var(--teal));text-decoration:none}
.post-card p{color:var(--ink-2);font-size:14.6px;line-height:1.6;margin:0 0 12px}
.post-topic{display:inline-block;font-size:11.4px;letter-spacing:.1em;text-transform:uppercase;
font-weight:700;color:var(--topic,var(--teal));margin-bottom:6px}
.post-meta{display:flex;gap:10px;align-items:center;font-size:12.4px;color:var(--ink-3);flex-wrap:wrap}
.post-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-4);flex:none}
.post-meta time{margin-left:auto;color:var(--ink-4)}
@media (max-width:760px){
.blog-masthead{padding:22px 0 26px}
.blog-masthead h1{font-size:1.92rem}
.blog-standfirst{font-size:1rem;margin-top:12px}
.blog-figures{margin-top:20px;padding-top:16px;gap:0}
.blog-figures > div{padding-right:18px;margin-right:18px}
.blog-figures dd{font-size:1.3rem}
.blog-rail{top:0}
.blog-rail-in{margin:0 -20px;padding:8px 20px}
.blog-lead{padding:28px 0 26px}
.blog-lead h2{font-size:1.5rem;max-width:none}
.blog-lead-dek{font-size:1.02rem}
.blog-sec{padding:28px 0 6px;scroll-margin-top:70px}
.post-grid{grid-template-columns:1fr;gap:0}
.post-card{padding:18px 0 16px}
.post-meta time{margin-left:0}
}
/* ---------- the article itself, carrying its topic's accent ---------- */
.post-kicker{font-size:11.6px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
color:var(--topic,var(--teal));margin:0 0 10px}
.post-kicker a{color:inherit}
.post-kicker a:hover{text-decoration:underline}
.post-article > h1{letter-spacing:-.028em}
.post-article .post-dek{max-width:60ch}
/* a hairline in the topic's colour, so the piece reads as part of a section */
.post-byline{border-top:2px solid var(--topic,var(--teal))}
.post-takeaways{background:var(--bg-2);border-color:var(--line)}
.post-takeaways h2{color:var(--topic,var(--teal));font-size:12.4px;letter-spacing:.1em;
text-transform:uppercase;font-weight:700}
.post-takeaways li::marker{color:var(--topic,var(--teal))}
.post-body h2{letter-spacing:-.018em}
.post-body section + section{margin-top:6px}
.post-faq summary::after{color:var(--topic,var(--teal))}
.post-related h2,.post-monos h2,.post-refs h2,.post-faq h2{letter-spacing:-.016em}
/* ---------- regulatory status badge ---------- */
.badge.status{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;
border-radius:8px;font-size:11.8px;letter-spacing:.02em;line-height:1.2}
.badge.status svg{flex:none;opacity:.9}
.badge.status b{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:11.2px}
.badge.status i{font-style:normal;opacity:.72;font-weight:600;padding-left:7px;margin-left:1px;
border-left:1px solid currentColor;border-left-color:color-mix(in srgb,currentColor 30%,transparent)}
/* ---------- verification strip on a monograph ---------- */
.verify{margin:22px 0 0;padding:16px 20px;background:var(--bg-2);
border:1px solid var(--line);border-radius:var(--radius)}
.verify-cap{display:block;font-size:11.4px;letter-spacing:.11em;text-transform:uppercase;
font-weight:700;color:var(--ink-3);margin-bottom:10px}
.verify-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.verify-links a{font-size:14.2px;font-weight:600;color:var(--teal);
text-decoration:underline;text-decoration-color:rgba(21,100,192,.3);text-underline-offset:3px}
.verify-links a:hover{text-decoration-color:var(--teal)}
.verify-note{font-size:12.4px;color:var(--ink-3);line-height:1.55;margin:12px 0 0;max-width:78ch}
@media (max-width:760px){
.verify{padding:14px 16px;border-radius:12px}
.verify-links{gap:8px 0;flex-direction:column}
}
/* ============================================================
BENEFITS AND RISKS, SIDE BY SIDE
The consumer version of this layout is a green tick against a
red cross with a smiling and a frowning face. That hands the
reader a verdict. Here the columns face each other but every
claim carries its own evidence strength, so five weak claims
cannot be mistaken for five strong ones.
============================================================ */
.balance{margin:44px 0 0;scroll-margin-top:96px}
.bal-head{max-width:74ch}
.bal-head h2{margin-bottom:10px}
.bal-head p{font-size:14.8px;line-height:1.62;color:var(--ink-3)}
.bal-grid{display:grid;grid-template-columns:1fr 1px 1fr;gap:0;margin-top:22px;
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
/* a hairline between the columns, not a "VS" */
.bal-grid::before{content:'';grid-column:2;background:var(--line)}
.bal-col{padding:26px 28px 22px;min-width:0;display:flex;flex-direction:column}
.bal-col:first-child{grid-column:1}
.bal-col:last-child{grid-column:3}
/* Header: a hairline, not a 2px coloured rule. The old one drew the eye to the
divider rather than to the heading it sat under. */
.bal-col > header{display:grid;grid-template-columns:auto 1fr;gap:0 13px;align-items:center;
padding-bottom:15px;margin-bottom:2px;border-bottom:1px solid var(--line)}
.bal-mark{grid-row:1 / span 2;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
font-size:16px;font-weight:700;line-height:1;border:1px solid}
.bal-pro .bal-mark{color:var(--good);border-color:var(--good-line);background:var(--good-bg)}
.bal-con .bal-mark{color:var(--bad);border-color:var(--bad-line);background:var(--bad-bg)}
.bal-col h3{font-size:15.4px;font-family:var(--sans);font-weight:700;letter-spacing:-.012em;
color:var(--ink);margin:0;align-self:end}
.bal-count{grid-column:2;margin:2px 0 0;font-size:12.4px;color:var(--ink-3);align-self:start}
.bal-count b{color:var(--ink-2);font-weight:600}
/* Rows: separated, not boxed. No fill, no border, no left accent — the tinted
card treatment made every claim look equally weighted and equally decorated.
Colour is now spent only on the strength meter, where it means something. */
.bal-list{margin:0;padding:0;list-style:none}
.bal-item{padding:17px 0 18px;border-top:1px solid var(--line-soft)}
.bal-item:first-child{border-top:0}
.bal-item-h{display:flex;align-items:baseline;gap:14px;justify-content:space-between;margin-bottom:5px}
.bal-item-h b{font-family:var(--sans);font-size:15.1px;font-weight:650;line-height:1.36;
letter-spacing:-.011em;color:var(--ink);min-width:0}
.bal-item p{margin:0;font-size:14.2px;line-height:1.62;color:var(--ink-2);max-width:62ch}
/* A three-segment meter rather than three chunky squares. Same information,
about a third of the ink. */
.bal-meter{display:flex;gap:2.5px;flex:none;transform:translateY(-1px)}
.bal-meter i{width:13px;height:3px;border-radius:1.5px;background:var(--line);display:block}
.bal-pro .bal-meter i.on{background:var(--good)}
.bal-con .bal-meter i.on{background:var(--bad)}
/* Collapse control. Hidden until nav.js-style enhancement unhides it, so with
scripting off the full list simply renders — which is what it did before. */
.bal-more{display:block;width:100%;margin-top:2px;padding:13px 0 2px;
background:none;border:0;border-top:1px solid var(--line-soft);
font:inherit;font-size:13.2px;font-weight:650;color:var(--teal);
text-align:left;cursor:pointer;letter-spacing:-.005em}
.bal-more:hover{color:var(--teal-deep)}
.bal-more:focus-visible{outline:3px solid var(--teal-light);outline-offset:3px;border-radius:6px}
.bal-more::after{content:'';display:inline-block;width:5px;height:5px;margin-left:7px;
border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
transform:translateY(-2px) rotate(45deg);transition:transform .16s ease}
.bal-more[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.bal-list[data-collapsed] .bal-item.is-extra{display:none}
.bal-foot{margin:16px 0 0;font-size:13.4px;line-height:1.6;color:var(--ink-3);
padding-left:14px;border-left:2px solid var(--line);max-width:78ch}
@media (max-width:820px){
.bal-grid{grid-template-columns:1fr}
.bal-grid::before{display:none}
.bal-col{grid-column:1!important}
.bal-con{border-top:1px solid var(--line)}
.bal-col{padding:18px 18px 16px}
}
/* ============================================================
PEPTIDE MARKS
A tile beside every peptide name. The glyph is the system the
compound acts on; the tint is its evidence rating on the same
1-5 scale used everywhere else. Two facts, no decoration.
============================================================ */
.pep-icon{display:inline-grid;place-items:center;flex:none;
width:var(--mark-size,40px);height:var(--mark-size,40px);
border-radius:calc(var(--mark-size,40px) * 0.28);
color:var(--mark,var(--teal));
background:color-mix(in srgb,var(--mark,var(--teal)) 11%,transparent);
border:1px solid color-mix(in srgb,var(--mark,var(--teal)) 26%,transparent)}
.pep-icon svg{display:block}
/* older engines without color-mix still get a legible tile */
@supports not (background:color-mix(in srgb,red 10%,transparent)){
.pep-icon{background:var(--bg-3);border-color:var(--line)}
}
.pcard-name{display:flex;gap:13px;align-items:center;margin-bottom:2px}
.pcard-name > div{min-width:0}
.pcard-name h3{margin:0}
.pcard-name .aka{margin:2px 0 0}
.detail-name{display:flex;gap:16px;align-items:center;margin-bottom:6px}
.detail-name h1{margin:0;min-width:0}
@media (max-width:560px){
.detail-name{gap:12px}
.pcard-name{gap:11px}
}
/* ============================================================
SITEWIDE SEARCH
============================================================ */
header.site .wrap{gap:18px}
.site-brand{flex:none}
.sitesearch{position:relative;flex:1 1 260px;min-width:0;max-width:440px}
.sitesearch form{position:relative;display:flex;align-items:center}
.sitesearch-icon{position:absolute;left:13px;display:grid;place-items:center;
color:var(--ink-4);pointer-events:none}
.sitesearch input{width:100%;font:inherit;font-size:15px;color:var(--ink);
background:var(--bg-2);border:1.5px solid var(--line);border-radius:11px;
padding:0 40px 0 40px;min-height:44px;
transition:border-color .18s cubic-bezier(.32,.72,0,1),background .18s cubic-bezier(.32,.72,0,1)}
.sitesearch input::placeholder{color:var(--ink-4)}
.sitesearch input:focus{outline:none;border-color:var(--teal);background:#fff;
box-shadow:0 0 0 3px rgba(49,168,184,.22)}
.sitesearch input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.sitesearch-key{position:absolute;right:11px;font-family:var(--sans);font-size:11.6px;
font-weight:700;color:var(--ink-4);background:#fff;border:1px solid var(--line);
border-bottom-width:2px;border-radius:5px;padding:1px 6px;pointer-events:none}
.sitesearch input:focus ~ .sitesearch-key{opacity:0}
.sitesearch-results{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:80;
background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-m);
max-height:min(70vh,520px);overflow-y:auto;overscroll-behavior:contain;padding:6px}
.ss-group + .ss-group{border-top:1px solid var(--line-soft);margin-top:4px;padding-top:4px}
.ss-group-h{font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
color:var(--ink-4);margin:8px 10px 4px}
.ss-group ul{list-style:none;margin:0;padding:0}
.ss-group a{display:block;padding:9px 11px;border-radius:9px;color:var(--ink)}
.ss-group a:hover,.ss-group a.is-active{background:var(--teal-wash);text-decoration:none}
.ss-group a:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.ss-t{display:block;font-size:14.8px;font-weight:600;line-height:1.35}
.ss-t mark{background:rgba(49,168,184,.28);color:inherit;border-radius:3px;padding:0 1px}
.ss-d{display:block;font-size:12.8px;color:var(--ink-3);line-height:1.45;margin-top:2px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-empty{padding:16px 14px}
.ss-empty b{display:block;font-size:14.6px;margin-bottom:5px}
.ss-empty span{font-size:13px;color:var(--ink-3);line-height:1.55}
@media (max-width:900px){
.sitesearch{order:3;flex:1 1 100%;max-width:none;margin-top:2px}
.sitesearch-key{display:none}
}
@media (max-width:760px){
header.site .wrap{gap:10px}
.sitesearch{margin:6px 0 2px}
.sitesearch input{min-height:46px;font-size:16px} /* 16px stops iOS zooming */
.sitesearch-results{position:fixed;left:12px;right:12px;top:auto;
max-height:min(64vh,460px)}
}
/* ---------- infographic sharing ---------- */
.ig-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ig-panel-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ig-share{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
padding:12px 16px;border-top:1px solid var(--line);background:#fff}
.ig-share-cap{font-size:11.4px;letter-spacing:.1em;text-transform:uppercase;
font-weight:700;color:var(--ink-3);margin-right:2px}
.ig-share a,.ig-share button{font:inherit;font-size:13.4px;font-weight:600;color:var(--ink-2);
background:var(--bg-2);border:1px solid var(--line);border-radius:9px;
padding:0 13px;min-height:40px;display:inline-flex;align-items:center;cursor:pointer}
.ig-share a:hover,.ig-share button:hover{border-color:var(--teal);color:var(--teal);text-decoration:none}
@media (max-width:620px){
.ig-share{padding:10px 12px;gap:6px}
.ig-share a,.ig-share button{font-size:12.8px;padding:0 11px;min-height:38px}
.ig-share-cap{width:100%;margin-bottom:2px}
}
/* ============================================================
MONOGRAPH — PHONE
============================================================ */
@media (max-width:760px){
.detail-hero{padding:20px 0 18px}
.detail-hero .pcard-badges{gap:6px}
.detail-name{gap:12px}
.detail-name h1{font-size:clamp(1.72rem,7vw,2.15rem);line-height:1.12}
.detail-hero .aka{font-size:14px}
.byline{font-size:13px}
.detail-layout{gap:24px;padding-bottom:40px}
.prose h2{font-size:1.28rem;margin-top:30px}
.prose > p{font-size:16.2px;line-height:1.7}
/* the at-a-glance table stacks; keep the pairs visually joined */
.facts{padding:14px 16px}
.facts th{font-size:11.4px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.facts td{padding-bottom:12px;font-size:15px}
/* benefit and risk items: the heavy left rule crowded the text at 360px */
.bal-item{padding:15px 0 16px}
.bal-item-h{gap:10px}
.bal-item-h b{font-size:15px;line-height:1.38}
.bal-item p{font-size:14.3px;line-height:1.62;margin-top:5px}
.bal-head p{font-size:14px}
.bal-foot{font-size:12.8px;padding-left:12px}
.bal-col > header{padding-bottom:11px}
.bal-mark{width:30px;height:30px;font-size:19px}
.bal-col h3{font-size:1rem}
.verify{margin-top:18px}
.ig-panel-head{flex-direction:column;align-items:stretch;gap:10px}
.ig-panel-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ig-panel-tools .btn{width:100%;justify-content:center;min-height:46px}
.toc{padding:16px 18px}
.related{grid-template-columns:1fr}
}
/* ── Opinion: aggregated community self-report ─────────────────────────────
Deliberately styled as a quieter sibling of the balance columns, not a peer.
Warm neutral ground instead of white, no evidence pips, and a tier banner
that has to be read before the list. */
.opinion{margin:26px 0 0;scroll-margin-top:96px}
.op-col{border:1px solid var(--line);border-radius:14px;background:var(--bg-2);
padding:22px 24px 20px;position:relative;overflow:hidden}
.op-col::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;
background:linear-gradient(180deg,var(--teal-light),var(--teal))}
.op-col > header{display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:center;
padding-bottom:14px;border-bottom:1px solid var(--line)}
.op-badge{grid-row:1 / span 2;background:var(--teal-wash);color:var(--teal);
border-color:var(--teal-light);font-family:var(--serif);font-size:19px;line-height:1;
padding-top:8px}
.op-col h3{font-size:15.4px;font-family:var(--sans);font-weight:700;letter-spacing:-.012em;color:var(--ink);margin:0;align-self:end}
.op-tier{margin:14px 0 4px;font-size:13.4px;line-height:1.62;color:var(--ink-2);
background:var(--bg-3);border:1px dashed var(--line);border-radius:10px;padding:12px 14px}
.op-tier b{color:var(--ink)}
.op-tier em{font-style:italic}
.op-list{list-style:none;margin:6px 0 0;padding:0;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px}
.op-item{padding:15px 0;border-top:1px solid var(--line-soft);min-width:0}
.op-item:nth-child(-n+2){border-top:0}
/* Grid, not wrapping flex: a long title used to push the meter onto its own
line and strand the kind-mark above it, which read as a broken row rather
than a long one. Three fixed tracks always land on one line; the title wraps
inside its own column. */
.op-t{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
align-items:start;gap:0 9px;margin-bottom:5px}
.op-t b{font-size:14.6px;color:var(--ink);font-weight:700;letter-spacing:-.005em}
.op-item p{margin:0;font-size:14px;line-height:1.62;color:var(--ink-2)}
.op-mark{flex:none;width:19px;height:19px;border-radius:5px;display:grid;place-items:center;
font-size:13px;font-weight:800;line-height:1;margin-top:1px}
.op-up .op-mark{background:var(--good-bg);color:var(--good);border:1px solid var(--good-line)}
.op-down .op-mark{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-line)}
.op-note .op-mark{background:var(--bg-3);color:var(--ink-3);border:1px solid var(--line)}
.op-freq{display:inline-flex;gap:2.5px;flex:none;margin-top:6px}
.op-freq i{width:13px;height:3px;border-radius:1.5px;background:var(--line)}
/* Ink, not colour — these count how often a thing is said, not how well it is
evidenced, so they must not read as a rating. Previously they were so faint
they looked disabled instead of deliberate. */
.op-freq i.on{background:var(--ink-3)}
.op-diverge{margin:18px 0 0;padding:14px 16px;border-radius:10px;
background:var(--teal-wash);border:1px solid var(--teal-light)}
.op-diverge h4{margin:0 0 6px;font-size:12.4px;font-weight:800;letter-spacing:.055em;
text-transform:uppercase;color:var(--teal-deep)}
.op-diverge p{margin:0;font-size:14.2px;line-height:1.66;color:var(--ink)}
@media (max-width:860px){
.op-list{grid-template-columns:1fr;gap:0}
.op-item:nth-child(-n+2){border-top:1px solid var(--line-soft)}
.op-item:first-child{border-top:0}
.op-col{padding:18px 18px 16px;border-radius:12px}
.op-t{gap:0 8px}
}
@media (max-width:520px){
.op-tier{font-size:12.8px;padding:11px 12px}
.op-item p{font-size:13.6px}
.op-diverge{padding:12px 13px}
}
.opinion-none .op-col::before{background:var(--line)}
.opinion-none .op-tier{margin-top:14px;margin-bottom:0}
/* ── Navigation below 900px: the same tree becomes an accordion ───
The panels stop being absolutely-positioned dropdowns and stack in flow, so
opening one pushes the rest down instead of covering the page. The whole
list lives inside a second that is the hamburger — which means the
drawer opens with JavaScript off, unlike a scripted menu button. */
@media (max-width:900px){
nav.main{margin-left:auto}
.navdrawer{display:block;position:static}
.navtoggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
padding:9px 13px 9px 11px;border-radius:10px;border:1px solid var(--line);
background:var(--bg-2);font-size:14.2px;font-weight:700;color:var(--ink);
list-style:none;-webkit-tap-highlight-color:transparent}
.navtoggle::-webkit-details-marker{display:none}
.navtoggle:focus-visible{outline:3px solid var(--teal-light);outline-offset:2px}
.navtoggle-bars{display:grid;gap:3.5px;width:17px}
.navtoggle-bars i{height:2.2px;border-radius:2px;background:var(--ink);transition:.18s ease}
.navtoggle-x{display:none;margin:-1px -2px}
.navdrawer[open] .navtoggle{background:var(--teal);border-color:var(--teal);color:#fff}
.navdrawer[open] .navtoggle-bars{display:none}
.navdrawer[open] .navtoggle-x{display:block}
/* Full-width sheet under the header rather than a floating card: at this size
a menu that does not reach both edges just looks like it failed to load. */
.nav-list{display:block;position:absolute;left:0;right:0;top:100%;z-index:70;
padding:8px 18px 16px;background:#fff;border-top:1px solid var(--line);
box-shadow:0 20px 40px -14px rgba(11,37,48,.24);
max-height:calc(100vh - 100%);overflow-y:auto;overscroll-behavior:contain;
animation:navSheet .16s ease}
@keyframes navSheet{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.nav-item{border-bottom:1px solid var(--line-soft)}
.nav-item:last-child{border-bottom:0}
.nav-link,.nav-group>summary{padding:15px 4px;font-size:16px;border-radius:0;
justify-content:space-between;color:var(--ink)}
.nav-link:hover,.nav-group>summary:hover,.nav-group[open]>summary{background:transparent}
.nav-group>summary .chev{width:14px;height:14px;opacity:.45}
.nav-group[open]>summary{color:var(--teal)}
/* In flow, not floating. */
.nav-panel,.nav-panel-wide{position:static;display:block;min-width:0;
padding:0 0 12px;border:0;border-radius:0;box-shadow:none;animation:none}
.nav-lead a{padding:11px 12px;background:var(--bg-2);border-radius:10px;margin-bottom:6px}
.nav-lead b{font-size:15px}
.nav-lead span{font-size:13px}
.nav-cats{border-left:0;padding:8px 0 0;border-top:1px solid var(--line-soft);margin-top:4px}
.nav-panel:not(.nav-panel-wide) .nav-cats{margin-top:4px}
.nav-cats-h{padding:0 2px 2px}
.nav-note{display:none}
.nav-cats a{padding:9px 10px;font-size:13.6px}
}
@media (max-width:420px){
.navtoggle-t{display:none}
.navtoggle{padding:10px 12px}
.nav-cats ul{grid-template-columns:1fr}
}
/* Someone who has asked for less motion does not want a menu sliding at them. */
@media (prefers-reduced-motion:reduce){
.nav-panel,.nav-list{animation:none!important}
.nav-group>summary .chev{transition:none}
}
/* Statcounter's no-JS fallback pixel. It is 1x1 and invisible either way, but
left in the flow it still contributes a line box to the footer. */
.statcounter{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Open review seats. Deliberately not styled like staff cards — no avatar
circle, and a status chip where a face would be, so the page cannot be
skim-read as a list of people who work here. */
.member.is-open{border-style:dashed;background:var(--bg-2)}
.member-open{display:inline-block;margin-bottom:9px;padding:3px 9px;border-radius:999px;
background:var(--teal-wash);color:var(--teal-deep);border:1px solid var(--teal-light);
font-size:11.2px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.board-cta{margin-top:22px;padding:20px 22px;border:1px solid var(--line);border-radius:14px;
background:#fff;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.board-cta p{margin:0;flex:1 1 420px;font-size:14.4px;line-height:1.62;color:var(--ink-2)}
.board-cta p b{color:var(--ink);display:block;margin-bottom:3px}
/* ── Contact ─────────────────────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:38px;align-items:start}
.contact-form{margin-top:18px}
.contact-form fieldset{border:0;padding:0;margin:0 0 22px}
.contact-form legend{padding:0;margin-bottom:11px;font-size:14.6px;font-weight:700;color:var(--ink)}
.topic-list{display:grid;gap:8px}
.topic-opt{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;cursor:pointer;
border:1px solid var(--line);border-radius:11px;background:#fff;transition:.14s ease}
.topic-opt:hover{border-color:var(--teal-light);background:var(--teal-wash)}
.topic-opt input{margin-top:3px;flex:none;accent-color:var(--teal)}
.topic-opt:has(input:checked){border-color:var(--teal);background:var(--teal-wash);
box-shadow:0 0 0 1px var(--teal) inset}
.topic-opt b{display:block;font-size:14.4px;font-weight:650;color:var(--ink)}
.topic-opt small{display:block;margin-top:2px;font-size:12.8px;color:var(--ink-3);line-height:1.5}
.f{margin-bottom:18px;min-width:0}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.f label{display:block;margin-bottom:6px;font-size:13.8px;font-weight:650;color:var(--ink)}
.f-opt{font-weight:500;color:var(--ink-4);font-size:12.6px}
.f input,.f textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
font:inherit;font-size:15px;color:var(--ink);background:#fff;transition:.14s ease}
.f textarea{resize:vertical;min-height:150px;line-height:1.6}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--teal);
box-shadow:0 0 0 4px rgba(21,100,192,.11)}
.f input[aria-invalid],.f textarea[aria-invalid]{border-color:var(--bad);background:var(--bad-bg)}
.f-err{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--bad)}
.f-note{margin:7px 0 0;font-size:12.8px;line-height:1.55;color:var(--ink-3)}
.f-legal{margin:14px 0 0;font-size:12.8px;line-height:1.6;color:var(--ink-3);max-width:60ch}
.btn-lg{padding:13px 26px;font-size:15px}
/* Off-screen rather than display:none — a bot reading the DOM sees a normal
field, which is the entire point. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-side{display:grid;gap:16px;position:sticky;top:96px}
.side-card{padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}
.side-card h2{font-size:15px;margin:0 0 10px;font-family:var(--sans);font-weight:700;letter-spacing:-.012em}
.side-card p{margin:0 0 10px;font-size:13.8px;line-height:1.62;color:var(--ink-2)}
.side-card p:last-child{margin-bottom:0}
.side-card p b{color:var(--ink)}
.side-card-warn{background:#FFFBF3;border-color:#F0E0C4}
.tick-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.tick-list li{position:relative;padding-left:22px;font-size:13.8px;line-height:1.55;color:var(--ink-2)}
.tick-list li::before{content:'';position:absolute;left:2px;top:6px;width:10px;height:6px;
border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)}
.callout.ok{background:#F1F9F4;border-color:#CBE3D5;color:#0B3D28}
.foot-links{margin-bottom:6px}
.foot-links a{color:rgba(255,255,255,.9);text-decoration:underline}
@media (max-width:900px){
.contact-grid{grid-template-columns:1fr;gap:28px}
.contact-side{position:static}
}
@media (max-width:560px){ .f-row{grid-template-columns:1fr} }
/* ══════════════════════════ WIKI ══════════════════════════ */
.wiki-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.wiki-card{display:block;padding:24px 26px;border:1px solid var(--line);border-radius:16px;background:#fff;
transition:.16s ease}
.wiki-card:hover{border-color:var(--teal-light);box-shadow:var(--shadow-m);transform:translateY(-2px);text-decoration:none}
.wiki-card h3{margin:8px 0 8px;font-size:1.16rem;color:var(--ink)}
.wiki-card p{margin:0;font-size:14.2px;line-height:1.6;color:var(--ink-2)}
.wiki-stats{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;padding-top:13px;border-top:1px solid var(--line-soft)}
.wiki-stats span{font-size:12.4px;color:var(--ink-3)}
.wiki-stats b{color:var(--ink);font-weight:700;font-size:14px}
/* headline figures */
.w-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:0;margin:0 0 24px;
border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.w-stats>div{padding:18px 20px;border-left:1px solid var(--line-soft)}
.w-stats>div:first-child{border-left:0}
.w-stats dt{font-size:11.4px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.w-stats dd{margin:6px 0 0;font-size:1.9rem;font-weight:800;line-height:1;color:var(--ink);letter-spacing:-.02em}
.w-stats dd.warn{color:var(--bad)}
.w-stats dd.sub{margin-top:5px;font-size:12.4px;font-weight:500;color:var(--ink-3);letter-spacing:0}
.w-headline p{max-width:78ch}
/* quadrant chart */
.gap-fig{margin:0}
.gap-tools{margin-bottom:14px}
.chip-row{display:flex;gap:6px;flex-wrap:wrap}
.gap-wrap{position:relative;border:1px solid var(--line);border-radius:16px;background:#fff;padding:10px 12px 4px;overflow:hidden}
.gap-svg{display:block;width:100%;height:auto}
.gap-svg .ax{font-size:12px;fill:var(--ink-4);font-weight:600}
.gap-svg .ax-t{font-size:12.5px;fill:var(--ink-3);font-weight:700;letter-spacing:.02em}
.gap-svg .q-lab{font-size:10.5px;fill:var(--ink-4);font-weight:800;letter-spacing:.1em;opacity:.75}
.gap-svg .gp circle{transition:r .12s ease,fill-opacity .12s ease}
.gap-svg .gp:hover circle,.gap-svg .gp:focus circle{r:11;fill-opacity:1;stroke-width:2.5}
.gap-svg .gp:focus{outline:none}
.gap-svg .gp.is-dim{opacity:.09;pointer-events:none}
/* A fixed strip above the chart rather than a floating card inside it: an
overlay covered the quadrant label it happened to sit on, and moved the plot
under the reader's cursor. */
.gap-read{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;min-height:38px;
padding:9px 14px;margin-bottom:10px;border-radius:11px;background:var(--bg-2);border:1px solid var(--line);
font-size:12.8px;color:var(--ink-3)}
.gr-hint{color:var(--ink-4)}
.gap-read>b{font-size:14.4px;color:var(--ink)}
.gap-read b{color:var(--ink);font-weight:700}
.gr-status{padding:1px 8px;border-radius:999px;background:var(--bg-3);font-size:11.6px}
.gap-fig figcaption{margin-top:11px;font-size:12.8px;line-height:1.6;color:var(--ink-3);max-width:76ch}
.quad-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:18px}
.quad-item{padding:15px 17px;border-radius:12px;border:1px solid var(--line);background:#fff}
.quad-item b{display:block;font-size:14px;color:var(--ink);letter-spacing:-.008em}
.quad-n{display:block;margin:3px 0 7px;font-size:12.2px;font-weight:700;color:var(--ink-4)}
.quad-item p{margin:0;font-size:13.2px;line-height:1.58;color:var(--ink-2)}
.quad-hyped{border-color:var(--bad-line);background:var(--bad-bg)}
.quad-overlooked{border-color:var(--good-line);background:var(--good-bg)}
/* wiki tables */
.w-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
.w-table th{padding:11px 12px;text-align:left;font-size:11.4px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line);white-space:nowrap;
background:var(--bg-2);position:sticky;top:0;z-index:2}
.w-table th.sortable{cursor:pointer;user-select:none}
.w-table th.sortable:hover{color:var(--teal)}
.w-table th.sortable::after{content:'↕';margin-left:6px;opacity:.4;font-size:10px}
.w-table th[data-dir="desc"]::after{content:'↓';opacity:1;color:var(--teal)}
.w-table th[data-dir="asc"]::after{content:'↑';opacity:1;color:var(--teal)}
.w-table th.sortable:focus-visible{outline:3px solid var(--teal-light);outline-offset:-3px}
.w-table td{padding:11px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.w-table tr:hover td{background:var(--bg-2)}
.w-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.w-table th.num{text-align:right}
.w-table .w-rank{width:42px;color:var(--ink-4);font-size:12.6px;text-align:right}
.w-name a{display:flex;align-items:center;gap:9px;font-weight:650;color:var(--ink)}
.w-name a:hover{color:var(--teal)}
.w-name small{display:block;margin-top:2px;font-size:12px;color:var(--ink-4);font-weight:500}
.w-name svg,.w-name .p-icon{flex:none}
.w-status{font-size:12.6px;color:var(--ink-3);white-space:nowrap}
.w-table td.is-gap{color:var(--bad);font-weight:700}
.w-table td.warn{color:var(--bad);font-weight:700}
.ev-pill{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:7px;
background:var(--ev-c);color:#fff;font-size:12.4px;font-weight:800;line-height:1}
.wbar{display:block;height:3px;border-radius:2px;background:var(--line);margin-top:5px;min-width:52px}
.wbar i{display:block;height:100%;border-radius:2px;background:var(--teal)}
.w-note{margin-top:12px;font-size:12.8px;line-height:1.6;color:var(--ink-3);max-width:80ch}
.w-tablefilter{margin-bottom:14px}
/* widest gaps */
.gap-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.gap-list li{padding:17px 20px;border:1px solid var(--line);border-radius:13px;background:#fff;
border-left:3px solid var(--bad)}
.gap-head{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:7px}
.gap-rank{display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:var(--bad-bg);
color:var(--bad);font-size:12.2px;font-weight:800;border:1px solid var(--bad-line)}
.gap-head a{font-size:15.6px;color:var(--ink)}
.gap-meta{margin-left:auto;font-size:12.2px;color:var(--ink-4)}
.gap-list p{margin:0;font-size:14px;line-height:1.64;color:var(--ink-2);max-width:88ch}
/* overlooked */
.ol-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.ol-card{display:block;padding:16px 18px;border:1px solid var(--good-line);border-radius:12px;background:var(--good-bg)}
.ol-card:hover{text-decoration:none;box-shadow:var(--shadow-m);transform:translateY(-2px)}
.ol-card b{display:block;margin:9px 0 3px;font-size:15px;color:var(--ink)}
.ol-card small{display:block;font-size:12.4px;color:var(--ink-3)}
.ol-attn{display:block;margin-top:8px;font-size:11.8px;color:var(--ink-4)}
/* co-discussed pairs */
.pair-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:11px}
.pair{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--line);
border-radius:12px;background:#fff}
.pair.is-mutual{border-color:var(--teal-light);background:var(--teal-wash)}
.pair>a{font-size:14.2px;font-weight:650;color:var(--ink)}
.pair-link{width:18px;height:1.5px;background:var(--ink-4);flex:none}
.pair-ev{font-size:11.8px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.pair-tag{font-size:11px;font-weight:700;color:var(--teal-deep);background:#fff;
border:1px solid var(--teal-light);padding:1px 7px;border-radius:999px}
.pair-cmp{width:100%;margin-top:2px;font-size:12.4px;font-weight:650;color:var(--teal)}
@media (max-width:820px){
.w-stats{grid-template-columns:1fr 1fr}
.w-stats>div:nth-child(odd){border-left:0}
.w-stats>div{border-top:1px solid var(--line-soft)}
.w-stats>div:nth-child(-n+2){border-top:0}
.gap-read{position:static;max-width:none;margin-bottom:8px}
.gap-meta{margin-left:0;width:100%}
}
@media (max-width:560px){
.w-stats{grid-template-columns:1fr}
.w-stats>div{border-left:0}
.w-stats>div:first-child{border-top:0}
.gap-wrap{padding:8px 6px 2px}
.w-table{font-size:13.2px}
.w-table td,.w-table th{padding:9px 8px}
}
/* ══════════════════════ FDA SHORTAGE LIST ══════════════════════ */
.fs-stamp{margin-top:14px;font-size:13px;color:rgba(255,255,255,.8)}
.fs-stamp b{color:#fff;font-weight:700}
.fs-stamp a{color:rgba(255,255,255,.92);text-decoration:underline}
.fs-stats{margin-bottom:26px}
.fs-head{margin-top:34px}
.callout.warn{background:#FFFBF3;border-color:#F0E0C4;color:#6B4C12}
.callout.warn b{color:#4A340A}
.fs-cards{display:grid;gap:14px}
.fs-card{border:1px solid var(--line);border-radius:15px;background:#fff;padding:20px 22px}
.fs-card.fs-current{border-left:3px solid var(--bad);background:#FFFCFB}
.fs-card.fs-resolved{border-left:3px solid var(--good)}
.fs-card header{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:14px}
.fs-card h3{margin:0;font-size:1.14rem}
.fs-flag{padding:3px 10px;border-radius:999px;font-size:11.2px;font-weight:800;
letter-spacing:.06em;text-transform:uppercase}
.fs-flag-current{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-line)}
.fs-flag-resolved{background:var(--good-bg);color:var(--good);border:1px solid var(--good-line)}
.fs-flag-discontinued{background:var(--bg-3);color:var(--ink-3);border:1px solid var(--line)}
.fs-entries{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fs-entry{padding:13px 15px;border-radius:11px;background:var(--bg-2);border:1px solid var(--line-soft)}
.fs-e-current{background:#FFF6F4;border-color:var(--bad-line)}
.fs-e-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.fs-e-head b{font-size:14.4px;color:var(--ink)}
.fs-e-status{font-size:11.6px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.fs-e-current .fs-e-status{color:var(--bad)}
.fs-e-meta{margin-top:4px;font-size:12.4px;color:var(--ink-4)}
.fs-e-reason{margin:8px 0 0;font-size:13.6px;line-height:1.6;color:var(--ink-2)}
.fs-e-link{display:inline-block;margin-top:9px;font-size:12.6px;font-weight:650;color:var(--teal)}
.fs-table .fs-name a{font-weight:650;color:var(--ink)}
.fs-pres{display:inline-block;font-size:12.4px;color:var(--ink-2);background:var(--bg-3);
padding:2px 8px;border-radius:6px;margin:2px 3px 2px 0}
.fs-st{white-space:nowrap;font-size:13px;color:var(--ink-2);text-transform:capitalize}
.fs-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle}
.fs-dot-current{background:var(--bad)}
.fs-dot-resolved{background:var(--good)}
.fs-dot-discontinued{background:var(--ink-4)}
.fs-clear{list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.fs-clear li{padding:11px 14px;border:1px solid var(--line);border-radius:11px;background:#fff}
.fs-clear a{display:block;font-size:14px;font-weight:650;color:var(--ink)}
.fs-clear small{display:block;margin-top:2px;font-size:11.8px;color:var(--ink-4)}
.fs-clear-muted li{background:var(--bg-2);border-style:dashed}
.fs-clear-muted a{color:var(--ink-2);font-weight:600}
.fs-attr{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);
font-size:12.8px;line-height:1.6;color:var(--ink-3)}
@media (max-width:560px){
.fs-clear{grid-template-columns:1fr 1fr}
.fs-card{padding:16px 17px}
}
/* ── sequence & structure ── */
.seq-card .seq-body{padding:16px 18px 6px;border-bottom:1px solid var(--line-soft)}
.seq{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15.5px;line-height:2.1;letter-spacing:.06em;
display:flex;flex-wrap:wrap;align-items:baseline;gap:0 14px;word-break:break-word}
.seq-chain{color:var(--ink-3);font-size:12px;letter-spacing:0;align-self:center}
.seq-term{color:var(--ink-3);font-size:13px;letter-spacing:0}
.seq-block{position:relative;display:inline-block;padding-top:12px;white-space:nowrap}
.seq-n{position:absolute;top:0;left:0;font-size:10px;line-height:1;color:var(--ink-3);letter-spacing:0}
.seq-d{color:#A4322A;font-weight:700}
.seq-nn{color:#2C6E8B;font-weight:700}
.seq-mod{text-decoration:underline dotted;text-underline-offset:3px}
.seq sup{font-size:9px;color:var(--ink-3)}
.seq-foot{font-size:13.4px;color:var(--ink-3);margin:6px 0 0;line-height:1.5}
.seq-lede{max-width:76ch}
.seq-card code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.6px;word-break:break-word}
.seq-mods{margin:0;padding-left:18px}
.seq-mods li{margin:2px 0}
.seq-ids a,.seq-src a{margin-right:12px}
.seq-conf{font-size:13.8px;color:var(--ink-3);margin:10px 0 0}
.seq-conf b{color:var(--ink-2)}
.seq-key{display:flex;gap:16px;flex-wrap:wrap;font-size:12.8px;color:var(--ink-3);margin:8px 0 0}
.seq-key span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.seq-key .k-d::before{background:#A4322A}.seq-key .k-nn::before{background:#2C6E8B}.seq-key .k-mod::before{background:var(--ink-3)}
/* hub table */
.seqtab-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table.seqtab{width:100%;border-collapse:collapse;min-width:900px;font-size:14px}
table.seqtab th,table.seqtab td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
table.seqtab thead th{background:var(--bg-2);font-size:12.4px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);position:sticky;top:0;cursor:pointer;white-space:nowrap}
table.seqtab thead th[aria-sort="ascending"]::after{content:" ↑"}table.seqtab thead th[aria-sort="descending"]::after{content:" ↓"}
table.seqtab td.seq-cell{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.6px;max-width:420px;word-break:break-all;color:var(--ink-2)}
table.seqtab td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.seqtab tbody tr:hover td{background:var(--bg-2)}
.seq-filter{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.seq-filter input[type=search]{flex:1 1 260px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;font:inherit}
.seq-figures{display:flex;gap:28px;flex-wrap:wrap;margin:18px 0 0}
.seq-figures div{min-width:120px}.seq-figures dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.seq-figures dd{margin:2px 0 0;font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
@media (max-width:600px){.seq{font-size:14px;gap:0 10px}}
/* ── compounding status ── */
.reg-block{border:1px solid var(--line);border-left:4px solid #A9691A;border-radius:var(--radius);padding:16px 18px;margin:18px 0 6px;background:var(--bg-2)}
.reg-block[data-state="category-2"],.reg-block[data-state="rejected"]{border-left-color:#A4322A}
.reg-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.reg-head b{font-size:14.6px}.reg-head small{color:var(--ink-3);font-size:12.6px;margin-left:auto}
.reg-line{margin:0 0 12px;font-size:15px;line-height:1.55}
.reg-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 22px;margin:0}
.reg-facts div{min-width:0}.reg-facts dt{font-size:11.8px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.reg-facts dd{margin:2px 0 0;font-size:14.2px;line-height:1.5}
.reg-note{font-size:14.2px;color:var(--ink-2);margin:12px 0 0;line-height:1.55}
.reg-more{margin:12px 0 0;font-size:14px}
.reg-timeline{list-style:none;padding:0;margin:0 0 8px;border-left:2px solid var(--line);}
.reg-timeline li{position:relative;padding:0 0 26px 26px;max-width:80ch}
.reg-timeline li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:#A9691A;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.reg-timeline time{font-size:12.4px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.reg-timeline h3{margin:4px 0 8px;font-size:1.15rem}
.reg-timeline p{margin:0 0 8px;line-height:1.6}
.reg-src{font-size:13px;color:var(--ink-3)}
table.reg-table{min-width:820px}
.mono-src{margin:40px 0 0;scroll-margin-top:96px}
.mono-src h2{font-size:1.3rem;margin:0 0 6px}
.seq-src-list{margin:12px 0 0;padding-left:22px}
.seq-src-list li{margin:0 0 8px;font-size:14.4px;line-height:1.55}
/* ── article figures (lib/blog-widgets.js) ── */
.wg{margin:34px 0;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);overflow:hidden}
.wg figcaption{font-family:var(--sans);font-size:11.8px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
color:var(--ink-3);padding:13px 18px;border-bottom:1px solid var(--line);background:#fff}
.wg-lede{margin:14px 18px 0;font-size:14.8px;line-height:1.6;color:var(--ink-2);max-width:76ch}
.wg-note{margin:14px 18px 16px;font-size:13.6px;line-height:1.55;color:var(--ink-3);max-width:80ch}
.wg-empty{margin:14px 18px;font-size:14px;color:var(--ink-3)}
/* controls */
.wg-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:14px 18px 0}
.wg-search input{padding:8px 12px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:14px;min-width:210px}
.wg-chips{display:flex;gap:7px;flex-wrap:wrap}
.wg-pill{font:inherit;font-size:13px;padding:6px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;
color:var(--ink-2);cursor:pointer;transition:background .15s,border-color .15s}
.wg-pill b{font-variant-numeric:tabular-nums;opacity:.6;margin-left:3px}
.wg-pill:hover{border-color:var(--ink-3)}
.wg-pill.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.wg-pill.is-on b{opacity:.75}
/* table */
.wg-scroll{overflow-x:auto;margin-top:14px}
table.wg-grid{width:100%;border-collapse:collapse;min-width:720px;font-size:14.2px}
table.wg-grid th,table.wg-grid td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
table.wg-grid thead th{background:#fff;font-size:11.8px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
position:sticky;top:0;white-space:nowrap;border-bottom:2px solid var(--line)}
table.wg-grid thead th[data-sort]{cursor:pointer;user-select:none}
table.wg-grid thead th[data-sort]:hover{color:var(--ink)}
table.wg-grid thead th[aria-sort="ascending"]::after{content:" ↑"}
table.wg-grid thead th[aria-sort="descending"]::after{content:" ↓"}
table.wg-grid tbody th{font-weight:700;color:var(--ink);width:210px}
table.wg-grid tbody th small{display:block;font-weight:400;font-size:12.6px;color:var(--ink-3);margin-top:2px}
table.wg-grid tbody tr:hover td,table.wg-grid tbody tr:hover th{background:#fff}
.wg-ev{width:182px}
.wg-chip{display:inline-block;font-size:11.6px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:999px;white-space:nowrap}
.wg-chip[data-tone="good"]{background:#E4F2EA;color:#0C5C3C}
.wg-chip[data-tone="warn"]{background:#FBEEDC;color:#7A4A11}
.wg-chip[data-tone="bad"]{background:#F8E4E1;color:#8A2A22}
.wg-bar{display:block;height:6px;border-radius:999px;background:var(--line);margin-top:8px;overflow:hidden}
.wg-bar > i{display:block;height:100%;width:var(--w);background:var(--c);border-radius:999px}
.wg-anim .wg-bar > i{width:0;transition:width .85s cubic-bezier(.22,.8,.3,1)}
.wg-anim .wg.wg-in .wg-bar > i{width:var(--w)}
/* hair cycle */
.wg-tabs{display:flex;gap:6px;padding:14px 18px 0;flex-wrap:wrap}
.wg-tab{font:inherit;font-size:13.6px;font-weight:600;padding:8px 14px;border:1px solid var(--line);border-bottom:none;
border-radius:9px 9px 0 0;background:#fff;color:var(--ink-3);cursor:pointer}
.wg-tab.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.wg-state{padding:16px 18px 4px;border-top:1px solid var(--line)}
.wg-state-lede{margin:0 0 14px;font-size:15px;line-height:1.6;max-width:76ch}
.wg-cycle{display:flex;width:100%;gap:3px;align-items:flex-end;margin:6px 0 16px}
.wg-phase{flex:0 0 var(--f);min-width:0}
.wg-anim .wg-phase{transform:scaleX(.01);transform-origin:left;transition:transform .7s cubic-bezier(.22,.8,.3,1)}
.wg-anim .wg.wg-in .wg-phase{transform:scaleX(1)}
.wg-phase-bar{display:block;height:22px;border-radius:5px;background:var(--ink-3)}
.wg-phase[data-phase="anagen"] .wg-phase-bar{background:#0F7B4F}
.wg-phase[data-phase="catagen"] .wg-phase-bar{background:#A9691A}
.wg-phase[data-phase="telogen"] .wg-phase-bar{background:#2C6E8B}
.wg-phase[data-phase="exogen"] .wg-phase-bar{background:#8A2D6B}
.wg-phase-name{display:block;font-size:12.4px;font-weight:700;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wg-phase-len{display:block;font-size:11.8px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wg-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px 20px;margin:0 0 6px}
.wg-facts dt{font-size:11.6px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.wg-facts dd{margin:2px 0 0;font-size:14.2px;line-height:1.5}
/* routes */
.wg-route-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);margin-top:14px;border-top:1px solid var(--line)}
.wg-route{background:var(--bg-2);padding:16px 18px}
.wg-route h4{margin:0 0 8px;font-size:1.05rem}
.wg-route-sum{font-size:14.2px;line-height:1.55;margin:12px 0 10px}
.wg-route ul{margin:0;padding-left:18px}
.wg-route li{font-size:13.8px;line-height:1.55;margin:0 0 6px;color:var(--ink-2)}
/* claim check */
.wg-check-list{list-style:none;margin:14px 0 0;padding:0 18px}
.wg-check-list li{border-bottom:1px solid var(--line-soft)}
.wg-check-list li:last-child{border-bottom:0}
.wg-check-list label{display:flex;gap:12px;align-items:flex-start;padding:12px 0;cursor:pointer}
.wg-check-list input{margin-top:3px;width:17px;height:17px;flex:0 0 auto;accent-color:#0F7B4F}
.wg-check-list b{display:block;font-size:14.6px;line-height:1.45}
.wg-check-list small{display:block;font-size:13.2px;color:var(--ink-3);margin-top:3px;line-height:1.5}
.wg-score{display:block;margin:14px 18px 4px;padding:11px 14px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:14.6px}
.wg-score b{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: reduce){
.wg-anim .wg-bar > i{width:var(--w);transition:none}
.wg-anim .wg-phase{transform:none;transition:none}
}
@media (max-width:600px){
.wg-lede,.wg-note{margin-left:14px;margin-right:14px}
.wg-controls,.wg-tabs,.wg-state,.wg-route,.wg-check-list{padding-left:14px;padding-right:14px}
.wg-phase-len{display:none}
}
/* recall lot lookup */
.wg-recall-form{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1.4fr) auto;gap:12px;align-items:end;padding:14px 18px 4px}
.wg-recall-field{display:flex;flex-direction:column;gap:5px;font-size:12.4px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.wg-recall-field select,.wg-recall-field input{font:inherit;font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;min-width:0}
.wg-recall-field input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.wg-recall-result{grid-column:1/-1;display:block;padding:12px 14px;border-radius:10px;font-size:14.6px;line-height:1.55;border:1px solid var(--line);background:#fff}
.wg-recall-result[data-state="hit"]{background:#F8E4E1;border-color:#E3B3AD;color:#6E1F18}
.wg-recall-result[data-state="miss"]{background:#EEF3F5;border-color:#CBD8DD;color:var(--ink-2)}
.wg-recall-result[data-state="empty"]{color:var(--ink-3)}
.wg-recall-table code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.6px}
.wg-recall-table tr.is-hit th,.wg-recall-table tr.is-hit td{background:#F8E4E1}
.wg-recall-contact{margin:0 18px 16px;font-size:13.8px;color:var(--ink-2)}
@media (max-width:640px){.wg-recall-form{grid-template-columns:1fr}}
/* timeline */
.wg-tl{list-style:none;margin:14px 0 6px;padding:0 18px}
.wg-tl-item{display:grid;grid-template-columns:118px 1fr;gap:14px;padding:12px 0;border-left:2px solid var(--line);margin-left:6px;padding-left:16px;position:relative}
.wg-tl-item::before{content:"";position:absolute;left:-7px;top:18px;width:12px;height:12px;border-radius:50%;background:var(--ink-3);border:2px solid var(--bg-2)}
.wg-tl-item[data-tone="bad"]::before{background:#A4322A}.wg-tl-item[data-tone="warn"]::before{background:#A9691A}.wg-tl-item[data-tone="good"]::before{background:#0F7B4F}
.wg-tl-item time{font-size:12.6px;font-weight:700;color:var(--ink-3);letter-spacing:.03em;padding-top:2px}
.wg-tl-body b{display:block;font-size:14.8px;line-height:1.4}
.wg-tl-body p{margin:4px 0 0;font-size:13.8px;line-height:1.55;color:var(--ink-2)}
.wg-tl-anim .wg-tl-item{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.wg-tl-anim .wg-tl-item.wg-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.wg-tl-anim .wg-tl-item{opacity:1;transform:none;transition:none}}
@media (max-width:600px){.wg-tl{padding:0 14px}.wg-tl-item{grid-template-columns:1fr;gap:4px}}
/* ── Questions & answers: reader Q&A under each monograph ─────────────────
Reddit's comment tree on the site's own tokens. A question is a flat post:
compact header row (avatar · name · time), the text, a muted action row.
Answers indent under it behind a thin thread line on the left that folds
the subtree when clicked (it is the of a , so it works
with JavaScript off). Hierarchy is indentation and lines, not boxes in
boxes; the only surfaces are the composer and an open reply form. */
.qa{margin:44px 0 0;scroll-margin-top:96px}
/* sizes live on the thread too, because the admin page renders threads with no .qa wrapper */
.qa,.qa-thread{--qa-av:28px;--qa-av-s:24px;--qa-indent:38px}
.qa-head .eyebrow{margin-bottom:2px}
.qa h2{margin:4px 0 10px}
.qa-lede{font-size:14.8px;line-height:1.62;color:var(--ink-2);max-width:74ch;margin:0 0 8px}
.qa-count{font-size:13px;color:var(--ink-2);margin:0 0 16px}
.qa-count b{color:var(--ink);font-weight:600}
.qa-flash{margin:0 0 14px;padding:10px 14px}
.qa-flash p{margin:0}
/* one-line status strip, not a headed panel: the first stays inline */
.qa-flash p b:first-child{display:inline;margin:0 .35em 0 0}
/* the global callout makes every a heading line; here only the first one is */
.qa-flash p b:not(:first-child){display:inline;margin:0}
/* ── composer: one light surface, Reddit's "add a comment" box ── */
.qa-compose{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:12px;padding:16px 18px;margin:0 0 6px}
.qa-anon{display:flex;gap:12px;align-items:flex-start;font-size:13.6px;line-height:1.6;color:var(--ink-2);margin:0 0 14px}
.qa-anon b{color:var(--ink)}
.qa-anon-ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--teal-wash);color:var(--teal);margin-top:1px}
.qa-form .f{margin-bottom:0}
.qa-form .f label{font-size:13.4px;color:var(--ink-2)}
.qa-form .f input,.qa-form .f textarea{background:#fff;border-radius:12px;font-size:14.6px}
.qa-form .f textarea{min-height:88px;line-height:1.55}
.qa-verify-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}
.qa-verify-row .btn{min-height:46px;white-space:nowrap}
.qa-form-foot{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:10px}
.qa-form-foot .btn{padding:9px 16px;border-radius:999px}
.qa-form-foot .f-note{margin:0;max-width:52ch;font-size:12.4px;color:var(--ink-2)}
.qa-form > .f-note{margin-top:10px;color:var(--ink-2)}
.qa-sent{margin:0 0 14px;font-size:14.4px;line-height:1.6;color:var(--ink-2)}
.qa-sent b{color:var(--ink)}
.qa-devcode{margin:0 0 14px;font-size:13.4px;padding:10px 12px;border-radius:9px;background:var(--warn-bg);border:1px solid var(--warn-line);color:#5E3B0F}
.qa-devcode code{font-size:15px;font-weight:700;letter-spacing:.12em}
.qa-closed{margin:0;font-size:14.4px;color:var(--ink-2)}
.qa-me{display:flex;gap:8px 14px;align-items:center;flex-wrap:wrap;font-size:13.4px;color:var(--ink-2);padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.qa-inline{display:inline}
.qa-link{display:inline-block;font:inherit;font-size:13px;font-weight:600;line-height:1.2;color:var(--teal);background:none;border:0;padding:4px 2px;min-height:24px;cursor:pointer}
.qa-link:hover{text-decoration:underline}
.qa-link-danger{color:var(--ink-2)}
.qa-link-danger:hover{color:var(--bad)}
.qa-counter{display:block;text-align:right;font-size:12px;color:var(--ink-2);min-height:1em;margin-top:4px}
.qa-counter.is-low{color:#5E3B0F;font-weight:600}
/* ── header row ── */
.qa-who{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;line-height:1.3;color:var(--ink-2);min-height:var(--qa-av)}
/* one knob: the initials scale off the avatar size, and answers just set a smaller size */
.qa-avatar{width:var(--qa-av);height:var(--qa-av);border-radius:50%;flex:none;display:inline-grid;place-items:center;font-size:calc(var(--qa-av) * .38);font-weight:800;letter-spacing:.02em;color:#fff;background:var(--c,var(--ink-3));margin-right:2px}
.qa-a .qa-avatar{--qa-av:var(--qa-av-s)}
.qa-avatar.is-gone{background:var(--bg-3);color:var(--ink-4)}
.qa-name{font-weight:700;color:var(--ink);font-size:13.5px}
.qa-name.is-gone{color:var(--ink-2);font-weight:600}
.qa-dot{color:var(--ink-4)}
.qa-who time{color:var(--ink-2);font-weight:500;cursor:default}
.qa-desk{display:inline-block;font-size:10.4px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--teal-deep);background:var(--teal-wash);border:1px solid #C9DCF3;border-radius:5px;padding:1px 6px;vertical-align:1px;cursor:help;line-height:1.5}
.qa-op{display:inline-block;font-size:10.4px;font-weight:800;letter-spacing:.06em;color:var(--teal);line-height:1.5;padding:1px 4px;border-radius:4px;background:var(--teal-wash);cursor:help}
.qa-held{display:inline-block;white-space:nowrap;font-size:11px;font-weight:700;color:#5E3B0F;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:5px;padding:1px 7px}
/* ── posts ── */
.qa-list{list-style:none;margin:0;padding:0}
.qa-thread{padding:18px 0 12px;border-top:1px solid var(--line-soft);min-width:0}
.qa-list > .qa-thread:first-child{border-top:0;padding-top:14px}
.qa-more > .qa-list > .qa-thread:first-child{border-top:1px solid var(--line-soft)}
.qa-q,.qa-a{scroll-margin-top:96px}
/* deep-link and held highlights: a spread shadow, so nothing shifts */
.qa-q:target,.qa-a:target{background:var(--teal-wash);box-shadow:0 0 0 8px var(--teal-wash);border-radius:6px}
.qa-q.is-held,.qa-a.is-held{background:var(--warn-bg);box-shadow:0 0 0 10px var(--warn-bg);border-radius:6px}
/* questions start at the column's left edge: keep the spread out of the page gutter */
.qa-q:target,.qa-q.is-held{clip-path:inset(-10px -10px -10px 0)}
.qa-body{min-width:0;overflow-wrap:anywhere;max-width:80ch}
.qa-q > .qa-body{font-size:16px;line-height:1.5;color:var(--ink);margin-top:6px}
.qa-q > .qa-body p{margin:0 0 .55em;color:var(--ink);font-size:15.6px;font-weight:400;line-height:1.55}
/* the opening paragraph reads as a title so the eye can skip between threads … */
.qa-q > .qa-body p:first-child{font-size:17px;font-weight:600;line-height:1.42;letter-spacing:-.005em;color:var(--ink);overflow-wrap:anywhere}
/* … unless it is the whole question, when a bold wall would be worse than plain text */
.qa-q > .qa-body p:first-child:last-child{font-size:16px;font-weight:500;line-height:1.5}
.qa-body p:last-child{margin-bottom:0}
.qa-a .qa-body{font-size:15.2px;line-height:1.64;color:var(--ink);margin:4px 0 0 calc(var(--qa-av-s) + 8px)}
.qa-a .qa-body p{margin:0 0 .7em;color:inherit}
.qa-gone{margin:2px 0 0 calc(var(--qa-av-s) + 8px);font-size:13.4px;color:var(--ink-2);font-style:italic}
.qa-q > .qa-gone{margin-left:0}
.qa-noans{margin:8px 0 0;font-size:13px;color:var(--ink-2)}
/* ── action row: small, muted, pill hover ── */
.qa-actions{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;margin-top:6px;margin-left:-8px}
.qa-a .qa-actions{margin-left:calc(var(--qa-av-s) + 8px - 8px);margin-top:2px}
.qa-act,.qa-reply > summary,.qa-report > summary{display:inline-flex;align-items:center;gap:5px;min-height:30px;font:inherit;font-size:12.5px;font-weight:650;line-height:1;color:var(--ink-2);background:none;border:0;border-radius:999px;padding:6px 9px;cursor:pointer;text-decoration:none;white-space:nowrap;list-style:none;-webkit-tap-highlight-color:transparent}
.qa-act::-webkit-details-marker,.qa-reply > summary::-webkit-details-marker,.qa-report > summary::-webkit-details-marker{display:none}
.qa-act:hover,.qa-reply > summary:hover,.qa-report > summary:hover{background:var(--bg-3);color:var(--ink)}
.qa-act svg{width:16px;height:16px;flex:none}
.qa-act-danger:hover{color:var(--bad);background:var(--bad-bg)}
.qa-end{margin-left:auto}
.qa-actions > .qa-end:first-child{margin-left:0}
.qa-vote .qa-act{padding-left:7px}
.qa-vote-n{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.qa-vote.is-on .qa-act,.qa-vote .qa-act[aria-pressed="true"]{color:var(--teal);background:var(--teal-wash)}
.qa-vote.is-on .qa-act svg{stroke-width:2.8}
.qa-vote.is-on .qa-vote-n{color:var(--teal-deep)}
.qa-vote.is-static{cursor:default;color:var(--ink-2)}
.qa-vote.is-static:hover{background:none;color:var(--ink-2)}
/* the admin page drops its moderation buttons into the same row */
.qa-tools{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:12.8px}
.qa-actions .qa-admin-tools{margin:0 0 0 8px}
/* Reply and Report are in the row. Closed, each is one pill. Open,
Reply moves to the end of the row (order applies only while open) and
widens to a full line, so Helpful and Report stay together on the first
line and the form drops under them, above the answers — the row never
shatters. Tab order becomes Helpful → Reply → form → Report, which still
reads as the row. Report stays where it was pressed and hangs a small panel
under it. The details keeps its own box on purpose: display:contents would
keep the pill in the row, but its behaviour on a could only be
verified in Chromium. */
.qa-reply,.qa-report{flex:0 0 auto;min-width:0}
.qa-reply[open]{flex:1 1 100%}
.qa-actions > .qa-reply[open]{order:1}
.qa-reply[open] > summary{margin-left:0}
.qa-reply[open] > summary,.qa-report[open] > summary{color:var(--ink);background:var(--bg-3)}
.qa-report{position:relative}
.qa-reply .qa-form{margin:6px 0 6px 0;padding:12px 14px;background:var(--bg-2);border:1px solid var(--line-soft);border-radius:12px}
.qa-reply .qa-form .f textarea{min-height:96px}
.qa-need{margin:6px 0 4px 0;font-size:13.4px;color:var(--ink-2)}
.qa-report-form{position:absolute;right:0;top:calc(100% + 4px);z-index:5;display:flex;gap:8px;align-items:center;justify-content:flex-end;margin:0;padding:8px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 20px rgba(20,40,50,.12)}
.qa-report-form select{font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.qa-report-form .btn{padding:7px 12px;font-size:12.8px;border-radius:999px;white-space:nowrap}
/* ── the thread line: a whose summary is the line itself ── */
.qa-fold{position:relative;margin-top:8px;padding-left:var(--qa-indent);min-width:0}
/* closed: the control sits in the action column, level with the Helpful pill above it; only one label is exposed */
.qa-fold:not([open]){padding-left:0;margin-top:2px}
.qa-fold:not([open]) > summary{margin-left:-8px}
.qa-fold:not([open]) > summary .qa-fold-hide{display:none}
.qa-fold > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;min-height:30px;font-size:12.5px;font-weight:650;color:var(--ink-2);border-radius:999px;padding:6px 10px 6px 8px}
.qa-fold > summary::-webkit-details-marker{display:none}
.qa-fold > summary:hover{background:var(--bg-3);color:var(--ink)}
.qa-fold > summary svg{width:16px;height:16px}
.qa-fold-show{display:inline-flex;align-items:center;gap:5px}
.qa-fold[open] > summary{position:absolute;left:0;top:0;bottom:0;width:var(--qa-av);min-height:0;padding:0;border-radius:6px;display:block}
.qa-fold[open] > summary:hover{background:none}
/* the line is drawn in --ink-3 (3.6:1 on white) so it reads as a control at rest; it starts from a small dot in the avatar column */
.qa-fold[open] > summary::before{content:'';position:absolute;left:calc(50% - 1px);top:4px;bottom:6px;width:2px;border-radius:2px;background:var(--ink-3)}
.qa-fold[open] > summary::after{content:'';position:absolute;left:calc(50% - 2px);top:0;width:4px;height:4px;border-radius:50%;background:var(--ink-3)}
.qa-fold[open] > summary:hover::before,.qa-fold[open] > summary:focus-visible::before{background:var(--teal);width:3px;left:calc(50% - 1.5px)}
.qa-fold[open] > summary:hover::after,.qa-fold[open] > summary:focus-visible::after{background:var(--teal)}
.qa-fold[open] > summary:focus-visible{outline-color:var(--teal)}
/* the site-wide ring is --teal-light, under 3:1 on white; these small controls need the darker one */
.qa-act:focus-visible,.qa-reply > summary:focus-visible,.qa-report > summary:focus-visible,.qa-more > summary:focus-visible,.qa-link:focus-visible,.qa-erase > summary:focus-visible{outline-color:var(--teal)}
/* erase: the link opens a confirmation row; the real button lives inside it */
.qa-erase{display:inline;min-width:0}
.qa-erase > summary{list-style:none;display:inline-block}
.qa-erase > summary::-webkit-details-marker{display:none}
.qa-erase[open]{flex:1 1 100%}
.qa-erase-panel{display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;margin-top:8px;padding:10px 12px;background:var(--bad-bg);border:1px solid var(--bad-line);border-radius:10px;font-size:13.4px;line-height:1.5;color:#5C2119}
.qa-erase-panel b{color:inherit}
.qa-erase-go{border-color:var(--bad-line);color:var(--bad);padding:7px 12px;font-size:12.8px;white-space:nowrap}
.qa-erase-go:hover{background:#fff;border-color:var(--bad)}
.qa-fold[open] > summary .qa-fold-show{display:none}
.qa-answers{list-style:none;margin:0;padding:0;display:grid;gap:14px;min-width:0}
.qa-answers > li{min-width:0}
/* ── list tail, rules ── */
.qa-empty{font-size:14.4px;color:var(--ink-2);padding:6px 0}
.qa-more{margin-top:4px}
.qa-more > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:30px;font-size:13px;font-weight:650;color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:8px 14px;margin:10px 0 6px}
.qa-more > summary::-webkit-details-marker{display:none}
.qa-more > summary:hover{border-color:var(--teal);color:var(--teal)}
.qa-more > summary svg{width:16px;height:16px}
/* the pill says what pressing it will do: Show … closed, Hide … open */
.qa-more-show,.qa-more-hide{display:inline-flex;align-items:center;gap:6px}
.qa-more[open] > summary .qa-more-show{display:none}
.qa-more:not([open]) > summary .qa-more-hide{display:none}
.qa-rules{margin-top:18px;font-size:13.4px;color:var(--ink-2);border-top:1px solid var(--line-soft);padding-top:14px}
.qa-rules > summary{cursor:pointer;font-weight:650;color:var(--ink-2);min-height:30px;display:flex;align-items:center}
.qa-rules > summary::-webkit-details-marker{display:none}
.qa-rules > summary::before{content:'';flex:none;width:7px;height:7px;margin:0 10px 2px 2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.qa-rules[open] > summary::before{transform:translateY(-2px) rotate(45deg)}
.qa-rules-body{margin-top:10px;padding:14px 16px;background:var(--bg-2);border:1px solid var(--line-soft);border-radius:10px;line-height:1.62}
.qa-rules-body p{margin:0 0 .8em;color:var(--ink-2);font-size:13.4px}
.qa-rules-body p:last-child{margin:0}
.qa-rules-body b{color:var(--ink)}
/* touch: a tap must not leave a stuck hover pill behind */
@media (hover:none){
.qa-act:hover,.qa-reply > summary:hover,.qa-report > summary:hover,.qa-fold > summary:hover{background:none;color:var(--ink-2)}
.qa-vote.is-on .qa-act:hover{color:var(--teal);background:var(--teal-wash)}
}
@media (max-width:760px){
.qa{margin-top:36px}
/* the sticky header is two rows tall here (~122px): a deep link must land below it */
.qa,.qa-q,.qa-a,.qa-thread,.qa-compose{scroll-margin-top:136px}
.qa,.qa-thread{--qa-av:26px;--qa-av-s:22px;--qa-indent:30px}
.qa-compose{padding:14px 14px;border-radius:12px}
.qa-verify-row{grid-template-columns:1fr}
.qa-verify-row .btn{width:100%;justify-content:center}
.qa-form-foot .btn{width:100%;justify-content:center}
.qa-form textarea{font-size:16px} /* stops iOS zooming into the field */
.qa-reply .qa-form .f textarea{min-height:120px}
.qa-me{gap:8px 12px}
/* the avatar sits beside "Posting as …" as a header row; Sign out and the
quieter erase link line up under the name */
.qa-me{position:relative;padding-left:calc(var(--qa-av) + 10px)}
.qa-me > .qa-avatar{position:absolute;left:0;top:-1px}
/* line-height, not flex: a flex span would turn the text and the name into items and swallow the space between them */
.qa-me > span:not(.qa-avatar){flex:1 1 100%;line-height:var(--qa-av)}
.qa-me .qa-link-danger{font-weight:500}
.qa-q > .qa-body p{font-size:16.4px}
.qa-q > .qa-body p:first-child{font-size:17px}
.qa-q > .qa-body p:first-child:last-child{font-size:16.5px}
.qa-q:target,.qa-a:target{box-shadow:0 0 0 6px var(--teal-wash)}
.qa-q.is-held,.qa-a.is-held{box-shadow:0 0 0 6px var(--warn-bg)}
/* Reddit mobile: answer text runs under the avatar, not beside it */
.qa-a .qa-body,.qa-gone{margin-left:0;font-size:15px;line-height:1.6}
.qa-a .qa-actions{margin-left:-6px}
/* thumb-sized targets */
.qa-act,.qa-reply > summary,.qa-report > summary,.qa-fold:not([open]) > summary,.qa-more > summary{min-height:40px;padding:8px 10px;font-size:13px}
.qa-rules > summary{min-height:40px}
.qa-fold[open] > summary{width:calc(var(--qa-av) + 6px);left:-3px}
/* the report panel sits in flow under the row, not over the next answer */
.qa-report[open]{flex:1 1 100%;order:2}
.qa-report[open] > summary{display:flex;width:max-content;margin-left:auto}
.qa-report-form{position:static;margin:6px 0 2px;padding:8px;gap:6px;box-shadow:none;background:var(--bg-2);border-color:var(--line-soft);justify-content:flex-start}
.qa-report-form select{flex:1 1 150px;min-width:0;min-height:40px}
}
/* ── Rankings: evidence, risk and goal ────────────────────────────────────
A ranked table has one job the rest of the site does not: make position
legible at a glance without making it look like a verdict. So the rank is a
quiet numeral rather than a medal, the two scores are bars on the same
scale so they can be compared across rows, and the gap between them is the
only figure given colour. Method blocks are , closed by default —
present for anyone who wants to check the arithmetic, not in the way of
anyone who does not. */
.rnk-lede{max-width:78ch;font-size:1.06rem;color:var(--ink-2);margin:14px 0 0}
.rnk-intro{max-width:78ch;font-size:15.2px;line-height:1.65;color:var(--ink-2)}
.rnk-h2{margin:44px 0 10px;scroll-margin-top:96px}
.rnk-figures{display:flex;flex-wrap:wrap;gap:0;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.rnk-figures > div{padding-right:28px;margin-right:28px;border-right:1px solid var(--line-soft)}
.rnk-figures > div:last-child{border-right:0;margin-right:0;padding-right:0}
.rnk-figures dt{font-size:11.4px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.rnk-figures dd{margin:4px 0 0;font-family:var(--serif);font-size:1.7rem;font-weight:700;color:var(--ink);line-height:1}
.rnk-figures dd small{font-size:.5em;font-weight:600;color:var(--ink-3);margin-left:2px}
.rnk-fig-name{font-size:1.16rem!important;line-height:1.25!important}
.rnk-warn{margin:26px 0 18px}
.rnk-note{display:flex;gap:13px;align-items:flex-start;margin:0 0 20px;padding:14px 16px;
background:var(--bg-2);border:1px solid var(--line);border-radius:11px}
.rnk-note svg{flex:none;margin-top:1px;color:var(--teal)}
.rnk-note p{margin:0;font-size:14.4px;line-height:1.6;color:var(--ink-2)}
/* filter strip */
.rnk-filter{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:22px 0 12px}
.rnk-filter input{flex:1 1 320px;min-width:0;font:inherit;font-size:15px;padding:11px 14px;
border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.rnk-filter input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-wash)}
.rnk-count{font-size:13.6px;color:var(--ink-3);white-space:nowrap}
/* the table */
.rnk-tab-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.rnk-tab{width:100%;border-collapse:collapse;font-size:14.4px;min-width:760px}
.rnk-tab th{text-align:left;font-size:11.4px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);
font-weight:700;padding:12px 14px;background:var(--bg-2);border-bottom:1px solid var(--line);vertical-align:bottom;white-space:nowrap}
.rnk-tab th[data-sort]{cursor:pointer;-webkit-user-select:none;user-select:none}
.rnk-tab th[data-sort]:hover{color:var(--teal)}
.rnk-tab th[data-sort]::after{content:'';display:inline-block;width:0;height:0;margin-left:6px;vertical-align:1px;
border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--ink-4);opacity:0}
.rnk-tab th[aria-sort]::after{opacity:1}
.rnk-tab th[aria-sort="ascending"]::after{border-top:0;border-bottom:5px solid var(--teal)}
.rnk-tab th[aria-sort="descending"]::after{border-top-color:var(--teal)}
.rnk-th-sub{display:block;font-size:10px;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--ink-4);margin-top:2px}
.rnk-tab td{padding:12px 14px;border-bottom:1px solid var(--line-soft);color:var(--ink-2);vertical-align:middle}
.rnk-tab tr:last-child td{border-bottom:0}
.rnk-tab tbody tr:hover{background:var(--bg-2)}
.rnk-tab tr.is-hidden{display:none}
.rnk-pos{width:52px;text-align:center}
.rnk-num{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:8px;
background:var(--bg-3);color:var(--ink-2);font-family:var(--serif);font-size:15px;font-weight:700}
.rnk-num.is-top{background:var(--teal-wash);color:var(--teal-deep)}
.rnk-name a{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.rnk-name a:hover b{color:var(--teal);text-decoration:underline}
.rnk-name b{font-size:15px;font-weight:650;letter-spacing:-.005em}
.rnk-name small{display:block;margin-top:2px;font-size:12.2px;color:var(--ink-3)}
.rnk-tab .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.rnk-score{min-width:112px}
.rnk-score b{display:inline-block;min-width:24px;font-size:14px;font-weight:700;color:var(--ink);margin-left:8px}
.rnk-bar{display:inline-block;width:52px;height:6px;border-radius:3px;background:var(--line-soft);vertical-align:middle;overflow:hidden}
.rnk-bar i{display:block;height:100%;border-radius:3px}
.rnk-bar-ev i{background:var(--good)}
.rnk-bar-risk i{background:var(--bad)}
.rnk-gap{font-weight:700}
.rnk-gap.is-over{color:var(--bad)}
.rnk-gap.is-under{color:var(--good)}
.rnk-why{font-size:13px;line-height:1.5;color:var(--ink-3);max-width:34ch}
/* method */
.rnk-method{margin:20px 0 0;border:1px solid var(--line);border-radius:11px;background:var(--bg-2)}
.rnk-method > summary{cursor:pointer;padding:13px 16px;font-size:14px;font-weight:650;color:var(--ink-2);
list-style:none;display:flex;align-items:center;gap:9px}
.rnk-method > summary::-webkit-details-marker{display:none}
.rnk-method > summary::before{content:'';flex:none;width:7px;height:7px;border-right:2px solid currentColor;
border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.rnk-method[open] > summary::before{transform:translateY(-2px) rotate(45deg)}
.rnk-method > summary:hover{color:var(--teal)}
.rnk-method-body{padding:2px 16px 16px}
.rnk-method-tab{width:100%;border-collapse:collapse;font-size:13.4px}
.rnk-method-tab th{text-align:left;width:190px;padding:9px 12px 9px 0;color:var(--ink);font-weight:650;
vertical-align:top;border-top:1px solid var(--line)}
.rnk-method-tab td{padding:9px 0;color:var(--ink-2);line-height:1.6;border-top:1px solid var(--line)}
.rnk-w{display:inline-block;margin-right:7px;padding:1px 7px;border-radius:5px;background:#fff;
border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.rnk-method-body > p{margin:14px 0 0;font-size:13.4px;line-height:1.62;color:var(--ink-3)}
.rnk-foot{margin:20px 0 0;font-size:13.6px;line-height:1.62;color:var(--ink-3);max-width:78ch}
/* the gap list */
.rnk-gaps{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.rnk-gap-item{display:flex;gap:16px;align-items:flex-start;padding:14px 16px;background:#fff;
border:1px solid var(--line);border-left:3px solid var(--bad);border-radius:11px}
.rnk-gap-n{flex:none;font-family:var(--serif);font-size:1.3rem;font-weight:700;color:var(--bad);min-width:52px}
.rnk-gap-item b{font-size:15.2px;color:var(--ink)}
.rnk-gap-item p{margin:3px 0 0;font-size:13.4px;line-height:1.55;color:var(--ink-3)}
/* the hub */
.rnk-hub{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:6px}
.rnk-card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:24px 26px;min-width:0}
.rnk-card-wide{grid-column:1 / -1}
.rnk-card h2{font-size:1.32rem;margin:6px 0 10px}
.rnk-card h2 a{color:var(--ink);text-decoration:none}
.rnk-card h2 a:hover{color:var(--teal);text-decoration:underline}
.rnk-card > p{font-size:14.4px;line-height:1.62;color:var(--ink-2);max-width:62ch}
.rnk-card .btn{margin-top:4px}
.rnk-mini{list-style:none;margin:14px 0 18px;padding:0;display:grid;gap:1px;background:var(--line-soft);
border:1px solid var(--line-soft);border-radius:10px;overflow:hidden}
.rnk-mini li{display:flex;align-items:center;gap:12px;padding:9px 13px;background:#fff;font-size:14px}
.rnk-mini-n{flex:none;width:20px;font-family:var(--serif);font-weight:700;color:var(--ink-4);text-align:right}
.rnk-mini a{flex:1 1 auto;min-width:0;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rnk-mini-s{flex:none;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.rnk-goal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px;margin-top:14px}
.rnk-goal-card{display:block;padding:15px 16px;border:1px solid var(--line);border-radius:11px;background:#fff;
text-decoration:none!important;transition:border-color .15s,transform .15s}
.rnk-goal-card:hover{border-color:var(--teal);transform:translateY(-1px)}
.rnk-goal-card b{display:block;font-size:15px;color:var(--ink);margin-bottom:4px}
.rnk-goal-card span{display:block;font-size:12.8px;line-height:1.5;color:var(--ink-3)}
.rnk-goal-card small{display:block;margin-top:8px;font-size:11.6px;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;color:var(--teal)}
@media (max-width:900px){
.rnk-why{display:none}
.rnk-tab{min-width:560px}
.rnk-hub{grid-template-columns:1fr}
}
@media (max-width:760px){
/* Stacked, the right-hand rules stop separating columns and read as stray
vertical lines beside each figure. Two per row, no rules. */
.rnk-figures{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.rnk-figures > div{padding:0;margin:0;border-right:0}
.rnk-figures dd{font-size:1.42rem}
.rnk-fig-name{font-size:1rem!important}
.rnk-card{padding:18px 18px;border-radius:12px}
.rnk-tab th,.rnk-tab td{padding:10px 11px}
.rnk-bar{width:38px}
.rnk-method-tab th{width:auto;display:block;padding-bottom:2px;border-top:0}
.rnk-method-tab td{display:block;padding-top:0;border-top:0;padding-bottom:12px}
.rnk-method-tab tr + tr th{border-top:1px solid var(--line);padding-top:10px}
.rnk-gap-item{gap:12px;padding:12px 13px}
.rnk-goal-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
.rnk-goal-card{transition:none}
.rnk-goal-card:hover{transform:none}
}
/* ── Blends: what is in a pre-mixed vial ─────────────────────────────────
The component cards are the page. They are built from the monographs, so
they carry the same status badge, evidence badge and icon the rest of the
site uses — a reader should recognise them instantly as the library's own
records rather than as a product description. */
.bl-lede{max-width:78ch;font-size:1.06rem;color:var(--ink-2);margin:12px 0 16px}
.bl-comps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:18px 0 8px}
.bl-comp{display:block;padding:18px 20px;border:1px solid var(--line);border-radius:13px;background:#fff;
text-decoration:none!important;color:inherit;transition:border-color .15s}
a.bl-comp:hover{border-color:var(--teal)}
.bl-comp-h{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.bl-comp-h b{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.008em}
a.bl-comp:hover .bl-comp-h b{color:var(--teal)}
.bl-comp-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.bl-comp > p{margin:0 0 12px;font-size:13.8px;line-height:1.58;color:var(--ink-2)}
.bl-comp-facts{margin:0;display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
border-radius:9px;overflow:hidden}
.bl-comp-facts > div{display:flex;justify-content:space-between;gap:10px;background:#fff;padding:7px 11px}
.bl-comp-facts dt{font-size:12px;color:var(--ink-3)}
.bl-comp-facts dd{margin:0;font-size:12.6px;font-weight:650;color:var(--ink);text-align:right}
.bl-comp-go{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;color:var(--teal)}
.bl-comp-missing{border-style:dashed;background:var(--bg-2)}
.bl-comp-missing b{font-size:15.4px;color:var(--ink-2);text-transform:capitalize}
.bl-comp-missing p{margin:6px 0 0;font-size:13.4px;color:var(--ink-3)}
.bl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:24px}
.bl-card{display:block;padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:#fff;
text-decoration:none!important;color:inherit;transition:border-color .15s,transform .15s}
.bl-card:hover{border-color:var(--teal);transform:translateY(-1px)}
.bl-card > b{display:block;font-family:var(--serif);font-size:1.22rem;font-weight:600;color:var(--ink);letter-spacing:-.015em}
.bl-card:hover > b{color:var(--teal)}
.bl-card-sub{display:block;margin:4px 0 10px;font-size:12.6px;color:var(--ink-3)}
.bl-card > p{margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.bl-card-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bl-card-foot small{width:100%;margin-top:4px;font-size:12.4px;color:var(--ink-3)}
@media (max-width:760px){
.bl-comps{grid-template-columns:1fr}
.bl-grid{grid-template-columns:1fr}
.bl-card{padding:18px 18px}
}
@media (prefers-reduced-motion:reduce){
.bl-card{transition:none}
.bl-card:hover{transform:none}
}
/* ── Register and post in one step ──
The reasons to bother are next to the button, not behind a link: nobody
reads a privacy notice before deciding whether to ask a question. */
.qa-join .f{margin-bottom:14px}
.qa-join .qa-verify-row{align-items:end}
.qa-why{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.qa-why li{position:relative;padding-left:24px;font-size:13.2px;line-height:1.55;color:var(--ink-2)}
.qa-why li::before{content:'';position:absolute;left:2px;top:6px;width:11px;height:6px;
border-left:2px solid var(--good);border-bottom:2px solid var(--good);transform:rotate(-45deg)}
.qa-why b{color:var(--ink)}
@media (max-width:760px){
.qa-why li{font-size:12.8px}
}
/* ── The specification panel ──────────────────────────────────────────────
Vial on the left, ten answers on the right. The look is deliberately
quieter than a card grid: one surface, hairline dividers, generous line
height, and colour used only for the status dot that says whether an answer
exists at all. Every row is a , so the whole thing works with
JavaScript off; public/js/spec.js only adds the staggered reveal. */
.spec{display:grid;grid-template-columns:288px minmax(0,1fr);gap:34px;align-items:start;
margin:0 0 38px;padding:26px 28px 24px;border:1px solid var(--line);border-radius:20px;
background:linear-gradient(180deg,#fff,var(--bg-2));box-shadow:var(--shadow-s)}
/* ── the vial ── */
.spec-vial{position:sticky;top:96px;text-align:center;min-width:0}
.vial{display:block;margin:0 auto;max-width:100%;height:auto}
/* a slow, once-only settle; motion is opt-in twice over (see the query below) */
.spec-vial .vial{animation:vial-in .9s cubic-bezier(.22,1,.36,1) both}
@keyframes vial-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.spec-form{margin:10px 0 0;font-size:12.6px;font-weight:650;color:var(--ink-2);line-height:1.45}
.spec-cat{margin:3px 0 0;font-size:11.4px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
/* ── the table ── */
.spec-table{min-width:0}
.spec-head{padding-bottom:12px;border-bottom:1px solid var(--line)}
.spec-head h2{font-size:1.32rem;margin:0}
.spec-head p{margin:5px 0 0;font-size:13.2px;color:var(--ink-3)}
.sp-row{border-bottom:1px solid var(--line-soft)}
.sp-row:last-child{border-bottom:0}
.sp-row > summary{list-style:none;cursor:pointer;display:grid;
grid-template-columns:minmax(150px,auto) minmax(0,1fr) 18px;align-items:baseline;gap:10px 18px;
padding:13px 10px 13px 8px;margin:0 -10px 0 -8px;border-radius:10px;
transition:background .18s ease}
.sp-row > summary::-webkit-details-marker{display:none}
.sp-row > summary:hover{background:var(--bg-3)}
.sp-row > summary:focus-visible{outline:3px solid var(--teal);outline-offset:-2px}
@media (hover:none){.sp-row > summary:hover{background:none}}
.sp-label{display:inline-flex;align-items:baseline;gap:9px;font-size:13.4px;font-weight:650;
color:var(--ink-2);white-space:nowrap}
.sp-head{font-size:14.8px;line-height:1.5;color:var(--ink);font-weight:500;min-width:0;overflow-wrap:anywhere}
.sp-chev{align-self:center;justify-self:end;width:7px;height:7px;flex:none;
border-right:2px solid var(--ink-4);border-bottom:2px solid var(--ink-4);
transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s cubic-bezier(.22,1,.36,1)}
.sp-row[open] > summary .sp-chev{transform:rotate(-135deg) translate(-2px,-2px)}
.sp-row[open] > summary{background:var(--bg-3)}
.sp-row[open] > summary .sp-head{color:var(--ink-2)}
/* the dot is the whole legend: does an answer exist, and is it serious */
.sp-dot{width:7px;height:7px;border-radius:50%;flex:none;align-self:center;background:var(--ink-4)}
.sp-known{background:var(--good)}
.sp-label{position:relative}
.sp-trial{background:var(--warn)}
.sp-none{background:var(--bad)}
.sp-warn{background:var(--bad)}
.sp-plain{background:var(--ink-4)}
.sp-body{padding:2px 10px 16px 30px;max-width:76ch;
animation:sp-open .3s cubic-bezier(.22,1,.36,1) both}
@keyframes sp-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sp-body p{margin:0;font-size:14.4px;line-height:1.68;color:var(--ink-2)}
.sp-body p + p{margin-top:9px}
.sp-body b{color:var(--ink)}
.sp-links{margin-top:10px!important;font-size:13.2px;font-weight:600}
.sp-links a{margin-right:4px}
/* ── the staggered reveal ──
Rows start hidden only once the script has confirmed it will animate them;
without JavaScript, or with reduced motion, .spec never gets is-live and
every row is simply visible. */
.spec.is-live .sp-row{opacity:0;transform:translateY(10px)}
.spec.is-live .sp-row.is-in{opacity:1;transform:none;
transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
@media (max-width:1000px){
.spec{grid-template-columns:212px minmax(0,1fr);gap:24px;padding:22px 22px 20px}
.spec-vial{position:static}
.sp-row > summary{grid-template-columns:minmax(130px,auto) minmax(0,1fr) 16px}
}
@media (max-width:760px){
.spec{grid-template-columns:1fr;gap:18px;padding:18px 16px 14px;border-radius:16px;margin-bottom:30px}
/* grid, not flex: the form line and the category were competing for the
same row beside the vial and both ended up in a narrow column */
.spec-vial{display:grid;grid-template-columns:96px minmax(0,1fr);gap:2px 16px;
align-items:center;text-align:left}
.spec-vial .vial{width:96px;flex:none;margin:0;grid-row:1 / span 2;align-self:center}
.spec-form{margin:0;font-size:13.4px;align-self:end}
.spec-cat{margin:0;align-self:start}
/* label above answer: two narrow columns side by side is unreadable at 390px */
.sp-row > summary{grid-template-columns:minmax(0,1fr) 16px;gap:4px 12px;padding:12px 8px;min-height:44px}
.sp-label{grid-column:1;font-size:12.4px;color:var(--ink-3)}
.sp-head{grid-column:1;font-size:15px}
.sp-chev{grid-column:2;grid-row:1 / span 2;align-self:center}
.sp-body{padding:2px 8px 14px 17px}
}
@media (prefers-reduced-motion:reduce){
.spec-vial .vial{animation:none}
.sp-body{animation:none}
.sp-chev{transition:none}
.spec.is-live .sp-row{opacity:1;transform:none}
}
/* ── the vial turns ──
The print travels across the glass while the highlights stay put, which is
what a real cylinder does under a fixed light. One body width per cycle and
the text duplicated end to end, so the loop has no seam. Hovering or
focusing the panel stops it, because a moving label is hard to read — and
`prefers-reduced-motion` stops it for good. */
.vial-print{animation:vial-turn 26s linear infinite}
@keyframes vial-turn{from{transform:translateX(0)}to{transform:translateX(-116px)}}
.spec-vial:hover .vial-print,
.spec-vial:focus-within .vial-print{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
.vial-print{animation:none}
}
/* ============================================================
Cheat Sheet category (/cheat-sheet and its reference pages)
============================================================ */
.cs-hero{background:linear-gradient(180deg,var(--teal-wash) 0%,rgba(234,242,251,.35) 62%,var(--bg) 100%);
border-bottom:1px solid var(--line-soft);padding:54px 0 40px;overflow:hidden}
.cs-hero-sub{padding:44px 0 32px}
.cs-kicker{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0 0 10px}
.cs-kicker a{color:inherit}
.cs-hero h1{margin:0 0 14px}
.cs-lede{max-width:760px;font-size:18px;color:var(--ink-2);margin:0 0 20px}
.cs-chips{display:flex;flex-wrap:wrap;gap:10px}
.cs-chip{display:inline-flex;align-items:center;gap:7px;font-size:13.4px;font-weight:600;color:var(--ink-2);
background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:7px 14px;box-shadow:var(--shadow-s)}
.cs-chip svg{flex:none}
.cs-chip-warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
/* hero entrance — pure CSS so it needs no script */
@keyframes cs-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.cs-hero-a{animation:cs-rise .6s cubic-bezier(.22,.8,.3,1) both}
.cs-hero .cs-hero-a:nth-child(2){animation-delay:.08s}
.cs-hero .cs-hero-a:nth-child(3){animation-delay:.16s}
.cs-hero .cs-hero-a:nth-child(4){animation-delay:.24s}
/* resources strip */
.cs-res{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px;margin:30px 0 22px}
.cs-res-card{display:flex;flex-direction:column;gap:5px;background:var(--bg);border:1px solid var(--line);
border-radius:var(--radius);padding:16px 18px;text-decoration:none!important;box-shadow:var(--shadow-s);
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.cs-res-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:var(--teal-light)}
.cs-res-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--teal);
background:var(--teal-wash);margin-bottom:3px}
.cs-res-t{font-weight:700;color:var(--ink);font-size:15px}
.cs-res-d{font-size:13px;color:var(--ink-3);line-height:1.45}
/* vendor-links note */
.cs-note{background:var(--info-bg);border:1px solid var(--info-line);border-radius:var(--radius);
padding:18px 22px;margin:0 0 8px}
.cs-note h2{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.02em;margin:0 0 6px}
.cs-note p{margin:0;font-size:14.6px;color:var(--ink-2)}
/* sticky section jump bar */
.cs-jump{position:sticky;top:72px;z-index:50;background:rgba(255,255,255,.96);
backdrop-filter:saturate(1.5) blur(10px);border-bottom:1px solid var(--line);margin-top:18px}
.cs-jump-in{display:flex;gap:8px;overflow-x:auto;padding-top:10px;padding-bottom:10px;scrollbar-width:none}
.cs-jump-in::-webkit-scrollbar{display:none}
.cs-jump-btn{flex:none;font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none!important;
border:1px solid var(--line);border-radius:999px;padding:6px 13px;background:var(--bg);
transition:background .18s ease,color .18s ease,border-color .18s ease}
.cs-jump-btn b{color:var(--teal);font-weight:800;margin-right:2px}
.cs-jump-btn:hover{border-color:var(--teal-light);color:var(--teal)}
.cs-jump-btn.active{background:var(--teal);border-color:var(--teal);color:#fff}
.cs-jump-btn.active b{color:rgba(255,255,255,.9)}
.cs-filter{flex:none;margin-left:auto;display:flex;align-items:center;gap:8px}
.cs-filter input{font:inherit;font-size:13.6px;color:var(--ink);background:var(--bg-2);
border:1px solid var(--line);border-radius:999px;padding:6px 14px;min-width:190px}
.cs-filter input:focus{outline:none;border-color:var(--teal-light);background:var(--bg)}
.cs-filter small{color:var(--ink-3);font-size:12.5px;white-space:nowrap}
/* sections */
.cs-main{padding-bottom:70px}
.cs-sec{margin-top:52px;scroll-margin-top:150px}
.cs-sech{display:flex;align-items:center;gap:14px}
.cs-secnum{font-family:var(--serif);font-size:2.1rem;font-weight:700;color:transparent;
-webkit-text-stroke:1.3px var(--teal-light);letter-spacing:.02em;line-height:1}
.cs-secglyph{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
color:var(--teal);background:var(--teal-wash);flex:none}
.cs-sech h2{font-size:clamp(1.35rem,2.2vw,1.8rem)}
.cs-secintro{max-width:820px;color:var(--ink-2);margin:10px 0 18px}
.cs-secnote{display:flex;align-items:flex-start;gap:9px;max-width:820px;font-size:14px;color:var(--ink-2);
background:var(--bg-2);border:1px solid var(--line-soft);border-radius:10px;padding:12px 16px;margin:14px 0 0}
.cs-secnote svg{flex:none;color:var(--teal);margin-top:1px}
/* tables */
.cs-tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-s);background:var(--bg)}
.cs-table{width:100%;border-collapse:collapse;font-size:14.2px;min-width:840px}
.cs-table th{font-family:var(--sans);font-size:11.6px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink-3);text-align:left;padding:12px 14px;background:var(--bg-2);border-bottom:1px solid var(--line);
position:sticky;top:0}
.cs-table td{padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--ink-2)}
.cs-table tbody tr:last-child td{border-bottom:0}
.cs-table tbody tr{transition:background .15s ease}
.cs-table tbody tr:hover{background:var(--teal-wash)}
.cs-table td:first-child{min-width:190px}
.cs-pc{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cs-pep{font-weight:700;color:var(--ink)}
a.cs-pep{color:var(--teal)}
/* mobile cards mirror of each table */
.cs-cards{display:none}
.cs-mc{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-s);padding:15px 17px;margin-bottom:12px}
.cs-mc-top{padding-bottom:9px;border-bottom:1px solid var(--line-soft);margin-bottom:9px}
.cs-mc dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 16px}
.cs-mc dl div{min-width:0}
.cs-mc dt{font-size:10.8px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.cs-mc dd{margin:2px 0 0;font-size:13.8px;color:var(--ink-2)}
/* reference band: bloodwork · COA · reconstitution */
.cs-refs{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin-top:60px}
.cs-ref{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-s);padding:22px 24px}
.cs-ref h2{display:flex;align-items:center;gap:9px;font-size:1.14rem;margin:0 0 10px}
.cs-ref h2 svg{color:var(--teal);flex:none}
.cs-ref p{font-size:14.4px;color:var(--ink-2)}
.cs-checks{list-style:none;margin:0;padding:0}
.cs-checks li{position:relative;padding:5px 0 5px 26px;font-size:14.4px;color:var(--ink-2)}
.cs-checks li::before{content:'';position:absolute;left:2px;top:11px;width:13px;height:7px;
border-left:2.2px solid var(--good);border-bottom:2.2px solid var(--good);transform:rotate(-45deg)}
.cs-coa{list-style:none;margin:0;padding:0}
.cs-coa li{padding:6px 0;font-size:14.2px;color:var(--ink-2);border-bottom:1px dashed var(--line-soft)}
.cs-coa li:last-child{border-bottom:0}
.cs-coa b{color:var(--ink)}
.cs-math{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:10px;padding:13px 16px;margin:12px 0}
.cs-math code{display:block;font-size:13.4px;color:var(--teal-deep);padding:3px 0}
.cs-math p{margin:8px 0 0;font-size:13.6px}
.cs-cta{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.4px;color:#fff!important;
background:var(--teal);border-radius:10px;padding:10px 18px;text-decoration:none!important;
transition:transform .18s ease,box-shadow .18s ease}
.cs-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)}
.cs-cta .chev{transform:rotate(-90deg)}
.cs-fine{font-size:13.4px;color:var(--ink-3);margin-top:12px}
/* disclaimer block */
.cs-disc{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--radius);
padding:22px 26px;margin-top:34px}
.cs-disc h2{display:flex;align-items:center;gap:9px;font-family:var(--sans);font-size:15px;font-weight:800;
letter-spacing:.01em;color:var(--warn);margin:0 0 10px}
.cs-disc p{font-size:14.6px;color:var(--ink-2);margin:0 0 8px}
.cs-disc p:last-child{margin:0}
/* storage guide */
.cs-stor{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:34px}
.cs-stor-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-s);padding:20px 22px;transition:transform .22s ease,box-shadow .22s ease}
.cs-stor-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-m)}
.cs-stor-card h2{display:flex;align-items:center;gap:10px;font-size:1.08rem;margin:0 0 12px}
.cs-stor-card h2 svg{color:var(--teal);flex:none}
.cs-stor-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
padding:7px 0;border-bottom:1px dashed var(--line-soft);font-size:14.2px}
.cs-stor-row:last-child{border-bottom:0}
.cs-stor-row span{color:var(--ink-3)}
.cs-stor-row b{color:var(--ink);text-align:right;font-weight:600}
/* side effects */
.cs-se{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;margin-top:34px}
.cs-se-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-s);padding:20px 22px}
.cs-se-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.cs-se-h h2{font-size:1.06rem;flex:1;min-width:0}
.cs-se-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
color:var(--teal);background:var(--teal-wash)}
.cs-se-tag{flex:none;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
border-radius:999px;padding:4px 10px}
.cs-se-common .cs-se-tag{color:var(--info);background:var(--info-bg);border:1px solid var(--info-line)}
.cs-se-ok .cs-se-tag{color:var(--good);background:var(--good-bg);border:1px solid var(--good-line)}
.cs-se-caution{border-color:var(--warn-line);background:linear-gradient(180deg,var(--warn-bg),var(--bg) 130px)}
.cs-se-caution .cs-se-tag{color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-line)}
.cs-se-caution .cs-se-ic{color:var(--warn);background:var(--warn-bg)}
.cs-se-row{position:relative;padding:9px 0 9px 20px;font-size:14.3px;color:var(--ink-2);
border-bottom:1px dashed var(--line-soft)}
.cs-se-row:last-child{border-bottom:0}
.cs-se-row::before{content:'';position:absolute;left:2px;top:17px;width:7px;height:7px;border-radius:50%;background:var(--teal-light)}
.cs-se-caution .cs-se-row::before{background:var(--warn)}
.cs-se-row b{color:var(--ink)}
.cs-se-fix{display:block;margin-top:5px;font-size:13.6px;color:var(--ink-2)}
.cs-se-fix i{font-style:normal;font-size:10.6px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
color:var(--good);background:var(--good-bg);border:1px solid var(--good-line);border-radius:6px;padding:1.5px 7px;margin-right:7px}
/* scroll-reveal — armed only when the script runs (body.cs-anim), so the page
is complete without JavaScript */
.cs-anim .cs-reveal{opacity:0;transform:translateY(14px);
transition:opacity .55s cubic-bezier(.22,.8,.3,1),transform .55s cubic-bezier(.22,.8,.3,1);
transition-delay:var(--cs-d,0s)}
.cs-anim .cs-reveal.in{opacity:1;transform:none}
@media (max-width:900px){
/* header.site stays sticky at every width and is taller than 72px once its
row wraps, so a sticky bar here slides underneath it — static instead */
.cs-jump{position:static}
}
@media (max-width:760px){
.cs-tw{display:none}
.cs-cards{display:block}
.cs-sec{scroll-margin-top:140px}
.cs-hero{padding:38px 0 30px}
}
@media (max-width:480px){
.cs-mc dl{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
.cs-hero-a{animation:none}
.cs-anim .cs-reveal{opacity:1;transform:none;transition:none}
.cs-res-card,.cs-stor-card,.cs-cta{transition:none}
}
@media print{
.cs-jump{display:none!important}
.cs-anim .cs-reveal{opacity:1!important;transform:none!important;transition:none!important}
.cs-tw{overflow:visible;box-shadow:none}
.cs-table{min-width:0}
}
/* ── cheat sheet block on each monograph ── */
.cs-mono{margin:34px 0 8px;border:1px solid var(--info-line);border-radius:var(--radius);
background:linear-gradient(180deg,var(--teal-wash),var(--bg) 120px);padding:22px 24px;scroll-margin-top:96px}
.cs-mono-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cs-mono-head h2{margin:0;font-size:1.3rem}
.cs-mono-link{font-size:13.6px;font-weight:600;white-space:nowrap}
.cs-mono-cap{font-size:13.8px;color:var(--ink-3);margin:8px 0 16px;max-width:78ch}
.cs-mono-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.cs-mono-card{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:12px;
padding:14px 16px;box-shadow:var(--shadow-s)}
.cs-mono-ctx{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);
margin-bottom:10px}
.cs-mono-ctx b{color:var(--teal)}
.cs-mono-ctx span{color:var(--ink)}
.cs-mono-card dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.cs-mono-card dt{font-size:10.6px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.cs-mono-card dd{margin:2px 0 0;font-size:13.8px;color:var(--ink-2)}
.cs-mono-prod{list-style:none;margin:14px 0 0;padding:0}
.cs-mono-prod li{position:relative;padding:4px 0 4px 20px;font-size:14px;color:var(--ink-2)}
.cs-mono-prod li::before{content:'';position:absolute;left:2px;top:12px;width:7px;height:7px;border-radius:50%;background:var(--teal-light)}
.cs-mono-stor,.cs-mono-se{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--ink-2);
background:var(--bg);border:1px solid var(--line-soft);border-radius:10px;padding:11px 14px;margin:12px 0 0}
.cs-mono-stor svg,.cs-mono-se svg{flex:none;color:var(--teal);margin-top:2px}
.cs-mono-se svg{color:var(--warn)}
@media (max-width:480px){.cs-mono-card dl{grid-template-columns:1fr}}
@media print{.cs-mono{background:none}}
/* ── protocol overview + dosing table inside the monograph cheat block ── */
.cs-proto-h{font-family:var(--sans);font-size:12.6px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
color:var(--teal-deep);margin:18px 0 10px;display:flex;align-items:baseline;gap:10px}
.cs-proto-h:first-of-type{margin-top:2px}
.cs-proto-vial{font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--ink-3);font-size:12.6px}
.cs-proto-ov{background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-s)}
.cs-proto-row{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line-soft)}
.cs-proto-row:last-child{border-bottom:0}
.cs-proto-row:nth-child(odd){background:var(--bg-2)}
.cs-proto-k{font-size:11.4px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);align-self:center}
.cs-proto-v{font-size:14.2px;color:var(--ink-2)}
.cs-proto-tw{overflow-x:auto;background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-s)}
.cs-proto-tbl{width:100%;border-collapse:collapse;font-size:13.8px;min-width:420px}
.cs-proto-tbl th{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-align:left;
color:#fff;background:var(--teal);padding:9px 14px}
.cs-proto-tbl td{padding:9px 14px;border-bottom:1px solid var(--line-soft);color:var(--ink-2);vertical-align:top}
.cs-proto-tbl tbody tr:last-child td{border-bottom:0}
.cs-proto-tbl td.u{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-proto-freq{font-size:13.6px;color:var(--ink-3);margin:10px 2px 0}
@media (max-width:520px){.cs-proto-row{grid-template-columns:1fr;gap:2px;padding:9px 14px}}
/* ============================================================
/deaths — why Americans aged 25–44 are dying sooner
Charts are server-rendered (SVG for lines, HTML for bars, dots and tiles)
so every value reads with JavaScript off; public/js/deaths.js adds hover,
toggles and motion. Motion styles only arm under body.dx-anim.
============================================================ */
.dx{--dx-focus:#C2571F;--dx-focus-wash:#FBEDE5;--dx-blue:#1564C0;--dx-mute:#B9C7CD;--dx-grid:#E4ECEF;
--dx-axis:#C9D6DB;--dx-surface:#fff}
.dx .hero{padding-bottom:clamp(40px,5vw,64px)}
.dx-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center}
.dx-hero-grid h1{margin-bottom:16px}
.dx-hero-grid .lede{margin-bottom:0}
.dx-cite{margin-top:18px;font-size:13px;color:rgba(255,255,255,.72)}
.dx-cite a{color:#fff;text-decoration:underline;text-underline-offset:2px}
/* hero card: one dot per death per 100,000 */
.dx-dots{background:#fff;color:var(--ink);border-radius:18px;padding:22px 24px 20px;box-shadow:0 20px 50px rgba(4,32,40,.3)}
.dx-dots-top{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.dx-dots-num{font-size:clamp(2.6rem,5vw,3.4rem);font-weight:800;line-height:.95;letter-spacing:-.03em;color:var(--ink)}
.dx-dots-num small{display:block;font-size:12.6px;font-weight:600;letter-spacing:.01em;color:var(--ink-3);margin-top:6px}
.dx-dots svg{display:block;width:100%;height:auto}
.dx-dots circle{fill:var(--dx-mute)}
.dx-dots circle.x{fill:var(--dx-focus);transition:opacity .35s ease,transform .35s ease;transform-box:fill-box;transform-origin:center}
.dx-dots[data-view="a"] circle.x{opacity:0}
/* 2024: the deaths that have gone since the peak stay as outlines, so the fall reads */
.dx-dots[data-view="c"] circle.x:not(.c){fill:transparent;stroke:var(--dx-focus);stroke-width:1.4;stroke-opacity:.45}
.dx-dots-key{display:flex;gap:16px;flex-wrap:wrap;font-size:12.8px;color:var(--ink-2);margin-top:12px}
.dx-dots-key i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.dx-dots-note{font-size:12.4px;color:var(--ink-3);margin:8px 0 0}
/* the extra dots pop in on reveal, and again each time 2021 is re-selected:
switching data-view drops the animation and re-applying it restarts it */
body.dx-anim .dx-dots:not(.dx-in) circle.x{opacity:0}
body.dx-anim .dx-dots.dx-in[data-view="b"] circle.x,body.dx-anim .dx-dots.dx-in[data-view="c"] circle.x.c{animation:dx-pop .5s cubic-bezier(.2,.9,.3,1.3) both;
animation-delay:calc(var(--i) * 14ms)}
@keyframes dx-pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
/* segmented toggle */
.dx-seg{display:inline-flex;background:var(--bg-3);border-radius:999px;padding:3px;gap:2px}
.dx-seg button{font:inherit;font-size:12.8px;font-weight:700;border:0;background:transparent;color:var(--ink-2);
padding:6px 13px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.dx-seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:var(--shadow-s)}
.dx-seg button:hover{color:var(--ink)}
/* stat strip */
.dx-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0}
.dx-stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px 16px;box-shadow:var(--shadow-s);
display:flex;flex-direction:column;gap:6px;text-decoration:none!important;color:inherit;
transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
a.dx-stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-m);border-color:#C6D8E0}
.dx-stat .k{font-size:11.4px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);line-height:1.35}
.dx-stat .v{font-size:2.35rem;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.dx-stat .v.hot{color:var(--dx-focus)}
.dx-stat .s{font-size:13.2px;color:var(--ink-2);line-height:1.45}
.dx-stat .go{font-size:12.4px;font-weight:700;color:var(--teal);margin-top:auto;padding-top:4px}
/* chart card */
.dv{margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px 18px;box-shadow:var(--shadow-s)}
.dv + .dv{margin-top:22px}
.dv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.dv-head h3{font-family:var(--sans);font-size:1.06rem;font-weight:700;letter-spacing:-.005em}
.dv-head p{margin:4px 0 0;font-size:13.6px;color:var(--ink-3);max-width:62ch}
.dv-host,.dv-plot{position:relative}
.dv-plot{outline-offset:4px;border-radius:8px}
.dv-plot svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
/* --k = viewBox units per CSS pixel, set by deaths.js, so text stays ~12px at any width */
.dv-plot text{font-family:var(--sans);fill:var(--ink-3);font-size:calc(var(--fs,12.5px) * var(--k,1))}
.dv-grid line{stroke:var(--dx-grid);stroke-width:calc(1px * var(--k,1));shape-rendering:crispEdges}
.dv-grid line.base{stroke:var(--dx-axis)}
.dv-grid text{font-variant-numeric:tabular-nums}
.dv-x text{text-anchor:middle;font-variant-numeric:tabular-nums}
.dv-x line{stroke:var(--dx-axis);stroke-width:calc(1px * var(--k,1));shape-rendering:crispEdges}
/* stroke widths scale with --k like the text: vector-effect:non-scaling-stroke
would do this too, but it breaks the pathLength dash used for the draw-in */
.dv-path{fill:none;stroke:var(--c);stroke-width:calc(2.2px * var(--k,1));stroke-linecap:round;stroke-linejoin:round;
transition:opacity .25s}
.dv-path.focus{stroke-width:calc(3px * var(--k,1))}
.dv-area{fill:var(--c);opacity:.09;transition:opacity .25s}
.dv-end{fill:var(--c);stroke:#fff;stroke-width:calc(2px * var(--k,1));transition:opacity .25s}
.dv-endlabel{--fs:13.5px;font-weight:700;fill:var(--ink)!important;transition:opacity .25s}
.dv-endlabel tspan.sub{font-weight:500;fill:var(--ink-3)}
.is-off{opacity:0!important;pointer-events:none}
.dv-ann line{stroke:var(--ink-4);stroke-width:calc(1px * var(--k,1));shape-rendering:crispEdges}
.dv-ann circle{fill:#fff;stroke:var(--ink);stroke-width:calc(2px * var(--k,1))}
.dv-ann text{--fs:12.5px;fill:var(--ink-2)!important;font-weight:600;paint-order:stroke;stroke:#fff;stroke-width:calc(4px * var(--k,1));stroke-linejoin:round}
.dv-ann rect{fill:var(--bg-3)}
.dv-cross line{stroke:var(--ink-3);stroke-width:calc(1px * var(--k,1));shape-rendering:crispEdges}
.dv-cross circle{stroke:#fff;stroke-width:calc(2px * var(--k,1))}
.dv-v-narrow{display:none}
@media (max-width:640px){.dv-v-wide{display:none}.dv-v-narrow{display:block}}
body.dx-anim .dv-line:not(.dx-in) .dv-path{stroke-dasharray:1;stroke-dashoffset:1}
body.dx-anim .dv-line .dv-path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.8s cubic-bezier(.45,.05,.25,1),opacity .25s}
body.dx-anim .dv-line .dv-path:nth-of-type(2){transition-delay:.15s}
body.dx-anim .dv-line .dv-path:nth-of-type(3){transition-delay:.3s}
body.dx-anim .dv-line:not(.dx-in) .dv-area,
body.dx-anim .dv-line:not(.dx-in) .dv-end,
body.dx-anim .dv-line:not(.dx-in) .dv-endlabel,
body.dx-anim .dv-line:not(.dx-in) .dv-ann{opacity:0}
body.dx-anim .dv-line .dv-area,body.dx-anim .dv-line .dv-end,body.dx-anim .dv-line .dv-endlabel,
body.dx-anim .dv-line .dv-ann{transition:opacity .6s ease 1.4s}
/* legend: buttons when the series can be toggled */
.dv-legend{display:flex;gap:6px 8px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.dv-legend button,.dv-legend span{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13px;font-weight:600;
color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 10px}
.dv-legend button{cursor:pointer;transition:opacity .2s,background .2s}
.dv-legend button:hover{background:#fff}
.dv-legend button[aria-pressed="false"]{opacity:.5;text-decoration:line-through}
.dv-legend i{width:16px;height:3px;border-radius:2px;background:var(--c)}
.dv-legend i.dot{width:10px;height:10px;border-radius:50%}
/* tooltip */
.dv-tip{position:absolute;z-index:5;pointer-events:none;min-width:130px;max-width:260px;background:#0B2530;color:#fff;
border-radius:10px;padding:9px 12px 10px;font-size:13px;line-height:1.4;box-shadow:0 10px 26px rgba(4,24,32,.28)}
.dv-tip-h{font-size:11.6px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#9FDCE5;margin-bottom:4px}
.dv-tip-row{display:flex;align-items:center;gap:8px;margin-top:2px}
.dv-tip-row b{font-size:15px;font-variant-numeric:tabular-nums}
.dv-tip-row span{color:rgba(255,255,255,.75)}
.dv-key{width:14px;height:3px;border-radius:2px;flex:none}
.dv-tip-note{margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.8);font-size:12.4px}
.dv-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-top:12px}
.dv-src{font-size:12.4px;color:var(--ink-3);margin:0;max-width:78ch}
.dv-src a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
.dv-table{margin-top:12px;font-size:13.6px}
.dv-table summary{cursor:pointer;font-size:12.8px;font-weight:700;color:var(--teal);display:inline-flex;align-items:center;gap:6px}
.dv-table summary::-webkit-details-marker{display:none}
.dv-table summary::before{content:'';width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(-45deg);transition:transform .2s}
.dv-table[open] summary::before{transform:rotate(45deg)}
.dv-table-wrap{overflow-x:auto;margin-top:10px;border:1px solid var(--line-soft);border-radius:10px}
.dv-table table{border-collapse:collapse;width:100%;min-width:320px}
.dv-table th,.dv-table td{padding:6px 12px;border-bottom:1px solid var(--line-soft);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dv-table th:first-child,.dv-table td:first-child{text-align:left}
.dv-table thead th{font-size:11.4px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);background:var(--bg-2)}
.dv-table tr.hl td{background:var(--dx-focus-wash);font-weight:700}
/* horizontal bars (HTML) */
.dx-bars{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.dx-bar{display:grid;grid-template-columns:minmax(92px,150px) minmax(0,1fr) 74px;gap:12px;align-items:center;
border-radius:8px;padding:3px 4px;cursor:default;outline-offset:2px}
.dx-bar:hover,.dx-bar:focus-visible{background:var(--bg-2)}
.dx-bar-l{font-size:14px;font-weight:600;color:var(--ink-2)}
.dx-bar-l small{display:block;font-size:11.8px;font-weight:500;color:var(--ink-3)}
.dx-bar-t{position:relative;height:22px}
.dx-bar-f{position:absolute;left:var(--l,0);top:2px;height:18px;width:var(--w);background:var(--dx-mute);border-radius:0 5px 5px 0;
transform-origin:left center}
.dx-bars.has-neg .dx-bar-t::before{content:'';position:absolute;left:var(--z);top:-3px;bottom:-3px;width:1px;background:var(--ink-4)}
.dx-bar.neg .dx-bar-f{border-radius:5px 0 0 5px;transform-origin:right center}
.dx-bar.hl .dx-bar-f{background:var(--dx-focus)}
.dx-bar.hl .dx-bar-l{color:var(--ink);font-weight:800}
.dx-bar-v{font-size:14.4px;font-weight:700;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.dx-bar.neg .dx-bar-f{background:#86B6EF}
body.dx-anim .dx-bars:not(.dx-in) .dx-bar-f{transform:scaleX(0)}
body.dx-anim .dx-bars .dx-bar-f{transition:transform 1s cubic-bezier(.25,.8,.25,1);transition-delay:calc(var(--i) * 70ms)}
/* cause cards */
.dx-causes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dx-cause{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-s);
transition:transform .22s ease,box-shadow .22s ease,border-color .22s}
.dx-cause:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)}
.dx-cause[open]{border-color:#E7C3AD;box-shadow:var(--shadow-m)}
.dx-cause summary{list-style:none;cursor:pointer;padding:18px 20px 16px;display:grid;gap:6px}
.dx-cause summary::-webkit-details-marker{display:none}
.dx-cause-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dx-cause-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--dx-focus-wash);color:var(--dx-focus)}
.dx-cause-ic svg{width:21px;height:21px}
.dx-cause-more{font-size:12px;font-weight:700;color:var(--teal);display:inline-flex;align-items:center;gap:5px}
.dx-cause-more svg{transition:transform .2s}
.dx-cause[open] .dx-cause-more svg{transform:rotate(180deg)}
.dx-cause-n{font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--ink);margin-top:6px}
.dx-cause-t{font-size:15px;font-weight:700;color:var(--ink)}
.dx-cause-p{font-size:12.6px;color:var(--ink-3);font-weight:600}
.dx-meter{position:relative;height:8px;border-radius:99px;background:var(--bg-3);margin-top:6px;overflow:hidden}
.dx-meter i{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--dx-focus);border-radius:99px;transform-origin:left}
body.dx-anim .dx-causes:not(.dx-in) .dx-meter i{transform:scaleX(0)}
body.dx-anim .dx-causes .dx-meter i{transition:transform 1.1s cubic-bezier(.25,.8,.25,1);transition-delay:calc(var(--i) * 90ms + .2s)}
.dx-cause-body{padding:0 20px 18px;font-size:14.2px;color:var(--ink-2);line-height:1.6;border-top:1px solid var(--line-soft);padding-top:14px}
.dx-cause-body p:last-child{margin-bottom:0}
/* country dot plot (HTML) */
.dx-le{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.dx-le li{display:grid;grid-template-columns:34px minmax(96px,160px) minmax(0,1fr) 52px;gap:10px;align-items:center;
padding:3px 6px;border-radius:8px;outline-offset:2px}
.dx-le li:hover,.dx-le li:focus-visible{background:var(--bg-2)}
.dx-le .rk{font-size:12.4px;font-weight:700;color:var(--ink-4);text-align:right;font-variant-numeric:tabular-nums}
.dx-le .nm{font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-le .tr{position:relative;height:20px}
.dx-le .tr::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--dx-grid)}
.dx-le .st{position:absolute;top:50%;left:0;width:var(--x);height:2px;margin-top:-1px;background:var(--dx-mute);opacity:.55;transform-origin:left}
.dx-le .dt{position:absolute;top:50%;left:var(--x);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
background:var(--dx-blue);box-shadow:0 0 0 2px #fff}
.dx-le .vl{font-size:14px;font-weight:700;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.dx-le li.us{background:var(--dx-focus-wash)}
.dx-le li.us .nm,.dx-le li.us .rk{color:var(--ink);font-weight:800}
.dx-le li.us .dt{background:var(--dx-focus);width:16px;height:16px;margin:-8px 0 0 -8px}
.dx-le li.us .st{background:var(--dx-focus);opacity:.6}
.dx-le-gap{font-size:12.4px;color:var(--ink-3);padding:4px 6px 4px 50px;font-style:italic}
.dx-le-axis{display:grid;grid-template-columns:34px minmax(96px,160px) minmax(0,1fr) 52px;gap:10px;padding:6px 6px 0}
.dx-le-axis div{position:relative;height:18px;font-size:11.8px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.dx-le-axis .tk{position:absolute;transform:translateX(-50%)}
body.dx-anim .dx-le:not(.dx-in) .dt{transform:translateX(-40px);opacity:0}
body.dx-anim .dx-le:not(.dx-in) .st{transform:scaleX(0)}
body.dx-anim .dx-le .dt{transition:transform .8s cubic-bezier(.25,.8,.25,1),opacity .5s;transition-delay:calc(var(--i) * 45ms)}
body.dx-anim .dx-le .st{transition:transform .8s cubic-bezier(.25,.8,.25,1);transition-delay:calc(var(--i) * 45ms)}
/* state tile map */
.dx-mapwrap{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr);gap:24px;align-items:start}
.dx-map{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:4px}
.dx-tile{aspect-ratio:1;border:0;border-radius:7px;font:inherit;font-size:clamp(9.5px,1.15vw,12.6px);font-weight:800;
letter-spacing:.02em;cursor:pointer;display:grid;place-items:center;align-content:center;gap:0;line-height:1.05;
background:var(--b);color:var(--fg,#0B2530);transition:transform .15s ease,box-shadow .15s ease;padding:0}
.dx-tile small{font-size:.82em;font-weight:600;opacity:.85;font-variant-numeric:tabular-nums}
.dx-tile:hover{transform:scale(1.08);box-shadow:0 6px 16px rgba(11,37,48,.22);position:relative;z-index:2}
.dx-tile[aria-pressed="true"]{box-shadow:0 0 0 3px #0B2530;position:relative;z-index:3}
.dx-mapbox[data-view="e21"] .dx-tile{--b:var(--b21);--fg:var(--f21)}
.dx-mapbox[data-view="chg"] .dx-tile{--b:var(--bch);--fg:var(--fch)}
.dx-mapbox[data-view="e21"] .dx-tile .c,.dx-mapbox[data-view="chg"] .dx-tile .e{display:none}
.dx-mapbox[data-view="e21"] .dx-scale-set.chg,.dx-mapbox[data-view="chg"] .dx-scale-set.e21{display:none}
body.dx-anim .dx-map:not(.dx-in) .dx-tile{opacity:0;transform:scale(.6)}
body.dx-anim .dx-map .dx-tile{transition:opacity .45s ease,transform .45s cubic-bezier(.2,.9,.3,1.2),box-shadow .15s;
transition-delay:calc(var(--i) * 12ms)}
body.dx-anim .dx-map.dx-in .dx-tile:hover{transition-delay:0s}
.dx-scale{display:flex;align-items:center;gap:0;margin-top:14px;font-size:11.8px;color:var(--ink-3)}
.dx-scale i{flex:1;height:10px}
.dx-scale i:first-of-type{border-radius:5px 0 0 5px}
.dx-scale i:last-of-type{border-radius:0 5px 5px 0}
.dx-scale-l{display:flex;justify-content:space-between;font-size:11.8px;color:var(--ink-3);margin-top:4px;font-variant-numeric:tabular-nums}
.dx-panel{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.dx-panel h4{font-family:var(--serif);font-size:1.45rem;margin-bottom:10px}
.dx-panel dl{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin:0}
.dx-panel dt{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.dx-panel dd{margin:2px 0 0;font-size:1.3rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.dx-panel p{font-size:13px;color:var(--ink-3);margin:14px 0 0}
/* drivers */
.dx-drivers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dx-driver{background:#fff;border:1px solid var(--line);border-radius:14px;transition:box-shadow .2s,border-color .2s}
.dx-driver[open]{box-shadow:var(--shadow-m);border-color:#C6D8E0}
.dx-driver summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;gap:14px;align-items:center}
.dx-driver summary::-webkit-details-marker{display:none}
.dx-driver-ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--teal-wash);color:var(--teal)}
.dx-driver-ic svg{width:24px;height:24px}
.dx-driver b{font-size:15px;color:var(--ink);line-height:1.3}
.dx-driver summary .chev{margin-left:auto;flex:none;color:var(--ink-4);transition:transform .2s}
.dx-driver[open] summary .chev{transform:rotate(180deg)}
.dx-driver p{margin:0;padding:0 18px 16px 76px;font-size:14px;color:var(--ink-2);line-height:1.6}
body.dx-anim .dx-drivers:not(.dx-in) .dx-driver{opacity:0;transform:translateY(14px)}
body.dx-anim .dx-drivers .dx-driver{transition:opacity .5s ease,transform .5s ease,box-shadow .2s,border-color .2s;
transition-delay:calc(var(--i) * 80ms)}
/* generic reveal */
body.dx-anim .dx-fade:not(.dx-in){opacity:0;transform:translateY(18px)}
body.dx-anim .dx-fade{transition:opacity .7s ease,transform .7s ease}
.dx-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.dx-rise-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 4px}
.dx-rise-stats div{background:var(--bg-2);border-radius:10px;padding:10px 12px}
.dx-rise-stats b{display:block;font-size:1.35rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.dx-rise-stats b.hot{color:var(--dx-focus)}
.dx-rise-stats span{font-size:12px;color:var(--ink-3);font-weight:600}
.dx-two > .dv + .dv{margin-top:0}
.dx-note{font-size:14.4px;color:var(--ink-2);max-width:74ch}
.dx-sources{font-size:14px;color:var(--ink-2);padding-left:20px}
.dx-sources li{margin-bottom:8px}
.dx-sources a{word-break:break-word}
.dx-jump{position:sticky;top:72px;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.6) blur(10px);
border-bottom:1px solid var(--line)}
.dx-jump ul{list-style:none;margin:0 auto;padding:10px 24px;display:flex;gap:8px;overflow-x:auto;max-width:var(--wrap);scrollbar-width:none}
.dx-jump ul::-webkit-scrollbar{display:none}
.dx-jump a{display:inline-block;white-space:nowrap;font-size:13px;font-weight:700;color:var(--ink-2);padding:6px 12px;border-radius:999px;
border:1px solid var(--line);background:#fff;text-decoration:none}
.dx-jump a:hover{border-color:var(--teal-light);color:var(--teal)}
.dx section[id]{scroll-margin-top:130px}
/* cause card: start vs end on one scale */
.dx-mini{display:grid;gap:5px;margin-top:8px}
.dx-mini-r{display:grid;grid-template-columns:36px minmax(0,1fr) 44px;gap:8px;align-items:center}
.dx-mini-r em{font-style:normal;font-size:11.6px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.dx-mini-r b{font-size:12.6px;font-weight:700;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.dx-mini .dx-meter{margin-top:0}
.dx-cause-icd{font-size:12px!important;color:var(--ink-3);margin-top:8px}
.dx-cause-now{font-size:12.4px;font-weight:600;color:var(--ink-2);margin-top:4px;padding-top:8px;border-top:1px dashed var(--line)}
/* world: rank ladder beside the swarm */
.dx-world{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:22px;align-items:stretch}
.dx-world > .dv + .dv{margin-top:0}
.dx-bee{fill:var(--dx-blue);stroke:#fff;stroke-width:1.6;cursor:default;transition:opacity .4s ease,transform .5s cubic-bezier(.2,.9,.3,1.2);
transform-box:fill-box;transform-origin:center}
.dx-bee.hi{fill:var(--dx-mute)}
.dx-bee.us{fill:var(--dx-focus);stroke-width:2.4}
.dx-bee:hover{stroke:#0B2530;stroke-width:2}
.dx-bee-us{stroke:var(--dx-focus);stroke-width:1.5;shape-rendering:crispEdges}
.dx-bee-l{font-weight:700;fill:var(--ink)!important}
.dx-bee-l2{--fs:11.5px}
.dx-bee-lead{stroke:var(--ink-4);stroke-width:calc(1px * var(--k,1))}
.dx-bee-fig .dv-grid line{stroke:var(--dx-axis)}
body.dx-anim .dx-bee-fig:not(.dx-in) .dx-bee{opacity:0;transform:scale(.3)}
body.dx-anim .dx-bee-fig .dx-bee:nth-of-type(3n){transition-delay:.15s}
body.dx-anim .dx-bee-fig .dx-bee:nth-of-type(3n+1){transition-delay:.3s}
.dx-le[data-view="peers"] li:not(.peer):not(.us){display:none}
.dx-views > [data-for]{display:none}
.dx-views[data-view="peak"] > [data-for="peak"],.dx-views[data-view="latest"] > [data-for="latest"]{display:block}
.dx-side{display:grid;gap:14px;align-content:start}
.dx-panel-note{font-size:13.6px;color:var(--ink-2);line-height:1.6;margin:0;padding:0 4px;border-left:3px solid var(--dx-focus);padding-left:14px}
.dx-gov{margin-top:26px}
.dx-gov p{max-width:92ch}
.dx-quote{grid-column:span 1;background:var(--teal-deep);color:#fff;border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;justify-content:center}
.dx-quote blockquote{margin:0;font-family:var(--serif);font-size:1.28rem;line-height:1.35}
.dx-quote p{margin:10px 0 0;font-size:13px;color:rgba(255,255,255,.75)}
.dx-h3{font-family:var(--sans);font-size:1.02rem;font-weight:800;margin:30px 0 12px}
.dx-fix{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:fix}
.dx-fix li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;display:grid;gap:8px}
.dx-fix p{margin:0;font-size:14.4px;line-height:1.55}
.dx-fix span{display:inline-block;min-width:88px;margin-right:8px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.dx-fix .said{color:var(--ink-3)}
.dx-fix .said span{color:var(--ink-4)}
.dx-fix .paper{color:var(--ink)}
.dx-fix .paper span{color:var(--good)}
@media (max-width:1000px){
.dx-hero-grid{grid-template-columns:1fr;gap:30px}
.dx-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.dx-causes,.dx-drivers{grid-template-columns:repeat(2,minmax(0,1fr))}
.dx-mapwrap{grid-template-columns:1fr}
.dx-two,.dx-world{grid-template-columns:1fr}
}
@media (max-width:640px){
.dv{padding:16px 14px 14px;border-radius:14px}
.dx-stats{grid-template-columns:1fr 1fr;gap:10px}
.dx-stat{padding:14px 14px 12px}
.dx-stat .v{font-size:1.85rem}
.dx-causes,.dx-drivers{grid-template-columns:1fr}
.dx-bar{grid-template-columns:86px minmax(0,1fr) 60px;gap:8px}
.dx-le li,.dx-le-axis{grid-template-columns:24px 92px minmax(0,1fr) 42px;gap:6px}
.dx-le .nm{font-size:13px}
.dx-le-gap{padding-left:36px}
.dx-map{gap:3px}
.dx-tile{border-radius:5px}
.dx-tile small{display:none}
.dx-driver p{padding-left:18px}
}
@media (max-width:900px){
/* the sticky header is taller than 72px once it wraps (see .cs-jump) */
.dx-jump{position:static}
.dx section[id]{scroll-margin-top:150px}
}
@media (prefers-reduced-motion:reduce){
.dx *{transition:none!important;animation:none!important}
}
@media print{.dx-jump,.dv-legend button{display:none}}
/* ============================================================
Monograph guides (lib/guide.js) — the plain-language, interactive layer.
Everything reads with JS off; .gd-js switches on the tabbed and flipping
layouts, .gd-anim (set only without reduced motion) arms the motion.
============================================================ */
.gd{--gd-blue:#1564C0;--gd-wash:#EEF5FD;margin:34px 0 10px;scroll-margin-top:96px;border:1px solid var(--line);border-radius:20px;background:#fff;
box-shadow:var(--shadow-s);overflow:hidden}
.gd-head{background:linear-gradient(160deg,#062C7D 0%,#1564C0 62%,#12808F 100%);color:#fff;padding:28px 28px 22px;position:relative}
.gd-head::after{content:'';position:absolute;inset:0;opacity:.14;pointer-events:none;
background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.6) 1px,transparent 0);background-size:22px 22px}
.gd-head > *{position:relative;z-index:1}
.gd-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#9FDCE5}
.gd-eyebrow::before{content:'';width:22px;height:2px;background:#9FDCE5;border-radius:2px}
.gd-head h2{color:#fff;margin:10px 0 10px;font-size:clamp(1.5rem,2.8vw,2.05rem);scroll-margin-top:110px}
.prose .gd-lede{color:rgba(255,255,255,.9);font-size:15.6px;max-width:64ch;margin:0 0 16px}
/* the chip rail scrolls sideways; fade its right edge so that reads as more */
.gd-chips{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);padding-right:40px}
.gd-chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin:0 -4px;padding-left:4px}
.gd-chips::-webkit-scrollbar{display:none}
.gd-chips a{flex:none;font-size:12.8px;font-weight:700;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
border-radius:999px;padding:6px 12px;text-decoration:none;transition:background .2s}
.gd-chips a:hover{background:rgba(255,255,255,.24)}
.gd-legend{margin-top:14px;font-size:13px;color:rgba(255,255,255,.85)}
.gd-legend summary{cursor:pointer;font-weight:700;color:#fff;display:inline-flex;gap:6px;align-items:center}
.gd-legend ul{list-style:none;margin:10px 0 0;padding:12px 14px;background:#fff;border-radius:12px;display:grid;gap:8px;color:var(--ink-2)}
.gd-legend li{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:10px;align-items:center;font-size:13.2px}
.gd-sec{padding:26px 28px;border-top:1px solid var(--line-soft);scroll-margin-top:96px}
.gd-sec:first-of-type{border-top:0}
.gd-sec > h3{font-family:var(--serif);font-size:1.32rem;margin:0 0 6px}
.gd-intro{font-size:14.6px;color:var(--ink-2);margin:0 0 16px;max-width:68ch}
.gd-note{font-size:13.2px;color:var(--ink-3);margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* evidence chip: dot + words; colour only repeats the words */
.gd-ev{display:inline-flex;align-items:center;gap:6px;font-size:11.6px;font-weight:700;color:var(--ink-2);white-space:nowrap;
background:color-mix(in srgb,var(--ev) 11%,#fff);border:1px solid color-mix(in srgb,var(--ev) 30%,#fff);border-radius:999px;padding:3px 9px 3px 7px}
.gd-ev i{width:8px;height:8px;border-radius:50%;background:var(--ev);flex:none}
@supports not (background:color-mix(in srgb,red 10%,#fff)){.gd-ev{background:var(--bg-2);border-color:var(--line)}}
.gd-card-ic,.gd-step-ic,.gd-area-ic{display:grid;place-items:center;flex:none;border-radius:11px;background:var(--gd-wash);color:var(--gd-blue)}
.gd-card-ic{width:36px;height:36px}.gd-card-ic svg{width:20px;height:20px}
/* quick answers */
.gd-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.gd-q{display:flex;flex-direction:column;gap:4px;padding:16px 16px 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2);
text-decoration:none!important;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.gd-q:hover{transform:translateY(-2px);box-shadow:var(--shadow-m);border-color:#C6D8E0;background:#fff}
.gd-q-v{font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.gd-q-u{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gd-blue);min-height:1em}
.gd-q-k{font-size:13.4px;color:var(--ink-2);line-height:1.45;margin-bottom:6px}
.gd-q .gd-ev{align-self:flex-start;margin-top:auto}
/* how it works */
.gd-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:st;position:relative}
.gd-steps li{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 14px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line-soft)}
.gd-steps li::before{counter-increment:st;content:counter(st);position:absolute;top:12px;right:14px;font-size:12px;font-weight:800;color:var(--ink-4)}
.gd-steps li:not(:last-child)::after{content:'';position:absolute;top:34px;right:-12px;width:12px;height:2px;background:var(--gd-blue);opacity:.45}
.gd-step-ic{width:44px;height:44px;margin-bottom:4px}.gd-step-ic svg{width:24px;height:24px}
.gd-steps b{font-size:14.4px;color:var(--ink);line-height:1.3}
.gd-steps span:not(.gd-step-ic){font-size:13.2px;color:var(--ink-2);line-height:1.5}
/* segmented control (shared) */
.gd-seg{display:inline-flex;background:var(--bg-3);border-radius:999px;padding:3px;gap:2px}
.gd-seg button{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:700;border:0;background:transparent;
color:var(--ink-2);padding:7px 14px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.gd-seg button svg{width:16px;height:16px}
.gd-seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:var(--shadow-s)}
/* timeline */
.gd-tl-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.gd-play{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;font-weight:700;color:var(--gd-blue);background:var(--gd-wash);
border:1px solid #CFE0F5;border-radius:999px;padding:7px 14px 7px 11px;cursor:pointer}
.gd-play svg{width:15px;height:15px;fill:currentColor;stroke:none}
.gd-play.on{background:var(--gd-blue);color:#fff;border-color:var(--gd-blue)}
.gd-play.on svg{fill:none;stroke:currentColor;stroke-width:3}
.gd-tl-rail{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;position:relative;z-index:1}
.gd-tl-rail button{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;font:inherit;background:none;border:0;cursor:pointer;
padding:4px 2px;color:var(--ink-3);border-radius:10px}
.gd-tl-dot{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--line);transition:background .3s,border-color .3s,transform .3s}
.gd-tl-when{font-size:12.4px;font-weight:700;text-align:center;line-height:1.25}
.gd-tl-short{display:none;font-size:11.6px;font-weight:700;text-align:center;line-height:1.2;white-space:nowrap}
.gd-tl-rail li.done .gd-tl-dot{background:var(--gd-blue);border-color:var(--gd-blue)}
.gd-tl-rail button[aria-selected="true"] .gd-tl-dot{transform:scale(1.35);box-shadow:0 0 0 5px rgba(21,100,192,.15)}
.gd-tl-rail button[aria-selected="true"]{color:var(--ink)}
.gd-tl-bar{position:relative;height:3px;background:var(--line);border-radius:3px;margin:-35px 10% 40px;z-index:0}
.gd-tl-bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--gd-blue);border-radius:3px;transition:width .5s cubic-bezier(.3,.8,.3,1)}
.gd-tl-card{border:1px solid var(--line);border-left:4px solid var(--gd-blue);border-radius:12px;padding:16px 18px;background:#fff;margin-bottom:10px}
.gd-tl-k{font-size:11.6px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gd-blue);margin:0 0 4px}
.gd-tl-card h4{font-family:var(--sans);font-size:1.02rem;font-weight:700;margin:0 0 6px}
.gd-tl-card p{font-size:14.4px;color:var(--ink-2);margin:0 0 10px}
.gd-js .gd-tl[data-view="skin"] .gd-tl-track[data-track="hair"],
.gd-js .gd-tl[data-view="hair"] .gd-tl-track[data-track="skin"]{display:none}
.gd-js .gd-tl-card:not(.is-on){display:none}
.gd-js .gd-tl-card.is-on{animation:gd-rise .45s cubic-bezier(.2,.8,.3,1)}
.gd:not(.gd-js) .gd-tl-rail,.gd:not(.gd-js) .gd-tl-bar,.gd:not(.gd-js) .gd-play,.gd:not(.gd-js) .gd-seg{display:none}
.gd:not(.gd-js) .gd-tl-track::before{content:attr(data-track);display:block;text-transform:capitalize;font-weight:800;margin:10px 0 8px}
/* body areas */
.gd-areas{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:16px;align-items:start}
.gd-area-pick{display:grid;gap:7px}
.gd-area-pick button{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font:inherit;text-align:left;cursor:pointer;
background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 12px 8px 8px;color:var(--ink-2);transition:border-color .2s,background .2s,box-shadow .2s}
.gd-area-pick button:hover{border-color:#C6D8E0;background:var(--bg-2)}
.gd-area-pick button[aria-selected="true"]{border-color:var(--gd-blue);background:var(--gd-wash);box-shadow:0 0 0 1px var(--gd-blue)}
.gd-area-pick b{font-size:14px;color:var(--ink)}
.gd-area-ic{width:34px;height:34px}.gd-area-ic svg{width:20px;height:20px}
.gd-area-ic.lg{width:46px;height:46px}.gd-area-ic.lg svg{width:26px;height:26px}
.gd-pips{display:inline-flex;gap:3px}
.gd-pips i{width:7px;height:16px;border-radius:2px;background:var(--line)}
.gd-pips i.on{background:var(--ev)}
.gd-area-panel{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--bg-2);margin-bottom:10px}
.gd-area-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.gd-area-head h4{font-family:var(--sans);font-size:1.05rem;font-weight:800;margin:0 0 4px}
.gd-area-panel p{font-size:14.4px;color:var(--ink-2);margin:12px 0 0}
.gd-meter{height:8px;border-radius:99px;background:#fff;border:1px solid var(--line);overflow:hidden}
.gd-meter i{display:block;height:100%;width:var(--w);background:var(--ev);border-radius:99px;transform-origin:left}
.gd-js .gd-area-panel:not(.is-on){display:none}
.gd-anim .gd-area-panel.is-on .gd-meter i{animation:gd-grow .8s cubic-bezier(.25,.8,.25,1) both}
.gd-anim .gd-area-panel.is-on{animation:gd-rise .4s cubic-bezier(.2,.8,.3,1)}
/* who it suits */
.gd-fit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gd-fit-col{border-radius:14px;padding:16px;border:1px solid var(--line)}
.gd-fit-col h4{display:flex;gap:9px;align-items:center;font-family:var(--sans);font-size:14.4px;font-weight:800;margin:0 0 10px}
.gd-fit-col h4 span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none}
.gd-fit-col h4 svg{width:16px;height:16px}
.gd-fit-col ul{margin:0;padding-left:18px;font-size:13.8px;color:var(--ink-2);display:grid;gap:5px}
.gd-fit-col.yes{background:#F1F9F4;border-color:#CBE3D5}.gd-fit-col.yes h4 span{background:#D3ECDD;color:var(--good)}
.gd-fit-col.no{background:var(--bg-2)}.gd-fit-col.no h4 span{background:var(--line);color:var(--ink-2)}
.gd-fit-col.ask{background:var(--warn-bg);border-color:var(--warn-line)}.gd-fit-col.ask h4 span{background:#F3DEB8;color:var(--warn)}
/* photo check */
.gd-photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.gd-photo ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.gd-photo label{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;cursor:pointer;
font-size:14.2px;color:var(--ink-2);background:#fff;transition:border-color .2s,background .2s}
.gd-photo label:hover{border-color:#C6D8E0}
.gd-photo input{position:absolute;opacity:0;width:1px;height:1px}
.gd-box{width:22px;height:22px;border-radius:7px;border:2px solid var(--ink-4);display:grid;place-items:center;flex:none;transition:background .2s,border-color .2s}
.gd-box svg{width:14px;height:14px;stroke:#fff;stroke-width:3;opacity:0;transform:scale(.4);transition:opacity .2s,transform .25s cubic-bezier(.2,.9,.3,1.4)}
.gd-photo input:checked + .gd-box{background:var(--good);border-color:var(--good)}
.gd-photo input:checked + .gd-box svg{opacity:1;transform:none}
.gd-photo input:checked ~ *{color:var(--ink)}
.gd-photo label:has(input:checked){border-color:#CBE3D5;background:#F6FBF8}
.gd-photo input:focus-visible + .gd-box{outline:3px solid var(--teal-light);outline-offset:2px}
.gd-photo-out{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--bg-2)}
.gd-photo-score{font-size:2.3rem;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.gd-photo-meter{height:10px;border-radius:99px;background:#fff;border:1px solid var(--line);overflow:hidden;margin:10px 0 14px}
.gd-photo-meter i{display:block;height:100%;width:0;border-radius:99px;transition:width .45s cubic-bezier(.3,.8,.3,1),background .3s;
background:linear-gradient(90deg,#B33F34,#A9691A 50%,#0F7B4F);background-size:calc(100% / max(var(--hue,0),.0001)) 100%}
.gd-ladder{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.gd-ladder li{padding:8px 11px;border-radius:10px;border:1px solid transparent;font-size:13px;color:var(--ink-3);transition:background .25s,border-color .25s,color .25s}
.gd-ladder b{display:block;font-size:13.6px;color:var(--ink-2)}
.gd-ladder li.is-on{background:#fff;border-color:var(--ink-4);color:var(--ink-2);box-shadow:var(--shadow-s)}
.gd-ladder li.is-on b{color:var(--ink)}
/* the numbers, checked: flip cards */
.gd-claims{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.gd-claim{perspective:1100px}
.gd-claim-face{border-radius:14px;padding:16px;border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.gd-claim-front{background:#fff}
.gd-claim-num{font-size:1.85rem;font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.gd-claim-said{font-size:13.6px;color:var(--ink-2);margin:0}
.gd-claim-said::before{content:'Claimed: ';font-weight:700;color:var(--ink-3)}
.gd-claim-back{background:var(--bg-2);border-color:color-mix(in srgb,var(--vc) 40%,#fff)}
.gd-claim-back p{font-size:13.4px;color:var(--ink-2);margin:0}
.gd-claim-back a{font-size:12.2px;color:var(--ink-3);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px;word-break:break-word}
.gd-verdict{align-self:flex-start;font-size:11.6px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--vc);
border-radius:6px;padding:4px 8px}
.gd-claim-btn{display:none;margin-top:auto;align-self:flex-start;font:inherit;font-size:12.8px;font-weight:700;color:var(--gd-blue);background:var(--gd-wash);
border:1px solid #CFE0F5;border-radius:999px;padding:6px 13px;cursor:pointer}
.gd:not(.gd-js) .gd-claim-front{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}
.gd:not(.gd-js) .gd-claim-back{border-top-left-radius:0;border-top-right-radius:0}
.gd-js .gd-claim-btn{display:inline-flex}
.gd-js .gd-claim-in{display:grid;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.3,1);height:100%}
.gd-js .gd-claim-face{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.gd-js .gd-claim-back{transform:rotateY(180deg)}
.gd-js .gd-claim.is-flipped .gd-claim-in{transform:rotateY(180deg)}
/* routine */
.gd-pair{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.gd-pair-cols{display:grid;grid-template-columns:1fr 1fr}
.gd-pair-col{padding:16px}
.gd-pair-col + .gd-pair-col{border-left:1px solid var(--line-soft)}
.gd-pair-col h4{font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.gd-pcs{display:flex;flex-wrap:wrap;gap:7px}
.gd-pc{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13.4px;font-weight:600;border-radius:999px;padding:6px 12px 6px 9px;
cursor:pointer;border:1px solid;transition:transform .15s,box-shadow .2s,background .2s}
.gd-pc svg{width:14px;height:14px;stroke-width:2.6}
.gd-pc.ok{color:#0B3D28;background:#F1F9F4;border-color:#CBE3D5}
.gd-pc.apart{color:#5C2119;background:var(--bad-bg);border-color:var(--bad-line)}
.gd-pc:hover{transform:translateY(-1px)}
.gd-pc[aria-pressed="true"]{box-shadow:0 0 0 2px currentColor}
.gd-pair-why{background:var(--bg-2);border-top:1px solid var(--line-soft);padding:14px 16px}
.gd-pair-hint{font-size:13.4px;color:var(--ink-3);margin:0}
.gd-pw{padding:6px 0}
.gd-pw b{font-size:14.2px}
.gd-pw p{font-size:13.8px;color:var(--ink-2);margin:3px 0 7px}
.gd:not(.gd-js) .gd-pair-hint{display:none}
.gd-js .gd-pw:not(.is-on){display:none}
.gd-js .gd-pw.is-on{animation:gd-rise .35s cubic-bezier(.2,.8,.3,1)}
.gd-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.gd-card{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff}
.gd-card h4{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:15px;font-weight:800;margin:0 0 10px}
.gd-card p{font-size:13.8px;color:var(--ink-2);margin:0 0 8px}
/* topical vs injected */
.gd-routes-seg{margin-bottom:12px}
.gd-rt-head{display:grid;grid-template-columns:150px 1fr 1fr;gap:12px;padding:0 14px 8px;font-size:12.4px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.gd-rt-head b{display:flex;gap:6px;align-items:center}.gd-rt-head svg{width:16px;height:16px}
.gd-rt{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.gd-rt-row{display:grid;grid-template-columns:150px 1fr 1fr;gap:12px;padding:12px 14px;border-top:1px solid var(--line-soft)}
.gd-rt-row:first-child{border-top:0}
.gd-rt-row:nth-child(even){background:var(--bg-2)}
.gd-rt dt{font-size:12.4px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gd-blue)}
.gd-rt dd{margin:0;font-size:13.8px;color:var(--ink-2)}
.gd-rt dd.j{color:#5C2119}
.gd-rt-lbl{display:none}
.gd-routes[data-view="topical"] .j,.gd-routes[data-view="injected"] .t{display:none}
.gd-routes[data-view="topical"] .gd-rt-row,.gd-routes[data-view="injected"] .gd-rt-row,
.gd-routes[data-view="topical"] .gd-rt-head,.gd-routes[data-view="injected"] .gd-rt-head{grid-template-columns:150px 1fr}
/* spot a fake */
.gd-auth{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;align-items:start}
.gd-swatch{border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--bg-2)}
.gd-swatch-c{width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7E8BF0,#3D4FC4 55%,#2A2F8F);
box-shadow:inset 0 -6px 14px rgba(0,0,0,.25),0 8px 20px rgba(42,47,143,.3)}
.gd-swatch b{font-size:14px}.gd-swatch span:not(.gd-swatch-c){font-size:12.4px;color:var(--ink-3)}
.gd-anim .gd-swatch.gd-in .gd-swatch-c{animation:gd-pulse 2.8s ease-in-out 1}
.gd-checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gd-checks li{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:12px}
.gd-checks b{font-size:14px}.gd-checks p{font-size:13.2px;color:var(--ink-2);margin:3px 0 0}
/* what changes results */
.gd-factors{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gd-factors li{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px}
.gd-factors b{font-size:14.2px}.gd-factors p{font-size:13.2px;color:var(--ink-2);margin:0}
/* FAQ */
.gd-faq{display:grid;gap:8px}
.gd-faq-all{justify-self:end;font:inherit;font-size:12.8px;font-weight:700;color:var(--gd-blue);background:none;border:0;cursor:pointer;padding:2px 4px}
.gd-faq-item{border:1px solid var(--line);border-radius:12px;background:#fff;transition:box-shadow .2s,border-color .2s}
.gd-faq-item[open]{border-color:#C6D8E0;box-shadow:var(--shadow-s)}
.gd-faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px 16px;font-weight:700;font-size:14.6px}
.gd-faq-item summary::-webkit-details-marker{display:none}
.gd-faq-item summary .chev{flex:none;color:var(--ink-4);transition:transform .2s}
.gd-faq-item[open] summary .chev{transform:rotate(180deg)}
.gd-faq-item p{margin:0;padding:0 16px 14px;font-size:14.2px;color:var(--ink-2);line-height:1.6}
.gd-foot{padding:18px 28px 22px;background:var(--bg-2);border-top:1px solid var(--line-soft);font-size:13.4px;color:var(--ink-3)}
.gd-foot p{margin:0 0 8px}
.gd-related a{font-weight:700}
.gd-src summary{cursor:pointer;font-weight:700;color:var(--ink-2)}
.gd-src ol{margin:10px 0 0;padding-left:20px;display:grid;gap:5px}
.gd-src a{word-break:break-word}
/* motion */
@keyframes gd-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes gd-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes gd-pulse{0%,100%{transform:scale(1)}40%{transform:scale(1.08)}}
.gd-anim .gd-reveal:not(.gd-in) > *{opacity:0;transform:translateY(14px)}
.gd-anim .gd-reveal > *{transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.3,1);transition-delay:calc(var(--i,0) * 70ms)}
.gd-anim .gd-steps:not(.gd-in) li::after{transform:scaleX(0)}
.gd-anim .gd-steps li::after{transform-origin:left;transition:transform .4s ease calc(var(--i,0) * 160ms + .3s)}
@media (max-width:760px){
.gd{border-radius:16px;margin-left:-6px;margin-right:-6px}
.gd-head,.gd-sec{padding-left:16px;padding-right:16px}
.gd-foot{padding-left:16px;padding-right:16px}
.gd-steps{grid-template-columns:1fr 1fr}
.gd-steps li:nth-child(2)::after{display:none}
.gd-areas,.gd-photo,.gd-duo,.gd-auth{grid-template-columns:1fr}
.gd-fit{grid-template-columns:1fr}
.gd-pair-cols{grid-template-columns:1fr}
.gd-pair-col + .gd-pair-col{border-left:0;border-top:1px solid var(--line-soft)}
.gd-checks{grid-template-columns:1fr}
.gd-factors{grid-template-columns:1fr 1fr}
.gd-rt-head{display:none}
.gd-rt-row,.gd-routes[data-view] .gd-rt-row{grid-template-columns:1fr;gap:6px}
.gd-rt-lbl{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.gd-routes[data-view="topical"] .gd-rt-lbl,.gd-routes[data-view="injected"] .gd-rt-lbl{display:none}
.gd-area-pick{grid-template-columns:1fr 1fr}
.gd-area-pick button{grid-template-columns:auto 1fr;padding:8px}
.gd-area-pick .gd-pips{grid-column:2}
.gd-tl-when{display:none}
.gd-tl-short{display:block}
.gd-tl-bar{margin-left:8%;margin-right:8%}
.gd-swatch{flex-direction:row;text-align:left}
.gd-swatch-c{width:54px;height:54px}
.gd-legend li{grid-template-columns:1fr}
}
@media (max-width:420px){.gd-factors{grid-template-columns:1fr}.gd-quick{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.gd-q{padding:13px 12px 12px}.gd-q-v{font-size:1.6rem}
.gd-q-u{font-size:10.6px;letter-spacing:.04em}.gd-q .gd-ev{white-space:normal}}
@media (prefers-reduced-motion:reduce){.gd *{transition:none!important;animation:none!important}}
@media print{.gd-chips,.gd-play,.gd-seg,.gd-claim-btn,.gd-faq-all{display:none!important}}