*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Dashboard-only tokens (everything else comes from /assets/tokens.css).
   --grad-side derives from --t/--b so brand colour stays single-source. */
:root{
  /* --accent* moved to tokens.css (28/09) — shared with admin + the spinner in components.css */
  --grad-side:linear-gradient(168deg,var(--t) 0%,var(--b) 118%);
  --canvas:#F4F6F8;--sw:248px;
  --shadow-card:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  /* ── Proposal re-skin tokens (dashboard.html) ── */
  --sh:0 1px 2px rgba(15,23,42,.05), 0 4px 14px rgba(15,23,42,.06), 0 0 0 1px rgba(15,23,42,.03);
  /* --ok/--warn/--high/--b-* removed 26/09 — every var() call site now points
     straight at tokens.css's --green/--amber/--red/--blue (+ -bg/-tx), so a
     token edit there cascades here instead of silently drifting two ways.
     --surf removed too — it duplicated tokens.css's own --surf with a
     different value; the 2 call sites now inherit the real one. */
}
html,body{height:100%;font-family:'Inter',system-ui,sans-serif;background:var(--canvas);color:var(--ink);font-size:var(--text-sm);-webkit-font-smoothing:antialiased}
button{cursor:pointer;font-family:inherit}input,select,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--t);outline-offset:2px}

/* ── Login ──────────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--fog)}
.login-card{width:380px;background:var(--wh);border-radius:var(--r);box-shadow:0 8px 40px rgba(0,0,0,.10);overflow:hidden}
.login-top{padding:32px 32px 24px;text-align:center;border-bottom:1px solid var(--bord)}
.login-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:10px}
.login-brand h1{font-size:var(--text-xl);font-weight:800;letter-spacing:-.5px;color:var(--ink)}
.login-top p{font-size:var(--text-sm);color:var(--sub)}
.login-body{padding:28px 32px 32px}
.login-body label{display:block;font-size:var(--text-sm);font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.login-body .field{margin-bottom:16px}
.login-body input{width:100%;height:46px;border:2px solid var(--bord);border-radius:var(--rs);padding:0 14px;font-size:var(--text-base);outline:none;transition:border-color .2s;background:var(--wh)}
.login-body input:focus{border-color:var(--t);box-shadow:0 0 0 3px rgba(15,184,184,.12)}
.login-btn{width:100%;height:50px;border-radius:var(--rs);background:var(--grad);color:#fff;font-size:var(--text-base);font-weight:700;border:none;cursor:pointer;margin-top:4px;transition:opacity .2s}
.login-btn:disabled{opacity:.6;cursor:not-allowed}
.login-err{background:var(--red-soft);border:1px solid var(--red-bd);color:var(--red-dk);border-radius:var(--rxs);padding:10px 12px;font-size:var(--text-sm);margin-bottom:16px;display:none}

/* ── Shell ──────────────────────────────────────────────── */
.shell{display:flex;height:var(--app-h,100vh);overflow:hidden}

/* ── Sidebar ────────────────────────────────────────────── */
/* Light rail (30/09, was dark navy --sidebar → softened from near-black #0F1F2E
   before that): white background, the brand gradient lives only in the logo
   mark (canonical usage, @design.md Logo) — a coloured header band was tried
   and rejected ("looked off"). Admin keeps its own dark --sidebar unchanged
   (admin-components.css, separate file, out of scope — @decisions.md 28/09). */
.sidebar{width:var(--sw);background:var(--wh);color:var(--ink);border-right:1px solid var(--bord);display:flex;flex-direction:column;flex-shrink:0}
.sb-brand{padding:22px 20px 16px}
.sb-logo{display:flex;align-items:center;gap:10px}
.sb-logo-text{font-size:var(--text-lg);font-weight:800;letter-spacing:-.4px;color:var(--ink)}
.sb-sub{font-size:var(--text-xs);color:var(--mute);margin-top:3px}
.sb-nav{flex:1;padding:6px 12px;overflow-y:auto}
.sb-section{font-size:var(--text-xs);font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.8px;padding:10px 8px 4px}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;margin-bottom:3px;font-size:var(--text-sm);font-weight:500;color:var(--sub);cursor:pointer;position:relative;transition:all .15s;border:none;background:none;width:100%;text-align:left;border-radius:var(--rm)}
.nav-item:hover{background:var(--td-bg);color:var(--td)}
.nav-item.active{background:linear-gradient(180deg,var(--td) 0%,var(--b) 100%) left/3px 100% no-repeat,var(--td-bg);color:var(--td);font-weight:700;box-shadow:none}
.nav-item.active svg{color:var(--td)}
.nav-item:focus-visible{outline:2px solid var(--td);outline-offset:-2px}
/* Neutral count chip (not red) — red is reserved for the crisis band only. */
.nav-badge{margin-left:auto;min-width:20px;height:20px;background:var(--td-bg);color:var(--td);border-radius:var(--rpill);padding:0 6px;font-size:var(--text-xs);font-weight:700;display:flex;align-items:center;justify-content:center}
.sb-footer{padding:12px;border-top:1px solid var(--bord)}
.sb-user{display:flex;align-items:center;gap:10px}
/* Station = information chip under the logo (not a menu row); language + log out share one footer utility row.
   Owner-approved proposal 30/09 (styleguide Proposal tab) — the two used to look exactly like the first two menu items. */
.sb-station{display:flex;flex-direction:column;gap:2px;margin:0 12px 8px;padding:8px 12px;background:var(--fog);border-radius:var(--rs)}
.sb-station-k{font-size:var(--text-xs);font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.5px}
.sb-station .hd-ward{font-size:var(--text-sm);font-weight:700;color:var(--ink);line-height:1.35}
.sb-util{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sb-util .nav-item{flex:1;width:auto;margin-bottom:0}
.sb-user-btn{display:flex;align-items:center;gap:10px;width:100%;border:none;background:none;cursor:pointer;color:var(--ink);padding:8px;border-radius:var(--rm);transition:background .15s;margin-bottom:2px;text-align:left;font-family:inherit}
.sb-user-btn:hover{background:var(--fog)}
.sb-user-chev{color:var(--mute)} /* the expand-chevron .ico — muted, not a nav-item so no shared muted class fits */
.sb-avatar{width:36px;height:36px;border-radius:var(--rpill);background:var(--td-bg);color:var(--td);display:flex;align-items:center;justify-content:center;font-size:var(--text-base);font-weight:700;flex-shrink:0}
.sb-name{font-size:var(--text-sm);font-weight:600;line-height:1.3;color:var(--ink);text-overflow:ellipsis}
.sb-role-tag{display:inline-block;font-size:var(--text-xs);font-weight:700;padding:2px 7px;border-radius:var(--rpill);background:var(--fog);color:var(--sub);margin-top:2px}
.logout-a{display:block;font-size:var(--text-sm);color:var(--mute);margin-top:8px;text-decoration:none;transition:color .15s}
.logout-a:hover{color:var(--ink)}

/* ── Main ───────────────────────────────────────────────── */
.main{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.page-head{background:transparent;padding:26px 32px 8px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.page-head h1{font-size:var(--text-xl);font-weight:800;letter-spacing:-.6px;line-height:1.15}
.page-head p{font-size:var(--text-sm);color:var(--sub);margin-top:4px}
.page-body{padding:14px 32px 30px;flex:1}
.page{display:none}.page.active{display:block}

/* ── Stat / KPI cards (proposal .kpi) ───────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:20px}
/* Doctor overview has 5 KPI cards — one row instead of 4 + orphan (≤1200px falls back to 2-col below) */
@media(min-width:1201px){.stats:has(> :nth-child(5)){grid-template-columns:repeat(5,1fr)}}
.stat{display:block;width:100%;text-align:left;background:var(--wh);border-radius:var(--rm);padding:14px 15px 15px;border:none;box-shadow:var(--sh);cursor:pointer;transition:transform .12s,box-shadow .15s;font-family:inherit;position:relative;overflow:hidden}
.stat:hover{transform:translateY(-1px);box-shadow:0 3px 6px rgba(15,23,42,.07),0 10px 22px rgba(15,23,42,.09),0 0 0 1px rgba(15,23,42,.03)}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:.9}
.stat.a-high::before{background:var(--red)}.stat.a-warn::before{background:var(--amber)}
.stat.a-teal::before{background:var(--t)}.stat.a-ok::before{background:var(--green)}
.stat.a-neutral::before{background:var(--mute)}
.stat-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.stat-ic{width:30px;height:30px;border-radius:var(--rxs);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--accent-lt);color:var(--accent)}
.stat-ic svg{width:16px;height:16px}
.stat-ic.high{background:var(--red-bg);color:var(--red-tx)}.stat-ic.warn{background:var(--amber-bg);color:var(--amber-tx)}
.stat-ic.teal{background:var(--tl);color:var(--td)}.stat-ic.ok{background:var(--green-bg);color:var(--green-tx)}
.stat-ic.neutral{background:var(--fog);color:var(--sub)}
.stat-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.stat-label{font-size:var(--text-sm);font-weight:600;color:var(--sub);letter-spacing:0;line-height:1.3}
.stat-val{font-size:var(--text-2xl);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-1px;line-height:.9;color:var(--ink)}
.stat-delta{font-size:var(--text-xs);color:var(--mute);margin-top:6px}

/* ── Triage / crisis band "Cần xử lý ngay" (proposal .critband) ── */
.triage-card,.critband{border:1px solid var(--red-bd);border-radius:var(--r);background:linear-gradient(100deg,var(--red-bg),var(--amber-bg));box-shadow:0 4px 16px rgba(220,38,38,.10);overflow:hidden;margin-bottom:16px}
.triage-head,.critband .ch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;border-bottom:1px solid rgba(246,192,184,.6)}
.triage-title,.critband .ct{display:flex;align-items:center;gap:10px;font-weight:800;font-size:var(--text-sm);color:var(--red-dk)}
.triage-ic,.critband .cic{width:28px;height:28px;border-radius:var(--rxs);background:rgba(239,68,68,.14);color:var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.triage-ic svg,.critband .cic svg{width:16px;height:16px}
.triage-sub,.critband .ccount{font-size:var(--text-sm);color:var(--red-tx);font-weight:600;text-align:right}
.triage-row,.critrow{display:flex;align-items:center;gap:12px;padding:10px 16px}
.triage-row+.triage-row,.critrow+.critrow{border-top:1px solid rgba(246,192,184,.4)}
.triage-bar,.critrow .cbar{width:4px;height:34px;border-radius:2px;flex-shrink:0;background:var(--red)}
.critrow .cav{width:32px;height:32px;border-radius:50%;background:var(--red-bg);color:var(--red-tx);display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:700;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--red-bd)}
.triage-name,.critrow .cn{font-weight:700;font-size:var(--text-sm);color:var(--ink)}
.triage-meta,.critrow .cmeta{display:flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--sub);margin-top:1px}
.triage-type{font-weight:600;color:var(--red-tx)}
.critrow .cbp{font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:var(--text-md);font-weight:600;color:var(--red-tx);margin-left:auto}
.critrow .cact{display:flex;gap:7px;flex-shrink:0}
.triage-more{width:100%;text-align:center;padding:9px;font-size:var(--text-sm);font-weight:600;color:var(--red-tx);background:none;border:none;border-top:1px solid rgba(246,192,184,.4);cursor:pointer;font-family:inherit}
.triage-more:hover{background:rgba(255,255,255,.5)}
@media(max-width:600px){.triage-sub,.critband .ccount{display:none}}

/* ── Overview 2-col grid (work list · side panels) ──────── */
.ov-grid{display:grid;gap:16px;align-items:start;margin-bottom:18px;grid-template-columns:1fr}
.ov-grid>div{margin-bottom:0!important}
.ov-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.ov-col .tcard{margin-bottom:0}
@media(min-width:900px){.ov-grid.cols2{grid-template-columns:1.5fr 1fr}}

/* ── "Hôm nay" work rows (proposal .wrow) ───────────────── */
.today-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--line2)}
.today-row:first-child{border-top:none}
.today-row.thigh{box-shadow:inset 3px 0 0 var(--red)}
.today-av{width:34px;height:34px;border-radius:50%;background:var(--surf2);display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:700;color:var(--sub);flex-shrink:0;box-shadow:inset 0 0 0 1px var(--bord)}
.today-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.today-name{font-size:var(--text-sm);font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.today-hdid{font-size:var(--text-xs);color:var(--mute);margin-top:1px}
.today-bp{text-align:right;flex-shrink:0}
.today-bpval{font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-weight:600;font-size:var(--text-base)}
.today-src{font-size:var(--text-xs);color:var(--mute);margin-top:1px}
/* ── Risk distribution card (donut markup: riskDonutHtml) ── */
.risk{padding:14px 18px}
/* ── Weekly activity card (trend markup: weekTrendHtml) ───── */
.week{padding:15px 18px}
.week .wtop{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.week .wtot{font-size:var(--text-lg);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.week .wtot span{font-size:var(--text-sm);color:var(--sub);font-weight:400;font-family:'Inter'}
.week .wchip{font-size:var(--text-xs);font-weight:700;color:var(--sub);background:var(--surf2);border-radius:var(--rpill);padding:2px 8px}

/* ── Table card ─────────────────────────────────────────── */
.tcard{background:var(--wh);border-radius:var(--r);border:1px solid var(--bord);box-shadow:var(--shadow-card);overflow:hidden;margin-bottom:18px}
.tcard-head{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--bord)}
.tcard-title{font-size:var(--text-base);font-weight:600}
.tcard-count{font-size:var(--text-sm);color:var(--sub)}
.toolbar{display:flex;gap:10px;padding:11px 16px;background:var(--surf2);border-bottom:1px solid var(--bord);flex-wrap:wrap}
.search{height:34px;padding:0 10px 0 32px;border:1px solid var(--bord);border-radius:var(--rxs);font-size:var(--text-sm);outline:none;background:var(--wh);min-width:180px;transition:border-color .15s}
.search:focus{border-color:var(--t);box-shadow:0 0 0 3px rgba(15,184,184,.12)}
.fsel{height:34px;padding:0 8px;border:1px solid var(--bord);border-radius:var(--rxs);font-size:var(--text-sm);background:var(--wh);outline:none}
table{width:100%;border-collapse:collapse}
thead{background:var(--surf2)}
th{position:sticky;top:0;z-index:1;padding:11px 16px;font-size:var(--text-xs);font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.03em;text-align:left;background:var(--surf2);border-bottom:1px solid var(--bord);white-space:nowrap}
td{padding:11px 16px;font-size:var(--text-sm);color:var(--body);border-bottom:1px solid var(--line2);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surf2)}
/* No row background tint. High-risk rows keep only a thin red left-edge line. */
tbody tr.thigh td:first-child{box-shadow:inset 3px 0 0 var(--red)}
/* .bpnum = BP measurements: Inter with tabular figures (font-variant-numeric). Everything else = Inter too. */
.mono{font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:var(--text-sm)}
.bpnum{font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums}
.bold{font-weight:700}
/* Sparkline (mini 7-reading trend) */
.spark{width:90px;height:28px;flex-shrink:0;vertical-align:middle}
/* BP value colour helpers in tables */
.bpv-high{color:var(--red-tx)}.bpv-warn{color:var(--amber-tx)}.bpv-ok{color:var(--green-tx)}

/* ── Badges / pills (proposal .pill — dot + tint) ───────── */
/* .badge + .b-red/.b-amb/.b-grn/.b-blu/.b-gray/.b-teal → components.css (no status dot; opt in with .badge-dot). Dashboard-only: */
.b-vhigh{background:var(--red-soft);color:var(--red-dk)}
.badge .rdot{width:6px;height:6px;border-radius:50%;display:inline-block}

/* ── Patient list cell ──────────────────────────────────── */
.pcell{display:flex;align-items:center;gap:10px;min-width:0}
.pcell-av{width:32px;height:32px;border-radius:50%;background:var(--surf2);color:var(--sub);font-weight:700;font-size:var(--text-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--bord)}
.pcell-name{font-size:var(--text-sm);font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcell-sub{font-size:var(--text-xs);color:var(--mute);margin-top:1px;font-variant-numeric:tabular-nums}

/* ── Patient record (full-page) ─────────────────────────── */
.rec-back{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);font-weight:500;color:var(--sub);background:none;border:none;cursor:pointer;font-family:inherit;transition:color .15s;margin-bottom:14px}
.rec-back:hover{color:var(--ink)}
.rcard{background:var(--wh);border-radius:var(--r);border:1px solid var(--bord);box-shadow:var(--shadow-card);padding:18px}
.rcard.nopad{padding:0}
.rec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.rec-id{display:flex;align-items:flex-start;gap:15px;min-width:0;flex:1}
.rec-av{width:56px;height:56px;border-radius:50%;background:var(--bord);color:var(--sub);font-weight:800;font-size:var(--text-xl);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rec-name{font-size:var(--text-xl);font-weight:800;letter-spacing:-.4px;line-height:1.1;white-space:nowrap}
.rec-meta{display:flex;align-items:center;gap:10px;margin-top:7px;font-size:var(--text-sm);color:var(--sub);flex-wrap:wrap}
.rec-meta .mdot{width:4px;height:4px;border-radius:50%;background:var(--mute);flex-shrink:0}
.rec-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0}
.nr-flag{display:inline-flex;align-items:center;gap:5px;font-size:var(--text-sm);font-weight:700;color:var(--red-tx);background:var(--red-soft);border-radius:var(--rpill);padding:3px 10px}
.rec-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:18px}
@media(min-width:1000px){.rec-grid{grid-template-columns:2fr 1fr}}
.rec-col{display:flex;flex-direction:column;gap:18px;min-width:0}
/* Mobile: show target/meds/stage (right col in source order) BEFORE the
   chart+history (left col) — clinicians need that context before reading a
   trend, and the chart+history is the long-scroll part (audit MB4). Desktop
   keeps source order since the 2-col grid already puts them side by side. */
@media(max-width:999px){.rec-grid>.rec-col:first-child{order:2}.rec-grid>.rec-col:last-child{order:1}}
.rsec{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.rsec-t{display:flex;align-items:center;gap:8px;font-size:var(--text-base);font-weight:700;color:var(--ink)}
.rsec-t svg{color:var(--sub);flex-shrink:0}
.rleg-i{display:inline-flex;align-items:center;gap:6px}

/* ── Buttons ────────────────────────────────────────────── */
/* .btn-sm + neutral .btn-teal/.btn-grn/.btn-gray + .btn-red → components.css. Dashboard-only variants: */
/* Solid variants: red ONLY in the crisis band; primary rows = neutral slate. */
.btn-solid-teal{background:var(--accent);color:#fff}.btn-solid-teal:hover{background:var(--body)}
.btn-ghost{background:#fff;color:var(--body);box-shadow:inset 0 0 0 1px var(--bord)}.btn-ghost:hover{background:var(--surf2)}
/* .btn-row + .btn-primary/.btn-accent (brand gradient) → components.css. */

/* ── Spinner / loading ──────────────────────────────────── */
/* .spinner + .loading-msg + .empty → components.css */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ── Modal ──────────────────────────────────────────────── */
/* .modal-wrap/.modal/.modal-h/.modal-title/.modal-x/.modal-body/.modal-acts → components.css. Dashboard-only rows: */
.modal-row{display:flex;justify-content:space-between;padding:8px 0;font-size:var(--text-sm);border-bottom:1px solid var(--fog)}
.modal-row:last-child{border-bottom:none}
.modal-row-l{color:var(--sub)}.modal-row-v{font-weight:600;text-align:right}

/* .toast → components.css */

/* ── Empty state ────────────────────────────────────────── */
.empty-icon{font-size:var(--text-2xl);margin-bottom:10px}

/* ── Password eye ───────────────────────────────────────── */
.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap input{flex:1;padding-right:42px !important}
.pw-eye{position:absolute;right:12px;background:none;border:none;cursor:pointer;color:var(--mute);padding:4px;display:flex;align-items:center;transition:color .15s}
.pw-eye:hover{color:var(--sub)}

/* ── Intake form ────────────────────────────────────────── */
.intake-card{background:var(--wh);border-radius:var(--r);border:1px solid var(--bord);overflow:hidden;max-width:720px}
.intake-section{padding:20px 24px;border-bottom:1px solid var(--bord)}
.intake-section:last-child{border-bottom:none}
.intake-section-title{font-size:var(--text-sm);font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px}
.search-wrap{position:relative}
.search-results{position:absolute;top:100%;left:0;right:0;background:var(--wh);border:1px solid var(--bord);border-radius:var(--rs);box-shadow:0 8px 24px rgba(0,0,0,.10);z-index:100;max-height:240px;overflow-y:auto;margin-top:4px;display:none}
.search-results.open{display:block}
.search-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--fog);transition:background .15s}
.search-item:last-child{border-bottom:none}
.search-item:hover{background:var(--fog)}
.search-item-name{font-size:var(--text-sm);font-weight:600}
.search-item-sub{font-size:var(--text-xs);color:var(--sub);margin-top:2px}
.patient-card{background:var(--accent-lt);border:1.5px solid var(--accent-md);border-radius:var(--rs);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.patient-card-info{font-size:var(--text-sm)}
.patient-card-name{font-weight:700;font-size:var(--text-sm);margin-bottom:2px}
.patient-card-sub{color:var(--sub);font-size:var(--text-sm)}
.patient-card-clear{background:none;border:none;color:var(--mute);font-size:var(--text-md);cursor:pointer;padding:4px;transition:color .15s}
.patient-card-clear:hover{color:var(--red)}
.bp-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.field-group{display:flex;flex-direction:column;gap:6px}
.field-label{font-size:var(--text-sm);font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.4px}
.field-input{height:50px;border:2px solid var(--bord);border-radius:var(--rs);padding:0 14px;font-size:var(--text-md);font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-weight:700;outline:none;transition:border-color .2s;text-align:center}
.field-input:focus{border-color:var(--t);box-shadow:0 0 0 3px rgba(15,184,184,.12)}
.field-input.error{border-color:var(--red)}
.field-hint{font-size:var(--text-xs);color:var(--mute);text-align:center}
.extra-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.extra-input{height:42px;border:1.5px solid var(--bord);border-radius:var(--rs);padding:0 12px;font-size:var(--text-sm);outline:none;transition:border-color .2s;width:100%}
.extra-input:focus{border-color:var(--t);box-shadow:0 0 0 3px rgba(15,184,184,.12)}
.intake-note{width:100%;border:1.5px solid var(--bord);border-radius:var(--rs);padding:10px 12px;font-size:var(--text-sm);resize:vertical;outline:none;transition:border-color .2s;min-height:72px;margin-top:14px}
.intake-note:focus{border-color:var(--t);box-shadow:0 0 0 3px rgba(15,184,184,.12)}
.intake-result{padding:12px 16px;border-radius:var(--rs);margin-bottom:0;font-size:var(--text-sm);font-weight:600;display:none}
.intake-result.ok{background:var(--green-bg);color:var(--green-tx)}
.intake-result.err{background:var(--red-bg);color:var(--red-dk)}

/* ── Mobile priority-queue banner (điều dưỡng/bác sĩ solo, ≤768px) ──
   Hidden on desktop by default; JS (renderMobileQueueBanner) toggles display.
   @media(min-width:769px) below is a hard safety net regardless of JS state. */
.mobile-queue-banner{background:var(--wh);border-radius:var(--r);box-shadow:var(--sh);padding:14px;margin-bottom:16px}
.mq-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mq-count{font-size:var(--text-xs);color:var(--sub)}
.mq-body{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.mq-av{width:40px;height:40px;border-radius:50%;background:var(--surf2);display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:700;color:var(--sub);box-shadow:inset 0 0 0 1px var(--bord);flex-shrink:0}
.mq-name{font-size:var(--text-base);font-weight:800}
.mq-meta{font-size:var(--text-sm);color:var(--sub);margin-top:1px}
.mq-actions{display:flex;gap:10px}
.mq-crisis{background:var(--red-bg);border:1.5px solid var(--red-bd)}
.mq-av-red{background:var(--red-soft);color:var(--red)}
@media(min-width:769px){.mobile-queue-banner{display:none!important}}

/* ── Tiếp nhận — two-column found-card + exam-form (proposal) ── */
.intakegrid{display:grid;grid-template-columns:1fr 1.1fr;gap:16px;align-items:start}
@media(max-width:900px){.intakegrid{grid-template-columns:1fr}}
.foundcard{background:var(--wh);border-radius:var(--r);box-shadow:var(--sh);padding:16px}
.foundcard .fh{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line2);margin-bottom:12px}
.foundcard .fav{width:46px;height:46px;border-radius:50%;background:var(--surf2);display:flex;align-items:center;justify-content:center;font-size:var(--text-base);font-weight:700;color:var(--sub);box-shadow:inset 0 0 0 1px var(--bord);flex-shrink:0}
.foundcard .fn{font-size:var(--text-base);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foundcard .fmeta{font-size:var(--text-sm);color:var(--sub);margin-top:2px}
.finfo{display:flex;justify-content:space-between;gap:12px;font-size:var(--text-sm);padding:7px 0}
.finfo+.finfo{border-top:1px solid var(--line2)}
.finfo .k{color:var(--sub)}.finfo .v{font-weight:600;color:var(--ink);text-align:right}
.examform{background:var(--wh);border-radius:var(--r);box-shadow:var(--sh);padding:16px}
.examform h3{font-size:var(--text-sm);font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.examform h3 svg{width:16px;height:16px;color:var(--sub)}
.frow{display:flex;gap:11px;margin-bottom:11px}.frow .fld{flex:1}
.fld label{display:block;font-size:var(--text-xs);font-weight:600;color:var(--sub);margin-bottom:5px}
.inp.mono{font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;text-align:center;font-size:var(--text-md)}

/* ── Hamburger ──────────────────────────────────────────── */
.hamburger{display:none;width:38px;height:38px;border-radius:var(--rxs);background:var(--fog);border:none;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:var(--sub);transition:background .15s}
.hamburger:hover{background:var(--bord)}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:149}
.sb-overlay.open{display:block}

/* ── User chip ──────────────────────────────────────────── */
.user-chip{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;background:var(--fog);border-radius:var(--rpill);flex-shrink:0}
.user-chip-av{width:28px;height:28px;border-radius:var(--rpill);background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:700;flex-shrink:0}
.user-chip-name{font-size:var(--text-sm);font-weight:600;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.user-chip-role{font-size:var(--text-xs);color:var(--sub);line-height:1.3}

/* ── Bottom nav (mobile only) ───────────────────────────── */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:56px;background:var(--wh);border-top:1px solid var(--bord);z-index:100;align-items:stretch;padding:0 2px;gap:0;box-sizing:content-box;padding-bottom:env(safe-area-inset-bottom,0px)}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:var(--text-xs);font-weight:600;color:var(--sub);border:none;background:none;cursor:pointer;padding:4px 2px;border-top:2px solid transparent;transition:all .15s;position:relative;min-width:0}
.bn-item.active{color:var(--t);border-top-color:var(--t)}
.bn-item svg{flex-shrink:0}
.bn-badge{min-width:14px;height:14px;background:var(--mute);color:#fff;border-radius:var(--rpill);padding:0 3px;font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;position:absolute;top:3px;right:calc(50% - 20px)}

/* ── Table scroll wrapper ────────────────────────────────── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:560px}

/* ── Screening form ─────────────────────────────────────── */
.screen-tabs{display:flex;gap:0;border-bottom:2px solid var(--bord);margin-bottom:20px}
.screen-tab{padding:9px 18px;font-size:var(--text-sm);font-weight:600;color:var(--sub);background:none;border:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s}
.screen-tab.active{color:var(--t);border-bottom-color:var(--t)}
.reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.reg-label{font-size:var(--text-sm);font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:5px}
.reg-gender{display:flex;gap:10px}
.reg-gender label{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;height:44px;border:1.5px solid var(--bord);border-radius:var(--rs);font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:all .15s}
.reg-gender input[type=radio]{display:none}
.reg-gender input[type=radio]:checked + label{background:rgba(15,184,184,.08);border-color:var(--t);color:var(--td)}
.dob-row-s{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px}
.screen-result{border-radius:var(--rs);padding:14px 16px;margin-bottom:14px;display:none;font-size:var(--text-sm)}
.screen-result.ok{background:var(--green-soft);border:1.5px solid var(--green-bd);color:var(--green-dk)}
.screen-result.err{background:var(--red-soft);border:1.5px solid var(--red-bd);color:var(--red-dk)}
.screen-found-card{background:var(--accent-lt);border:1.5px solid var(--accent-md);border-radius:var(--rs);padding:14px 16px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}

/* ── Screening Wizard ───────────────────────────────────────── */
.sc-prog-dots{display:flex;justify-content:space-between;margin-bottom:8px}
.sc-dot{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:var(--text-xs);font-weight:700;color:var(--mute);flex:1}
.sc-dot-n{width:26px;height:26px;border-radius:var(--rpill);background:var(--fog);border:2px solid var(--bord);display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:700;transition:all .2s}
.sc-dot-lbl{font-size:var(--text-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60px;text-align:center}
.sc-dot.active .sc-dot-n{background:var(--t);border-color:var(--t);color:#fff}
.sc-dot.active{color:var(--td)}
.sc-dot.done .sc-dot-n{background:var(--green);border-color:var(--green);color:#fff}
.sc-dot.done{color:var(--green)}
/* ── BP stacked input (matches React .bp3r layout) ──────────── */
.sc-bp-row{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.sc-bp-label{font-size:var(--text-sm);font-weight:700;color:var(--sub);width:100px;flex-shrink:0;line-height:1.5}
.sc-bp-field{flex:1;background:var(--fog);border-radius:var(--rs);border:1.5px solid transparent;transition:border-color .15s}
.sc-bp-field:focus-within{border-color:var(--t);background:#fff}
.sc-bp-field input{width:100%;border:none;background:none;font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:var(--text-xl);font-weight:500;color:var(--ink);outline:none;text-align:center;padding:12px 8px}
.sc-bp-unit{font-size:var(--text-sm);color:var(--mute);width:40px;flex-shrink:0;text-align:right}

/* ── Non-responding treatment ───────────────────────────── */
.non-respond-row{background:var(--red-bg) !important}
.non-respond-flag{background:var(--red-soft);border:1px solid var(--red-bd);border-radius:6px;padding:4px 10px;font-size:var(--text-sm);font-weight:700;color:var(--red-dk);display:inline-flex;align-items:center;gap:5px}

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:1200px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.bp-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){
  :root{--sw:0px}
  .sidebar{position:fixed;left:-290px;width:280px;top:0;bottom:0;z-index:150;transition:left .28s cubic-bezier(.4,0,.2,1);height:100%;overflow-y:auto}
  .sidebar.open{left:0;box-shadow:0 0 40px rgba(0,0,0,.2)}
  .hamburger{display:flex}
  .shell{overflow:hidden}
  .page-head{padding:11px 14px;gap:8px}
  .page-head h1{font-size:var(--text-base)}
  .page-body{padding:14px}
  .stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat{padding:14px 14px}
  .stat-val{font-size:var(--text-xl)}
  .tcard-head{padding:11px 14px}
  .tcard-title{font-size:var(--text-sm)}
  th{padding:8px 10px;font-size:var(--text-xs)}
  td{padding:8px 10px;font-size:var(--text-sm)}
  .dense{--btn-sm-h:26px;--btn-sm-px:7px;--btn-sm-fs:var(--text-xs);--btn-row-gap:4px}
  .bottom-nav{display:flex}
  .main{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .intake-card{max-width:100%}
  .bp-grid{grid-template-columns:1fr 1fr}
  .extra-grid{grid-template-columns:1fr}
  .user-chip-name{max-width:90px}
  .tcard{margin-bottom:12px}
  .reg-grid{grid-template-columns:1fr}
  /* Mobile = 1 màn hình đo (§ decisions.md 26/09): điều dưỡng/bác sĩ solo see
     ONLY Tiếp nhận at phone width — sidebar/bottom-nav/every other .page hidden.
     Supervisor is unaffected (no .mobile-intake-role class → normal responsive shell). */
  body.mobile-intake-role .sidebar,
  body.mobile-intake-role .bottom-nav,
  body.mobile-intake-role .hamburger{display:none!important}
  body.mobile-intake-role .page{display:none!important}
  body.mobile-intake-role #page-tiepnhan{display:block!important}
  body.mobile-intake-role .main{padding-bottom:0}
  /* The desktop "left column" empty-state card is redundant here — the
     priority banner (or the search box, when the queue is empty) already
     says the same thing, so showing both was 3 stacked "nothing selected"
     messages on one screen. */
  body.mobile-intake-role #intakeEmptyLeft{display:none!important}
}
@media(max-width:480px){
  .stats{grid-template-columns:1fr 1fr}
  .stat-val{font-size:var(--text-lg)}
  .bp-grid{grid-template-columns:1fr}
}
/* Responsive tables (.resp) → stacked cards on mobile (no horizontal scroll) */
@media(max-width:640px){
  .table-wrap.resp{overflow:visible}
  .table-wrap.resp table{min-width:0}
  .table-wrap.resp thead{display:none}
  .table-wrap.resp tbody,.table-wrap.resp tr,.table-wrap.resp td{display:block;width:100%}
  .table-wrap.resp tr{border:1px solid var(--bord);border-radius:var(--rm);margin:0 12px 10px;padding:4px 2px;background:#fff;box-shadow:var(--shadow-card)}
  .table-wrap.resp td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0;padding:8px 14px;font-size:var(--text-sm)}
  .table-wrap.resp td::before{content:attr(data-label);font-weight:600;color:var(--sub);font-size:var(--text-sm);flex-shrink:0}
  .table-wrap.resp td[data-label="Bệnh nhân"]{border-bottom:1px solid var(--fog);padding:10px 14px}
  .table-wrap.resp td[data-label="Bệnh nhân"]::before,.table-wrap.resp td[data-label=""]::before{display:none}
  .table-wrap.resp td[data-label="Bệnh nhân"]>div{flex:1;min-width:0}
  .table-wrap.resp td[data-label=""]{padding-top:10px}
  .table-wrap.resp td .btn-row{justify-content:flex-end;flex:1;flex-wrap:wrap}
}

/* ══ Record page (owner-approved 30/09, proposal in the styleguide Proposal tab) ═══════════
   Two grouped cards: blood pressure (today's BP + gap + target, trend, readings under the chart) and
   "this exam" / treatment (medication, follow-up, note, details, care history). Every folded part is a bordered row. */
.dseg{display:flex;align-items:center;background:var(--fog);border-radius:var(--rxs);padding:3px;gap:2px;flex-wrap:wrap;width:fit-content}
.dseg-i{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:0;border-radius:var(--rxs);font-family:inherit;font-size:var(--text-sm);font-weight:600;color:var(--sub);background:none;cursor:pointer}
.dseg-i.on{background:var(--wh);box-shadow:var(--sh-1);color:var(--ink)}
.rc-dob{color:var(--ink);font-weight:700;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.rec-head+.cds-band{margin-top:18px}
.cds-band+.rec-grid{margin-top:0}
.rc-k{font-size:var(--text-xs);font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.5px}
.rc-sub{font-size:var(--text-sm);color:var(--sub)}
.rc-vs{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:20px;background:var(--surf);border:1px solid var(--bord);border-radius:var(--rm);padding:12px 16px;margin-bottom:12px}
.rc-bp{display:flex;align-items:baseline;gap:12px;margin-top:4px;flex-wrap:wrap}
.rc-bp b{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--text-2xl);font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.rc-bp b.c-red{color:var(--red-tx)}.rc-bp b.c-amber{color:var(--amber-tx)}
.rc-gap{text-align:center;padding:0 20px;border-left:1px solid var(--bord);border-right:1px solid var(--bord)}
.rc-gap b{display:block;font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--text-md);font-weight:800}
.rc-gap span{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.rc-gap.up{color:var(--red-tx)}.rc-gap.ok{color:var(--green-tx)}
.rc-tgt{min-width:120px}
.rc-tgtv{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.rc-tgtv b{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--text-md);color:var(--ink)}
.rc-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--bord);font-size:var(--text-sm);color:var(--sub)}
.rc-foot .r{margin-left:auto;display:flex;align-items:center;gap:12px}
.rleg-i{display:inline-flex;align-items:center;gap:6px}
.rc-lbl{display:block;font-size:var(--text-xs);font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.5px;margin:16px 0 8px}
.rc-lbl:first-child{margin-top:0}
.rc-chips{display:flex;flex-wrap:wrap;gap:8px}
.rc-chip{font-family:inherit;font-size:var(--text-sm);font-weight:600;color:var(--body);background:var(--wh);border:1px solid var(--bord);border-radius:var(--rpill);padding:4px 12px;cursor:pointer}
.rc-chip.on{color:var(--td);background:var(--td-bg);border-color:var(--td)}
.rc-hint{font-size:var(--text-sm);color:var(--sub);margin-top:8px}
.rc-lnk{font-family:inherit;font-size:var(--text-sm);font-weight:600;color:var(--td);background:none;border:0;padding:4px 0;cursor:pointer}
.rc-lnk.quiet{color:var(--sub)}
.rc-meds{display:grid;gap:8px}
.rc-med{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--bord);border-radius:var(--rm);padding:8px 12px;font-size:var(--text-sm)}
.rc-med .sub{color:var(--sub);margin-top:2px}
.rc-med.confirm{background:var(--red-bg);border-color:var(--red-bd);flex-direction:column;align-items:flex-start}
.rc-acts{display:flex;align-items:center;gap:20px}
.rc-add{display:flex;align-items:center;width:100%;margin-top:8px;border:1px dashed var(--bord);border-radius:var(--rm);background:none;padding:8px 12px;font-family:inherit;font-size:var(--text-sm);font-weight:600;color:var(--td);cursor:pointer}
.rc-form{display:grid;gap:8px;border:1px solid var(--td);border-radius:var(--rm);padding:12px;background:var(--td-bg)}
.rc-form .g{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rc-form .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rc-form .r{display:flex;gap:8px}
.rc-form .err{color:var(--red-tx);font-size:var(--text-sm)}
.rc-num{width:72px}
.rc-fold{margin-top:12px}
.rc-fold>summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:var(--wh);border:1px solid var(--bord);border-radius:var(--rs);font-size:var(--text-sm);font-weight:700;color:var(--ink);list-style:none}
.rc-fold>summary::-webkit-details-marker{display:none}
.rc-fold>summary:hover{background:var(--fog)}
.rc-fold>summary:focus-visible{outline:2px solid var(--td);outline-offset:2px}
.rc-fold>summary .m{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--sub)}
.rc-chev{display:inline-flex;color:var(--sub);transition:transform var(--motion-fast)}
.rc-fold[open] .rc-chev{transform:rotate(180deg)}
.rc-fold>.in{padding-top:12px}
.rc-care-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.toast .toast-act{color:inherit;font-weight:700;text-decoration:underline;margin-left:12px}
.rc-more{font-size:var(--text-sm);font-weight:700;color:var(--red-dk);white-space:nowrap}
/* Sidebar rail — the menu folds to icons on the Record page (>=769px), click the chevron to expand */
.sidebar{transition:width var(--motion-base)}
.sb-expand{display:none}
@media(min-width:769px){
  .shell.rail .sidebar{width:64px}
  .shell.rail .sb-brand{padding:18px 0 12px;display:flex;justify-content:center}
  .shell.rail .sb-logo-text,.shell.rail .sb-sub,.shell.rail .sb-station,.shell.rail .nav-lbl,.shell.rail .sb-uinfo,.shell.rail .sb-user-chev,.shell.rail .sb-util .dseg{display:none}
  .shell.rail .sb-util .nav-item{display:none} /* logout hidden in the narrow rail — too easy to tap by accident next to the icon nav */
  .shell.rail .sb-nav{padding:6px 0}
  .shell.rail .nav-item{justify-content:center;width:40px;height:40px;padding:0;margin:0 auto 4px}
  .shell.rail .nav-badge{position:absolute;top:-2px;right:-4px;min-width:16px;height:16px;padding:0 4px}
  .shell.rail .sb-footer{padding:8px 0}
  .shell.rail .sb-user-btn{justify-content:center;padding:4px}
  .shell.rail .sb-util{flex-direction:column}
  .shell.rail .sb-expand{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 auto 8px;border:0;border-radius:var(--rs);background:none;color:var(--sub);cursor:pointer}
  .shell.rail .sb-expand:hover{background:var(--fog)}
}

/* ══ Patterns — markup is built by the shared functions in assets/dashboard-ui.js and
   rendered live in /styleguide/dashboard-patterns.html (examQueueHtml,
   renderCDSBand, careHistoryHtml, riskDonutHtml, weekTrendHtml). ══════════════ */
/* Doctor exam queue — severity-sorted worklist (was a 3-column Kanban; owner-approved 30/09) */
.qbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.qhint{font-size:var(--text-sm);color:var(--sub)}
.qstrip{display:flex;align-items:center;gap:12px;background:var(--wh);border:1px solid var(--bord);box-shadow:inset 3px 0 0 var(--td);border-radius:var(--rm);padding:12px 16px;margin-bottom:12px}
.qstrip-k{font-size:var(--text-xs);font-weight:700;color:var(--td);text-transform:uppercase;letter-spacing:.5px}
.qstrip-who{flex:1;min-width:0;font-size:var(--text-sm);color:var(--sub)}
.qstrip-who b{color:var(--ink);font-size:var(--text-base)}
.qgrp{display:flex;align-items:center;gap:8px;width:100%;border:0;border-top:1px solid var(--line2);background:var(--surf2);padding:8px 16px;font-family:inherit;font-size:var(--text-xs);font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.5px;cursor:pointer;text-align:left}
.qgrp:first-child{border-top:0}
.qgrp .n{color:var(--mute)}
.qrow{width:100%;border:0;border-top:1px solid var(--line2);background:none;text-align:left;font-family:inherit;cursor:pointer}
.qrow:hover{background:var(--fog)}
.qrow:focus-visible{outline:2px solid var(--td);outline-offset:-2px}
.tcard>.qrow:first-child{border-top:0}
.qwait{font-size:var(--text-sm);color:var(--sub);white-space:nowrap;min-width:64px;text-align:right}
.qdone{color:var(--green-tx);display:inline-flex}
/* Clinical decision-support band (record page) */
.cds-band{margin-bottom:18px;display:flex;flex-direction:column;gap:8px}
.cds-alert{border-left:3px solid var(--mute);border-radius:var(--rs);padding:10px 14px}
.cds-title{font-weight:700;font-size:var(--text-sm)}
.cds-msg{font-size:var(--text-sm);color:var(--body);margin-top:2px}
.cds-red{background:var(--red-bg);border-left-color:var(--red)}.cds-red .cds-title{color:var(--red-tx)}
.cds-amber{background:var(--amber-bg);border-left-color:var(--amber)}.cds-amber .cds-title{color:var(--amber-tx)}
.cds-info{background:var(--blue-bg);border-left-color:var(--b)}.cds-info .cds-title{color:var(--blue-tx)}
/* Care history timeline (exams + contacts) */
.tl{position:relative;padding-left:16px;border-left:2px solid var(--bord)}
.tl-item{position:relative;padding-bottom:14px}
.tl-dot{position:absolute;left:-20px;top:3px;width:8px;height:8px;border-radius:50%;background:var(--td)}
.tl-dot-amber{background:var(--amber)}.tl-dot-mute{background:var(--mute)}
.tl-title{font-size:var(--text-sm);font-weight:700;color:var(--ink)}
.tl-meta{font-size:var(--text-xs);color:var(--sub);margin-top:1px}
.tl-note{font-size:var(--text-sm);color:var(--body);margin-top:2px}
.tl-empty{font-size:var(--text-sm);color:var(--mute)}
/* Overview widgets: risk donut legend swatch, 7-day trend day labels */
.sw9{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.wk-l{font-size:10px;color:var(--mute);font-weight:400}
.wk-l.today{color:var(--td);font-weight:700}