:root{
  --bg:#0f1410; --panel:#16201a; --panel2:#1d2a22; --panel3:#243730;
  --ink:#eaf3ec; --muted:#9bb0a2; --line:#27392e;
  --accent:#5fd08a; --accent2:#7fc4ff; --warn:#ffcf6b; --danger:#ff7a6b; --purple:#b98cff;
  --todo:#7fc4ff; --doing:#ffcf6b; --done:#5fd08a;
  --r:12px; --r-lg:18px;
  --shadow:0 1px 2px rgba(0,0,0,.18),0 5px 16px rgba(0,0,0,.24);
  --shadow-lg:0 14px 38px rgba(0,0,0,.38);
  --ring:0 0 0 3px rgba(95,208,138,.30);
  --grad:linear-gradient(135deg,#5fd08a,#36ad77);
  --hero:radial-gradient(130% 150% at 0% 0%,rgba(95,208,138,.20),transparent 56%),radial-gradient(130% 150% at 100% 0%,rgba(127,196,255,.15),transparent 56%);
}
:root[data-theme="light"]{
  --bg:#eaf0ea; --panel:#ffffff; --panel2:#eef3ec; --panel3:#e3ece2;
  --ink:#16241b; --muted:#5d7064; --line:#d6e1d5;
  --accent:#2f9d63; --accent2:#2f7dc4; --warn:#c98a16; --danger:#d6493a; --purple:#7a52d8;
  --todo:#2f7dc4; --doing:#c98a16; --done:#2f9d63;
  --shadow:0 1px 2px rgba(20,40,27,.07),0 8px 22px rgba(20,40,27,.11);
  --shadow-lg:0 18px 44px rgba(20,40,27,.18);
  --ring:0 0 0 3px rgba(47,157,99,.22);
  --grad:linear-gradient(135deg,#2f9d63,#28b06f);
  --hero:radial-gradient(130% 150% at 0% 0%,rgba(47,157,99,.13),transparent 56%),radial-gradient(130% 150% at 100% 0%,rgba(47,125,196,.10),transparent 56%);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%}
/* soft ambient tint so surfaces read with depth, never flat white */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 55% at 100% 0%,rgba(95,208,138,.12),transparent 60%),
             radial-gradient(60% 50% at 0% 2%,rgba(127,196,255,.08),transparent 55%)}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.hidden{display:none !important}

#app{display:grid;grid-template-columns:230px 1fr;grid-template-rows:1fr;min-height:100vh}

/* ---- nav ---- */
#nav{background:var(--panel);border-right:1px solid var(--line);padding:14px 10px;
  display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:8px;padding:6px 8px 14px;font-size:17px}
.brand i{color:var(--accent);font-style:normal}
.brand small{margin-left:auto;color:var(--muted);font-size:11px;letter-spacing:1px;text-transform:uppercase}
.logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#2f9d63);
  display:grid;place-items:center;font-weight:800;color:#06200f}
#nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  color:var(--muted);font-size:14px;font-weight:500}
#nav a .ico{width:18px;text-align:center;opacity:.9}
#nav a:hover{background:var(--panel2);color:var(--ink)}
#nav a.active{background:var(--panel3);color:var(--ink)}
.navfoot{margin-top:auto;display:flex;align-items:center;gap:8px;padding:10px 12px;
  font-size:12px;color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--accent)}

/* ---- top bar (mobile only) ---- */
#topbar{display:none;align-items:center;gap:12px;padding:12px 14px;
  background:var(--panel);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:30}
#topbar strong{flex:1;font-size:16px}
#topbar button{background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  width:38px;height:38px;border-radius:10px;font-size:18px;cursor:pointer}

/* ---- main ---- */
/* min-width:0 — #view is a grid item, so without it any wide child (a rota
   grid, a diary, a diagram) inflates the whole page sideways on phones and
   defeats every overflow-x:auto wrapper that was meant to scroll instead. */
#view{padding:22px;max-width:1100px;width:100%;min-width:0}
h1.page{font-size:22px;margin:0 0 4px}
.page-sub{color:var(--muted);font-size:13px;margin:0 0 20px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spacer{flex:1}

/* ---- cards / stats ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.stat .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.stat .v{font-size:28px;font-weight:700;margin-top:6px}
.stat .v.good{color:var(--accent)} .stat .v.warn{color:var(--warn)} .stat .v.bad{color:var(--danger)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:16px}
.panel h2{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:0 0 12px}

/* ---- buttons ---- */
.btn{background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:9px 14px;cursor:pointer;font-size:13px;font-weight:600;transition:.15s}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);color:#06200f;border-color:var(--accent)}
.btn.primary:hover{background:#7adda0;color:#06200f}
.btn.ghost{background:none}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:8px}
.btn.danger:hover{border-color:var(--danger);color:var(--danger)}

/* ---- board ---- */
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.col{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px;min-height:120px}
.col h3{font-size:12px;text-transform:uppercase;letter-spacing:.5px;margin:4px 6px 10px;
  display:flex;align-items:center;gap:8px}
.col h3 .count{margin-left:auto;color:var(--muted);font-weight:500}
.tag-todo{color:var(--todo)} .tag-doing{color:var(--doing)} .tag-done{color:var(--done)}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px;margin-bottom:9px}
.card .t{font-size:14px;font-weight:600;line-height:1.3}
.card .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:11px;color:var(--muted)}
.chip{background:var(--panel3);border-radius:20px;padding:2px 9px;font-size:11px;color:var(--ink)}
.chip.zone{color:var(--accent)} .chip.who{color:var(--accent2)}
.chip.pri-high{color:var(--danger)} .chip.pri-med{color:var(--warn)} .chip.pri-low{color:var(--muted)}
.card .acts{display:flex;gap:6px;margin-top:10px}
.card .acts .btn.sm{flex:1}

/* ---- tables ---- */
/* Wraps any table that would otherwise widen the page (see fitTables in
   app.js). The table keeps its natural column widths and scrolls inside
   its panel, instead of scrolling the whole document sideways. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);text-transform:uppercase;font-size:10px;letter-spacing:.5px;font-weight:600}
tr:last-child td{border-bottom:none}
.status{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
.s-ok{background:rgba(95,208,138,.15);color:var(--accent)}
.s-warn{background:rgba(255,207,107,.15);color:var(--warn)}
.s-bad{background:rgba(255,122,107,.15);color:var(--danger)}
.s-info{background:rgba(127,196,255,.15);color:var(--accent2)}

/* rota grid */
.rota{overflow-x:auto}
.rota table{min-width:640px}
.rota td.cell{cursor:pointer}
.rota td.cell:hover{background:var(--panel2)}
.rota .shift{color:var(--accent2);font-weight:600}
.rota .off{color:var(--muted)}

/* docs */
.crumbs{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:14px;flex-wrap:wrap}
.crumbs a{color:var(--accent2)}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.folder,.docitem{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;cursor:pointer;transition:.15s}
.folder:hover,.docitem:hover{border-color:var(--accent)}
.folder .ic,.docitem .ic{font-size:24px}
.folder .nm,.docitem .nm{font-size:14px;font-weight:600;margin-top:8px;word-break:break-word}
.docitem .sub{font-size:11px;color:var(--muted);margin-top:4px}
.empty{color:var(--muted);font-size:13px;padding:30px;text-align:center;
  border:1px dashed var(--line);border-radius:var(--r)}

/* ---- modal ---- */
#modalHost{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;
  align-items:flex-end;justify-content:center;z-index:100;padding:0}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px 16px 0 0;
  width:100%;max-width:520px;max-height:92vh;overflow:auto;padding:18px}
.modal h3{margin:0 0 14px;font-size:17px}
.field{margin-bottom:13px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;background:var(--panel2);
  border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:10px;
  font-family:inherit;font-size:15px}
.field textarea{min-height:74px;resize:vertical}
.modal .actions{display:flex;gap:10px;margin-top:18px}
.modal .actions .btn{flex:1}

@media(min-width:760px){
  #modalHost{align-items:center}
  .modal{border-radius:16px}
}

/* ---- mobile ---- */
@media(max-width:759px){
  #app{grid-template-columns:1fr}
  #nav{position:fixed;left:0;top:0;bottom:0;width:240px;z-index:50;transform:translateX(-100%);
    transition:transform .2s;height:100vh}
  #nav.open{transform:translateX(0)}
  #topbar{display:flex}
  #view{padding:16px}
  .board{grid-template-columns:1fr}
  #navScrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40}
}

/* ---- charts ---- */
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:16px}
.chart{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.chart h3{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 12px}
.bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:12px}
.bar-row .lab{width:84px;color:var(--muted);text-align:right;flex-shrink:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-row .track{flex:1;background:var(--panel2);border-radius:6px;height:16px;overflow:hidden}
.bar-row .fill{height:100%;border-radius:6px;min-width:2px}
.bar-row .val{width:26px;text-align:left;font-weight:600;flex-shrink:0}

/* ---- calendar ---- */
.cal-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cal-head .mname{font-size:16px;font-weight:700;min-width:150px;text-align:center}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .dow{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  text-align:center;padding:4px 0}
.cal .day{background:var(--panel);border:1px solid var(--line);border-radius:8px;
  min-height:78px;padding:5px;cursor:pointer;overflow:hidden}
.cal .day:hover{border-color:var(--accent)}
.cal .day.out{opacity:.4}
.cal .day.today{border-color:var(--accent)}
.cal .day .dn{font-size:11px;color:var(--muted);font-weight:600}
.cal .ev{background:var(--panel3);border-left:3px solid var(--accent);border-radius:4px;
  padding:2px 4px;margin-top:3px;font-size:10px;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .ev.pending{border-left-color:var(--warn)}
.cal .ev.cancelled{border-left-color:var(--danger);opacity:.6;text-decoration:line-through}
@media(max-width:759px){ .cal .day{min-height:58px} .cal .ev{font-size:9px} }

/* ---- photos ---- */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;margin:8px 0}
.photo-grid .ph{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.photo-grid .ph img{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.photo-grid .ph button{position:absolute;top:3px;right:3px;background:rgba(0,0,0,.6);color:#fff;
  border:none;border-radius:50%;width:22px;height:22px;cursor:pointer;font-size:12px}
.thumb-row{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.thumb-row img{width:42px;height:42px;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:pointer}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:200;display:flex;
  align-items:center;justify-content:center;padding:20px}
/* Sign-in / awaiting-approval gate: hide the app completely (any locally
   cached data must not be visible or scrollable behind the overlay). */
body[data-gated="1"] #app,
body[data-gated="1"] #modalHost{display:none !important}
body[data-gated="1"]{overflow:hidden}
body[data-gated="1"] #loginGate,
body[data-gated="1"] #awaitGate{background:var(--bg)}
.lightbox img{max-width:100%;max-height:100%;border-radius:8px}

/* ---- nav unread badge ---- */
.navbadge{margin-left:auto;background:var(--accent);color:#06200f;font-size:11px;font-weight:800;
  min-width:18px;height:18px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}

/* ================= MAIL ================= */
.mail{display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:start}
.mail-side{position:sticky;top:16px}
.mail-folders{display:flex;flex-direction:column;gap:2px}
.mail-folder{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;
  color:var(--muted);font-size:13px;font-weight:600;cursor:pointer}
.mail-folder:hover{background:var(--panel2);color:var(--ink)}
.mail-folder.active{background:var(--panel3);color:var(--ink)}
.mail-folder .mf-ico{width:16px;text-align:center}
.mail-folder .mf-count{margin-left:auto;font-size:11px;color:var(--muted)}
.mail-folder .mf-count b{color:var(--accent)}
.mail-list{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mail-row{display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid var(--line);
  cursor:pointer;font-size:13px}
.mail-row:last-child{border-bottom:none}
.mail-row:hover{background:var(--panel2)}
.mail-row.unread{background:rgba(95,208,138,.05)}
.mail-row.unread .mail-who,.mail-row.unread .mail-subj b{color:var(--ink);font-weight:800}
.mail-star{background:none;border:none;color:var(--warn);font-size:16px;cursor:pointer;padding:0;line-height:1}
.mail-star:not(.on){color:var(--muted)}
.mail-who{width:150px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-weight:600}
.mail-subj{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-subj b{font-weight:600}
.mail-snip{color:var(--muted);font-weight:400}
.mail-date{flex-shrink:0;color:var(--muted);font-size:11px;width:64px;text-align:right}
.mail-thread{max-height:54vh;overflow:auto;margin:-4px 0 4px}
.mail-msg{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px;background:var(--panel2)}
.mm-head{display:flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap}
.mm-addr{color:var(--muted);font-size:11px}
.mm-date{color:var(--muted);font-size:11px}
.mm-to{color:var(--muted);font-size:11px;margin:4px 0 8px}
.mm-body{font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.mail-read .modal,.mail-compose{max-width:620px}
.att-list{display:flex;flex-wrap:wrap;gap:6px}
.att-chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel3);border:1px solid var(--line);
  border-radius:20px;padding:4px 10px;font-size:12px;color:var(--ink);cursor:pointer}
button.att-chip:hover{border-color:var(--accent);color:var(--accent)}
.att-chip button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;padding:0;line-height:1}
.att-chip button:hover{color:var(--danger)}
.mm-atts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.att-pick{display:flex;flex-direction:column;gap:4px;max-height:50vh;overflow:auto}
.att-pick-item{display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;cursor:pointer;text-align:left;color:var(--ink);font-size:13px}
.att-pick-item:hover{border-color:var(--accent)}
.att-pick-item .ai{font-size:16px}
.att-pick-item .an{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-pick-item small{color:var(--muted)}

/* ================= WORKSPACE ================= */
.ws-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.wsfile{position:relative}
.ws-star{position:absolute;top:8px;left:8px;background:none;border:none;color:var(--warn);font-size:15px;cursor:pointer}
.ws-star:not(.on){color:var(--muted)}
.ws-menu{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;line-height:1}
.ws-menu:hover{color:var(--accent)}
.ws-editbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.ws-title{flex:1;min-width:160px;background:transparent;border:1px solid transparent;color:var(--ink);
  font-size:18px;font-weight:700;border-radius:8px;padding:6px 8px}
.ws-title:hover,.ws-title:focus{border-color:var(--line);background:var(--panel2);outline:none}
.ws-saved{font-size:11px;color:var(--muted)}

/* doc editor */
.doc-toolbar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:6px;margin-bottom:12px;position:sticky;top:0;z-index:10}
.doc-toolbar button{background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  min-width:30px;height:30px;border-radius:7px;cursor:pointer;font-size:13px;padding:0 7px}
.doc-toolbar button:hover{border-color:var(--accent);color:var(--accent)}
.doc-toolbar select{background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  height:30px;border-radius:7px;font-size:12px;padding:0 6px;font-family:inherit}
.doc-toolbar .sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.doc-page{background:#fff;color:#16241b;border:1px solid var(--line);border-radius:8px;
  min-height:60vh;max-width:820px;margin:0 auto;padding:48px 56px;font-size:15px;line-height:1.6;
  box-shadow:0 1px 8px rgba(0,0,0,.25)}
.doc-page:focus{outline:none}
.doc-page h1{font-size:26px;margin:.3em 0} .doc-page h2{font-size:21px;margin:.3em 0}
.doc-page h3{font-size:17px;margin:.3em 0} .doc-page a{color:#2f7dc4}
.doc-page p{margin:.4em 0}

/* spreadsheet */
.formula-bar{display:flex;align-items:center;gap:0;margin-bottom:10px;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.formula-bar .fb-ref{background:var(--panel3);color:var(--muted);font-weight:700;font-size:12px;
  padding:8px 12px;min-width:48px;text-align:center;border-right:1px solid var(--line)}
.formula-bar input{flex:1;background:var(--panel2);border:none;color:var(--ink);padding:9px 12px;
  font-size:13px;font-family:ui-monospace,Menlo,Consolas,monospace}
.formula-bar input:focus{outline:none;background:var(--panel)}
.sheet-wrap{overflow:auto;border:1px solid var(--line);border-radius:9px;max-height:72vh}
table.sheet{border-collapse:collapse;font-size:13px;width:auto}
table.sheet th,table.sheet td{border:1px solid var(--line);padding:0}
table.sheet thead th,table.sheet th.rownum,table.sheet th.corner{background:var(--panel3);color:var(--muted);
  font-size:11px;font-weight:700;text-align:center;padding:5px 8px;position:sticky;top:0;z-index:2}
table.sheet th.rownum{position:sticky;left:0;top:auto;z-index:1;min-width:38px}
table.sheet th.corner{position:sticky;left:0;top:0;z-index:3}
table.sheet td{min-width:90px;max-width:240px;height:30px;padding:5px 8px;background:var(--panel);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:cell}
table.sheet td:focus{outline:2px solid var(--accent);outline-offset:-2px;overflow:visible;background:var(--panel2)}
table.sheet td.sel{box-shadow:inset 0 0 0 2px var(--accent2)}

/* calendar event colours + agenda */
.ev.c-green{border-left-color:var(--accent)} .ev.c-blue{border-left-color:var(--accent2)}
.ev.c-amber{border-left-color:var(--warn)} .ev.c-red{border-left-color:var(--danger)}
.ev.c-purple{border-left-color:#b98cff}
.agenda-day{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  font-weight:700;padding:12px 14px 6px}
.agenda-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--line);cursor:pointer}
.agenda-row:hover{background:var(--panel2)}
.agenda-row .adot{width:10px;height:10px;border-radius:50%;flex-shrink:0;background:var(--accent)}
.adot.c-green{background:var(--accent)} .adot.c-blue{background:var(--accent2)}
.adot.c-amber{background:var(--warn)} .adot.c-red{background:var(--danger)} .adot.c-purple{background:#b98cff}
.agenda-row .atime{width:74px;flex-shrink:0;color:var(--muted);font-size:12px;font-weight:600}
.agenda-row .atitle{font-size:14px}

/* contacts */
.contact-card{text-align:center;padding-top:20px}
.contact-card .nm{margin-top:2px}
.contact-card .sub{word-break:break-word}
.contact-av{width:50px;height:50px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#2f9d63);color:#06200f;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin:0 auto 8px;font-size:18px}

/* presentation editor */
.slides-edit{display:grid;grid-template-columns:172px 1fr;gap:14px;align-items:start}
.slide-rail{display:flex;flex-direction:column;gap:8px;max-height:74vh;overflow:auto}
.slide-thumb{display:flex;gap:7px;background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:7px;cursor:pointer}
.slide-thumb:hover{border-color:var(--accent)}
.slide-thumb.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.slide-thumb .st-no{font-size:11px;color:var(--muted);font-weight:700;width:14px;flex-shrink:0}
.slide-thumb .st-prev{flex:1;aspect-ratio:16/9;background:var(--panel2);border-radius:4px;padding:6px;overflow:hidden}
.slide-thumb .st-title{font-size:9px;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slide-thumb .st-body{font-size:7px;color:var(--muted);line-height:1.25;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.slide-canvas{aspect-ratio:16/9;background:#fff;color:#16241b;border:1px solid var(--line);border-radius:10px;
  padding:6%;box-shadow:0 1px 10px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:18px;overflow:auto}
.sc-title{font-size:30px;font-weight:800;line-height:1.2;outline:none}
.sc-body{font-size:19px;line-height:1.5;outline:none;flex:1;white-space:pre-wrap}
.sc-title:empty:before,.sc-body:empty:before{content:attr(data-ph);color:#9aa6a0}
.slide-controls{display:flex;align-items:center;gap:8px;margin-top:12px}
@media(max-width:759px){ .slide-canvas{padding:18px} .sc-title{font-size:22px} .sc-body{font-size:16px} }

/* present mode */
.present-overlay{position:fixed;inset:0;background:#0b0f0c;z-index:300;display:flex;
  flex-direction:column;align-items:center;justify-content:center;padding:4vh 4vw}
.present-slide{background:#fff;color:#16241b;width:100%;max-width:1100px;aspect-ratio:16/9;border-radius:12px;
  padding:6%;overflow:auto;cursor:pointer;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.present-slide h1{font-size:clamp(24px,4vw,46px);margin:0 0 24px}
.present-slide .ps-body{font-size:clamp(16px,2.4vw,26px);line-height:1.55;white-space:pre-wrap}
.present-bar{display:flex;align-items:center;gap:14px;margin-top:18px;color:#cfe;font-size:14px}
.present-bar button{background:rgba(255,255,255,.12);border:none;color:#fff;width:42px;height:42px;
  border-radius:50%;font-size:20px;cursor:pointer}
.present-bar button:hover{background:rgba(255,255,255,.25)}
.present-bar .present-n{min-width:60px;text-align:center}

@media(max-width:759px){
  .mail{grid-template-columns:1fr}
  .mail-side{position:static}
  .mail-folders{flex-direction:row;flex-wrap:wrap;margin-bottom:8px}
  .mail-folder{padding:7px 10px}
  .mail-who{width:96px}
  .mail-snip{display:none}
  .doc-page{padding:24px 18px;max-width:none}
  .slides-edit{grid-template-columns:1fr}
  .slide-rail{flex-direction:row;max-height:none;overflow-x:auto}
  .slide-thumb{min-width:130px}
}

/* ---- roles, audiences & overdue ---- */
body[data-role="staff"] .manager-only{display:none !important}
/* Least-privilege access tiers (server roles). Default (no data-access, e.g.
   local mode) shows everything; staff hide clinical+payroll, clinicians hide payroll. */
body[data-access="general"] .clinical-only,
body[data-access="general"] .payroll-only,
body[data-access="general"] .mgr-access-only,
body[data-access="clinical"] .payroll-only,
body[data-access="clinical"] .mgr-access-only{display:none !important}
/* Audience view lens: guests & community see a slim, welcoming nav. */
body[data-audience="guest"] .team-only,
body[data-audience="community"] .team-only{display:none !important}
.card.overdue{border-left:3px solid var(--danger)}
.chip.overdue{background:rgba(255,122,107,.16);color:var(--danger);font-weight:700}
.rolebar{display:flex;align-items:center;gap:6px}
.rolebar select{background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:4px 6px;font-size:11px;font-family:inherit}

/* =====================================================================
   Aesthetic refinements — ParkSyde Office
   ===================================================================== */

/* view transition */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#view.enter{animation:fadeUp .26s cubic-bezier(.22,.61,.36,1)}

/* typography polish */
h1.page{letter-spacing:-.015em}
.section-h{font-size:12px;text-transform:uppercase;letter-spacing:.9px;color:var(--muted);
  font-weight:700;margin:26px 0 12px}

/* refined interactions */
.stat,.folder,.docitem,.app-tile,.today-card,.chart{
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.stat{box-shadow:var(--shadow)}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line)}
.folder:hover,.docitem:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.panel{box-shadow:var(--shadow)}
.btn{box-shadow:0 1px 1px rgba(0,0,0,.10)}
.btn:active{transform:translateY(1px)}
.btn.primary{box-shadow:0 2px 12px rgba(95,208,138,.30)}
.btn.glass{background:rgba(127,160,140,.12)}
.field input:focus,.field select:focus,.field textarea:focus,#globalSearch:focus{
  outline:none;border-color:var(--accent);box-shadow:var(--ring)}

/* sidebar refinement */
#nav a{position:relative}
#nav a .ico{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;transition:.16s}
#nav a:hover .ico{background:var(--panel3)}
#nav a.active{background:linear-gradient(90deg,var(--panel3),transparent)}
#nav a.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;background:var(--accent)}
#nav a.active .ico{background:var(--accent);color:#06200f}
.logo{box-shadow:0 4px 16px rgba(95,208,138,.42)}
.navbadge{box-shadow:0 2px 8px rgba(95,208,138,.4)}

/* office hero */
.office-hero{position:relative;overflow:hidden;border:1px solid transparent;border-radius:var(--r-lg);
  background-color:#13412a;background-image:radial-gradient(120% 160% at 0% 0%,rgba(95,208,138,.45),transparent 55%),radial-gradient(120% 150% at 100% 10%,rgba(127,196,255,.22),transparent 50%),linear-gradient(135deg,#0f3a25,#1f7a4d 58%,#2f9d63);
  padding:24px 26px;margin-bottom:18px;color:#eafef3;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;box-shadow:0 12px 30px rgba(13,55,35,.32)}
.oh-text{flex:1;min-width:200px}
.oh-title{font-size:28px;font-weight:800;margin:0;letter-spacing:-.02em;line-height:1.08;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.18)}
.oh-sub{color:rgba(255,255,255,.80);font-size:13px;margin:7px 0 0}
.oh-actions{display:flex;gap:8px;flex-wrap:wrap}
.oh-logo{flex:none}
.oh-logo .brandmark{box-shadow:0 10px 26px rgba(0,0,0,.30);outline:3px solid rgba(255,255,255,.16)}
.oh-divic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.16);color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.22)}
.oh-divic .ic{width:30px;height:30px}
.oh-tag{color:#c3f3d6;font-size:12.5px;font-weight:600;margin:8px 0 0;letter-spacing:.01em}

/* employment pathways stage board */
.pathway-board{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:10px;overflow-x:auto;padding-bottom:6px}
.pw-col{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px;min-height:120px}
.pw-col h3{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:2px 6px 9px;display:flex;justify-content:space-between;align-items:center}
.pw-card{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:border-color .15s,transform .15s}
.pw-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.pw-card b{font-size:13px}

/* business comparison table */
table.cmp td.num,table.cmp th.num{text-align:right;white-space:nowrap}
table.cmp td.num.bad{color:var(--danger)}
table.cmp tfoot td{border-top:2px solid var(--line);font-weight:600}
table.cmp a{color:var(--accent)}

/* PIN keypad sign-in */
.pin-gate{display:flex;align-items:center;justify-content:center;padding:20px}
.pin-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:26px 24px;box-shadow:var(--shadow-lg);width:300px;max-width:92vw;text-align:center}
.pin-dots{display:flex;gap:12px;justify-content:center;margin:16px 0 4px;min-height:15px}
.pin-dot{width:13px;height:13px;border-radius:50%;border:2px solid var(--line);transition:.12s}
.pin-dot.on{background:var(--accent);border-color:var(--accent)}
.pin-msg{min-height:18px;font-size:12px;color:var(--danger)}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.pin-key{height:62px;border-radius:15px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-size:23px;font-weight:700;cursor:pointer;transition:.12s}
.pin-key:hover{border-color:var(--accent);color:var(--accent)}
.pin-key:active{transform:scale(.96)}
.pin-key.pin-aux{background:transparent;font-size:19px;color:var(--muted)}
.pin-card.shake{animation:pinshake .3s}
@keyframes pinshake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

/* studio AI output */
.studio-out{line-height:1.6;font-size:14px;margin-top:8px}
.studio-out h2{font-size:16px;margin:14px 0 4px}
.studio-out h3{font-size:14px;margin:12px 0 3px}
.studio-out p{margin:6px 0}
.office-hero .btn.glass{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.24);color:#fff}
.office-hero .btn.glass:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.4);color:#fff}
.office-hero .btn.primary{background:#fff;color:#0c3a24;border-color:#fff}
.office-hero .btn.primary:hover{background:#eafef3;color:#0c3a24}

/* ---- brand mark + sign-in ---- */
.brandmark{display:block;flex:none;border-radius:11px;box-shadow:0 3px 12px rgba(47,157,99,.30)}
img.brandmark{border-radius:0;box-shadow:none;filter:drop-shadow(0 3px 8px rgba(0,0,0,.28))}
.brand .brandmark{box-shadow:0 2px 8px rgba(47,157,99,.26)}
.oh-logo .brandmark{box-shadow:0 8px 22px rgba(47,157,99,.34)}
.brand-lg{font-size:20px;gap:10px}
.brand-lg b{font-size:21px}
.login-card{box-shadow:var(--shadow-lg)}
.login-tag{text-align:center;color:var(--accent);font-weight:600;font-size:13px;margin:2px 0 16px;letter-spacing:.01em}
.login-welcome{margin-bottom:16px}

/* app launcher */
.applaunch{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-bottom:20px}
.app-tile{position:relative;display:flex;align-items:center;gap:12px;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.app-tile:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow-lg)}
.at-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:21px;
  background:linear-gradient(135deg,var(--panel3),var(--panel2));color:var(--accent);flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 7px rgba(20,40,27,.10)}
.at-ic .ic{width:23px;height:23px}
.ic{display:inline-block;vertical-align:middle}
.today-card h3>span{display:inline-flex;align-items:center;gap:7px}
.today-card h3 .ic{width:15px;height:15px;color:var(--accent)}
.at-txt{display:flex;flex-direction:column;min-width:0}
.at-name{font-weight:700;font-size:14px}
.at-sub{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.at-badge{position:absolute;top:9px;right:11px;background:var(--danger);color:#fff;font-size:11px;
  font-weight:800;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px;
  box-shadow:0 2px 8px rgba(255,122,107,.5)}
.applaunch .app-tile:nth-child(1) .at-ic{background:linear-gradient(135deg,rgba(127,196,255,.30),rgba(127,196,255,.12));color:var(--accent2)}
.applaunch .app-tile:nth-child(2) .at-ic{background:linear-gradient(135deg,rgba(255,207,107,.30),rgba(255,207,107,.12));color:var(--warn)}
.applaunch .app-tile:nth-child(3) .at-ic{background:linear-gradient(135deg,rgba(185,140,255,.30),rgba(185,140,255,.12));color:var(--purple)}
.applaunch .app-tile:nth-child(4) .at-ic{background:linear-gradient(135deg,rgba(95,208,138,.32),rgba(95,208,138,.12));color:var(--accent)}
.applaunch .app-tile:nth-child(5) .at-ic{background:linear-gradient(135deg,rgba(127,196,255,.30),rgba(127,196,255,.12));color:var(--accent2)}
.applaunch .app-tile:nth-child(6) .at-ic{background:linear-gradient(135deg,rgba(95,208,138,.32),rgba(95,208,138,.12));color:var(--accent)}

/* today board */
.today-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(264px,1fr));gap:14px;margin-bottom:6px}
.today-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:0 0 6px;box-shadow:var(--shadow);overflow:hidden}
.today-card h3{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;
  text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:0;padding:13px 15px 9px}
.tc-link{color:var(--accent2);font-size:11px;text-transform:none;letter-spacing:0;font-weight:600}
.tc-body{display:flex;flex-direction:column}
.tc-empty{color:var(--muted);font-size:13px;padding:6px 15px 16px}
.mini-row{display:flex;align-items:center;gap:10px;padding:9px 15px;cursor:pointer;
  border-top:1px solid var(--line);transition:background .14s}
.mini-row:hover{background:var(--panel2)}
.mini-main{flex:1;min-width:0;display:flex;flex-direction:column}
.mini-main b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-main small{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-row.unread .mini-main b{font-weight:800;color:var(--ink)}
.mini-time{color:var(--muted);font-size:11px;flex-shrink:0}
.mini-ic{width:28px;height:28px;border-radius:8px;background:var(--panel3);display:grid;
  place-items:center;font-size:14px;flex-shrink:0}
.mini-dot{width:8px;height:8px;border-radius:50%;background:var(--accent2);flex-shrink:0}

@media(max-width:759px){
  .office-hero{padding:18px}
  .oh-title{font-size:22px}
  .applaunch{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .app-tile:hover,.stat:hover,.folder:hover,.docitem:hover{transform:none}
}

/* =====================================================================
   Display density — compact mode (tightens spacing app-wide)
   ===================================================================== */
:root[data-density="compact"] #view{padding:16px}
:root[data-density="compact"] h1.page{font-size:19px}
:root[data-density="compact"] .page-sub{margin-bottom:14px}
:root[data-density="compact"] .stats{gap:8px;margin-bottom:16px}
:root[data-density="compact"] .stat{padding:10px}
:root[data-density="compact"] .stat .v{font-size:22px;margin-top:3px}
:root[data-density="compact"] .panel{padding:11px;margin-bottom:11px}
:root[data-density="compact"] .card{padding:8px;margin-bottom:6px}
:root[data-density="compact"] .card .meta{margin-top:6px}
:root[data-density="compact"] th,
:root[data-density="compact"] td{padding:6px 8px}
:root[data-density="compact"] .btn{padding:7px 11px}
:root[data-density="compact"] .btn.sm{padding:5px 8px}
:root[data-density="compact"] #nav a{padding:7px 10px}
:root[data-density="compact"] .field{margin-bottom:9px}
:root[data-density="compact"] .field input,
:root[data-density="compact"] .field select,
:root[data-density="compact"] .field textarea{padding:8px}
:root[data-density="compact"] .grid-cards{gap:8px}
:root[data-density="compact"] .folder,
:root[data-density="compact"] .docitem{padding:10px}
:root[data-density="compact"] .charts{gap:8px}
:root[data-density="compact"] .chart{padding:10px}
/* office home compact */
:root[data-density="compact"] .office-hero{padding:14px 18px;margin-bottom:12px}
:root[data-density="compact"] .oh-title{font-size:22px}
:root[data-density="compact"] .applaunch{gap:8px;margin-bottom:13px}
:root[data-density="compact"] .app-tile{padding:10px 12px}
:root[data-density="compact"] .at-ic{width:36px;height:36px;font-size:18px;border-radius:10px}
:root[data-density="compact"] .today-grid{gap:10px}
:root[data-density="compact"] .today-card h3{padding:10px 13px 7px}
:root[data-density="compact"] .mini-row{padding:6px 13px}
:root[data-density="compact"] .section-h{margin:16px 0 9px}
/* mail / calendar compact */
:root[data-density="compact"] .mail-row{padding:7px 11px}
:root[data-density="compact"] .mail-folder{padding:7px 9px}
:root[data-density="compact"] .cal .day{min-height:62px}
:root[data-density="compact"] .agenda-row{padding:7px 13px}

/* refined scrollbars + text selection */
*{scrollbar-width:thin;scrollbar-color:var(--panel3) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--panel3);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--line);background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}
::selection{background:rgba(95,208,138,.30)}
.doc-page ::selection,.present-slide ::selection{background:rgba(47,157,99,.28)}

/* =====================================================================
   Command palette (⌘K) + trigger
   ===================================================================== */
.cmdk-trigger{display:flex;align-items:center;gap:8px;width:100%;margin:2px 0 8px;
  background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:10px;
  padding:8px 11px;font-size:13px;cursor:pointer;font-family:inherit;transition:.16s}
.cmdk-trigger:hover{border-color:var(--accent);color:var(--ink)}
.cmdk-trigger kbd{margin-left:auto}
kbd{background:var(--panel3);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;
  padding:1px 6px;font-size:11px;font-family:inherit;color:var(--muted)}

#cmdkHost{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:250;display:flex;
  align-items:flex-start;justify-content:center;padding:12vh 16px 16px;backdrop-filter:blur(3px)}
.cmdk{width:100%;max-width:560px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;
  max-height:70vh;animation:fadeUp .18s ease}
#cmdkInput{background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--ink);
  padding:15px 17px;font-size:16px;font-family:inherit;outline:none}
.cmdk-list{overflow:auto;padding:6px;flex:1}
.cmdk-group{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);
  padding:10px 11px 4px;font-weight:700}
.cmdk-row{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;cursor:pointer}
.cmdk-row.sel{background:var(--panel3)}
.cmdk-ic{width:27px;height:27px;border-radius:7px;background:var(--panel2);display:grid;
  place-items:center;font-size:14px;flex-shrink:0}
.cmdk-row.sel .cmdk-ic{background:var(--accent);color:#06200f}
.cmdk-main{display:flex;flex-direction:column;min-width:0}
.cmdk-main b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-main small{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-empty{color:var(--muted);font-size:13px;padding:18px;text-align:center}
.cmdk-foot{display:flex;gap:14px;padding:9px 13px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
:root[data-density="compact"] .cmdk-row{padding:7px 11px}

/* =====================================================================
   From-the-future ambient + Together (appreciation / mutual aid)
   ===================================================================== */
/* slow, low-opacity aurora behind the home hero */
.office-hero::after{content:"";position:absolute;inset:-55%;z-index:0;pointer-events:none;opacity:.65;
  background:conic-gradient(from 0deg,rgba(95,208,138,.13),rgba(127,196,255,.13),rgba(185,140,255,.12),rgba(255,143,177,.10),rgba(95,208,138,.13));
  filter:blur(48px);animation:aurora 30s linear infinite}
.office-hero>*{position:relative;z-index:1}
@keyframes aurora{to{transform:rotate(1turn)}}

/* shared daily intention */
.intention{display:flex;align-items:center;gap:12px;background:var(--panel);
  background-image:linear-gradient(100deg,rgba(95,208,138,.10),transparent 60%);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:14px;padding:12px 16px;margin-bottom:18px;box-shadow:var(--shadow)}
.intention .int-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#06200f;font-size:15px;
  box-shadow:0 3px 10px rgba(47,157,99,.30)}
.int-text{flex:1;font-size:13px;min-width:0;line-height:1.45}
.int-text small{color:var(--muted)}

/* together tabs */
.t-tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.t-tab{background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:999px;
  padding:8px 15px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:.16s}
.t-tab:hover{color:var(--ink);border-color:var(--accent)}
.t-tab.on{background:var(--accent);color:#06200f;border-color:var(--accent);box-shadow:0 2px 12px rgba(95,208,138,.3)}

/* avatars */
.t-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  font-weight:800;font-size:14px;color:#06200f;background:linear-gradient(135deg,var(--accent),#36ad77)}
.t-av.sm{width:24px;height:24px;font-size:11px}

/* appreciations wall */
.kudo-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:12px}
.kudo{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px 15px 15px 18px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.kudo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--accent),var(--accent2))}
.kudo-top{display:flex;align-items:center;gap:10px}
.kudo-who b{font-size:13px}.kudo-who .arrow{color:var(--muted);margin:0 2px}
.kudo-who small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.kudo-msg{font-size:14px;line-height:1.5}

/* reactions */
.react{display:flex;gap:6px;flex-wrap:wrap}
.react-btn{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:3px 10px;
  font-size:13px;cursor:pointer;color:var(--ink);transition:.14s;font-family:inherit}
.react-btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.react-btn.on{background:rgba(95,208,138,.16);border-color:var(--accent)}
.react-btn span{font-size:11px;color:var(--muted);font-weight:700;margin-left:3px}
.react-btn.on span{color:var(--accent)}

/* help & offers */
.help-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.help-col h3{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:0 0 10px}
.help-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px;
  margin-bottom:10px;box-shadow:var(--shadow)}
.help-card.done{opacity:.55}
.hc-title{font-weight:700;font-size:14px}
.hc-detail{font-size:13px;margin-top:5px;line-height:1.45}
.hc-meta{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);margin-top:9px}
.hc-acts{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap;align-items:center}
@media(max-width:620px){.help-cols{grid-template-columns:1fr}}

/* moments */
.moment-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:12px}
.moment{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.moment-note{font-size:15px;line-height:1.5}
.moment-meta{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted)}

/* compact */
:root[data-density="compact"] .intention{padding:8px 12px;margin-bottom:12px}
:root[data-density="compact"] .kudo,:root[data-density="compact"] .moment,
:root[data-density="compact"] .help-card{padding:11px}
:root[data-density="compact"] .t-tabs{margin-bottom:12px}

/* =====================================================================
   Accessibility & inclusivity — text size, contrast, motion, focus
   ===================================================================== */
/* skip link */
.skip-link{position:fixed;top:-60px;left:12px;z-index:400;background:var(--accent);color:#06200f;
  font-weight:700;padding:10px 16px;border-radius:0 0 10px 10px;transition:top .15s}
.skip-link:focus{top:0;outline:none}
#view:focus{outline:none}

/* visible keyboard focus everywhere */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,[contenteditable]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* text size — proportional zoom (works app-wide without a refactor) */
:root[data-textsize="large"]{zoom:1.10}
:root[data-textsize="xl"]{zoom:1.22}

/* high contrast — firmer borders, brighter ink, stronger separation */
:root[data-contrast="high"]{--muted:#c3d4c8;--line:#4a6354;--ring:0 0 0 3px rgba(95,208,138,.55)}
:root[data-theme="light"][data-contrast="high"]{--muted:#33433a;--line:#5d7064}
:root[data-contrast="high"] .btn,
:root[data-contrast="high"] .stat,
:root[data-contrast="high"] .panel,
:root[data-contrast="high"] .card,
:root[data-contrast="high"] .app-tile,
:root[data-contrast="high"] .today-card,
:root[data-contrast="high"] th,
:root[data-contrast="high"] td{border-color:var(--line)}
:root[data-contrast="high"] .page-sub,
:root[data-contrast="high"] .at-sub,
:root[data-contrast="high"] .mini-main small{color:var(--muted)}
:root[data-contrast="high"] #nav a{color:var(--ink)}

/* explicit reduce-motion (in addition to the OS preference) */
:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after{animation-duration:.001ms !important;
  animation-iteration-count:1 !important;transition-duration:.001ms !important}
:root[data-motion="off"] .office-hero::after{animation:none;opacity:.4}

/* a kind little celebration (confetti) */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:300;overflow:hidden}
.confetti span{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;opacity:.95;
  animation:confetti-fall linear forwards}
@keyframes confetti-fall{
  0%{transform:translateY(-12px) rotate(0);opacity:1}
  100%{transform:translateY(102vh) rotate(620deg);opacity:.9}}

/* ---- Care & consent ---- */
.care-banner{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,rgba(95,208,138,.14),rgba(127,196,255,.10));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:18px}
.care-banner .cb-ic{font-size:26px;color:var(--accent);line-height:1}
.care-banner b{font-size:15px}
.care-banner p{margin:6px 0 0;color:var(--muted);font-size:13.5px;line-height:1.55}
.back-link{display:inline-block;color:var(--muted);font-size:13px;margin-bottom:12px}
.back-link:hover{color:var(--accent)}
.privacy-note{color:var(--muted);font-size:12.5px;margin:0 0 16px}

.care-row{display:flex;align-items:center;gap:12px;background:var(--panel2);border:1px solid var(--line);
  border-radius:12px;padding:13px 15px;margin-bottom:9px}
.care-row:hover{border-color:var(--accent)}
.care-row .cr-title{font-size:15px;font-weight:600}
.care-row .cr-sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.care-row .cr-main{flex:1;min-width:0}
.cr-risk{color:var(--danger);font-weight:700}

.big-btn{font-size:15px;padding:13px 20px;border-radius:12px}
.field-label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600}

/* plain-language box (accessible) */
.plain-box{background:var(--panel2);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:12px;padding:14px 16px;margin-bottom:16px}
.plain-box.big .plain-text{font-size:16px;line-height:1.6}
.plain-box .pb-head{font-size:13px;color:var(--accent);text-transform:uppercase;letter-spacing:.5px}
.plain-text{margin:8px 0 0;font-size:14.5px;line-height:1.55}
.read-btn.on{background:var(--accent);color:#06200f;border-color:var(--accent)}

/* big consent checkboxes */
.consent-points{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.consent-point{display:flex;gap:12px;align-items:flex-start;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;cursor:pointer}
.consent-point:hover{border-color:var(--accent)}
.consent-point input{width:24px;height:24px;flex:0 0 auto;accent-color:var(--accent);margin-top:1px}
.consent-points.big .consent-point span{font-size:15.5px;line-height:1.5}
.help-detail{margin:6px 0 14px;font-size:13px;color:var(--muted)}
.help-detail summary{cursor:pointer;padding:4px 0}

/* signature pad */
.sigpad-wrap{border:1px dashed var(--line);border-radius:12px;padding:6px;background:repeating-linear-gradient(45deg,rgba(127,160,140,.05),rgba(127,160,140,.05) 10px,transparent 10px,transparent 20px)}
.sigpad{display:block;width:100%;height:170px;background:#fff;border-radius:9px;touch-action:none;cursor:crosshair}
.sig-img{display:block;max-width:280px;margin:10px 0 0;background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px}
.consent-given{background:rgba(95,208,138,.12);border:1px solid rgba(95,208,138,.4);border-radius:10px;padding:12px 14px;font-size:14px}
.signed-points{margin:12px 0 0;padding-left:18px;color:var(--muted);font-size:13px}
.signed-points li{margin:3px 0}

/* recording */
.rec-row{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.rec-btn{display:inline-flex;align-items:center;gap:11px;background:var(--panel2);border:1px solid var(--line);
  color:var(--ink);border-radius:999px;padding:12px 22px;font-size:15px;font-weight:600;cursor:pointer}
.rec-btn:hover{border-color:var(--danger)}
.rec-btn[disabled]{opacity:.5;cursor:not-allowed}
.rec-btn .rec-dot{width:14px;height:14px;border-radius:50%;background:var(--danger)}
.rec-btn.on{border-color:var(--danger);color:var(--danger)}
.rec-btn.on .rec-dot{animation:rec-pulse 1.1s ease-in-out infinite}
@keyframes rec-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.rec-live{color:var(--danger);font-weight:600;font-size:13px}
.transcript-live{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  margin-top:10px;max-height:180px;overflow:auto;font-size:14px;line-height:1.55}
.transcript-live .interim{color:var(--muted)}
.transcript-edit{width:100%;min-height:130px;background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:11px 13px;font-size:14px;line-height:1.55;resize:vertical;font-family:inherit}

/* analysis */
.disclaimer{background:rgba(255,207,107,.12);border:1px solid rgba(255,207,107,.4);border-radius:10px;
  padding:11px 13px;font-size:12.5px;line-height:1.5;color:var(--ink);margin:0 0 14px}
.an-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.an-stat{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.an-stat .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.an-stat .vv{font-size:17px;font-weight:700;margin-top:4px}
.risk-flags{background:rgba(255,122,107,.10);border:1px solid rgba(255,122,107,.5);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.rf-head{font-weight:700;color:var(--danger);margin-bottom:8px}
.rf-item{margin:8px 0}
.rf-snip{color:var(--muted);font-size:13px;font-style:italic;margin-top:2px}
.rf-foot{font-size:12px;color:var(--muted);margin-top:10px}
.suggestions{margin-top:14px}
.suggestions h3{font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 6px}
.suggestions ul{margin:0;padding-left:18px}
.suggestions li{margin:4px 0;font-size:14px}

/* Attention nudge — shared across Stock, Incidents, Bookings */
.nudge{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.nudge.bad{border-left-color:var(--danger)}
.nudge.info{border-left-color:var(--accent2)}
.nudge.ok{border-left-color:var(--accent)}
/* flex-wrap: icon + text + actions on one unwrapped row overflowed a
   phone, and .nudge-actions cannot shrink, so the whole page scrolled
   sideways (Stock, Caseload). The actions drop to their own line. */
.nudge-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nudge-ic{font-size:22px;line-height:1}
.nudge-actions{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap}
.nudge-items{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.nudge-chip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:7px 11px;cursor:pointer;text-align:left;color:inherit;font:inherit}
.nudge-chip:hover{border-color:var(--warn)}
.nudge.bad .nudge-chip:hover{border-color:var(--danger)}
.nudge.info .nudge-chip:hover{border-color:var(--accent2)}
.nudge-chip small{color:var(--muted);font-size:11px}

/* Finance — invoice/bill editor */
.modal-wide{max-width:800px;width:calc(100% - 28px)}
.line-table{width:100%;font-size:13px;border-collapse:collapse}
.line-table th{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);text-align:left;padding:0 6px 4px}
.line-table td{padding:3px 6px;vertical-align:middle}
.line-table input,.line-table select{width:100%;padding:6px 8px}
.inv-totals{margin:14px 0;display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.inv-totals>div{display:flex;gap:24px;min-width:240px;justify-content:space-between;color:var(--muted)}
.inv-totals>div b{color:var(--text)}
.inv-totals .tot{border-top:1px solid var(--line);padding-top:5px;margin-top:2px;font-size:15px}
.line-table tfoot td{border-top:1px solid var(--line);padding-top:8px}

/* Appointments / clients / messages */
.grp-row td{background:var(--panel2);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:6px 10px}
.svc-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;background:var(--accent);vertical-align:middle}
.svc-dot.green{background:#39b36a}.svc-dot.blue{background:#3a83d6}.svc-dot.amber{background:#d99a2b}
.msg-log{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.msg-log .ml-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.msg-log .ml-body{white-space:pre-wrap;font-size:13px;color:var(--ink);line-height:1.5}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#1f2937;color:#fff;padding:11px 18px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.3);font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:9999}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* AI receptionist */
.auto-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.auto-row button{white-space:nowrap}
.rec-note{margin:6px 0 0;padding:7px 11px;border-left:3px solid var(--accent);background:var(--panel2);border-radius:0 8px 8px 0}
.rec-chat{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow-y:auto;padding:12px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;margin:6px 0}
.rec-chat.log{max-height:none;background:transparent;border:0;padding:6px 0}
.rec-bubble{max-width:80%;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.rec-bubble.ai{align-self:flex-start;background:var(--panel3);border-bottom-left-radius:4px}
.rec-bubble.caller{align-self:flex-end;background:var(--accent);color:#04150c;border-bottom-right-radius:4px}
.rec-bubble.system{align-self:center;background:transparent;color:var(--muted);font-size:11px;font-style:italic}
.rec-bubble.typing{color:var(--muted);letter-spacing:2px;animation:recpulse 1.1s ease-in-out infinite}
@keyframes recpulse{0%,100%{opacity:.35}50%{opacity:.9}}
.rec-mic{padding:9px 12px;font-size:15px;line-height:1}
.rec-mic.live{background:var(--danger);border-color:var(--danger);color:#fff;animation:recpulse 1s ease-in-out infinite}
.rec-quick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.rec-chip{background:var(--panel3);border:1px solid var(--line);color:var(--ink);border-radius:14px;padding:5px 11px;font-size:12px;cursor:pointer}
.rec-chip:hover{border-color:var(--accent)}
.rec-input input{padding:10px 12px}
details.msg-log summary{cursor:pointer;list-style:none}
details.msg-log summary::-webkit-details-marker{display:none}
/* appointment week view */
.wk{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wk-col{background:var(--panel);border:1px solid var(--line);border-radius:8px;min-height:120px;display:flex;flex-direction:column}
.wk-col.today{border-color:var(--accent)}
.wk-dh{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;padding:6px 8px;border-bottom:1px solid var(--line)}
.wk-dh b{color:var(--ink);font-size:13px}
.wk-body{flex:1;padding:5px;display:flex;flex-direction:column;gap:4px;cursor:pointer}
.wk-appt{background:var(--panel3);border-left:3px solid var(--accent);border-radius:5px;padding:5px 7px;font-size:11px;cursor:pointer}
.wk-appt b{font-weight:700}
.wk-appt-sub{color:var(--muted);font-size:10px;margin-top:1px}
.wk-appt.svc-blue,.cal .ev.svc-blue{border-left-color:var(--accent2)}
.wk-appt.svc-amber,.cal .ev.svc-amber{border-left-color:var(--warn)}
.wk-appt.svc-green,.cal .ev.svc-green{border-left-color:var(--accent)}
@media(max-width:759px){ .wk{grid-template-columns:1fr;gap:4px} .wk-col{min-height:0} }

/* NDIS particulars block */
.particulars{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.pt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 18px}
.pt-row{display:flex;flex-direction:column;gap:2px}
.pt-k{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.pt-v{font-size:14px;font-weight:600}

/* full document reading box (light, readable) */
.doc-read{background:#fff;color:#16241b;border:1px solid var(--line);border-radius:10px;padding:20px 22px;margin-top:12px;line-height:1.6;font-size:14.5px;max-height:420px;overflow:auto}
.doc-read h2{font-size:19px;margin:.2em 0 .4em} .doc-read h3{font-size:15px;margin:1em 0 .3em}
.doc-read ul{margin:.3em 0;padding-left:20px} .doc-read li{margin:3px 0} .doc-read p{margin:.5em 0}

/* ---- Zanda-style diary (hour×day time-grid) -------------------- */
.diary-bar{margin-bottom:12px}
.diary-range{font-size:15px}
.diary-f{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.diary-f select{padding:4px 8px;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:8px}
.seg{display:flex;gap:4px}
.diary-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.diary-grid{display:flex;min-width:max-content}
.diary-gutter{flex:0 0 56px;padding-top:34px;position:sticky;left:0;background:var(--panel);z-index:4}
.diary-hr{box-sizing:border-box;font-size:11px;color:var(--muted);text-align:right;padding:2px 8px 0 0;border-top:1px solid var(--line)}
.diary-col{flex:1 1 150px;min-width:132px;border-left:1px solid var(--line)}
.diary-col.today{background:rgba(95,208,138,.06)}
.diary-dh{height:34px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:3}
.diary-col.today .diary-dh{color:var(--accent)}
.diary-slots{position:relative}
.diary-line{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--line);pointer-events:none}
.diary-now{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--danger);z-index:2;pointer-events:none}
.diary-now::before{content:'';position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--danger)}
.diary-appt{position:absolute;box-sizing:border-box;border-radius:7px;padding:3px 6px;overflow:hidden;cursor:pointer;
  font-size:11px;line-height:1.22;background:var(--panel2);border-left:4px solid var(--accent);box-shadow:var(--shadow);color:var(--ink)}
.diary-appt b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.diary-appt .da-time{color:var(--muted);font-size:10px}
.diary-appt .da-svc{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.diary-appt .da-ic{float:right;font-size:10px;letter-spacing:1px}
.diary-appt.st-s-ok{border-left-color:var(--accent)}
.diary-appt.st-s-info{border-left-color:var(--accent2)}
.diary-appt.st-s-warn{border-left-color:var(--warn)}
.diary-appt.st-s-bad{border-left-color:var(--danger)}
/* Time Finder results */
.tf-list{max-height:60vh;overflow:auto}
.tf-day{margin-bottom:10px}
.tf-dh{font-size:12px;color:var(--muted);margin-bottom:4px}
.tf-slots{display:flex;flex-wrap:wrap;gap:6px}

/* A website enquiry arrives as labelled lines joined by newlines. Without
   this the whole thing collapses into one run-on sentence and the answers
   stop being readable as answers. */
.enq-body{white-space:pre-wrap;word-break:break-word}

/* Available to screen readers, invisible on screen. Used for table captions
   that name a summary table without adding a visible heading. Deliberately
   NOT display:none — that would hide it from assistive tech too. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- Thriving Kids ---------------------------------------------- */
.kv-list{display:flex;flex-direction:column;gap:6px}
.kv-list .kv{font-size:13.5px;line-height:1.55}
.kv-list .kv b{display:inline-block;min-width:150px;color:var(--muted);font-weight:600}
.tk-dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.tk-date{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:12px;padding:14px}
.tk-date .d{font-size:11px;color:var(--accent);font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.tk-date h4{margin:7px 0 5px;font-size:15px}
.tk-date p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.tk-date .cd{margin-top:9px;font-size:11px;color:var(--muted);font-weight:700}
.tk-date.past{border-left-color:var(--line);opacity:.62}
.tk-supports{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
/* ---- How ParkSyde runs (#/how) — the visual-literacy explainer ---- */
/* Diagrams are inline SVG painted with the theme tokens, so they follow
   dark, light and high-contrast for free. Wide figures scroll sideways
   inside their card rather than shrinking labels below readability. */
.howit-fig{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 16px 14px;margin-bottom:20px}
.howit-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.howit-scroll svg{display:block;width:100%;height:auto;min-width:660px}
.howit svg text{font-family:inherit}
.howit svg .tt{font-size:15px;font-weight:650;fill:var(--ink)}
.howit svg .ts{font-size:12px;fill:var(--muted)}
.howit svg .tb{font-size:13px;font-weight:700;fill:var(--bg)}
/* labels that sit on top of arrows get a panel-coloured halo */
.howit svg .tl{font-size:12px;fill:var(--muted);stroke:var(--panel);stroke-width:3.5;paint-order:stroke}
.howit svg .nb{fill:var(--panel2);stroke:var(--line)}
.howit .hi-ic{stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.howit .flowline{stroke:var(--accent);stroke-width:2.5;fill:none}
.howit .hi-node{transition:opacity .25s}
.howit .hi-node.dim{opacity:.28}
.howit .hi-node.sel .nb{stroke:var(--accent);stroke-width:2}
/* “Watch a save travel” — marching dashes; the button that adds this
   class only renders when motion is welcome (motionOK). */
.howit-play .flowline{stroke-dasharray:7 6;animation:hiwdash .8s linear infinite}
@keyframes hiwdash{to{stroke-dashoffset:-26}}
.howit-caption,.howit-cap{color:var(--muted);font-size:13.5px;line-height:1.55;margin:12px 0 0}
.howit-cap b{color:var(--ink)}
.howit-fig .btn{margin-top:12px}
/* step chips under the journey diagram */
.howit-steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.howit-step{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);
  border-radius:999px;padding:6px 14px 6px 7px;cursor:pointer;color:var(--ink);
  font-size:13px;font-weight:600;font-family:inherit}
.howit-step:hover{border-color:var(--accent)}
.howit-step[aria-pressed="true"]{border-color:var(--accent);background:var(--panel3)}
.howit-step .n{width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--bg);
  display:grid;place-items:center;font-size:12.5px;font-weight:700}
/* legend keys */
.howit-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.howit-key{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:9px 12px}
.howit-key b{color:var(--ink)}
.howit-key svg{flex:0 0 auto}
.hk-dots{display:flex;gap:5px;flex:0 0 auto}
.hk-sw{width:11px;height:11px;border-radius:3px;display:inline-block;margin:0 4px 0 6px;vertical-align:-1px}
/* sync-dot literacy strip */
.howit-dots{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px}
.howit-dot{display:flex;gap:10px;align-items:flex-start;background:var(--panel2);border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;font-size:12.5px;color:var(--muted);line-height:1.5}
.howit-dot .dot{margin-top:4px;flex:0 0 auto}
.howit-dot b{display:block;color:var(--ink);font-size:13px}
/* safety-habit cards */
.howit-habits{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:20px}
.howit-habit{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
.howit-habit b{font-size:14px}
.howit-habit p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.55}
.hh-ic{width:40px;height:40px;border-radius:11px;background:var(--panel3);display:grid;place-items:center;margin-bottom:10px}
.hh-ic svg{width:24px;height:24px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.howit-foot{margin:4px 0 8px}
:root[data-density="compact"] .howit-fig{padding:12px 12px 10px;margin-bottom:14px}
:root[data-density="compact"] .howit-habits{gap:8px}
:root[data-density="compact"] .howit-habit{padding:12px}

/* ---------------------------------------------------------------- */
/* ParkSyde One — the single front door                              */
/* ---------------------------------------------------------------- */
/* Built entirely from the tokens at the top of this file, so it follows the
   theme rather than carrying its own palette. Nothing here hardcodes a colour:
   a light-theme switch that leaves one surface dark is the kind of detail that
   makes a system feel unfinished, and this is the page most people will see
   first. */

.one-hero{background:var(--hero);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px;margin:0 0 6px;box-shadow:var(--shadow)}
.one-hero-in{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.one-mark{flex:0 0 auto;display:grid;place-items:center}
.one-hero-text{flex:1 1 240px;min-width:0}
.one-hero-text h1{margin:0;font-size:26px;letter-spacing:-.4px;line-height:1.15}
.one-date{margin:3px 0 0;color:var(--muted);font-size:13px}
.one-hero-state{display:flex;gap:8px;flex-wrap:wrap;flex:0 1 auto}
.one-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;
  font-size:12.5px;font-weight:600;border:1px solid var(--line);background:var(--panel)}
.one-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.one-chip.warn::before{background:var(--warn)}
.one-chip.bad::before{background:var(--danger)}

.one-h{margin:26px 0 12px;font-size:15px;font-weight:700;letter-spacing:.2px;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.one-h-sub{font-size:12.5px;font-weight:400;color:var(--muted);letter-spacing:0}

/* ---- standing orders ---- */
.one-orders{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.one-order{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 17px;box-shadow:var(--shadow);position:relative;overflow:hidden}
/* A hairline of colour by cadence — enough to group them at a glance, not
   enough to shout. Daily first, and warmest. */
.one-order::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--accent)}
.one-order.day::before{background:var(--danger)}
.one-order.week::before{background:var(--warn)}
.one-order.month::before{background:var(--accent2)}
.one-order.quarter::before{background:var(--purple)}
.one-order-top{display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:600}
.one-order h3{margin:9px 0 5px;font-size:15.5px;line-height:1.3;letter-spacing:-.2px}
.one-how{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
.one-why{margin:11px 0 0;border-top:1px solid var(--line);padding-top:10px}
.one-why summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--accent);
  list-style:none;display:flex;align-items:center;gap:6px}
.one-why summary::-webkit-details-marker{display:none}
.one-why summary::before{content:"›";display:inline-block;transition:transform .18s ease;font-size:15px;line-height:1}
.one-why[open] summary::before{transform:rotate(90deg)}
.one-why p{margin:9px 0 0;font-size:13px;line-height:1.6}
.one-src{color:var(--muted);font-size:11.5px}
.one-order-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:13px}
.one-last{color:var(--muted);font-size:11.5px;margin-left:auto}

.one-clear{display:flex;gap:14px;align-items:flex-start;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow)}
.one-clear-ic{width:34px;height:34px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--grad);color:var(--bg);font-weight:800}
.one-clear p{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.55}

/* ---- live signals ---- */
.one-signals{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.one-signal{display:flex;gap:13px;align-items:flex-start;background:var(--panel);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r);padding:13px 15px;transition:transform .16s ease,box-shadow .16s ease}
.one-signal.warn{border-left-color:var(--warn)}
.one-signal.bad{border-left-color:var(--danger)}
.one-signal:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.one-n{font-size:21px;font-weight:800;line-height:1.05;letter-spacing:-.5px;flex:0 0 auto;min-width:26px}
.one-sig-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.one-sig-text b{font-size:13.5px;font-weight:650}
.one-sig-text small{color:var(--muted);font-size:12px;line-height:1.5}

/* ---- every door ---- */
.one-groups{display:grid;gap:16px}
.one-group{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px;box-shadow:var(--shadow)}
.one-group h3{margin:0;font-size:14px;letter-spacing:-.1px}
.one-group-blurb{margin:3px 0 12px;color:var(--muted);font-size:12.5px;line-height:1.5}
.one-tiles{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.one-tile{position:relative;display:flex;flex-direction:column;gap:2px;
  background:var(--panel2);border:1px solid transparent;border-radius:var(--r);
  padding:11px 13px;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.one-tile:hover{background:var(--panel3);border-color:var(--line);transform:translateY(-1px)}
.one-tile:focus-visible{outline:none;box-shadow:var(--ring)}
.one-tile-n{font-size:13.5px;font-weight:650;padding-right:26px}
.one-tile-d{font-size:11.5px;color:var(--muted);line-height:1.45}
.one-tile-b{position:absolute;top:9px;right:10px;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--danger);color:var(--bg);
  font-size:11px;font-weight:700;display:grid;place-items:center}

/* ---- is this system well? ---- */
.one-foot{margin:22px 0 8px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  justify-content:space-between;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--shadow)}
.one-foot.warn{border-color:var(--warn)}
.one-foot p{margin:4px 0 0;color:var(--muted);font-size:12.5px;line-height:1.55;max-width:60ch}

@media (max-width:720px){
  .one-hero{padding:16px 16px;border-radius:var(--r)}
  .one-hero-text h1{font-size:22px}
  .one-hero-state{width:100%}
  .one-orders,.one-signals{grid-template-columns:1fr}
  .one-last{margin-left:0;width:100%}
}
/* Somebody who has asked their device to stop animating has asked for a
   reason. Position and colour still carry every meaning on this page. */
@media (prefers-reduced-motion:reduce){
  .one-signal,.one-tile,.one-why summary::before{transition:none}
  .one-signal:hover,.one-tile:hover{transform:none}
}