/* Layout: a phone-first health report sized for a Samsung screen (360–412px),
   written to the reader as "you". Header with a status bar and a button to the
   questions, tap-through tiles, this week's changes, good news, a checklist,
   the year's story, one section per body area with a chart each, medicines,
   questions for the doctors, results, updates, Claude's recommendations, and
   the answer form last. Light only, by request. */
*,*::before,*::after{ box-sizing:border-box; }
:root{
  color-scheme: only light;
  --paper:#F3F2F8;
  --sheet:#FFFFFF;
  --ink:#1C1B29;
  --ink-2:#4A4860;
  --muted:#6B6982;
  --hair:#E4E2EC;
  --rule:#CAC7D8;
  --band:#E9E7F1;
  --wait:#FBEFDF;
  --lav:#5A46C8;
  --lav-deep:#46369F;
  --lav-wash:#ECE9FB;
  --lav-soft:#F8F7FE;
  --on-lav:#FFFFFF;
  --context:#6E6C85;
  --shadow:rgba(28,24,64,.10);
  --good:#0CA30C;
  --warn:#FAB219;
  --serious:#EC835A;
  --neutral:#8B89A0;
  --on-status:#241305;
  --on-status-light:#FFFFFF;
  --good-wash:#E3F3E3;
  --warn-wash:#FEF2D6;
  --serious-wash:#FDE9E0;
  --neutral-wash:#ECEBF2;
  /* Status colours for text, icons and marks: 4.5:1 or better on white and on paper. */
  --good-ink:#1B7A1B;
  --warn-ink:#8A5A00;
  --serious-ink:#B3471D;
  --neutral-ink:#6E6C85;
  /* Edges of things you can tap: 3:1 against the paper background. */
  --edge:#88869D;
  --display:"Newsreader", Georgia, "Times New Roman", serif;
  --body:"Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter:16px;
  --nav-h:62px;
}
@media (min-width:720px){ :root{ --gutter:32px; } }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }

html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ background:var(--paper); color:var(--ink); font-family:var(--body); font-size:1.0625rem; line-height:1.55; }
.wrap{ max-width:780px; margin-inline:auto; padding-inline:var(--gutter); padding-block:24px 56px; }
h1,h2{ font-family:var(--display); font-weight:600; letter-spacing:-.01em; text-wrap:balance; margin:0; color:var(--ink); }
h1{ font-size:clamp(2.3rem, 9vw, 3.2rem); line-height:1.02; }
h2{ font-size:clamp(1.55rem, 6vw, 1.95rem); line-height:1.12; }
h3{ font-size:1.02rem; line-height:1.3; margin:0; font-weight:700; text-wrap:balance; }
h4{ margin:0; font-size:1rem; font-weight:700; color:var(--ink-2); }
p{ margin:0; }
figure{ margin:0; }
a{ color:var(--lav); }
a, button, summary, label{ -webkit-tap-highlight-color:transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible, .chart:focus-visible{ outline:2px solid var(--lav); outline-offset:3px; border-radius:6px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ico{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Header ---------- */
.top{ display:grid; gap:14px; padding-block:4px 18px; }
.eyebrow{ font-size:1rem; font-weight:600; color:var(--ink-2); }
.lead{ font-size:1.15rem; line-height:1.5; color:var(--ink-2); max-width:36ch; }
.statwrap{ display:grid; gap:8px; }
.statbar{ display:flex; gap:3px; height:14px; border-radius:7px; overflow:hidden; }
.statbar span{ flex:var(--n); }
.statkey{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:1rem; color:var(--ink-2); }
.statkey li{ display:inline-flex; align-items:center; gap:7px; }
.statkey i{ width:11px; height:11px; border-radius:3px; flex:none; }
.now{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:start; background:var(--sheet); border:1px solid var(--rule); border-radius:14px; padding:12px 14px; }
.now svg{ width:20px; height:20px; margin-top:2px; }
.now p{ font-size:1rem; line-height:1.45; }
.cta{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; min-height:56px; padding:12px 16px; border-radius:16px; background:var(--lav); color:var(--on-lav); text-decoration:none; font-weight:700; font-size:1rem; line-height:1.3; box-shadow:0 8px 18px var(--shadow); }
.cta:active{ transform:scale(.99); }
.cta .ico{ width:26px; height:26px; }
.cta .chev{ width:10px; height:10px; border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor; transform:rotate(45deg); margin:0 4px 4px 0; }
.caveat{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px; font-size:1rem; line-height:1.45; color:var(--muted); }
.caveat svg{ width:16px; height:16px; margin-top:2px; color:var(--muted); }

/* ---------- Section nav ---------- */
.jump{ position:sticky; top:env(safe-area-inset-top, 0px); z-index:20; display:flex; gap:8px; overflow-x:auto; margin-inline:calc(var(--gutter) * -1); padding:10px var(--gutter); background:var(--paper); border-bottom:1px solid var(--hair); scrollbar-width:none; overscroll-behavior-x:contain; }
.jump::-webkit-scrollbar{ display:none; }
.jump a{ flex:none; display:inline-flex; align-items:center; min-height:40px; padding:0 15px; border-radius:999px; border:1px solid var(--rule); background:var(--sheet); color:var(--ink-2); font-size:1rem; font-weight:700; text-decoration:none; white-space:nowrap; }
.jump a.on{ background:var(--ink); border-color:var(--ink); color:var(--sheet); }
.jump a.mumchip{ background:var(--lav); border-color:var(--lav); color:var(--on-lav); }
.jump a.mumchip.on{ background:var(--lav-deep); border-color:var(--lav-deep); }

main{ display:grid; gap:48px; padding-top:26px; }
.sec{ display:grid; gap:14px; scroll-margin-top:calc(var(--nav-h) + 10px); min-width:0; }
.sec-top{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center; }
.sec-top > div{ display:grid; justify-items:start; gap:5px; min-width:0; }
.sec-top .ic{ width:48px; height:48px; border-radius:15px; background:var(--lav-wash); color:var(--lav-deep); display:grid; place-items:center; }
.sec-top .ic svg{ width:27px; height:27px; }
.sec-top .ic.heart{ background:var(--lav); color:var(--on-lav); }
.sec-top .ic.urgent{ background:var(--serious-wash); color:var(--ink); }
.sub{ color:var(--ink-2); font-size:1rem; }
.say{ font-family:var(--display); font-size:1.36rem; line-height:1.3; font-weight:500; color:var(--ink); max-width:36ch; text-wrap:pretty; }
.body-text{ font-size:1rem; line-height:1.55; color:var(--ink-2); }

/* ---------- Status chips ---------- */
.s-serious{ --c-wash:var(--serious-wash); --ico-bg:var(--serious-ink); --ico-fg:#FFFFFF; --c-ink:var(--serious-ink); }
.s-warn{ --c-wash:var(--warn-wash); --ico-bg:var(--warn-ink); --ico-fg:#FFFFFF; --c-ink:var(--warn-ink); }
.s-neutral{ --c-wash:var(--neutral-wash); --ico-bg:var(--neutral-ink); --ico-fg:#FFFFFF; --c-ink:var(--neutral-ink); }
.s-good{ --c-wash:var(--good-wash); --ico-bg:var(--good-ink); --ico-fg:#FFFFFF; --c-ink:var(--good-ink); }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:3px 11px 3px 4px; border-radius:999px; font-size:1rem; font-weight:700; line-height:1.3; color:var(--ink); background:var(--c-wash); white-space:nowrap; }
.chip svg{ width:17px; height:17px; flex:none; }

/* ---------- Tiles ---------- */
.tiles{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
@media (min-width:700px){ .tiles{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.tile{ display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"ic sp" "tn tn" "tv tv" "ch ch"; align-items:center; gap:6px 8px; padding:12px; background:var(--sheet); border:1px solid var(--edge); border-radius:16px; color:var(--ink); text-decoration:none; min-width:0; }
.tile:active{ transform:scale(.98); }
.tile .ic{ grid-area:ic; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--c-wash); color:var(--ink); }
.tile .ic svg{ width:23px; height:23px; }
.tspark{ grid-area:sp; justify-self:end; display:block; }
.tn{ grid-area:tn; font-weight:700; font-size:1rem; line-height:1.2; margin-top:4px; }
.tv{ grid-area:tv; display:grid; gap:1px; font-size:1.7rem; font-weight:700; line-height:1.05; letter-spacing:-.01em; white-space:nowrap; min-width:0; }
.tv small{ font-size:1rem; font-weight:700; color:var(--muted); letter-spacing:.03em; line-height:1.2; }
.tile .chip{ grid-area:ch; justify-self:start; max-width:100%; white-space:normal; font-size:1rem; gap:5px; padding:3px 9px 3px 4px; }
.tile.hero{ grid-column:1 / -1; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"ic tn" "ic tv" "ch ch"; column-gap:12px; border-color:var(--serious-ink); border-width:2px; }
.tile.hero .ic{ width:48px; height:48px; }
.tile.hero .ic svg{ width:26px; height:26px; }
.tile.hero .tn{ margin-top:0; font-size:1.05rem; }
.tile.hero .tv{ font-size:1.25rem; white-space:normal; }
.sp-line{ fill:none; stroke:var(--lav); stroke-width:1.75; stroke-linejoin:round; stroke-linecap:round; }
.sp-end{ fill:var(--lav); stroke:var(--sheet); stroke-width:1.5; }
.sp-base{ stroke:var(--hair); stroke-width:1; }

/* ---------- This week ---------- */
.chg{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.chg li{ background:var(--sheet); border:1px solid var(--hair); border-radius:14px; padding:12px 14px; display:grid; gap:7px; }
.chg .cn{ font-weight:700; font-size:1.02rem; }
.chg .ft{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:1rem; font-weight:700; }
.chg .ft span{ padding:3px 9px; border-radius:8px; background:var(--band); color:var(--ink-2); }
.chg .ft span.to{ background:var(--lav-wash); color:var(--ink); }
.chg .ft i{ font-style:normal; color:var(--muted); }
.chg p{ font-size:1rem; line-height:1.45; color:var(--ink-2); }
.clues{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.clues li{ position:relative; padding-left:20px; font-size:1rem; line-height:1.45; color:var(--ink-2); }
.clues li::before{ content:""; position:absolute; left:1px; top:.45em; width:9px; height:9px; border-radius:50%; background:var(--lav); }
.clues b{ color:var(--ink); display:block; font-size:1rem; }
.phone{ font-family:var(--mono); font-weight:700; white-space:nowrap; user-select:all; -webkit-user-select:all; }

/* ---------- Good news ---------- */
.wins{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
@media (min-width:700px){ .wins{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.win{ background:var(--sheet); border:1px solid var(--hair); border-radius:16px; padding:12px 12px 14px; display:grid; gap:4px; align-content:start; min-width:0; }
.win svg{ width:22px; height:22px; }
.wv{ font-family:var(--display); font-size:1.65rem; font-weight:600; line-height:1.1; margin-top:4px; }
.wc{ font-size:1rem; line-height:1.4; color:var(--ink-2); }

/* ---------- Checklist ---------- */
.todo{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.todo label{ position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; align-items:start; padding:13px 14px; background:var(--sheet); border:1px solid var(--edge); border-radius:14px; cursor:pointer; }
.todo input{ position:absolute; opacity:0; width:28px; height:28px; margin:0; left:14px; top:13px; }
.todo .box{ width:28px; height:28px; border-radius:9px; border:2px solid var(--edge); background:var(--sheet); display:grid; place-items:center; }
.todo .box::after{ content:""; width:12px; height:7px; border-left:3px solid var(--on-lav); border-bottom:3px solid var(--on-lav); transform:translate(0,-1px) rotate(-45deg); opacity:0; }
.todo input:checked + .box{ background:var(--lav); border-color:var(--lav); }
.todo input:checked + .box::after{ opacity:1; }
.todo input:focus-visible + .box{ outline:2px solid var(--lav); outline-offset:2px; }
.todo .tx{ font-size:1rem; line-height:1.45; padding-top:2px; }
.todo input:checked ~ .tx{ color:var(--muted); text-decoration:line-through; text-decoration-thickness:1.5px; }
.prog{ display:grid; gap:6px; }
.prog .bar{ height:10px; border-radius:5px; background:var(--band); overflow:hidden; }
.prog .bar span{ display:block; height:100%; width:0; background:var(--lav); border-radius:5px; transition:width .3s; }
.prog p{ font-size:1rem; color:var(--ink-2); font-weight:600; }
.fine{ font-size:1rem; color:var(--muted); }

/* ---------- Story timeline ---------- */
.legend{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:1rem; color:var(--ink-2); }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend i{ width:10px; height:10px; border-radius:50%; background:var(--dot); flex:none; }
.legend i.hollow{ background:var(--paper); box-shadow:inset 0 0 0 2px var(--lav); }
.story{ list-style:none; margin:0; padding:0; display:grid; }
.story > li{ display:grid; grid-template-columns:3.9rem minmax(0,1fr); gap:6px; }
.story .m{ font-family:var(--display); font-weight:600; font-size:1.12rem; line-height:1.2; }
.story ul{ list-style:none; margin:0; padding:0 0 18px 20px; border-left:2px solid var(--hair); display:grid; gap:9px; }
.story > li:last-child ul{ padding-bottom:0; }
.ev{ position:relative; font-size:1rem; line-height:1.42; color:var(--ink-2); }
.ev b{ color:var(--ink); }
.ev::before{ content:""; position:absolute; left:-26px; top:.34em; width:10px; height:10px; border-radius:50%; background:var(--dot); box-shadow:0 0 0 3px var(--paper); }
.good-d{ --dot:var(--good-ink); } .warn-d{ --dot:var(--warn-ink); } .serious-d{ --dot:var(--serious-ink); } .med-d{ --dot:var(--lav); } .past-d{ --dot:var(--context); }
.ev.next-d::before{ background:var(--paper); box-shadow:0 0 0 3px var(--paper), inset 0 0 0 2px var(--lav); }

/* ---------- Panels and figures ---------- */
.panel{ background:var(--sheet); border:1px solid var(--hair); border-radius:16px; padding:16px 14px; display:grid; gap:14px; min-width:0; }
@media (min-width:640px){ .panel{ padding:20px 22px; } }
.fig-h{ display:grid; gap:2px; }
.fig-h h3{ font-size:1.05rem; }
.fig-sub{ font-size:1rem; color:var(--muted); }
.keys{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:1rem; color:var(--ink-2); }
.key{ display:inline-flex; align-items:center; gap:7px; }
.sw-line{ width:16px; height:2px; border-radius:1px; background:var(--lav); flex:none; }
.sw-line.ctx{ background:var(--context); }
.sw-band, .sw-wait, .sw-known, .sw-half, .sw-maybe, .sw-zop, .sw-zlow, .sw-zok, .sw-target, .sw-reta{ width:14px; height:10px; border-radius:2px; flex:none; }
.sw-band{ background:var(--band); box-shadow:inset 0 0 0 1px var(--rule); }
.sw-wait{ background:var(--wait); box-shadow:inset 0 0 0 1px var(--rule); }
.sw-known{ background:var(--lav); }
.sw-half{ background:var(--lav); opacity:.45; }
.sw-maybe{ background:var(--lav-wash); box-shadow:inset 0 0 0 1px var(--lav); }
.sw-reta{ background:var(--sheet); border:1.25px dashed var(--ink-2); }
.sw-target{ background:var(--lav-wash); box-shadow:inset 0 0 0 1px var(--rule); }
.sw-zop{ background:var(--serious-wash); box-shadow:inset 0 0 0 1px var(--rule); }
.sw-zlow{ background:var(--warn-wash); box-shadow:inset 0 0 0 1px var(--rule); }
.sw-zok{ background:var(--good-wash); box-shadow:inset 0 0 0 1px var(--rule); }
.sw-ref{ width:16px; height:0; border-top:1.5px solid var(--muted); flex:none; }
.sw-ev{ width:2px; height:14px; background:var(--ink-2); flex:none; }
.sw-off{ width:16px; height:0; border-top:2px solid var(--rule); flex:none; }
.sw-dot{ width:9px; height:9px; border-radius:50%; background:var(--context); flex:none; }
.sw-dot.aug{ width:11px; height:11px; background:var(--lav); }
.sw-dose{ width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:8px solid var(--ink-2); flex:none; }
.cap{ font-size:1rem; line-height:1.5; color:var(--ink-2); }
.plotwrap{ position:relative; min-width:0; }
.plot{ width:100%; }
.plot svg{ display:block; }
.chart{ touch-action:pan-y; cursor:crosshair; }

/* SVG marks */
.grid{ stroke:var(--hair); stroke-width:1; }
.base{ stroke:var(--rule); stroke-width:1; }
.ref{ stroke:var(--muted); stroke-width:1.25; }
.ref0{ stroke:var(--muted); stroke-width:1; }
.vband{ fill:var(--band); fill-opacity:.85; }
.tband{ fill:var(--wait); }
.z-op{ fill:var(--serious-wash); }
.z-low{ fill:var(--warn-wash); }
.z-ok{ fill:var(--good-wash); }
.line{ fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.pt{ stroke:var(--sheet); stroke-width:2; }
.xhair{ stroke:var(--ink-2); stroke-width:1; }
.hit{ fill:transparent; pointer-events:all; }
.tick{ fill:var(--muted); font-family:var(--body); font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; }
.reflabel{ fill:var(--ink-2); font-family:var(--body); font-size:16px; font-weight:700; }
.dlabel{ fill:var(--ink); font-family:var(--body); font-size:16px; font-weight:700; paint-order:stroke; stroke:var(--sheet); stroke-width:3px; stroke-linejoin:round; }
.sband{ fill:var(--band); }
.spt{ fill:var(--context); stroke:var(--sheet); stroke-width:2; }
.spt.aug{ fill:var(--lav); }
.slabel{ fill:var(--ink); font-family:var(--body); font-size:16px; font-weight:700; }
.guide{ stroke:var(--hair); stroke-width:1; }
.testpt{ fill:var(--ink-2); stroke:var(--sheet); stroke-width:2; }
.testdia{ fill:var(--lav); stroke:var(--sheet); stroke-width:2; }
.scanpt{ fill:var(--ink-2); stroke:var(--sheet); stroke-width:1.5; }
.dosept{ fill:var(--ink-2); }
.known{ fill:var(--lav); }
.half{ fill:var(--lav); fill-opacity:.45; }
.maybe{ fill:var(--lav-wash); stroke:var(--lav); stroke-width:1; }
.reta{ fill:var(--sheet); stroke:var(--ink-2); stroke-width:1.25; stroke-dasharray:3 2; }
.offtrack{ stroke:var(--rule); stroke-width:2; stroke-linecap:round; }
.evline{ stroke:var(--ink-2); stroke-width:1; }
.evlabel{ fill:var(--ink-2); font-family:var(--body); font-size:16px; font-weight:700; paint-order:stroke; stroke:var(--sheet); stroke-width:3px; stroke-linejoin:round; }
.gapline{ fill:none; stroke:var(--context); stroke-width:1.5; stroke-dasharray:2 4; stroke-linecap:round; }
.gaplabel{ fill:var(--muted); font-family:var(--body); font-size:16px; font-weight:600; }
.ln-label{ fill:var(--ink); font-family:var(--body); font-size:16px; font-weight:700; }
.ln-note{ fill:var(--muted); font-family:var(--body); font-size:16px; font-weight:600; }
.onbar{ fill:var(--on-lav); font-family:var(--body); font-size:16px; font-weight:700; }
.inbar{ fill:var(--ink-2); font-family:var(--body); font-size:16px; font-weight:600; }
.a1c-track{ fill:var(--band); }
.a1c-target{ fill:var(--lav-wash); stroke:var(--rule); stroke-width:1; }
.a1c-mark{ stroke:var(--ink-2); stroke-width:1.5; }
.big-dot{ fill:var(--lav); stroke:var(--sheet); stroke-width:3; }
.big-label{ fill:var(--ink); font-family:var(--body); font-size:16px; font-weight:700; }

/* Tooltip */
.tip{ position:absolute; z-index:4; pointer-events:none; min-width:132px; max-width:240px; background:var(--sheet); border:1px solid var(--rule); border-radius:10px; padding:8px 10px; box-shadow:0 6px 18px var(--shadow); font-size:1rem; line-height:1.4; }
.tip .tt{ font-weight:700; color:var(--muted); margin-bottom:3px; font-size:1rem; letter-spacing:.02em; }
.tip .row{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.tip .sw{ width:12px; height:2px; border-radius:1px; align-self:center; flex:none; }
.tip .val{ font-weight:700; color:var(--ink); font-size:1rem; font-variant-numeric:tabular-nums; }
.tip .flag{ font-weight:700; font-size:1rem; color:var(--ink); background:var(--lav-wash); border-radius:3px; padding:0 4px; }
.tip .unit{ color:var(--muted); font-size:1rem; }
.tip .nm{ color:var(--ink-2); }
.tip .note{ color:var(--ink-2); font-size:1rem; }

/* 19 Aug strips */
.strips{ display:grid; gap:14px; }
@media (min-width:680px){ .strips{ grid-template-columns:1fr 1fr; column-gap:32px; } }
.strip{ display:grid; gap:2px; min-width:0; }
.strip-head{ display:flex; justify-content:space-between; align-items:baseline; gap:2px 10px; flex-wrap:wrap; }
.sn{ font-weight:700; font-size:1rem; }
.su{ font-size:1rem; color:var(--muted); font-weight:600; margin-left:6px; }
.sd{ font-size:1rem; color:var(--ink-2); font-weight:600; }
.why{ display:grid; gap:12px; border-top:1px solid var(--hair); padding-top:16px; }
.flow{ display:grid; gap:6px; justify-items:stretch; }
.node{ display:grid; gap:1px; border:1px solid var(--rule); border-radius:12px; padding:9px 12px; background:var(--paper); }
.node b{ font-size:1rem; }
.node span{ font-size:1rem; color:var(--ink-2); line-height:1.35; }
.node.hot{ background:var(--lav-wash); border-color:var(--lav); }
.op{ justify-self:center; color:var(--muted); font-weight:700; font-size:1.1rem; line-height:1; }
.op.arr{ transform:rotate(90deg); }
@media (min-width:700px){
  .flow{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,.8fr) auto minmax(0,1fr); align-items:center; gap:8px; }
  .op.arr{ transform:none; }
}
.why-note{ font-size:1rem; line-height:1.5; color:var(--ink-2); }
.why-note strong{ color:var(--ink); }

/* "Read more" drawers */
details.more{ border-top:1px solid var(--hair); }
details.more > summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:50px; cursor:pointer; list-style:none; font-weight:700; font-size:1rem; color:var(--lav-deep); }
details.more > summary::-webkit-details-marker{ display:none; }
details.more > summary::after{ content:""; flex:none; width:10px; height:10px; border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor; transform:translateY(-3px) rotate(45deg); margin-right:6px; transition:transform .2s; }
details.more[open] > summary::after{ transform:translateY(2px) rotate(-135deg); }
.more-body{ display:grid; gap:10px; padding-bottom:6px; }
.more-body p{ font-size:1rem; line-height:1.55; color:var(--ink-2); }
.more-body p b{ color:var(--ink); }

/* Bones and hip */
.findings{ display:grid; gap:18px; }
@media (min-width:640px){ .findings{ grid-template-columns:1fr 1fr; column-gap:28px; } }
.flist{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:10px; }
.flist li{ position:relative; padding-left:26px; font-size:1rem; line-height:1.45; color:var(--ink-2); }
.flist li b{ color:var(--ink); }
.flist svg{ position:absolute; left:0; top:2px; width:18px; height:18px; }
.flist.found li::before{ content:""; position:absolute; left:4px; top:.5em; width:9px; height:9px; border-radius:2px; background:var(--lav); }
.helps{ display:grid; gap:12px; }
.help{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; align-items:start; }
.help .n{ width:30px; height:30px; border-radius:50%; background:var(--lav-wash); color:var(--lav-deep); font-weight:700; font-size:1rem; display:grid; place-items:center; }
.help p{ font-size:1rem; line-height:1.5; color:var(--ink-2); }
.help p b{ color:var(--ink); display:block; font-size:1rem; }

/* Medicines */
.meds{ display:grid; gap:10px; }
@media (min-width:700px){ .meds{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.med{ background:var(--sheet); border:1px solid var(--hair); border-radius:16px; padding:14px 16px; display:grid; gap:8px; align-content:start; min-width:0; }
.med-h{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:center; }
.med-h .ic{ width:36px; height:36px; border-radius:11px; background:var(--lav-wash); color:var(--lav-deep); display:grid; place-items:center; }
.med-h .ic svg{ width:21px; height:21px; }
.med .m-sub{ font-size:1rem; line-height:1.45; color:var(--muted); }
.med ul{ margin:0; padding-left:1.1em; display:grid; gap:6px; font-size:1rem; line-height:1.45; color:var(--ink-2); }
.callout{ border-radius:16px; padding:14px 16px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; }
.callout.warn{ background:var(--warn-wash); }
.callout.serious{ background:var(--serious-wash); }
.callout svg{ width:20px; height:20px; margin-top:2px; }
.callout div{ display:grid; gap:6px; min-width:0; }
.callout p{ font-size:1rem; line-height:1.5; color:var(--ink); }
.callout ul{ margin:0; padding-left:1.1em; display:grid; gap:4px; font-size:1rem; line-height:1.45; color:var(--ink); }
.note{ font-size:1rem; color:var(--ink-2); }

/* Supplements */
.sgroups{ display:grid; gap:18px; }
.sg-h{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.count{ font-size:1rem; color:var(--muted); }
.slist{ list-style:none; margin:10px 0 0; padding:0; border-top:1px solid var(--hair); }
.slist li{ display:grid; gap:3px 20px; padding:12px 0; border-bottom:1px solid var(--hair); }
@media (min-width:640px){ .slist li{ grid-template-columns:220px minmax(0,1fr); } }
.s-name{ font-weight:700; font-size:1rem; line-height:1.35; }
.s-brand{ display:block; font-size:1rem; color:var(--muted); font-weight:600; margin-top:2px; }
.slist p{ font-size:1rem; line-height:1.45; color:var(--ink-2); }
details.sg-more{ border-top:0; }
details.sg-more > summary{ min-height:52px; }
details.sg-more .slist{ margin-top:0; }

/* Buttons */
.btn{ font:inherit; font-weight:700; font-size:1rem; min-height:48px; padding:0 20px; border-radius:999px; border:0; background:var(--lav); color:var(--on-lav); cursor:pointer; touch-action:manipulation; display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; }
.btn:active{ transform:scale(.98); }
.btn.ghost{ background:var(--sheet); color:var(--ink); border:1.5px solid var(--edge); }
.btn.wide{ width:100%; }
.out{ width:100%; min-height:140px; font:inherit; font-size:1rem; line-height:1.45; border:1.5px solid var(--lav); border-radius:12px; padding:10px 12px; background:var(--sheet); color:var(--ink); resize:vertical; }
.status-line{ font-size:1rem; color:var(--ink-2); font-weight:600; min-height:1.3em; }

/* Questions for the doctors */
.qgroups{ display:grid; gap:10px; }
details.qd{ background:var(--sheet); border:1px solid var(--edge); border-radius:16px; padding:0 16px; }
details.qd > summary{ display:flex; align-items:center; gap:10px; min-height:56px; cursor:pointer; list-style:none; }
details.qd > summary::-webkit-details-marker{ display:none; }
details.qd > summary h3{ flex:1; font-size:1.05rem; }
details.qd > summary .n{ font-size:1rem; font-weight:700; color:var(--muted); }
details.qd > summary::after{ content:""; flex:none; width:10px; height:10px; border-right:2.5px solid var(--ink-2); border-bottom:2.5px solid var(--ink-2); transform:translateY(-3px) rotate(45deg); margin-right:4px; transition:transform .2s; }
details.qd[open] > summary::after{ transform:translateY(2px) rotate(-135deg); }
details.qd ul{ margin:0; padding:2px 0 16px; list-style:none; display:grid; gap:11px; }
details.qd li{ position:relative; padding-left:20px; font-size:1rem; line-height:1.45; }
details.qd li::before{ content:""; position:absolute; left:1px; top:.5em; width:9px; height:9px; border-radius:2px; box-shadow:inset 0 0 0 1.5px var(--lav); }

/* Recommendations */
.top3{ list-style:none; margin:0; padding:0; display:grid; gap:10px; counter-reset:t; }
.top3 li{ counter-increment:t; display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; align-items:start; background:var(--sheet); border:1px solid var(--hair); border-radius:16px; padding:14px; min-width:0; }
.top3 li::before{ content:counter(t); width:44px; height:44px; border-radius:14px; background:var(--lav); color:var(--on-lav); font-family:var(--display); font-size:1.45rem; font-weight:600; line-height:1; display:grid; place-items:center; }
.top3 p{ font-size:1rem; line-height:1.45; color:var(--ink-2); min-width:0; }
.top3 p b{ display:block; font-size:1.05rem; line-height:1.3; color:var(--ink); margin-bottom:3px; }
details.qd .rxlist{ padding:2px 0 16px; gap:14px; }
details.qd .rxlist li{ padding-left:0; display:grid; gap:3px; }
details.qd .rxlist li::before{ content:none; }
.rx-h{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.rx-h b{ font-size:1rem; line-height:1.3; min-width:0; }
.rxlist p{ font-size:1rem; line-height:1.45; color:var(--ink-2); }
.when{ flex:none; font-size:1rem; font-weight:700; line-height:1.3; padding:2px 9px; border-radius:999px; background:var(--c-wash); color:var(--ink); white-space:nowrap; }
details.qd .meds{ padding:2px 0 16px; }
.med .why-l, .med .ask-l{ font-size:1rem; line-height:1.45; color:var(--ink-2); }
.med .why-l b, .med .ask-l b{ color:var(--ink); }
.med .ask-l{ background:var(--lav-soft); border-radius:10px; padding:8px 10px; }
details.qd .helps{ padding:2px 0 16px; }
details.qd .flist{ margin:0; padding:2px 0 16px; }
details.qd .flist li{ padding-left:26px; font-size:1rem; }
details.qd .flist li::before{ content:none; }
details.qd .chg{ padding:2px 0 12px; }
details.qd .chg li{ padding:12px 14px; font-size:1rem; }
details.qd .chg li::before{ content:none; }
details.qd .dose-note{ padding-bottom:16px; }
.sub-h4{ margin-top:4px; }

/* Cumulative table */
.tablewrap{ overflow-x:auto; background:var(--sheet); border:1px solid var(--hair); border-radius:12px; -webkit-overflow-scrolling:touch; }
table.cum{ border-collapse:separate; border-spacing:0; width:100%; min-width:660px; font-size:1rem; }
table.cum.small{ min-width:420px; }
.cum th, .cum td{ padding:8px 10px; text-align:right; border-bottom:1px solid var(--hair); white-space:nowrap; }
.cum thead th{ font-size:1rem; font-weight:700; color:var(--ink-2); }
.cum .stick{ position:sticky; left:0; z-index:1; background:var(--sheet); text-align:left; box-shadow:inset -1px 0 0 var(--hair); white-space:normal; width:8.5rem; }
.cum .tn2{ display:block; font-weight:700; color:var(--ink); }
.cum .tu{ display:block; font-size:1rem; color:var(--muted); font-weight:600; }
.cum .rng{ font-family:var(--mono); color:var(--muted); font-size:1rem; }
.cum td.v{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); }
.cum td.fl{ font-weight:600; background:var(--lav-wash); }
.cum td.note-c{ white-space:normal; text-align:left; color:var(--ink-2); min-width:13rem; }
.cum .f{ font-size:1rem; font-weight:700; margin-left:4px; color:var(--ink); }
.cum .q{ display:inline-grid; place-items:center; width:22px; height:22px; margin-left:4px; border-radius:50%; background:var(--warn-ink); color:#fff; font-size:1rem; font-weight:800; vertical-align:1px; }
.cum td.chk{ background:var(--warn-wash); }
.cum td[role=button]{ cursor:pointer; }
.cum td[role=button]:active{ background:var(--lav-wash); }
.cum tr.grp th, .cum tr.grp td{ background:var(--paper); font-size:1rem; font-weight:700; color:var(--ink-2); text-transform:none; letter-spacing:.02em; padding-top:10px; }
.cum thead th.latest{ color:var(--ink); }
.cum td.latest{ box-shadow:inset 1px 0 0 var(--rule); }
.fn{ display:grid; gap:6px; font-size:1rem; color:var(--ink-2); }
.fn p{ padding-left:14px; position:relative; }
.fn p::before{ content:""; position:absolute; left:0; top:.66em; width:6px; height:1.5px; background:var(--muted); }
.sub-h{ font-size:1.05rem; margin-top:6px; }
.swipe{ font-size:1rem; color:var(--muted); }

/* Update log */
.log{ list-style:none; margin:0; padding:0 0 0 16px; display:grid; gap:16px; border-left:2px solid var(--hair); }
.log li{ display:grid; gap:3px; font-size:1rem; line-height:1.5; color:var(--ink-2); }
.log time{ font-size:1rem; font-weight:700; color:var(--ink-2); }
.waiting{ display:grid; gap:10px; }
.waiting ul{ margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.waiting li{ position:relative; padding-left:26px; font-size:1rem; line-height:1.45; color:var(--ink-2); }
.waiting li svg{ position:absolute; left:0; top:2px; width:18px; height:18px; }

/* Your answers */
.mum{ background:var(--sheet); border:2px solid var(--lav); border-radius:20px; padding:16px 14px; display:grid; gap:18px; }
@media (min-width:640px){ .mum{ padding:22px 24px; } }
.mumlist{ list-style:none; margin:0; padding:0; counter-reset:q; display:grid; gap:20px; }
.mumlist li{ counter-increment:q; display:grid; gap:8px; }
.mumlist .q{ display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; font-size:1.02rem; line-height:1.45; font-weight:400; color:var(--ink-2); }
.mumlist .q b{ color:var(--ink); font-weight:700; }
.mumlist .q::before{ content:counter(q); width:30px; height:30px; border-radius:50%; background:var(--lav-wash); color:var(--lav-deep); font-weight:700; font-size:1rem; display:grid; place-items:center; }
.mumlist textarea{ width:100%; min-height:54px; resize:none; overflow:hidden; font:inherit; font-size:1.0625rem; line-height:1.45; color:var(--ink); background:var(--lav-soft); border:1.5px solid var(--edge); border-radius:12px; padding:12px 14px; }
.mumlist textarea:focus{ outline:none; border-color:var(--lav); background:var(--sheet); box-shadow:0 0 0 3px var(--lav-wash); }
.mumlist textarea::placeholder{ color:var(--muted); }
.mumlist li:first-child::before, .mumlist li.split::before{ font-size:1rem; font-weight:700; color:var(--ink-2); }
.mumlist li:first-child::before{ content:"Most useful now"; }
.mumlist li.split{ border-top:1px solid var(--hair); padding-top:18px; }
.mumlist li.split::before{ content:"When you have time"; }
.mum-actions{ display:flex; flex-wrap:wrap; gap:10px; }
#copy-ans{ flex:1 1 auto; }
#clear-ans{ flex:0 0 auto; }

footer{ margin-top:52px; padding-top:16px; border-top:1px solid var(--hair); display:grid; gap:8px; font-size:1rem; color:var(--muted); }
footer details.more{ border-top:0; }
footer ul{ margin:0; padding-left:1.1em; display:grid; gap:6px; }
footer a{ color:var(--ink-2); }

/* ---------- Section picker (replaces the sideways pill bar) ---------- */
.secbar{ position:sticky; top:var(--sat, 0px); z-index:20; margin-inline:calc(var(--gutter) * -1); padding:8px var(--gutter); background:var(--paper); border-bottom:1px solid var(--hair); }
.secbtn{ width:100%; min-height:52px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:0 16px; border-radius:14px; border:1.5px solid var(--edge); background:var(--sheet); color:var(--ink); font:inherit; font-weight:700; font-size:1.0625rem; text-align:left; cursor:pointer; }
.secbtn .ico{ width:22px; height:22px; color:var(--lav-deep); }
.secbtn .cur{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.secbtn .chev{ width:10px; height:10px; border-right:2.5px solid var(--ink-2); border-bottom:2.5px solid var(--ink-2); transform:translateY(-3px) rotate(45deg); margin-right:4px; }

/* ---------- Big numbers (e.g. a sleep study) ---------- */
.facts{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.fact{ background:var(--paper); border-radius:14px; padding:12px; display:grid; gap:3px; align-content:start; min-width:0; }
.fact .fv{ font-family:var(--display); font-size:1.9rem; font-weight:600; color:var(--ink); line-height:1.05; }
.fact .fv small{ font-family:var(--body); font-size:1rem; font-weight:600; color:var(--muted); margin-left:5px; }
.fact .fl{ font-size:1rem; font-weight:700; color:var(--ink); line-height:1.3; }
.fact .fn{ font-size:1rem; color:var(--ink-2); line-height:1.45; }
.study-note{ font-size:1rem; line-height:1.55; color:var(--ink-2); }
.study-note b{ color:var(--ink); }

/* ---------- Suggestions for the doctors ---------- */
.sugs{ display:grid; gap:12px; }
.sug{ background:var(--sheet); border:1px solid var(--edge); border-left:6px solid var(--lav); border-radius:16px; padding:14px 16px; display:grid; gap:10px; min-width:0; }
.sug-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.sug-kind{ font-weight:700; font-size:1rem; color:var(--lav-deep); }
.sug h3{ font-size:1.15rem; }
.sug .ft{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-weight:700; font-size:1rem; }
.sug .ft span{ padding:4px 10px; border-radius:8px; background:var(--band); color:var(--ink-2); }
.sug .ft span.to{ background:var(--lav-wash); color:var(--ink); }
.sug .ft i{ font-style:normal; color:var(--muted); }
.sug-who{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:start; background:var(--lav-soft); border:1px solid var(--lav-wash); border-radius:12px; padding:10px 12px; font-size:1rem; line-height:1.45; color:var(--ink); }
.sug-who .ico{ width:22px; height:22px; color:var(--lav-deep); margin-top:1px; }
.sug-why{ font-size:1rem; line-height:1.5; color:var(--ink-2); }
.sug-more{ border-top:1px solid var(--hair); }
.sug-dl{ margin:0; display:grid; gap:10px; }
.sug-dl div{ display:grid; gap:2px; }
.sug-dl dt{ font-weight:700; font-size:1rem; color:var(--ink); }
.sug-dl dd{ margin:0; font-size:1rem; line-height:1.5; color:var(--ink-2); }
.sug-src{ margin:0; padding-left:1.1em; display:grid; gap:4px; font-size:1rem; color:var(--ink-2); }
.sug-outcome{ font-size:1rem; line-height:1.45; color:var(--ink); background:var(--good-wash); border-radius:10px; padding:8px 12px; }
.sug .btn{ justify-self:start; }

/* ---------- Tap-to-answer questions ---------- */
.opts{ display:flex; flex-wrap:wrap; gap:8px; }
.opt{ font:inherit; font-weight:700; font-size:1rem; min-height:48px; padding:0 18px; border-radius:999px; border:1.5px solid var(--edge); background:var(--sheet); color:var(--ink); cursor:pointer; touch-action:manipulation; }
.opt[aria-pressed="true"]{ background:var(--lav); border-color:var(--lav); color:var(--on-lav); }
.opt:focus-visible{ outline:2px solid var(--lav); outline-offset:2px; }
details.qmore{ border-top:1px solid var(--hair); }
details.qmore > .mumlist{ padding:6px 0 4px; }
.mumlist.later li:first-child::before{ content:none; }

/* Long words and links (web addresses, medicine names) wrap instead of widening cards, at any text size. */
.sugs, .sug, .meds, .med, .sgroups, .more-body, .qgroups, .sug-dl, .sug-dl div{ grid-template-columns:minmax(0,1fr); }
.sug, .med, .more-body, .sug-dl dd, .sug-src li, .sug .ft span, .fact, .chip{ overflow-wrap:anywhere; }
.sug .ft span{ min-width:0; max-width:100%; }
.sug .btn, .t-card .btn{ white-space:normal; max-width:100%; text-align:center; }
.sug .btn, .t-card .btn{ padding-block:8px; line-height:1.3; }
/* Chips and badges wrap rather than run off the screen at larger text sizes. */
.chip, .when{ white-space:normal; max-width:100%; }
.rx-h{ flex-wrap:wrap; }
.sg-h > *{ min-width:0; }
.btn{ white-space:normal; max-width:100%; text-align:center; padding-block:8px; line-height:1.3; }

/* Medicine suggestion dose table */
.dose-table{ width:100%; border-collapse:collapse; margin:8px 0; font-size:1rem; background:var(--surface,#fff); border:1px solid var(--hair); border-radius:10px; overflow:hidden; }
.dose-table caption{ text-align:left; font-weight:700; color:var(--lav-deep); padding:6px 2px; }
.dose-table th, .dose-table td{ text-align:left; padding:8px 10px; border-top:1px solid var(--hair); vertical-align:top; }
.dose-table th{ width:34%; font-weight:600; color:var(--ink-2); }
.sec-more{ margin-top:6px; }