/* ===========================================================================
   Corpus — design system (ported from the concept mockups)
   Themeable: light + dark. Dark is the "hero" app look from the mockups.
   ======================================================================== */
:root{
  /* light (default) */
  --ground:#F1F5F3; --surface:#FFFFFF; --surface-2:#EAF0ED; --surface-3:#E1E9E5;
  --border:#DBE4E0; --border-strong:#C6D3CE;
  --ink:#122019; --muted:#54635E; --faint:#8A9793;
  --vital:#0FA97E; --vital-deep:#0B7D5E; --vital-wash:rgba(15,169,126,.10);
  --signal:#B96E17; --signal-wash:rgba(185,110,23,.12); --alert:#CF3A33; --pos:#0B7D5E;
  /* chart data tokens (validated for contrast/CVD) */
  --c1:#0A7E5F; --c2:#B4680F; --c-grid:rgba(18,32,25,.09); --c-axis:#7C8B87; --band:rgba(15,150,110,.10); --c-ref:#B4680F;

  --font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"Cascadia Code","SF Mono","Segoe UI Mono",Consolas,monospace;
  --nav-w:230px; --tab-h:62px; --r:15px; --r-sm:10px;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#080D0C; --surface:#101917; --surface-2:#16211E; --surface-3:#1C2825;
    --border:#21302E; --border-strong:#2C4340;
    --ink:#E9F0ED; --muted:#90A09B; --faint:#5E6E6A;
    --vital:#25D6A2; --vital-deep:#13A87E; --vital-wash:rgba(37,214,162,.12);
    --signal:#F0A63C; --signal-wash:rgba(240,166,60,.13); --alert:#F0564E; --pos:#33D9A6;
    --c1:#22C89A; --c2:#E39A34; --c-grid:rgba(233,240,237,.09); --c-axis:#6E7E7A; --band:rgba(37,200,150,.12); --c-ref:#E39A34;
  }
}
:root[data-theme="light"]{
  --ground:#F1F5F3; --surface:#FFFFFF; --surface-2:#EAF0ED; --surface-3:#E1E9E5; --border:#DBE4E0; --border-strong:#C6D3CE;
  --ink:#122019; --muted:#54635E; --faint:#8A9793; --vital:#0FA97E; --vital-deep:#0B7D5E; --vital-wash:rgba(15,169,126,.10);
  --signal:#B96E17; --signal-wash:rgba(185,110,23,.12); --alert:#CF3A33; --pos:#0B7D5E;
  --c1:#0A7E5F; --c2:#B4680F; --c-grid:rgba(18,32,25,.09); --c-axis:#7C8B87; --band:rgba(15,150,110,.10); --c-ref:#B4680F;
}
:root[data-theme="dark"]{
  --ground:#080D0C; --surface:#101917; --surface-2:#16211E; --surface-3:#1C2825; --border:#21302E; --border-strong:#2C4340;
  --ink:#E9F0ED; --muted:#90A09B; --faint:#5E6E6A; --vital:#25D6A2; --vital-deep:#13A87E; --vital-wash:rgba(37,214,162,.12);
  --signal:#F0A63C; --signal-wash:rgba(240,166,60,.13); --alert:#F0564E; --pos:#33D9A6;
  --c1:#22C89A; --c2:#E39A34; --c-grid:rgba(233,240,237,.09); --c-axis:#6E7E7A; --band:rgba(37,200,150,.12); --c-ref:#E39A34;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--font-sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
}
h1,h2,h3,h4{margin:0; text-wrap:balance}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
.mono{font-family:var(--font-mono)}
.tnum{font-variant-numeric:tabular-nums}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:6px}
:focus-visible{outline:2px solid var(--vital);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- app shell ---------- */
#root{min-height:100dvh}
#sidenav{display:none}
#app{outline:none;padding:0 0 calc(var(--tab-h) + env(safe-area-inset-bottom));min-height:100dvh}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}

/* bottom tab bar (mobile) */
#tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex;justify-content:space-around;align-items:center;
  background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:blur(12px) saturate(1.2);
  border-top:1px solid var(--border);
}
#tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--faint);
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:6px 4px;flex:1}
#tabbar a svg{width:21px;height:21px}
#tabbar a.on{color:var(--vital)}

/* sidebar (desktop) */
@media (min-width:900px){
  #root{display:grid;grid-template-columns:var(--nav-w) 1fr}
  #tabbar{display:none}
  #app{padding:0}
  #sidenav{display:flex;flex-direction:column;gap:6px;padding:18px 14px;position:sticky;top:0;height:100dvh;
    border-right:1px solid var(--border);background:var(--surface)}
  #sidenav .brand{display:flex;align-items:center;gap:10px;font-weight:750;letter-spacing:-.01em;padding:6px 8px 14px}
  #sidenav .brand .g{width:28px;height:28px;border-radius:8px;background:linear-gradient(150deg,var(--vital),var(--vital-deep));display:grid;place-items:center;flex:none}
  #sidenav .brand .g svg{width:16px;height:16px}
  #sidenav .brand small{display:block;font-family:var(--font-mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-top:-2px}
  #sidenav a.nav{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;color:var(--muted);font-weight:600;font-size:.92rem}
  #sidenav a.nav svg{width:19px;height:19px;flex:none}
  #sidenav a.nav:hover{background:var(--surface-2);color:var(--ink)}
  #sidenav a.nav.on{background:var(--vital-wash);color:var(--vital-deep)}
  #sidenav .spacer{flex:1}
}

/* ---------- app bar (per view header) ---------- */
.appbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;background:color-mix(in srgb,var(--ground) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.appbar .title{display:flex;flex-direction:column}
.appbar .title h1{font-size:1.25rem;font-weight:770;letter-spacing:-.02em}
.appbar .title .sub{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-top:1px}
.appbar .left{display:flex;align-items:center;gap:11px;min-width:0}
.appbar .actions{display:flex;align-items:center;gap:8px}
.iconbtn{width:38px;height:38px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer}
.iconbtn:hover{color:var(--ink);border-color:var(--border-strong)}
.iconbtn svg{width:18px;height:18px}
.backbtn{width:34px;height:34px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none}
.backbtn svg{width:17px;height:17px}
@media (min-width:900px){ .appbar{padding-left:24px;padding-right:24px} }

.view{padding:0 0 30px}
.section{padding:16px}
@media (min-width:900px){ .section{padding:20px 24px;max-width:1120px} }
.lab{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600}
.muted{color:var(--muted)}

/* ---------- buttons / chips / fields ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface);color:var(--ink);font-weight:650;font-size:.92rem;cursor:pointer}
.btn:hover{border-color:var(--border-strong)}
.btn.primary{background:var(--vital);border-color:transparent;color:#04120d}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent}
.btn.block{width:100%}
.btn.sm{padding:8px 12px;font-size:.85rem;border-radius:10px}
.btn svg{width:16px;height:16px}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:5px 10px;font-weight:600}
label.field{display:flex;flex-direction:column;gap:6px;font-size:.82rem;color:var(--muted);font-weight:600}
input,select,textarea{font-family:inherit;font-size:.95rem;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:11px 12px;width:100%}
input:focus,select,textarea:focus{outline:none;border-color:var(--vital)}
textarea{resize:vertical;min-height:70px}

/* ---------- KPI tiles ---------- */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
@media (min-width:640px){ .kpis{grid-template-columns:repeat(3,1fr)} }
@media (min-width:960px){ .kpis{grid-template-columns:repeat(6,1fr)} }
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 13px;display:flex;flex-direction:column;gap:4px;min-height:100px;cursor:pointer}
.kpi:hover{border-color:var(--border-strong)}
.kpi .k{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600}
.kpi .v{font-family:var(--font-mono);font-weight:650;font-size:1.3rem;letter-spacing:-.01em;line-height:1.05}
.kpi .v .u{font-size:.62rem;color:var(--faint);font-weight:500;margin-left:2px}
.kpi .d{font-family:var(--font-mono);font-size:.62rem;font-weight:600;color:var(--pos)}
.kpi .d.watch{color:var(--signal)}
.kpi .spark{height:30px;margin-top:auto}
.kpi .spark svg{display:block;width:100%;height:auto}

/* ---------- cards / charts ---------- */
.grid{display:grid;grid-template-columns:1fr;gap:13px}
@media (min-width:760px){ .grid{grid-template-columns:1fr 1fr} }
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:15px 16px 12px}
.card.wide{grid-column:1/-1}
.card .ch{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.card .ct{font-size:.98rem;font-weight:700;letter-spacing:-.01em}
.card .cs{font-size:.78rem;color:var(--muted);margin-top:2px}
.card .big{font-family:var(--font-mono);font-weight:650;font-size:1.1rem;text-align:right;white-space:nowrap}
.card .big .u{font-size:.62rem;color:var(--faint);font-weight:500}
.chartbox{min-height:120px}
.chartbox svg{display:block;width:100%;height:auto}
.legend{display:flex;gap:12px;margin-top:9px}
.legend span{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;color:var(--muted);font-weight:500}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block}

/* ---------- home readiness ---------- */
.ready{display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px}
.ring{width:96px;height:96px;flex:none;position:relative}
.ring .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .num b{font-family:var(--font-mono);font-size:1.5rem;font-weight:700;line-height:1}
.ring .num span{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:2px}
.ready .rr{flex:1}
.ready .rr .st{font-size:1rem;font-weight:720;color:var(--vital-deep)}
.minigrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:9px}
.minigrid .m .k{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.minigrid .m .v{font-family:var(--font-mono);font-size:.95rem;font-weight:650}
.today-card{background:linear-gradient(150deg,var(--vital-wash),transparent 62%),var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px}
.today-card .tt{font-size:1.05rem;font-weight:730;margin-top:5px}
.today-card .ds{font-size:.88rem;color:var(--muted);margin-top:5px;line-height:1.5}

/* ---------- log ---------- */
.voicebtn{background:linear-gradient(150deg,var(--vital-wash),transparent),var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;display:flex;align-items:center;gap:14px;cursor:pointer;width:100%;text-align:left}
.voicebtn .mic{width:48px;height:48px;border-radius:50%;background:var(--vital);color:#04120d;display:grid;place-items:center;flex:none;box-shadow:0 0 0 6px var(--vital-wash)}
.voicebtn .mic svg{width:23px;height:23px}
.voicebtn.rec .mic{animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 6px var(--vital-wash)}50%{box-shadow:0 0 0 12px var(--vital-wash)}}
.voicebtn .t b{font-size:1rem;font-weight:720}
.voicebtn .t span{display:block;font-size:.82rem;color:var(--muted);margin-top:2px}
.tin{display:flex;align-items:center;gap:9px}
.tin input{flex:1}
.qgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.q{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:11px 4px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
.q:hover{border-color:var(--border-strong)}
.q svg{width:19px;height:19px;color:var(--vital-deep)}
.q span{font-size:.66rem;color:var(--muted);font-weight:500;text-align:center;line-height:1.15}
.entry{display:flex;align-items:center;gap:11px;padding:10px 2px;border-top:1px solid var(--border)}
.entry:first-child{border-top:none}
.entry .dot{width:30px;height:30px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;flex:none;color:var(--muted)}
.entry .dot svg{width:15px;height:15px}
.entry .m{flex:1;min-width:0}
.entry .m b{font-size:.9rem;font-weight:620;display:block}
.entry .m span{font-size:.74rem;color:var(--muted)}
.entry .tm{font-family:var(--font-mono);font-size:.68rem;color:var(--faint);flex:none}
.entry .auto{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;color:var(--vital-deep);background:var(--vital-wash);border-radius:6px;padding:3px 6px;flex:none}
.entry .del{color:var(--faint);cursor:pointer;background:none;border:none;padding:4px}
.entry .del:hover{color:var(--alert)}

/* parsed chips (voice confirm) */
.parsed{display:flex;flex-direction:column;gap:8px}
.pchip{display:flex;align-items:center;gap:11px;background:var(--surface-2);border:1px solid var(--border);border-left:2px solid var(--vital);border-radius:11px;padding:10px 12px}
.pchip svg{width:16px;height:16px;color:var(--vital-deep);flex:none}
.pchip .x b{font-size:.85rem;font-weight:650;display:block}
.pchip .x span{font-size:.74rem;color:var(--muted)}

/* ---------- chat ---------- */
.chat{display:flex;flex-direction:column;gap:10px;padding:16px;padding-bottom:96px}
@media (min-width:900px){ .chat{max-width:820px;margin:0 auto} }
.bub{max-width:86%;padding:10px 13px;border-radius:15px;font-size:.9rem;line-height:1.5}
.bub.me{align-self:flex-end;background:var(--vital-deep);color:#f2fffa;border-bottom-right-radius:5px}
.bub.ai{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:5px}
.bub.ai .hl{color:var(--vital-deep);font-weight:650}
.bub.ai .cite{display:block;margin-top:7px;font-family:var(--font-mono);font-size:.62rem;color:var(--faint)}
.bub.typing{color:var(--muted);font-style:italic}
.bub .v{display:inline-flex;align-items:center;gap:5px;opacity:.85;font-size:.7rem;margin-bottom:3px}
.bub .v svg{width:11px;height:11px}
.composer{position:fixed;left:0;right:0;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));z-index:20;
  display:flex;align-items:center;gap:9px;padding:10px 14px;background:color-mix(in srgb,var(--ground) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--border)}
.composer input{flex:1;border-radius:14px}
.composer .mc{width:40px;height:40px;border-radius:12px;background:var(--vital);color:#04120d;display:grid;place-items:center;flex:none;cursor:pointer;border:none}
.composer .mc.rec{animation:pulse 1.2s infinite}
.composer .mc svg{width:17px;height:17px}
.composer .send{width:40px;height:40px;border-radius:12px;background:var(--surface);border:1px solid var(--border);color:var(--ink);display:grid;place-items:center;flex:none;cursor:pointer}
.composer .send svg{width:17px;height:17px}
@media (min-width:900px){ .composer{left:var(--nav-w);bottom:0} .composer>*{max-width:820px} .composer{justify-content:center} }

/* ---------- insights ---------- */
.inscard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px;cursor:pointer}
.inscard.hero{border-color:var(--vital-deep);background:linear-gradient(155deg,var(--vital-wash),transparent 64%),var(--surface)}
.inscard .top{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.inscard .tag{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:6px;color:var(--vital-deep);background:var(--vital-wash)}
.inscard .tag.watch{color:var(--signal);background:var(--signal-wash)}
.inscard h4{font-size:1rem;font-weight:700;letter-spacing:-.01em}
.inscard p{margin:5px 0 0;font-size:.86rem;color:var(--muted);line-height:1.5}
.factors{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.factor{display:flex;align-items:center;gap:9px;font-size:.86rem}
.factor .fi{width:19px;color:var(--faint);display:grid;place-items:center;flex:none}
.factor .fi svg{width:14px;height:14px}
.factor b{color:var(--ink);font-weight:640}
.factor .up{color:var(--vital-deep);font-family:var(--font-mono);font-size:.72rem;margin-left:auto;font-weight:600}
.explore{margin-top:10px;font-family:var(--font-mono);font-size:.7rem;color:var(--vital-deep);font-weight:600;display:flex;align-items:center;gap:5px}

/* ---------- metric detail ---------- */
.dbig{display:flex;align-items:baseline;gap:9px}
.dbig b{font-family:var(--font-mono);font-size:1.8rem;font-weight:700;letter-spacing:-.01em}
.dbig .u{font-size:.8rem;color:var(--faint)}
.dbig .pill{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--vital-deep);background:var(--vital-wash);border-radius:999px;padding:3px 9px;margin-left:auto}
.dbig .pill.watch{color:var(--signal);background:var(--signal-wash)}
.vtoggle,.rng{display:flex;gap:4px}
.vtoggle{background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:4px}
.vtoggle span{flex:1;text-align:center;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;padding:7px 4px;border-radius:8px;color:var(--faint);font-weight:600;cursor:pointer}
.vtoggle span.on{background:var(--vital);color:#04120d}
.rng span{font-family:var(--font-mono);font-size:.64rem;color:var(--faint);padding:5px 10px;border:1px solid var(--border);border-radius:8px;cursor:pointer}
.rng span.on{color:var(--ink);border-color:var(--vital-deep);background:var(--vital-wash)}
.ctx{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px}
.ctxrow{display:flex;gap:9px;align-items:flex-start;font-size:.85rem;color:var(--muted);padding:4px 0}
.ctxrow .d{width:6px;height:6px;border-radius:50%;background:var(--signal);margin-top:6px;flex:none}
.ctx .ai{margin-top:7px;font-size:.86rem;color:var(--ink);line-height:1.5;border-top:1px solid var(--border);padding-top:9px}
.ctx .ai b{color:var(--vital-deep)}
.statrow{display:flex;gap:10px}
.statrow .s{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:10px;text-align:center}
.statrow .s .k{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.statrow .s .v{font-family:var(--font-mono);font-size:1rem;font-weight:650;margin-top:2px}

/* ---------- settings ---------- */
.set-group{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.set-group h3{font-size:.72rem;font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:14px 16px 8px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-top:1px solid var(--border)}
.set-row .l b{font-size:.92rem;font-weight:620;display:block}
.set-row .l span{font-size:.78rem;color:var(--muted)}
.set-row .ctl{flex:none;display:flex;align-items:center;gap:8px}
.set-row.col{flex-direction:column;align-items:stretch}
.switch{width:46px;height:27px;border-radius:999px;background:var(--surface-3);border:1px solid var(--border);position:relative;cursor:pointer;flex:none}
.switch.on{background:var(--vital)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:#fff;transition:transform .16s}
.switch.on::after{transform:translateX(19px)}
.src-status{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:4px 8px;border-radius:999px}
.src-status.on{color:var(--vital-deep);background:var(--vital-wash)}
.src-status.off{color:var(--faint);border:1px solid var(--border)}

/* ---------- voice overlay ---------- */
.voice-overlay{position:fixed;inset:0;z-index:60;background:color-mix(in srgb,var(--ground) 94%,transparent);backdrop-filter:blur(6px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center}
.voice-overlay .wave{display:flex;align-items:center;gap:3px;height:70px}
.voice-overlay .wave i{width:4px;border-radius:2px;background:var(--vital);animation:eq 1s infinite ease-in-out}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.voice-overlay .status{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--vital)}
.voice-overlay .heard{font-size:1.05rem;max-width:34ch;line-height:1.5;color:var(--ink);min-height:1.5em}
.voice-overlay .hint{font-size:.8rem;color:var(--muted)}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tab-h) + 18px);z-index:80;
  background:var(--ink);color:var(--ground);padding:11px 16px;border-radius:12px;font-size:.86rem;font-weight:600;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (min-width:900px){ #toast{bottom:24px} }

.stack{display:flex;flex-direction:column;gap:12px}
.stack-sm{display:flex;flex-direction:column;gap:8px}
.row{display:flex;gap:10px;align-items:center}
.grow{flex:1}
.hidden{display:none!important}
.center{text-align:center}
.empty{text-align:center;color:var(--muted);padding:30px 16px;font-size:.9rem}

/* ---------- auth gate ---------- */
.authgate #sidenav,.authgate #tabbar{display:none}
.authgate #app{padding:0}
.authwrap{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--ground)}
.authcard{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:11px}
.authbrand{display:flex;align-items:center;gap:11px;font-weight:750;letter-spacing:-.01em;margin-bottom:4px}
.authbrand .g{width:34px;height:34px;border-radius:9px;background:linear-gradient(150deg,var(--vital),var(--vital-deep));display:grid;place-items:center;flex:none;font-size:18px;color:#04120d}
.authbrand small{display:block;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-top:-2px}
.authcard h1{font-size:1.4rem;font-weight:780;letter-spacing:-.02em;margin-top:2px}
.autherr{display:none;color:var(--alert);font-size:.85rem;background:color-mix(in srgb,var(--alert) 10%,transparent);border:1px solid color-mix(in srgb,var(--alert) 30%,transparent);border-radius:9px;padding:9px 11px}
.authnote{font-size:.76rem;margin-top:6px;display:flex;align-items:center;gap:6px;line-height:1.4}

/* ---------- cloud sync pill ---------- */
#syncpill{position:fixed;left:14px;bottom:calc(var(--tab-h) + 14px);z-index:70;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.04em;
  padding:6px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--muted);
  opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none}
#syncpill.show{opacity:1;transform:none}
#syncpill.saving{color:var(--signal)}
#syncpill.saved{color:var(--pos)}
#syncpill.error{color:var(--alert);border-color:var(--alert)}
@media (min-width:900px){#syncpill{bottom:14px;left:calc(var(--nav-w) + 14px)}}

/* ---------- image thumbnails (facility photos, scans) ---------- */
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.thumb{margin:0;width:104px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface-2);flex:none}
.thumb img{display:block;width:100%;height:76px;object-fit:cover;background:var(--surface-3)}
.thumb figcaption{font-size:.6rem;color:var(--muted);padding:4px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thumb:hover{border-color:var(--vital-deep)}

/* ---------- intake mic fields ---------- */
.qrow{display:flex;gap:8px;align-items:flex-start}
.qrow>input,.qrow>textarea,.qrow>select{flex:1;min-width:0}
.micbtn{flex:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--vital-deep);display:grid;place-items:center;cursor:pointer;font-size:16px}
.micbtn:hover{border-color:var(--vital-deep)}
.micbtn.rec{background:var(--vital);color:#04120d;animation:pulse 1.2s infinite}