/* ============================================================
   BloodTestEasy design system
   Chrome/ink tokens + fixed status palette from the validated
   dataviz reference; blue = interactive accent, status colors
   are reserved for severity and never used decoratively.
   ============================================================ */
:root{
  --page:#f9f9f7; --surface:#fcfcfb; --ink:#0b0b0b; --ink-2:#52514e;
  --muted:#898781; --hair:#e1e0d9; --border:rgba(11,11,11,.10);
  --accent:#256abf; --accent-hi:#1c5cab; --accent-ink:#ffffff;
  --brand-red:#c22f2e;
  --sev0:#0ca30c; --sev1:#fab219; --sev2:#ec835a; --sev3:#d03b3b; --sev4:#d03b3b;
  --sev0-t:rgba(12,163,12,.11); --sev1-t:rgba(250,178,25,.14); --sev2-t:rgba(236,131,90,.14);
  --sev3-t:rgba(208,59,59,.12); --sev4-t:rgba(208,59,59,.16);
  --sev4-ring:#8f1f1f;
  --radius:14px; --radius-s:8px;
  --shadow:0 1px 2px rgba(11,11,11,.04),0 4px 14px rgba(11,11,11,.05);
}
@media (prefers-color-scheme: dark){
  :root{
    --page:#0d0d0d; --surface:#1a1a19; --ink:#ffffff; --ink-2:#c3c2b7;
    --muted:#898781; --hair:#2c2c2a; --border:rgba(255,255,255,.10);
    --accent:#3987e5; --accent-hi:#5598e7;
    --sev0-t:rgba(12,163,12,.20); --sev1-t:rgba(250,178,25,.18); --sev2-t:rgba(236,131,90,.18);
    --sev3-t:rgba(208,59,59,.22); --sev4-t:rgba(208,59,59,.28);
    --shadow:none;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);
  font:16px/1.65 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;}
h1,h2,h3{line-height:1.25;letter-spacing:-.015em}
h1{font-size:clamp(1.65rem,4vw,2.3rem);font-weight:800;margin:.4em 0 .5em}
h2{font-size:clamp(1.2rem,2.6vw,1.5rem);font-weight:700;margin:1.8em 0 .6em}
h3{font-size:1.05rem;font-weight:700;margin:1.4em 0 .4em}
p{margin:.55em 0}
a{color:var(--accent)}
a:hover{color:var(--accent-hi)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:.5rem 1rem;z-index:99;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
.wrap{max-width:880px;margin:0 auto;padding:0 1.15rem 2rem}

/* ---------- header ---------- */
.site-head{background:var(--surface);border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:20}
.head-inner{max-width:880px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:.65rem 1.15rem}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink);font-weight:800;font-size:1.12rem;letter-spacing:-.02em}
.brand em{font-style:normal;color:var(--brand-red)}
.brand-mark{width:26px;height:26px;fill:var(--brand-red)}
.brand-mark .pulse{stroke:var(--surface)}
.head-nav a{font-weight:600;text-decoration:none;padding:.45rem .9rem;border-radius:999px;background:var(--accent);color:var(--accent-ink)}
.head-nav a:hover{background:var(--accent-hi);color:#fff}

/* ---------- generic blocks ---------- */
.card,.check-other{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.25rem;box-shadow:var(--shadow)}
.lede{font-size:1.08rem;color:var(--ink-2);max-width:60ch}
.crumbs{font-size:.83rem;color:var(--muted);margin:1rem 0 .2rem;display:flex;gap:.45rem;flex-wrap:wrap}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
ul.cols{columns:2 260px;column-gap:2.2rem;padding-left:1.2rem;margin:.4em 0}
ul.cols li{margin:.22em 0;break-inside:avoid}
.table-scroll{overflow-x:auto}

/* ---------- severity chips & icons ---------- */
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .85rem;border-radius:999px;
  font-weight:600;font-size:.95rem;border:1px solid var(--border)}
.chip em{font-style:normal;color:var(--ink-2);font-weight:600}
.chip.sev0{background:var(--sev0-t)} .chip.sev1{background:var(--sev1-t)}
.chip.sev2{background:var(--sev2-t)} .chip.sev3{background:var(--sev3-t)}
.chip.sev4{background:var(--sev4-t);border-color:var(--sev4-ring)}
.sicon{width:17px;height:17px;flex:none}
.sicon.sev0{fill:var(--sev0)} .sicon.sev1{fill:var(--sev1)} .sicon.sev2{fill:var(--sev2)}
.sicon.sev3{fill:var(--sev3)} .sicon.sev4{fill:var(--sev4)}
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:.5rem;vertical-align:baseline}
.dot.sev0{background:var(--sev0)} .dot.sev1{background:var(--sev1)} .dot.sev2{background:var(--sev2)}
.dot.sev3{background:var(--sev3)} .dot.sev4{background:var(--sev4);box-shadow:0 0 0 2px var(--sev4-ring) inset}

/* ---------- value page ---------- */
.value-hero{background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--muted);
  border-radius:var(--radius);padding:1.3rem 1.4rem;margin-top:.8rem;box-shadow:var(--shadow)}
.value-hero.sev0{border-left-color:var(--sev0)} .value-hero.sev1{border-left-color:var(--sev1)}
.value-hero.sev2{border-left-color:var(--sev2)} .value-hero.sev3{border-left-color:var(--sev3)}
.value-hero.sev4{border-left-color:var(--sev4)}
.value-hero h1{margin:.1em 0 .15em}
.hero-val{color:var(--accent)}
.hero-unit{font-weight:600;font-size:.6em;color:var(--ink-2)}
.si-line{color:var(--ink-2);margin:.1em 0 .8em;font-size:.95rem}
.verdicts{display:flex;gap:.6rem;flex-wrap:wrap;margin:.4rem 0}
.urgency-banner{display:flex;gap:.7rem;align-items:flex-start;background:var(--sev4-t);
  border:1px solid var(--sev4-ring);border-radius:var(--radius-s);padding:.8rem 1rem;margin-top:.9rem}
.urgency-banner .sicon{width:22px;height:22px;margin-top:.15rem}
.urgency-banner p{margin:0;font-weight:600}
.urgency-note{color:var(--ink-2);font-weight:600;margin-top:.7rem}

.gauge-block{margin:1.6rem 0 0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:1rem 1.1rem .7rem;box-shadow:var(--shadow)}
.gauge{width:100%;height:auto;display:block}
.g-band{opacity:.32}
.g-band.sev0{fill:var(--sev0)} .g-band.sev1{fill:var(--sev1)} .g-band.sev2{fill:var(--sev2)}
.g-band.sev3{fill:var(--sev3)} .g-band.sev4{fill:var(--sev4)}
.g-band.g-active{opacity:1;stroke:var(--ink);stroke-width:1.2}
.g-tick{fill:var(--muted);font-size:11px;font-family:inherit}
.g-grouplabel{fill:var(--ink-2);font-size:12px;font-weight:600;font-family:inherit}
.g-stem{stroke:var(--ink);stroke-width:1.6}
.g-pointer{fill:var(--ink)}
.g-bubble rect{fill:var(--ink)}
.g-bubble text{fill:var(--page);font-weight:700;font-size:13px;font-family:inherit}
.band-legend{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;padding:.6rem .2rem 0;margin:0;
  font-size:.83rem;color:var(--ink-2);border-top:1px solid var(--hair)}
.band-legend li{display:flex;align-items:center}

.facts{margin-top:1.4rem}
.facts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.8rem;margin:0}
.facts-grid>div{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);padding:.75rem .9rem}
.facts-grid dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.facts-grid dd{margin:.15rem 0 0;font-weight:600}

.context-note{background:var(--surface);border:1px solid var(--hair);border-left:4px solid var(--accent);
  border-radius:var(--radius-s);padding:.7rem 1rem;margin:1.3rem 0;color:var(--ink-2);font-size:.95rem}
.band-detail{margin-top:1.6rem}
.band-summary{font-size:1.08rem;font-weight:600}
.ref-note{color:var(--muted);font-size:.88rem}

.neighbors{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin:1.8rem 0;padding:.9rem 1rem;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.nb-label{font-size:.85rem;color:var(--muted);margin-right:.3rem;font-weight:600}
.nb{display:inline-block;min-width:2.9em;text-align:center;padding:.34rem .45rem;border-radius:8px;
  text-decoration:none;font-weight:600;font-size:.92rem;color:var(--ink);border:1px solid transparent}
a.nb:hover{border-color:var(--accent)}
.nb.sev0{background:var(--sev0-t)} .nb.sev1{background:var(--sev1-t)} .nb.sev2{background:var(--sev2-t)}
.nb.sev3{background:var(--sev3-t)} .nb.sev4{background:var(--sev4-t)}
.nb-current{outline:2px solid var(--ink);font-weight:800}

.faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);
  margin:.5rem 0;padding:.15rem .95rem}
.faq summary{cursor:pointer;font-weight:600;padding:.55rem 0}
.faq details[open] summary{border-bottom:1px solid var(--hair);margin-bottom:.4rem}
.faq p{color:var(--ink-2)}

.sources ul{padding-left:1.2rem}
.sources li{margin:.3em 0}
.micro-disclaimer{font-size:.85rem;color:var(--muted);border-top:1px solid var(--hair);padding-top:.8rem;margin-top:1rem}

.marker-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0}
.marker-chips a{display:inline-block;padding:.45rem .95rem;background:var(--surface);border:1px solid var(--border);
  border-radius:999px;text-decoration:none;font-weight:600;color:var(--ink)}
.marker-chips a:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- forms ---------- */
.value-check{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap;margin:.8rem 0}
.value-check label{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:.92rem;color:var(--ink-2)}
input,select{padding:.6rem .7rem;border:1.5px solid var(--hair);border-radius:9px;font:inherit;
  background:var(--surface);color:var(--ink);min-width:0}
input:focus,select:focus{border-color:var(--accent);outline:none}
input{width:130px}
button{padding:.62rem 1.25rem;background:var(--accent);color:var(--accent-ink);border:0;border-radius:9px;
  font:inherit;font-weight:700;cursor:pointer}
button:hover{background:var(--accent-hi)}

/* ---------- hub ---------- */
.hub-hero{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.3rem 1.4rem;margin-top:.8rem;box-shadow:var(--shadow)}
.hub-hero h1{margin:.1em 0 .3em}
.aka{font-size:.55em;font-weight:600;color:var(--muted)}
.range-who{margin-bottom:.1em}
.range-table{border-collapse:collapse;width:100%;max-width:560px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-s);overflow:hidden}
.range-table th,.range-table td{text-align:left;padding:.5rem .8rem;border-bottom:1px solid var(--hair);
  font-variant-numeric:tabular-nums}
.range-table th{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.range-table tr:last-child td{border-bottom:0}
.value-cloud{list-style:none;padding:.6rem 0 0;display:flex;flex-wrap:wrap;gap:.35rem;max-height:340px;overflow-y:auto}
.value-cloud a{display:inline-block;padding:.2rem .5rem;border:1px solid var(--hair);border-radius:6px;
  text-decoration:none;font-size:.85rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.value-cloud a:hover{border-color:var(--accent);color:var(--accent)}
.browse-values summary{cursor:pointer;font-weight:600;color:var(--accent)}
.si-note{color:var(--muted);font-size:.9rem}

/* ---------- home ---------- */
.home-hero{background:linear-gradient(180deg,rgba(37,106,191,.07),rgba(37,106,191,0) 75%);
  border-bottom:1px solid var(--hair);padding:2.6rem 0 2.2rem;text-align:center}
.home-hero h1{font-size:clamp(2rem,5.5vw,3rem);margin:.1em 0 .3em}
.home-hero h1 em{font-style:normal;color:var(--accent)}
.home-hero .lede{margin:0 auto 1.4rem}
.hero-checker{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;max-width:560px;margin:0 auto}
.hero-checker select{flex:2 1 200px}
.hero-checker input{flex:1 1 110px;width:auto}
.hero-note{color:var(--muted);font-size:.85rem;margin-top:.9rem}
.marker-cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.marker-cards a{display:block;padding:.95rem 1rem;background:var(--surface);border:1.5px solid var(--accent);
  border-radius:var(--radius-s);text-decoration:none;color:var(--ink);box-shadow:var(--shadow)}
.marker-cards a:hover{background:var(--accent);color:#fff}
.marker-cards a:hover .unit{color:rgba(255,255,255,.75)}
.marker-cards strong{display:block;font-size:1.02rem}
.marker-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:.5rem}
.marker-grid a{display:block;padding:.6rem .8rem;border:1px solid var(--border);background:var(--surface);
  border-radius:var(--radius-s);text-decoration:none;color:var(--ink);font-weight:600}
.marker-grid a:hover{border-color:var(--accent);color:var(--accent)}
.unit{color:var(--muted);font-size:.8em;font-weight:400}
.steps{counter-reset:step;list-style:none;padding:0;display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.steps li{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);
  padding:1rem 1.1rem;counter-increment:step;position:relative}
.steps li::before{content:counter(step);display:inline-flex;width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:#fff;font-weight:700;align-items:center;justify-content:center;
  margin-bottom:.5rem;font-size:.9rem}
.steps strong{display:block}
.trust{color:var(--ink-2)}

/* ---------- eval ---------- */
.eval-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8rem;margin-top:1.2rem}
.eval-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);padding:.9rem 1rem;margin:0}
.eval-name{font-weight:700;text-decoration:none;color:var(--ink)}
.eval-name:hover{color:var(--accent)}
.eval-row{display:flex;gap:.5rem;margin-top:.55rem}
.eval-row input{flex:1;width:auto}
.eval-row button{padding:.55rem .9rem}

/* ---------- prose (static pages) ---------- */
.prose{max-width:720px}
.prose h1{margin-top:1.2rem}
.prose h2{margin-top:1.6em}
.prose li{margin:.3em 0}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--hair);margin-top:3rem;background:var(--surface)}
.foot-inner{max-width:880px;margin:0 auto;padding:1.6rem 1.15rem}
.foot-disclaimer{color:var(--muted);font-size:.86rem;max-width:70ch}
.foot-nav{display:flex;gap:1.2rem;flex-wrap:wrap;margin:.9rem 0}
.foot-nav a{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:.9rem}
.foot-nav a:hover{color:var(--accent)}
.foot-copy{color:var(--muted);font-size:.82rem}

/* ---------- print ---------- */
@media print{
  .site-head,.site-foot,.check-other,.neighbors,.head-nav,.hero-checker,.value-check{display:none!important}
  body{background:#fff;color:#000}
  .value-hero,.gauge-block,.facts-grid>div{border-color:#999;box-shadow:none}
}
@media (max-width:560px){
  .head-inner{padding:.55rem .9rem}
  .value-hero,.hub-hero{padding:1rem 1.05rem}
  ul.cols{columns:1}
}
.hub-img{width:100%;max-height:230px;object-fit:cover;border-radius:var(--radius-s);margin-bottom:1rem}
.home-hero-img{width:100%;max-width:560px;max-height:280px;object-fit:cover;border-radius:var(--radius);margin:1.2rem auto 0;display:block;box-shadow:var(--shadow)}