/* ---------------------------------------------------------------------------
   My GLP-1 Journey — one stylesheet.

   Same visual language as the local app it replaces: the palette, the card,
   the chip, the radius and the shadow are lifted from it, so someone moving
   from one to the other is not learning a new product.

   Phone first. Navigation sits at the top on every screen, and repeats at the
   bottom on a phone, where the thumb actually is. Tap targets clear 44px and
   inputs are 16px, so iOS does not zoom the page when one is focused.
--------------------------------------------------------------------------- */

:root{
  --bg:#f6f7f9; --panel:#ffffff; --panel-2:#f0f2f5; --line:#e2e6ec;
  --ink:#12161c; --ink-2:#57606f; --ink-3:#8b94a3;
  --accent:#3d5afe; --accent-ink:#ffffff; --accent-soft:#e8ecff;
  --carb:#d9822b;
  --claude:#c96442;   /* Claude's clay/coral — used for AI cost figures */
  --ok:#0f9d58; --ok-soft:#e3f5ea;
  --warn:#c77700; --warn-soft:#fdf1de;
  --bad:#d13438; --bad-soft:#fdeaea;
  --radius:14px; --radius-s:9px;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.06);
  --shadow-lift:0 2px 6px rgba(16,24,40,.08),0 16px 40px rgba(16,24,40,.10);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --tap:46px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e1116; --panel:#161b22; --panel-2:#1c222b; --line:#2a323d;
    --ink:#e8edf4; --ink-2:#a3adbb; --ink-3:#6e7885;
    --accent:#7d92ff; --accent-ink:#0b0e13; --accent-soft:#1e2740;
    --carb:#f0a355;
    --claude:#e08769;   /* lighter clay for dark surfaces */
    --ok:#4ade80; --ok-soft:#14301f;
    --warn:#fbbf24; --warn-soft:#332708;
    --bad:#f87171; --bad-soft:#3a1616;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5),0 16px 40px rgba(0,0,0,.4);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15.5px/1.55 var(--sans);
  letter-spacing:-.006em;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}
h1{font-size:1.45rem;line-height:1.2;letter-spacing:-.02em;margin:0 0 .35rem;font-weight:660}
h2{font-size:1.02rem;letter-spacing:-.012em;margin:0;font-weight:640}
h3{font-size:.94rem;margin:0 0 .3rem;font-weight:640}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
code{font-family:var(--mono);font-size:.88em;background:var(--panel-2);
     padding:.12em .38em;border-radius:6px}

.wrap{max-width:54rem;margin:0 auto;padding:0 1rem}
.sub{color:var(--ink-2);font-size:.92rem;margin:.2rem 0 .85rem}
.mut{color:var(--ink-3);font-size:.83rem}
.footnote{color:var(--ink-3);font-size:.79rem;line-height:1.5}
.grow{flex:1}
.hide{display:none !important}
.nowrap{white-space:nowrap}

/* ---- the top bar and navigation ---------------------------------------- */
.appbar{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  padding:calc(var(--safe-t) + .6rem) 0 0;
}
.appbar .bar{
  max-width:54rem; margin:0 auto; padding:0 1rem .55rem;
  display:flex; align-items:center; gap:.55rem;
}
.appbar .brand{font-weight:680;font-size:.98rem;letter-spacing:-.015em}
.appbar .who{font-size:.76rem;color:var(--ink-3);
  max-width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The top tab row. Horizontally scrollable on a narrow phone rather than
   wrapping into two lines and pushing the content down. */
.tabs-top{
  max-width:54rem; margin:0 auto; padding:0 .5rem;
  display:flex; gap:.15rem; overflow-x:auto; scrollbar-width:none;
}
.tabs-top::-webkit-scrollbar{display:none}
.tabs-top button,.tabs-top a{
  flex:0 0 auto; border:0; background:none; cursor:pointer; font:inherit;
  text-decoration:none;
  font-size:.88rem; font-weight:600; color:var(--ink-3);
  padding:.5rem .7rem .6rem; position:relative;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  touch-action:manipulation; white-space:nowrap;
  display:flex; align-items:center; gap:.35rem;
}
.tabs-top button .ic,.tabs-top a .ic{font-size:.95rem;line-height:1}
.tabs-top button:hover,.tabs-top a:hover{color:var(--ink-2)}
.tabs-top button[aria-selected="true"],.tabs-top a[aria-selected="true"]{
  color:var(--accent);border-bottom-color:var(--accent)}

/* The bottom bar, phones only: the top row is reachable but not comfortable
   one-handed, and this is a diary people fill in while doing something else. */
.tabs-bottom{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; background:color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--line); padding-bottom:var(--safe-b);
}
.tabs-bottom button{
  flex:1; min-height:var(--tap); border:0; background:none; cursor:pointer;
  color:var(--ink-3); font:inherit; font-size:.66rem; font-weight:620;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.15rem; padding:.4rem .2rem; touch-action:manipulation;
}
.tabs-bottom button .ic{font-size:1.2rem;line-height:1}
.tabs-bottom button[aria-selected="true"]{color:var(--accent)}
@media (min-width:760px){ .tabs-bottom{display:none} }

/* Leave room under the last card for the fixed bottom bar AND the phone's home
   indicator, with a generous margin so the final row's Edit/Delete buttons are
   never tucked under the bar or lost to iOS overscroll spring-back.
   IMPORTANT: this must be scoped as `body.app main`, not a bare `main`. The
   patient shell renders <main class="wrap">, and `.wrap{padding:0 1rem}` — a
   class — outranks a bare `main` element selector, so a plain `main{padding-
   bottom}` is silently overridden to 0. `body.app main` wins the cascade and the
   padding actually applies. scroll-padding-bottom (on html, not overridden) keeps
   anchored scrolling clear of the bar too. */
body.app main{padding-bottom:calc(var(--tap) + 4.5rem + var(--safe-b))}
html{scroll-padding-bottom:calc(var(--tap) + 4.5rem + var(--safe-b))}
@media (min-width:760px){
  body.app main{padding-bottom:3.5rem}
  html{scroll-padding-bottom:0}
}

/* ---- cards -------------------------------------------------------------- */
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.05rem; margin:1rem 0;
}
.card-h{display:flex;align-items:center;gap:.55rem;margin-bottom:.8rem}
.card.backdate{border-color:var(--accent);background:var(--accent-soft)}
.navbadge.flag{background:var(--bad,#c0392b);color:#fff}
tr.row-urgent td{background:var(--bad-soft)}
.checklist{display:grid;grid-template-columns:1fr;gap:.15rem;max-height:60vh;overflow:auto}
@media(min-width:640px){.checklist{grid-template-columns:1fr 1fr}}
.checkrow{display:flex;align-items:center;gap:.55rem;padding:.4rem .5rem;border-radius:8px}
.checkrow:hover{background:var(--panel-2)}
.checkrow input{width:18px;height:18px}
.timesel{display:flex;align-items:center;gap:.45rem}
.timesel select{min-width:4.4rem;text-align:center}
.timesep{font-weight:700;opacity:.6}
.loginform input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.loginas{display:flex;gap:.35rem;background:var(--panel-2);border-radius:12px;padding:.25rem;margin:.3rem 0 .7rem}
.loginas label{flex:1;text-align:center;padding:.5rem .6rem;border-radius:9px;cursor:pointer;font-weight:600;color:var(--ink-3)}
#as-p:checked ~ .loginas label[for="as-p"],
#as-s:checked ~ .loginas label[for="as-s"]{background:var(--panel);color:var(--accent);box-shadow:var(--shadow)}
.loginform .sub-s, .loginform .lbl-s{display:none}
#as-s:checked ~ .sub-s{display:block}
#as-s:checked ~ .field .lbl-s{display:inline}
#as-s:checked ~ .sub-p, #as-s:checked ~ .field .lbl-p{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.loginform .request-s{display:none}
#as-s:checked ~ .request-s{display:block}
#as-s:checked ~ .request-p{display:none}
.card.backdate .card-h .ic{font-size:1.2rem}

.badge{
  font-size:.63rem;font-weight:700;text-transform:uppercase;letter-spacing:.055em;
  padding:.22rem .5rem;border-radius:999px;background:var(--panel-2);color:var(--ink-3);
}
.badge.a{background:var(--ok-soft);color:var(--ok)}
.badge.w{background:var(--warn-soft);color:var(--warn)}
/* AI spend figures wear the Claude clay colour. */
.aicost{color:var(--claude);font-weight:650;font-variant-numeric:tabular-nums}
.stat .v.aicost{color:var(--claude)}
.badge.r{background:var(--bad-soft);color:var(--bad)}

.note{border-radius:var(--radius-s);padding:.75rem .9rem;margin:0 0 1rem;font-size:.9rem}
.note.ok{background:var(--ok-soft);color:var(--ok)}
.note.bad{background:var(--bad-soft);color:var(--bad)}
.note.warn{background:var(--warn-soft);color:var(--warn)}
.note ul{margin:.5rem 0 0;padding-left:1.2rem}
.note li{margin:.25rem 0}

/* ---- stat tiles --------------------------------------------------------- */
.stats{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(6.2rem,1fr))}
.stat{background:var(--panel-2);border-radius:var(--radius-s);padding:.7rem .8rem}
.stat .k{font-size:.68rem;font-weight:660;text-transform:uppercase;letter-spacing:.05em;
         color:var(--ink-3);margin-bottom:.15rem}
.stat .v{font-size:1.5rem;font-weight:680;line-height:1.1;letter-spacing:-.02em;
         font-variant-numeric:tabular-nums}
.stat .u{font-size:.74rem;color:var(--ink-3);margin-top:.1rem}
.stat.on{background:var(--accent-soft)}
.stat.on .v{color:var(--accent)}

/* ---- forms -------------------------------------------------------------- */
label{display:block;font-size:.76rem;font-weight:640;color:var(--ink-2);
      margin:0 0 .35rem;letter-spacing:.005em}
label .opt{font-weight:400;color:var(--ink-3)}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=url],
input[type=date],input[type=time],input[type=number],input[type=search],select,textarea{
  width:100%; min-height:var(--tap);
  background:var(--panel-2); color:inherit;
  border:1px solid var(--line); border-radius:var(--radius-s);
  padding:.6rem .75rem;
  font:inherit; font-size:16px;   /* 16px or iOS zooms the page on focus */
  transition:border-color .12s, box-shadow .12s;
}
textarea{min-height:5.5rem;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field{margin-bottom:1rem}
.row{display:grid;gap:.75rem;grid-template-columns:1fr}
@media (min-width:560px){.row{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}}

.btn{
  min-height:var(--tap); display:inline-flex; align-items:center; justify-content:center;
  gap:.4rem; padding:.6rem 1.05rem;
  background:var(--panel); color:inherit; border:1px solid var(--line);
  border-radius:var(--radius-s); font:inherit; font-size:.92rem; font-weight:620;
  cursor:pointer; touch-action:manipulation; text-decoration:none;
  transition:background .12s, border-color .12s, transform .06s;
}
.btn:hover{border-color:var(--ink-3)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
             box-shadow:0 1px 2px rgba(16,24,40,.10)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.danger{color:var(--bad)}
.btn.danger:hover{border-color:var(--bad)}
.btn.ghost{background:none;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--panel-2);border-color:transparent}
.btn.sm{min-height:34px;padding:.3rem .65rem;font-size:.82rem}
.btn.wide{width:100%}
.btn[disabled]{opacity:.5;cursor:default}
.btns{display:flex;gap:.5rem;flex-wrap:wrap}

/* ---- the quick-log grid ------------------------------------------------- */
.quickgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
@media (min-width:560px){.quickgrid{grid-template-columns:repeat(5,1fr)}}
.quick{
  min-height:5rem; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel-2); color:inherit; font:inherit;
  font-size:.76rem; font-weight:620;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
  cursor:pointer; touch-action:manipulation; padding:.4rem;
  transition:background .12s, border-color .12s, transform .06s;
}
.quick .ic{font-size:1.55rem;line-height:1}
.quick:hover{border-color:var(--accent);background:var(--accent-soft)}
.quick:active{transform:scale(.97)}

.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{
  min-height:40px; padding:.45rem .85rem; border-radius:999px;
  border:1px solid var(--line); background:var(--panel-2); color:inherit;
  font:inherit; font-size:.88rem; font-weight:520; cursor:pointer;
  touch-action:manipulation; transition:background .12s, border-color .12s;
}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);
  color:var(--accent-ink);font-weight:600}

/* Colour swatches: a real shade dot beside the word. The dot keeps its own
   colour when the chip is selected (only the pill fill changes), so the
   selected swatch still reads as that colour. */
.swatches{gap:.5rem}
.swatch{display:inline-flex;align-items:center;gap:.5rem;padding-left:.5rem}
.swatch .dot{
  width:20px;height:20px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.swatch[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);
  color:var(--accent-ink)}
.swatch[aria-pressed="true"] .dot{box-shadow:0 0 0 2px var(--accent-ink)}

.scale{display:flex;gap:.28rem;flex-wrap:wrap}
.scale button{
  flex:1 1 2.1rem; min-width:2.1rem; min-height:44px;
  border:1px solid var(--line); background:var(--panel-2); color:inherit;
  border-radius:var(--radius-s); font:inherit; font-weight:620; cursor:pointer;
  font-variant-numeric:tabular-nums; touch-action:manipulation;
  transition:background .1s, border-color .1s;
}
.scale button:hover{border-color:var(--accent)}
.scale button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);
  color:var(--accent-ink)}
.scale-ends{display:flex;justify-content:space-between;font-size:.72rem;
  color:var(--ink-3);margin-top:.3rem}

/* ---- lists and tables --------------------------------------------------- */
.kv{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;
    border-bottom:1px solid var(--line);font-size:.9rem}
.kv:last-child{border-bottom:0}
.kv span:first-child{color:var(--ink-2)}
.kv span:last-child{text-align:right;font-weight:600}

.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -1.05rem;padding:0 1.05rem}
table{width:100%;border-collapse:collapse;font-size:.86rem}
th{text-align:left;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;
   color:var(--ink-3);font-weight:680;padding:.5rem .45rem;
   border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:.6rem .45rem;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums}

.item{display:flex;gap:.65rem;align-items:flex-start;padding:.65rem 0;
      border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item .ic{font-size:1.1rem;line-height:1.35}
.item .when{font-family:var(--mono);font-size:.76rem;color:var(--ink-3);
            min-width:2.9rem;padding-top:.1rem;font-variant-numeric:tabular-nums}
.item .body{flex:1;min-width:0;font-size:.9rem}
.item .body b{font-weight:640}
.item .acts{opacity:.55;transition:opacity .12s}
.item:hover .acts{opacity:1}
@media (hover:none){ .item .acts{opacity:1} }

.empty{text-align:center;padding:2rem 1rem;color:var(--ink-3)}
.empty .ic{font-size:2rem;display:block;margin-bottom:.5rem;opacity:.5}

/* ---- sheets: a sheet on a phone, a dialog on a desktop ------------------ */
.scrim{position:fixed;inset:0;background:rgba(10,14,20,.5);z-index:100;
       display:flex;align-items:flex-end;justify-content:center;
       backdrop-filter:blur(2px);animation:fade .15s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--panel); width:100%; max-height:92vh;
  border-radius:20px 20px 0 0; display:flex; flex-direction:column;
  padding-bottom:var(--safe-b); box-shadow:var(--shadow-lift);
  animation:sheet .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes sheet{from{transform:translateY(18px)}to{transform:none}}
@media (min-width:640px){
  .scrim{align-items:center}
  .modal{max-width:34rem;border-radius:var(--radius);animation:pop .15s ease-out}
  @keyframes pop{from{transform:scale(.98);opacity:.7}to{transform:none;opacity:1}}
}
.modal-h{display:flex;align-items:center;gap:.55rem;padding:1rem 1.05rem .7rem}
.modal-h h2{font-size:1.02rem;flex:1}
.modal-b{padding:.3rem 1.05rem 1.05rem;overflow-y:auto;
         -webkit-overflow-scrolling:touch;flex:1}
.modal-f{display:flex;gap:.5rem;padding:.85rem 1.05rem calc(.85rem + var(--safe-b));
         border-top:1px solid var(--line)}
.modal-f .spacer{flex:1}
.iconbtn{min-width:38px;min-height:38px;border:0;background:none;color:var(--ink-3);
         font-size:1.05rem;cursor:pointer;border-radius:999px}
.iconbtn:hover{background:var(--panel-2);color:var(--ink)}
.steps{display:flex;gap:.25rem;padding:0 1.05rem .3rem}
.steps i{flex:1;height:3px;border-radius:2px;background:var(--line);transition:background .2s}
.steps i.on{background:var(--accent)}

/* ---- toast -------------------------------------------------------------- */
#toastRoot{position:fixed;left:0;right:0;bottom:calc(var(--tap) + var(--safe-b) + .7rem);
           z-index:200;display:flex;justify-content:center;pointer-events:none;padding:0 1rem}
.toast{background:var(--ink);color:var(--bg);padding:.7rem 1.05rem;
       border-radius:var(--radius-s);font-size:.88rem;font-weight:520;max-width:32rem;
       box-shadow:var(--shadow-lift);pointer-events:auto;animation:sheet .18s ease-out}
@media (min-width:760px){#toastRoot{bottom:1.6rem}}

/* ---- signed-out pages --------------------------------------------------- */
body.plain{display:flex;align-items:center;justify-content:center;
           min-height:100dvh;padding:1.2rem}
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
       box-shadow:var(--shadow);padding:1.6rem;width:100%;max-width:25rem;
       /* centred horizontally everywhere; the wrapper below adds vertical */
       margin-inline:auto;margin-block:8vh}
/* On the sign-in / reset / claim pages the sheet is the whole page — centre it
   in the viewport rather than letting it sit in the top-left corner. */
body:has(> .sheet){min-height:100dvh;display:flex;flex-direction:column;
       justify-content:center;align-items:center;padding:1rem}
body:has(> .sheet) .sheet{margin-block:0}
.sheet h1{font-size:1.28rem}
.brandmark{font-size:1.7rem;margin-bottom:.45rem}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ---- the horizontal timeline ------------------------------------------- */
/* Colour is never the only signal here: every cell carries its score as a
   number and names its severity to a screen reader, because around one man in
   twelve cannot separate the red from the green. */
.tl-card{position:sticky;top:calc(var(--safe-t) + 5.6rem);z-index:20}
@media (min-width:760px){ .tl-card{position:static} }

.tl{
  display:flex; gap:.3rem; overflow-x:auto; padding:.15rem .1rem .5rem;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.tl::-webkit-scrollbar{height:5px}
.tl::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

.tl-day{
  flex:0 0 auto; width:2.5rem; min-height:3.7rem; scroll-snap-align:center;
  border:1px solid var(--line); border-radius:10px; background:var(--panel-2);
  color:var(--ink-2); font:inherit; cursor:pointer; padding:.32rem .1rem .3rem;
  display:flex; flex-direction:column; align-items:center; gap:.05rem;
  position:relative; touch-action:manipulation;
  transition:transform .08s, border-color .12s, box-shadow .12s;
}
.tl-day:hover{border-color:var(--accent);transform:translateY(-1px)}
.tl-day .wd{font-size:.6rem;font-weight:660;text-transform:uppercase;
            letter-spacing:.04em;opacity:.65}
.tl-day .dd{font-size:.92rem;font-weight:680;line-height:1.15;
            font-variant-numeric:tabular-nums}
.tl-day .sc{font-size:.66rem;font-weight:700;font-variant-numeric:tabular-nums;
            min-height:.85rem;opacity:.9}
.tl-day .inj{position:absolute;bottom:.24rem;left:50%;transform:translateX(-50%);
             width:5px;height:5px;border-radius:50%;background:var(--accent);
             box-shadow:0 0 0 2px var(--panel-2)}

.tl-day.band-none{background:var(--panel-2);color:var(--ink-3)}
.tl-day.band-mild{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.tl-day.band-moderate{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.tl-day.band-severe{background:var(--bad-soft);border-color:transparent;color:var(--bad)}

.tl-day.today{box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.tl-day.sel{box-shadow:0 0 0 2px var(--accent);border-color:transparent;
            transform:translateY(-1px)}
.tl-day.sel .inj{box-shadow:0 0 0 2px var(--panel)}

.tl-key{display:flex;flex-wrap:wrap;gap:.5rem .85rem;font-size:.7rem;color:var(--ink-3);
        padding-top:.15rem}
.tl-key span{display:inline-flex;align-items:center;gap:.28rem}
.tl-key i{width:.65rem;height:.65rem;border-radius:3px;display:inline-block}
.tl-key .k-none{background:var(--panel-2);border:1px solid var(--line)}
.tl-key .k-mild{background:var(--ok-soft);border:1px solid var(--ok)}
.tl-key .k-moderate{background:var(--warn-soft);border:1px solid var(--warn)}
.tl-key .k-severe{background:var(--bad-soft);border:1px solid var(--bad)}
.tl-key .k-inj{background:var(--accent);border-radius:50%;width:.5rem;height:.5rem}

/* ---------------------------------------------------------------- charts ---
   The series colours are validated against both surfaces (see Chart.php).
   Grid and axis stay recessive: they orient the eye, they are not the data.
--------------------------------------------------------------------------- */
.chart{margin:.4rem -.4rem .2rem;overflow-x:auto}
.chart svg{width:100%;min-width:420px;height:auto;display:block}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .axis{stroke:var(--ink-3);stroke-width:1}
.chart .ylab{fill:var(--ink-3);font:11px var(--sans);text-anchor:end}
.chart .xlab{fill:var(--ink-3);font:11px var(--sans);text-anchor:middle}
.chart .bar{fill:#2a78d6}
.chart .line{fill:none;stroke:#2a78d6;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:#2a78d6;stroke:var(--panel);stroke-width:2}
@media (prefers-color-scheme:dark){
  .chart .bar{fill:#3987e5}
  .chart .line{stroke:#3987e5}
  .chart .dot{fill:#3987e5}
}
.chart rect.bar:hover,.chart circle.dot:hover{opacity:.82}

.tblfold{margin-top:.9rem;border-top:1px solid var(--line);padding-top:.6rem}
.tblfold summary{cursor:pointer;color:var(--ink-2);font-size:.9rem;
  min-height:var(--tap);display:flex;align-items:center}

/* filters sit in one row above the charts, and stack on a phone */
.filters{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-end}
.filters .field{flex:1 1 11rem;margin:0}
.filters .field.submit{flex:0 0 auto}
.filters select{width:100%}
@media (max-width:560px){ .filters .field{flex:1 1 100%} }

.ai-out{margin-top:1rem;background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--radius-s);padding:.9rem 1rem;font-size:.95rem;line-height:1.6}

/* rough energy estimates — always a range, never a target */
.kcal{display:inline-block;margin-left:.35rem;padding:.05rem .4rem;border-radius:999px;
  background:var(--panel-2);color:var(--ink-2);font-size:.78rem;font-weight:600;
  white-space:nowrap;vertical-align:baseline}
.kcalhint{margin:.1rem 0 .9rem;padding:.55rem .7rem;background:var(--panel-2);
  border-radius:var(--radius-s);font-size:.88rem;line-height:1.45;color:var(--ink-2)}
.kcalhint b{color:var(--ink)}

/* ------------------------------------------------- drill-down and intervals */
.chart a.drill{cursor:pointer}
.chart .hit{fill:transparent;stroke:none}
.chart a.drill:hover .bar,.chart a.drill:hover .dot{opacity:.75}
.chart a.drill:focus-visible .hit{fill:color-mix(in srgb,var(--accent) 12%,transparent)}

/* a forest plot: the interval is the mark, the point is only its middle */
.forest svg{min-width:560px}
.chart .rowlab{fill:var(--ink-2);font:12px var(--sans);text-anchor:end}
.chart .ci{stroke-width:3;stroke-linecap:round;stroke:var(--ink-3)}
.chart .ci.solid{stroke:#2a78d6}
.chart .ci.watch{stroke:#1baf7a}
.chart .ci.weak{stroke:var(--ink-3)}
.chart .ci.trend{stroke:#eda100}
.chart .est{fill:var(--panel);stroke:var(--ink-2);stroke-width:2.5}
.chart .est.solid{stroke:#2a78d6}
.chart .est.watch{stroke:#1baf7a}
.chart .est.trend{stroke:#eda100}
.chart a.drill:hover .ci{stroke-width:5}

/* a split bar: proportions, never an average of opposite things */
.chart .seg{fill:var(--ink-3)}
.chart .seg.hard{fill:#eb6834}
.chart .seg.normal{fill:#1baf7a}
.chart .seg.loose{fill:#2a78d6}
.chart .seglab{fill:var(--panel);font:11px var(--sans);font-weight:700;text-anchor:middle}
@media (prefers-color-scheme:dark){
  .chart .ci.solid,.chart .est.solid{stroke:#3987e5}
  .chart .ci.watch,.chart .est.watch{stroke:#199e70}
  .chart .ci.trend,.chart .est.trend{stroke:#c98500}
  .chart .seg.hard{fill:#d95926}
  .chart .seg.normal{fill:#199e70}
  .chart .seg.loose{fill:#3987e5}
}

/* findings, and how sure we are of them */
.finding{border:1px solid var(--line);border-radius:var(--radius-s);padding:.85rem 1rem;
  margin-bottom:.7rem;background:var(--panel)}
.finding h4{margin:0 0 .3rem;font-size:.98rem;font-weight:640}
.finding .counts{font-size:.92rem;color:var(--ink-2);margin:.35rem 0}
.finding .counts b{color:var(--ink)}
.tierbadge{display:inline-block;padding:.08rem .5rem;border-radius:999px;font-size:.72rem;
  font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.tierbadge.solid{background:var(--accent-soft);color:var(--accent)}
.tierbadge.watch{background:var(--ok-soft);color:var(--ok)}
.tierbadge.weak{background:var(--panel-2);color:var(--ink-3)}
.tierbadge.trend{background:var(--warn-soft);color:var(--warn)}
.tierbadge.insufficient{background:var(--panel-2);color:var(--ink-3)}

/* safety flags */
.flag{border-left:3px solid var(--line);padding:.7rem 0 .7rem .9rem;margin-bottom:.9rem}
.flag.urgent{border-left-color:var(--bad)}
.flag.soon{border-left-color:var(--warn)}
.flag.watch{border-left-color:var(--ink-3)}
.flag h4{margin:0 0 .2rem;font-size:.98rem}
.flag .who{font-family:var(--mono);font-size:.82rem;color:var(--ink-2)}
.flag .basis{font-size:.85rem;color:var(--ink-3);margin-top:.35rem;line-height:1.45}
.subtabs{display:flex;gap:.3rem;overflow-x:auto;margin:.2rem 0 1rem;scrollbar-width:none}
.subtabs::-webkit-scrollbar{display:none}
.subtabs a{flex:0 0 auto;padding:.45rem .8rem;border-radius:999px;text-decoration:none;
  font-size:.88rem;font-weight:600;color:var(--ink-2);background:var(--panel-2);
  min-height:var(--tap);display:flex;align-items:center}
.subtabs a[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}

/* delete-account control: folded away so it is never a stray click */
.delfold{display:inline-block;vertical-align:top}
.delfold summary{cursor:pointer;list-style:none;display:inline-flex}
.delfold summary::-webkit-details-marker{display:none}
.delbox{position:relative;z-index:5;margin-top:.5rem;padding:.8rem;text-align:left;
  background:var(--panel);border:1px solid var(--bad);border-radius:var(--radius-s);
  box-shadow:var(--shadow-lift);min-width:16rem}
.delbox .sub{margin:.2rem 0 .7rem;font-size:.86rem}
.delbox input[name=confirm]{margin:.3rem 0 .6rem}

/* ------------------------------------------------------------- messaging */
.cardlink{display:block;text-decoration:none;color:inherit}
.cardlink:hover{border-color:var(--accent)}
.msgrow{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;text-decoration:none;
  color:inherit;border-bottom:1px solid var(--line)}
.msgrow:last-child{border-bottom:0}
.msgrow:hover{background:var(--panel-2)}
.msgrow .avatar{font-size:1.4rem;flex:0 0 auto;width:2.2rem;height:2.2rem;display:flex;
  align-items:center;justify-content:center;background:var(--panel-2);border-radius:50%}
.msgrow-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.msgrow-top{display:flex;gap:.5rem;align-items:baseline}
.msgrow-top b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgrow .sm{font-size:.82rem}
.msgrow .chev{color:var(--ink-3);font-size:1.3rem}

.thread{display:flex;flex-direction:column;gap:.35rem;padding:.5rem 0 1rem}
.daysep{text-align:center;margin:.7rem 0 .3rem}
.daysep span{background:var(--panel-2);color:var(--ink-3);font-size:.75rem;
  padding:.15rem .6rem;border-radius:999px}
.bubble{max-width:80%;padding:.55rem .8rem;border-radius:14px;line-height:1.45}
.bubble-body{white-space:pre-wrap;word-wrap:break-word}
.bubble-meta{font-size:.68rem;opacity:.7;margin-top:.2rem;text-align:right}
.bubble.them{align-self:flex-start;background:var(--panel-2);border-bottom-left-radius:4px}
.bubble.me{align-self:flex-end;background:var(--accent);color:var(--accent-ink);
  border-bottom-right-radius:4px}
.bubble.me .bubble-meta{color:var(--accent-ink)}
.composer{display:flex;gap:.5rem;align-items:flex-end;position:sticky;bottom:0;
  background:var(--bg);padding:.6rem 0;border-top:1px solid var(--line)}
.composer textarea{flex:1;min-height:2.7rem;margin:0;resize:none}
.composer .btn{flex:0 0 auto}

/* Messages button in the patient app's top bar */
.appbar .msgbtn{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);min-width:var(--tap);margin-left:.15rem;
  text-decoration:none;border-radius:var(--radius-s);color:var(--ink)}
.appbar .msgbtn .ic{font-size:1.3rem;line-height:1}
.appbar .msgbtn:hover{background:var(--panel-2)}
.appbar .msgbtn .msgdot{position:absolute;top:.35rem;right:.3rem;min-width:1.05rem;height:1.05rem;
  padding:0 .25rem;background:var(--bad);color:#fff;border-radius:999px;font-size:.68rem;
  font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;
  box-shadow:0 0 0 2px var(--panel)}

/* notification popup (staff pages + patient app) */
.notifypop{position:fixed;right:1rem;bottom:1rem;z-index:200;display:flex;align-items:center;gap:.7rem;
  max-width:22rem;padding:.7rem .85rem;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-lift);
  transform:translateY(140%);opacity:0;transition:transform .25s ease,opacity .25s ease}
.notifypop.show{transform:translateY(0);opacity:1}
.notifypop .notify-ic{font-size:1.5rem}
.notifypop .notify-body{flex:1;line-height:1.3;font-size:.9rem}
.notifypop .notify-sub{color:var(--ink-2);font-size:.82rem}
.notifypop .notify-x{border:0;background:none;color:var(--ink-3);font-size:1.3rem;cursor:pointer;
  line-height:1;padding:.1rem .3rem;min-height:auto}
.notifypop .notify-x:hover{color:var(--ink)}
@media (max-width:560px){ .notifypop{left:1rem;right:1rem;max-width:none;bottom:calc(var(--tap) + 1rem + var(--safe-b))} }

/* rendered in-app documentation (METHODS.md etc.) */
.md-doc{line-height:1.6;font-size:.95rem}
.md-doc h1{font-size:1.4rem;margin:0 0 .6rem}
.md-doc h2{font-size:1.15rem;margin:1.6rem 0 .5rem;padding-top:.9rem;border-top:1px solid var(--line)}
.md-doc h3{font-size:1rem;margin:1.1rem 0 .35rem}
.md-doc h4{font-size:.92rem;margin:.9rem 0 .3rem;color:var(--ink-2)}
.md-doc p{margin:.55rem 0}
.md-doc ul,.md-doc ol{margin:.5rem 0 .8rem;padding-left:1.4rem}
.md-doc li{margin:.25rem 0}
.md-doc code{font-family:var(--mono);font-size:.86em;background:var(--panel-2);
  padding:.1em .38em;border-radius:6px}
.md-doc pre.md-code{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-s);
  padding:.8rem 1rem;overflow-x:auto;font-size:.82rem;line-height:1.5}
.md-doc pre.md-code code{background:none;padding:0}
.md-doc blockquote{margin:.7rem 0;padding:.4rem 0 .4rem 1rem;border-left:3px solid var(--accent);
  color:var(--ink-2)}
.md-doc hr{border:0;border-top:1px solid var(--line);margin:1.4rem 0}
.md-doc a{color:var(--accent)}
.md-tablewrap{overflow-x:auto;margin:.7rem 0}
.md-table{border-collapse:collapse;width:100%;font-size:.88rem}
.md-table th,.md-table td{border:1px solid var(--line);padding:.4rem .6rem;text-align:left;
  vertical-align:top}
.md-table th{background:var(--panel-2);font-weight:640}

/* info badge on the analysis sub-nav → Methods & evidence */
.subtabs-grow{flex:1 1 auto}
.subtabs-info{flex:0 0 auto;padding:.45rem .8rem;border-radius:999px;text-decoration:none;
  font-size:.84rem;font-weight:600;color:var(--accent);background:var(--accent-soft);
  min-height:var(--tap);display:flex;align-items:center;gap:.3rem;white-space:nowrap}
.subtabs-info:hover{filter:brightness(.97)}
.subtabs-info.on{background:var(--accent);color:var(--accent-ink)}

/* ------------------------------------------------------------- help system */
.helpgrid{display:grid;gap:.8rem;grid-template-columns:1fr;margin-top:1rem}
@media (min-width:640px){ .helpgrid{grid-template-columns:1fr 1fr} }
.helpcard{display:flex;gap:.9rem;align-items:flex-start;text-decoration:none;color:inherit}
.helpcard:hover{border-color:var(--accent)}
.helpcard-ic{font-size:1.7rem;flex:0 0 auto;line-height:1}
.helplayout{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media (min-width:820px){ .helplayout{grid-template-columns:14rem 1fr;align-items:start} }
.helpnav{display:flex;flex-direction:column;gap:.15rem}
.helpnav a{padding:.5rem .7rem;border-radius:var(--radius-s);text-decoration:none;color:var(--ink-2);
  font-size:.9rem;font-weight:600}
.helpnav a:hover{background:var(--panel-2);color:var(--ink)}
.helpnav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}

/* accessible mouse-over / focus tooltips (pure CSS, CSP-safe) */
.hint{display:inline-flex;align-items:center;justify-content:center;cursor:help;position:relative;
  width:1.15rem;height:1.15rem;border-radius:50%;background:var(--panel-2);color:var(--ink-3);
  font-size:.72rem;font-weight:700;margin-left:.25rem;vertical-align:middle;
  font-style:normal;line-height:1}
.hint:hover,.hint:focus-visible{background:var(--accent);color:var(--accent-ink);outline:none}
.hint::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(4px);width:min(20rem,70vw);padding:.6rem .75rem;
  background:var(--ink);color:var(--bg);border-radius:8px;font-size:.8rem;font-weight:400;
  line-height:1.45;text-align:left;letter-spacing:0;box-shadow:var(--shadow-lift);z-index:120;
  opacity:0;pointer-events:none;transition:opacity .14s,transform .14s}
.hint:hover::after,.hint:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
.hint::before{content:"";position:absolute;bottom:calc(100% + 3px);left:50%;
  transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ink);
  opacity:0;transition:opacity .14s;z-index:120}
.hint:hover::before,.hint:focus-visible::before{opacity:1}
/* near the right edge, nudge the bubble left so it never clips off-screen */
.hint.hint-r::after{left:auto;right:0;transform:translateX(0) translateY(4px)}
.hint.hint-r:hover::after,.hint.hint-r:focus-visible::after{transform:translateX(0) translateY(0)}

/* language picker */
.langpick{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;
  overflow:hidden;vertical-align:middle}
.langpick a{padding:.25rem .55rem;font-size:.78rem;font-weight:700;text-decoration:none;
  color:var(--ink-3);line-height:1.4}
.langpick a.on{background:var(--accent);color:var(--accent-ink)}
.langpick a:not(.on):hover{background:var(--panel-2);color:var(--ink)}
.appbar .langpick{margin-right:.15rem}

/* live unread badge on the Messages nav tab */
.tabs-top .navbadge{display:inline-flex;align-items:center;justify-content:center;
  min-width:1.15rem;height:1.15rem;padding:0 .3rem;margin-left:.35rem;border-radius:999px;
  background:var(--bad);color:#fff;font-size:.68rem;font-weight:700;line-height:1;vertical-align:middle}
.tabs-top .navbadge[hidden]{display:none}

/* ============================================================ profile + onboarding (Phase 3) */

/* the round avatar, as a header button, a menu row, or a large panel head */
.avatar{display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border-radius:999px;overflow:hidden;flex:none;
  background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:.8rem}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.sm{width:2.2rem;height:2.2rem}
.avatar.big{width:4.5rem;height:4.5rem;font-size:1.5rem}
.avatar.ph{text-transform:uppercase}

.profilewrap{position:relative;margin-left:.35rem}
.avatarbtn{border:none;background:none;padding:0;cursor:pointer;border-radius:999px;
  line-height:0;outline-offset:2px}
.avatarbtn:focus-visible{outline:2px solid var(--accent)}

.menu{position:absolute;top:calc(100% + .5rem);right:0;z-index:120;min-width:14rem;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-s);
  box-shadow:var(--shadow-lift);padding:.35rem;display:none;flex-direction:column;gap:.1rem}
.menu.open{display:flex}
.menu-head{display:flex;align-items:center;gap:.6rem;padding:.55rem .6rem .65rem;
  border-bottom:1px solid var(--line);margin-bottom:.25rem}
.menu-head b{display:block;font-size:.9rem}
.menu-head .mut{display:block;overflow:hidden;text-overflow:ellipsis;max-width:10rem;white-space:nowrap}
.menu > button,.menu-logout button{display:block;width:100%;text-align:left;border:none;
  background:none;font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);
  padding:.6rem;border-radius:8px;cursor:pointer}
.menu > button:hover,.menu-logout button:hover{background:var(--panel-2)}
.menu > button[aria-selected="true"]{color:var(--accent);background:var(--accent-soft)}
.menu-logout{margin:.2rem 0 0;border-top:1px solid var(--line);padding-top:.25rem}
.menu-logout button.danger{color:var(--bad)}

/* the profile head card */
.profilehead{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.profilehead .ph-id{flex:1;min-width:8rem}
.profilehead .ph-id h2{margin:0;font-size:1.1rem}
.profilehead .ph-id .mut{display:block}
.btn.sm{padding:.4rem .7rem;font-size:.82rem}
.setlang{display:flex}

/* the first-login welcome behind the wizard */
.welcome{max-width:26rem;margin:14vh auto 0;padding:0 1.4rem;text-align:center}
.welcome .wbrand{font-weight:700;color:var(--accent);letter-spacing:.02em}
.welcome h1{font-size:1.7rem;margin:.6rem 0 .3rem}
.welcome .btn{margin-top:1.4rem}

/* the photo step */
.photostep{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem}
.photoprev{margin-bottom:.3rem}
.photoprev img{width:8rem;height:8rem;border-radius:999px;object-fit:cover;display:block}
.photostep label.btn{cursor:pointer}

/* the carer typeahead */
.typeahead{position:relative;margin-bottom:.7rem}
.ta-results{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:5;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-s);
  box-shadow:var(--shadow-lift);max-height:14rem;overflow:auto}
.ta-opt{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  width:100%;text-align:left;border:none;background:none;font:inherit;font-size:.9rem;
  padding:.55rem .7rem;cursor:pointer;color:var(--ink)}
.ta-opt:hover{background:var(--panel-2)}
.ta-none{padding:.55rem .7rem;color:var(--ink-3);font-size:.85rem}
.chosen{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.3rem}
.chosen-chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--accent-soft);
  color:var(--accent);border:1px solid transparent;border-radius:var(--radius-s);
  padding:.35rem .6rem;font-weight:620;font-size:.85rem}
.chosen-chip .x{border:none;background:none;color:inherit;cursor:pointer;font-size:.8rem;
  padding:0;line-height:1}

/* messages moved into the account menu (Phase 3) */
.avatarbtn{position:relative}
.msgdot.on-avatar{position:absolute;top:-4px;right:-4px;min-width:1.05rem;height:1.05rem;
  padding:0 .28rem;border-radius:999px;background:var(--bad);color:#fff;font-size:.66rem;
  font-weight:700;line-height:1.05rem;text-align:center;border:2px solid var(--panel)}
.menu-link{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  text-decoration:none;color:var(--ink);font-size:.9rem;font-weight:600;padding:.6rem;border-radius:8px}
.menu-link:hover{background:var(--panel-2)}
.menu-badge{min-width:1.15rem;height:1.15rem;padding:0 .3rem;border-radius:999px;
  background:var(--bad);color:#fff;font-size:.68rem;font-weight:700;line-height:1.15rem;text-align:center}
/* "What's new" row + its unread dot; a small accent dot on the avatar. */
/* Must out-specify `.menu > button{display:block}` above, or the row is not a
   flex container and the empty dot span (an inline element) collapses to zero. */
.menu > button.menu-whatsnew{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
/* inline-block so width/height still apply even if the row is ever not flex. */
.menu-badge.dot{display:inline-block;min-width:.55rem;width:.55rem;height:.55rem;padding:0;background:var(--accent)}
.updot.on-avatar{position:absolute;top:-3px;left:-3px;width:.62rem;height:.62rem;border-radius:999px;
  background:var(--accent);border:2px solid var(--panel)}

/* ---- What's new (changelog) page --------------------------------------- */
.cl-entry .card-h .badge{margin-left:.4rem}
.cl-sec{margin-top:.6rem}
.cl-sec:first-of-type{margin-top:.2rem}
.cl-h{font-size:.72rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.4rem;margin:.2rem 0 .35rem}
.cl-h::before{content:"";width:.5rem;height:.5rem;border-radius:999px;background:var(--ink-3)}
.cl-h.new{color:var(--accent)} .cl-h.new::before{background:var(--accent)}
.cl-h.fix{color:var(--ok)} .cl-h.fix::before{background:var(--ok)}
.cl-list{margin:0;padding-left:1.15rem;display:flex;flex-direction:column;gap:.3rem}
.cl-list li{font-size:.9rem;line-height:1.45}

/* default health-icon avatar (Phase 3) */
.avatar.icon{color:var(--accent)}
.avatar.icon svg{width:58%;height:58%}
.avatar.big.icon svg{width:52%;height:52%}

/* messaging unavailable (Phase 3) */
.composer.unavailable{opacity:.85}
.composer.unavailable textarea{background:var(--panel-2);color:var(--ink-3);cursor:not-allowed}
.unavail-notice{display:flex;align-items:center;gap:.5rem;background:var(--panel-2);
  border:1px solid var(--line);border-radius:var(--radius-s);padding:.6rem .8rem;
  color:var(--ink-2);font-size:.9rem;margin-bottom:.5rem}
.unavail-notice .ic{font-size:1.1rem}

/* account security (Phase 3.5) */
.reccodes{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.4rem}
.reccodes code{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;
  padding:.5rem .6rem;font-family:var(--mono);font-size:.95rem;text-align:center;letter-spacing:.03em}
.setupkey{margin:.3rem 0}
.setupkey code{display:block;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  padding:.7rem .8rem;font-family:var(--mono);font-size:1.15rem;letter-spacing:.12em;text-align:center;word-break:break-all}
@media(max-width:420px){.reccodes{grid-template-columns:1fr}}

/* staff avatar dropdown via <details> (Phase 3.5) */
.profilewrap.staffmenu{position:relative}
summary.avatarbtn{list-style:none;cursor:pointer;display:inline-flex}
summary.avatarbtn::-webkit-details-marker{display:none}
summary.avatarbtn::marker{content:''}
.profilewrap.staffmenu > .menu{display:none}
.profilewrap.staffmenu[open] > .menu{display:flex}
.profilewrap.staffmenu .menu a[role="menuitem"]{display:block;text-decoration:none;color:var(--ink);
  font-size:.9rem;font-weight:600;padding:.6rem;border-radius:8px}
.profilewrap.staffmenu .menu a[role="menuitem"]:hover{background:var(--panel-2)}

/* per-carer consent controls (Phase 3 finish) */
.carer{border:1px solid var(--line);border-radius:var(--radius-s);padding:.6rem .7rem;margin:.5rem 0}
.carer-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.carer-toggles{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.ctoggle{border:1px solid var(--line);background:var(--panel);color:var(--ink-2);font:inherit;
  font-size:.82rem;font-weight:600;padding:.35rem .7rem;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem}
.ctoggle::before{content:'';width:.6rem;height:.6rem;border-radius:999px;background:var(--ink-3)}
.ctoggle[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.ctoggle[aria-pressed="true"]::before{background:var(--ok)}
.ctoggle:disabled{opacity:.45;cursor:not-allowed}

/* institutions admin (Phase 4) */
.inlineform{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:.3rem 0}
.inlineform input[type="text"],.inlineform input:not([type]){flex:1;min-width:8rem}
.deptrow{display:flex;align-items:center;gap:.4rem;padding:.2rem 0;border-top:1px solid var(--line)}
.deptrow .inlineform{flex:1;margin:0}

/* ===========================================================================
   Modern staff shell — a sidebar on a wide window, a slide-in drawer on a
   narrow/touch one. Everything here is scoped to body.staff so the patient app
   (which shares .appbar/.tabs-top class names) is never touched. The switch is
   viewport + pointer, not a user-agent guess, so it adapts as a window resizes.
   =========================================================================== */

/* The staff appbar must NOT use backdrop-filter: a filtered element becomes the
   containing block for its position:fixed children, which would trap the
   slide-in drawer inside the top bar's box instead of the viewport.
   z-index:50 lifts the appbar (and the drawer nested inside its stacking
   context) ABOVE the .nav-backdrop (45). position:sticky makes the appbar its
   own stacking context, so the drawer can never out-rank the backdrop on its
   own — the backdrop must sit below the appbar, or it greys out the drawer too
   (which is exactly the "whole page goes grey" bug on Safari). */
body.staff .appbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--panel);z-index:50}

/* -- the account cluster: avatar with name over role -- */
body.staff summary.avatarbtn{align-items:center;gap:.5rem}
.who{display:none;flex-direction:column;line-height:1.15;text-align:left;min-width:0}
.who b{font-size:.82rem;font-weight:620;color:var(--ink);max-width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .whorole{font-size:.72rem;color:var(--ink-3)}
@media (min-width:560px){ body.staff .who{display:flex} }

/* flat line icons take colour from text and a fixed box */
body.staff svg.ic{width:19px;height:19px;flex:0 0 auto;display:inline-block;vertical-align:-4px}
body.staff .help-link{display:inline-flex;align-items:center;gap:.35rem}
body.staff .staffmenu .menu a[role="menuitem"],
body.staff .menu-logout button{display:flex;align-items:center;gap:.55rem}
body.staff .menu-link > span{display:inline-flex;align-items:center;gap:.55rem}
body.staff .menu svg.ic{width:17px;height:17px;color:var(--ink-3)}

/* the hamburger — only on the narrow layout */
.navtoggle{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:0;border-radius:9px;background:none;color:var(--ink-2);
  cursor:pointer;flex:0 0 auto;margin-right:.15rem}
.navtoggle:hover{background:var(--panel-2)}
.navtoggle svg.ic{width:22px;height:22px}

/* the top bar (replaces the old .bar) */
body.staff .appbar-top{
  max-width:54rem;margin:0 auto;padding:0 .8rem .55rem;
  display:flex;align-items:center;gap:.5rem;
}
body.staff .appbar .brand{font-weight:680;font-size:.98rem;letter-spacing:-.015em}

/* the section labels + links inside the nav */
.navsec{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);padding:.55rem .7rem .2rem}

/* ---- narrow / touch: drawer ---- */
body.staff .sidenav{
  position:fixed;top:0;left:0;bottom:0;width:274px;max-width:82vw;z-index:60;
  transform:translateX(-100%);transition:transform .22s ease;will-change:transform;
  background:var(--panel);border-right:1px solid var(--line);box-shadow:none;
  display:flex;flex-direction:column;align-items:stretch;gap:.05rem;overflow-y:auto;
  padding:calc(var(--safe-t) + .8rem) .6rem 1.4rem;margin:0;max-width:82vw;
}
body.nav-open .sidenav{transform:none;box-shadow:var(--shadow-lift)}
body.staff .sidenav a{
  flex:0 0 auto;display:flex;align-items:center;gap:.7rem;justify-content:flex-start;
  border:0;border-bottom:0;margin:0;border-radius:9px;padding:.62rem .7rem;
  font-size:.9rem;font-weight:560;color:var(--ink-2);white-space:nowrap;
}
body.staff .sidenav a:hover{background:var(--panel-2);color:var(--ink)}
body.staff .sidenav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:640}
body.staff .sidenav a .lbl{flex:1 1 auto}
.nav-backdrop{position:fixed;inset:0;background:rgba(10,14,20,.4);z-index:45;
  opacity:0;transition:opacity .2s;backdrop-filter:blur(1px)}
body.nav-open .nav-backdrop{opacity:1}
.nav-backdrop[hidden]{display:none}

/* ---- wide: fixed sidebar, content shifts over ---- */
@media (min-width:900px){
  body.staff{padding-left:252px}
  body.staff .appbar{
    position:fixed;inset:0 auto 0 0;width:252px;height:100vh;z-index:40;
    display:flex;flex-direction:column;align-items:stretch;padding:0;overflow:hidden;
    background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom:0;border-right:1px solid var(--line);
  }
  body.staff .appbar-top{
    flex-direction:column;align-items:stretch;gap:.55rem;max-width:none;margin:0;
    padding:calc(var(--safe-t) + .9rem) .7rem .7rem;border-bottom:1px solid var(--line);
  }
  body.staff .appbar-top .grow{display:none}
  body.staff .navtoggle{display:none}
  body.staff .help-link{align-self:flex-start}
  body.staff .who{display:flex}
  body.staff summary.avatarbtn{width:100%}
  body.staff .sidenav{
    position:static;transform:none;width:auto;max-width:none;box-shadow:none;border-right:0;
    flex:1 1 auto;padding:.5rem .5rem 1.2rem;
  }
  body.staff .nav-backdrop{display:none}
  /* the account dropdown opens over content, not clipped by the sidebar */
  body.staff .profilewrap.staffmenu[open] > .menu{position:fixed;left:.6rem;top:auto;bottom:auto;
    right:auto;min-width:13rem}
}

/* ===================== patient: "feeling unwell" entry + triage ============ */
.btn.unwell{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:.2rem 0 .7rem;
  background:var(--warn-soft);color:var(--warn);border:1px solid transparent;font-weight:600}
.btn.unwell:hover{border-color:var(--warn)}

body.triage-lock{overflow:hidden}
.triage-scrim{position:fixed;inset:0;z-index:200;background:rgba(10,14,20,.55);
  display:flex;align-items:flex-end;justify-content:center;backdrop-filter:blur(2px)}
@media (min-width:640px){ .triage-scrim{align-items:center} }
.triage-sheet{background:var(--panel);width:100%;max-width:33rem;max-height:92vh;overflow-y:auto;
  border-radius:18px 18px 0 0;padding:1rem 1.1rem calc(1.1rem + var(--safe-b));box-shadow:var(--shadow-lift)}
@media (min-width:640px){ .triage-sheet{border-radius:18px} }
.triage-head{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:.5rem}
.triage-head h2{font-size:1.12rem;flex:1 1 100%;order:2;margin-top:.2rem}
.triage-head .sub{flex:1 1 100%;order:3}
.triage-x{margin-left:auto;order:1;border:0;background:var(--panel-2);color:var(--ink-2);
  width:34px;height:34px;border-radius:50%;font-size:1rem;cursor:pointer}
.triage-list{display:flex;flex-direction:column;gap:.5rem;margin:.3rem 0 .2rem}
.triage-opt{display:flex;align-items:center;gap:.6rem;text-align:left;width:100%;
  padding:.8rem .85rem;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);
  color:inherit;font:inherit;font-size:.95rem;cursor:pointer;line-height:1.3}
.triage-opt:hover{border-color:var(--accent)}
.triage-opt .tick{width:20px;height:20px;flex:0 0 auto;border:2px solid var(--ink-3);border-radius:6px}
.triage-opt[aria-pressed="true"]{border-color:var(--bad);background:var(--bad-soft)}
.triage-opt[aria-pressed="true"] .tick{background:var(--bad);border-color:var(--bad);
  box-shadow:inset 0 0 0 3px var(--panel)}
.danger-opt[aria-pressed="true"]{color:var(--bad)}
.triage-foot{display:flex;flex-direction:column;gap:.5rem;margin-top:.9rem}
.triage-yn{display:flex;gap:.6rem;margin-top:.6rem}
.triage-yn .btn{flex:1}
.triage-banner{border-radius:12px;padding:.7rem .85rem;font-weight:700;margin:.2rem 0 .7rem;font-size:1.02rem}
.triage-banner.em{background:var(--bad);color:#fff}
.triage-banner.ur{background:var(--warn);color:#fff}
.triage-banner.ok{background:var(--ok-soft);color:var(--ok)}
.tri-title{font-size:1.12rem;margin:.1rem 0 .5rem}
.triage-steps{margin:.2rem 0 .6rem;padding-left:1.15rem;display:flex;flex-direction:column;gap:.35rem}
.triage-steps li{line-height:1.4}
.bigcall{font-size:1.06rem;font-weight:700;padding:.85rem}
.tri-shared{color:var(--ok);font-weight:600}
.tri-disclaimer{font-size:.76rem;color:var(--ink-3);margin-top:.5rem}

/* ===================== doctor list: emergency alert card ================== */
.alertcard{border:1px solid var(--bad);background:var(--bad-soft);margin-bottom:1rem}
.alertrow{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem 0;border-top:1px solid var(--line)}
.alertrow:first-of-type{border-top:0}
.alertrow.emergency b{color:var(--bad)}
.alertrow .sub{font-size:.85rem;color:var(--ink-2)}
.alertactions{display:flex;flex-direction:column;gap:.35rem;flex:0 0 auto}
.alertactions form{margin:0}

/* Patient-app flat line icons (tabs, quick-add, log list, unwell button).
   Sized by the existing .ic font-size rules via width/height:1em; this only
   nudges vertical alignment so they sit on the text baseline like the emoji did. */
.lic{vertical-align:-.15em}
.quick .lic{vertical-align:0}

/* Help sits on its own at the very bottom of the staff sidebar/drawer. */
body.staff .sidenav .nav-help{margin-top:auto;border-top:1px solid var(--line);
  border-radius:0;padding-top:.8rem;margin-bottom:.1rem}
body.staff .sidenav .nav-help:hover{background:transparent;color:var(--ink)}

/* Patient app: the top tab row and the bottom bar are the SAME destinations.
   On a phone that is a duplicate, so show only the thumb-friendly bottom bar
   (the top row is hidden); on a wider window the bottom bar is already hidden
   and the top row stays. Scoped to body.app so the staff nav is untouched. */
@media (max-width:759px){ body.app .tabs-top{display:none} }

/* History type-ahead under a text field (medication name, etc.). */
.acwrap{position:relative}
.ac{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow-lift);overflow:hidden;max-height:15rem;overflow-y:auto}
.ac[hidden]{display:none}
.acopt{display:flex;align-items:baseline;gap:.5rem;width:100%;text-align:left;
  border:0;background:none;cursor:pointer;font:inherit;color:inherit;
  padding:.6rem .75rem;border-bottom:1px solid var(--line)}
.acopt:last-child{border-bottom:0}
.acopt:hover{background:var(--panel-2)}
.acname{font-weight:560}
.acmeta{color:var(--ink-3);font-size:.82rem}

/* "Your usual morning" routine prompt at the top of the medication sheet. */
.usual{background:var(--accent-soft);border:1px solid transparent;border-radius:12px;
  padding:.7rem .8rem;margin:0 0 .9rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.usual-t{font-weight:640;color:var(--accent);flex:1 1 100%}
.usual-list{color:var(--ink-2);font-size:.9rem;flex:1 1 auto}
.usual .btn{flex:0 0 auto}

/* Patient Today sparklines — small inline SVGs that ARE `.chart` themselves
   (<svg class="chart">). Scoped to svg.chart so this fixed 72px height cannot
   leak onto the server-rendered charts, which wrap their SVG in a <div class="chart">
   and must size to their own aspect ratio (see the .chart rules far above). */
svg.chart{width:100%;height:72px;display:block;margin:.4rem 0 .3rem;overflow:visible}
.chart-now{font-weight:680;font-size:1.05rem}
.chart-foot{display:flex;justify-content:space-between;color:var(--ink-3);font-size:.78rem}
.up-good{color:var(--ok);font-weight:640}
.up-warn{color:var(--warn);font-weight:640}
.legend{display:flex;flex-wrap:wrap;gap:.9rem;margin:.35rem 0 .1rem;font-size:.85rem}
.legend .lg{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-2)}
.legend .lg i{width:11px;height:11px;border-radius:3px;display:inline-block;flex:0 0 auto}

/* "Add to home screen" onboarding step. */
.installstep{text-align:center;padding:.4rem 0 .2rem}
.install-ic{width:56px;height:56px;margin:0 auto .6rem;border-radius:16px;background:var(--accent-soft);
  color:var(--accent);display:flex;align-items:center;justify-content:center}
.install-ic svg.lic{width:30px;height:30px}
.installstep h3{margin:.2rem 0 .3rem}
.install-steps{text-align:left;margin:.8rem auto 0;max-width:22rem;padding-left:1.2rem;
  display:flex;flex-direction:column;gap:.45rem;line-height:1.4}

/* ---- report-a-bug overlay ---------------------------------------------- */
.nav-bug{cursor:pointer}
.bug-overlay{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center; padding:1rem;
  background:color-mix(in srgb, #0b0e13 55%, transparent);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.bug-card{
  width:min(34rem,100%); max-height:90vh; overflow:auto;
  background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 12px 40px rgba(16,24,40,.28); padding:1.2rem 1.25rem 1.35rem;
  position:relative;
}
.bug-x{
  position:absolute; top:.55rem; right:.7rem; width:2rem; height:2rem;
  border:none; background:none; color:var(--ink-3); font-size:1.4rem;
  line-height:1; cursor:pointer; border-radius:8px;
}
.bug-x:hover{background:var(--panel-2); color:var(--ink)}
.bug-title{font-size:1.15rem; margin:.1rem 0 .5rem}
.bug-lead{color:var(--ink-2); font-size:.86rem; line-height:1.5; margin:0 0 .9rem}
.bug-lbl{display:block; font-size:.76rem; font-weight:640; color:var(--ink-2); margin:.7rem 0 .3rem}
.bug-ta{
  width:100%; box-sizing:border-box; resize:vertical; font:inherit; font-size:.92rem;
  padding:.6rem .7rem; border:1px solid var(--line); border-radius:var(--radius-s);
  background:var(--panel); color:var(--ink);
}
.bug-ta:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}
.bug-file{font-size:.85rem; color:var(--ink-2)}
.bug-note{min-height:1.1rem; margin:.6rem 0 .2rem; font-size:.84rem; color:var(--ink-2)}
.bug-actions{display:flex; gap:.5rem; justify-content:flex-end; margin-top:.6rem}
.bug-pre{max-height:22rem;overflow:auto;background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--radius-s);padding:.7rem .8rem;font-size:.78rem;line-height:1.45;
  white-space:pre-wrap;word-break:break-word}

/* ---- in-app help (patient) --------------------------------------------- */
.help-topic h2{font-size:1.02rem;margin:.1rem 0 .5rem}
.help-p{color:var(--ink-2);font-size:.92rem;line-height:1.55;margin:.35rem 0}
.sheet-lead{color:var(--ink-2);font-size:.9rem;line-height:1.5;margin:0 0 .6rem}

/* ---- staff "Entries" diary view ---------------------------------------- */
.recday-h{position:sticky;top:0;background:var(--panel);z-index:1;
  font-size:.82rem;font-weight:680;color:var(--ink-2);letter-spacing:.02em;
  padding:.5rem 0 .35rem;margin-top:.6rem;border-bottom:1px solid var(--line)}
.recday-h:first-child{margin-top:0}
.recday{display:flex;flex-direction:column}
.rec{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem .2rem;
  border-bottom:1px solid var(--line)}
.rec:last-child{border-bottom:none}
.rec-ic{font-size:1.15rem;line-height:1.4;width:1.6rem;text-align:center;flex:none}
.rec-body{flex:1;min-width:0}
.rec-top{display:flex;align-items:center;gap:.45rem}
.rec-kind{font-size:.72rem;font-weight:680;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.rec-time{font-size:.78rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rec-main{font-size:.96rem;color:var(--ink);margin-top:.1rem;word-break:break-word}
.rec-sub{font-size:.85rem;color:var(--ink-2);margin-top:.1rem;word-break:break-word}
.rec-del{opacity:.55}

/* ---- locale-formatted date field (native calendar, our display) --------- */
.datefield{position:relative;display:block}
/* Hide the browser's own (locale-bound) text, keep the calendar indicator. */
.datefield > input[type=date]{color:transparent}
.datefield > input[type=date]::-webkit-datetime-edit{color:transparent}
.datefield > input[type=date]:focus{color:transparent}
.datefield > input[type=date]::-moz-datetime-edit{color:transparent}
.datefield-disp{position:absolute;left:.78rem;top:0;bottom:0;right:2.4rem;
  display:flex;align-items:center;pointer-events:none;
  color:var(--ink);font-size:16px;white-space:nowrap;overflow:hidden}
.datefield-disp.empty{color:var(--ink-3)}

/* ---- staff groups (manual picker + smart rule builder) ------------------ */
.sg-picklist{max-height:22rem;overflow:auto;border:1px solid var(--line);border-radius:var(--radius-s);padding:.3rem}
.sg-pick{display:flex;gap:.55rem;align-items:center;padding:.4rem .5rem;border-radius:8px;cursor:pointer;font-weight:400}
.sg-pick:hover{background:var(--panel-2)}
.sg-pick input{width:auto;min-height:auto}
.sg-filter{max-width:22rem}
.sg-rule{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:.45rem 0;border-bottom:1px solid var(--line)}
.sg-rule:last-child{border-bottom:none}
.sg-rule .sg-field{flex:2;min-width:11rem}
.sg-rule .sg-op{flex:1;min-width:8rem;display:flex}.sg-rule .sg-op select{width:100%}
.sg-rule .sg-val{flex:1;min-width:8rem;display:flex}.sg-rule .sg-val input,.sg-rule .sg-val select{width:100%}
.sg-del{flex:none;font-size:1.2rem;line-height:1}
label.inline{display:inline-flex;gap:.4rem;align-items:center;font-weight:400;margin-right:1rem}
label.inline input{width:auto;min-height:auto}