/* "Night Ward" day palette, pinned always-on (Bret's final call; app.js
   stamps data-theme="light" at boot, which outranks the OS preference). The
   dark tokens below are retained but dormant. */
:root{
  color-scheme: light;
  --surface-1:#ffffff; --page:#f2f5f9;
  --ink-1:#101b2b; --ink-2:#4c5c72; --ink-3:#68788e;
  --grid:#d9e1ec; --baseline:#b7c3d3;
  --border:rgba(16,27,43,0.12);
  --series-1:#0f8ba1; --series-2:#eb6834; --series-3:#1baf7a;
  --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --good-text:#006300;
  --chip-ok:#e3f1ea; --chip-warn:#fdf3dc; --chip-late:#fbe4e4;
  --accent:#0f8ba1; --accent-deep:#0b6c7e; --on-accent:#ffffff;
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    color-scheme: dark;
    --surface-1:#16202f; --page:#0e1420;
    --ink-1:#eaf1fa; --ink-2:#a7b4c8; --ink-3:#7d8ca1;
    --grid:#22304a; --baseline:#33455f;
    --border:rgba(150,190,255,0.14);
    --series-1:#4cc3d9; --series-2:#d95926; --series-3:#199e70;
    --good-text:#31d158;
    --chip-ok:#0f2418; --chip-warn:#2a2410; --chip-late:#331414;
    --accent:#4cc3d9; --accent-deep:#7ad6e6; --on-accent:#04121a;
  }
}
/* the clock's stamp always wins, both directions */
:root[data-theme="dark"]{
  color-scheme: dark;
  --surface-1:#16202f; --page:#0e1420;
  --ink-1:#eaf1fa; --ink-2:#a7b4c8; --ink-3:#7d8ca1;
  --grid:#22304a; --baseline:#33455f;
  --border:rgba(150,190,255,0.14);
  --series-1:#4cc3d9; --series-2:#d95926; --series-3:#199e70;
  --good-text:#31d158;
  --chip-ok:#0f2418; --chip-warn:#2a2410; --chip-late:#331414;
  --accent:#4cc3d9; --accent-deep:#7ad6e6; --on-accent:#04121a;
}
:root[data-theme="light"]{
  color-scheme: light;
  --surface-1:#ffffff; --page:#f2f5f9;
  --ink-1:#101b2b; --ink-2:#4c5c72; --ink-3:#68788e;
  --grid:#d9e1ec; --baseline:#b7c3d3;
  --border:rgba(16,27,43,0.12);
  --series-1:#0f8ba1; --series-2:#eb6834; --series-3:#1baf7a;
  --good-text:#006300;
  --chip-ok:#e3f1ea; --chip-warn:#fdf3dc; --chip-late:#fbe4e4;
  --accent:#0f8ba1; --accent-deep:#0b6c7e; --on-accent:#ffffff;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
button,select,input,.code,.loc,.pinpad button{touch-action:manipulation}
.pinpad{user-select:none;-webkit-user-select:none}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--page); color:var(--ink-1);
  overscroll-behavior:none;
}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer}
.app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--page)}
.app.wide{max-width:980px}

/* ---------- shared components ---------- */
.card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600}
.hairline{height:1px;background:var(--grid);border:none;margin:10px 0}
.muted{color:var(--ink-3)} .sec{color:var(--ink-2)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:12px;padding:13px 18px;font-size:15px;font-weight:650;
  background:var(--accent);color:var(--on-accent);width:100%;
}
.btn:active{transform:scale(.985)}
.btn.ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.btn.subtle{background:var(--surface-1);color:var(--ink-1);border:1px solid var(--border)}
.btn.danger{background:var(--critical)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:30;background:var(--page);
  padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;
  display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--grid);
}
/* Inside the installed iOS app (html.native-ios, set from the user agent) the
   webview underlaps the Dynamic Island and there is no Safari chrome to save
   us. max() holds a floor tall enough to clear the island even if
   env(safe-area-inset-top) reports 0, which it has been seen to do in
   WKWebView. On non-island devices env() wins and nothing changes. */
html.native-ios .topbar{padding-top:max(calc(env(safe-area-inset-top) + 10px), 62px)}
html.native-ios .login{padding-top:max(calc(env(safe-area-inset-top) + 28px), 70px)}

.topbar .brand{font-weight:800;font-size:17px;letter-spacing:-.2px}
.topbar .brand small{display:block;font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:.2px}
.topbar .spacer{flex:1}
.iconbtn{width:38px;height:38px;border-radius:11px;background:var(--surface-1);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:17px}
.net{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--good-text)}
.net .dot{width:8px;height:8px;border-radius:50%;background:var(--good)}
.net.off{color:var(--serious)} .net.off .dot{background:var(--serious)}

/* ---------- demo bar ---------- */
.demobar{
  margin:10px 16px 0;border-radius:12px;border:1px dashed var(--baseline);
  padding:9px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12px;color:var(--ink-2);background:var(--surface-1);
}
.demobar b{font-size:11px;letter-spacing:.6px;color:var(--ink-3)}
.demobar select{
  font:inherit;font-weight:650;color:var(--ink-1);background:var(--page);
  border:1px solid var(--border);border-radius:8px;padding:4px 8px;
}
.demobar .ff{margin-left:auto;font-weight:700;color:var(--accent);font-size:12px;padding:4px 8px;border-radius:8px;border:1px solid var(--accent)}

/* ---------- login ---------- */
/* `safe center` matters here. Plain `center` centres the roster, but once the
   list is taller than the screen — which it is at eight staff — the overflow
   goes off BOTH ends and the top names become unreachable. `safe` falls back
   to flex-start in exactly that case. The inset padding keeps the heading out
   from under the notch in the installed app, where there is no browser chrome
   to push it down. */
.login{flex:1;display:flex;flex-direction:column;justify-content:safe center;overflow-y:auto;
  padding:calc(env(safe-area-inset-top) + 28px) 28px calc(env(safe-area-inset-bottom) + 28px);gap:20px}
.login h1{font-size:26px;letter-spacing:-.4px}
.login h1 span{color:var(--accent)}
.login p{color:var(--ink-2);font-size:14.5px;line-height:1.5}
.stafflist{display:flex;flex-direction:column;gap:10px}
.staffrow{
  display:flex;align-items:center;gap:12px;background:var(--surface-1);
  border:1px solid var(--border);border-radius:var(--radius);padding:13px 14px;text-align:left;
}
.staffrow:active{transform:scale(.99)}
.avatar{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;color:#fff;flex-shrink:0;
}
.staffrow .who{flex:1}
.staffrow .who b{font-size:15.5px;display:block}
.staffrow .who span{font-size:12.5px;color:var(--ink-3)}
.staffrow .arr{color:var(--ink-3);font-size:18px}

/* ---------- staff board ---------- */
.board{padding:12px 16px 110px;display:flex;flex-direction:column;gap:10px}
.boardhead{display:flex;align-items:baseline;gap:8px;margin:6px 2px 0}
.boardhead h2{font-size:18px;letter-spacing:-.3px}
.boardhead .count{font-size:12.5px;color:var(--ink-3);font-weight:600}
.clientcard{
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);
  padding:12px 14px;display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  position:relative;overflow:hidden;
}
.clientcard:active{transform:scale(.99)}
.clientcard .edge{position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px}
.clientcard.ok .edge{background:var(--good)}
.clientcard.due .edge{background:var(--warn)}
.clientcard.late .edge{background:var(--critical)}
.clientcard .cinfo{flex:1;min-width:0}
.clientcard .cname{font-weight:750;font-size:15.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.clientcard .cmeta{font-size:12.5px;color:var(--ink-3);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}
.lvl{font-size:10.5px;font-weight:800;letter-spacing:.4px;padding:2px 7px;border-radius:6px;background:var(--page);border:1px solid var(--border);color:var(--ink-2)}
.lvl.hot{background:var(--chip-late);border-color:transparent;color:var(--critical)}
.flag{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--chip-warn);color:#7a5200}
:root[data-theme="dark"] .flag{color:#fab219}
@media (prefers-color-scheme: dark){ :root:where(:not([data-theme="light"])) .flag{color:#fab219} }
.timerbox{text-align:right;flex-shrink:0}
.timerbox .t{font-variant-numeric:tabular-nums;font-weight:800;font-size:17px}
.timerbox .lab{font-size:10.5px;font-weight:700;letter-spacing:.5px;color:var(--ink-3)}
.clientcard.late .timerbox .t{color:var(--critical)}
.clientcard.due .timerbox .t{color:#a36f00}
:root[data-theme="dark"] .clientcard.due .timerbox .t{color:var(--warn)}
@media (prefers-color-scheme: dark){ :root:where(:not([data-theme="light"])) .clientcard.due .timerbox .t{color:var(--warn)} }
.prox{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700}
.prox .bars{display:inline-flex;align-items:flex-end;gap:1.5px;height:11px}
.prox .bars i{width:3px;border-radius:1px;background:var(--baseline)}
.prox .bars i:nth-child(1){height:4px}.prox .bars i:nth-child(2){height:7px}.prox .bars i:nth-child(3){height:11px}
.prox.p2 .bars i:nth-child(-n+2){background:var(--good)}
.prox.p3 .bars i{background:var(--good)}
.prox.p1 .bars i:nth-child(1){background:var(--warn)}
.prox .plab{color:var(--ink-3)}
.prox.p3 .plab,.prox.p2 .plab{color:var(--good-text)}

/* sticky action */
.stickyact{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  padding:10px 16px calc(env(safe-area-inset-bottom) + 12px);
  background:linear-gradient(to top,var(--page) 70%,transparent);
  display:flex;gap:10px;max-width:480px;margin:0 auto;
}
.badge{
  position:absolute;top:-6px;right:-6px;background:var(--critical);color:#fff;
  font-size:11px;font-weight:800;min-width:20px;height:20px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
}

/* ---------- record sheet ---------- */
.sheet-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;opacity:0;pointer-events:none;transition:opacity .18s}
.sheet-scrim.open{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:60;max-width:480px;margin:0 auto;
  background:var(--surface-1);border-radius:0;border:1px solid var(--border);border-bottom:none;
  transform:translateY(105%);transition:transform .22s cubic-bezier(.32,.72,.35,1);
  /* Full takeover — Bret: "should go all the way to the top". Recording a
     round is the app's main act; give it the whole screen. */
  height:100dvh;max-height:100dvh;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top);
}
html.native-ios .sheet{padding-top:max(env(safe-area-inset-top), 59px)}
.sheet.open{transform:translateY(0)}
.sheet .grip{width:38px;height:4px;border-radius:2px;background:var(--baseline);margin:9px auto 2px}
.sheet .body{overflow-y:auto;padding:10px 18px calc(env(safe-area-inset-bottom) + 16px)}
.sheethead{display:flex;align-items:center;gap:12px;padding:6px 0 12px;border-bottom:1px solid var(--grid)}
.sheethead .who b{font-size:17px;display:block}
.sheethead .who span{font-size:12.5px;color:var(--ink-3)}
.verify{
  margin:12px 0;border-radius:12px;padding:11px 13px;display:flex;gap:10px;align-items:center;
  font-size:13px;font-weight:650;border:1px solid transparent;
}
.verify .vico{font-size:19px}
.verify.v-ok{background:var(--chip-ok);color:var(--good-text)}
.verify.v-weak{background:var(--chip-warn);color:#7a5200}
.verify.v-none{background:var(--chip-late);color:var(--critical)}
.verify.v-na{background:var(--page);border-color:var(--border);color:var(--ink-2)}
.prox.pna .plab{color:var(--ink-3);font-style:italic}
:root[data-theme="dark"] .verify.v-weak{color:var(--warn)}
@media (prefers-color-scheme: dark){ :root:where(:not([data-theme="light"])) .verify.v-weak{color:var(--warn)} }
.verify small{display:block;font-weight:500;font-size:11.5px;opacity:.85}
.groupt{font-size:11px;font-weight:800;letter-spacing:.8px;color:var(--ink-3);margin:14px 0 8px}
.codegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.code{
  border:1px solid var(--border);border-radius:11px;padding:10px 6px;text-align:center;
  background:var(--page);display:flex;flex-direction:column;gap:3px;align-items:center;
}
.code .ico{font-size:20px}
.code .cl{font-size:11.5px;font-weight:650;line-height:1.15}
.code.sel{background:var(--accent);border-color:var(--accent)}
.code.sel .cl{color:#fff}
.code.sel .ico{filter:grayscale(1) brightness(3)}
.locrow{display:flex;gap:7px;flex-wrap:wrap}
.loc{border:1px solid var(--border);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:650;background:var(--page)}
.loc.sel{background:var(--accent);color:#fff;border-color:var(--accent)}
.notefield{
  width:100%;font:inherit;font-size:14px;border:1px solid var(--border);border-radius:11px;
  background:var(--page);color:var(--ink-1);padding:10px 12px;resize:none;min-height:44px;
}
.overridebox{margin-top:10px}
.sheetfoot{display:flex;gap:10px;margin-top:16px}

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:calc(env(safe-area-inset-bottom) + 90px);left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink-1);color:var(--page);padding:11px 18px;border-radius:999px;font-size:13.5px;font-weight:650;
  opacity:0;transition:all .25s;z-index:80;pointer-events:none;white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- supervisor ---------- */
.dash{padding:12px 16px 40px;display:flex;flex-direction:column;gap:14px}
.tilerow{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:760px){.tilerow{grid-template-columns:repeat(4,1fr)}}
.tile{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);padding:13px 15px}
.tile .tv{font-size:26px;font-weight:800;letter-spacing:-.5px;margin-top:2px}
.tile .tl{font-size:11.5px;font-weight:700;letter-spacing:.4px;color:var(--ink-3)}
.tile .ts{font-size:11.5px;color:var(--ink-2);margin-top:2px}
.tile.alert .tv{color:var(--critical)}
.tile.goodv .tv{color:var(--good-text)}
.alertfeed{display:flex;flex-direction:column;gap:8px}
.alertrow{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:11px;background:var(--chip-late);font-size:13px}
.alertrow.warn{background:var(--chip-warn)}
.alertrow .at{font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--ink-2);flex-shrink:0;font-weight:700;margin-top:1px}
.alertrow b{font-weight:750}
.livegrid{display:flex;flex-direction:column;gap:8px}
.liverow{
  display:grid;grid-template-columns:12px 1fr auto;gap:3px 10px;align-items:center;
  padding:10px 12px;border-radius:11px;
  background:var(--page);border:1px solid var(--border);font-size:13px;
}
.liverow .lname{font-weight:700;min-width:0;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.liverow .lstat{color:var(--ink-2);font-size:12.5px;grid-column:2/4}
.liverow .ltime{font-variant-numeric:tabular-nums;font-weight:750;font-size:12.5px}
.liverow.late .ltime{color:var(--critical)} .liverow.due .ltime{color:#a36f00}
:root[data-theme="dark"] .liverow.due .ltime{color:var(--warn)}
@media (prefers-color-scheme: dark){ :root:where(:not([data-theme="light"])) .liverow.due .ltime{color:var(--warn)} }
.statusdot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.liverow.ok .statusdot{background:var(--good)} .liverow.due .statusdot{background:var(--warn)} .liverow.late .statusdot{background:var(--critical)}
table.aud{width:100%;border-collapse:collapse;font-size:12.5px}
table.aud th{font-size:10.5px;letter-spacing:.6px;color:var(--ink-3);text-align:left;padding:7px 8px;border-bottom:1px solid var(--grid);font-weight:800}
table.aud td{padding:8px;border-bottom:1px solid var(--grid);vertical-align:top}
table.aud td.tnum{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:650}
.vtag{font-size:10.5px;font-weight:750;padding:2px 7px;border-radius:6px;display:inline-block}
.vtag.beacon{background:var(--chip-ok);color:var(--good-text)}
.vtag.manual{background:var(--chip-warn);color:#7a5200}
.vtag.late{background:var(--chip-late);color:var(--critical)}
.vtag.na{background:var(--page);border:1px solid var(--border);color:var(--ink-2)}
.vtag.nfc{background:#e0f2f6;color:var(--accent-deep)}
:root[data-theme="dark"] .vtag.nfc{background:#152741;color:#86b6ef}
@media (prefers-color-scheme: dark){ :root:where(:not([data-theme="light"])) .vtag.nfc{background:#152741;color:#86b6ef} }
:root[data-theme="dark"] .vtag.manual{color:var(--warn)}
@media (prefers-color-scheme: dark){ :root:where(:not([data-theme="light"])) .vtag.manual{color:var(--warn)} }
.sechead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sechead h3{font-size:15px;letter-spacing:-.2px;flex:1;min-width:120px}
.linkbtn{font-size:12.5px;font-weight:700;color:var(--accent)}
.stafftab{width:100%;border-collapse:collapse;font-size:13px}
.stafftab td,.stafftab th{padding:8px;border-bottom:1px solid var(--grid);text-align:left}
.stafftab th{font-size:10.5px;letter-spacing:.6px;color:var(--ink-3);font-weight:800}
.stafftab td.num{font-variant-numeric:tabular-nums;text-align:right;font-weight:650}
.meter{height:6px;border-radius:3px;background:var(--grid);overflow:hidden;min-width:70px}
.meter i{display:block;height:100%;border-radius:3px;background:var(--series-1)}
.filterrow{display:flex;gap:8px;flex-wrap:wrap}
.fchip{border:1px solid var(--border);background:var(--surface-1);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:650}
.fchip.sel{background:var(--ink-1);color:var(--page);border-color:var(--ink-1)}

/* forms & staff admin */
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.formgrid .full{grid-column:1/3}
label.flab{font-size:11px;font-weight:800;letter-spacing:.6px;color:var(--ink-3);display:block;margin-bottom:5px}
.input{width:100%;font:inherit;font-size:14px;border:1px solid var(--border);border-radius:10px;background:var(--page);color:var(--ink-1);padding:10px 12px}
select.input{appearance:auto}
.staffadmin{display:flex;flex-direction:column;gap:8px}
.sarow{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;background:var(--page);border:1px solid var(--border);flex-wrap:wrap}
.sarow .who{flex:1;min-width:150px}
.sarow .who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.sarow .who b{font-size:14px;display:block}
.sarow .who span{font-size:12px;color:var(--ink-3)}
.sarow.inactive{opacity:.5}
.rolechip{font-size:10.5px;font-weight:800;letter-spacing:.4px;padding:3px 8px;border-radius:6px;background:var(--chip-ok);color:var(--good-text)}
.rolechip.admin{background:#ece9fb;color:#4a3aa7}
:root[data-theme="dark"] .rolechip.admin{background:#262148;color:#9085e9}
@media (prefers-color-scheme: dark){ :root:where(:not([data-theme="light"])) .rolechip.admin{background:#262148;color:#9085e9} }
.iconbtn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.reptbl{width:100%;border-collapse:collapse;font-size:12.5px}
.reptbl th{font-size:10.5px;letter-spacing:.6px;color:var(--ink-3);text-align:left;padding:7px 8px;border-bottom:1px solid var(--grid);font-weight:800}
.reptbl td{padding:8px;border-bottom:1px solid var(--grid)}
.reptbl td.num{font-variant-numeric:tabular-nums;text-align:right;font-weight:650}

/* timeline view */
.tlwrap{position:relative;overflow-x:auto}
.tlhead{display:flex;align-items:flex-end;gap:8px;margin-bottom:2px}
.tlrow{display:flex;align-items:center;gap:8px;min-height:38px;border-bottom:1px solid var(--grid)}
.tlrow:last-child{border-bottom:none}
.tlname{width:132px;flex-shrink:0;font-size:12.5px;font-weight:750;line-height:1.2;padding:4px 0}
.tlmeta{display:flex;gap:5px;align-items:center;margin-top:2px;flex-wrap:wrap}
.tlmeta .lvl{font-size:9.5px;padding:1px 5px}
.gapb{font-size:10px;font-weight:800;font-variant-numeric:tabular-nums;padding:1px 6px;border-radius:5px;background:var(--chip-ok);color:var(--good-text)}
.gapb.due{background:var(--chip-warn);color:#7a5200}
.gapb.late{background:var(--chip-late);color:var(--critical)}
.bstat{font-size:9.5px;color:var(--ink-3);font-style:italic}
.tltrack{flex:1;position:relative;height:34px;min-width:340px}
.tlhr{position:absolute;top:0;bottom:0;width:1px;background:var(--grid)}
.tlhlab{position:absolute;bottom:0;transform:translateX(-50%);font-size:10px;color:var(--ink-3)}
.tlnow{position:absolute;top:0;bottom:0;width:2px;background:var(--series-1);opacity:.55;border-radius:1px}
.tldot{position:absolute;top:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;cursor:pointer}
.tldot.ok{background:var(--baseline)}
.tldot.noprox{background:var(--surface-1);border:2.5px solid var(--series-1)}
.tldot.late{background:var(--warn)}
.tldot.missed{background:var(--critical);width:12px;height:12px}
.tldot:hover{outline:2px solid var(--ink-1);outline-offset:1px}
.syncbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kipulogo{font-weight:800;font-size:12px;letter-spacing:.4px;background:#0e4c68;color:#fff;border-radius:7px;padding:4px 9px}
.synclog{font-size:12px;color:var(--ink-2);display:flex;flex-direction:column;gap:5px}
.synclog b{font-weight:700}
.crow{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;background:var(--page);border:1px solid var(--border);flex-wrap:wrap}
.crow .who{flex:1;min-width:150px}
.crow .who b{font-size:14px;display:block}
.crow .who span{font-size:11.5px;color:var(--ink-3)}
.bchip{font-size:11px;font-weight:750;padding:4px 9px;border-radius:7px;background:var(--chip-ok);color:var(--good-text)}
.bchip.none{background:var(--page);border:1px dashed var(--baseline);color:var(--ink-3)}
.bchip.ref{background:var(--chip-late);color:var(--critical)}
.assignrow{display:flex;gap:7px;align-items:center;width:100%;margin-top:8px}
.assignrow .input{max-width:170px;padding:8px 10px;font-size:13px}
.photodot{position:absolute;right:-2px;bottom:-2px;width:15px;height:15px;border-radius:50%;background:var(--surface-1);display:flex;align-items:center;justify-content:center;font-size:9px;border:1px solid var(--border)}

/* chart */
.chartwrap{position:relative}
.legend{display:flex;gap:16px;font-size:12px;color:var(--ink-2);margin:2px 0 8px}
.legend .li{display:flex;align-items:center;gap:6px;font-weight:600}
.legend .sw{width:10px;height:10px;border-radius:3px}
.ttip{
  position:absolute;pointer-events:none;background:var(--ink-1);color:var(--page);
  border-radius:9px;padding:7px 10px;font-size:12px;font-weight:600;opacity:0;transition:opacity .12s;
  white-space:nowrap;z-index:5;transform:translate(-50%,-110%);
}
.ttip .tt2{font-weight:500;opacity:.8}
.datatable{display:none}
.datatable.show{display:block}

.viewtabs{display:flex;background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:4px;gap:4px;margin:0 16px}
.viewtabs button{flex:1;padding:8px;border-radius:9px;font-size:13px;font-weight:700;color:var(--ink-3)}
.viewtabs button.sel{background:var(--accent);color:#fff}
.hide{display:none !important}

/* ---------- production additions ---------- */
.loginform{display:flex;flex-direction:column;gap:10px}
.loginform .input{font-size:16px;padding:13px 14px} /* 16px stops iOS zoom-on-focus */
.err{background:var(--chip-late);color:var(--critical);border-radius:10px;padding:10px 13px;font-size:13px;font-weight:650}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:4px}
.pinpad button{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:15px 0;font-size:19px;font-weight:700}
.pinpad button:active{background:var(--accent);color:#fff}
.pindots{display:flex;gap:9px;justify-content:center;margin:10px 0 4px}
.pindots i{width:12px;height:12px;border-radius:50%;background:var(--grid);display:block}
.pindots i.on{background:var(--accent)}
.codegrid.multi .code.sel::after{content:"✓";position:absolute;top:4px;right:6px;font-size:11px;font-weight:800;color:#fff}
/* A code required by another (respiration attestation under Sleeping) — shown
   as locked on, so it is clear it is part of what is being attested to. */
.codegrid.multi .code.sel.locked::after{content:"🔒"}
.code.sel.locked{opacity:.92}
.code{position:relative}
.groupt .hint{font-weight:600;letter-spacing:0;color:var(--ink-3);text-transform:none;font-size:11px}
.queuepill{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--serious)}
.syncing{animation:spin 1s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.scanbox{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;background:var(--page);border:1px dashed var(--baseline);font-size:12.5px;color:var(--ink-2);margin-bottom:10px}
.testbadge{background:var(--chip-warn);color:#7a5200;font-size:10px;font-weight:800;letter-spacing:.5px;padding:2px 7px;border-radius:5px}
.emptystate{text-align:center;padding:40px 20px;color:var(--ink-3)}
.emptystate .big{font-size:34px;margin-bottom:10px}
.emptystate p{font-size:13.5px;line-height:1.5;margin-top:6px}
.daterow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px}
.daterow input{font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--border);border-radius:9px;background:var(--page);color:var(--ink-1)}

/* install-to-home-screen bar */
.installbar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  max-width:480px;margin:0 auto;
  background:var(--ink-1);color:var(--page);
  padding:12px 14px calc(env(safe-area-inset-bottom) + 12px);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12.5px;font-weight:600;line-height:1.4;
  border-radius:14px 14px 0 0;
}
.installbar span{flex:1;min-width:170px}
.installbar .fchip{background:transparent;border-color:rgba(255,255,255,.35);color:var(--page);padding:6px 12px}
.installbar .fchip.sel{background:var(--page);color:var(--ink-1);border-color:var(--page)}

/* ---------- vitals reminder card ----------
   Deliberately NOT styled like the round cards: vitals are a Kipu reminder,
   not part of the rounding record, and the box says so at a glance. */
.vitalscard{border:1.5px solid var(--warn);border-radius:var(--radius);
  background:var(--chip-warn);padding:12px 14px;margin-top:16px}
.vitalscard .vhead{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px;
  letter-spacing:.4px;color:#7a5200;margin-bottom:8px}
:root[data-theme="dark"] .vitalscard .vhead{color:var(--warn)}
@media (prefers-color-scheme: dark){ :root:where(:not([data-theme="light"])) .vitalscard .vhead{color:var(--warn)} }
.vitalscard .sarow{background:var(--surface-1);border:1px solid var(--border);
  border-radius:10px;padding:9px 11px;margin-bottom:6px}

/* =========================================================================
   SLATE GLASS — Bret's pick (option D, 2026-08-06).
   Sleek layer over the day palette: deeper slate page, borderless cards
   floating on soft shadows, frosted top chrome, teal-tinted chips, and a
   subtle glow on the primary action. Appended last so equal-specificity
   rules here win by order. Safety colors are untouched: overdue red and
   on-time green come from the same tokens as before. The dormant dark
   tokens are unaffected.
   ========================================================================= */
:root, :root[data-theme="light"]{
  --page:#dfe6ee;
  --glass-shadow:0 3px 14px rgba(16,28,42,.10);
  --glass-shadow-sm:0 1px 6px rgba(16,28,42,.10);
  --radius:16px;
}
.card,.tile,.staffrow,.clientcard,.demobar,.vitalscard .sarow{
  border-color:transparent;box-shadow:var(--glass-shadow);
}
.iconbtn,.btn.subtle{border-color:transparent;box-shadow:var(--glass-shadow-sm)}
.fchip{border-color:transparent;box-shadow:var(--glass-shadow-sm)}
.lvl{background:#e4f2f5;border-color:transparent;color:#0a5a6b}
.lvl.hot{background:var(--chip-late);color:var(--critical)}

.topbar{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:none;box-shadow:0 1px 0 rgba(16,28,42,.06);
}
.viewtabs{border-color:transparent;box-shadow:var(--glass-shadow-sm)}
.viewtabs button.sel{box-shadow:0 2px 8px rgba(15,139,161,.35)}
.btn{box-shadow:0 2px 8px rgba(15,139,161,.30)}
.btn.ghost,.btn.subtle,.btn.danger{box-shadow:none}
.btn.subtle{box-shadow:var(--glass-shadow-sm)}
.btn.danger{box-shadow:0 2px 8px rgba(208,59,59,.30)}

/* Urgency reads in the shadow as well as the edge stripe and timer. */
.clientcard.late{box-shadow:0 3px 14px rgba(179,52,43,.22)}
.clientcard.due{box-shadow:0 3px 14px rgba(186,117,23,.18)}
.vitalscard{border-color:transparent;box-shadow:0 3px 14px rgba(186,117,23,.18);background:var(--surface-1)}

/* Frosted sheet chrome to match the top bar; scrim slightly deeper so the
   sheet still separates from the busier slate page. */
.sheet{border-color:transparent;box-shadow:0 -6px 24px rgba(16,28,42,.18)}
.sheet-scrim{background:rgba(14,20,32,.5)}