/* MedSys — shell, landing and shared components.
Depends on tokens.css. Uses only the new tokens, never the legacy bridge. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--f-read);background:var(--paper);color:var(--ink);font-size:17px;
line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:1170px;margin:0 auto;padding:0 24px}
a{color:var(--ultra)}
a:hover{color:var(--ultra-2);text-underline-offset:2px}
:focus-visible{outline:2px solid var(--ultra);outline-offset:2px;border-radius:2px}
h1,h2,h3,h4,h5{font-family:var(--f-ui);font-weight:600;letter-spacing:-.022em;line-height:1.18}
p{margin:0 0 14px}
img{max-width:100%;height:auto}
.d,.nowrap{font-family:var(--f-data);font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--ultra);
padding:10px 16px;z-index:100;font-family:var(--f-ui);font-weight:600}
.skip:focus{left:12px;top:12px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;
scroll-behavior:auto!important}}
/* ---------- masthead ---------- */
.mast{background:var(--surface);border-bottom:1px solid var(--line)}
/* Vertical only — .mast-in also carries .wrap, whose `padding:0 24px` is what
* keeps the masthead aligned with the content beneath it and off the screen
* edge on a phone. A shorthand here resets all four sides. */
.mast-in{display:flex;align-items:center;gap:22px;padding-top:17px;padding-bottom:17px}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none}
.mark-bars{display:flex;gap:2.5px;align-items:flex-end;height:20px}
.mark-bars i{width:3.5px;border-radius:1px}
.mark-bars i:nth-child(1){height:8px;background:var(--seg-ok)}
.mark-bars i:nth-child(2){height:14px;background:var(--seg-mid)}
.mark-bars i:nth-child(3){height:20px;background:var(--seg-hi)}
.mark-txt{font-family:var(--f-ui);font-size:21px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.mark-txt b{font-weight:400;color:var(--ink-3)}
.mark-sub{display:block;font-family:var(--f-data);font-size:14px;font-weight:400;
letter-spacing:.15em;text-transform:uppercase;color:var(--ink-4);margin-top:2px}
.mnav{margin-left:auto;display:flex;gap:20px;align-items:center;font-family:var(--f-ui);font-size:14.5px}
.mnav a{color:var(--ink-2);font-weight:500;text-decoration:none}
.mnav a:hover{color:var(--ultra)}
.theme{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-ui);font-size:14px;
font-weight:500;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);
border-radius:99px;padding:6px 13px 6px 11px;cursor:pointer}
.theme:hover{border-color:var(--ultra);color:var(--ultra)}
.ico-moon{display:none}
[data-theme=dark] .ico-sun{display:none}
[data-theme=dark] .ico-moon{display:inline-block}
.hairline{height:2px;background:var(--ultra)}
@media (max-width:900px){.mnav{gap:14px;font-size:14px}.mark-sub{display:none}}
/* ---------- signature: reference band ---------- */
.band{display:block}
.band-track{position:relative;display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--line)}
.band-track .seg{display:block;height:100%}
.seg-ok{background:var(--seg-ok)}.seg-mid{background:var(--seg-mid)}.seg-hi{background:var(--seg-hi)}
.band-mark{position:absolute;top:-4px;width:2.5px;height:16px;background:var(--ink);border-radius:2px}
.band-ticks{display:flex;justify-content:space-between;margin-top:7px;font-family:var(--f-data);
font-size:14px;letter-spacing:.04em;color:var(--ink-3);text-transform:uppercase}
/* ---------- reading depth ---------- */
.depth{display:inline-flex;gap:2.5px;align-items:flex-end;height:12px}
.depth i{width:3.5px;background:var(--line-2);border-radius:1px}
.depth i:nth-child(1){height:5px}.depth i:nth-child(2){height:8.5px}.depth i:nth-child(3){height:12px}
.d1 i:nth-child(1),.d2 i:nth-child(-n+2),.d3 i{background:var(--ultra)}
.levels{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:17px}
.lvl,.tool{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:var(--r-sm);
font-family:var(--f-ui);font-size:14px;text-decoration:none}
.lvl{border:1px solid var(--line);background:var(--surface-2);font-weight:500;color:var(--ink-2)}
.lvl:hover{border-color:var(--ultra);background:var(--ultra-pale);color:var(--ultra)}
.tool{border:1px solid var(--ultra-line);background:var(--ultra-pale);font-weight:600;color:var(--ultra)}
.tool:hover{background:var(--ultra);color:#fff;border-color:var(--ultra)}
[data-theme=dark] .tool:hover{color:#0f1319}
.lvl.soon{opacity:.55;pointer-events:none}
/* ---------- evidence grade ---------- */
.ev{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 8px;border-radius:var(--r-sm);
font-family:var(--f-data);font-size:14px;font-weight:500;letter-spacing:.09em;text-transform:uppercase}
.ev::before{content:'';width:6px;height:6px;border-radius:50%;flex:none}
.ev-s{background:var(--ok-bg);color:var(--ok)}.ev-s::before{background:var(--ok)}
.ev-m{background:var(--mid-bg);color:var(--mid)}.ev-m::before{background:var(--mid)}
.ev-e{background:var(--hi-bg);color:var(--hi)}.ev-e::before{background:var(--hi)}
.ev-n{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line)}
.ev-n::before{background:var(--ink-4)}
/* ---------- shared text bits ---------- */
.eyebrow{font-family:var(--f-data);font-size:14px;font-weight:500;letter-spacing:.13em;
text-transform:uppercase;color:var(--ink-3)}
.meta{font-family:var(--f-data);font-size:14px;letter-spacing:.04em;color:var(--ink-4);text-transform:uppercase}
.lede{font-size:19px;color:var(--ink-2);line-height:1.62}
.notice{border-left:3px solid var(--ultra);background:var(--surface);padding:14px 18px;
font-size:15px;color:var(--ink-2)}
.notice b{color:var(--ink);font-weight:600;font-family:var(--f-ui)}
.rail{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:21px}
.rail h3{font-size:15px;margin-bottom:14px}
.sec-h{display:flex;align-items:baseline;gap:14px;margin-bottom:19px;padding-bottom:11px;
border-bottom:1px solid var(--line-2)}
.sec-h h2{font-size:21px}
.sec-h .meta{margin-left:auto}
/* ---------- landing: journal ---------- */
.c-band{background:var(--surface);border-bottom:1px solid var(--line)}
.c-band-in{display:flex;gap:2px;overflow-x:auto}
.c-band-in a{padding:13px 16px;font-family:var(--f-ui);font-size:14px;font-weight:500;
color:var(--ink-2);white-space:nowrap;border-bottom:2px solid transparent;text-decoration:none}
.c-band-in a:hover,.c-band-in a.on{color:var(--ultra);border-bottom-color:var(--ultra)}
.c-main{display:grid;grid-template-columns:1fr 330px;gap:50px;padding:42px 0 0}
.c-lead{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.c-lead-body{padding:31px 33px 27px}
.c-lead h1{font-size:clamp(28px,3.7vw,39px);margin:13px 0 15px}
.c-fig{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
padding:25px 33px}
.c-fig-h{display:flex;align-items:baseline;gap:12px;margin-bottom:17px}
.c-fig-h h4{font-size:14.5px}
.c-fig-h .meta{margin-left:auto}
.c-figcap{font-size:14px;color:var(--ink-3);margin:16px 0 0;line-height:1.65}
.c-bandrow{display:grid;grid-template-columns:122px 1fr;gap:19px;align-items:center;padding:12px 0}
.c-bandrow+.c-bandrow{border-top:1px solid var(--line)}
.c-bandrow .lab{font-family:var(--f-data);font-size:14px;font-weight:500;color:var(--ink-2)}
.c-bandrow .lab span{display:block;font-size:14px;font-weight:400;color:var(--ink-4);
letter-spacing:.05em;text-transform:uppercase}
.c-more{padding:19px 33px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.c-more .meta{margin-right:auto}
.c-list{margin-top:46px}
.c-item{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:21px 0;border-top:1px solid var(--line-2)}
.c-item time{font-family:var(--f-data);font-size:14px;color:var(--ink-4);min-width:76px}
.c-item h3{font-size:19.5px;margin:6px 0}
.c-item p{font-size:15px;color:var(--ink-3);margin:0 0 12px;line-height:1.62}
.c-side section+section,.c-side .notice{margin-top:22px}
.c-side ul{list-style:none;font-size:14.4px}
.c-side li{padding:11px 0;border-top:1px solid var(--line);color:var(--ink-3);line-height:1.55}
.c-side li:first-child{border-top:0;padding-top:0}
.c-tools{list-style:none}
.c-tools li{padding:0;border:0}
/* Stacked, not side by side.
These were a flex row with the topic label pushed right by margin-left:auto.
In a 330px rail that puts two variable-length strings in competition: a long
title wraps to two lines, a long topic ("Emergencies & first aid") wraps too,
and they interleave into the ragged block this replaced. The topic is now an
eyebrow above the title — the same pattern the /tools/ cards use — so each
line has the full width and only the title ever wraps. */
.c-tools a{display:block;padding:12px 0;border-top:1px solid var(--line);
font-family:var(--f-ui);font-weight:500;font-size:14.4px;line-height:1.35;
text-decoration:none;color:var(--ultra)}
.c-tools a:hover{color:var(--ink)}
.c-tools a:hover .c-tool-t{text-decoration:underline}
.c-tools li:first-child a{border-top:0}
.c-tools .c-tool-k{display:block;margin:0 0 3px;font-family:var(--f-data);font-size:14px;
font-weight:400;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.c-tools .c-tool-t{display:block}
@media (max-width:960px){.c-main{grid-template-columns:1fr;gap:36px}.c-lead-body,.c-fig,.c-more{padding-left:22px;padding-right:22px}}
/* ---------- topic page shell (wraps migrated content) ---------- */
.topic-head{padding:40px 0 26px;border-bottom:1px solid var(--line);background:var(--surface)}
.topic-head h1{font-size:clamp(28px,3.8vw,40px);margin:12px 0 14px}
.topic-head .levels{padding-top:20px;margin-top:0}
.crumb{font-family:var(--f-data);font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.crumb a{color:var(--ink-4);text-decoration:none}
.crumb a:hover{color:var(--ultra)}
.topic-body{padding:34px 0 10px}
.next-prev{display:flex;justify-content:space-between;gap:20px;margin-top:44px;padding-top:24px;
border-top:1px solid var(--line-2);font-family:var(--f-ui);font-size:14.5px;font-weight:500}
/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--surface);margin-top:70px;padding:36px 0 54px;
font-size:14.5px;color:var(--ink-3)}
footer .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:36px}
footer h4{font-family:var(--f-data);font-size:14px;letter-spacing:.12em;text-transform:uppercase;
color:var(--ink-4);margin-bottom:12px;font-weight:500}
footer ul{list-style:none;font-family:var(--f-ui);font-size:14.5px;line-height:2}
footer a{text-decoration:none}
footer .foot-p{font-size:14.5px;line-height:1.72;color:var(--ink-3);margin:0}
footer .disc{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;line-height:1.72}
footer .disc b{color:var(--ink);font-family:var(--f-ui)}
@media (max-width:860px){footer .cols{grid-template-columns:1fr;gap:26px}}
/* ---------- global toast (lives in the shared footer) ---------- */
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(120px);
background:var(--ink);color:var(--paper);padding:14px 24px;border-radius:100px;
font-family:var(--f-ui);font-size:14px;font-weight:500;box-shadow:var(--sh-lg);
z-index:1000;transition:transform .3s ease;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0)}
[data-theme=dark] .toast{background:var(--surface-3);color:var(--ink);border:1px solid var(--line-2)}
/* ---------- guide navigation (document furniture, not site chrome) ---------- */
.guide-pos{font-family:var(--f-data);font-size:14px;letter-spacing:.05em;text-transform:uppercase;
color:var(--ink-4);margin:0 0 10px}
.guide-pos a{color:var(--ultra);text-decoration:none}
.guide-pos a:hover{text-decoration:underline;text-underline-offset:2px}
.guide-pos span{opacity:.5;margin:0 4px}
.guide-nav{background:var(--surface-2);border-top:1px solid var(--line);
border-bottom:1px solid var(--line);padding:22px 0 24px}
.guide-nav-label{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:0 0 14px}
.guide-nav-label span{font-family:var(--f-data);font-size:14px;font-weight:500;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-3)}
.guide-nav-label a{margin-left:auto;font-family:var(--f-ui);font-size:14px;font-weight:500;
color:var(--ultra);text-decoration:none}
.guide-nav-label a:hover{text-decoration:underline;text-underline-offset:2px}
/* Real gaps, not a 1px gap over a coloured container. A hairline grid paints its
background through whatever space an incomplete final row leaves — that is the
grey placeholder. Bordered cards with a real gap cannot do that. */
.guide-chips{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(3,1fr);gap:8px}
.guide-chips li{margin:0}
.gc{display:flex;align-items:baseline;gap:11px;padding:12px 14px;background:var(--surface);
border:1px solid var(--line);border-radius:var(--r);text-decoration:none;height:100%}
.gc:hover{background:var(--ultra-pale)}
.gc-n{font-family:var(--f-data);font-size:14px;color:var(--ink-4);flex:none;letter-spacing:.04em}
.gc-t{font-family:var(--f-ui);font-size:14px;font-weight:500;color:var(--ink-2);line-height:1.35}
.gc:hover .gc-t{color:var(--ultra)}
.gc-on{background:var(--ultra-pale);border-color:var(--ultra);box-shadow:inset 3px 0 0 var(--ultra)}
.gc-on .gc-n{color:var(--ultra)}
.gc-on .gc-t{color:var(--ultra);font-weight:600}
.guide-nav-aside{margin:14px 0 0;font-size:14.5px;color:var(--ink-3)}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:48px 0 0;padding-top:26px;
border-top:1px solid var(--line-2)}
.pn{display:flex;flex-direction:column;gap:5px;padding:16px 18px;background:var(--surface);
border:1px solid var(--line);border-radius:var(--r);text-decoration:none}
.pn:hover{border-color:var(--ultra);background:var(--ultra-pale)}
.pn-next{text-align:right}
.pn-empty{background:none;border:0}
.pn-lab{font-family:var(--f-data);font-size:14px;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-4)}
.pn-t{font-family:var(--f-ui);font-size:15.5px;font-weight:500;color:var(--ink);line-height:1.3}
.pn:hover .pn-t{color:var(--ultra)}
@media (max-width:640px){.prevnext{grid-template-columns:1fr}.pn-next{text-align:left}
.pn-empty{display:none}}
/* ---------- Essentials pages: plain, wide-set, short lines ---------- */
.ess{max-width:760px;margin:0 auto}
.ess p{font-size:18px;line-height:1.75;color:var(--ink-2);margin:0 0 16px}
.ess-h{font-size:26px;margin:44px 0 16px;color:var(--ink)}
.ess-note{font-size:16px;color:var(--ink-3);border-left:2px solid var(--line-2);padding-left:16px}
.ess-tldr{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--ultra);
padding:24px 26px;margin:0 0 12px}
.ess-tldr-lab{font-family:var(--f-data);font-size:14px;font-weight:500;letter-spacing:.14em;
text-transform:uppercase;color:var(--ultra);margin:0 0 14px}
.ess-tldr-list{list-style:none;margin:0;padding:0}
.ess-tldr-list li{position:relative;padding:11px 0 11px 24px;border-top:1px solid var(--line);
font-size:17px;line-height:1.62;color:var(--ink-2)}
.ess-tldr-list li:first-child{border-top:0}
.ess-tldr-list li::before{content:'';position:absolute;left:0;top:21px;width:9px;height:2px;
background:var(--ultra)}
.ess-tldr-list strong{color:var(--ink)}
.ess-steps{list-style:none;margin:22px 0 0;padding:0;counter-reset:es}
.ess-steps > li{counter-increment:es;position:relative;padding:20px 0 20px 54px;
border-top:1px solid var(--line)}
.ess-steps > li::before{content:counter(es);position:absolute;left:0;top:22px;width:32px;height:32px;
border-radius:50%;background:var(--ultra-pale);border:1px solid var(--ultra-line);
color:var(--ultra);font-family:var(--f-data);font-size:14px;font-weight:500;
display:flex;align-items:center;justify-content:center}
.ess-steps h3{font-size:19px;margin:0 0 7px;color:var(--ink)}
.ess-steps p{font-size:17px;margin:0;color:var(--ink-3)}
/* Four items, so two columns — three-across left a grey hole in the last row. */
.ess-ask{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:22px 0 0}
.ess-ask-item{background:var(--surface);border:1px solid var(--line);
border-radius:var(--r);padding:20px 22px}
.ess-ask-item h3{font-size:17px;margin:0 0 7px;color:var(--ultra)}
.ess-ask-item p{font-size:16px;margin:0;color:var(--ink-3);line-height:1.6}
.ess-flag{margin:44px 0 0;background:var(--hi-bg);border:1px solid var(--hi);border-left:4px solid var(--hi);
padding:22px 26px}
.ess-flag h3{font-size:19px;margin:0 0 12px;color:var(--hi)}
.ess-flag ul{margin:0 0 14px;padding-left:22px;font-size:17px;line-height:1.66;color:var(--ink-2)}
.ess-flag li{margin-bottom:7px}
.ess-flag p{font-size:16px;margin:0;color:var(--ink-2)}
.ess-next{margin:52px 0 0;padding-top:28px;border-top:1px solid var(--line-2)}
.ess-next-lab{font-family:var(--f-data);font-size:14px;font-weight:500;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-3);margin:0 0 16px}
.ess-next-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:14px}
.ess-next-card{display:flex;flex-direction:column;gap:7px;padding:19px 20px;background:var(--surface);
border:1px solid var(--line);border-radius:var(--r);text-decoration:none}
.ess-next-card:hover{border-color:var(--ultra);background:var(--ultra-pale)}
.ess-next-k{font-family:var(--f-ui);font-size:16px;font-weight:600;color:var(--ultra)}
.ess-next-d{font-size:15.5px;color:var(--ink-3);line-height:1.58}
@media (max-width:640px){.ess p,.ess-tldr-list li,.ess-steps p{font-size:17px}
.ess-h{font-size:23px}.ess-steps > li{padding-left:44px}}
/* ---------- narrow reading measure: header matches the body column ---------- */
.topic-head-narrow .wrap{max-width:808px}
.topic-body-narrow > .container{max-width:808px}
/* ---------- a former collapsible, now plain content ---------- */
.adv-static .adv-collapse-header{cursor:default}
.adv-static .adv-collapse-header:hover{background:none}
/* ---------- single-input panel (longevity supplements) ---------- */
.lv-input{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--ultra);
padding:20px 24px;margin:0 0 30px;max-width:640px}
.lv-input label{display:block;font-family:var(--f-ui);font-size:15px;font-weight:600;color:var(--ink);
margin-bottom:9px}
.lv-input label span{font-family:var(--f-data);font-size:14px;font-weight:400;letter-spacing:.1em;
text-transform:uppercase;color:var(--ink-4);margin-left:7px}
.lv-input select{font-family:var(--f-ui);font-size:15px;padding:9px 12px;border:1px solid var(--line-2);
border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);min-width:260px}
.lv-input select:focus{border-color:var(--ultra);outline:2px solid var(--ultra);outline-offset:1px}
.lv-input p{font-size:14.6px;color:var(--ink-3);margin:12px 0 0;line-height:1.6}
/* ---------- longevity landing: section cards ---------- */
.lv-sections{display:grid;gap:16px}
.lv-card{display:flex;flex-direction:column;gap:9px;padding:24px 26px;background:var(--surface);
border:1px solid var(--line);border-left:4px solid var(--ultra);text-decoration:none}
.lv-card:hover{background:var(--ultra-pale);border-left-color:var(--ultra-2)}
.lv-card-kicker{font-family:var(--f-data);font-size:14px;font-weight:500;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-4)}
.lv-card-title{font-family:var(--f-ui);font-size:22px;font-weight:600;letter-spacing:-.02em;
color:var(--ultra);line-height:1.2}
.lv-card-blurb{font-size:16.5px;color:var(--ink-2);line-height:1.62;max-width:70ch}
.lv-card-items{font-family:var(--f-data);font-size:14px;color:var(--ink-4);line-height:1.75;
padding-top:4px;border-top:1px solid var(--line);margin-top:4px}
.lv-card-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
/* ---------- guide hub: grouped chapters ---------- */
.gh-start{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--ultra);
padding:22px 26px;margin:0 0 40px;max-width:720px}
.gh-start-lab{font-family:var(--f-data);font-size:14px;font-weight:500;letter-spacing:.14em;
text-transform:uppercase;color:var(--ultra);margin:0 0 12px}
.gh-start-list{margin:0 0 14px;padding-left:22px;font-size:16.5px;line-height:1.75;color:var(--ink-2)}
.gh-start-list a{font-weight:500}
.gh-start-note{font-size:15px;color:var(--ink-3);margin:0}
.gh-group{margin:0 0 44px}
/* The meta column was `auto`, which sizes to its content. When the longevity
register's meta grew to about 95 characters it took half the row and squeezed
the prose in column 1 into a narrow strip — visible on the guide hub as a tall
thin paragraph beside a large empty area. Capped, and allowed to wrap. */
.gh-group-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26ch);gap:8px 24px;
align-items:baseline;
padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--line-2)}
.gh-group-head h2{font-size:22px;margin:0}
.gh-group-head p{grid-column:1;font-size:15.5px;color:var(--ink-3);margin:0;max-width:64ch}
.gh-group-head .meta{grid-column:2;grid-row:1;text-align:right;line-height:1.7}
.gh-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.gh-ch{display:flex;gap:14px;padding:20px 22px;background:var(--surface);
border:1px solid var(--line);border-radius:var(--r);text-decoration:none}
.gh-ch:hover{background:var(--ultra-pale)}
.gh-n{font-family:var(--f-data);font-size:14px;color:var(--ink-4);flex:none;padding-top:4px;
letter-spacing:.05em}
.gh-body{display:flex;flex-direction:column;gap:7px}
.gh-t{font-family:var(--f-ui);font-size:17.5px;font-weight:600;color:var(--ultra);line-height:1.28}
.gh-b{font-size:15.2px;color:var(--ink-3);line-height:1.58}
.gh-tag{display:inline-block;font-family:var(--f-data);font-size:14px;font-weight:500;
letter-spacing:.1em;text-transform:uppercase;color:var(--ultra);background:var(--ultra-pale);
border:1px solid var(--ultra-line);border-radius:var(--r-sm);padding:2px 6px;
vertical-align:2px;margin-left:6px}
@media (max-width:640px){.gh-group-head{grid-template-columns:1fr}.gh-group-head .meta{grid-column:1;grid-row:auto}}
/* ---------- essentials at full container width ---------- */
.ess{max-width:none}
.ess > p,.ess > .ess-h,.ess > .ess-note{max-width:82ch}
.ess-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:0 34px}
.ess-steps > li:nth-child(2){border-top:1px solid var(--line)}
.gh-ch-here{background:var(--ultra-pale);border-color:var(--ultra);box-shadow:inset 3px 0 0 var(--ultra)}
/* ---------- input option cards (statin status) ---------- */
.input-block-header.stacked{display:block}
.input-prompt{font-family:var(--f-ui);font-size:14.5px;font-weight:600;color:var(--ink);
margin:16px 0 10px}
.seg-cards{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:10px;background:none !important;padding:0 !important;border-radius:0 !important}
.seg-cards .seg-btn{display:flex !important;flex-direction:column;align-items:flex-start;gap:5px;
text-align:left;padding:14px 16px !important;border:1px solid var(--line) !important;
background:var(--surface) !important;border-radius:var(--r) !important;white-space:normal !important;
box-shadow:none !important;height:100%}
.seg-cards .seg-btn:hover{border-color:var(--ultra) !important;background:var(--ultra-pale) !important}
.seg-cards .seg-btn .seg-t{font-family:var(--f-ui);font-size:15px;font-weight:600;color:var(--ink)}
.seg-cards .seg-btn .seg-d{font-size:14px;color:var(--ink-3);line-height:1.45}
.seg-cards .seg-btn.active{border-color:var(--ultra) !important;
background:var(--ultra-pale) !important;box-shadow:inset 3px 0 0 var(--ultra) !important;
color:var(--ink) !important;background-image:none !important}
.seg-cards .seg-btn.active .seg-t{color:var(--ultra)}
.seg-cards .seg-btn.active .seg-d{color:var(--ink-2)}
/* ---------- responsive column counts for the fixed grids ---------- */
@media (max-width:1080px){.guide-chips{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.gh-grid,.ess-ask{grid-template-columns:1fr}}
@media (max-width:620px){.guide-chips{grid-template-columns:1fr}}
/* ---------- the orphan rule for three-column grids ---------- */
.guide-chips > li:last-child:nth-child(3n+1){grid-column:span 3}
.guide-chips > li:last-child:nth-child(3n+2){grid-column:span 2}
@media (max-width:1080px){
.guide-chips > li:last-child:nth-child(3n+1),
.guide-chips > li:last-child:nth-child(3n+2){grid-column:auto}
.guide-chips > li:last-child:nth-child(odd){grid-column:1 / -1}
}
/* ---------- home: intro then topics, no dates ---------- */
.home-intro{padding:6px 0 8px}
.home-intro h1{font-size:clamp(28px,3.7vw,40px);margin:0 0 18px;max-width:24ch}
.home-intro .lede{max-width:70ch;margin-bottom:18px}
.home-intro p{font-size:17px;color:var(--ink-2);line-height:1.72;max-width:74ch}
.home-topic{padding:22px 0;border-top:1px solid var(--line-2)}
.home-topic:first-of-type{border-top:0;padding-top:6px}
.home-topic h3{font-size:21px;margin:0 0 7px}
.home-topic p{font-size:16px;color:var(--ink-3);margin:0 0 13px;line-height:1.62;max-width:76ch}
/* ---------- essentials: plate list and the calm variant of the flag panel ---------- */
.ess-plate{list-style:none;margin:18px 0 16px;padding:0}
.ess-plate li{position:relative;padding:11px 0 11px 26px;border-top:1px solid var(--line);
font-size:17px;line-height:1.6;color:var(--ink-2)}
.ess-plate li:first-child{border-top:0}
.ess-plate li::before{content:'';position:absolute;left:0;top:21px;width:11px;height:3px;
border-radius:2px;background:var(--seg-ok)}
.ess-plate li:nth-child(2)::before{background:var(--seg-hi)}
.ess-plate li:nth-child(3)::before{background:var(--seg-mid)}
.ess-plate li:nth-child(4)::before{background:var(--ultra)}
.ess-plate strong{color:var(--ink)}
.ess-flag-calm{background:var(--ultra-pale);border-color:var(--ultra-line);
border-left-color:var(--ultra)}
.ess-flag-calm h3{color:var(--ultra)}
.ess-flag-calm a{font-weight:500}
/* ---------- in-page jump list (long single-document pages) ---------- */
.jumpto{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--ultra);
padding:20px 24px;margin:0 0 30px;max-width:720px}
.jumpto-lab{font-family:var(--f-data);font-size:14px;font-weight:500;letter-spacing:.14em;
text-transform:uppercase;color:var(--ultra);margin:0 0 12px}
.jumpto ol{margin:0;padding-left:20px;font-family:var(--f-ui);font-size:15px;line-height:1.95}
.jumpto li{color:var(--ink-4)}
.jumpto a{color:var(--ultra);text-decoration:none;font-weight:500}
.jumpto a:hover{text-decoration:underline;text-underline-offset:2px}
.jumpto-note{margin:14px 0 0;font-size:14px;color:var(--ink-3)}
@media print{.jumpto{display:none}}
/* ---------- guideline comparison page ---------- */
.gl-table-wrap{overflow-x:auto;margin:20px 0 14px}
.gl-table{width:100%;border-collapse:collapse;background:var(--surface);
border:1px solid var(--line);font-size:15px}
.gl-table th,.gl-table td{padding:12px 14px;border:1px solid var(--line);vertical-align:top;
text-align:left;line-height:1.5}
.gl-table thead th{background:var(--surface-3);font-family:var(--f-ui);font-size:14px;
font-weight:600;color:var(--ink)}
.gl-table tbody th{background:var(--surface-2);font-family:var(--f-ui);font-size:14px;
font-weight:600;color:var(--ink-2);white-space:nowrap}
.gl-table td{color:var(--ink-2)}
.gl-sub{display:block;font-family:var(--f-data);font-size:14px;color:var(--ink-4);margin-top:3px;
line-height:1.45;white-space:normal}
.gl-list{margin:14px 0 16px;padding-left:22px;font-size:17px;line-height:1.72;color:var(--ink-2)}
.gl-list li{margin-bottom:11px}
.gl-list strong{color:var(--ink)}
.gl-sources{list-style:none;margin:18px 0 0;padding:0}
.gl-sources li{padding:13px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.55}
.gl-sources li:first-child{border-top:0}
.gl-sources a{font-weight:500}
/* ---------- unit-normalised guideline table ---------- */
.gl-units td{font-size:14.5px}
.gl-num{font-size:17px;font-weight:600;color:var(--ink)}
.gl-low{color:var(--hi)}
.gl-none{color:var(--ink-4);font-style:italic;font-size:14px}
.gl-units tbody th{font-size:14px;white-space:normal;min-width:132px}
/* ---------- related-guide chip: crosses topics, so it reads differently ---------- */
.rel{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:var(--r-sm);
font-family:var(--f-ui);font-size:14px;font-weight:500;text-decoration:none;
border:1px dashed var(--line-2);background:none;color:var(--ink-3)}
.rel:hover{border-style:solid;border-color:var(--ultra);color:var(--ultra);
background:var(--ultra-pale)}
.rel-arrow{font-family:var(--f-data);color:var(--ink-4)}
.rel:hover .rel-arrow{color:var(--ultra)}
/* ---------- diet-first priority list on the calculator ---------- */
.diet-first{background:var(--surface);border:1px solid var(--line);
border-left:4px solid var(--seg-ok);padding:20px 24px;margin:0 0 28px}
.diet-first-lab{font-family:var(--f-data);font-size:14px;font-weight:500;letter-spacing:.14em;
text-transform:uppercase;color:var(--ok);margin:0 0 14px}
.diet-first-list{list-style:none;counter-reset:df;margin:0;padding:0}
.diet-first-list li{counter-increment:df;position:relative;padding:12px 0 12px 40px;
border-top:1px solid var(--line);font-size:16.5px;line-height:1.62;color:var(--ink-2)}
.diet-first-list li:first-child{border-top:0}
.diet-first-list li::before{content:counter(df);position:absolute;left:0;top:14px;width:26px;height:26px;
border-radius:50%;background:var(--ok-bg);border:1px solid var(--ok);color:var(--ok);
font-family:var(--f-data);font-size:14px;display:flex;align-items:center;justify-content:center}
.diet-first-list strong{color:var(--ink)}
/* ---------- medical escalation notice ---------- */
.esc{border:1px solid var(--line);border-left:4px solid var(--mid);background:var(--surface);
padding:22px 26px;margin:0 0 28px}
.esc-2{border-left-color:var(--hi)}
.esc-lab{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-data);font-size:14px;
font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--mid);
background:var(--mid-bg);border:1px solid var(--mid);border-radius:var(--r-sm);
padding:3px 9px;margin-bottom:12px}
.esc-2 .esc-lab{color:var(--hi);background:var(--hi-bg);border-color:var(--hi)}
.esc h3{font-size:20px;margin:0 0 12px;color:var(--ink)}
.esc p{font-size:16px;color:var(--ink-2);line-height:1.68;margin:0 0 12px;max-width:74ch}
.esc ul{margin:0 0 14px;padding-left:22px;font-size:15.5px;line-height:1.7;color:var(--ink-2)}
.esc li{margin-bottom:6px}
.esc li strong{color:var(--ink);font-family:var(--f-ui)}
.esc-foot{font-size:14.5px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:13px;
margin:0}
/* ---------- placeholder note on the calculator sliders ---------- */
.slider-note{font-size:14.5px;color:var(--ink-3);background:var(--surface-2);
border:1px solid var(--line);border-left:3px solid var(--ultra);padding:11px 15px;margin:0 0 16px}
.slider-note strong{color:var(--ink);font-family:var(--f-ui)}
/* ---------- brand / product database ---------- */
.bt-controls{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
padding:18px 20px;margin:0 0 22px}
.bt-lab{display:block;font-family:var(--f-data);font-size:14px;font-weight:500;letter-spacing:.13em;
text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.bt-search input{width:100%;font-family:var(--f-ui);font-size:16px;padding:11px 14px;
border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink)}
.bt-search input:focus{border-color:var(--ultra);outline:2px solid var(--ultra);outline-offset:1px}
.bt-filters{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:16px}
.bt-filters .bt-lab{margin:0 4px 0 0}
.bt-chip{font-family:var(--f-ui);font-size:14px;font-weight:500;padding:7px 12px;cursor:pointer;
border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);border-radius:var(--r-sm)}
.bt-chip:hover{border-color:var(--ultra);color:var(--ultra)}
.bt-chip.on{background:var(--ultra-pale);border-color:var(--ultra);color:var(--ultra)}
.bt-n{font-family:var(--f-data);font-size:14px;color:var(--ink-4);margin-left:5px}
.bt-chip.on .bt-n{color:var(--ultra)}
.bt-count{font-family:var(--f-data);font-size:14px;color:var(--ink-4);margin:14px 0 0;
text-transform:uppercase;letter-spacing:.05em}
.bt-row{display:grid;grid-template-columns:104px 1fr;gap:18px;padding:18px 0;
border-top:1px solid var(--line)}
.bt-row[hidden]{display:none}
.bt-rank{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.bt-rank-n{font-family:var(--f-data);font-size:19px;font-weight:500;color:var(--ink)}
.bt-rank-none{color:var(--ink-4)}
.bt-tier{font-family:var(--f-data);font-size:14px;letter-spacing:.08em;text-transform:uppercase;
padding:2px 7px;border-radius:var(--r-sm);border:1px solid var(--line-2);color:var(--ink-3)}
.bt-t1{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
.bt-t2{background:var(--ultra-pale);color:var(--ultra);border-color:var(--ultra-line)}
.bt-t3{background:var(--mid-bg);color:var(--mid);border-color:var(--mid)}
.bt-t4{background:var(--hi-bg);color:var(--hi);border-color:var(--hi)}
.bt-tier-gold{background:var(--mid-bg);color:var(--mid);border-color:var(--mid)}
.bt-gf{font-family:var(--f-data);font-size:14px;color:var(--ink-4)}
.bt-body h3{font-size:18px;margin:0 0 4px}
.bt-origin{font-family:var(--f-data);font-size:14px;color:var(--ink-4);margin:0 0 8px}
.bt-reason{font-size:15.4px;color:var(--ink-2);line-height:1.62;margin:0 0 9px;max-width:78ch}
.bt-reason-gf{padding-left:13px;border-left:2px solid var(--line-2)}
.bt-gf-tag{font-family:var(--f-data);font-size:14px;letter-spacing:.08em;text-transform:uppercase;
color:var(--ultra);margin-right:7px}
.bt-crit{display:flex;flex-wrap:wrap;gap:5px;margin:0}
.bt-c{font-family:var(--f-data);font-size:14px;letter-spacing:.06em;padding:2px 7px;
border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface-2);color:var(--ink-3)}
.bt-c-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
.bt-c-mid{background:var(--mid-bg);color:var(--mid);border-color:var(--mid)}
.bt-c-hi{background:var(--hi-bg);color:var(--hi);border-color:var(--hi)}
.bt-empty{padding:30px 0;color:var(--ink-3);font-size:16px}
.cat-jump{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 26px}
.cat-jump a{font-family:var(--f-ui);font-size:14px;padding:6px 11px;border:1px solid var(--line);
border-radius:var(--r-sm);background:var(--surface);color:var(--ink-2);text-decoration:none}
.cat-jump a:hover{border-color:var(--ultra);color:var(--ultra);background:var(--ultra-pale)}
.cat-block{margin:0 0 34px;scroll-margin-top:20px}
/* ---------- plastics ---------- */
.pl-block{margin:0 0 34px}
.pl-sub{font-size:15.5px;color:var(--ink-3);margin:0 0 16px;max-width:74ch}
.pl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.pl-grid > :last-child:nth-child(odd){grid-column:1 / -1}
.pl-item{display:flex;flex-direction:column;gap:5px;padding:15px 17px;background:var(--surface);
border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:var(--r)}
.pl-hi{border-left-color:var(--hi)}.pl-mid{border-left-color:var(--mid)}.pl-ok{border-left-color:var(--ok)}
.pl-risk{font-family:var(--f-data);font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.pl-risk-hi{color:var(--hi)}.pl-risk-mid{color:var(--mid)}.pl-risk-ok{color:var(--ok)}
.pl-name{font-family:var(--f-ui);font-size:16px;font-weight:600;color:var(--ink)}
.pl-detail{font-size:14.8px;color:var(--ink-3);line-height:1.55}
@media (max-width:760px){.pl-grid{grid-template-columns:1fr}.bt-row{grid-template-columns:1fr;gap:8px}
.bt-rank{flex-direction:row;align-items:center;gap:10px}}
/* ---------- supermarket + criteria grids ---------- */
.sup-grid,.crit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.sup-grid > :last-child:nth-child(odd),.crit-grid > :last-child:nth-child(odd){grid-column:1 / -1}
.sup-card{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:16px 18px;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.sup-rank{grid-row:1 / 3;font-family:var(--f-data);font-size:22px;color:var(--ultra);align-self:center}
.sup-name{font-family:var(--f-ui);font-size:17px;font-weight:600;color:var(--ink)}
.sup-note{font-size:14.8px;color:var(--ink-3);line-height:1.5}
.crit{padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.crit-n{font-family:var(--f-data);font-size:14px;color:var(--ink-4);letter-spacing:.06em}
.crit h3{font-size:17px;margin:6px 0 7px}
.crit p{font-size:15px;color:var(--ink-3);line-height:1.58;margin:0}
.lede-in{font-size:18px;color:var(--ink-2);line-height:1.62;max-width:76ch;margin:0 0 26px}
@media (max-width:820px){.sup-grid,.crit-grid{grid-template-columns:1fr}}
/* ---------- vape exposure calculator ---------- */
.vc{display:grid;grid-template-columns:340px 1fr;gap:26px;align-items:start}
.vc-inputs{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.vc-field{margin:0 0 22px}
.vc-field:last-child{margin-bottom:0}
.vc-field label,.vc-lab{display:flex;justify-content:space-between;align-items:baseline;
font-family:var(--f-ui);font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:9px}
.vc-field output{font-size:15px;color:var(--ultra)}
.vc-field input[type=range]{width:100%;accent-color:var(--ultra)}
.vc-hint{font-size:14px;color:var(--ink-3);margin:8px 0 0;line-height:1.5}
.vc-seg{display:grid;gap:7px}
.vc-seg button{display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px 13px;
border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-sm);cursor:pointer}
.vc-seg button:hover{border-color:var(--ultra)}
.vc-seg button.on{border-color:var(--ultra);background:var(--ultra-pale);
box-shadow:inset 3px 0 0 var(--ultra)}
.vc-seg-t{font-family:var(--f-ui);font-size:14.5px;font-weight:600;color:var(--ink)}
.vc-seg button.on .vc-seg-t{color:var(--ultra)}
.vc-seg-d{font-size:14px;color:var(--ink-3);line-height:1.45}
.vc-air{font-family:var(--f-ui);font-size:15.5px;font-weight:600;padding:11px 16px;margin:0 0 14px;
border:1px solid var(--line);border-left:4px solid var(--line-2);background:var(--surface)}
.vc-air-ok{border-left-color:var(--ok);color:var(--ok)}
.vc-air-mid{border-left-color:var(--mid);color:var(--mid)}
.vc-air-hi{border-left-color:var(--hi);color:var(--hi)}
.vc-puffs{font-size:15px;color:var(--ink-3);margin:0 0 14px}
.vc-out .gl-table td{font-size:15px}
.vc-out .gl-table small{font-family:var(--f-data);font-size:14px;color:var(--ink-4)}
.vc-vs{display:block;font-family:var(--f-data);font-size:14px;color:var(--ink-4);margin-top:3px}
.vc-cig{margin:18px 0 0;background:var(--surface);border:1px solid var(--line);
border-left:4px solid var(--mid);padding:18px 22px}
.vc-cig-lab{font-family:var(--f-data);font-size:14px;font-weight:500;letter-spacing:.13em;
text-transform:uppercase;color:var(--mid);margin:0 0 10px}
.vc-cig p{font-size:15.5px;color:var(--ink-2);line-height:1.65;margin:0 0 11px;max-width:74ch}
.vc-cig-warn{font-size:14.8px !important;color:var(--ink-3) !important;
border-top:1px solid var(--line);padding-top:12px;margin-bottom:0 !important}
.vc-cig-warn strong{color:var(--ink)}
@media (max-width:900px){.vc{grid-template-columns:1fr}}
.vc-unreal{font-size:14.5px;color:var(--mid);background:var(--mid-bg);border:1px solid var(--mid);
padding:11px 15px;margin:14px 0 0;line-height:1.55}
/* ---------------------------------------------------------------------------
COMPACT DEFINITIONS — ms_defines(), rendered at the top of a page that
leans on a term it does not otherwise explain.
Outline, not fill, per the colour policy in docs/CONTENT-MODEL.md: surface
background, a border, and an accent rule on the left. No reversed text, so
it cannot fail in either theme.
------------------------------------------------------------------------ */
.defs{margin:0 0 30px;padding:20px 24px 6px;background:var(--surface);
border:1px solid var(--line);border-left:3px solid var(--ultra)}
.defs-h{font-family:var(--f-data);font-size:14px;font-weight:500;letter-spacing:.13em;
text-transform:uppercase;color:var(--ultra);margin:0 0 4px}
.defs-note{font-size:14.5px;color:var(--ink-4);margin:0 0 16px;max-width:74ch}
.defs-list{margin:0;display:grid;gap:1px;background:var(--line)}
.def{background:var(--surface);padding:15px 0}
.def:first-child{padding-top:0}
.defs-list .def:last-child{padding-bottom:16px}
.def-t{font-family:var(--f-ui);font-size:15.5px;font-weight:600;color:var(--ink);margin:0 0 5px}
.def-sub{font-family:var(--f-data);font-size:14px;font-weight:400;letter-spacing:.02em;
color:var(--ink-4);text-transform:none;margin-left:7px}
.def-d{font-size:15.5px;line-height:1.66;color:var(--ink-2);margin:0;max-width:82ch}
.def-d strong{color:var(--ink);font-weight:600}
.def-more{font-family:var(--f-data);font-size:14px;white-space:nowrap}
@media (max-width:640px){.defs{padding:17px 17px 4px}.def-d,.def-t{font-size:15px}}
/* ---------------------------------------------------------------------------
EVIDENCE GRADE CARDS — /evidence/, rendered from data/grades.php
------------------------------------------------------------------------ */
.grade-set{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:0 0 34px}
.grade-set > :last-child:nth-child(odd){grid-column:1 / -1}
.grade-card{background:var(--surface);border:1px solid var(--line);padding:20px 22px}
.grade-card-h{margin:0 0 11px;font-size:15px}
.grade-means{font-size:15.5px;line-height:1.62;color:var(--ink-2);margin:0 0 11px}
.grade-action{font-size:15px;line-height:1.6;color:var(--ink-3);margin:0 0 13px}
.grade-action strong{color:var(--ink-2)}
.grade-eg{font-size:14.8px;line-height:1.58;color:var(--ink-3);margin:0;
border-top:1px solid var(--line);padding-top:12px}
.grade-eg-lab{display:block;font-family:var(--f-data);font-size:14px;font-weight:500;
letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);margin-bottom:5px}
@media (max-width:760px){.grade-set{grid-template-columns:1fr}}
/* ---------------------------------------------------------------------------
REFERENCE LIST — /sources/, rendered from data/sources.php
------------------------------------------------------------------------ */
.src-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 34px;padding-bottom:22px;
border-bottom:1px solid var(--line)}
.src-jump a{font-family:var(--f-data);font-size:14px;letter-spacing:.01em;padding:7px 12px;
border:1px solid var(--line);background:var(--surface);color:var(--ink-2);text-decoration:none}
.src-jump a:hover{border-color:var(--ultra);color:var(--ultra)}
.src-jump-n{color:var(--ink-4);margin-left:5px}
.src-group{margin:0 0 38px;scroll-margin-top:20px}
.src-blurb{font-size:15.5px;line-height:1.65;color:var(--ink-3);margin:0 0 20px;max-width:82ch}
.src-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.src{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line-2);
padding:18px 22px}
.src-t{font-size:15.8px;line-height:1.4;margin:0 0 5px;font-weight:600}
.src-t a{text-decoration:none}
.src-t a:hover{text-decoration:underline;text-underline-offset:2px}
.src-where{font-family:var(--f-data);font-size:14px;color:var(--ink-4);margin:0 0 13px;line-height:1.5}
.src-dot{padding:0 3px}
.src-supports,.src-note{font-size:15.2px;line-height:1.62;color:var(--ink-2);margin:0 0 10px;max-width:82ch}
.src-note{color:var(--ink-3)}
.src-lab{display:block;font-family:var(--f-data);font-size:14px;font-weight:500;letter-spacing:.13em;
text-transform:uppercase;color:var(--ink-4);margin-bottom:4px}
.src-grade{margin:0;padding-top:4px}
@media (max-width:640px){.src{padding:15px 16px}.src-supports,.src-note{font-size:15px}}
/* ---------------------------------------------------------------------------
BASELINE PROSE RHYTHM
The reset at the top of this file zeroes every margin, and only `p` gets its
spacing back. Every other block relies on a component class to restore it —
which works until someone writes plain prose. A bare after a .notice then
sits flush against it with no gap at all.
Restoring margins on a bare `h3` selector is not safe: several component rules
(.rail h3, .ie-card h4 and others) set only margin-bottom, so they would
silently inherit a margin-top they were never designed for.
So this is scoped two ways. Direct children only, so it can never reach inside
a component. And :not([class]) — if an element carries a class, its spacing is
that component's business, not this rule's.
------------------------------------------------------------------------ */
.topic-body > .container > section > h2:not([class]),
.topic-body > .container > section > h3:not([class]){margin:38px 0 13px}
.topic-body > .container > section > h4:not([class]){margin:30px 0 10px;font-size:17.5px}
.topic-body > .container > section > ul:not([class]),
.topic-body > .container > section > ol:not([class]){margin:0 0 17px;padding-left:23px}
.topic-body > .container > section > ul:not([class]) > li,
.topic-body > .container > section > ol:not([class]) > li{margin-bottom:9px}
/* An unclassed
in content had NO width rule at all, so it shrank to fit
* its own text and sat in a narrow block on the left of a full-width column.
* Every legacy table escaped this by carrying .gl-table; the first bare one was
* written in round 110. Same reasoning as the rules above — a baseline for
* prose written without component classes — and scoped the same way, so a table
* that has a class keeps its own styling. */
.topic-body > .container > section > table:not([class]){width:100%;
border-collapse:collapse;background:var(--surface);margin:0 0 22px;
font-size:14.5px;line-height:1.5}
.topic-body > .container > section > table:not([class]) th,
.topic-body > .container > section > table:not([class]) td{
padding:10px 13px;border-bottom:1px solid var(--line);text-align:left;
vertical-align:top}
.topic-body > .container > section > table:not([class]) thead th{
background:var(--surface-2);font-weight:600;color:var(--ink);
border-bottom:1px solid var(--line-2)}
.topic-body > .container > section > table:not([class]) tr:last-child td{
border-bottom:0}
.topic-body > .container > section > blockquote:not([class]){margin:0 0 17px}
/* A section already carries its own top padding; do not add a second gap. */
.topic-body > .container > section > :first-child{margin-top:0}
@media (max-width:640px){
.topic-body > .container > section > h2:not([class]),
.topic-body > .container > section > h3:not([class]){margin:30px 0 11px}
.topic-body > .container > section > h4:not([class]){margin:24px 0 9px}
}
/* ---------------------------------------------------------------------------
VAPE EXPOSURE — threshold flagging and the cumulative projection.
Over-threshold rows are marked with a left edge and a coloured flag rather
than a filled row: a red table row reads as an alarm, and several of these
benchmarks are lifetime reference concentrations that a single evening
exceeding does not mean what an alarm would imply. The page says so; the
styling should not contradict it.
------------------------------------------------------------------------ */
.vc-note{display:block;font-family:var(--f-data);font-size:14px;letter-spacing:.04em;
color:var(--ink-4);font-weight:400;margin-top:3px;text-transform:none}
.gl-table tr.vc-over-mid > th:first-child{box-shadow:inset 3px 0 0 var(--mid)}
.gl-table tr.vc-over-hi > th:first-child{box-shadow:inset 3px 0 0 var(--hi)}
tr.vc-over-mid .vc-vs{color:var(--mid)}
tr.vc-over-hi .vc-vs{color:var(--hi);font-weight:600}
.vc-proj{margin:0 0 22px}
.vc-proj-lab{font-family:var(--f-data);font-size:14px;font-weight:500;letter-spacing:.12em;
text-transform:uppercase;color:var(--ink-3);margin:20px 0 10px}
.vc-proj .gl-table th:first-child{white-space:normal;min-width:150px}
@media (max-width:640px){.vc-proj .gl-table{font-size:14px}}
/* ---------------------------------------------------------------------------
PRINT — for the emergency reference charts specifically, which exist to be
pinned to a wall rather than read on a screen.
Everything navigational is dropped, colour is flattened to what a mono laser
printer will actually produce, and tables are told not to break across pages
mid-row. A chart that splits a vital-sign band over two sheets is worse than
no chart.
------------------------------------------------------------------------ */
@media print {
nav, footer, .jumpto, .levels, .crumb, .guide-pos, .gh-grid, .guide-chips,
.ess-next, .no-print, .theme-toggle, .skip { display: none !important; }
body { background: #fff; color: #000; font-size: 10.5pt; }
.wrap, .container { max-width: none; padding: 0 8mm; }
h1 { font-size: 18pt; margin: 0 0 4mm }
h2, h3 { font-size: 13pt; margin: 6mm 0 2mm; page-break-after: avoid }
.lede { font-size: 11pt }
.gl-table-wrap { overflow: visible }
.gl-table { width: 100%; font-size: 9pt; page-break-inside: auto }
.gl-table tr { page-break-inside: avoid; page-break-after: auto }
.gl-table thead { display: table-header-group }
.gl-table th, .gl-table td { border: 0.4pt solid #999; padding: 2mm; color: #000 }
.notice, .ess-flag, .ess-note { border: 0.6pt solid #333; background: #fff; color: #000;
padding: 3mm; page-break-inside: avoid }
a { color: #000; text-decoration: none }
a[href^="/"]::after { content: " (medsys.uk" attr(href) ")"; font-size: 7.5pt; color: #555 }
a[href^="#"]::after { content: "" }
}
/* ---------------------------------------------------------------------------
SINGLE-LEAD ECG ILLUSTRATIONS
Schematic traces on a faint grid, drawn in tokens so they invert cleanly with
the theme and print as line art on a mono laser. Not real recordings, and the
page says so — they exist to make a pattern recognisable, not to be measured
against.
------------------------------------------------------------------------ */
.ecg-set{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 26px}
.ecg-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0;
background:var(--surface);align-items:center}
.ecg-row-flag{background:var(--surface-2)}
.ecg-trace{padding:14px 16px;border-right:1px solid var(--line);min-width:0}
.ecg-txt{padding:15px 20px;min-width:0}
.ecg-txt h4{font-size:16px;margin:0 0 8px;color:var(--ultra);line-height:1.3}
.ecg-sub{font-family:var(--f-data);font-size:14px;font-weight:400;letter-spacing:.02em;
color:var(--ink-4);text-transform:none}
.ecg-txt p{font-size:14.6px;line-height:1.6;color:var(--ink-2);margin:0 0 7px;max-width:60ch}
.ecg-txt p:last-child{margin-bottom:0;color:var(--ink-3)}
.ecg{display:block;width:100%;height:78px}
.ecg-grid line{stroke:var(--line);stroke-width:.5}
.ecg-line{fill:none;stroke:var(--ultra);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;
vector-effect:non-scaling-stroke}
.ecg-base{fill:none;stroke:var(--ultra);stroke-width:1;opacity:.55;vector-effect:non-scaling-stroke}
@media (max-width:720px){
.ecg-row{grid-template-columns:1fr}
.ecg-trace{border-right:0;border-bottom:1px solid var(--line);padding:12px 14px}
.ecg-txt{padding:14px}
.ecg{height:66px}
}
@media print{
.ecg-row{grid-template-columns:1fr 1fr}
.ecg-line,.ecg-base{stroke:#000}
.ecg-grid line{stroke:#ccc}
.ecg-row{page-break-inside:avoid}
}
/* ---------------------------------------------------------------------------
CALL-TO-ACTION BUTTON
For the one place on a page where a reader should be sent somewhere specific
— a linked protocol, a tool. Deliberately rare: if a page has three of these
they stop meaning anything and the .ess-next cards are the right pattern.
------------------------------------------------------------------------ */
.btn{display:inline-block;font-family:var(--f-ui);font-size:15px;font-weight:600;
padding:11px 20px;background:var(--ultra);color:#fff;border:1px solid var(--ultra);
text-decoration:none;border-radius:var(--r)}
.btn:hover{background:var(--ultra-deep,var(--ultra));text-decoration:none}
.btn:focus-visible{outline:2px solid var(--ultra);outline-offset:2px}
@media print{.btn{background:#fff;color:#000;border:0.6pt solid #333}}
/* ---------------------------------------------------------------------------
TOCOLYTIC PROLONGATION CHART
A deliberately plain horizontal bar chart. No colour coding by agent, because
the differences between adjacent bars are not reliable and colour would imply
a ranking the underlying trials do not support. The caption carries that
warning and the styling should not undercut it.
------------------------------------------------------------------------ */
.tc-chart{display:block;width:100%;height:auto;margin:0 0 8px}
.tc-bar{fill:var(--ultra);opacity:.82}
.tc-lab{font-family:var(--f-ui);font-size:14px;font-weight:500;fill:var(--ink-2)}
.tc-val{font-family:var(--f-data);font-size:14px;fill:var(--ink-3)}
.tc-ax{font-family:var(--f-data);font-size:14px;fill:var(--ink-4)}
.tc-grid{stroke:var(--line);stroke-width:1}
@media (max-width:640px){.tc-lab{font-size:14px}.tc-val{font-size:14px}}
@media print{.tc-bar{fill:#555}.tc-lab,.tc-val,.tc-ax{fill:#000}.tc-grid{stroke:#ccc}}
/* Range bars for the tocolytic chart: span of reported study averages, with a
tick for the most reliable single estimate. The span is deliberately paler
than the tick — the range is context, the tick is the number to quote. */
.tc-range{fill:var(--ultra);opacity:.28}
.tc-best{fill:var(--ultra);opacity:.95}
.tc-none{font-family:var(--f-data);font-size:14px;fill:var(--ink-4)}
.tc-em{font-style:italic}
@media print{.tc-range{fill:#bbb;opacity:1}.tc-best{fill:#000;opacity:1}.tc-none{fill:#555}}
/* ---------------------------------------------------------------------------
SUB-CHAPTER CHIPS
Indented beneath their parent in the guide contents. Deliberately unnumbered:
a list that runs 1..17 with two indented items under 15 is easier to hold
than one running to 19 that hides the structure.
------------------------------------------------------------------------ */
.guide-subchips{list-style:none;margin:4px 0 0;padding:0 0 0 34px}
.guide-subchips li{margin:0}
.gcs{display:block;font-family:var(--f-ui);font-size:14px;line-height:1.45;
padding:5px 8px 5px 14px;color:var(--ink-3);text-decoration:none;
border-left:2px solid var(--line)}
.gcs::before{content:"↳ ";color:var(--ink-4)}
.gcs:hover{color:var(--ultra);border-left-color:var(--ultra);text-decoration:none}
.gcs-on{color:var(--ultra);font-weight:600;border-left-color:var(--ultra)}
@media (max-width:640px){.guide-subchips{padding-left:16px}.gcs{font-size:14px}}
@media print{.guide-subchips{display:none}}
/* A step whose body is long enough to unbalance the two-column grid can span
both columns. Used sparingly: if half the steps are wide the grid is the
wrong container and a plain list is better. */
.ess-steps > li.ess-step-wide{grid-column:1 / -1}
/* ---------------------------------------------------------------------------
SITE SEARCH
Built mobile-first because the emergency topic is the one most likely to be
opened on a phone in a hurry. Specifically:
- 16px input font, which is the minimum iOS will accept without zooming the
viewport on focus. Anything smaller makes the page jump.
- Results are large tap targets with the title on its own line, because a
two-line result read at arm's length beats a dense one.
- The list is in normal flow rather than an overlay: an absolutely
positioned dropdown fights the soft keyboard and gets clipped.
------------------------------------------------------------------------ */
.ms-search{margin:0 0 26px}
.ms-search-lab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ms-search-q{display:block;width:100%;box-sizing:border-box;font-family:var(--f-ui);
font-size:16px;line-height:1.4;padding:13px 15px;color:var(--ink);
background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
-webkit-appearance:none;appearance:none}
.ms-search-q::placeholder{color:var(--ink-4)}
.ms-search-q:focus{outline:none;border-color:var(--ultra);box-shadow:0 0 0 3px var(--surface-2)}
.ms-search-help{font-family:var(--f-data);font-size:14px;color:var(--ink-4);margin:7px 0 0}
.ms-search-out{list-style:none;margin:12px 0 0;padding:0;border:1px solid var(--line);
border-radius:var(--r);overflow:hidden}
.ms-search-out li + li{border-top:1px solid var(--line)}
.ms-search-hit{display:block;padding:13px 15px;text-decoration:none;background:var(--surface)}
.ms-search-hit:hover,.ms-search-hit:focus{background:var(--surface-2);text-decoration:none;outline:none}
.ms-search-hit:focus-visible{box-shadow:inset 0 0 0 2px var(--ultra)}
.ms-hit-t{display:block;font-family:var(--f-ui);font-size:15.5px;font-weight:600;
color:var(--ultra);line-height:1.35}
.ms-hit-t em{font-weight:400;font-style:normal;color:var(--ink-4);font-size:14px}
.ms-hit-m{display:block;font-family:var(--f-data);font-size:14px;color:var(--ink-4);margin-top:3px}
.ms-search-more,.ms-search-none{font-family:var(--f-data);font-size:14px;color:var(--ink-4);
padding:11px 15px;margin:0}
.ms-search-none{margin-top:12px}
@media (max-width:640px){
.ms-search-q{font-size:16px;padding:14px}
.ms-search-hit{padding:15px}
.ms-hit-t{font-size:16px}
}
@media print{.ms-search{display:none}}
.gh-kids{list-style:none;margin:6px 0 0;padding:0 0 0 4px}
.gh-kids li{font-family:var(--f-ui);font-size:14px;color:var(--ink-3);margin:3px 0}
/* ---------------------------------------------------------------------------
HEADER SEARCH
Compact in the masthead, expanding to a normal-width field on focus. The
results list is absolutely positioned here — the one place it has to be,
because the header is fixed-height and pushing the page down on every
keystroke would be worse than a dropdown.
Below 900px it collapses out of the header entirely: a search field competing
with three nav links and a theme toggle on a phone loses to all of them. The
topic hubs carry a full-width search instead, which is one tap away.
------------------------------------------------------------------------ */
.mast-search{position:relative;margin:0 0 0 4px}
.mast-search .ms-search-q{width:120px;padding:7px 10px;font-size:14px;
border-radius:calc(var(--r) * 2);transition:width .18s ease}
.mast-search .ms-search-q:focus{width:230px}
.mast-search .ms-search-help{display:none}
.mast-search .ms-search-out{position:absolute;top:calc(100% + 7px);right:0;width:340px;
max-height:min(66vh,460px);overflow-y:auto;z-index:60;background:var(--surface);
box-shadow:0 10px 30px rgba(0,0,0,.14);margin:0}
.mast-search .ms-search-none{position:absolute;top:calc(100% + 7px);right:0;width:340px;
z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin:0}
@media (max-width:900px){ .mast-search{display:none} }
@media print{ .mast-search{display:none} }
/* A chip pointing at the page you are on: shown, not linked. Same footprint so
the row does not reflow, but visibly inert — a link that reloads the current
page is indistinguishable from a broken one. */
.lvl-on,.tool-on{cursor:default;opacity:.62}
.lvl-on{border-style:dashed}
/* ---------------------------------------------------------------------------
BLOCK SPACING — the asymmetric-margin bug
.ess-flag was declared `margin: 44px 0 0` — generous space above, none below.
So whatever followed it sat flush against its border: a heading looked welded
to the box above, and a following note read as part of it. The same shape of
error was latent in the other call-out blocks.
Fixed by giving every block a bottom margin, then letting adjacent-sibling
rules add the extra breathing room a heading needs. Margins are declared in
one place so the next block added inherits the behaviour rather than the bug.
------------------------------------------------------------------------ */
.ess-flag{margin-bottom:30px}
.notice{margin-bottom:26px}
.gl-table-wrap{margin-bottom:28px}
.ess-steps{margin-bottom:30px}
/* A heading after a call-out block needs more than the block's own bottom
margin — it is starting a new idea, not continuing one. */
.ess-flag + h3, .notice + h3, .gl-table-wrap + h3, .ess-steps + h3,
.ess-flag + h4, .notice + h4, .gl-table-wrap + h4, .ess-steps + h4{
margin-top:46px}
/* A note or paragraph immediately after a block is usually commenting on it, so
it wants clear separation but not a section break. */
.ess-flag + .ess-note, .notice + .ess-note, .gl-table-wrap + .ess-note,
.ess-steps + .ess-note, .ess-flag + p, .notice + p, .gl-table-wrap + p,
.ess-steps + p{margin-top:26px}
/* Two call-outs in a row should not touch. */
.ess-flag + .ess-flag, .notice + .notice, .ess-flag + .notice,
.notice + .ess-flag{margin-top:30px}
@media (max-width:640px){
.ess-flag + h3, .notice + h3, .gl-table-wrap + h3, .ess-steps + h3,
.ess-flag + h4, .notice + h4, .gl-table-wrap + h4, .ess-steps + h4{
margin-top:38px}
}
/* Fibrillatory baseline on the atrial fibrillation trace: drawn behind the
complexes and deliberately fainter, because it is a texture rather than a
feature to be measured. */
.ecg-fib{fill:none;stroke:var(--ink-4);stroke-width:.7;opacity:.55}
/* ---------------------------------------------------------------------------
DIPSTICK INTERPRETER
Ten range inputs with their current value shown beside the label rather than
under the thumb — a value that tracks the thumb is unreadable on a phone and
unreachable for a screen reader. The