:root{
  /* MOSS & MINERAL — light "paper + card"; roles differ by LAYOUT not hue; two accents
     (moss brand + terracotta alert). --blue stays chart-series only (wearable line). */
  --ink:#23292b; --ink2:#4b5457; --muted:#5f6663; --hair:#dde3e1; --bg:#ecefec; --surface:#f8faf8;
  --brand:#4f6b4a; --brand-soft:#e2ebe0;
  --alert:#92542f; --alert-soft:#f0e3d8;
  --blue:#3a6488;                 /* muted mineral blue — the wearable overlay series line + axis only */
  --info:#0b5cad;                 /* mineral info blue — detail/preview chrome (KPI "improving" is green now, F6) */
  --shadow:0 6px 18px rgba(35,41,43,.06); --shadow-lg:0 14px 34px rgba(35,41,43,.10);
  --font-ui:'IBM Plex Sans',Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* --- new v2 pattern tokens --- */
  --trend-good:var(--brand); --trend-bad:var(--alert); --trend-none:#6b736f;
  --notice:#6d78a8;   /* periwinkle — the staff-panel coordination-status dot (.prow-dot.notice) only; NOT a notification */
  /* --- radius scale (was scattered across 14 literal values) --- */
  --radius:16px; --radius-sm:10px; --radius-pill:999px;
}
/* Extended semantic palette (design-system tokenisation): every raw colour that used to be inlined
   across the rules now resolves here. The neutral/slate greys are CONSOLIDATED (accidental
   near-duplicates from different build sessions merged — imperceptible shifts, flagged for sign-off);
   the brand/status shades are PRESERVED EXACTLY (no perceptible change). Still a light-only system;
   roles differ by LAYOUT, not hue — these are status/utility colours, not chrome. */
:root{
  /* Extended semantic palette — cooled onto the mineral axis; STATUS HUE + AA preserved. */
  --slate-50:#f1f4f1; --slate-100:#e7ece8; --slate-200:#d2d8d3; --slate-300:#c4ccc5;
  --slate-400:#8b938c; --slate-500:#5d6560; --slate-600:#525a54; --slate-700:#444b46; --slate-800:#333a35;
  --slate-250:#ccd3cd; --slate-750:#3a423d;   /* borders / safety-critical emergency copy — kept dark */
  --good-ink:#0a6e4a; --good-line:#bcdcc6;
  --amber-ink:#7d5a14; --amber-tint:#f1ead4;  /* kept distinct: "new/pending" ≠ terracotta */
  --alert-ink:#9a4423; --deny-bg:#f3ddd3; --warn-tint:#f6e9e0; --rose-border:#ecd3c6;
  --rose-mute-bg:#ebe6e2; --rose-mute-ink:#825549;
  --sky-bg:#e2e9f0;         /* own-message / scheduled / preview */
  --info-soft:#eaeef4; --info-border:#cdd8e6; --preview-border:#c2d6e8;
  --indigo-bg:#ecedf7; --indigo-ink:#3b3a86;   /* certified / protocol */
  --emerg-bg:#7f1d1d; --ink-code:#171d1c;      /* emergency red kept unmistakable; code bg cooled */
  --rail-bg:#e2e7e2; --chev:#b9c0ba;           /* rail-bg is the cool sage sidebar */
  --shadow-switch:0 1px 2px rgba(20,26,24,.22);
  --shadow-emerg:0 6px 18px rgba(127,29,29,.35);
  --shadow-danger:0 6px 18px rgba(157,90,51,.10);
}
/* Self-hosted IBM Plex (woff2, latin subset) — same-origin so the strict CSP (default-src 'self')
   allows it; font-display:swap keeps text visible while the face loads. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/ibm-plex-sans-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/ibm-plex-sans-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/ibm-plex-sans-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/ibm-plex-sans-700.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/ibm-plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/ibm-plex-mono-500.woff2) format('woff2')}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);font-weight:700}
.eyebrow a{color:inherit;text-decoration:none}
.h1{font-size:26px;font-weight:700;margin:6px 0 2px;letter-spacing:-.02em;color:var(--ink)}
.sub{font-size:13px;color:var(--muted);margin:0}

/* range chips */
.ranges{display:flex;gap:7px;margin-top:16px;flex-wrap:wrap}
.ranges button{font-size:12px;font-weight:600;color:var(--muted);background:var(--surface);
  padding:7px 13px;border-radius:var(--radius-sm);border:1px solid var(--hair);cursor:pointer}
.ranges button.on{background:var(--brand);color:var(--surface);border-color:var(--brand)}
/* vitals control bar (range + overlay chips, inside the #vitals htmx fragment) */
.vitals-controls{display:flex;align-items:center;gap:14px;padding:0 18px;margin-top:10px;flex-wrap:wrap}
.vitals-controls .ranges{margin-top:0;margin-left:0}
.overlays{display:flex;align-items:center;gap:7px;margin-left:auto;flex-wrap:wrap}
.overlays-lab{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.overlays button{font-size:12px;font-weight:600;color:var(--muted);background:var(--surface);
  padding:7px 13px;border-radius:var(--radius-sm);border:1px solid var(--hair);cursor:pointer}
.overlays button.on{background:var(--brand);color:var(--surface);border-color:var(--brand)}

/* deck */
.deck{padding:16px 14px 30px;display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:680px){.deck{grid-template-columns:1fr 1fr}}

/* card */
.card{background:var(--surface);border-radius:var(--radius);padding:16px 16px 14px;box-shadow:var(--shadow)}
.chead{display:flex;align-items:center;gap:9px;margin-bottom:2px}
.cname{font-size:16px;font-weight:720;letter-spacing:-.01em}
.chip{font-size:11px;font-weight:700;padding:3.5px 9px;border-radius:var(--radius-sm);line-height:1.1}
.chip.good{background:var(--brand-soft);color:var(--good-ink)}
.chip.warn{background:var(--alert-soft);color:var(--alert)}
.chip.flat{background:var(--slate-100);color:var(--slate-600)}
.chip.info{background:var(--info-soft);color:var(--info)}
.info{margin-left:auto;font-size:12px;color:var(--muted);font-weight:600}
.stats{display:flex;gap:24px;margin:10px 2px 4px}
.stat .lab{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600}
.stat .val{font-size:19px;font-weight:740;margin-top:3px}
.stat .val.g{color:var(--brand)}

/* chart svg classes (emitted by internal/http/chart) */
.chart{display:block;width:100%;height:auto;margin-top:4px}
.band{fill:var(--brand-soft)}
.line{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.dot{fill:var(--surface);stroke:var(--ink);stroke-width:2}
.dot-last{fill:var(--ink);stroke:var(--surface);stroke-width:2.4}
.marker{stroke:var(--alert);stroke-width:1.5;stroke-dasharray:4 3}
/* wearable streams render in calm blue */
.kind-wearable .line{stroke:var(--blue)}
.kind-wearable .dot-last{fill:var(--blue)}

/* ---- v2 chart language: trend-coloured line/dot (layers over the --ink default via specificity) */
.line.good, .hero .line.good{stroke:var(--trend-good)}
.line.bad,  .hero .line.bad {stroke:var(--trend-bad)}
.line.none, .hero .line.none{stroke:var(--trend-none)}
.dot-last.good, .hero .dot-last.good{fill:var(--trend-good)}
.dot-last.bad,  .hero .dot-last.bad {fill:var(--trend-bad)}
.dot-last.none, .hero .dot-last.none{fill:var(--trend-none)}

/* target line — a fixed goalpost, not a status, so always brand (dashed), never a trend colour */
.target, .hero .target{stroke:var(--brand);stroke-width:1.5;stroke-dasharray:5 3}
.target-label{fill:var(--brand);font-weight:700;font-size:7.5px}
.hero .target-label{font-size:10px}

/* area fill — opt-in filled trend (a "sparkline"); bare default is a neutral tint, reusing existing
   tokens (no new colour introduced) */
.area{fill:var(--slate-100);opacity:.85}
.area.good, .hero .area.good{fill:var(--brand-soft)}
.area.bad,  .hero .area.bad {fill:var(--alert-soft)}

/* dual-line compare (bio-age-style) — the muted dashed reference line + the shaded gap to it */
.hero .compare{fill:none;stroke:var(--trend-none);stroke-width:2;stroke-dasharray:4 4}
.hero .gap{fill:var(--brand-soft);opacity:.85}
.hero .clegend{fill:var(--muted);font-weight:700;font-size:11px}

/* ---- hero chart (the featured fused vitals) ---- */
.hero-card{margin:16px 14px 4px;background:var(--surface);border-radius:var(--radius);padding:16px 18px 12px;
  box-shadow:var(--shadow)}
.hero-cap{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:6px}
.hero{display:block;width:100%;height:auto}
.hero .htitle{fill:var(--ink);font-weight:740;font-size:12px}
.hero .ptitle{fill:var(--muted);font-weight:700;font-size:11px}
.hero .pval{fill:var(--ink);font-weight:800;font-size:13px}
.hero .olegend{fill:var(--blue);font-weight:700;font-size:11px}
.hero .grid{stroke:var(--hair);stroke-width:1}
.hero .gridv{stroke:var(--hair);stroke-width:1;opacity:.6}
.hero .ytick{fill:var(--muted);font-size:10px;text-anchor:end}
.hero .xtick{fill:var(--muted);font-size:10px}
.hero .otick{fill:var(--blue);font-size:10px;opacity:.85}
.hero .band{fill:var(--brand-soft)}
.hero .line{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.hero .dot{fill:var(--surface);stroke:var(--ink);stroke-width:2}
.hero .dot-last{fill:var(--ink);stroke:var(--surface);stroke-width:2.4}
.hero .oline{fill:none;stroke:var(--blue);stroke-width:2;stroke-dasharray:5 3;opacity:.9}
.hero .odot{fill:var(--blue);opacity:.9}
/* a 2nd+ overlay has no room in the one corner legend slot, so it labels itself by its last point */
.hero .olabel{fill:var(--blue);font-weight:700;font-size:9px}
.hero .marker{stroke:var(--alert);stroke-width:1.5;stroke-dasharray:4 3}
.hero .flag{fill:var(--alert);font-weight:700;font-size:10px;paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.hero circle{cursor:pointer}

/* empty state */
.empty{padding:50px 20px;text-align:center;color:var(--muted)}

/* ---- shared system states (v2 Phase 5 — Turn 9c): loading / empty / error ---- */
.state-box{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.state-icon{width:38px;height:38px;border-radius:var(--radius-sm);border:1.5px dashed var(--hair);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.state-icon.err{border:0;background:var(--alert-soft);color:var(--alert);font-weight:700;font-size:17px}
.state-title{font-size:13.5px;font-weight:650;color:var(--ink)}
.state-detail{font-size:12px;color:var(--muted);max-width:32ch}
.state-label{font-size:13px;color:var(--muted)}
.state-error .mini-ghost{margin-top:4px}

/* ---- Health Home (Phase 2) ---- */
/* composite Vitality Index headline under the greeting */
.vitality{margin-top:12px;display:flex;flex-direction:column;gap:6px;padding:12px 15px;border-radius:var(--radius);
  background:var(--brand-soft);border:1px solid var(--hair);max-width:max-content}
.vit-main{display:flex;align-items:center;gap:13px}
.vit-score{font-size:40px;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.vit-score.good{color:var(--brand)}
.vit-score.warn{color:var(--alert)}
.vit-meta{display:flex;flex-direction:column;gap:3px}
.vit-cap{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700}
.vit-status{font-size:13px;font-weight:740;color:var(--ink2)}
.vit-status.good{color:var(--brand)}
.vit-status.warn{color:var(--alert)}

/* generic home card + section */
.hcard{margin:14px 14px 0;background:var(--surface);border-radius:var(--radius);padding:16px 18px;
  box-shadow:var(--shadow)}
.hcard-cap{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:8px}
.appt-when{font-size:19px;font-weight:760;letter-spacing:-.01em}
.appt-meta{font-size:13.5px;color:var(--muted);font-weight:500;margin-top:3px}
.appt .hcard-cap{color:var(--brand)}

/* ---- bio-age bar (the younger/older fill under the headline metric — the card wrapper was retired
   in the F2 reset; the metric now carries the "Biological age" label, so no captioned card here) ---- */
.bioage-bar{display:block;width:100%;height:auto;margin-top:8px}
.bioage-bar .ba-track{fill:var(--slate-100)}
.bioage-bar .ba-fill-good{fill:var(--brand)}
.bioage-bar .ba-fill-warn{fill:var(--alert)}
.bioage-bar .ba-tick{stroke:var(--ink);stroke-width:2}
.bioage-bar .ba-ticklab{fill:var(--muted);font-weight:600}
.bioage-bar .ba-dot-good{fill:var(--brand)}
.bioage-bar .ba-dot-warn{fill:var(--alert)}

/* care-plan checklist */
.plan{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.plan-item{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--hair)}
.plan-item:last-child{border-bottom:0}
.plan-check{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--brand-soft);color:var(--good-ink);
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.plan-label{font-size:14.5px;font-weight:650;color:var(--ink)}
.plan-since{margin-left:auto;font-size:12px;color:var(--muted);font-weight:600}

/* ---- "one focus, then unpack" — the Home focus card + quiet list (redesign Phase 3) ---- */
/* one stated priority with a left accent bar (tone-coloured), then the calm secondary rows */
.focus{position:relative;overflow:hidden;margin:16px 14px 0;background:var(--surface);
  border:1px solid var(--hair);border-radius:var(--radius);padding:19px 18px 18px 22px;box-shadow:var(--shadow)}
.focus::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand)}
.focus.warn::before{background:var(--alert)}
.focus.flat::before{background:var(--slate-300)}
.focus.good::before{background:var(--brand)}
.focus-eyebrow{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--brand);font-weight:700}
.focus.warn .focus-eyebrow{color:var(--alert)}
.focus-title{font-size:25px;font-weight:760;letter-spacing:-.015em;color:var(--ink);line-height:1.08;margin-top:8px}
.focus-detail{font-size:14px;color:var(--ink2);line-height:1.5;margin-top:8px;max-width:56ch}
.focus-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.focus-btn{display:inline-flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700;
  padding:10px 15px;border-radius:11px;border:1px solid var(--brand);background:var(--brand);color:var(--surface);text-decoration:none}
.focus-btn:hover{box-shadow:var(--shadow)}
.focus-btn.ghost{background:var(--surface);color:var(--ink2);border-color:var(--hair)}
.focus-btn.ghost:hover{border-color:var(--brand);color:var(--brand)}
.focus-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.quiet-list{margin:12px 14px 0;background:var(--surface);border:1px solid var(--hair);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow)}
.quiet-row{display:flex;align-items:center;gap:11px;padding:13px 15px;border-top:1px solid var(--hair);
  text-decoration:none;color:inherit}
.quiet-row:first-child{border-top:0}
a.quiet-row:hover{background:var(--brand-soft)}
a.quiet-row:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.quiet-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:0 0 auto}
.quiet-row.warn .quiet-dot{background:var(--alert)}
.quiet-label{flex:1;font-size:13.5px;color:var(--ink2);font-weight:560}
.quiet-value{font-size:12.5px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.quiet-chev{color:var(--chev);font-size:17px;font-weight:600;margin-left:2px}

/* vitals section wrapper */
.hsec{margin-top:18px}
.hsec-head{display:flex;align-items:center;gap:12px;padding:0 18px;flex-wrap:wrap}
.hsec-title{font-size:16px;font-weight:760;color:var(--ink);letter-spacing:-.01em}
.hsec .ranges{margin-top:0}

/* AI teaser */
.ai{margin-bottom:30px;background:var(--surface);color:var(--ink2);border:1px solid var(--hair)}
.ai-badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:var(--brand-soft);border:1px solid var(--hair);
  padding:4px 9px;border-radius:8px;margin-bottom:9px}
.ai-title{font-size:17px;font-weight:760;letter-spacing:-.01em;margin-bottom:5px;color:var(--ink)}
.ai-body{font-size:13px;line-height:1.5;color:var(--muted);margin:0}
.ai-cta{margin-top:12px}

/* login */
.login{max-width:376px;margin:0 auto;padding:32px 20px;min-height:100vh;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}
.login-card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);
  padding:28px 26px 24px;box-shadow:var(--shadow-lg)}
.login-mark{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.login-logo{width:30px;height:30px;border-radius:var(--radius-sm);background:var(--brand);flex:0 0 auto}
.login-word{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.login h1{color:var(--ink);font-size:26px;font-weight:760;margin:0 0 4px}
.login p{color:var(--muted);font-size:14px;margin:0 0 22px}
.login form{display:flex;flex-direction:column;gap:10px}
.login button{background:var(--brand);color:var(--surface);border:0;border-radius:14px;padding:15px 16px;
  font-size:15px;font-weight:680;text-align:left;cursor:pointer;display:flex;justify-content:space-between}
.login button:hover{box-shadow:var(--shadow)}

/* ---- consent broker (step 7) ---- */
/* tabs */
.tabs{display:flex;gap:18px;margin-top:16px}
.tabs a{font-size:13px;font-weight:680;color:var(--muted);text-decoration:none;padding-bottom:6px;border-bottom:2px solid transparent}
.tabs a.on{color:var(--brand);border-bottom-color:var(--brand)}

/* recipient deck + card */
.rdeck{padding:16px 14px 30px;display:grid;gap:14px;grid-template-columns:1fr;align-items:start}
@media(min-width:680px){.rdeck{grid-template-columns:1fr 1fr}}
.rcard{background:var(--surface);border-radius:var(--radius);padding:16px 16px 14px;box-shadow:var(--shadow)}
.rhead{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.rname{font-size:16px;font-weight:720;letter-spacing:-.01em}
.rpill{font-size:11px;font-weight:800;padding:3.5px 9px;border-radius:var(--radius-sm);line-height:1.1;margin-left:auto}
.rpill.on{background:var(--brand-soft);color:var(--good-ink)}
.rpill.deny{background:var(--slate-100);color:var(--slate-600)}
.rnote{font-size:12.5px;line-height:1.5;color:var(--slate-500);margin:4px 0 8px}
.rsec{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--slate-600);font-weight:700;margin:12px 0 2px}
.rsec.sens{color:var(--alert)}

/* switch rows */
.trow{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--hair)}
.trow:last-of-type{border-bottom:0}
.tlabel{font-size:13.5px;font-weight:600;color:var(--ink)}
.sw{width:42px;height:24px;border-radius:var(--radius-pill);background:var(--slate-300);position:relative;flex:0 0 auto;margin-left:auto;border:0;padding:0;cursor:pointer;display:inline-block;text-decoration:none}
.sw i{position:absolute;top:2.5px;left:2.5px;width:19px;height:19px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-switch);transition:left .12s}
.sw.on{background:var(--brand)}
.sw.on i{left:20.5px}
.sw.sens.on{background:var(--alert)}

/* informational internal-care chips */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.chip-on{font-size:11px;font-weight:650;padding:6px 10px;border-radius:9px;background:var(--brand-soft);color:var(--good-ink)}
.chip-on.sens{background:var(--alert-soft);color:var(--alert)}

/* preview link */
.preview{display:inline-block;margin-top:13px;font-size:12px;font-weight:700;color:var(--brand);border:1px solid var(--preview-border);background:var(--info-soft);border-radius:10px;padding:8px 12px;text-decoration:none}

/* dedicated confirm page */
.cwrap{max-width:440px;margin:0 auto;padding:26px 20px 40px;min-height:100vh;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}
.eyebrow.center{text-align:center;margin-bottom:12px}
.ccard{background:var(--surface);border-radius:var(--radius);padding:26px 22px 20px;box-shadow:var(--shadow-lg)}
.senstag{display:block;width:max-content;margin:0 auto 12px;font-size:11px;font-weight:800;letter-spacing:.08em;padding:4px 9px;border-radius:7px;background:var(--alert-soft);color:var(--alert)}
.ctitle{font-size:20px;font-weight:760;color:var(--ink);text-align:center;letter-spacing:-.01em;margin-bottom:12px;line-height:1.25}
.cbody{font-size:13.5px;line-height:1.5;color:var(--slate-700);text-align:center;margin:0 0 10px}
.creassure{font-size:12px;line-height:1.45;color:var(--muted);text-align:center;margin:0 0 20px}
.cbtn{display:block;text-align:center;font-size:15px;font-weight:700;padding:14px;border-radius:14px;border:0;width:100%;cursor:pointer;text-decoration:none;margin-top:10px}
.cbtn.go{background:var(--alert);color:var(--surface)}
.cbtn.cancel{background:var(--surface);border:1.5px solid var(--hair);color:var(--muted)}

/* ---- staff portal (step 8) ---- */
.rec{font-size:10px;font-weight:700;color:var(--alert);letter-spacing:.04em;margin-left:6px}
.pgo{margin-left:auto;font-size:13px;font-weight:700;color:var(--brand)}
/* add-data form */
.formwrap{padding:16px 14px 30px}
.formcard{background:var(--surface);border-radius:var(--radius);padding:18px 16px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:14px}
.fl{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:var(--muted);
  letter-spacing:.02em}
.formcard select,.formcard input{font-size:15px;font-weight:500;color:var(--ink);border:1.5px solid var(--hair);
  border-radius:var(--radius-sm);padding:12px 13px;background:var(--surface);font-family:inherit}
.primary{background:var(--brand);color:var(--surface);border:0;border-radius:14px;padding:15px;font-size:15px;
  font-weight:700;cursor:pointer;margin-top:4px}
.ferr{background:var(--alert-soft);color:var(--alert);font-size:13px;font-weight:600;padding:11px 14px;
  border-radius:12px;margin-bottom:12px}
/* add-result escape hatch: the no-JS <details> holding the uncatalogued-code fields. Folded by
   default so the catalogued chooser is the obvious path, and visually recessed because a marker
   entered here is never checked against a target range. Mirrors .email-change. */
.othercode{border-top:1px solid var(--hair);padding-top:12px}
.othercode>summary{font-size:12.5px;font-weight:700;color:var(--brand);cursor:pointer;list-style:none}
.othercode>summary::-webkit-details-marker{display:none}
.othercode[open]>summary{margin-bottom:9px}
.othercode .fl{margin-top:10px}
/* read-only sharing chips */
.chip-off{font-size:11px;font-weight:600;padding:6px 10px;border-radius:9px;background:var(--slate-100);color:var(--slate-600)}

/* ---- staff "Today" schedule (Phase 3) ---- */
.sched{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sched-row{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--hair);
  text-decoration:none;color:var(--ink)}
.sched-row:last-child{border-bottom:0}
.sched-time{flex:0 0 auto;font-size:14px;font-weight:760;color:var(--brand);font-variant-numeric:tabular-nums;width:46px}
.sched-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.sched-pt{font-size:14.5px;font-weight:680;color:var(--ink)}
.sched-reason{font-size:12px;color:var(--muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sched-row .pgo{margin-left:auto}
/* Account-list (staff_users) row only: the account role is a quiet muted label that clusters with the
   status chip + Open link on the right. sched-role is account-list-only, so this never touches the
   shared schedule / activity / support rows (which carry no role); the higher-specificity resets
   neutralise the base .sched-row .uchip/.pgo auto-margins so role + chip + link stay one tight group. */
.sched-role{margin-left:auto;flex:0 0 auto;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.sched-row .sched-role~.uchip,.sched-row .sched-role~.pgo{margin-left:0}

/* ---- staff week calendar (Concierge) ---- */
.wk-nav{display:flex;align-items:center;gap:8px;margin:2px 0 8px}
.wk-nav a{font-size:12px;font-weight:700;color:var(--brand);text-decoration:none;
  border:1.5px solid var(--hair);border-radius:10px;padding:6px 10px}
.wk-label{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--muted)}
.wk-day{padding:8px 0 4px;border-top:1px solid var(--hair)}
.wk-day-label{font-size:12px;font-weight:760;color:var(--muted);letter-spacing:.02em}
.wk-day.today .wk-day-label{color:var(--brand)}
.wk-today{font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:8px;background:var(--sky-bg);
  color:var(--brand);margin-left:6px}

/* clinician edit affordances — placeholders except "+ Add result" */
.edits{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.ph-btn{font-size:12.5px;font-weight:680;padding:8px 13px;border-radius:var(--radius-sm);border:1.5px solid var(--hair);
  color:var(--muted);background:var(--surface);text-decoration:none;cursor:default}
.ph-btn.go{border-color:var(--brand);color:var(--surface);background:var(--brand);cursor:pointer}

/* ---- access activity (step 9 — audit surfacing) ---- */
.export{display:flex;align-items:center;gap:14px;margin-top:16px}
.export-note{font-size:13px;color:var(--muted);font-weight:500;margin-top:2px}
.exportbtn{margin-left:auto;flex:0 0 auto;font-size:13px;font-weight:700;text-decoration:none;
  color:var(--ink-code);background:var(--surface);border:1.5px solid var(--hair);border-radius:12px;padding:10px 14px}
.exportbtn:hover{border-color:var(--brand);color:var(--brand)}
/* the waterfall rail is a static decoration — recency is signalled ONLY by newDot() above, never by
   recolouring the rail (avoids a stateful .arow.recent compound selector for a purely cosmetic line) */
.alog{padding:14px 14px 30px 34px;display:flex;flex-direction:column;gap:14px;position:relative}
.alog::before{content:"";position:absolute;left:15px;top:24px;bottom:46px;width:2px;background:var(--hair)}
.arow{background:var(--surface);border-radius:var(--radius);padding:13px 15px;box-shadow:var(--shadow);position:relative}
.arow::before{content:"";position:absolute;left:-22px;top:20px;width:8px;height:8px;border-radius:50%;
  background:var(--slate-300);border:2px solid var(--bg)}
.amain{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.aactor{font-size:15px;font-weight:740;letter-spacing:-.01em}
.aaction{font-size:13.5px;color:var(--muted);font-weight:550}
.ameta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px}
.apill{font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:8px;line-height:1.1}
.apill.allow{background:var(--brand-soft);color:var(--good-ink)}
.apill.deny{background:var(--deny-bg);color:var(--alert-ink)}
.apill.flat{background:var(--slate-100);color:var(--slate-600)}
.atag{font-size:11px;font-weight:600;color:var(--slate-700);background:var(--slate-100);padding:3px 8px;border-radius:8px}
.awhen{margin-left:auto;font-size:12px;color:var(--muted);font-weight:600}
.aseq{font-size:11px;color:var(--slate-600);font-weight:600;font-variant-numeric:tabular-nums}
/* keyset "Show more" control — one further page of the waterfall, quiet like .exportbtn but a
   full-width block so it reads as "more of this list", not a card-corner action */
.showmore{display:block;width:100%;margin-top:2px;font-size:13px;font-weight:700;text-align:center;
  cursor:pointer;color:var(--ink-code);background:var(--surface);border:1.5px solid var(--hair);
  border-radius:12px;padding:10px 14px}
.showmore:hover{border-color:var(--brand);color:var(--brand)}

/* ---- whole-person pillars (eight-pillar scorecard) ---- */
.pillars{margin:16px 14px 0}
.pillars .hsec-title{margin-bottom:10px}
.pillars-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:560px){.pillars-grid{grid-template-columns:repeat(2,1fr)}}
.pillar{background:var(--surface);border-radius:var(--radius);padding:12px 13px;min-height:96px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:3px}
.pillar:not(.backed){opacity:.6}
.pillar-label{font-size:12.5px;font-weight:720;color:var(--ink);letter-spacing:-.01em}
.pillar-score{font-size:27px;font-weight:780;line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
.pillar-latest{font-size:11px;color:var(--muted);font-weight:600}
.pillar-status{font-size:11px;font-weight:700;margin-top:auto}
.pillar-ph{font-size:11.5px;font-style:italic;color:var(--muted);font-weight:500;margin-top:auto}
.pillar-score.good{color:var(--brand)}
.pillar-status.good{color:var(--brand)}
.pillar-score.warn,.pillar-status.warn{color:var(--alert)}
.pillar-status.flat{color:var(--muted)}
a.pillar{color:inherit;text-decoration:none;cursor:pointer;transition:box-shadow .12s,transform .12s}
a.pillar:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}

/* ---- program journey strip (M0 → M3 → Output) ---- */
.program{margin:16px 14px 0;background:var(--surface);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.program-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.program-cap{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700}
.program-tier{font-size:12.5px;font-weight:720;color:var(--brand);margin-left:auto}
.journey{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:560px){.journey{grid-template-columns:1fr}}
.milestone{position:relative;border-radius:var(--radius);padding:11px 12px 12px;background:var(--slate-50);border:1px solid var(--hair);
  display:flex;flex-direction:column;gap:3px}
.milestone .ms-key{font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--muted)}
.milestone .ms-label{font-size:14px;font-weight:760;color:var(--ink);letter-spacing:-.01em}
.milestone .ms-detail{font-size:11.5px;color:var(--muted);font-weight:500;line-height:1.3}
.milestone .ms-foot{font-size:11px;color:var(--muted);font-weight:600;margin-top:4px}
.milestone .ms-state{font-weight:700}
.milestone.done{background:var(--brand-soft);border-color:var(--good-line)}
.milestone.done .ms-key,.milestone.done .ms-state{color:var(--good-ink)}
.milestone.current{background:var(--surface);border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.milestone.current .ms-key,.milestone.current .ms-state{color:var(--brand)}
.milestone.upcoming{opacity:.85}
.program-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);font-size:13px;color:var(--ink2);line-height:1.5}
.program-note .pgo{margin-left:6px}

/* ---- connect-a-device affordance (no-JS <details>) ---- */
.connect{margin:16px 14px 0;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.connect-sum{display:flex;align-items:center;gap:12px;padding:15px 18px;cursor:pointer;list-style:none}
.connect-sum::-webkit-details-marker{display:none}
.connect-head{display:flex;flex-direction:column;gap:2px}
.connect-title{font-size:15px;font-weight:740;color:var(--ink)}
.connect-cap{font-size:12px;color:var(--muted);font-weight:500}
.connect-chev{margin-left:auto;font-size:20px;color:var(--muted);font-weight:700;transition:transform .15s}
.connect[open] .connect-chev{transform:rotate(45deg)}
.connect-body{padding:0 18px 16px}
.connect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
@media(max-width:560px){.connect-grid{grid-template-columns:repeat(2,1fr)}}
.connect-vendor{font-size:12.5px;font-weight:650;color:var(--ink);background:var(--slate-50);border:1px solid var(--hair);
  border-radius:11px;padding:10px 8px;cursor:not-allowed}
.connect-note{margin-top:11px;font-size:11.5px;color:var(--muted);font-weight:500}

/* ---- chipMenu: the no-JS chip-styled <details> dropdown (v2 Phase 6) — 12a's "By stage" filter +
   12c's pillar-detail chart range control. Mirrors .connect's disclosure idiom, styled as a compact
   chip instead of a card. ---- */
.chipdd{position:relative;display:inline-block}
.chipdd>summary{cursor:pointer;list-style:none;font-size:12px;font-weight:700;color:var(--muted);
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius-pill);padding:7px 13px}
.chipdd>summary::-webkit-details-marker{display:none}
.chipdd.on>summary{background:var(--brand);color:var(--surface);border-color:var(--brand)}
.chipdd-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:5;min-width:150px;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column;gap:2px}
.chipdd-item{font-size:12.5px;font-weight:600;color:var(--ink2);text-decoration:none;padding:7px 10px;border-radius:8px}
.chipdd-item:hover{background:var(--brand-soft)}
.chipdd-item.on{background:var(--brand-soft);color:var(--good-ink);font-weight:700}

/* ---- contextual education strip + library article ---- */
.learn{margin:18px 14px 0}
.learn-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.learn-all{font-size:12px;font-weight:700;color:var(--brand);text-decoration:none}
.learn-all:hover{text-decoration:underline}
.learn-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:680px){.learn-grid{grid-template-columns:1fr 1fr}}
.learn-card{display:flex;flex-direction:column;gap:5px;background:var(--surface);border-radius:var(--radius);padding:15px 17px;
  box-shadow:var(--shadow);color:inherit;text-decoration:none;transition:box-shadow .12s,transform .12s}
.learn-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.learn-title{font-size:15px;font-weight:740;color:var(--ink);letter-spacing:-.01em}
.learn-teaser{font-size:12.5px;color:var(--muted);font-weight:500;line-height:1.45}
.learn-more{font-size:12px;font-weight:700;color:var(--brand);margin-top:2px}

.back{display:inline-block;font-size:12.5px;font-weight:650;color:var(--muted);text-decoration:none;margin:0 0 10px 16px}
.back:hover{color:var(--ink)}
.pd-ph{margin-top:12px;font-size:13px;font-style:italic;color:var(--muted);font-weight:500}
/* pillar-detail chart range control (v2 Phase 6/12c) */
.pd-rangerow{display:flex;justify-content:flex-end;padding:0 18px;margin-top:14px}
/* "what feeds this pillar" compact trend rows (v2 Phase 6/12c) — replaces the full mini-chart Deck */
.irow{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--hair)}
.irow:last-child{border-bottom:0}
.irow-label{flex:1;font-size:13px;font-weight:650;color:var(--ink)}
.irow-value{font-size:12.5px;color:var(--muted);font-weight:600}
.article{margin:16px 14px 0;background:var(--surface);border-radius:var(--radius);padding:18px 20px 16px;
  box-shadow:var(--shadow)}
.art-title{font-size:26px;font-weight:780;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px}
.art-p{font-size:14px;line-height:1.6;color:var(--slate-800);margin:0 0 10px}
.art-tips-cap{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:6px 0 6px}
.art-tips{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.art-tips li{font-size:13.5px;line-height:1.5;color:var(--slate-800)}
.art-foot{margin-top:14px;font-size:11px;color:var(--muted);font-style:italic}

/* ---- appointment requests (Increment 2a) ---- */
/* small action buttons shared by patient-accept and staff confirm/decline/propose */
.mini-go{font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:var(--radius-sm);border:0;
  background:var(--brand);color:var(--surface);cursor:pointer;text-decoration:none;display:inline-block}
.mini-ghost{font-size:12.5px;font-weight:680;padding:8px 13px;border-radius:var(--radius-sm);border:1.5px solid var(--hair);
  background:var(--surface);color:var(--muted);cursor:pointer}
.mini-cancel{font-size:12.5px;font-weight:650;padding:8px 13px;border-radius:var(--radius-sm);border:1.5px solid var(--hair);
  background:var(--surface);color:var(--muted);cursor:pointer;margin-top:8px}

/* staff self-service sign-in-email change (<details> on the Profile identity card) */
.email-change{margin-top:12px;border-top:1px solid var(--hair);padding-top:11px}
.email-change>summary{font-size:12.5px;font-weight:700;color:var(--brand);cursor:pointer;list-style:none}
.email-change>summary::-webkit-details-marker{display:none}
.email-change[open]>summary{margin-bottom:9px}

/* patient "Your requests" list */
.reqlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.reqrow{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--hair)}
.reqrow:last-child{border-bottom:0}
.reqrow-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.reqrow-when{font-size:14px;font-weight:680;color:var(--ink)}
.reqrow-meta{font-size:12px;color:var(--muted);font-weight:500}
.reqrow-side{display:flex;align-items:center;gap:8px;margin-left:auto}
.reqrow-status{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted);background:var(--slate-100);
  padding:4px 9px;border-radius:8px;white-space:nowrap}
.reqrow-status.proposed{margin-left:0;color:var(--brand);background:var(--info-soft)}

/* patient request form (reuses the .connect <details> shell) */
.reqform-body{padding:0 18px 16px;display:flex;flex-direction:column;gap:12px}
.reqform-body select,.reqform-body input{font-size:15px;font-weight:500;color:var(--ink);
  border:1.5px solid var(--hair);border-radius:var(--radius-sm);padding:12px 13px;background:var(--surface);font-family:inherit}

/* a tappable navigation card (prescriptions link on the Home) */
.linkcard{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.linkcard-main{display:flex;flex-direction:column;gap:2px}
.linkcard-title{font-size:15px;font-weight:740;letter-spacing:-.01em}
.linkcard-cap{font-size:12px;color:var(--muted);font-weight:500}

/* staff appointment-requests queue */
.reqqueue{padding:14px 14px 4px;display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:680px){.reqqueue{grid-template-columns:1fr 1fr}}
.reqcard{background:var(--surface);border-radius:var(--radius);padding:15px 16px;box-shadow:var(--shadow)}
.reqcard-head{display:flex;align-items:baseline;gap:9px}
.reqcard-pt{font-size:15px;font-weight:740;letter-spacing:-.01em}
.reqcard-when{margin-left:auto;font-size:12.5px;font-weight:680;color:var(--brand);white-space:nowrap}
.reqcard-meta{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:3px}
.reqcard-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.propose{display:flex;align-items:center;gap:6px}
.propose input{font-size:12.5px;color:var(--ink);border:1.5px solid var(--hair);border-radius:10px;
  padding:7px 9px;background:var(--surface);font-family:inherit}

/* ---- prescriptions + eRecept (Increment 2b) ---- */
.frow{display:flex;gap:12px}
.frow .fl{flex:1}
.rxdeck{padding:16px 14px 30px;display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:680px){.rxdeck{grid-template-columns:1fr 1fr}}
.rxcard{background:var(--surface);border-radius:var(--radius);padding:18px 16px 14px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.rxcard.wide{margin:16px 14px 0}
.rxcard-head{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:9px;text-align:left}
.rxcard-drug{font-size:16px;font-weight:740;letter-spacing:-.01em}
.rxcard-since{font-size:12px;color:var(--muted);font-weight:600}
.rxcard-qr{padding:8px;background:var(--surface);border-radius:14px}
.qr{display:block;width:180px;height:auto;max-width:100%}
.rxcard-code{font-family:var(--font-mono);font-size:14px;font-weight:700;
  letter-spacing:.04em;color:var(--ink)}
.rxcard-note{font-size:11px;font-weight:600;color:var(--alert);background:var(--alert-soft);
  padding:5px 10px;border-radius:8px}
.rxdetails{width:100%;margin:2px 0 0;display:flex;flex-direction:column;gap:6px}
.rxdetails div{display:flex;justify-content:space-between;border-bottom:1px solid var(--hair);padding-bottom:6px}
.rxdetails div:last-child{border-bottom:0}
.rxdetails dt{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0}
.rxdetails dd{font-size:14px;font-weight:650;color:var(--ink);margin:0}

/* ---- derived per-recipient token chip (preview header, on the dark appbar) ---- */
.tokrow{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.toklabel{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.tokchip{font-family:var(--font-mono);font-size:12px;color:var(--ink);
  background:var(--brand-soft);border:1px solid var(--hair);border-radius:8px;padding:3px 8px}
.toknote{flex-basis:100%;margin:2px 0 0;font-size:12px;color:var(--muted)}

/* ---- coordinator console: dashboard panel (Console Phase 1; dense row list, v2 Phase 6/12a) ---- */
.plist{padding:14px 14px 30px;display:flex;flex-direction:column;gap:9px}
.prow{display:flex;align-items:center;flex-wrap:wrap;gap:11px;background:var(--surface);border-radius:var(--radius);
  padding:13px 16px;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);
  transition:box-shadow .12s,transform .12s}
.prow:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
/* leading status dot */
.prow-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--slate-300)}
.prow-dot.warn{background:var(--alert)}
.prow-dot.notice{background:var(--notice)}
.prow-dot.good{background:var(--brand)}
.prow-dot.flat{background:var(--trend-none)}
/* pseudonymous label + stage code + signal figure — dense mono figures */
.prow-id{font-family:var(--font-mono);font-size:13px;font-weight:650;color:var(--ink);min-width:170px}
.prow-code{font-family:var(--font-mono);font-size:12px;font-weight:650;color:var(--muted);width:26px;flex:0 0 auto}
.prow-signal{font-family:var(--font-mono);font-size:12.5px;font-weight:700;color:var(--ink);width:28px;flex:0 0 auto;text-align:right}
/* status teaser (TopAction.Title, or "On track" — teaser, not explanation) */
.prow-status{flex:1 1 170px;font-size:12.5px;color:var(--ink2);font-weight:600}
.prow-seen{font-size:11.5px;color:var(--muted);flex:0 0 auto}
.prow-chev{color:var(--chev);font-weight:700;flex:0 0 auto}
/* KPI dots — F4: kept, relocated to a compact second line under the row */
.prow .kdots{flex-basis:100%;margin-top:0;margin-left:18px}
.kdots{display:flex;flex-wrap:wrap;gap:7px;margin-top:1px}
.kdot{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;color:var(--slate-700);
  background:var(--slate-50);border:1px solid var(--hair);border-radius:var(--radius-pill);padding:4px 10px}
.kdot i{width:8px;height:8px;border-radius:50%;background:var(--slate-300);flex:0 0 auto}
.kdot.good i{background:var(--brand)}
.kdot.improve i{background:var(--brand)}
.kdot.warn i{background:var(--alert)}

/* ---- KPI gauges (record: full goal-vs-actual deck) ---- */
.kpis{display:flex;flex-direction:column;gap:14px}
.kpirow{display:flex;flex-direction:column;gap:4px}
.kpirow-head{display:flex;align-items:baseline;gap:9px}
.kpirow-label{font-size:14px;font-weight:700;color:var(--ink)}
.kpirow-state{margin-left:auto;font-size:11px;font-weight:800;padding:3px 9px;border-radius:var(--radius-sm);line-height:1.1}
.kpirow-state.good{background:var(--brand-soft);color:var(--good-ink)}
.kpirow-state.improve{background:var(--brand-soft);color:var(--good-ink)}
.kpirow-state.warn{background:var(--warn-tint);color:var(--alert-ink)}
.kpirow-state.flat{background:var(--slate-100);color:var(--slate-600)}
.kpirow-meta{font-size:12px;color:var(--muted);font-weight:550}
.gauge{display:block;width:100%;height:auto}
.gauge .gtrack{fill:var(--slate-100)}
.gauge .gband{fill:var(--brand-soft)}
.gauge .gtarget{stroke:var(--ink);stroke-width:1.6;stroke-dasharray:3 2;opacity:.55}
.gauge .gdot{fill:var(--slate-400);stroke:var(--surface);stroke-width:2}
.gauge .gdot.good{fill:var(--brand)}
.gauge .gdot.improve{fill:var(--brand)}
.gauge .gdot.warn{fill:var(--alert)}

/* ---- Programs tab cohort lens (v2 Phase 6/12b) — stage distribution + honest tier placeholders,
   purely additive above the existing certified-protocol catalog. ---- */
.stagegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
@media(max-width:560px){.stagegrid{grid-template-columns:repeat(2,1fr)}}
.stagecell{background:var(--slate-50);border-radius:var(--radius-sm);padding:12px;text-align:center}
.stagecell-count{font-size:22px;font-weight:780;color:var(--ink);letter-spacing:-.02em}
.stagecell-label{font-size:11px;color:var(--muted);font-weight:650;margin-top:2px}
.tiercards{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.tiercard{flex:1 1 140px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius-sm);padding:12px}
.tiercard:not(.backed){opacity:.6}
.tiercard-label{font-size:12.5px;font-weight:720;color:var(--ink)}
.tiercard-val{font-size:13px;color:var(--muted);margin-top:3px;font-weight:600}

/* Console Phase 4 — protocol-compliance panel */
.protocol-head{display:flex;align-items:baseline;gap:9px}
.protocol .pver{font-weight:700;color:var(--muted)}
.protocol-sum{margin-left:auto;font-size:11px;font-weight:800;padding:3px 9px;border-radius:8px;
  background:var(--indigo-bg);color:var(--indigo-ink);line-height:1.1}
.protocol-enrol{font-size:12px;color:var(--muted);font-weight:600;margin:2px 0 10px}
.psteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pstep{display:flex;align-items:center;gap:10px}
.pstep-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--slate-300)}
.pstep-dot.good{background:var(--brand)}
.pstep-dot.warn{background:var(--alert)}
.pstep-dot.flat{background:var(--slate-400)}
.pstep-label{font-size:13.5px;font-weight:650;color:var(--ink)}
.pstep-due{font-size:11.5px;color:var(--muted);font-weight:550}
.pstep-state{margin-left:auto;font-size:11px;font-weight:800;padding:3px 9px;border-radius:8px;line-height:1.1}
.pstep-state.good{background:var(--brand-soft);color:var(--good-ink)}
.pstep-state.warn{background:var(--warn-tint);color:var(--alert-ink)}
.pstep-state.flat{background:var(--slate-100);color:var(--slate-600)}

/* Console Phase 5 — insurance-covered referrals */
.reflist{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.refrow{border:1px solid var(--hair);border-radius:12px;padding:11px 12px;display:flex;flex-direction:column;gap:4px}
.refrow-head{display:flex;align-items:center;gap:9px}
.refrow-exam{font-size:13.5px;font-weight:700;color:var(--ink)}
.refrow-meta{font-size:12px;color:var(--muted);font-weight:550}
.refrow-reason{font-size:12px;color:var(--ink);font-weight:500}
.refrow-resulted{font-size:12px;font-weight:700;color:var(--good-ink);margin-top:2px}
.refresult{display:flex;gap:7px;margin-top:5px;flex-wrap:wrap}
.refresult input{flex:1 1 90px;min-width:0;font-size:13px;padding:7px 9px;border:1px solid var(--slate-200);border-radius:9px}
.fhircap{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:14px 0 5px}
.fhir{margin:0;padding:12px;background:var(--ink-code);color:var(--slate-300);border-radius:11px;font-size:11px;line-height:1.5;
  overflow-x:auto;white-space:pre;font-family:var(--font-mono)}

/* --- Universal lab import (Increment 4) --- */
.formerr{background:var(--warn-tint);color:var(--alert-ink);border:1px solid var(--rose-border);border-radius:11px;padding:10px 12px;font-size:13px;font-weight:600;margin-bottom:12px}
.impform{display:flex;flex-direction:column;gap:12px}
.filedrop{display:flex;flex-direction:column;gap:8px;padding:18px;border:1.5px dashed var(--slate-250);border-radius:14px;background:var(--slate-50);cursor:pointer}
.filedrop input{font-size:13.5px;color:var(--ink)}
.filedrop-cap{font-size:12px;color:var(--muted);font-weight:600}
.impstat{display:flex;flex-direction:column;gap:3px;margin-top:14px;padding:14px 16px;border-radius:var(--radius);background:var(--slate-50);border:1px solid var(--hair)}
.impstat-head{font-size:15px;font-weight:740;color:var(--ink)}
.impstat-detail{font-size:13px;color:var(--muted);font-weight:500}
.impstat.settled.good{background:var(--brand-soft);border-color:var(--good-line)}
.impstat.settled.good .impstat-head{color:var(--good-ink)}
.impstat.settled.warn{background:var(--warn-tint);border-color:var(--rose-border)}
.impstat.settled.warn .impstat-head{color:var(--alert-ink)}
.impstat.settled.info{background:var(--info-soft);border-color:var(--info-border)}
.impstat.settled.info .impstat-head{color:var(--info)}
.formnote{font-size:12px;color:var(--muted);font-weight:500;margin:2px 0 4px;line-height:1.45}
.impstat .mini-go{align-self:flex-start;margin-top:9px;background:var(--brand);color:var(--surface);text-decoration:none}
.spinner{width:16px;height:16px;border-radius:50%;border:2.5px solid var(--slate-250);border-top-color:var(--brand);animation:spin .7s linear infinite;margin-bottom:4px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}.sw i,.connect-chev,a.pillar,.learn-card,.prow,a.metric,.infodot-bubble{transition:none}}
.scan-row{display:flex;align-items:center;gap:12px}
.scan-body{display:flex;flex-direction:column;gap:2px}
.scan-title{font-size:14.5px;font-weight:700;color:var(--ink)}
.scan-cap{font-size:12px;color:var(--muted);font-weight:500}
.scan-row .ai-badge{margin-left:auto}
.implist{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.implist li{font-size:13px;color:var(--muted);font-weight:500;line-height:1.4}

/* --- Concierge (request threads + unified inbox) --- */
.tab-badge{display:inline-block;min-width:17px;text-align:center;margin-left:5px;padding:1.5px 5px;
  border-radius:9px;background:var(--alert);color:var(--surface);font-size:10.5px;font-weight:800;line-height:1.35;
  vertical-align:1px}
.cqlist{list-style:none;margin:0;padding:0 14px 8px;display:flex;flex-direction:column;gap:10px}
/* a tinted, secondary list — the demoted Resolved requests below the Open ones (Support) */
.cqlist.muted{opacity:.62}
.cqrow{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:var(--radius);padding:13px 15px;
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow)}
.cqrow.unread{border-left:3.5px solid var(--alert)}
/* thread-kind tags are neutral CATEGORY labels — the kind is spelled out in the text, so the tag
   never wears a status hue (green/terracotta/blue would read as good/alert/scheduled). One neutral
   treatment for every kind — no per-kind modifier is rendered. */
.cqkind{flex:0 0 auto;font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  padding:4px 9px;border-radius:8px;line-height:1.1;background:var(--slate-100);color:var(--slate-600)}
.cqmain{display:flex;flex-direction:column;gap:2px;min-width:0}
.cqtitle{font-size:14px;font-weight:700;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cqmeta{font-size:12px;color:var(--muted);font-weight:550}
.cqside{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.cqdot{width:9px;height:9px;border-radius:50%;background:var(--alert)}
.cqstatus{font-size:11px;font-weight:800;padding:3px 9px;border-radius:8px;background:var(--slate-100);color:var(--slate-600);line-height:1.1}
.cqstatus.open{background:var(--alert-soft);color:var(--alert)}

/* thread transcript */
.thread{padding:16px 14px 4px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:82%;background:var(--surface);border-radius:16px 16px 16px 5px;padding:11px 14px;
  box-shadow:var(--shadow);align-self:flex-start}
.msg.mine{align-self:flex-end;border-radius:16px 16px 5px 16px;background:var(--sky-bg)}
.msg-head{font-size:11px;color:var(--muted);font-weight:700;margin-bottom:3px}
.msg-body{font-size:14px;font-weight:500;line-height:1.5;white-space:pre-wrap}
.reqform-body textarea{font-size:15px;font-weight:500;color:var(--ink);padding:11px 12px;
  border:1px solid var(--slate-200);border-radius:11px;background:var(--slate-50);font-family:inherit;resize:vertical}
.empty.warn{color:var(--alert-ink);padding:14px 20px}
.resolve{display:flex;align-items:center;gap:12px}

/* check-in questionnaire + answers */
.checkin .sub{color:var(--muted)}
.ck-item{border:0;border-top:1px solid var(--hair);margin:0;padding:12px 2px 4px}
.ck-item legend{font-size:13.5px;font-weight:650;color:var(--ink);line-height:1.45;padding:0 0 7px}
.ck-opts{display:flex;flex-wrap:wrap;gap:7px}
.ck-opt{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--ink);
  background:var(--slate-50);border:1px solid var(--hair);border-radius:10px;padding:6px 10px;cursor:pointer}
.ck-opt:has(input:checked){background:var(--sky-bg);border-color:var(--brand)}
/* offer-slot picker: the candidate consultation times carry long weekday+date+time labels that wrap
   to several lines as inline chips, so stack them as full-width rows (the shared .ck-opt, used by the
   baseline check-in's short Yes/No options, is untouched). */
.ck-opts-slots{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
.ck-opts-slots .ck-opt{width:100%;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:9px;white-space:nowrap}

/* program-direction picker (2026-07-21 redesign) — the program tier IS the main selling point, so the
   three options read as clean, full-width selectable cards: a left-aligned radio + prominent tier name
   + a talking-points line that FILLS the row (dopt-body flex:1, the fix for the old radio-then-big-gap
   layout where the body only took its content width), with a clear checked state. */
.dopts{display:flex;flex-direction:column;gap:10px}
.dopt{display:flex;align-items:flex-start;gap:13px;background:var(--surface);border:1.5px solid var(--hair);
  border-radius:12px;padding:15px 17px;cursor:pointer;transition:border-color .12s,background .12s}
.dopt:hover{border-color:var(--slate-300)}
.dopt:has(input:checked){background:var(--sky-bg);border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
/* input[type="radio"] (not bare `input`) so this beats `.uform input{width:100%;padding:9px 11px}`
   — same-class specificity, defined later — which would otherwise stretch the radio across the whole
   row and collapse the body (the exact bug the first cut of this redesign shipped). */
.dopt input[type="radio"]{margin:2px 0 0;flex:0 0 auto;width:18px;height:18px;padding:0;accent-color:var(--brand)}
.dopt-body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.dopt-name{font-size:15px;font-weight:750;color:var(--ink)}
.dopt-detail{font-size:13px;font-weight:500;color:var(--muted);line-height:1.45}
.ck-send{display:flex;align-items:flex-end;gap:9px;margin-top:12px}
.ck-send .fl{flex:1}
.ck-send select{font-size:14px;font-weight:500;color:var(--ink);padding:9px 11px;
  border:1px solid var(--slate-200);border-radius:11px;background:var(--slate-50);width:100%}
.ck-score{font-size:14.5px;font-weight:600;margin:4px 0 8px}
.ck-answers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ck-answers li{display:flex;gap:12px;align-items:baseline;border-top:1px solid var(--hair);padding-top:8px}
.ck-q{font-size:12.5px;color:var(--muted);font-weight:550;line-height:1.4;flex:1}
.ck-a{font-size:12.5px;font-weight:750;color:var(--ink);flex:0 0 auto}
.approve .reqform-body{padding:0 0 10px}

/* passwordless login (email → code) + user management */
.login label{color:var(--muted);font-size:13px;font-weight:600;display:flex;flex-direction:column;gap:6px}
.login input{background:var(--surface);color:var(--ink);border:1px solid var(--hair);border-radius:var(--radius-sm);padding:13px 14px;
  font-size:16px;letter-spacing:.02em}
.login input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.login-err{color:var(--alert);font-size:13.5px;font-weight:600;margin:0 0 14px}
.login .login-again{margin-top:14px}
.login .link{background:none;color:var(--brand);border:0;padding:0;font-size:13px;font-weight:600;
  text-decoration:underline;cursor:pointer}
.unotice{color:var(--brand);font-size:13.5px;font-weight:650;margin:0 0 12px}
.login-hint{font-size:12px;color:var(--muted);font-weight:500;margin:10px 0 0;line-height:1.5}
.uchip{font-size:11.5px;font-weight:750;text-transform:uppercase;letter-spacing:.04em;
  border-radius:var(--radius-sm);padding:4px 9px;flex:0 0 auto}
.uchip-draft{background:var(--slate-100);color:var(--slate-600)}
.uchip-new{background:var(--amber-tint);color:var(--amber-ink)}
.uchip-active{background:var(--brand-soft);color:var(--good-ink)}
.uchip-treated{background:var(--sky-bg);color:var(--info)}
.uchip-archived{background:var(--rose-mute-bg);color:var(--rose-mute-ink)}
/* onboarding workflow status chips (task-5 brief) — same tone progression as the account-status
   chips above: not-started=slate, awaiting-coordinator=amber, in-progress-with-doctor=info, done=brand */
.uchip-awaiting-intake{background:var(--slate-100);color:var(--slate-600)}
.uchip-intake-submitted{background:var(--amber-tint);color:var(--amber-ink)}
.uchip-doctor-assigned{background:var(--sky-bg);color:var(--info)}
.uchip-slots-offered{background:var(--sky-bg);color:var(--info)}
.uchip-visit-scheduled{background:var(--sky-bg);color:var(--info)}
.uchip-enrolled{background:var(--brand-soft);color:var(--good-ink)}
.uform{display:flex;flex-direction:column;gap:11px;max-width:460px}
.uform input,.uform select{font-size:14px;font-weight:500;color:var(--ink);padding:9px 11px;
  border:1px solid var(--slate-200);border-radius:var(--radius-sm);background:var(--slate-50);width:100%}
.uform .mini-go{align-self:flex-start}
/* native file inputs — style the browser's "Choose file" button to match the form controls so the
   upload surfaces (import, staff photo) don't drop a raw OS button into the design system */
input[type=file]{font-size:13px;color:var(--muted);max-width:100%}
input[type=file]::file-selector-button{font:inherit;font-weight:600;color:var(--ink);background:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--radius-sm);padding:8px 12px;margin-right:10px;cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--brand-soft);border-color:var(--brand)}
.urow{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.uoverride{display:flex;align-items:flex-end;gap:8px;margin-left:auto}
.uoverride select{font-size:13.5px;font-weight:550;color:var(--ink);padding:7px 10px;
  border:1px solid var(--slate-200);border-radius:10px;background:var(--slate-50)}
/* account-detail Lifecycle card (2026-07-21 redesign) — clean stacked rows: status + primary action,
   a muted legend, then the override / reset-codes tools each on their own aligned row (replaces the
   old .urow+.uoverride layout that stranded the status chip far from the floated-right Override). */
.lc-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lc-legend{margin:12px 0 16px;line-height:1.5}
.lc-tools{display:flex;flex-direction:column;gap:16px}
.lc-tool{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.lc-tool .fl{max-width:240px;margin:0}
.lc-tool .fl select{font-size:13.5px;font-weight:550;color:var(--ink);padding:8px 11px;
  border:1px solid var(--slate-200);border-radius:10px;background:var(--slate-50);width:100%}
.lc-tool>.appt-meta{margin:0;align-self:center;flex:1;min-width:200px}
.udl{display:grid;grid-template-columns:130px 1fr;gap:7px 14px;margin:0 0 10px}
.udl dt{font-size:12.5px;color:var(--muted);font-weight:600}
.udl dd{font-size:13.5px;color:var(--ink);font-weight:600;margin:0}
/* An intake answer withheld by tier (#236) — visually distinct from a real value so a coordinator
   never reads a restriction as a non-response. */
.udl dd.udl-restricted{color:var(--muted);font-weight:500;font-style:italic}
.udl-restricted-note{color:var(--muted);font-style:italic;margin:8px 0 0}
.sched-row .uchip{margin-left:auto}
/* onboarding ticket (polish round) — the patient's stated goal, inside the @hcard "Patient's goal"
   eyebrow: a left brand accent + larger weight give the sentence real emphasis, distinct from the
   plain italic .rev-objective aside on the Revision comparison page. */
.goal-quote{margin:0;font-size:16.5px;font-weight:640;line-height:1.55;color:var(--ink);
  padding-left:15px;border-left:3px solid var(--brand)}
/* onboarding coordinator/doctor checklist row (2026-07-21) — a fixed 3-column grid (status chip ·
   label+meta · right-aligned action) so every Mark-done button aligns in one column and the status
   chips share a start edge, replacing the ragged .urow flex row whose button landed at a
   label-width-dependent x. Auto tasks (no form) simply leave the action column empty, still aligned. */
.otask{display:grid;grid-template-columns:92px 1fr auto;align-items:center;column-gap:14px;
  padding:11px 0;border-top:1px solid var(--hair)}
.otask:first-child{border-top:0}
.otask-state{justify-self:start}
.otask-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.otask-label{font-size:13.5px;font-weight:700;color:var(--ink)}
.otask-meta{font-size:12px;color:var(--muted);font-weight:500}
.otask-act{justify-self:end}

/* ---- two-view IA chrome ---- */
/* Roles differ by LAYOUT (patient sidebar vs staff coordinator worklist), not by hue — so the
   old per-role dark background overrides are gone. --nav-bg is the (light) mobile bottom-nav backdrop. */
:root{--nav-bg:rgba(236,239,236,.94)}
/* Staff-viewing-one-patient wrong-patient safety: the .ctxstrip carries a terracotta (alert) tint
   AND the identified text — colour is never the only signal (clinical convention), and it no longer
   needs a full-page hue to be salient. */
.ctxstrip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-6px 0 10px;padding:8px 12px;
  border-radius:12px;background:var(--alert-soft);border:1px solid var(--alert)}
.ctx-back{font-size:12px;font-weight:700;color:var(--alert-ink);text-decoration:none}
.ctx-back:hover{color:var(--ink)}
.ctx-name{font-size:12.5px;font-weight:760;color:var(--ink)}
.ctx-tag{font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--alert-ink);margin-left:auto}

/* (the old top-right language+sign-out cluster is gone — sign-out and language live on Profile) */

/* profile sub-nav (Details · Sharing · Activity · Sessions) — pill chips inside the banner */
.subnav{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.subnav a{font-size:12px;font-weight:700;color:var(--muted);text-decoration:none;background:var(--surface);
  border:1px solid var(--hair);padding:7px 12px;border-radius:10px}
.subnav a.on{background:var(--brand);color:var(--surface);border-color:var(--brand)}

/* the "your data, under your control" trust card + quick actions reuse .linkcard */

/* ============================================================================
   Shared page shell — left sidebar rail + main column (redesign Phase 2). Roles
   differ by LAYOUT: the patient rail vs the staff coordinator rail, same chrome.
   Mobile-first: the rail is a slim top bar (brand + sign-out) while its nav (.tabs)
   docks to the bottom via the existing max-width:679px rule below; the desktop
   vertical rail is layered on at min-width:680px. .main replaces the old .wrap.
   ============================================================================ */
.app{min-height:100vh}
.rail{position:relative;display:flex;align-items:center;gap:12px;
  padding:11px 16px;background:var(--surface);border-bottom:1px solid var(--hair)}
.rail-brand{display:flex;align-items:center;gap:9px}
.rail-logo{width:26px;height:26px;border-radius:8px;background:var(--brand);flex:0 0 auto}
.rail-word{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
/* Mobile: the rail is a slim top bar — brand flows at the left, the foot (Sign out) is pinned to the
   right, and .rail-nav is out of flow so its position:fixed .tabs child docks to the bottom bar
   (below) without disturbing the top bar. The foot is pinned absolutely rather than flexed: next to
   the fixed-nav wrapper a flexed foot got shrunk to zero width. Desktop (min-width:680px) resets all
   of this to the vertical rail. */
.rail-nav{position:absolute;width:0;height:0}
.rail-foot{position:absolute;right:16px;top:0;bottom:0;display:flex;align-items:center;gap:10px}
.rail-user{display:none}              /* the profile chip is desktop-only (the Profile nav tab covers it on mobile) */
/* The release label follows the chip it sits under, for the same reason and by the same rule: below
   this breakpoint .rail-foot is the slim TOP BAR's right-hand slot (position:absolute; right:16px
   above), not a bottom cluster, so an unguarded version would render in the mobile top-right corner
   rather than "bottom-left under the role name". Desktop-only, exactly like .rail-user. */
.rail-version{display:none}
.main{min-width:0}
.pagehead{padding:18px 16px 2px}
.pagehead .h1{margin-top:2px}

@media(min-width:680px){
  .app{display:flex;align-items:stretch}
  .rail{flex:0 0 216px;width:216px;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:2px;position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;
    padding:18px 12px;background:var(--rail-bg);border-right:1px solid var(--hair);border-bottom:0}
  .rail-brand{padding:2px 8px 14px}
  .rail-nav{position:static;width:auto;height:auto;display:block}
  .rail-nav .tabs{flex-direction:column;gap:2px;margin-top:0}
  .rail-nav .tabs a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
    font-size:14px;font-weight:500;color:var(--ink2);border-bottom:0}
  .rail-nav .tabs a:hover{background:var(--brand-soft);color:var(--brand)}
  .rail-nav .tabs a.on{background:var(--brand-soft);color:var(--brand);font-weight:600;border-bottom:0}
  .rail-foot{position:static;flex-direction:column;align-items:stretch;gap:10px;margin-top:auto;
    padding-top:14px;border-top:1px solid var(--hair)}
  .rail-user{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:10px;
    text-decoration:none;color:inherit}
  .rail-user:hover{background:var(--brand-soft)}
  .rail-avatar{width:34px;height:34px;border-radius:50%;background:var(--brand-soft);
    border:1px solid var(--brand);flex:0 0 auto}
  .rail-user-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
  .rail-user-name{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rail-user-sub{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rail-version{display:block;padding:0 8px;font-size:10px;color:var(--muted);letter-spacing:.02em}
  .main{flex:1 1 auto;max-width:960px;padding:0 4px}
  .pagehead{padding:26px 18px 4px}
}
/* keyboard focus ring on the rail nav + back link (quality floor) */
.rail-nav .tabs a:focus-visible,.back:focus-visible,.rail-user:focus-visible,.rail-nav .tabs details.tab-more-sheet>summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:7px}
/* a consistent, visible keyboard focus ring on every other interactive control (WCAG 2.4.7) — so no
   control falls back to the browser default (unreliable perceptibility on filled buttons) */
.mini-go:focus-visible,.mini-ghost:focus-visible,.mini-cancel:focus-visible,.ph-btn:focus-visible,.primary:focus-visible,.cbtn:focus-visible,.exportbtn:focus-visible,.ranges button:focus-visible,.overlays button:focus-visible,a.pillar:focus-visible,.prow:focus-visible,.learn-card:focus-visible,.sw:focus-visible,.subnav a:focus-visible,.connect-sum:focus-visible,.email-change summary:focus-visible,.more-row:focus-visible,.chipdd>summary:focus-visible,.chipdd-item:focus-visible,.showmore:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:7px}
/* horizontal-scroll wrapper for the wide 5-column clinical revision table on narrow viewports */
.rev-scroll{overflow-x:auto}

/* mobile: the central menu docks to the bottom of the viewport (thumb reach, app convention) */
@media(max-width:679px){
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:50;margin:0;justify-content:space-around;gap:0;
    padding:11px 8px calc(11px + env(safe-area-inset-bottom));background:var(--nav-bg);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--hair)}
  .tabs a{font-size:11.5px;padding:2px 4px;border-bottom:0}
  .tabs a.on{border-bottom:0;font-weight:800} /* non-colour current-tab cue (WCAG 1.4.1) — desktop uses a fill */
  body{padding-bottom:66px}
}

/* ---- mobile "More" overflow (v2 Phase 5 — Turn 9c; patient nav only, see design doc §C.1) ---- */
:root{--scrim:rgba(24,34,30,.32)} /* sheet backdrop dim — a one-off overlay tint, tokenised like --nav-bg */
details.tab-more-sheet{display:none}
@media(max-width:679px){
  .tabs a.tab-more{display:none}
  details.tab-more-sheet{display:block}
  details.tab-more-sheet>summary{list-style:none;cursor:pointer;font-size:11.5px;font-weight:500;
    color:var(--ink2);text-align:center;padding:2px 4px}
  details.tab-more-sheet>summary::-webkit-details-marker{display:none}
  details.tab-more-sheet>summary.on{font-weight:800;color:var(--ink)}
  .more-sheet-body{display:none}
  details.tab-more-sheet[open]::before{content:"";position:fixed;inset:0;
    background:var(--scrim);z-index:55}
  details.tab-more-sheet[open]>summary{position:fixed;left:0;right:0;bottom:0;z-index:61;
    background:var(--surface);padding:9px 4px calc(9px + env(safe-area-inset-bottom));
    font-weight:800;color:var(--ink)}
  details.tab-more-sheet[open]>summary::after{content:"";display:block;width:38px;height:4px;
    border-radius:var(--radius-sm);background:var(--hair);margin:7px auto 0}
  details.tab-more-sheet[open] .more-sheet-body{display:flex;flex-direction:column;position:fixed;
    left:0;right:0;bottom:52px;z-index:60;max-height:60vh;overflow-y:auto;background:var(--surface);
    border-radius:var(--radius) var(--radius) 0 0;box-shadow:var(--shadow-lg);padding:4px 12px}
}
.more-row{display:flex;align-items:center;gap:10px;padding:13px 4px;text-decoration:none;
  color:var(--ink);border-top:1px solid var(--hair);font-size:14px;font-weight:600}
.more-row:first-child{border-top:0}
.more-row-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.more-row-chev{margin-left:auto;color:var(--chev);font-size:17px}
.more-row-ph{color:var(--muted);cursor:not-allowed}

/* staff profile (bio/photo) + concierge byline avatar */
.prof-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block;margin:2px 0 10px}
.prof-name{font-size:16px;font-weight:800;margin-bottom:2px}
.prof-bio{font-size:14px;font-weight:500;line-height:1.5;white-space:pre-wrap;margin:0 0 12px;color:var(--ink)}
.uform textarea{font-size:14px;font-weight:500;color:var(--ink);padding:9px 11px;
  border:1px solid var(--slate-200);border-radius:10px;background:var(--slate-50);font-family:inherit;resize:vertical}
.msg-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:6px}
/* sessions & devices (the server-side session store): one row per live session */
.sess-row{display:flex;align-items:center;gap:12px;padding:10px 0}
.sess-row + .sess-row{border-top:1px solid var(--hair)}
.sess-row .sess-act{margin-left:auto}
.sess-row .uchip{margin-left:6px}
.sess-all{margin-top:14px;display:flex;flex-direction:column;gap:6px}
/* staff capacity & time off (Programs tab) + warn-only scheduling banner */
.cap-summary{font-size:16px;font-weight:750;margin:2px 0}
.cap-subhead{font-size:11.5px;font-weight:750;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:20px 0 6px}
/* coordinator→doctor capacity request card (2026-07-21) — an attention item above the working-hours editor. */
.hcard.capreq{border-left:3px solid var(--amber-ink)}
.caprow{display:flex;align-items:center;gap:12px;justify-content:space-between;border-top:1px solid var(--hair);padding-top:8px}
.caprow:first-child{border-top:0;padding-top:0}
.caprow-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.caprow-note{font-size:13.5px;font-weight:650;color:var(--ink)}
.tolist{list-style:none;margin:10px 0 2px;padding:0;display:flex;flex-direction:column;gap:8px}
.torow{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1.5px solid var(--hair);border-radius:12px}
.torange{font-size:13.5px;font-weight:700}
.toreason{font-size:12.5px;color:var(--muted)}
.torow form{margin-left:auto}
.toadd{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:12px 0 4px}
.toadd .fl{flex:1;min-width:120px;margin:0}
.toadd .mini-go{margin-bottom:2px}
.reqwarn{background:var(--alert-soft);color:var(--alert);font-size:13px;font-weight:600;padding:11px 14px;
  border-radius:12px;margin-bottom:12px;display:flex;flex-direction:column;gap:3px}
.reqwarn-head{font-weight:800}
.reqwarn-item{font-weight:600}
/* §11 gate-5 — break-glass emergency access: the warning card + the unmissable record banner */
.bg-warn,.bg-link{border-left:4px solid var(--alert-ink)}
.bg-copy{font-size:13.5px;color:var(--slate-750);margin:0;line-height:1.55}
.bg-banner{display:flex;align-items:center;gap:12px;background:var(--emerg-bg);color:var(--surface);border-radius:13px;
  padding:13px 16px;margin-bottom:14px;box-shadow:var(--shadow-emerg)}
.bg-banner-tag{font-size:11px;font-weight:900;letter-spacing:.08em;background:var(--surface);color:var(--emerg-bg);
  border-radius:8px;padding:5px 9px;white-space:nowrap}
.bg-banner-copy{font-size:13px;font-weight:600;line-height:1.45}

/* GDPR Art. 17 erasure — the destructive request (patient) + review queue (admin). */
.mini-go.danger{background:var(--alert)}
.danger-zone{border:1.5px solid var(--rose-border);box-shadow:var(--shadow-danger)}
.danger-zone .hcard-cap{color:var(--alert)}
.urow-act{display:inline-flex;margin-left:6px}
.uchip-erase-requested{background:var(--amber-tint);color:var(--amber-ink)}
.uchip-erase-approved{background:var(--brand-soft);color:var(--good-ink)}
.uchip-erase-denied{background:var(--rose-mute-bg);color:var(--rose-mute-ink)}
.uchip-erase-fulfilled{background:var(--sky-bg);color:var(--info)}

/* SP-2 oversight affordances (account detail, admin-only): the per-account activity link + the
   force-sign-out misclick guard. <details> mirrors .email-change's self-service disclosure shell;
   danger-coloured (the existing GDPR-erasure coral) since it evicts ANOTHER account's sessions. */
.oversight{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);display:flex;
  align-items:center;gap:14px;flex-wrap:wrap}
.oversight-link{font-size:12.5px;font-weight:700;color:var(--brand);text-decoration:none}
.oversight-link:hover{text-decoration:underline}
.oversight details.danger{margin-left:auto}
.oversight details.danger>summary{font-size:12.5px;font-weight:700;color:var(--alert);cursor:pointer;list-style:none}
.oversight details.danger>summary::-webkit-details-marker{display:none}
.oversight details.danger form{margin-top:8px}
.oversight details.danger button{font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:11px;
  border:0;background:var(--alert);color:var(--surface);cursor:pointer}

/* --- M3 Revision comparison (Phase 4) --- */
.rev-objective{margin:0;font-size:14px;line-height:1.5;color:var(--ink);font-style:italic}
.rev-table{width:100%;border-collapse:collapse;font-size:13px}
.rev-table th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);padding:4px 8px;border-bottom:1px solid var(--hair)}
.rev-table td{padding:8px;border-bottom:1px solid var(--hair);vertical-align:top}
.rev-table tr:last-child td{border-bottom:0}
.rev-metric{display:flex;flex-direction:column;gap:2px}
.rev-label{font-weight:640;color:var(--ink)}
.rev-span{font-size:11px;color:var(--muted)}
.rev-flag{align-self:flex-start;font-size:10px;font-weight:700;color:var(--alert);background:var(--alert-soft);padding:1px 6px;border-radius:6px}
.rev-base,.rev-now{font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.rev-now{font-weight:640}
.rev-delta{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.rev-delta.good{color:var(--brand)}
.rev-delta.warn{color:var(--alert)}
.rev-delta.flat{color:var(--muted)}
.rev-status{font-size:11px;font-weight:700;padding:2px 8px;border-radius:8px}
.rev-status.good{background:var(--brand-soft);color:var(--good-ink)}
.rev-status.warn{background:var(--alert-soft);color:var(--alert)}
.rev-status.flat{background:var(--slate-100);color:var(--slate-600)}

/* SP-3 staff→admin support channel */
.uchip-done{background:var(--slate-100);color:var(--slate-600)}

/* ---- v2 shared primitives: metric / trend / infoDot / newDot / pageTabs ---- */
.metric{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--radius);padding:13px 14px;box-shadow:var(--shadow);text-decoration:none;color:inherit;position:relative}
a.metric{transition:box-shadow .12s,transform .12s}
a.metric:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
a.metric:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.metric-head{display:flex;align-items:center;gap:6px}
.metric-label{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:700}
.metric-value{font-size:26px;font-weight:780;letter-spacing:-.02em;color:var(--ink);line-height:1.05;font-variant-numeric:tabular-nums}
.metric-unit{font-size:12px;font-weight:600;color:var(--muted);margin-left:5px;letter-spacing:0}
.metric-trend{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700}
.metric-trend.good{color:var(--trend-good)}
.metric-trend.bad{color:var(--trend-bad)}
.metric-trend.none{color:var(--trend-none)}
.trend-arrow{font-size:10px}
.infodot{position:relative;display:inline-flex;cursor:help}
.infodot-i{width:14px;height:14px;border-radius:50%;border:1px solid var(--muted);color:var(--muted);
  font-size:9px;font-weight:800;font-style:italic;display:flex;align-items:center;justify-content:center;line-height:1}
.infodot-bubble{position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%);width:max-content;
  max-width:220px;background:var(--ink);color:var(--surface);font-size:11.5px;font-weight:500;line-height:1.4;
  padding:8px 10px;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;
  transition:opacity .12s;z-index:20;text-transform:none;letter-spacing:0}
.infodot:hover .infodot-bubble,.infodot:focus-within .infodot-bubble{opacity:1;visibility:visible}
.newdot{width:8px;height:8px;border-radius:50%;background:var(--alert);flex:0 0 auto;display:inline-block;
  vertical-align:middle;margin-left:5px;box-shadow:0 0 0 3px var(--alert-soft)}
.ptabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.ptab{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius-pill);padding:7px 14px}
.ptab:hover{border-color:var(--brand);color:var(--brand)}
.ptab.on{background:var(--brand);color:var(--surface);border-color:var(--brand)}
.ptab:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---- headline metric row (v2 Phase 1 — Vitality/BioAge on patient Home, KPI signals on staff Home) ---- */
.metric-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:12px 14px 0}

/* ---- role badge ("You" / "Staff") beside the Home header (v2 Phase 1) ---- */
.role-badge{display:inline-block;margin-top:8px;font-size:10px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);background:var(--slate-100);border-radius:var(--radius-sm);
  padding:3px 9px}

/* ---- Intake / guided onboarding (Phase 2, §4e) ---- */
.intake{max-width:760px;margin:0 auto;padding:32px 24px}
.intake-head{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.intake-head-meta{flex:1}
/* the wizard's one consistent escape hatch — the progress bar with a low-key "finish later" link
   stacked beneath it, top-right on every step (2026-07-21: replaces the shell-bottom "Skip for now"
   that sat below the stepper on some steps but read as a per-step control on others). */
.intake-head-side{display:flex;flex-direction:column;align-items:flex-end;gap:9px;flex:0 0 auto}
.intake-skip{font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}
.intake-skip:hover{color:var(--brand);text-decoration:underline}
.intake-bar{width:180px;flex:0 0 auto;height:6px;border-radius:var(--radius-pill);background:var(--hair);overflow:hidden}
.intake-bar i{display:block;height:100%;background:var(--brand);border-radius:var(--radius-pill)}
.intake-bar i.ibar-17{width:17%}
.intake-bar i.ibar-20{width:20%}
.intake-bar i.ibar-33{width:33%}
.intake-bar i.ibar-40{width:40%}
.intake-bar i.ibar-50{width:50%}
.intake-bar i.ibar-60{width:60%}
.intake-bar i.ibar-67{width:67%}
.intake-bar i.ibar-80{width:80%}
.intake-bar i.ibar-83{width:83%}
.intake-bar i.ibar-100{width:100%}
.intake-body{display:flex;gap:26px;align-items:flex-start}
.istepper{width:200px;flex:none;display:flex;flex-direction:column;gap:2px}
/* the post-submission status tracker (intakeStatus) reuses .istepper's row/dot/label styling but
   isn't a narrow wizard-nav sidebar — it's the ONLY content in a full-width .ipanel, so it drops the
   fixed 200px width */
.istepper-wide{width:auto}
.istep{display:flex;gap:12px;padding:8px 0}
.istep-dot{width:10px;height:10px;border-radius:50%;background:var(--slate-300);flex:none;margin-top:4px}
.istep.done .istep-dot,.istep.current .istep-dot{background:var(--brand)}
.istep-meta{display:flex;flex-direction:column;min-width:0}
.istep-label{font-size:13px;font-weight:650;color:var(--muted)}
.istep.current .istep-label{color:var(--brand);font-weight:760}
.istep.done .istep-label{color:var(--ink)}
.istep-detail{font-size:11.5px;color:var(--muted);margin-top:1px}
.ipanel{flex:1;min-width:0;background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);
  padding:22px 24px;box-shadow:var(--shadow)}
.ipanel-actions{display:flex;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--hair)}
@media(max-width:679px){
  .intake-body{flex-direction:column}
  .istepper{width:auto;flex-direction:row;flex-wrap:wrap;gap:14px}
}

/* ---- Profile & settings identity header (v2 Phase 5 — Turn 9b r-gate) ---- */
.prof-head{display:flex;align-items:center;gap:12px;margin:16px 14px 0}
.prof-avatar{width:44px;height:44px;border-radius:50%;background:var(--brand-soft);
  border:1px solid var(--brand);flex:0 0 auto}
.prof-head-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.prof-head-name{font-size:16px;font-weight:760;letter-spacing:-.01em;color:var(--ink)}
.prof-head-sub{font-size:12px;color:var(--muted);font-weight:600}
.prof-head .chip{margin-left:auto}

/* ---- Notifications placeholder (v2 Phase 5 — FLAGGED, no backend) ---- */
.sw.static{cursor:default}
.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}

/* ---- Language choice (v2 Phase 5 — same honest placeholder as nav topRight, fuller layout) ---- */
.lang-choice{display:flex;gap:8px}
.lang-opt{flex:1;display:flex;align-items:center;gap:8px;border:1px solid var(--hair);
  border-radius:var(--radius-sm);padding:8px 10px;font-size:12.5px;font-weight:600;color:var(--ink)}
.lang-opt.off{color:var(--muted);cursor:not-allowed}
.lang-radio{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--slate-300);flex:0 0 auto}
.lang-radio.on{border-color:var(--brand);
  background:radial-gradient(circle,var(--brand) 0 5px,transparent 6px)}

/* ---- settings 2-up row (v2 Phase 5 — Language + Security side by side on desktop) ---- */
/* the row owns the standard 14px card gutter (so it separates from the card above and aligns with
   sibling cards); its children drop ALL their own margins — the row's gap + the cards' own padding
   handle the interior spacing. */
.settings-row{display:flex;gap:14px;flex-wrap:wrap;margin:14px 14px 0}
.settings-row>.hcard{flex:1 1 240px;margin:0}