/* =====================================================
   TOKENS
   Vial Guide brand: Tide teal on a cool ground, a dark instrument panel
   for readouts, Bricolage Grotesque headlines over Atkinson Hyperlegible.
   ===================================================== */
:root{
  --p-accent-l:#0B5F63; --p-accent2-l:#08494C; --p-soft-l:#D3E9E7; --p-on-l:#FFFFFF; --p-liquid-l:rgba(11,95,99,.22);
  --p-accent-d:#4FC8BC; --p-accent2-d:#7FDDD3; --p-soft-d:#103436; --p-on-d:#04201F; --p-liquid-d:rgba(79,200,188,.28);

  --bg:#ECF2EF; --surface:#FFFFFF; --surface-2:#E8EEEB; --surface-3:#DAE3DF;
  --ink:#0E1A1C; --ink-2:#3E5254; --ink-3:#586B6D;
  --line:#D3DDD9; --line-2:#B3C2BD;
  --accent:var(--p-accent-l); --accent-2:var(--p-accent2-l); --accent-soft:var(--p-soft-l); --on-accent:var(--p-on-l); --liquid:var(--p-liquid-l);

  /* the instrument display is dark in both themes */
  --disp-bg:#0D191C; --disp-bg-2:#152528; --disp-line:#22383B; --disp-line-2:#33494C; --disp-ink:#E7F0EE; --disp-ink-2:#93A9A7; --disp-accent:var(--p-accent-d); --disp-liquid:var(--p-liquid-d);

  --rubber:#2A3133; --rod:#C5CFCD;
  --ok:#1D6A43; --ok-soft:#DBEFE3;
  --info:#2854A6; --info-soft:#E0E8F7;
  --warn:#8A5200; --warn-soft:#F6EAD4;
  --danger:#A2231B; --danger-soft:#F8E0DC;
  --neutral:#4F5D66; --neutral-soft:#E4E9EC;
  --chart-muted:#849292;
  --shadow:0 1px 2px rgba(14,26,28,.05),0 12px 32px rgba(14,26,28,.07);
  --r-s:5px; --r-m:9px; --r-l:14px;

  --f-display:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --h-weight:750; --h-stretch:96%; --h-track:-.025em; --h-line:1.02;
  --f-body:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Atkinson Hyperlegible Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* brand bands: header, title bands, section bands, footer, icons */
  --head-bg:#0B5F63; --head-line:rgba(255,255,255,.08); --head-ink:#FFFFFF; --head-ink-2:rgba(255,255,255,.8); --head-badge:#FFFFFF; --head-badge-ink:#0B5F63; --head-active:#4FC8BC;
  --band-top:#0B5F63; --band-mid:#08494C; --band-bot:#063B3D; --band-glow:rgba(79,200,188,.30);
  --band-ink:#FFFFFF; --band-ink-2:rgba(255,255,255,.86); --band-ink-3:rgba(255,255,255,.78); --band-hl:#86E6DB;
  --band-tick:rgba(255,255,255,.55); --band-tick-2:rgba(255,255,255,.24); --band-chip-line:rgba(255,255,255,.38); --band-tag-bg:rgba(255,255,255,.13); --band-tag-ink:#E3F3F1;
  --mist-band:#E3F0ED; --mist-line:#C3D8D3; --mist-line-2:#A6C1BB; --white-band:#FFFFFF;
  --dark-band:#0D191C; --dark-band-ink:#E7F0EE; --dark-band-ink-2:#B7C9C7; --dark-band-ink-3:#7F9896;
  --foot-bg:#081315; --foot-ink:#E7F0EE; --foot-ink-2:#8EA4A2; --foot-ink-3:#71898A;
  --card-shadow:0 1px 2px rgba(14,26,28,.04),0 10px 26px -14px rgba(14,26,28,.16); --card-shadow-hover:0 2px 4px rgba(14,26,28,.05),0 18px 36px -18px rgba(11,95,99,.45);
  --icon-bg:#DCEEEB; --icon-ink:#0B5F63;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0B1213; --surface:#111B1D; --surface-2:#172426; --surface-3:#1E2D30;
    --ink:#E3ECEA; --ink-2:#A6B7B5; --ink-3:#7F9391;
    --line:#223234; --line-2:#2F4346;
    --accent:var(--p-accent-d); --accent-2:var(--p-accent2-d); --accent-soft:var(--p-soft-d); --on-accent:var(--p-on-d); --liquid:var(--p-liquid-d);
    --disp-bg:#070F11; --disp-bg-2:#0F1B1E; --disp-line:#1D3033; --disp-line-2:#2B4145;
    --rubber:#5E6A6C; --rod:#33474A;
    --ok:#62C48F; --ok-soft:#10301F;
    --info:#86A9F2; --info-soft:#152443;
    --warn:#E2A74E; --warn-soft:#33240C;
    --danger:#F28C82; --danger-soft:#3B1613;
    --neutral:#AEBAC2; --neutral-soft:#1F292E;
    --chart-muted:#6F8182;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.28);
    --head-bg:#0B1213; --head-line:#223234; --head-ink:#E3ECEA; --head-ink-2:#A6B7B5; --head-badge:#4FC8BC; --head-badge-ink:#04201F; --head-active:#4FC8BC;
    --band-top:#0D4A4D; --band-mid:#0A3A3C; --band-bot:#082D2F; --band-glow:rgba(79,200,188,.18);
    --mist-band:#0F2124; --mist-line:#1F3538; --mist-line-2:#2D4A4D; --white-band:#111B1D;
    --dark-band:#060D0F; --foot-bg:#050B0C;
    --card-shadow:0 1px 2px rgba(0,0,0,.3); --card-shadow-hover:0 0 0 1px rgba(79,200,188,.18),0 18px 40px -22px rgba(79,200,188,.35);
    --icon-bg:#0F3A3B; --icon-ink:#5FD3C7;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B1213; --surface:#111B1D; --surface-2:#172426; --surface-3:#1E2D30;
  --ink:#E3ECEA; --ink-2:#A6B7B5; --ink-3:#7F9391;
  --line:#223234; --line-2:#2F4346;
  --accent:var(--p-accent-d); --accent-2:var(--p-accent2-d); --accent-soft:var(--p-soft-d); --on-accent:var(--p-on-d); --liquid:var(--p-liquid-d);
  --disp-bg:#070F11; --disp-bg-2:#0F1B1E; --disp-line:#1D3033; --disp-line-2:#2B4145;
  --rubber:#5E6A6C; --rod:#33474A;
  --ok:#62C48F; --ok-soft:#10301F;
  --info:#86A9F2; --info-soft:#152443;
  --warn:#E2A74E; --warn-soft:#33240C;
  --danger:#F28C82; --danger-soft:#3B1613;
  --neutral:#AEBAC2; --neutral-soft:#1F292E;
  --chart-muted:#6F8182;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.28);
  --head-bg:#0B1213; --head-line:#223234; --head-ink:#E3ECEA; --head-ink-2:#A6B7B5; --head-badge:#4FC8BC; --head-badge-ink:#04201F; --head-active:#4FC8BC;
  --band-top:#0D4A4D; --band-mid:#0A3A3C; --band-bot:#082D2F; --band-glow:rgba(79,200,188,.18);
  --mist-band:#0F2124; --mist-line:#1F3538; --mist-line-2:#2D4A4D; --white-band:#111B1D;
  --dark-band:#060D0F; --foot-bg:#050B0C;
  --card-shadow:0 1px 2px rgba(0,0,0,.3); --card-shadow-hover:0 0 0 1px rgba(79,200,188,.18),0 18px 40px -22px rgba(79,200,188,.35);
  --icon-bg:#0F3A3B; --icon-ink:#5FD3C7;
}

/* =====================================================
   BASE
   ===================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent-2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
img,svg{max-width:100%}
p,ul,ol,dl{margin:0;padding:0}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:var(--h-weight);font-stretch:var(--h-stretch);letter-spacing:var(--h-track);font-optical-sizing:auto;margin:0;line-height:var(--h-line);text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(38px,5.6vw,66px)}
h2{font-size:clamp(25px,3vw,34px)}
h3{font-size:19px;letter-spacing:-.01em;line-height:1.2}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,32px)}
.eyebrow{display:flex;align-items:center;gap:9px;font:600 14px var(--f-body);color:var(--ink-3)}
.eyebrow::before{content:"";width:2px;height:13px;background:var(--accent);border-radius:1px}
.lede{font-size:clamp(17px,1.5vw,19.5px);line-height:1.55;color:var(--ink-2);max-width:60ch}
.mono,.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}
.fine{font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stack{display:grid;gap:var(--g,16px);grid-template-columns:minmax(0,1fr);align-content:start}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--g,10px)}
section.block{padding-block:clamp(40px,6vw,76px)}
section.block.tight{padding-block:clamp(28px,4vw,52px)}
.block-head{display:grid;gap:12px;margin-bottom:clamp(20px,3vw,32px);max-width:66ch}
.block-head p.muted{font-size:16.5px;line-height:1.55}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* graduation rule: the site's one ornament */
.ticks{height:14px;background:
  repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 50px) left top/100% 14px no-repeat,
  repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 10px) left top/100% 7px no-repeat}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* =====================================================
   HEADER
   ===================================================== */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--bg);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:stretch;gap:24px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand:hover{color:var(--ink)}
.brand .mark{width:34px;height:34px;flex:none;display:block;color:var(--on-accent)}
.brand .m-bg{fill:var(--accent)}
.brand .wm{font-family:var(--f-display);font-size:21px;line-height:1;font-weight:460;font-stretch:96%;letter-spacing:-.02em;font-optical-sizing:auto}
.brand .wm b{font-weight:800}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{position:relative;display:inline-flex;align-items:center;padding:0 12px;text-decoration:none;color:var(--ink-2);font-weight:650;font-size:15px;white-space:nowrap}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--accent)}
.nav .short{display:none}
@media (max-width:780px){
  .site-head .wrap{flex-wrap:wrap;gap:0;padding-top:6px}
  .brand{min-height:46px}
  .nav{margin-left:-8px;width:calc(100% + 8px);flex-wrap:wrap;row-gap:0}
  .nav a{padding:9px 8px;font-size:14.5px}
  .nav a[aria-current="page"]::after{left:8px;right:8px;bottom:2px}
  .nav .full{display:none}.nav .short{display:inline}
}

/* =====================================================
   CONTROLS
   ===================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:9px;font:700 15px/1.2 var(--f-body);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-2);color:var(--on-accent)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink-3);color:var(--ink)}
.btn-sm{padding:7px 12px;font-size:14px;border-radius:7px}
.link-arrow{font-weight:700;text-decoration:none;white-space:nowrap}
.link-arrow:hover{text-decoration:underline}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line-2);background:transparent;color:var(--ink-2);border-radius:999px;padding:6px 12px;font:650 13.5px/1.2 var(--f-body);cursor:pointer;white-space:nowrap}
.chip.mono{font-family:var(--f-mono);font-weight:600}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip .ct{opacity:.65;margin-left:5px;font-family:var(--f-mono);font-size:12px}
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:10px;background:var(--surface-2)}
.seg button{border:0;background:transparent;border-radius:7px;padding:7px 11px;font:700 13.5px/1.2 var(--f-body);color:var(--ink-2);cursor:pointer}
.seg button small{display:block;font:600 11.5px/1.2 var(--f-mono);color:var(--ink-3);margin-top:2px}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.seg button[aria-pressed="true"] small{color:var(--ink-2)}
.seg.icons button{padding:6px 9px}
.seg.icons svg{width:16px;height:16px;display:block}

.ev{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 7px;border-radius:999px;font:700 12.5px/1.3 var(--f-body);white-space:nowrap}
.ev svg{width:12px;height:12px;flex:none}
.ev-approved{background:var(--ok-soft);color:var(--ok)}
.ev-human{background:var(--info-soft);color:var(--info)}
.ev-pre{background:var(--warn-soft);color:var(--warn)}
.ev-blend{background:var(--neutral-soft);color:var(--neutral)}
.basis{display:inline-block;font:700 12px/1 var(--f-body);padding:4px 7px;border-radius:4px;border:1.5px solid currentColor;white-space:nowrap}
.b-label{color:var(--ok)}.b-trial{color:var(--info)}.b-community{color:var(--warn)}
.tag{display:inline-block;font:600 12.5px/1.3 var(--f-mono);color:var(--ink-2);background:var(--surface-2);border-radius:5px;padding:3px 7px;white-space:nowrap}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l)}
.pad{padding:clamp(16px,2.4vw,24px)}
.note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:9px;font-size:14.5px;line-height:1.45;color:var(--ink)}
.note svg{flex:none;width:18px;height:18px;margin-top:1px}
.note-info{background:var(--info-soft)}.note-info svg{color:var(--info)}
.note-warn{background:var(--warn-soft)}.note-warn svg{color:var(--warn)}
.note-danger{background:var(--danger-soft)}.note-danger svg{color:var(--danger)}
.note-ok{background:var(--ok-soft)}.note-ok svg{color:var(--ok)}

/* tables */
.tbl-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th{font:600 13px/1.2 var(--f-body);color:var(--ink-3);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
tr.is-current td{background:var(--accent-soft)}
tr.group-row td{background:var(--surface-2);font-family:var(--f-display);font-weight:var(--h-weight);font-stretch:var(--h-stretch);font-size:14px;letter-spacing:-.005em;color:var(--ink-2);padding-block:9px}

/* forms */
.field{display:grid;gap:7px;align-content:start;grid-template-columns:minmax(0,1fr)}
.flabel{font-weight:700;font-size:14.5px;color:var(--ink)}
.flabel small{font-weight:600;color:var(--ink-3);font-size:13px}
.hint{font-size:13px;color:var(--ink-3)}
.inp{display:flex;align-items:stretch;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);overflow:hidden;min-height:46px}
.inp:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.inp input{flex:1;min-width:0;width:100%;border:0;background:transparent;padding:10px 12px;font:650 18px/1.2 var(--f-mono);color:var(--ink);outline:none;font-variant-numeric:tabular-nums}
.inp .unit{display:flex;align-items:center;padding:0 12px;background:var(--surface-2);color:var(--ink-2);font:650 14px var(--f-mono);border-left:1px solid var(--line)}
.inp select{border:0;border-left:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:650 14px var(--f-mono);padding:0 8px;cursor:pointer;outline:none}
.inp.bad{border-color:var(--danger)}
select.sel,input.txt{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);color:var(--ink);font:600 15.5px var(--f-body)}
select.sel:focus,input.txt:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* =====================================================
   INSTRUMENT DISPLAY (dark in both themes)
   ===================================================== */
.display{color-scheme:dark;background:var(--disp-bg);color:var(--disp-ink);border-radius:var(--r-l);box-shadow:inset 0 0 0 1px var(--disp-line),0 30px 60px -28px rgba(0,0,0,.55);padding:clamp(18px,2.4vw,26px)}
.display .eyebrow{color:var(--disp-ink-2)}
.display .eyebrow::before{background:var(--disp-accent)}
.display a{color:var(--disp-accent)}
.display .flabel{color:var(--disp-ink-2);font-size:13px}
.display .inp{background:var(--disp-bg-2);border-color:var(--disp-line-2)}
.display .inp:focus-within{border-color:var(--disp-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--disp-accent) 25%,transparent)}
.display .inp input{color:var(--disp-ink)}
.display .inp .unit{background:transparent;color:var(--disp-ink-2);border-left-color:var(--disp-line-2)}
.display .readout .lbl{color:var(--disp-ink-2)}
.display .readout .big{color:var(--disp-accent)}
.display .readout .big small{color:var(--disp-ink-2)}
.display .readout .hint2{color:var(--disp-ink)}
.display .stats{border-color:var(--disp-line-2)}
.display .stats > div{border-color:var(--disp-line-2)}
.display .stats span{color:var(--disp-ink-2)}
.display .stats b{color:var(--disp-ink)}
.display .stats em{color:var(--disp-ink-2)}
.display .comp-list li{background:var(--disp-bg-2);color:var(--disp-ink)}
.display .foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--disp-line);font:600 13px var(--f-body);color:var(--disp-ink-2)}
.display .sy-glass{fill:var(--disp-bg-2);stroke:var(--disp-line-2)}
.display .sy-liquid{fill:var(--disp-liquid)}
.display .sy-tick{stroke:var(--disp-ink-2)}
.display .sy-tick.major{stroke:var(--disp-ink)}
.display .sy-num{fill:var(--disp-ink-2)}
.display .sy-rubber{fill:#08100F}
.display .sy-ridge{stroke:var(--disp-ink-2);stroke-opacity:.5}
.display .sy-rod-in{fill:var(--disp-line-2)}
.display .sy-rod{fill:var(--disp-ink-2)}
.display .sy-flange,.display .sy-thumb,.display .sy-hub{fill:var(--disp-bg-2);stroke:var(--disp-line-2)}
.display .sy-needle{stroke:var(--disp-ink-2)}
.display .sy-mark{stroke:var(--disp-accent)}
.display .sy-pill rect{fill:var(--disp-accent)}
.display .sy-pill text{fill:var(--disp-bg)}
.display .sy-pill.over rect{fill:#F28C82}.display .sy-pill.over text{fill:#2A0906}

/* =====================================================
   SYRINGE
   ===================================================== */
.syringe{display:block;width:100%;height:auto;overflow:visible}
.sy-needle{stroke:var(--ink-3);stroke-width:2;stroke-linecap:round}
.sy-hub{fill:var(--surface-3);stroke:var(--line-2)}
.sy-glass{fill:var(--surface);stroke:var(--line-2);stroke-width:1.5}
.sy-liquid{fill:var(--liquid)}
.sy-tick{stroke:var(--ink-3);stroke-width:1}
.sy-tick.major{stroke:var(--ink);stroke-width:1.4}
.sy-num{fill:var(--ink-2);font:600 15px var(--f-mono)}
.sy-rubber{fill:var(--rubber)}
.sy-ridge{stroke:var(--surface);stroke-opacity:.35;stroke-width:1.2}
.sy-rod-in{fill:var(--rod);opacity:.55}
.sy-rod{fill:var(--rod)}
.sy-flange,.sy-thumb{fill:var(--surface-3);stroke:var(--line-2)}
.sy-mark{stroke:var(--accent);stroke-width:2}
.sy-pill rect{fill:var(--accent)}
.sy-pill text{fill:var(--on-accent);font:700 14px var(--f-mono)}
.sy-pill.over rect{fill:var(--danger)}
.sy-pill.over text{fill:#fff}

/* =====================================================
   VIAL ILLUSTRATION
   ===================================================== */
.vial-svg{display:block;width:100%;height:auto;max-width:360px;margin:0 auto}
.v-cap{fill:var(--accent)}
.v-cap-top{fill:var(--accent-2)}
.v-seal{fill:var(--surface-3);stroke:var(--line-2);stroke-width:1.2}
.v-rubber{fill:var(--rubber)}
.v-glass{fill:color-mix(in srgb,var(--surface) 70%,transparent);stroke:var(--ink-2);stroke-width:1.8}
.v-shine{stroke:var(--surface);stroke-width:5;stroke-linecap:round;opacity:.9}
.v-label{fill:var(--surface);stroke:var(--line-2);stroke-width:1}
.v-label-text{fill:var(--ink);font:700 13px var(--f-mono)}
.v-label-sub{fill:var(--ink-3);font:600 10.5px var(--f-mono)}
.v-label-line{stroke:var(--line-2);stroke-width:1;stroke-dasharray:2 2}
.v-cake{fill:var(--surface-2);stroke:var(--line-2);stroke-width:1}
.v-cake-dot{fill:var(--line-2)}
.v-lead{stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:3 3}
.v-dot{fill:var(--ink-2)}
.v-num circle{fill:var(--ink);stroke:var(--bg);stroke-width:2}
.v-num text{fill:var(--bg);font:700 12px var(--f-mono)}
.callouts{display:grid;gap:0;list-style:none;counter-reset:cl}
.callouts li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:13px 0;border-top:1px solid var(--line)}
.callouts li:last-child{border-bottom:1px solid var(--line)}
.callouts li::before{counter-increment:cl;content:counter(cl);display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--bg);font:700 12.5px var(--f-mono);margin-top:1px}
.callouts b{display:block;font-family:var(--f-display);font-weight:var(--h-weight);font-stretch:var(--h-stretch);font-size:16.5px;letter-spacing:-.01em;margin-bottom:2px}
.callouts p{font-size:15px;color:var(--ink-2);line-height:1.45}

/* =====================================================
   HOME
   ===================================================== */
.hero{padding-block:clamp(40px,7vw,88px) clamp(34px,5vw,60px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.hero h1{max-width:13ch}
.hero .lede{margin-top:22px}
.hero .cta{margin-top:30px}
.hero-meta{margin-top:30px;display:flex;flex-wrap:wrap;gap:8px 22px}
.hero-meta span{font:600 13.5px var(--f-mono);color:var(--ink-3)}
.hero-meta b{color:var(--ink);font-weight:700}
@media (max-width:920px){.hero-grid{grid-template-columns:minmax(0,1fr)}.hero h1{max-width:18ch}}
.inst .inst-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.inst .inst-head a{font:700 14px var(--f-body);text-decoration:none}
.inst-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:420px){.inst-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.inst-grid .field:last-child{grid-column:1/-1}}
.inst .readout{margin-top:18px}
.inst .readout .big{font-size:clamp(44px,5vw,60px)}
.inst-syr{margin-top:8px}

.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,64px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}}
.basis-list{display:grid;gap:0}
.basis-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;padding:16px 0;border-top:1px solid var(--line)}
.basis-row:last-child{border-bottom:1px solid var(--line)}
.basis-row p{font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.basis-row p b{color:var(--ink);display:block;font-weight:700}
@media (max-width:520px){.basis-row{grid-template-columns:minmax(0,1fr);gap:8px}}
.tier-scale{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:clamp(28px,4vw,44px)}
.tier{display:grid;gap:10px;align-content:start;padding-top:14px;border-top:3px solid var(--t);text-decoration:none;color:var(--ink)}
.tier:hover{color:var(--ink)}
.tier:hover .count{color:var(--accent)}
.tier .count{font:700 clamp(34px,4vw,46px)/1 var(--f-mono);letter-spacing:-.02em;transition:color .15s}
.tier p{font-size:14.5px;color:var(--ink-2);line-height:1.45}
@media (max-width:860px){.tier-scale{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.tier-scale{grid-template-columns:minmax(0,1fr);gap:12px}}

.anatomy{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,64px);align-items:center}
@media (max-width:860px){.anatomy{grid-template-columns:minmax(0,1fr)}}

.index{list-style:none;display:grid;gap:0;border-top:1px solid var(--line)}
.index a{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,1.3fr) 24px;gap:16px;align-items:center;padding:16px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:background .15s}
.index a:hover{background:var(--surface);color:var(--ink)}
.index .ix-n{font:700 20px/1 var(--f-mono);color:var(--accent)}
.index .ix-n small{display:block;font:600 12px var(--f-body);color:var(--ink-3);margin-top:4px}
.index .ix-name{font-family:var(--f-display);font-weight:var(--h-weight);font-stretch:var(--h-stretch);font-size:19px;letter-spacing:-.01em}
.index .ix-ex{font-size:14px;color:var(--ink-3);line-height:1.4}
.index .ix-arrow{color:var(--ink-3);font-size:18px;text-align:right}
.index a:hover .ix-arrow{color:var(--accent)}
@media (max-width:700px){.index a{grid-template-columns:56px minmax(0,1fr) 20px}.index .ix-ex{display:none}}

.warn-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(24px,4vw,44px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.warn-num{font:700 clamp(24px,3.5vw,46px)/1.05 var(--f-mono);letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.warn-num span{color:var(--ink-3);margin:0 .2em}
.warn-num em{font-style:normal;color:var(--danger)}
.warn-block h2{font-size:clamp(22px,2.4vw,28px);margin-bottom:10px}
.warn-block p{font-size:16px;line-height:1.55;color:var(--ink-2)}
@media (max-width:760px){.warn-block{grid-template-columns:minmax(0,1fr)}}

/* =====================================================
   LIBRARY
   ===================================================== */
.page-head{padding-block:clamp(32px,5vw,60px) 24px;display:grid;gap:12px}
.filters{display:grid;gap:12px;margin-bottom:18px}
.filters .search{max-width:440px}
.filter-row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between}
.results-meta{font:600 13.5px var(--f-mono);color:var(--ink-3);margin-bottom:12px}
.grid-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:980px){.grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid-cards{grid-template-columns:minmax(0,1fr)}}
.pcard{display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;padding:20px 20px 18px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s,box-shadow .15s}
.pcard:hover{border-color:var(--ink-3);color:var(--ink);box-shadow:var(--shadow)}
.pcard .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.pcard h3{font-size:22px;letter-spacing:-.015em}
.pcard .aka{font-size:13px;color:var(--ink-3);margin-top:3px}
.pcard .cls{font-size:14px;color:var(--ink-2)}
.gauge{display:grid;gap:6px;align-self:end}
.g-track{position:relative;height:16px;border-radius:3px;background:var(--surface-2);overflow:hidden;
  background-image:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 10%);background-size:100% 6px;background-repeat:no-repeat;background-position:left bottom;background-color:var(--surface-2)}
.g-track i{position:absolute;left:0;top:0;bottom:0;background:var(--liquid)}
.g-track b{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);margin-left:-1px}
.g-txt{display:flex;justify-content:space-between;gap:10px;font:600 12.5px var(--f-mono);color:var(--ink-2);flex-wrap:wrap}
.g-txt span:last-child{color:var(--ink-3)}
.pcard .foot{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding-top:12px;border-top:1px dashed var(--line-2)}
.pcard .dose{font:700 14px var(--f-mono);color:var(--ink)}
.pcard .sizes{font:600 12.5px var(--f-mono);color:var(--ink-3);white-space:nowrap}
.empty{padding:40px 20px;text-align:center;color:var(--ink-3)}
.ltable .nm a{font-family:var(--f-display);font-weight:var(--h-weight);font-stretch:var(--h-stretch);font-size:16px;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.ltable .nm a:hover{color:var(--accent)}
.ltable .nm small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:2px;font-family:var(--f-body);font-weight:500}
.ltable td{vertical-align:middle}

/* =====================================================
   COMPOUND PAGE
   ===================================================== */
.crumbs{font-size:14px;color:var(--ink-3);padding-top:22px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.c-head{display:grid;gap:14px;padding-block:clamp(22px,3.5vw,40px) 26px}
.c-head h1{font-size:clamp(38px,5.4vw,62px)}
.c-head .aka{font-size:16.5px;color:var(--ink-2)}
.c-head .tag{white-space:normal}
.c-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(24px,3.5vw,48px);align-items:start;padding-bottom:64px}
.c-main{display:grid;gap:clamp(26px,3.4vw,38px);grid-template-columns:minmax(0,1fr)}
.c-side{display:grid;gap:14px;position:sticky;top:86px;grid-template-columns:minmax(0,1fr)}
@media (max-width:960px){.c-grid{grid-template-columns:minmax(0,1fr)}.c-side{position:static}}
.sec{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.sec > h2{font-size:23px;padding-top:14px;border-top:1px solid var(--line)}
.what{font-size:18px;line-height:1.6;max-width:66ch}
.dose-rows{display:grid;gap:0}
.dose-row{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;padding:14px 18px;border-bottom:1px solid var(--line)}
.dose-row:last-child{border-bottom:0}
.dose-row .ctx{font-size:13px;color:var(--ink-3);margin-top:4px;line-height:1.3}
.dose-row p{line-height:1.5}
@media (max-width:520px){.dose-row{grid-template-columns:minmax(0,1fr);gap:6px}}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.facts > div{padding:13px 18px;border-bottom:1px solid var(--line)}
.facts > div:nth-child(odd){border-right:1px solid var(--line)}
.facts > div:last-child{border-bottom:0}
.facts dt{font:600 12.5px/1.2 var(--f-body);color:var(--ink-3);margin-bottom:5px}
.facts dd{margin:0;font-size:15px}
.facts .wide{grid-column:1/-1;border-right:0!important}
@media (max-width:560px){.facts{grid-template-columns:minmax(0,1fr)}.facts > div:nth-child(odd){border-right:0}}
.warn-list{display:grid;gap:8px;list-style:none}
.warn-list li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5}
.warn-list li::before{content:"";flex:none;width:7px;height:7px;margin-top:8px;border-radius:2px;background:var(--danger);transform:rotate(45deg)}
.src-list{display:grid;gap:8px;list-style:none;font-size:14.5px}
.src-list li{line-height:1.5;word-break:break-word}
.src-id{font:600 12.5px var(--f-mono);color:var(--ink-3);white-space:nowrap;margin-left:2px}
.src-note{margin-top:12px;max-width:70ch}
.spec{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);overflow:hidden}
.spec-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;background:var(--surface-2);font:700 13.5px var(--f-body);color:var(--ink-2)}
.spec-row{display:grid;gap:4px;padding:12px 16px;border-top:1px solid var(--line)}
.spec-row > span{font:600 12.5px var(--f-body);color:var(--ink-3)}
.spec-row .v{font-size:15px}
.spec-row .v.mono{font-weight:700;font-size:15.5px}
.spec-syr{padding:12px 16px 6px;border-top:1px solid var(--line)}
.spec-syr .lbl{font:500 13.5px var(--f-body);color:var(--ink-2);margin-bottom:4px}
.spec-syr .lbl b{color:var(--ink)}
.spec-cta{padding:12px 16px 16px;border-top:1px solid var(--line)}
.spec-cta .btn{width:100%}
.side-card{padding:16px;display:grid;gap:10px}
.kv{display:grid;gap:3px}
.kv > span{font:600 12.5px/1.2 var(--f-body);color:var(--ink-3)}
.rel{display:flex;flex-wrap:wrap;gap:6px}
.rel a{font-size:14px;font-weight:650;text-decoration:none;padding:6px 10px;border-radius:7px;background:var(--surface-2);color:var(--ink)}
.rel a:hover{background:var(--accent-soft)}

/* cycle track */
.track{display:grid;grid-template-columns:repeat(26,minmax(0,1fr));gap:2px;min-width:236px}
.track i{height:14px;border-radius:2px;background:var(--surface-3)}
.track i.on{background:var(--accent)}
.track i.m{background:var(--accent);opacity:.45}
.track i.prn{background:radial-gradient(circle at 50% 50%,var(--accent) 0 2px,transparent 2.6px),var(--surface-3)}
.track i.open{background:transparent;outline:1px dashed var(--line-2);outline-offset:-1px}
.track.big i{height:20px}
.track.anim i{animation:cell-in .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 14ms)}
@keyframes cell-in{from{opacity:.25;transform:scaleY(.4)}to{opacity:1;transform:none}}
.track-scale{display:grid;grid-template-columns:repeat(26,minmax(0,1fr));gap:2px;font:600 10.5px var(--f-mono);color:var(--ink-3);margin-top:4px}
.track-scale span{grid-column:span 4}
.track-scale span:last-child{grid-column:span 2}
.cyc-label{font:600 12.5px var(--f-mono);color:var(--ink-2);margin-top:6px}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13.5px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{display:inline-block;width:14px;height:12px;border-radius:2px;background:var(--surface-3)}
.legend i.on{background:var(--accent)}
.legend i.m{background:var(--accent);opacity:.45}
.legend i.prn{background:radial-gradient(circle,var(--accent) 0 2px,transparent 2.6px),var(--surface-3)}
.legend i.open{background:transparent;outline:1px dashed var(--line-2);outline-offset:-1px}

/* =====================================================
   PROTOCOLS
   ===================================================== */
.patterns{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.pattern{display:grid;gap:10px;align-content:start;padding:14px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;cursor:pointer;background:none;text-align:left;color:var(--ink);font:inherit}
.pattern:hover h3{color:var(--accent)}
.pattern[aria-pressed="true"]{border-top:3px solid var(--accent);padding-top:12px}
.pattern h3{font-size:17px}
.pattern p{font-size:14px;color:var(--ink-2);line-height:1.45}
.pattern .track{min-width:0;grid-template-columns:repeat(13,minmax(0,1fr))}
@media (max-width:1000px){.patterns{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.patterns{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
.ptable{min-width:920px}
.ptable td{vertical-align:middle}
.ptable .nm a{font-family:var(--f-display);font-weight:var(--h-weight);font-stretch:var(--h-stretch);font-size:16.5px;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.ptable .nm a:hover{color:var(--accent)}
.ptable .nm small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:2px;font-family:var(--f-body);font-weight:500}
.ptable td.trk{width:36%}
.ptable th.trk-h{padding-bottom:6px}
.week-ruler{display:grid;grid-template-columns:repeat(26,minmax(0,1fr));gap:2px;font:600 10.5px var(--f-mono);color:var(--ink-3);margin-top:5px}
.week-ruler span{grid-column:span 4}
.week-ruler span:last-child{grid-column:span 2}
.proto-tools{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin-bottom:14px}

/* =====================================================
   RECONSTITUTION
   ===================================================== */
.recon-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:clamp(24px,3.5vw,56px);align-items:start;padding-bottom:64px}
.recon-grid .toc{position:sticky;top:86px;display:grid;gap:2px;padding-top:4px;border-top:1px solid var(--line)}
.toc a{text-decoration:none;color:var(--ink-2);font-weight:650;font-size:14.5px;padding:8px 0;border-bottom:1px solid var(--line)}
.toc a:hover{color:var(--accent)}
.toc .eyebrow{padding:10px 0 6px}
@media (max-width:960px){.recon-grid{grid-template-columns:minmax(0,1fr)}.recon-grid .toc{position:static;order:-1}}
.prose{display:grid;gap:14px;max-width:70ch}
.prose p{font-size:17px;line-height:1.65}
.checklist{display:grid;gap:8px;list-style:none}
.checklist li{display:flex;gap:10px;align-items:flex-start}
.checklist li::before{content:"";flex:none;width:16px;height:16px;margin-top:4px;border:1.5px solid var(--accent);border-radius:4px}
.olist{display:grid;gap:0;list-style:none;counter-reset:o}
.olist li{counter-increment:o;display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.olist li:last-child{border-bottom:0}
.olist li::before{content:counter(o,decimal-leading-zero);font:700 22px/1.3 var(--f-mono);letter-spacing:-.02em;color:var(--accent)}
.olist b{display:block;margin-bottom:2px;font-family:var(--f-display);font-weight:var(--h-weight);font-stretch:var(--h-stretch);font-size:17px;letter-spacing:-.01em}
.formula{font:600 15px/1.8 var(--f-mono);padding:16px 18px;background:var(--surface-2);border-radius:var(--r-m);overflow-x:auto;white-space:nowrap}
.formula .c{color:var(--ink-3)}
.syr-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.syr-row > div{padding-top:12px;border-top:1px solid var(--line)}
.syr-row h3{font-size:16px}
.syr-row p{font-size:13.5px;color:var(--ink-3);margin:4px 0 6px}
@media (max-width:860px){.syr-row{grid-template-columns:minmax(0,1fr);gap:14px}}
.qa{display:grid;gap:0}
.qa > div{padding:14px 0;border-bottom:1px solid var(--line)}
.qa > div:last-child{border-bottom:0}
.qa b{display:block;margin-bottom:3px}
.recon-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center;padding-bottom:clamp(24px,3vw,40px)}
@media (max-width:860px){.recon-hero{grid-template-columns:minmax(0,1fr)}}

/* =====================================================
   CALCULATOR
   ===================================================== */
.calc{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(16px,2.6vw,32px);align-items:start;padding-bottom:20px}
@media (max-width:920px){.calc{grid-template-columns:minmax(0,1fr)}}
.calc-form{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.calc-out{display:grid;gap:14px;position:sticky;top:86px;grid-template-columns:minmax(0,1fr)}
@media (max-width:920px){.calc-out{position:static}}
.readout{display:grid;gap:4px;grid-template-columns:minmax(0,1fr)}
.readout .lbl{font:600 14px var(--f-body);color:var(--ink-3)}
.readout .big{font:700 clamp(50px,6.6vw,74px)/1 var(--f-mono);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.readout .big small{font-size:.34em;letter-spacing:0;margin-left:8px;font-weight:650;color:var(--ink-2)}
.readout .hint2{font:600 14.5px var(--f-mono);color:var(--ink-2)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.stats > div{padding:12px 14px;border-right:1px solid var(--line);display:grid;gap:4px}
.stats > div:last-child{border-right:0}
.stats span{font:600 12.5px/1.2 var(--f-body);color:var(--ink-3)}
.stats b{font:700 17px/1.2 var(--f-mono);font-variant-numeric:tabular-nums}
.stats em{font-style:normal;font-size:12.5px;color:var(--ink-3);font-family:var(--f-mono)}
@media (max-width:520px){.stats{grid-template-columns:minmax(0,1fr)}.stats > div{border-right:0;border-bottom:1px solid var(--line)}.stats > div:last-child{border-bottom:0}}
.comp-list{display:grid;gap:6px;list-style:none}
.comp-list li{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:7px;background:var(--surface-2);font-size:14.5px}
.comp-list li b{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.notes{display:grid;gap:8px}
.label-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 14px;border:1px dashed var(--line-2);border-radius:9px;background:var(--surface)}
.label-card .lc-head{font:600 12.5px var(--f-body);color:var(--ink-3);margin-bottom:5px}
.label-card code{font:600 13.5px/1.45 var(--f-mono);color:var(--ink);word-break:break-word;display:block}
.calc-lower{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.6vw,32px);padding-bottom:64px;align-items:start}
@media (max-width:920px){.calc-lower{grid-template-columns:minmax(0,1fr)}}
.calc-lower h3{margin-bottom:10px;padding-top:12px;border-top:1px solid var(--line)}
.calc-lower section{min-width:0}

/* weight-based dose + supply planner */
.linkbtn{justify-self:start;border:0;background:none;padding:2px 0;color:var(--accent);font:700 14px var(--f-body);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.linkbtn:hover{color:var(--accent-2)}
.wt-box{display:grid;gap:8px;padding:12px;border-radius:9px;background:var(--surface-2)}
.wt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:420px){.wt-grid{grid-template-columns:minmax(0,1fr)}}
.wt-box .hint{line-height:1.45}
.wt-box .hint .basis{margin-right:4px;vertical-align:1px}
.inp input[readonly]{color:var(--ink-2);cursor:default}
.display .wt-line{font:600 13.5px var(--f-mono);color:var(--disp-ink-2);margin-top:2px}
.calc-lower .plan{grid-column:1/-1;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.calc-lower .plan h3{border:0;padding:0;margin:0}
.plan-head{display:grid;gap:6px}
.plan-controls{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:end}
.plan-controls .field{min-width:150px}
.plan-controls .txt{min-height:44px}
.check{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--ink);min-height:44px}
.check input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.mini{width:58px;min-height:36px;padding:6px 8px;border:1px solid var(--line-2);border-radius:7px;background:var(--surface);color:var(--ink);font:650 14px var(--f-mono);text-align:center}
.mini:disabled{opacity:.5}
.plan .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:700px){.plan .stats{grid-template-columns:repeat(2,minmax(0,1fr))}.plan .stats > div{border-bottom:1px solid var(--line)}.plan .stats > div:nth-child(2n){border-right:0}.plan .stats > div:nth-child(n+3){border-bottom:0}}
.p-date{display:block;font:600 12px var(--f-mono);color:var(--ink-3);margin-top:2px}
#cPlan{scroll-margin-top:90px}

/* =====================================================
   PROTOCOL DETAIL (compound pages)
   ===================================================== */
.sec[id],.dchart-wrap,.wb{scroll-margin-top:90px}
.jump{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.jump a{font:650 13.5px/1.2 var(--f-body);color:var(--ink-2);text-decoration:none;padding:7px 12px;border:1px solid var(--line-2);border-radius:999px;white-space:nowrap;background:var(--surface)}
.jump a:hover{border-color:var(--ink-3);color:var(--ink)}
.variants{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px}
.variant{display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;padding:16px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);min-width:0}
.variant header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.variant h3{font-size:17px}
.v-facts{display:grid;gap:7px}
.v-facts > div{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;align-items:baseline}
.v-facts dt{font:600 12.5px var(--f-body);color:var(--ink-3)}
.v-facts dd{margin:0;font-size:14.5px;line-height:1.4}
.v-facts > div:first-child dd{font:700 15px/1.35 var(--f-mono)}
.v-note{font-size:14px;line-height:1.5;color:var(--ink-2)}
.v-draw{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:12px;border-top:1px dashed var(--line-2);flex-wrap:wrap}
.v-draw span{font-size:14px;color:var(--ink-2)}
.v-draw b{font:700 15.5px var(--f-mono);color:var(--ink)}
.v-draw small{display:block;font:600 12px var(--f-mono);color:var(--ink-3);margin-top:2px}
.wb{padding:16px;display:grid;gap:10px;margin-top:4px}
.wb-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.wb-head h3{font-size:17px}
.wb > p{font-size:15px;line-height:1.5}
.wb-calc{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:560px){.wb-calc{grid-template-columns:minmax(0,1fr)}}
.wb-out{display:grid;gap:4px;font-size:14.5px;justify-items:start;padding-top:2px}
.wb-out b{font:700 20px/1.2 var(--f-mono)}
.use-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:640px){.use-grid{grid-template-columns:minmax(0,1fr)}}
.use-card{padding:16px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);display:grid;gap:8px;align-content:start;min-width:0}
.use-card h3{font-size:16.5px}
.use-card p{font-size:15px;line-height:1.55}
.timeline{list-style:none;display:grid;gap:0;border-left:2px solid var(--line);margin-left:6px}
.timeline li{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:12px 0 12px 22px}
.timeline li::before{content:"";position:absolute;left:-7px;top:17px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.t-when{font:700 14px/1.45 var(--f-mono);color:var(--ink)}
.t-what{display:grid;gap:6px;justify-items:start}
.t-what p{font-size:15px;line-height:1.55}
@media (max-width:560px){.timeline li{grid-template-columns:minmax(0,1fr);gap:4px}}
.se-list{display:grid;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);overflow:hidden}
.se-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;padding:13px 16px;border-bottom:1px solid var(--line)}
.se-row:last-child{border-bottom:0}
.se-s{font-weight:700;font-size:15px;line-height:1.45}
.se-m{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
@media (max-width:640px){.se-row{grid-template-columns:minmax(0,1fr);gap:4px}}
.stop-block{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-m);background:var(--danger-soft);border-left:4px solid var(--danger)}
.stop-block svg{flex:none;width:20px;height:20px;color:var(--danger);margin-top:2px}
.stop-block b{display:block;margin-bottom:2px}
.stop-block p{font-size:15px;line-height:1.5}
.mon-list{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.mon-list li{font-size:14px;line-height:1.35;padding:6px 10px;border-radius:7px;background:var(--surface-2)}
.pair-list{list-style:none;display:grid;gap:12px}
.pair-list p{font-size:14.5px;color:var(--ink-2);line-height:1.5;margin-top:2px}
.src-sub{font:600 13px var(--f-body);color:var(--ink-3);margin-top:6px}
.dchart-wrap{display:grid;gap:10px;margin-top:14px;grid-template-columns:minmax(0,1fr)}
.dc-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.dc-head h3{font-size:19px}
.dchart th.dc-dose{vertical-align:bottom}
.dchart th.dc-dose small{display:block;font-weight:500;color:var(--ink-3);margin-top:2px}
.dchart th.dc-cap{text-align:center;padding-bottom:6px}
.dchart thead tr + tr th{text-align:center}
.dchart th.is-w0{color:var(--ink)}
.dchart tbody th{background:var(--surface);color:var(--ink);font:700 14px var(--f-mono);white-space:nowrap;border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:6px 12px;vertical-align:middle}
.dchart tbody tr:last-child th{border-bottom:0}
.dchart tbody tr.is-def th{box-shadow:inset 3px 0 0 var(--accent)}
.dchart td{padding:4px;vertical-align:middle}
.dc-cell{width:100%;min-width:60px;padding:9px 8px;border:0;border-radius:6px;background:transparent;font:650 14.5px var(--f-mono);color:var(--ink);cursor:pointer;text-align:center;font-variant-numeric:tabular-nums}
.dc-cell:hover{background:var(--accent-soft)}
.dc-cell.tiny{color:var(--ink-3)}
.dc-cell.is-cur{background:var(--accent);color:var(--on-accent)}
td.dc-na{text-align:center;color:var(--ink-3)}

/* =====================================================
   GOAL GUIDES
   ===================================================== */
.goal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1040px){.goal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.goal-grid{grid-template-columns:minmax(0,1fr)}}
.goal-card{display:grid;grid-template-rows:auto 1fr auto;gap:8px;padding:18px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s;min-width:0}
.goal-card:hover{border-color:var(--ink-3);color:var(--ink);box-shadow:var(--shadow)}
.goal-card h3{font-size:19px}
.goal-card p{font-size:14px;line-height:1.45;color:var(--ink-2)}
.gc-foot{display:grid;gap:7px;margin-top:4px}
.gc-bar{display:flex;gap:2px;height:6px}
.gc-bar i{border-radius:2px;min-width:4px}
.gc-meta{font:600 12.5px/1.4 var(--f-body);color:var(--ink-3)}
.g-head{display:grid;gap:12px;padding-block:clamp(22px,3.5vw,40px) 24px}
.g-head h1{font-size:clamp(38px,5.4vw,62px)}
.g-keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:clamp(28px,3.6vw,40px)}
@media (max-width:860px){.g-keys{grid-template-columns:minmax(0,1fr)}}
.g-key{display:grid;gap:10px;align-content:start;justify-items:start;padding:16px;border-top:3px solid var(--accent);background:var(--surface);border-radius:0 0 var(--r-m) var(--r-m);min-width:0}
.g-key p{font-size:15px;line-height:1.5}
.b-reg{color:var(--neutral)}
.g-main{display:grid;gap:clamp(28px,3.6vw,40px);grid-template-columns:minmax(0,1fr);padding-bottom:64px}
.g-main .legend{margin-top:4px}
.pc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:14px}
.proto-card{display:grid;gap:12px;padding:16px;align-content:start;min-width:0}
.pc-head{display:grid;gap:8px}
.pc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pc-name{font:700 14.5px var(--f-body);text-decoration:none}
.pc-name:hover{text-decoration:underline}
.proto-card h3{font-size:19px}
.proto-card .tag{white-space:normal}
.pc-table{font-size:13.5px}
.pc-table th,.pc-table td{padding:7px 8px}
.pc-table td:first-child{white-space:nowrap}
.pc-table td.num{font-size:13.5px}
.p-sub{display:block;font:600 11.5px var(--f-body);color:var(--ink-3);white-space:normal}
.pc-mix{font-size:14px;color:var(--ink-2);line-height:1.5}
.pc-mix b{font-family:var(--f-mono);color:var(--ink)}
.pc-note{font-size:14px;line-height:1.5}
.pc-stat{display:grid;gap:3px;padding:12px 14px;background:var(--surface-2);border-radius:var(--r-m)}
.pc-stat span{font:600 12.5px var(--f-body);color:var(--ink-3)}
.pc-stat b{font:700 30px/1.1 var(--f-mono);letter-spacing:-.02em}
.pc-stat em{font:600 13px var(--f-mono);font-style:normal;color:var(--ink-2)}
.tips{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.tip{display:grid;gap:8px;align-content:start;justify-items:start;padding:16px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);min-width:0}
.tip h3{font-size:16.5px}
.tip p{font-size:14.5px;line-height:1.5;color:var(--ink-2)}

/* trial comparison chart: one hue for the drug arm, muted gray for placebo */
.tc{margin:0;padding:clamp(16px,2.4vw,24px);display:grid;gap:14px;grid-template-columns:minmax(0,1fr);--tc-pad:58px}
.tc-cap{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.tc-cap h2{font-size:clamp(20px,2.2vw,24px);margin-bottom:6px}
.tc-cap p{font-size:14.5px;max-width:72ch}
.tc-legend{display:flex;gap:18px;font-size:13.5px;color:var(--ink-2)}
.tc-legend span{display:inline-flex;align-items:center;gap:7px}
.sw{display:inline-block;width:14px;border-radius:2px}
.sw.drug{height:12px;background:var(--accent)}
.sw.pbo{height:7px;background:var(--chart-muted)}
.tc-chart{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.tc-row{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:16px;align-items:center;padding:7px 4px;border-radius:6px;outline:none}
.tc-row[data-i]{cursor:default}
.tc-row:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.tc-row.hover{background:var(--surface-2)}
.tc-lab a{display:block;font:700 14.5px/1.3 var(--f-body);color:var(--ink);text-decoration:none}
.tc-lab a:hover{color:var(--accent)}
.tc-lab small{display:block;font:600 12px/1.35 var(--f-mono);color:var(--ink-3);margin-top:2px}
.tc-plot{position:relative;height:30px}
.tc-grid{position:absolute;top:0;bottom:0;width:1px;background:var(--line);left:calc((100% - var(--tc-pad)) * var(--p))}
.tc-bar{position:absolute;left:0;width:calc((100% - var(--tc-pad)) * var(--p))}
.tc-bar.drug{top:3px;height:14px;background:var(--accent);border-radius:0 4px 4px 0}
.tc-bar.pbo{top:19px;height:8px;background:var(--chart-muted);border-radius:0 3px 3px 0}
.tc-val{position:absolute;top:1px;left:calc((100% - var(--tc-pad)) * var(--p) + 8px);font:700 13.5px/18px var(--f-mono);color:var(--ink);white-space:nowrap}
.tc-axis{padding-top:0}
.tc-axis .tc-plot{height:18px}
.tc-axis span{position:absolute;top:0;left:calc((100% - var(--tc-pad)) * var(--p));transform:translateX(-50%);font:600 11.5px var(--f-mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.tc-axis span:first-child{transform:none}
.tc-tip{position:absolute;z-index:5;min-width:180px;padding:10px 12px;border-radius:8px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow);pointer-events:none;display:grid;gap:4px}
.tc-tip[hidden]{display:none}
.tt-head{font:700 13.5px/1.3 var(--f-body)}
.tt-row{display:grid;grid-template-columns:14px auto minmax(0,1fr);gap:8px;align-items:center;font-size:13px}
.tt-row b{font:700 14px var(--f-mono)}
.tt-row span{color:var(--ink-3)}
.tt-key{display:block;width:12px;height:3px;border-radius:2px}
.tt-key.drug{background:var(--accent)}.tt-key.pbo{background:var(--chart-muted)}
.tt-sub{font:600 12px var(--f-mono);color:var(--ink-3)}
@media (max-width:560px){.tc-row{grid-template-columns:minmax(0,1fr);gap:6px}.tc-axis > div:first-child{display:none}}

/* =====================================================
   FOOTER
   ===================================================== */
.site-foot{margin-top:24px;padding-bottom:40px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px;padding-top:28px}
@media (max-width:760px){.foot-grid{grid-template-columns:minmax(0,1fr)}}
.foot-grid .brand{justify-self:start}
.foot-tag{font-family:var(--f-display);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--ink-2)}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-nav a{font-weight:650;font-size:14.5px;color:var(--ink);text-decoration:none}
.foot-nav a:hover{color:var(--accent)}
.foot-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font:600 13px var(--f-mono);color:var(--ink-3)}

/* =====================================================
   BRAND BANDS (D-261004-2) AND ICONS (D-261004-3)
   ===================================================== */
body{overflow-x:clip}
#app{padding-bottom:clamp(44px,6vw,80px)}
#app:has(> section.band-dark:last-child){padding-bottom:0}
.site-head{background:var(--head-bg);background:color-mix(in srgb,var(--head-bg) 95%,transparent);border-bottom-color:var(--head-line)}
.site-head .brand,.site-head .brand:hover{color:var(--head-ink)}
.site-head .brand .m-bg{fill:var(--head-badge)}
.site-head .brand .mark{color:var(--head-badge-ink)}
.site-head .nav a{color:var(--head-ink-2)}
.site-head .nav a:hover,.site-head .nav a[aria-current="page"]{color:var(--head-ink)}
.site-head .nav a[aria-current="page"]::after{background:var(--head-active);height:3px}
.site-head :focus-visible,.hero :focus-visible,.band-tide :focus-visible{outline-color:#fff}

.hero{background:radial-gradient(760px 460px at 82% 34%,var(--band-glow),transparent 66%),linear-gradient(180deg,var(--band-top) 0%,var(--band-mid) 62%,var(--band-bot) 100%);color:var(--band-ink);padding-bottom:0}
.hero h1{color:var(--band-ink)}
.hero h1 .hl{color:var(--band-hl)}
.hero .lede{color:var(--band-ink-2)}
.hero .btn-primary{background:#fff;color:#0B5F63}
.hero .btn-primary:hover{background:#D3E9E7;color:#08494C}
.hero .btn-ghost{color:var(--band-ink);border-color:var(--band-chip-line)}
.hero .btn-ghost:hover{color:var(--band-ink);border-color:var(--band-ink)}
.hero .display{box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 44px 90px -34px rgba(0,0,0,.65)}
.hero .ticks,.band-tide .ticks{background:repeating-linear-gradient(90deg,var(--band-tick) 0 1px,transparent 1px 50px) left top/100% 14px no-repeat,repeating-linear-gradient(90deg,var(--band-tick-2) 0 1px,transparent 1px 10px) left top/100% 7px no-repeat}
.hero .ticks{margin-top:clamp(40px,5vw,60px)}

.band-tide{background:radial-gradient(640px 320px at 86% -10%,var(--band-glow),transparent 66%),linear-gradient(180deg,var(--band-top),var(--band-mid));color:var(--band-ink);margin-bottom:clamp(26px,3.4vw,40px)}
.band-tide .crumbs{color:var(--band-ink-3)}
.band-tide .crumbs a{color:var(--band-ink-2)}
.band-tide .crumbs a:hover{color:var(--band-ink)}
.band-tide h1{color:var(--band-ink)}
.band-tide .lede,.band-tide .aka{color:var(--band-ink-2)}
.band-tide .eyebrow{color:var(--band-ink-3)}
.band-tide .eyebrow::before{background:#4FC8BC}
.band-tide .tag{background:var(--band-tag-bg);color:var(--band-tag-ink)}
.band-tide .jump a{background:transparent;color:var(--band-ink);border-color:var(--band-chip-line)}
.band-tide .jump a:hover{border-color:var(--band-ink);color:var(--band-ink)}
.band-tide .page-head,.band-tide .c-head,.band-tide .g-head{padding-bottom:clamp(30px,4vw,48px)}

section.band-mist{background:var(--mist-band);--line:var(--mist-line);--line-2:var(--mist-line-2)}
section.band-white{background:var(--white-band)}
section.band-dark{background:var(--dark-band);color:var(--dark-band-ink)}
.band-dark .warn-block{border:0;padding:0}
.band-dark .warn-num{color:var(--dark-band-ink)}
.band-dark .warn-num span{color:var(--dark-band-ink-3)}
.band-dark .warn-num em{color:#F28C82}
.band-dark h2{color:#fff}
.band-dark p{color:var(--dark-band-ink-2)}
.band-dark a{color:#4FC8BC}

:is(.card,.goal-card,.variant,.use-card,.tip,.spec,.se-list){box-shadow:var(--card-shadow)}
.goal-card{border-top:3px solid var(--accent)}
.goal-card:hover,.pcard:hover{border-color:var(--accent);box-shadow:var(--card-shadow-hover)}

.spec-cat{font-weight:600;color:var(--ink-3)}
.spec.display{padding:0;overflow:hidden;border:0;background:var(--disp-bg)}
.spec.display .spec-head{background:var(--disp-bg-2);color:var(--disp-ink-2)}
.spec.display .spec-cat{color:var(--disp-ink-2)}
.spec.display :is(.spec-row,.spec-syr,.spec-cta){border-top-color:var(--disp-line)}
.spec.display .spec-row > span{color:var(--disp-ink-2)}
.spec.display .spec-row .v{color:var(--disp-ink)}
.spec.display .tag{background:var(--disp-bg-2);color:var(--disp-ink)}
.spec.display .spec-syr .lbl{color:var(--disp-ink-2)}
.spec.display .spec-syr .lbl b{color:var(--disp-ink)}
.spec.display .btn-primary{background:#4FC8BC;color:#04201F}
.spec.display .btn-primary:hover{background:#7FDDD3;color:#04201F}

.site-foot{background:var(--foot-bg);color:var(--foot-ink-2);margin-top:0;padding-top:4px}
.site-foot .ticks{background:repeating-linear-gradient(90deg,rgba(79,200,188,.5) 0 1px,transparent 1px 50px) left top/100% 14px no-repeat,repeating-linear-gradient(90deg,rgba(79,200,188,.2) 0 1px,transparent 1px 10px) left top/100% 7px no-repeat}
.site-foot .brand,.site-foot .brand:hover{color:#fff}
.site-foot .brand .m-bg{fill:#4FC8BC}
.site-foot .brand .mark{color:#062A2B}
.site-foot .foot-tag{color:var(--foot-ink)}
.site-foot .fine{color:var(--foot-ink-2)}
.site-foot .foot-nav a{color:var(--foot-ink)}
.site-foot .foot-nav a:hover{color:#4FC8BC}
.site-foot .foot-meta{color:var(--foot-ink-3)}
.site-foot :focus-visible{outline-color:#4FC8BC}

.goal-card{grid-template-rows:auto auto 1fr auto}
.gi{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--icon-bg);color:var(--icon-ink);margin-bottom:6px;transition:background .15s,color .15s}
.gi svg{width:25px;height:25px}
.goal-card:hover .gi{background:var(--accent);color:var(--on-accent)}
.index .ix-name{display:inline-flex;align-items:center;gap:12px}
.ci{display:inline-grid;place-items:center;width:34px;height:34px;flex:none;border-radius:9px;background:var(--icon-bg);color:var(--icon-ink)}
.ci svg{width:20px;height:20px}

/* key facts in title bands (D-261005-2) */
.facts-bar{display:flex;gap:2px;height:6px;margin-top:22px;max-width:960px}
.facts-bar i{border-radius:2px;min-width:4px}
.facts-bar .t-approved{background:#62C48F}.facts-bar .t-human{background:#86A9F2}.facts-bar .t-pre{background:#E2A74E}.facts-bar .t-blend{background:#AEBAC2}
.facts-strip{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));margin:22px 0 4px;border-top:1px solid rgba(255,255,255,.24);border-bottom:1px solid rgba(255,255,255,.24);max-width:960px}
.facts-bar + .facts-strip{margin-top:10px}
.facts-strip > div{padding:13px 18px;border-left:1px solid rgba(255,255,255,.16);min-width:0}
.facts-strip > div:first-child{border-left:0;padding-left:0}
.facts-strip dt{font:600 12.5px/1.2 var(--f-body);color:var(--band-ink-3);margin-bottom:6px}
.facts-strip dd{margin:0;font:700 16px/1.3 var(--f-mono);color:var(--band-ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.facts-strip dd small{display:block;font:600 12px/1.35 var(--f-mono);color:var(--band-ink-3);margin-top:3px}
.band-tide .facts-strip + .jump{margin-top:16px}
@media (max-width:700px){.facts-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.facts-strip > div{padding:11px 12px}.facts-strip > div:nth-child(odd){border-left:0;padding-left:0}.facts-strip > div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16)}}

/* =====================================================
   BATCH 1: search, status, studies, datasheet, questions,
   byline, info pages, share, calendar, print
   ===================================================== */
.b-animal{color:var(--neutral)}.b-fix{color:var(--danger)}.b-new{color:var(--accent)}

/* header search */
.search-btn{display:inline-flex;align-items:center;gap:8px;align-self:center;margin-left:10px;padding:0 10px 0 12px;height:38px;border-radius:9px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:var(--head-ink);font:650 14.5px var(--f-body);cursor:pointer;white-space:nowrap}
.search-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}
.search-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.search-btn kbd{font:600 12px var(--f-mono);padding:1px 6px;border-radius:5px;border:1px solid rgba(255,255,255,.35);color:var(--head-ink-2)}
@media (max-width:780px){
  .site-head .brand{order:0}
  .search-btn{order:1;margin-left:auto;height:36px}
  .search-btn kbd{display:none}
  .site-head .nav{order:2}
}
.search-dlg{width:min(640px,calc(100% - 32px));max-height:min(620px,calc(100dvh - 48px));margin:min(12vh,96px) auto auto;padding:0;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);color:var(--ink);box-shadow:0 30px 80px -20px rgba(8,19,21,.55);overflow:hidden}
.search-dlg[open]{display:flex;flex-direction:column}
.search-dlg::backdrop{background:rgba(8,19,21,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.s-box{display:flex;flex-direction:column;min-height:0;max-height:inherit}
.s-field{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.s-field svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round}
.s-field input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:600 17px var(--f-body);padding:6px 0}
.s-close{font:600 12px var(--f-mono);padding:4px 8px;border-radius:6px;border:1px solid var(--line-2);background:transparent;color:var(--ink-3);cursor:pointer}
.s-hint{padding:10px 16px 4px;font:600 12.5px var(--f-body);color:var(--ink-3)}
#sList{list-style:none;margin:0;padding:4px 8px 10px;overflow-y:auto;min-height:0}
#sList li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px;border-radius:9px;cursor:pointer}
#sList li[aria-selected="true"]{background:var(--accent-soft)}
#sList li:hover{background:var(--surface-2)}
#sList li[aria-selected="true"]:hover{background:var(--accent-soft)}
.s-main{display:grid;gap:2px;min-width:0}
.s-main b{font-weight:700;font-size:15.5px}
.s-main small{font-size:13.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-kind{flex:none;font:600 12.5px var(--f-body);color:var(--ink-3)}

/* jump links scroll sideways on phones instead of stacking */
@media (max-width:700px){
  .band-tide .jump{flex-wrap:nowrap;overflow-x:auto;margin-right:calc(-1 * clamp(16px,4vw,32px));padding-right:16px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .band-tide .jump::-webkit-scrollbar{display:none}
}

/* status */
.status{display:grid;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--card-shadow);overflow:hidden}
.status > div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;padding:14px 18px;border-top:1px solid var(--line)}
.status > div:first-child{border-top:0}
.status dt{font:600 13px/1.35 var(--f-body);color:var(--ink-3);padding-top:2px}
.status dt a{font-weight:700;font-size:14.5px}
.status dd{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;font-size:15px;line-height:1.5}
.status dd span:not(.sport){flex:1 1 260px}
@media (max-width:640px){.status > div{grid-template-columns:minmax(0,1fr);gap:4px}}
.sport{display:inline-flex;align-items:center;gap:6px;flex:none;padding:3px 10px 3px 8px;border-radius:999px;font:700 12.5px/1.3 var(--f-body);white-space:nowrap}
.sport::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.sport-danger{background:var(--danger-soft);color:var(--danger)}
.sport-warn{background:var(--warn-soft);color:var(--warn)}
.sport-info{background:var(--info-soft);color:var(--info)}
.sport-ok{background:var(--ok-soft);color:var(--ok)}
.spec.display .sport{background:transparent;padding:0}
.spec-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));border-top:1px solid var(--line)}
.spec-pair .spec-row{border-top:0}
.spec-pair .spec-row + .spec-row{border-left:1px solid var(--line)}
.spec.display .spec-pair,.spec.display .spec-pair .spec-row + .spec-row{border-color:var(--disp-line)}
.spec.display .sport-danger{color:#F28C82}.spec.display .sport-warn{color:#E2A74E}.spec.display .sport-info{color:#86A9F2}.spec.display .sport-ok{color:#62C48F}

/* human studies */
.studies{list-style:none;display:grid;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--card-shadow);overflow:hidden}
.studies > li{display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;padding:16px 18px;border-top:1px solid var(--line)}
.studies > li:first-child{border-top:0}
.st-meta{display:grid;gap:2px;align-content:start}
.st-meta b{font-size:17px;color:var(--accent)}
.st-meta span{font-size:13px;color:var(--ink-2)}
.st-body{display:grid;gap:6px;min-width:0}
.st-res{font-size:15.5px;line-height:1.5}
.st-sub{display:grid;gap:3px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.st-sub > div{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px}
.st-sub dt{font-weight:650;color:var(--ink-3)}
.st-sub dd{margin:0}
.st-src{font-size:13px;color:var(--ink-3);word-break:break-word}
@media (max-width:560px){.studies > li{grid-template-columns:minmax(0,1fr);gap:6px}.st-meta{display:flex;gap:12px;align-items:baseline}}

/* datasheet */
.ds{border-top:0}
.ds dd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ds dd small{flex-basis:100%;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.ds .seq{overflow-wrap:anywhere;word-break:break-all;font-size:14px;letter-spacing:.02em}
.ds sub,.ds sup{font-size:.72em;line-height:0}
.ds-src{list-style:none;display:grid;gap:5px;font-size:13px;line-height:1.45;color:var(--ink-3)}
.ds-src b{color:var(--ink-2);font-weight:650}
.ds-src .basis{font-size:11px;padding:3px 6px;vertical-align:1px}

/* questions */
.faq{display:grid;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--card-shadow);overflow:hidden}
.faq details{border-top:1px solid var(--line)}
.faq details:first-child{border-top:0}
.faq summary{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:15px 18px;cursor:pointer;font-weight:700;font-size:15.5px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq summary:hover{color:var(--accent)}
.faq details p{padding:0 18px 16px;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:72ch}

/* byline */
.byline{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;padding-top:16px;border-top:1px solid var(--line)}
.byline p{display:flex;flex-wrap:wrap;gap:4px 0;font:600 14px var(--f-body);color:var(--ink-2)}
.byline p span + span::before{content:"";display:inline-block;width:1px;height:13px;background:var(--line-2);margin:0 12px;vertical-align:-1px}
.g-main > .byline{margin-top:4px}

/* info pages */
.doc{max-width:780px;display:grid;gap:clamp(26px,3.4vw,38px);grid-template-columns:minmax(0,1fr);padding-block:clamp(26px,3.6vw,40px) 64px}
.doc .prose p{font-size:16.5px}
.doc .checklist li{font-size:16px;line-height:1.55}
.doc-nav{display:flex;flex-wrap:wrap;gap:8px;padding-top:18px;border-top:1px solid var(--line)}
.doc-nav a,.doc-nav span{font:650 14px/1.2 var(--f-body);padding:8px 13px;border-radius:999px;border:1px solid var(--line-2);text-decoration:none;color:var(--ink-2)}
.doc-nav a:hover{border-color:var(--ink-3);color:var(--ink)}
.doc-nav span{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.log{list-style:none;display:grid;gap:0}
.log > li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:22px 0;border-top:1px solid var(--line)}
.log > li:first-child{border-top:0;padding-top:4px}
.log time{font:700 14px/1.4 var(--f-mono);color:var(--accent)}
.log h2{font-size:21px;margin-bottom:12px}
.log ul{list-style:none;display:grid;gap:10px}
.log ul li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:start}
.log ul li .basis{justify-self:start;margin-top:2px}
.log ul li p{font-size:15.5px;line-height:1.55}
@media (max-width:640px){.log > li{grid-template-columns:minmax(0,1fr);gap:6px}.log ul li{grid-template-columns:minmax(0,1fr);gap:4px}}

/* calculator share and planner calendar */
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:10px}
.share-row .fine{flex:1 1 220px}
.share-url{min-height:38px!important;font:600 13px var(--f-mono)!important}
.plan-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.plan-actions .btn[disabled]{opacity:.5;cursor:not-allowed}

/* print: light, no navigation, every answer open */
@media print{
  @page{margin:14mm}
  :root:root:not([data-theme="x"]){
    color-scheme:light;
    --bg:#fff; --surface:#fff; --surface-2:#F1F5F3; --surface-3:#E4EAE7;
    --ink:#0E1A1C; --ink-2:#3E5254; --ink-3:#5E7274; --line:#CFD9D5; --line-2:#AFBEB9;
    --accent:#0B5F63; --accent-2:#08494C; --accent-soft:#D3E9E7; --on-accent:#fff;
    --ok:#1D6A43; --ok-soft:#DBEFE3; --info:#2854A6; --info-soft:#E0E8F7; --warn:#8A5200; --warn-soft:#F6EAD4; --danger:#A2231B; --danger-soft:#F8E0DC; --neutral:#4F5D66; --neutral-soft:#E4E9EC;
    --disp-bg:#fff; --disp-bg-2:#F1F5F3; --disp-line:#CFD9D5; --disp-line-2:#AFBEB9; --disp-ink:#0E1A1C; --disp-ink-2:#3E5254; --disp-accent:#0B5F63; --disp-liquid:rgba(11,95,99,.22);
    --band-top:#fff; --band-mid:#fff; --band-bot:#fff; --band-glow:transparent; --band-ink:#0E1A1C; --band-ink-2:#3E5254; --band-ink-3:#5E7274; --band-hl:#0B5F63; --band-tick:#AFBEB9; --band-tick-2:#CFD9D5; --band-chip-line:#AFBEB9; --band-tag-bg:#F1F5F3; --band-tag-ink:#3E5254;
    --mist-band:#fff; --white-band:#fff; --dark-band:#fff; --dark-band-ink:#0E1A1C; --dark-band-ink-2:#3E5254; --dark-band-ink-3:#5E7274;
    --foot-bg:#fff; --foot-ink:#0E1A1C; --foot-ink-2:#3E5254; --foot-ink-3:#5E7274;
    --card-shadow:none; --shadow:none;
  }
  body{font-size:11pt;background:#fff}
  .site-head,.search-btn,.search-dlg,.jump,.ticks,.btn,.spec-cta,.side-card,.foot-nav,.doc-nav,#dcSizes,.share-row,.plan-actions,.plan-controls,.tc-toggle,.byline .row{display:none!important}
  .band-tide,.hero,.band-mist,.band-white,.band-dark,.site-foot{background:#fff!important}
  .band-tide{border-bottom:1px solid #AFBEB9}
  .facts-strip,.facts-strip > div{border-color:#CFD9D5!important}
  .display,.spec.display{box-shadow:none!important;border:1px solid #AFBEB9!important}
  .c-grid,.recon-grid,.calc{grid-template-columns:minmax(0,1fr)!important}
  .c-side,.recon-grid .toc{position:static!important}
  .tbl-wrap{overflow:visible!important}
  .card,.use-card,.se-row,.studies > li,.status > div,.faq details,.variant,.tip,.label-card{break-inside:avoid}
  .sec > h2,h2,h3{break-after:avoid}
  .faq summary::after{display:none}
  a{color:inherit;text-decoration:none}
  #app{padding-bottom:0}
  .site-foot .foot-grid{padding-top:12px}
}

/* =====================================================
   BATCH 2: compare, stack check, levels chart, guides
   ===================================================== */
.b-mech{color:var(--neutral)}
.tool{display:grid;gap:clamp(22px,3vw,32px);grid-template-columns:minmax(0,1fr);padding-block:clamp(24px,3.4vw,36px) 64px}
.band-tide .head-tools{margin-top:6px}
.band-tide .head-tools .btn-ghost{color:var(--band-ink);border-color:var(--band-chip-line)}
.band-tide .head-tools .btn-ghost:hover{border-color:var(--band-ink)}
.hero-new{margin-top:14px;font-size:15px;color:var(--band-ink-2)}
.hero-new a{color:var(--band-hl);font-weight:700}

/* compare */
.cmp-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:12px 16px;align-items:end}
.cmp-actions{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:860px){.cmp-pick{grid-template-columns:minmax(0,1fr)}}
.empty-tool{display:grid;gap:12px;padding:22px;border:1px dashed var(--line-2);border-radius:var(--r-l);background:var(--surface)}
.empty-tool .chip{text-decoration:none}
.cmp{width:100%;border-collapse:separate;border-spacing:0;min-width:620px;table-layout:fixed}
.cmp th,.cmp td{vertical-align:top;text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.45}
.cmp thead th{font:700 16px/1.25 var(--f-display);background:var(--surface-2)}
.cmp thead th a{color:var(--ink);text-decoration:none}
.cmp thead th a:hover{color:var(--accent)}
.cmp thead th small,.cmp td small{display:block;font:500 12.5px/1.4 var(--f-body);color:var(--ink-3);margin-top:3px}
.cmp tbody th{font:600 13px/1.35 var(--f-body);color:var(--ink-3);width:150px;background:var(--surface)}
.cmp th:first-child{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:1px 0 0 var(--line)}
.cmp thead th:first-child{background:var(--surface-2)}
.cmp td{background:var(--surface)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp-warn{display:grid;gap:4px;padding-left:16px;margin:0}
.cmp-warn li{font-size:13.5px}
.cmp-links td{padding-block:10px}
@media (max-width:640px){.cmp tbody th{width:110px}}

/* stack check */
.stack-pick{display:grid;gap:14px}
.stack-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:36px}
.stack-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 6px 5px 12px;border-radius:999px;background:var(--accent-soft);color:var(--ink);font:650 14px var(--f-body)}
.stack-chip button{width:24px;height:24px;border-radius:50%;border:0;background:transparent;color:var(--ink-2);font:700 16px/1 var(--f-body);cursor:pointer}
.stack-chip button:hover{background:rgba(0,0,0,.08);color:var(--ink)}
.stack-pick .field{max-width:420px}
.stack-out{display:grid;gap:clamp(26px,3.4vw,38px);grid-template-columns:minmax(0,1fr)}
.flags{display:grid;gap:10px}
.flag{padding:14px 16px;border-radius:var(--r-m);border-left:4px solid var(--neutral);background:var(--surface);box-shadow:var(--card-shadow);display:grid;gap:6px}
.flag-warn{border-left-color:var(--danger)}
.flag-info{border-left-color:var(--info)}
.flag-ok{border-left-color:var(--ok)}
.flag-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;align-items:center}
.flag-head b{font-size:15.5px}
.flag p{font-size:15px;line-height:1.5}
.track-list{list-style:none;display:grid;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);overflow:hidden}
.track-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.track-list li:first-child{border-top:0}
.track-list .tick{width:16px;height:16px;margin-top:3px;border:1.5px solid var(--accent);border-radius:4px}
.track-list p{font-size:15px;line-height:1.45}
.track-list small{font-size:12.5px;color:var(--ink-3)}

/* start-here and tool cards */
.start-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){.start-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.start-grid{grid-template-columns:minmax(0,1fr)}}
.start-card{display:grid;gap:6px;align-content:start;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--card-shadow);text-decoration:none;color:var(--ink)}
.start-card h3{font-size:17px}
.start-card p{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.start-card .link-arrow{color:var(--accent);font-size:14px}
.start-card:hover{border-color:var(--accent);color:var(--ink);box-shadow:var(--card-shadow-hover)}

/* levels over time */
.lv-chart{border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);padding:10px 8px 4px}
.lv-chart svg{display:block;width:100%;height:auto}
.lv-grid{stroke:var(--line);stroke-width:1}
.lv-y,.lv-x{font:600 11px var(--f-mono);fill:var(--ink-3)}
.lv-y{text-anchor:end}.lv-x{text-anchor:middle}
.lv-area{fill:var(--accent);opacity:.12}
.lv-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.lv-dot{fill:var(--surface);stroke:var(--accent);stroke-width:1.6}
.lv-dose{stroke:var(--ink-3);stroke-width:1.2}
.lv-stop{stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:4 4}
.lv-note{font:600 11.5px var(--f-body);fill:var(--ink-2)}
.lv-sum{font-size:15px;line-height:1.55}
.lv-table summary{cursor:pointer;font-weight:650;font-size:14.5px;color:var(--accent)}
.lv-table[open] summary{margin-bottom:10px}
#lvMode{justify-self:start}

/* injection site map */
.site-fig{margin:0;display:grid;gap:8px;padding:14px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.sitemap{display:block;width:100%;height:auto;max-height:430px}
.sitemap .bd *{fill:var(--surface-2);stroke:var(--ink-3);stroke-width:1.6;stroke-linejoin:round}
.sitemap .zone rect{fill:var(--accent);fill-opacity:.22;stroke:var(--accent);stroke-width:1.6}
.sitemap .clear{fill:var(--surface);stroke:var(--danger);stroke-width:1.5;stroke-dasharray:4 3}
.sitemap .navel{fill:var(--ink-3)}
.sitemap .lbl{font:700 14px var(--f-display);fill:var(--ink)}
.sitemap .sm{font:600 11.5px var(--f-body);fill:var(--ink-2)}
.sitemap .inset{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.4}
.sitemap .quad{stroke:var(--accent);stroke-width:1;stroke-dasharray:3 3;opacity:.7}
.sitemap .spot{fill:var(--accent);stroke:var(--surface);stroke-width:1.5}
.sitemap .spot-n{font:700 10.5px var(--f-mono);fill:var(--on-accent)}

/* glossary */
.gloss{display:grid;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);overflow:hidden}
.gloss > div{display:grid;grid-template-columns:210px minmax(0,1fr);gap:16px;padding:13px 18px;border-top:1px solid var(--line);scroll-margin-top:90px}
.gloss > div:first-child{border-top:0}
.gloss dt{font-weight:700;font-size:15px}
.gloss dd{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
@media (max-width:640px){.gloss > div{grid-template-columns:minmax(0,1fr);gap:3px}}

/* spec sheet tool links */
.spec-links{display:flex;gap:16px;justify-content:center;padding:0 16px 14px;font:650 14px var(--f-body)}
.spec.display .spec-links a{color:var(--disp-accent);text-decoration:none}
.spec.display .spec-links a:hover{text-decoration:underline}

/* footer link groups */
.foot-label{font:600 12.5px var(--f-mono);color:var(--foot-ink-3);min-width:56px}
.site-foot .foot-nav{align-items:baseline}

@media print{
  .cmp-pick,.stack-pick,.head-tools,.spec-links,#lvMode,.lv-table summary,.hero-new{display:none!important}
  .lv-table:not([open]){display:none}
  .cmp th:first-child{position:static}
  .flag,.track-list li,.start-card,.gloss > div{break-inside:avoid}
}

/* =====================================================
   BATCH 3: dose log
   ===================================================== */
.dlog{display:grid;gap:clamp(22px,3vw,32px);grid-template-columns:minmax(0,1fr);padding-block:clamp(24px,3.4vw,36px) 64px}
.dl-stats{background:var(--surface)}
.dl-stats b{font-size:16px;line-height:1.25}
.dl-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(18px,2.6vw,28px);align-items:start}
@media (max-width:900px){.dl-grid{grid-template-columns:minmax(0,1fr)}}
.dl-form{display:grid;gap:14px;align-content:start;grid-template-columns:minmax(0,1fr)}
.dl-form h2,.dl-sechead h2{font-size:21px}
.dl-form .flabel small{margin-left:4px}
h2[tabindex="-1"]:focus{outline:none}
#lgDose,#lgVials,#lgDosesT{scroll-margin-top:84px}
.dl-err{font-size:14px;font-weight:650;color:var(--danger)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-ghost[disabled]:hover{border-color:var(--line-2)}
.seg button[disabled]{opacity:.45;cursor:not-allowed}

/* injection site picker: real radio buttons, drawn as tiles */
.dl-sitef{border:0;padding:0;margin:0;min-width:0}
.dl-sitef legend{padding:0;margin-bottom:7px}
.dl-sites{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dl-site{position:relative;display:block;cursor:pointer}
.dl-site input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.dl-site span{display:grid;gap:2px;align-content:center;min-height:54px;padding:8px 12px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);transition:border-color .15s,background .15s}
.dl-site b{font-size:14.5px;font-weight:700;line-height:1.25}
.dl-site small{font:600 12px/1.3 var(--f-mono);color:var(--ink-3)}
.dl-site:hover span{border-color:var(--ink-3)}
.dl-site input:checked + span{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.dl-site input:checked + span small{color:var(--ink-2)}
.dl-site input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.dl-site-none{grid-column:1/-1}
.dl-site-none span{min-height:0}
@media (max-width:340px){.dl-sites{grid-template-columns:minmax(0,1fr)}}

/* confirm boxes */
.dl-ask{display:grid;gap:10px;padding:12px 14px;border-radius:var(--r-m);background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent)}
.dl-ask p{font-size:14.5px;line-height:1.45;font-weight:650}
.btn-danger{background:var(--danger);color:var(--surface)}
.btn-danger:hover{background:color-mix(in srgb,var(--danger) 85%,var(--ink));color:var(--surface)}

/* vials */
.dl-vials{display:grid;gap:14px;align-content:start;grid-template-columns:minmax(0,1fr)}
.dl-sechead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.dl-vlist{display:grid;gap:12px}
.dl-vial{display:grid;gap:8px;padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:var(--r-m);background:var(--surface);box-shadow:var(--card-shadow)}
.dl-vial.tone-warn{border-left-color:var(--warn)}
.dl-vial.tone-danger{border-left-color:var(--danger)}
.dl-vhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px}
.dl-vhead h3{font-size:17px}
.dl-vhead .mono{font-size:13.5px;color:var(--ink-2)}
.dl-when{font-weight:700;font-size:15px;color:var(--ok)}
.tone-warn .dl-when{color:var(--warn)}
.tone-danger .dl-when{color:var(--danger)}
.dl-bar{height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.dl-bar i{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.dl-done summary{cursor:pointer;font-weight:650;font-size:14.5px;color:var(--accent)}
.dl-done[open] summary{margin-bottom:10px}
.dl-done ul{list-style:none;display:grid;gap:8px}
.dl-done li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;font-size:14.5px}
.dl-done li span{flex:1 1 220px}

/* recent doses */
.dl-table td small{display:block;margin-top:2px;font:600 12.5px/1.35 var(--f-body);color:var(--ink-3);white-space:normal}
.dl-table td.d small{font-family:var(--f-mono)}
.dl-table .x{width:1%;text-align:right}
.dl-table td.w{white-space:nowrap}
@media (max-width:600px){
  .dl-table thead{display:none}
  .dl-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"c d" "w d" "s x";gap:2px 14px;padding:11px 12px;border-bottom:1px solid var(--line)}
  .dl-table tbody tr:last-child{border-bottom:0}
  .dl-table td{padding:0;border:0}
  .dl-table td.c{grid-area:c;font-weight:700}
  .dl-table td.d{grid-area:d;text-align:right}
  .dl-table td.w{grid-area:w;font-size:13.5px;color:var(--ink-2)}
  .dl-table td.s{grid-area:s;font-size:13.5px;color:var(--ink-2)}
  .dl-table td.x{grid-area:x;width:auto;align-self:end}
}

/* toast: result of the last action, with undo */
.dl-toast{position:fixed;left:50%;bottom:20px;z-index:60;display:flex;align-items:center;gap:8px 16px;max-width:min(600px,calc(100vw - 32px));padding:12px 18px;border-radius:12px;background:var(--disp-bg);color:var(--disp-ink);border:1px solid var(--disp-line-2);box-shadow:0 12px 32px rgba(0,0,0,.28);font:650 14.5px/1.4 var(--f-body);transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.dl-toast.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.dl-toast .linkbtn{color:var(--disp-accent);flex:none}
@media (prefers-reduced-motion:reduce){.dl-toast{transition:none}}

@media print{
  .dl-form,.dl-ask,.dl-toast,#lvAddBtn,.dl-vial .row,.dl-table .x,.dl-data .row,.dlog .linkbtn{display:none!important}
  .dl-grid{grid-template-columns:minmax(0,1fr)}
  .dl-vial,.dl-table tr{break-inside:avoid}
}