/* ==========================================================================
   Reconstitute, Peptide Calculator
   Design system: lab-precision meets modern SaaS.
   Display: Fraunces (serif) · Body: Plus Jakarta Sans · Data: IBM Plex Mono
   ========================================================================== */

:root{
  --bg:#F2F6F5;
  --surface:#FFFFFF;
  --surface-2:#FBFDFD;
  --ink:#0B2224;
  --ink-soft:#54706F;
  --ink-faint:#54706F;
  --primary:#0E7C7B;
  --primary-dark:#0A5F5E;
  --primary-light:#E4F3F2;
  --primary-soft:#BFE4E2;
  --amber:#C97C1C;
  --amber-light:#FBF0DC;
  --amber-soft:#F6D9B8;
  --danger:#C1443A;
  --danger-light:#FBE9E7;
  --success:#2E8B57;
  --success-light:#E4F3EA;
  --line:#DCE6E6;
  --line-strong:#B9CBCB;
  --ink-hairline:rgba(11,34,36,0.14);
  --ink-hairline-strong:rgba(11,34,36,0.3);
  --topbar-bg:rgba(242,246,245,0.9);
  --shadow-1:0 1px 2px rgba(11,34,36,0.06);
  --shadow-2:0 18px 40px -24px rgba(11,34,36,0.35);
  --shadow-3:0 30px 70px -30px rgba(11,34,36,0.4);
  --radius-sm:8px;
  --radius:14px;
  --radius-lg:20px;
  --font-display:Georgia, 'Times New Roman', serif;
  --font-body:system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:ui-monospace, 'SFMono-Regular', Consolas, monospace;
  color-scheme: light;
}

html[data-theme="dark"]{
  --bg:#0A1B1D;
  --surface:#0F2628;
  --surface-2:#123032;
  --ink:#EAF4F3;
  --ink-soft:#9FBAB8;
  --ink-faint:#9FBAB8;
  --primary:#2FBDB9;
  --primary-dark:#1D9C98;
  --primary-light:rgba(47,189,185,0.14);
  --primary-soft:#1F5250;
  --amber:#E3A542;
  --amber-light:rgba(227,165,66,0.14);
  --amber-soft:#5C4620;
  --danger:#E2685C;
  --danger-light:rgba(226,104,92,0.14);
  --success:#4FBE84;
  --success-light:rgba(79,190,132,0.14);
  --line:rgba(255,255,255,0.09);
  --line-strong:rgba(255,255,255,0.18);
  --ink-hairline:rgba(255,255,255,0.14);
  --ink-hairline-strong:rgba(255,255,255,0.3);
  --topbar-bg:rgba(10,27,29,0.85);
  --shadow-1:0 1px 2px rgba(0,0,0,0.3);
  --shadow-2:0 18px 40px -24px rgba(0,0,0,0.55);
  --shadow-3:0 30px 70px -30px rgba(0,0,0,0.6);
  color-scheme: dark;
}

*, *::before, *::after{ box-sizing:border-box; }

/* The HTML `hidden` attribute must always win over any component's own
   `display` declaration elsewhere in this file. Without `!important`
   here, a same-specificity class rule like `.foo{ display:flex; }`
   silently overrides the browser's default `[hidden]{ display:none; }`
   UA rule whenever it's declared later in the cascade, an easy trap for
   any element that toggles visibility via the hidden attribute rather
   than a dedicated class. */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .2s ease, color .2s ease;
}

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:650; margin:0; color:var(--ink); letter-spacing:-0.01em; }
p{ margin:0; color:var(--ink-soft); }
a{ color:inherit; }
ul{ margin:0; padding:0; }
button{ font-family:inherit; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--primary); color:#fff;
  padding:10px 18px; border-radius:0 0 8px 0;
  font-size:14px; font-weight:600; z-index:200;
}
.skip-link:focus{ left:0; }

:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:4px;
}

.wrap, .topbar-inner, .footer-inner{ max-width:1120px; margin:0 auto; padding-left:24px; padding-right:24px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:14.5px;
  padding:12px 20px; border-radius:999px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  text-decoration:none; white-space:nowrap;
}
.btn svg{ flex-shrink:0; }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:var(--shadow-2); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 20px 40px -18px rgba(14,124,123,0.55); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--primary); color:var(--primary-dark); }
.btn-outline{ background:var(--surface); color:var(--ink); border-color:var(--line-strong); }
.btn-outline:hover{ border-color:var(--primary); color:var(--primary-dark); }
.btn-small{ padding:8px 14px; font-size:13px; border-radius:999px; }
.btn:active{ transform:translateY(0); }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line);
  color:var(--ink-soft); cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
  position:relative;
}
.icon-btn:hover{ color:var(--primary-dark); border-color:var(--primary); }

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:100;
  background:var(--topbar-bg);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:68px; gap:20px;
}
.brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; }
.brand-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:9px;
  background:var(--primary); color:#fff;
}
.brand-name{ font-family:var(--font-display); font-weight:650; font-size:18px; color:var(--ink); }

.topnav{ display:flex; gap:28px; }
.topnav a{
  font-size:14px; font-weight:600; color:var(--ink-soft); text-decoration:none;
  transition:color .15s ease;
}
.topnav a:hover{ color:var(--primary-dark); }

.topbar-actions{ display:flex; align-items:center; gap:10px; }

.theme-icon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transition:opacity .2s ease, transform .2s ease; }
.theme-icon-moon{ opacity:0; transform:scale(.6) rotate(-30deg); }
html[data-theme="dark"] .theme-icon-sun{ opacity:0; transform:scale(.6) rotate(30deg); }
html[data-theme="dark"] .theme-icon-moon{ opacity:1; transform:scale(1) rotate(0); }
.theme-icon-sun{ opacity:1; transform:scale(1) rotate(0); }

/* ---------- Layout shells ---------- */
main{ display:block; }
.section{ max-width:1120px; margin:0 auto; padding:88px 24px; }
.section-tight{ padding-top:56px; padding-bottom:88px; }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-lead{ margin-top:12px; font-size:16px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--primary-dark);
  background:var(--primary-light);
  border:1px solid var(--line-strong);
  padding:6px 13px; border-radius:999px;
}
.eyebrow-muted{ color:var(--ink-soft); background:var(--surface-2); border-color:var(--line); }

h2{ font-size:clamp(24px, 3.4vw, 32px); margin-top:10px; }
h3{ font-size:19px; }

/* ---------- Hero (the calculator itself) ---------- */
.hero-calc{
  max-width:1120px; margin:0 auto; padding:52px 24px 76px;
}
.hero-calc-intro{
  max-width:680px; margin:0 auto 36px; text-align:center;
}
.hero-calc-intro .eyebrow{ margin-bottom:16px; }
.hero-calc-intro h1{
  font-size:clamp(30px, 4.6vw, 46px);
  line-height:1.08;
  margin:0 0 14px;
}
.hero-calc-lead{
  font-size:16.5px; max-width:56ch; margin:0 auto 24px;
}
.hero-calc-ctas{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}

.hero-facts{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px 28px;
  max-width:1000px; margin:56px auto 0;
  padding-top:28px; border-top:1px solid var(--line);
}
.hero-facts div{ text-align:left; }
.hero-facts dt{
  display:flex; align-items:center; gap:7px;
  font-weight:700; font-size:13px; color:var(--ink); margin-bottom:4px;
}
.hero-facts dd{ margin:0; font-size:13px; color:var(--ink-soft); }

/* ---------- How it works ---------- */
.steps-grid{
  list-style:none; display:grid;
  grid-template-columns:repeat(4, 1fr); gap:18px;
  margin:0 0 28px;
}
.step-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow-1);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.step-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--primary); }
.step-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.step-index{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); }
.step-icon{
  display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center;
  border-radius:10px; background:var(--primary-light); color:var(--primary-dark);
}
.step-card h3{ font-size:16.5px; margin-bottom:6px; }
.step-card p{ font-size:13.8px; }

.formula-strip{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--surface-2); border:1px dashed var(--line-strong);
  border-radius:var(--radius); padding:14px 18px;
}
.formula-strip-label{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--ink-soft);
  white-space:nowrap;
}
.formula-strip code{
  font-family:var(--font-mono); font-size:13px; color:var(--primary-dark);
  background:transparent;
}

/* ---------- Calculator ---------- */
.calc-shell{ display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:start; }

.calc-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:30px;
  box-shadow:var(--shadow-2);
}

.calc-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:22px; padding-bottom:20px; border-bottom:1px solid var(--line);
}

.calc-progress{ display:flex; align-items:center; gap:7px; }
.calc-progress-dot{
  width:8px; height:8px; border-radius:50%; background:var(--line-strong);
  transition:background .2s ease, transform .2s ease;
}
.calc-progress-dot.is-done{ background:var(--primary); }
.calc-progress-dot.is-current{ background:var(--amber); transform:scale(1.3); }

.restore-banner{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--primary-light); border:1px solid var(--primary);
  border-radius:10px; padding:12px 16px; margin-bottom:18px;
}
.restore-banner-icon{ display:flex; color:var(--primary-dark); flex-shrink:0; }
.restore-banner-text{ font-size:13.5px; font-weight:600; color:var(--ink); flex:1; min-width:180px; }
.restore-banner-actions{ display:flex; gap:8px; }

.example-badge{
  display:none; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; color:var(--amber);
  background:var(--amber-light); border-radius:999px;
  padding:7px 14px; margin-bottom:18px; width:fit-content;
}
.example-badge.visible{ display:inline-flex; }

.field-explain{
  font-size:13px; color:var(--ink-soft); margin:0 0 12px; max-width:60ch; line-height:1.55;
}

/* Peptide search combobox */
.field-step-search{ padding-top:2px; }
.combobox{ position:relative; }
.combobox-input{
  width:100%; font-family:var(--font-mono); font-size:14px; font-weight:600; color:var(--ink);
  padding:12px 40px 12px 40px; border-radius:10px; border:1px solid var(--line-strong);
  background:var(--surface);
}
.combobox-input:focus{ outline:2px solid var(--primary); outline-offset:1px; border-color:var(--primary); }
.combobox-icon{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  color:var(--ink-faint); pointer-events:none; display:flex;
}
.combobox-clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; border:none; background:var(--surface-2);
  color:var(--ink-faint); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.combobox-clear:hover{ color:var(--danger); }

.combobox-listbox{
  position:absolute; z-index:30; top:calc(100% + 8px); left:0; right:0;
  max-height:320px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:12px;
  box-shadow:var(--shadow-3); padding:8px;
}
.combobox-group-label{
  font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-faint); padding:10px 10px 6px;
}
.combobox-option{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:10px 10px; border-radius:8px; border:none; background:transparent;
  font-family:var(--font-body); font-size:14px; color:var(--ink); text-align:left; cursor:pointer;
}
.combobox-option:hover, .combobox-option.is-active{ background:var(--primary-light); }
.combobox-option-name mark{
  background:var(--amber-light); color:var(--ink); border-radius:3px; padding:0 1px;
}
.combobox-empty{ padding:16px 10px; font-size:13.5px; color:var(--ink-soft); }

.combobox-selected-note{
  display:flex; align-items:flex-start; gap:6px; margin:10px 0 0;
  font-size:12.5px; color:var(--primary-dark); line-height:1.5;
}
.combobox-selected-note svg{ flex-shrink:0; margin-top:2px; }
.combobox-selected-note strong{ color:var(--ink); }

.field-step{ padding:20px 0; border-bottom:1px solid var(--line); }
.field-step:last-of-type{ border-bottom:none; }

.field-step-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.field-label{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:600; font-size:15.5px; }
.field-hint{ font-size:12px; color:var(--ink-faint); font-family:var(--font-mono); white-space:nowrap; }

.tip-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  background:transparent; border:none; color:var(--ink-faint); cursor:pointer;
  position:relative;
}
.tip-btn:hover{ color:var(--primary); }
.tip-btn::after{
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(4px);
  width:240px; max-width:60vw;
  background:var(--ink); color:var(--bg);
  font-family:var(--font-body); font-weight:500; font-size:12.5px; line-height:1.5;
  padding:10px 12px; border-radius:8px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:20; text-align:left;
}
html[data-theme="dark"] .tip-btn::after{ background:var(--surface-2); color:var(--ink); border:1px solid var(--line-strong); }
.tip-btn:hover::after, .tip-btn:focus-visible::after{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}

.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  appearance:none; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink);
  font-family:var(--font-mono); font-size:13px; font-weight:600;
  padding:9px 15px; border-radius:10px; cursor:pointer;
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px;
  line-height:1.25;
  transition:border-color .15s ease, background .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.chip-sub{ font-size:10px; font-weight:500; color:var(--ink-faint); }
.chip.active .chip-sub{ color:rgba(255,255,255,0.75); }
.chip:hover{ border-color:var(--primary); color:var(--primary-dark); }
.chip:active{ transform:translateY(1px); }
.chip.active{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:var(--shadow-1); }
.chip.other{ color:var(--ink-soft); }
.chip.other.active{ background:var(--amber); border-color:var(--amber); color:#fff; }

/* Syringe-size picker: larger illustrated cards, stacked full-width */
.chips-syringe{ flex-direction:column; gap:10px; }
.chip-syringe{
  flex-direction:row; align-items:center; gap:18px;
  width:100%; padding:12px 18px; border-radius:12px;
  text-align:left;
}
.chip-syringe-icon{
  flex:0 0 140px; max-width:40%;
  display:flex; align-items:center; color:var(--ink);
}
.chip-syringe.active .chip-syringe-icon{ color:#fff; }
.chip-syringe-text{ display:flex; flex-direction:column; gap:2px; }
.chip-syringe .chip-main{ font-size:15px; }
.chip-syringe .chip-sub{ font-size:11px; }
.syringe-icon-label{
  font-family:var(--font-mono); font-size:7px; fill:var(--ink-faint);
}
.chip-syringe.active .syringe-icon-label{ fill:rgba(255,255,255,0.8); }

@media (max-width:480px){
  .chip-syringe{ gap:12px; padding:10px 14px; }
  .chip-syringe-icon{ flex-basis:110px; }
}

.custom-input{ display:none; margin-top:10px; align-items:center; gap:8px; }
.custom-input.visible{ display:flex; animation:fadeSlide .18s ease; }
@keyframes fadeSlide{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:translateY(0);} }

.stepper{ display:flex; align-items:stretch; }
.stepper-btn{
  width:34px; flex-shrink:0; border:1px solid var(--line-strong); background:var(--surface-2);
  color:var(--ink-soft); font-size:16px; font-weight:700; cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.stepper-btn:hover{ background:var(--primary-light); color:var(--primary-dark); border-color:var(--primary); }
.stepper-btn:first-child{ border-radius:9px 0 0 9px; border-right:none; }
.stepper-btn:last-child{ border-radius:0 9px 9px 0; border-left:none; }
.stepper input{
  width:110px; font-family:var(--font-mono); font-size:14px; font-weight:600;
  padding:9px 8px; border-radius:0; border:1px solid var(--line-strong);
  color:var(--ink); background:var(--surface); text-align:center;
}
.stepper input:focus{ outline:2px solid var(--primary); outline-offset:1px; border-color:var(--primary); position:relative; z-index:1; }
/* Hide native number-input spin arrows since the stepper buttons replace them */
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.stepper input[type="number"]{ -moz-appearance:textfield; }

.custom-input span{ font-size:13px; color:var(--ink-soft); font-family:var(--font-mono); }

.field-error{
  display:none; margin:10px 0 0; font-size:12.5px; color:var(--danger); font-weight:600;
}
.field-error.visible{ display:block; }

/* ---------- Result ---------- */
.result{
  margin-top:26px; border-radius:var(--radius); border:1px solid var(--line);
  background:var(--surface-2); padding:26px;
}
.result-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.result-headline{ font-family:var(--font-display); font-size:15px; color:var(--ink-soft); margin:0 0 4px; }
.result-headline strong{ color:var(--ink); }

.unit-toggle{ display:inline-flex; background:var(--surface); border:1px solid var(--line-strong); border-radius:999px; padding:3px; }
.unit-toggle-btn{
  border:none; background:transparent; font-family:var(--font-mono); font-size:12px; font-weight:700;
  padding:6px 13px; border-radius:999px; cursor:pointer; color:var(--ink-soft);
  transition:background .15s ease, color .15s ease;
}
.unit-toggle-btn.active{ background:var(--primary); color:#fff; }

.result-value{
  font-family:var(--font-mono); font-size:clamp(30px, 6vw, 44px); font-weight:700;
  color:var(--primary-dark); margin:8px 0 20px; letter-spacing:-0.01em;
}
.result-value .unit-label{ font-size:16px; font-weight:600; color:var(--ink-soft); margin-left:8px; }

.syringe{ margin-top:6px; }
.syringe-labels{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); margin-bottom:6px; }
.syringe-barrel{
  position:relative; height:56px; background:var(--surface);
  border:2px solid var(--ink); border-radius:8px; overflow:hidden;
}
.syringe-fill{
  position:absolute; top:0; left:0; bottom:0; width:0%;
  background:linear-gradient(180deg, var(--primary-soft) 0%, var(--primary) 100%);
  transition:width .3s ease;
}
.syringe-fill.warn{ background:linear-gradient(180deg, var(--amber-soft) 0%, var(--amber) 100%); }
.syringe-ticks{ position:absolute; inset:0; display:flex; }
.tick{ flex:1 1 0; border-right:1px solid var(--ink-hairline); position:relative; }
.tick:last-child{ border-right:none; }
.tick.major{ border-right:1px solid var(--ink-hairline-strong); }
.tick.major::after{
  content:attr(data-val); position:absolute; bottom:3px; left:3px;
  font-family:var(--font-mono); font-size:9px; color:var(--ink-soft);
}
.target-line{ position:absolute; top:0; bottom:0; width:2px; background:var(--danger); left:0%; transition:left .3s ease; }
.target-line::after{
  content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--danger);
}

.warning{
  display:none; align-items:flex-start; gap:10px; margin-top:16px;
  padding:13px 15px; border-radius:10px;
  background:var(--danger-light); border:1px solid var(--danger);
  color:var(--danger); font-size:13.5px;
}
.warning.visible{ display:flex; animation:fadeSlide .18s ease; }
.warning strong{ font-family:var(--font-display); }
.warning-icon{ flex-shrink:0; margin-top:1px; }

.result-status{
  display:none; align-items:center; gap:8px; margin-top:14px;
  padding:9px 13px; border-radius:999px; width:fit-content;
  font-size:12.5px; font-weight:600;
}
.result-status.visible{ display:flex; animation:fadeSlide .18s ease; }
.result-status-ok{ background:var(--success-light); color:var(--success); }
.result-status-icon{ display:flex; flex-shrink:0; }

.math-breakdown{
  margin-top:16px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); overflow:hidden;
}
.math-breakdown summary{
  display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  padding:11px 15px; font-family:var(--font-mono); font-size:12.5px; font-weight:600;
  color:var(--ink-soft);
}
.math-breakdown summary::-webkit-details-marker{ display:none; }
.math-breakdown[open] summary{ border-bottom:1px solid var(--line); color:var(--primary-dark); }
.math-steps{
  list-style:decimal; margin:0; padding:14px 15px 14px 32px; display:flex; flex-direction:column; gap:9px;
}
.math-steps li{
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink); line-height:1.6;
}

.result-actions{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:18px;
}
.server-status{
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint);
  display:inline-flex; align-items:center; gap:6px; margin-left:auto;
}
.server-status::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--ink-faint);
}
.server-status.ok::before{ background:var(--success); }
.server-status.error::before{ background:var(--danger); }
.server-status.loading::before{ background:var(--amber); animation:pulse 1s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1;} 50%{ opacity:.3;} }

.meta-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:18px;
  margin-top:20px; padding-top:18px; border-top:1px dashed var(--line-strong);
}
.meta-item{ display:flex; flex-direction:column; }
.meta-item .k{
  display:block; color:var(--ink-faint); font-family:var(--font-mono); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px;
}
.meta-item .v{ font-family:var(--font-mono); font-weight:600; font-size:14px; color:var(--ink); }
.meta-explain{ font-size:12px; color:var(--ink-soft); margin-top:4px; line-height:1.5; }

.result-new-btn{ margin-top:22px; width:100%; justify-content:center; }

/* ---------- Calc sidebar ---------- */
.calc-side{ display:flex; flex-direction:column; gap:16px; position:sticky; top:88px; }
.side-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow-1);
}
.side-card-muted{ background:var(--primary-light); border-color:transparent; }
.side-card-icon{
  display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center;
  border-radius:9px; background:var(--surface-2); color:var(--primary-dark); margin-bottom:10px;
}
.side-card h4{ font-size:14.5px; margin-bottom:6px; }
.side-card p{ font-size:13px; }
.side-card-link{
  display:inline-flex; align-items:center; gap:5px; margin-top:10px;
  font-size:13px; font-weight:700; color:var(--primary-dark); text-decoration:none;
}

/* ---------- Trust / disclaimer card ---------- */
.trust-card{
  margin-top:24px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.trust-card summary{
  display:flex; align-items:center; gap:14px; padding:18px 22px; cursor:pointer;
  list-style:none;
}
.trust-card summary::-webkit-details-marker{ display:none; }
.trust-card-icon{
  flex-shrink:0; display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center;
  border-radius:10px; background:var(--primary-light); color:var(--primary-dark);
}
.trust-card-summary{ display:flex; flex-direction:column; gap:2px; flex:1; }
.trust-card-summary strong{ font-family:var(--font-display); font-size:15px; color:var(--ink); }
.trust-card-summary span{ font-size:12.8px; color:var(--ink-soft); }
.trust-card-chevron{ color:var(--ink-faint); transition:transform .2s ease; flex-shrink:0; }
.trust-card[open] .trust-card-chevron{ transform:rotate(180deg); }
.trust-card-list{
  list-style:none; margin:0; padding:0 22px 22px 22px; display:flex; flex-direction:column; gap:12px;
}
.trust-card-list li{
  font-size:13.3px; color:var(--ink-soft); line-height:1.6; padding-left:20px; position:relative;
}
.trust-card-list li::before{
  content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%;
  background:var(--primary);
}
.trust-card-list strong{ color:var(--ink); }

/* ---------- Features ---------- */
.features-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.feature-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; transition:transform .18s ease, box-shadow .18s ease;
}
.feature-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
.feature-icon{
  display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center;
  border-radius:11px; background:var(--primary-light); color:var(--primary-dark); margin-bottom:14px;
}
.feature-card h3{ font-size:16.5px; margin-bottom:6px; }
.feature-card p{ font-size:13.8px; }

/* ---------- Learn section ---------- */
.section-learn{ background:var(--surface-2); border-radius:var(--radius-lg); }
.learn-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.learn-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px;
}
.learn-card-wide{ grid-column:1 / -1; }
.learn-card h3{ display:flex; align-items:center; gap:9px; font-size:16.5px; margin-bottom:10px; }
.learn-card p{ font-size:14px; }
.learn-list{ list-style:none; display:flex; flex-direction:column; gap:9px; margin-top:4px; }
.learn-list li{
  position:relative; padding-left:20px; font-size:13.8px; color:var(--ink-soft);
}
.learn-list li::before{
  content:''; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:2px;
  background:var(--primary); transform:rotate(45deg);
}

.learn-diagram{ display:flex; gap:20px; margin-top:16px; }
.diagram-vial{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:8px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:16px 10px;
}
.diagram-fill{
  width:34px; border-radius:6px 6px 3px 3px; align-self:flex-end;
  background:linear-gradient(180deg, var(--primary-soft), var(--primary));
  height:30%; margin-top:auto;
}
.diagram-vial-concentrated .diagram-fill{ background:linear-gradient(180deg, var(--amber-soft), var(--amber)); }
.diagram-vial span{ font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--ink); }
.diagram-vial small{ font-size:11px; color:var(--ink-faint); text-align:center; }

.mistake-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:6px; }
.mistake-item{ display:flex; gap:12px; align-items:flex-start; }
.mistake-num{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background:var(--danger-light); color:var(--danger);
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.mistake-item p{ font-size:13.5px; }
.mistake-item strong{ color:var(--ink); }

/* ---------- FAQ ---------- */
.faq-list{ display:flex; flex-direction:column; gap:10px; }
.faq-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
}
.faq-item h3{ margin:0; font-size:inherit; font-family:inherit; }
.faq-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:transparent; border:none; cursor:pointer; text-align:left;
  padding:18px 22px; font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--ink);
}
.faq-chevron{ display:inline-flex; color:var(--ink-faint); transition:transform .2s ease; flex-shrink:0; }
.faq-trigger[aria-expanded="true"] .faq-chevron{ transform:rotate(180deg); color:var(--primary); }
.faq-panel{
  padding:0 22px 20px; font-size:14px; max-width:74ch;
}
.faq-panel p{ font-size:14px; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line); margin-top:40px; padding-top:56px; }
.footer-inner{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:36px; }
.footer-brand{ max-width:280px; }
.footer-brand p{ margin-top:10px; font-size:13.5px; }
.footer-links{ display:flex; gap:56px; flex-wrap:wrap; }
.footer-col h4{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-family:var(--font-mono); margin-bottom:12px; font-weight:600; }
.footer-col{ display:flex; flex-direction:column; gap:9px; }
.footer-col a{ font-size:13.8px; color:var(--ink-soft); text-decoration:none; }
.footer-col a:hover{ color:var(--primary-dark); }
.footer-link-btn{
  appearance:none; background:none; border:none; padding:0; margin:0;
  font-family:inherit; font-size:13.8px; color:var(--ink-soft); text-decoration:none;
  cursor:pointer; text-align:left;
}
.footer-link-btn:hover{ color:var(--primary-dark); }
.footer-static{ font-size:13px; color:var(--ink-faint); font-family:var(--font-mono); }

.footer-bottom{ border-top:1px solid var(--line); padding:22px 24px 40px; }
.disclaimer{
  max-width:1120px; margin:0 auto; display:flex; gap:8px; align-items:flex-start;
  font-size:12px; color:var(--ink-faint); line-height:1.6;
}
.disclaimer svg{ flex-shrink:0; margin-top:2px; }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- Embed modal ---------- */
.embed-modal{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  visibility:hidden; opacity:0;
  transition:opacity .2s ease, visibility .2s ease;
}
.embed-modal.is-open{ visibility:visible; opacity:1; }
.embed-modal-overlay{
  position:absolute; inset:0;
  background:rgba(8,20,22,0.55);
}
html[data-theme="dark"] .embed-modal-overlay{ background:rgba(0,0,0,0.7); }

.embed-modal-panel{
  position:relative; z-index:1;
  width:min(640px, calc(100% - 40px));
  max-height:calc(100% - 40px);
  overflow-y:auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-3);
  transform:translateY(10px); transition:transform .2s ease;
}
.embed-modal.is-open .embed-modal-panel{ transform:translateY(0); }

.embed-modal-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:24px 24px 0;
}
.embed-modal-head h3{
  display:flex; align-items:center; gap:9px; font-size:18px; margin-bottom:6px;
}
.embed-modal-head p{ font-size:13.5px; }

.embed-modal-body{ padding:20px 24px 26px; }

.embed-controls{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;
  margin-bottom:18px;
}
.embed-control{ display:flex; flex-direction:column; gap:6px; }
.embed-control label{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-faint);
}
.embed-control input, .embed-control select{
  font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--ink);
  padding:9px 10px; border-radius:8px; border:1px solid var(--line-strong);
  background:var(--surface-2);
}
.embed-control input:focus, .embed-control select:focus{
  outline:2px solid var(--primary); outline-offset:1px; border-color:var(--primary);
}

.embed-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.embed-tab{
  appearance:none; background:none; border:none; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:13.5px;
  color:var(--ink-soft); padding:9px 4px; margin-bottom:-1px;
  border-bottom:2px solid transparent;
}
.embed-tab.active{ color:var(--primary-dark); border-bottom-color:var(--primary); }

.embed-code-wrap{ position:relative; }
.embed-code{
  margin:0; background:var(--surface-2); border:1px solid var(--line);
  border-radius:10px; padding:16px 100px 16px 16px;
  font-family:var(--font-mono); font-size:12.5px; line-height:1.6;
  color:var(--ink); white-space:pre-wrap; word-break:break-all;
  max-height:220px; overflow-y:auto;
}
.embed-copy-btn{ position:absolute; top:12px; right:12px; }

.embed-instructions{ margin-top:14px; font-size:12.8px; line-height:1.6; }

.embed-preview-frame{
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:var(--bg); max-height:480px; overflow-y:auto;
}
.embed-preview-frame iframe{ display:block; width:100%; border:0; min-height:400px; }

/* ---------- Sticky mobile result bar ---------- */
.sticky-result-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--surface); border-top:1px solid var(--line);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -12px 28px -18px rgba(11,34,36,0.35);
  animation:slideUp .2s ease;
}
.sticky-result-bar[hidden]{ display:none; }
@keyframes slideUp{ from{ transform:translateY(100%);} to{ transform:translateY(0);} }
.sticky-result-text{ font-size:13.5px; color:var(--ink-soft); }
.sticky-result-text strong{
  font-family:var(--font-mono); font-size:16px; color:var(--primary-dark); margin:0 4px;
}
@media (min-width:641px){
  .sticky-result-bar{ display:none !important; }
}

/* ---------- Standalone embed page ---------- */
body.is-embed{ padding:18px; background:var(--bg); }
body.is-embed .calc-shell{ grid-template-columns:1fr; }

.embed-credit{
  display:flex; justify-content:center; align-items:center; gap:4px;
  margin-top:16px; padding:10px;
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint);
  text-decoration:none;
}
.embed-credit strong{ color:var(--primary-dark); font-weight:600; }
.embed-credit:hover strong{ text-decoration:underline; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-facts{ grid-template-columns:1fr 1fr; }
  .calc-shell{ grid-template-columns:1fr; }
  .calc-side{ position:static; flex-direction:row; flex-wrap:wrap; }
  .calc-side .side-card{ flex:1 1 220px; }
  .steps-grid{ grid-template-columns:1fr 1fr; }
  .features-grid{ grid-template-columns:1fr 1fr; }
  .learn-grid{ grid-template-columns:1fr; }
  .topnav{ display:none; }
  .embed-controls{ grid-template-columns:1fr 1fr; }
  .embed-control-toggle{ grid-column:1 / -1; }
}

@media (max-width: 640px){
  .topbar-inner{ padding-left:14px; padding-right:14px; gap:10px; }
  .brand-name{ font-size:16px; }
  .topbar-actions{ gap:6px; }
  .topbar-actions .btn-primary .btn-label{ display:none; }
  .topbar-actions .btn-primary{ padding:10px 12px; }
  .section{ padding:56px 18px; }
  .hero-calc{ padding:36px 18px 56px; }
  .hero-calc-intro{ margin-bottom:26px; }
  .hero-facts{ grid-template-columns:1fr; margin-top:40px; }
  .steps-grid{ grid-template-columns:1fr; }
  .features-grid{ grid-template-columns:1fr; }
  .mistake-grid{ grid-template-columns:1fr; }
  .calc-card{ padding:22px 18px; }
  .calc-card-head{ flex-direction:column; align-items:stretch; }
  .field-step-head{ flex-direction:column; align-items:flex-start; gap:4px; }
  .footer-inner{ flex-direction:column; gap:28px; }
  .result-top{ flex-direction:column; }
  .embed-controls{ grid-template-columns:1fr; }
  .embed-modal-panel{ width:calc(100% - 24px); max-height:calc(100% - 24px); }
}

/* ---------- Print (clean report: selected values + results only) ---------- */
@media print{
  body{ background:#fff; padding:0; color:#000; }
  .topbar, .hero-calc-intro, .hero-facts, .calc-side, .trust-card,
  #how-it-works, #features, #learn, #faq, .site-footer, .embed-modal,
  .skip-link, .combobox-listbox, .combobox-clear, .calc-progress,
  .result-actions, .unit-toggle, .tip-btn, .field-explain,
  .chip:not(.active), .result-new-btn, .field-step-search,
  .restore-banner, .example-badge, .math-breakdown, .sticky-result-bar,
  .stepper-btn {
    display:none !important;
  }
  .hero-calc{ padding:0; max-width:none; }
  .calc-shell{ grid-template-columns:1fr; gap:0; }
  .calc-card{ box-shadow:none; border:1px solid #000; padding:20px; }
  .calc-card-head{ border-bottom:2px solid #000; }
  .chip{ border:1px solid #000 !important; color:#000 !important; background:#fff !important; box-shadow:none !important; }
  .chip.active{ background:#eee !important; font-weight:700; }
  .chip *{ color:#000 !important; }
  .chip-syringe-icon, .chip-syringe-icon svg{ color:#000; }
  .syringe-icon-label{ fill:#000 !important; }
  .result{ background:#fff; border:1px solid #000; }
  .result-value{ color:#000; }
  .syringe-barrel{ border-color:#000; }
  .warning, .result-status{ border:1px solid #000; background:#fff; color:#000; }
  a[href]::after{ content:''; }
}

/* Audit fixes: readable notices, narrow screens, print evidence. */
.notice,.privacy-controls{padding:12px;border:1px solid var(--line-strong);border-radius:8px;margin:12px 0;color:var(--ink);font-size:14px}
.result-value{overflow-wrap:anywhere;font-size:clamp(24px,6vw,52px)}
button:disabled{opacity:.5;cursor:not-allowed}
.sticky-result-bar[data-warning="true"]{border-top:3px solid var(--danger)}
.sticky-result-text{font-size:13px}.calc-card,.calc-shell,.result{min-width:0}
.article-body{max-width:850px;margin:40px auto;padding:24px}.article-body p,.article-body li{margin:12px 0}.article-body ul{padding-left:24px}
@media print{.privacy-controls,#methodology,#privacy{display:none!important}.notice{color:#000}.result,.meta-grid,.warning{break-inside:avoid}.field-step-search{display:block!important}.combobox{display:none!important}.combobox-selected-note{color:#000}.reveal{opacity:1!important;transform:none!important}#trustCard{display:block!important}#trustCard ul{display:block!important}}

.meta-grid{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}.math-steps li,.meta-item .v,.formula-strip code{overflow-wrap:anywhere}.tick.major::after{left:auto;right:0;transform:translateX(50%)}
html[data-theme="dark"] .btn-primary,html[data-theme="dark"] .chip.active,html[data-theme="dark"] .unit-toggle-btn.active{color:#082426}
html[data-theme="dark"] .chip.active .chip-sub{color:#123032}
html[data-theme="dark"] .chip-syringe.active .chip-syringe-icon{color:#123032}
html[data-theme="dark"] .chip-syringe.active .syringe-icon-label{fill:#123032}
.example-badge{color:var(--ink)}
@media(max-width:640px){body{padding-bottom:90px}.result{padding:18px}}