/* ============================================================
   DoseMath shared stylesheet — content pages (About, Methodology,
   Changelog). Mirrors the calibration-sheet design system defined
   in DESIGN.md. The calculator (index.html) keeps its own inline
   styles; these cover prose/content pages only.
   ============================================================ */
:root{
  --ink:#0C0E13; --ink-2:#11141C; --ink-3:#161A24;
  --grid:rgba(126,146,178,.07); --grid-major:rgba(126,146,178,.12);
  --rule:rgba(150,170,202,.17); --rule-strong:rgba(150,170,202,.30);
  --fg:#E7EBF3; --fg-dim:#8A96AB; --fg-faint:#848FA3;
  --signal:#FF2E88; --signal-soft:rgba(255,46,136,.16);
  --steel:#9FB0CC;
  --r:7px; --tap:48px; --maxw:560px;
  color-scheme:dark;
  --grotesk:'Archivo',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --ink:#E9EDF2; --ink-2:#F3F6F9; --ink-3:#FFFFFF;
  --grid:rgba(38,52,82,.06); --grid-major:rgba(38,52,82,.12);
  --rule:rgba(26,38,64,.17); --rule-strong:rgba(26,38,64,.32);
  --fg:#121722; --fg-dim:#49536B; --fg-faint:#59637C;
  --signal:#C00F66; --signal-soft:rgba(192,15,102,.1);
  --steel:#43547A;
  color-scheme:light;
}}
:root[data-theme="light"]{
  --ink:#E9EDF2; --ink-2:#F3F6F9; --ink-3:#FFFFFF;
  --grid:rgba(38,52,82,.06); --grid-major:rgba(38,52,82,.12);
  --rule:rgba(26,38,64,.17); --rule-strong:rgba(26,38,64,.32);
  --fg:#121722; --fg-dim:#49536B; --fg-faint:#59637C;
  --signal:#C00F66; --signal-soft:rgba(192,15,102,.1);
  --steel:#43547A;
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--grotesk);
  background:var(--ink);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px);
  background-size:16px 16px,16px 16px,96px 96px,96px 96px;
  min-height:100%;
  padding-block:40px;
}
::selection{background:var(--signal-soft);color:var(--fg)}
:focus-visible{outline:2px solid var(--fg);outline-offset:2px;border-radius:2px}

.sheet{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}

/* ---- masthead ---- */
.mast{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.wordmark{font-family:var(--mono);font-weight:800;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);text-decoration:none;display:inline-block}
.wordmark b{color:var(--fg);font-weight:800}
.mast .sub{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);margin-top:6px}
.controls{display:flex;align-items:center;gap:8px;flex-shrink:0}
.themebtn{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;background:transparent;border:1px solid var(--rule);color:var(--fg-dim);border-radius:4px;padding:5px 9px;cursor:pointer;line-height:1;min-height:28px;display:inline-flex;align-items:center;gap:6px}
.themebtn:hover{border-color:var(--rule-strong);color:var(--fg)}

/* ---- top nav ---- */
.topnav{display:flex;flex-wrap:wrap;gap:2px 16px;margin:14px 0 2px;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.topnav a{color:var(--fg-faint);text-decoration:none;padding:9px 0;border-bottom:1px solid transparent}
.topnav a:hover{color:var(--fg)}
.topnav a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--steel)}

/* ---- content ---- */
main.doc{padding-top:26px}
.pagetitle{font-family:var(--grotesk);font-weight:800;font-size:clamp(1.6rem,6vw,2.1rem);line-height:1.08;letter-spacing:-.02em;color:var(--fg);margin:0 0 6px}
.eyebrow{font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:10px}
.lead{font-size:1rem;line-height:1.6;color:var(--fg-dim);margin:0 0 6px}
.doc h2{font-family:var(--grotesk);font-weight:700;font-size:1.12rem;letter-spacing:-.01em;color:var(--fg);margin:34px 0 10px;padding-top:16px;border-top:1px solid var(--rule)}
.doc h3{font-family:var(--grotesk);font-weight:700;font-size:.95rem;color:var(--fg);margin:20px 0 4px}
.doc p{font-size:.9rem;line-height:1.65;color:var(--fg-dim);margin:0 0 12px}
.doc a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:2px}
.doc a:hover{text-decoration-color:var(--fg)}
.doc strong,.doc b{color:var(--fg);font-weight:700}
.doc ul,.doc ol{margin:0 0 14px;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.doc li{font-size:.9rem;line-height:1.6;color:var(--fg-dim)}
.doc dl{margin:0 0 14px}
.doc dt{font-weight:700;color:var(--fg);font-size:.88rem;margin-top:12px}
.doc dd{margin:2px 0 0;font-size:.9rem;line-height:1.6;color:var(--fg-dim)}
.mono,.doc code{font-family:var(--mono);font-variant-numeric:tabular-nums}
.doc code{font-size:.84rem;background:var(--ink-2);border:1px solid var(--rule);border-radius:4px;padding:1px 5px;color:var(--fg)}

/* formula block: the one place the signal may appear in prose (the result term) */
.fml{font-family:var(--mono);font-size:.82rem;line-height:1.7;color:var(--fg-dim);background:var(--ink-2);border:1px solid var(--rule);border-left:3px solid var(--rule-strong);border-radius:0 var(--r) var(--r) 0;padding:12px 14px;margin:0 0 14px;overflow-x:auto}
.fml b{color:var(--signal);font-weight:700}
.fml .c{color:var(--fg-faint)}

/* placeholder note (owner must fill in) */
.todo{border:1px dashed var(--rule-strong);background:var(--ink-2);border-radius:var(--r);padding:11px 13px;font-size:.82rem;line-height:1.55;color:var(--fg-faint);margin:0 0 14px}
.todo b{color:var(--fg-dim)}

/* call-to-action back to the tool */
.cta{display:inline-flex;align-items:center;gap:8px;height:var(--tap);padding:0 18px;margin:6px 0 2px;border:1px solid var(--steel);border-radius:var(--r);background:var(--ink-3);color:var(--fg);font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.cta:hover{background:var(--ink-2)}

/* footer */
footer.disc{margin-top:34px;border-top:1px solid var(--rule);padding:16px 0 10px;font-size:.72rem;line-height:1.5;color:var(--fg-dim)}
footer.disc .line1{color:var(--fg);margin-bottom:5px;font-weight:600}
.footnav{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:14px;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.footnav a{color:var(--fg-faint);text-decoration:none}
.footnav a:hover{color:var(--fg)}
.updated{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--fg-faint);margin-top:12px}

@media (min-width:720px){
  :root{--maxw:680px}
  .sheet{position:relative;padding-top:26px;padding-bottom:22px;border:1px solid var(--rule-strong);box-shadow:0 28px 70px -26px rgba(0,0,0,.65)}
  .sheet::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--ink-2);opacity:.6}
  .sheet::after{content:"";position:absolute;inset:7px;z-index:2;pointer-events:none;background:linear-gradient(var(--rule-strong),var(--rule-strong)) left top/13px 1px no-repeat,linear-gradient(var(--rule-strong),var(--rule-strong)) left top/1px 13px no-repeat,linear-gradient(var(--rule-strong),var(--rule-strong)) right top/13px 1px no-repeat,linear-gradient(var(--rule-strong),var(--rule-strong)) right top/1px 13px no-repeat,linear-gradient(var(--rule-strong),var(--rule-strong)) left bottom/13px 1px no-repeat,linear-gradient(var(--rule-strong),var(--rule-strong)) left bottom/1px 13px no-repeat,linear-gradient(var(--rule-strong),var(--rule-strong)) right bottom/13px 1px no-repeat,linear-gradient(var(--rule-strong),var(--rule-strong)) right bottom/1px 13px no-repeat}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}