/* Cottage Intake: a calm, professional work tool in the Cottage brand.
   Navy (#203060, from the logo) for structure, headings and numbers. Orange (#E58025, from the logo) is the ONE accent:
   primary buttons, the active menu item, progress, and "do these first". Red (#C1372C) only for cutoffs.
   One line-icon set (web/js/icons.js), no gradients, one button system. */
@font-face { font-family:'Plus Jakarta Sans'; src:url('/fonts/PlusJakartaSans.woff2') format('woff2'); font-weight:200 800; font-display:swap; }
:root {
  --navy:#203060; --navy-dk:#16254A; --navy-2:#5B6B9A; --navy-3:#9AA6C4; --navy-tint:#EEF1F7;
  --orange:var(--th-accent); --orange-dk:var(--th-accent2); --orange-tint:var(--th-tint);
  --alert:#C1372C; --alert-tint:#FBECEA;
  --ok:#1B6B3A; --ok-tint:#EAF4EE;
  --ink:#101828; --ink2:#4E5869; --muted:#626C7D; --faint:#8C95A5;
  --line:#E4E8EF; --line2:#EEF1F5; --page:#F7F8FA; --card:#FFFFFF; --hover:#F8F9FB;
  --radius:10px; --btn-h:36px;
  --shadow:0 1px 2px rgba(16,24,40,.04);
  --shadow-hi:0 8px 24px rgba(16,24,40,.10);
  /* charts: fixed series order */
  --s1:#203060; --s2:var(--th-accent); --s3:#7D8BB3; --s4:#C3CAD8;
  /* old names still used in a few places */
  --blue:var(--navy); --blue-ink:var(--navy); --blue-bg:var(--navy-tint); --chip:var(--line2); --side:var(--page);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; height:100%; }
body { font-family:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color:var(--ink); background:var(--page); -webkit-font-smoothing:antialiased; font-size:14px; line-height:1.45; }
a { color:var(--navy); }
button, input, select, textarea { font:inherit; color:inherit; }
.num { font-variant-numeric:tabular-nums; }
svg.ic { flex:none; vertical-align:-3px; }
.sub { color:var(--ink2); font-size:13px; }

/* ---------- shell: navy sidebar + page ---------- */
.shell { display:flex; min-height:100vh; }
.side { flex:0 0 244px; background:var(--navy); color:#D6DCEA; padding:18px 16px; display:flex; flex-direction:column; gap:18px; position:sticky; top:0; height:100vh; overflow-y:auto; }
.side .logo { display:flex; align-items:center; justify-content:space-between; gap:8px; background:#fff; border-radius:var(--radius); padding:10px 10px 10px 12px; }
.side .logo img { height:32px; display:block; min-width:0; }
.side > * { flex-shrink:0; }   /* the sidebar scrolls instead of squeezing its parts */
.side nav { display:flex; flex-direction:column; gap:2px; }
.side nav button { display:flex; align-items:center; gap:12px; text-align:left; background:transparent; border:0; border-radius:8px; padding:9px 12px; color:#C3CBDD; font-weight:500; cursor:pointer; position:relative; }
.side nav button .ic { color:#8E9AB8; }
.side nav button:hover { background:rgba(255,255,255,.06); color:#fff; }
.side nav button:hover .ic { color:#fff; }
.side nav button[aria-pressed=true] { background:rgba(var(--th-accent-rgb), .16); color:#fff; font-weight:600; }
.side nav button[aria-pressed=true]::before { content:''; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:2px; background:var(--orange); }
.side nav button[aria-pressed=true] .ic { color:var(--orange); }
.side nav button:disabled { opacity:.4; cursor:default; }
.side nav .pill { margin-left:auto; background:var(--orange); color:#fff; border-radius:9px; padding:0 7px; font-size:11px; font-weight:700; line-height:18px; }
.navsep { height:1px; background:rgba(255,255,255,.10); margin:8px 4px; }
.side .stats { border-top:1px solid rgba(255,255,255,.10); padding-top:16px; display:flex; flex-direction:column; gap:10px; }
.side .stats .k { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#8E9AB8; font-weight:700; }
.side .stats .big { font-size:36px; font-weight:700; color:#fff; line-height:1.05; }
.side .stats .big.hot { color:var(--orange); }
.side .stats .rows { display:flex; flex-direction:column; gap:5px; font-size:13px; color:#C3CBDD; }
.side .stats .rows div { display:flex; justify-content:space-between; }
.side .stats .rows b { color:#fff; font-weight:600; }
.side .foot { margin-top:auto; border-top:1px solid rgba(255,255,255,.10); padding-top:14px; font-size:12px; color:#8E9AB8; line-height:1.6; }
.side .foot b { color:#fff; font-weight:600; }
.side .me { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; color:#D6DCEA; background:var(--navy-dk); border-radius:8px; padding:8px 10px; }
.side .me button { background:transparent; border:0; color:#8E9AB8; cursor:pointer; padding:4px 6px; border-radius:6px; }
.side .me button:hover { background:rgba(255,255,255,.08); color:#fff; }
/* page column: top bar + content */
.page { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:16px; padding:12px 36px; background:rgba(247,248,250,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.tb-search { flex:1; max-width:520px; display:flex; align-items:center; gap:8px; height:var(--btn-h); padding:0 12px; background:#fff; border:1px solid #D3D9E3; border-radius:8px; color:var(--ink2); }
.tb-search:focus-within { border-color:var(--navy); box-shadow:0 0 0 3px rgba(32,48,96,.12); }
.tb-search input { flex:1; min-width:0; border:0; height:100%; padding:0; background:transparent; box-shadow:none !important; }
.tb-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
main { flex:1; min-width:0; padding:24px 36px 64px; max-width:1240px; width:100%; }

/* AI signal in the sidebar */
.aipulse { display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:600; color:#D6DCEA; background:var(--navy-dk); border-radius:8px; padding:8px 12px; cursor:default; }
.aipulse:empty { display:none; }
.aipulse .dot { width:8px; height:8px; border-radius:50%; background:#6F7B98; flex:none; }
.aipulse.idle .dot { background:#fff; }
.aipulse.running .dot { background:var(--orange); animation:ping 1.4s ease-out infinite; }
.aipulse.off { color:#8E9AB8; }
@keyframes ping { 0% { box-shadow:0 0 0 0 rgba(var(--th-accent-rgb), .7); } 100% { box-shadow:0 0 0 8px rgba(var(--th-accent-rgb), 0); } }

/* ---------- buttons (one system: orange = primary, navy outline = secondary, same height) ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:var(--btn-h); padding:0 14px; font-size:13.5px; font-weight:600; border-radius:8px;
  border:1px solid var(--navy); background:#fff; color:var(--navy); cursor:pointer; white-space:nowrap; text-decoration:none; transition:background .12s, border-color .12s, color .12s; }
.btn:hover { background:var(--navy-tint); }
.btn.primary { background:var(--orange); border-color:var(--orange); color:#fff; }
.btn.primary:hover { background:var(--orange-dk); border-color:var(--orange-dk); }
.btn.quiet { border-color:transparent; color:var(--ink2); background:transparent; } .btn.quiet:hover { background:var(--hover); }
.btn:disabled { opacity:.45; cursor:default; }
.btn:focus-visible, .side nav button:focus-visible, .kpi:focus-visible, .alert:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }
.linkbtn { background:none; border:0; color:var(--navy); font-weight:600; cursor:pointer; font-size:12.5px; padding:0; text-decoration:underline; text-underline-offset:2px; }

/* ---------- inputs ---------- */
select, input[type=date], input[type=text], input:not([type]), input[type=email], input[type=password], input[type=file], input[type=number], textarea {
  font-size:13.5px; height:var(--btn-h); padding:0 10px; border:1px solid #D3D9E3; border-radius:8px; background:#fff; color:var(--ink); }
textarea { width:100%; height:auto; min-height:84px; padding:9px 10px; }
input[type=file] { height:auto; padding:14px; border:1.5px dashed #C6CEDC; background:var(--hover); cursor:pointer; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(32,48,96,.12); }
input[type=checkbox] { accent-color:var(--orange); }
.field { display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--ink2); font-weight:600; } .field > * { font-weight:400; color:var(--ink); }
.rowx { display:flex; gap:10px; } .rowx > * { flex:1; min-width:0; }

/* ---------- page header ---------- */
.head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px; }
.head h1 { font-size:22px; font-weight:700; margin:0; color:var(--navy); letter-spacing:-.01em; }
.head .sub { margin-top:3px; }
.head .sub b { color:var(--navy); }
.head .tools { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.head.hero { padding:20px 22px; }
.head.hero h1 { font-size:24px; }
.progress { height:8px; background:var(--line2); border-radius:999px; overflow:hidden; margin:12px 0 6px; max-width:420px; }
.progress i { display:block; height:100%; border-radius:999px; background:var(--orange); transition:width .6s ease; }

/* ---------- alerts ("do these first") ---------- */
.alerts { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px; margin:0 0 20px; }
.alert { display:flex; align-items:center; gap:10px; text-align:left; border:1px solid var(--line); border-left:3px solid var(--navy-3); border-radius:var(--radius); padding:12px 14px; font-size:13.5px; font-weight:500;
  cursor:pointer; color:var(--ink); background:var(--card); transition:background .12s, box-shadow .12s; }
.alert:hover { box-shadow:var(--shadow-hi); }
.alert b { font-size:18px; font-weight:700; color:var(--navy); }
.alert .ai-icon { display:inline-flex; color:var(--navy); }
.alert.ok-s { background:var(--ok-tint); border-color:#CFE5D7; border-left-color:var(--ok); } .alert.ok-s svg { color:var(--ok); }
.alert.new, .alert.warn { background:var(--orange-tint); border-color:#F6D7B8; border-left-color:var(--orange); }
.alert.new .ai-icon, .alert.warn .ai-icon { color:var(--orange-dk); }
.alert.bad { background:var(--alert-tint); border-color:#F2C8C3; border-left-color:var(--alert); }
.alert.bad .ai-icon, .alert.bad b { color:var(--alert); }
.alert.good { cursor:default; border-left-color:var(--ok); } .alert.good .ic { color:var(--ok); }
.alert.bad:not(button) { cursor:default; margin-bottom:14px; align-items:flex-start; }

/* ---------- sections and task rows ---------- */
.sec { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); font-weight:700; display:flex; gap:8px; align-items:center; margin:24px 0 8px; }
.sec:first-of-type { margin-top:0; }
.sec .ic { color:var(--navy-2); }
.sec .pill { background:var(--navy); color:#fff; border-radius:10px; padding:0 8px; font-size:11px; letter-spacing:0; line-height:18px; }
.sec.accent .pill { background:var(--orange); } .sec.accent .ic { color:var(--orange); }
.sec.calm, .sec.calm .ic { color:var(--ink2); } .sec.calm .pill { background:var(--line); color:var(--ink2); }
.list { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--card); }
.row { display:grid; grid-template-columns:28px minmax(170px,1.15fr) minmax(240px,2fr) minmax(120px,auto) auto; gap:4px 14px; align-items:center; padding:10px 16px; border-bottom:1px solid var(--line2); position:relative; }
.row:last-child { border-bottom:0; }
.row:hover { background:var(--hover); }
.row.calm { opacity:.8; }
.row.done .who, .row.done .do { text-decoration:line-through; color:var(--faint); } .row.done { background:#FBFBFC; }
.row.urgent { box-shadow:inset 3px 0 0 var(--alert); }
.row.flash { animation:flash 1.6s ease; }
@keyframes flash { 0%,100% { background:inherit; } 20%,60% { background:var(--orange-tint); } }
.tick { width:18px; height:18px; accent-color:var(--orange); cursor:pointer; margin:0; }
.row .n { font-size:12px; color:var(--faint); font-weight:600; }
.row .who { font-weight:600; font-size:14px; color:var(--navy); }
.row .meta { font-size:12px; color:var(--ink2); margin-top:2px; line-height:1.6; }
.row .do { font-size:13.5px; line-height:1.45; } .row .do b { font-weight:600; }
.row .ph { display:flex; flex-direction:column; gap:2px; }
a.tel { display:inline-flex; align-items:center; gap:5px; color:var(--navy); font-weight:600; font-size:13px; white-space:nowrap; text-decoration:none; }
a.tel .ic { color:var(--navy-2); } a.tel:hover { text-decoration:underline; }
.row details { grid-column:2 / -1; }
.row summary { cursor:pointer; color:var(--ink2); font-size:12px; width:max-content; }
.row .lastnote { color:var(--ink); font-size:13px; line-height:1.5; margin-top:6px; white-space:pre-wrap; background:var(--page); border-left:3px solid var(--line); border-radius:6px; padding:9px 12px; }
.rid { display:inline-block; font-size:11px; font-weight:700; color:var(--navy); background:var(--navy-tint); border-radius:999px; padding:1px 8px; margin-right:6px; letter-spacing:.02em; }
.aisug { display:flex; gap:6px; align-items:flex-start; flex-wrap:wrap; margin-top:6px; padding:6px 9px; border-radius:8px; background:var(--navy-tint); color:var(--navy); font-size:13px; }
.aisug .ic { margin-top:1px; color:var(--orange); }
.fixrow { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:8px; font-size:12px; color:var(--ink2); }
.fixrow select { font-size:12px; height:30px; padding:0 8px; }
.note-foot { color:var(--muted); font-size:12px; margin-top:16px; }
.empty { padding:28px; text-align:center; color:var(--ink2); background:var(--card); border:1px dashed #D3D9E3; border-radius:var(--radius); }
.empty.big { font-size:15px; padding:44px; }

/* tags: quiet chips; red only for cutoffs */
.tag { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; margin:1px 4px 1px 0; white-space:nowrap; background:var(--line2); color:var(--ink2); }
.t-cut { background:var(--alert-tint); color:var(--alert); }
.t-ai, .t-cad, .t-lang, .t-code, .t-review { background:var(--navy-tint); color:var(--navy); }
.t-wait, .t-close, .t-follow { background:var(--line2); color:var(--ink2); }
.t-conf { background:var(--orange-tint); color:var(--orange-dk); }
.tag.t-ok { background:var(--ok-tint); color:var(--ok); }
.tag.t-next { background:var(--ok-tint); color:var(--ok); border:1px dashed var(--ok); }
.t-opwdd { background:var(--navy-tint); color:var(--navy); }
.tag.c95 { background:var(--orange-tint); color:var(--orange-dk); }
/* OPWDD steps on a case */
.opwdd-steps { list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0 0 10px; }
.opwdd-steps li { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); background:var(--line2); border-radius:999px; padding:3px 10px 3px 3px; }
.opwdd-steps li span { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-weight:700; background:var(--card); color:var(--ink2); font-size:11px; }
.opwdd-steps li.done { color:var(--ok); background:var(--ok-tint); } .opwdd-steps li.done span { background:var(--ok); color:#fff; }
.opwdd-steps li.now { color:var(--navy); background:var(--navy-tint); font-weight:700; } .opwdd-steps li.now span { background:var(--navy); color:#fff; }
.opwdd-steps li.missed { color:var(--alert); background:var(--card); outline:1px dashed var(--alert); } .opwdd-steps li.missed span { border:1px dashed var(--alert); color:var(--alert); }
.opwdd-todo { margin:6px 0 8px 18px; padding:0; } .opwdd-todo li { margin:2px 0; }
.intro-list { list-style:none; margin:0; padding:0; } .intro-list li { display:flex; gap:8px; align-items:flex-start; padding:3px 0; font-size:13px; }
.intro-list li.done { color:var(--muted); } .intro-list li.done svg { color:var(--ok); flex:none; margin-top:2px; }
.intro-list .box-o { width:12px; height:12px; border:1.5px solid var(--navy-3); border-radius:3px; flex:none; margin-top:3px; }
.next.opwdd select { height:32px; padding:0 8px; font-size:13px; }

/* ---------- cards, panels, tables ---------- */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:20px; }
.card { border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; background:var(--card); }
.card .n { font-size:28px; font-weight:700; color:var(--navy); line-height:1.1; font-variant-numeric:tabular-nums; } .card .n.hot { color:var(--alert); }
.card .l { font-size:12px; color:var(--ink2); font-weight:600; margin-top:4px; }
.panel { border:1px solid var(--line); border-radius:var(--radius); overflow:auto; background:var(--card); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; background:var(--page); color:var(--ink2); font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; padding:10px 14px; border-bottom:1px solid var(--line); }
td { padding:10px 14px; border-top:1px solid var(--line2); vertical-align:top; } tr:first-child td { border-top:0; }
tr:hover td { background:var(--hover); }
tr.hot td { background:var(--orange-tint); }
td .sub { color:var(--ink2); font-size:11.5px; margin-top:3px; }
.aibar { border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px; font-size:13px; margin-bottom:14px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:var(--card); }
.aibar .ic { color:var(--navy-2); }
code { font-size:12px; background:var(--line2); padding:1px 5px; border-radius:4px; }

/* ---------- sign-in ---------- */
.login-wrap { min-height:100vh; display:grid; place-items:center; background:var(--navy); padding:24px 16px; }
.login { width:min(400px,100%); background:#fff; border-radius:14px; padding:32px; display:flex; flex-direction:column; gap:14px; box-shadow:0 20px 50px rgba(0,0,0,.25); }
.login img { height:40px; align-self:flex-start; }
.login h1 { font-size:22px; margin:8px 0 0; color:var(--navy); } .login p { margin:0; color:var(--ink2); font-size:13.5px; line-height:1.5; }
.login select, .login input { width:100%; }
.login .btn.primary { height:40px; font-size:14px; }
.login .sub a { color:var(--navy); font-weight:600; }
#gbtn { display:flex; justify-content:center; }
.login .err { color:var(--alert); font-size:13px; min-height:1em; }
.privacy { color:var(--muted); font-size:11.5px; }

/* ---------- drawers (Log result, referral detail) ---------- */
.sheet { position:fixed; inset:0; background:rgba(22,37,74,.42); display:flex; justify-content:flex-end; z-index:10; }
.sheet .box { background:#fff; width:min(460px,100%); height:100%; padding:24px; overflow:auto; display:flex; flex-direction:column; gap:12px; box-shadow:-10px 0 40px rgba(0,0,0,.18); }
.sheet .box.wide { width:min(660px,100%); }
.sheet h3 { margin:0; font-size:18px; color:var(--navy); } .sheet .sub { color:var(--ink2); font-size:13px; }
.choices { display:flex; flex-direction:column; gap:6px; }
.choices button { text-align:left; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; font-weight:500; }
.choices button:hover { background:var(--hover); }
.choices button[aria-pressed=true] { border-color:var(--navy); background:var(--navy-tint); color:var(--navy); font-weight:600; box-shadow:inset 3px 0 0 var(--orange); }
.sheet .actions { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:auto; padding-top:12px; }
.kv { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; }
.kv div { display:flex; flex-direction:column; gap:2px; font-size:12px; color:var(--ink2); font-weight:600; } .kv b { font-weight:500; color:var(--ink); font-size:13.5px; }
.kv a { margin-right:8px; }
.next { border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; display:flex; flex-direction:column; gap:6px; font-size:13.5px; background:var(--card); }
.histlist { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--card); }
.hist { padding:10px 14px; border-bottom:1px solid var(--line2); } .hist:last-child { border-bottom:0; }
.hist-meta { font-size:12px; color:var(--ink2); margin-bottom:3px; } .hist-text { font-size:13px; line-height:1.5; white-space:pre-wrap; color:var(--ink); }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--navy); color:#fff; padding:10px 18px; border-radius:8px; font-size:13px; z-index:60; box-shadow:var(--shadow-hi); max-width:calc(100vw - 32px); }

/* Log result: HHA */
.counter { font-size:12px; color:var(--ink2); min-height:14px; margin:-4px 0 6px; } .counter.over { color:var(--alert); font-weight:600; }
label.check { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:flex-start; font-size:14px; margin:4px 0 8px; } label.check .sub { display:block; flex-basis:100%; margin-left:24px; }
.hha-box { margin:12px 0 4px; padding:12px 14px; border-radius:var(--radius); background:var(--page); border:1px solid var(--line); font-size:14px; line-height:1.5; }
.hha-box.busy { background:var(--navy-tint); border-color:#D9DFEC; color:var(--navy); }
.hha-box.ok { background:var(--ok-tint); border-color:#CFE5D7; color:var(--ok); font-weight:600; display:flex; gap:8px; align-items:center; }
.hha-box.warn { background:var(--orange-tint); border-color:#F6D7B8; color:#7A4300; }
.hha-box.bad { background:var(--alert-tint); border-color:#F2C8C3; color:var(--alert); }
.bookmarklet { cursor:grab; margin-left:6px; } ol.steps { margin:10px 0 0 18px; padding:0; line-height:1.8; font-size:14px; }
.ic.ok { color:var(--ok); } .ic.bad { color:var(--alert); }

/* ---------- the bell ---------- */
.bell { position:relative; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; background:none; border:0; color:var(--navy); cursor:pointer; border-radius:8px; flex:none; }
.bell:hover { background:var(--navy-tint); }
.bell .badge { position:absolute; top:1px; right:0; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--orange); color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center; }
.bellpanel { position:fixed; top:60px; right:16px; width:min(380px, calc(100vw - 32px)); max-height:70vh; overflow:auto; z-index:50; background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 48px rgba(16,24,40,.18); }
.bp-head { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); color:var(--navy); }
.bp-item { display:flex; gap:10px; width:100%; text-align:left; white-space:normal; align-items:flex-start; background:none; border:0; border-bottom:1px solid var(--line2); padding:10px 14px; cursor:pointer; font:inherit; color:inherit; }
.bp-item:hover { background:var(--hover); } .bp-item.unread { background:var(--orange-tint); } .bp-item .sub { display:block; font-size:12.5px; }
.bp-ic { flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:var(--navy-tint); color:var(--navy); }
.bp-ic.k-new_cases { background:var(--th-tint); color:var(--orange-dk); } .bp-ic.k-alert { background:var(--alert-tint); color:var(--alert); } .bp-ic.k-reminder { background:var(--th-tint); color:var(--th-accent2); } .bp-ic.k-hha { background:var(--ok-tint); color:var(--ok); }
.bp-item > span:last-child { flex:1; min-width:0; overflow-wrap:anywhere; }
.bp-foot { display:flex; gap:8px; padding:10px 14px; font-size:13px; color:var(--ink2); }

/* ---------- Overview ---------- */
main { animation:pageIn .25s ease both; }
@keyframes pageIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.ov-loading { display:flex; align-items:center; gap:12px; color:var(--ink2); padding:60px; justify-content:center; }
.spinner { width:20px; height:20px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--orange); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.ov-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:18px; padding:22px 24px; border-radius:12px; color:#fff; background:var(--navy); }
.ov-head h1 { margin:4px 0 4px; font-size:24px; font-weight:700; letter-spacing:-.01em; }
.ov-head .sub { color:#C3CBDD; }
.ov-eyebrow { font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--th-peach); font-weight:700; }
.ov-head .tools { display:flex; gap:8px; flex-wrap:wrap; }
.ov-head select { background:#fff; color:var(--ink); border:0; }
.ov-head .btn { background:transparent; color:#fff; border-color:rgba(255,255,255,.45); } .ov-head .btn:hover { background:rgba(255,255,255,.1); }

.kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.kpi { text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; cursor:pointer; transition:border-color .12s, box-shadow .12s; font:inherit; color:inherit; }
.kpi:hover { border-color:#CBD3E1; box-shadow:var(--shadow-hi); }
.kpi-top { display:flex; align-items:center; gap:8px; color:var(--navy); }
.kpi-icon { display:inline-flex; color:var(--navy); }
.kpi-label { font-size:12px; font-weight:700; color:var(--ink2); text-transform:uppercase; letter-spacing:.05em; }
.kpi-n { font-size:30px; font-weight:700; color:var(--navy); margin:8px 0 2px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.kpi-sub { font-size:12.5px; color:var(--ink2); }
.kpi.urgent { border-color:#F2C8C3; box-shadow:inset 0 3px 0 var(--alert); }
.kpi.urgent .kpi-n, .kpi.urgent .kpi-icon { color:var(--alert); }

.ov-row { display:grid; gap:12px; margin-bottom:12px; } .ov-row.three { grid-template-columns:1fr 1fr 1fr; } .ov-row.two { grid-template-columns:1.2fr 1fr; }
.ov-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:12px; }
.ov-row .ov-card { margin-bottom:0; }
.ov-title { font-weight:700; color:var(--navy); font-size:14px; margin-bottom:12px; } .ov-title .sub { font-weight:500; font-size:12.5px; }
.ov-title.between { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.sub.center { text-align:center; }
.ring-card { display:flex; flex-direction:column; align-items:center; }
.ring-wrap { position:relative; width:140px; height:140px; margin:2px 0 10px; }
.ring { width:140px; height:140px; transform:rotate(-90deg); }
.ring-bg { fill:none; stroke:var(--line2); stroke-width:12; }
.ring-fg { fill:none; stroke:var(--orange); stroke-width:12; stroke-linecap:round; transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1); }
.ring-center { position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.ring-n { font-size:28px; font-weight:700; color:var(--navy); } .ring-l { font-size:12px; color:var(--ink2); font-weight:600; }
.cutoff { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-radius:8px; background:var(--page); border:1px solid var(--line2); margin-bottom:10px; }
.cutoff b { color:var(--navy); font-size:15px; } .cutoff .cd { text-align:right; } .cutoff .cd span { font-size:26px; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; }
.cutoff .cd small { display:block; font-size:11px; color:var(--ink2); font-weight:600; }
.cutoff.soon { background:var(--alert-tint); border-color:#F2C8C3; } .cutoff.soon .cd span { color:var(--alert); }
.ai-card { cursor:pointer; } .ai-mini { display:flex; gap:14px; align-items:center; }

/* status dot (AI) */
.orb { width:44px; height:44px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--navy-tint); }
.orb span { width:12px; height:12px; border-radius:50%; background:var(--navy-3); }
.orb.sm { width:40px; height:40px; } .orb.sm span { width:11px; height:11px; }
.running .orb span, .orb.running span { background:var(--orange); animation:ping 1.4s ease-out infinite; }
.idle .orb span { background:var(--navy); }

/* charts */
.cols { display:flex; align-items:flex-end; gap:6px; height:180px; padding:6px 0 0; border-bottom:1px solid var(--line); margin-bottom:8px; }
.col { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; cursor:default; position:relative; }
.col-bar { width:70%; max-width:26px; height:0; background:var(--s1); border-radius:3px 3px 0 0; transition:height .8s cubic-bezier(.2,.8,.2,1); }
.ov-in .col-bar { height:var(--h); }
.col.partial .col-bar { background:repeating-linear-gradient(135deg,var(--s1) 0 4px,var(--s3) 4px 7px); }
.col:hover .col-bar { background:var(--orange); }
.col-x { position:absolute; bottom:-20px; font-size:10px; color:var(--ink2); white-space:nowrap; transform:rotate(-30deg); transform-origin:top center; display:none; }
.col:nth-child(3n+1) .col-x { display:block; }
.cols + .sub { margin-top:26px; }
.hbars { display:flex; flex-direction:column; gap:10px; }
.hbar { display:grid; grid-template-columns:minmax(110px,170px) 1fr 52px; gap:10px; align-items:center; font-size:13px; cursor:default; }
.hb-l { color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hb-track { height:12px; background:var(--line2); border-radius:3px; overflow:hidden; }
.hb-track i { display:block; height:100%; width:0; background:var(--s1); border-radius:0 3px 3px 0; transition:width .9s cubic-bezier(.2,.8,.2,1); }
.ov-in .hb-track i { width:var(--w); }
.hbar b { text-align:right; color:var(--ink); font-variant-numeric:tabular-nums; }
.hbar.other .hb-track i { background:var(--s4); }
.legend { display:flex; gap:14px; align-items:center; font-size:12px; color:var(--ink2); font-weight:600; flex-wrap:wrap; }
.legend span { display:inline-flex; align-items:center; gap:6px; } .legend i { width:12px; height:12px; border-radius:3px; display:inline-block; }
.stack { display:flex; flex-direction:column; gap:10px; }
.st-row { display:grid; grid-template-columns:minmax(110px,170px) 1fr 52px 56px; gap:10px; align-items:center; font-size:13px; }
.st-l { color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.st-track { display:flex; gap:2px; height:14px; width:0; transition:width .9s cubic-bezier(.2,.8,.2,1); }
.ov-in .st-track { width:var(--w); }
.st-track i { height:100%; min-width:3px; } .st-track i:first-child { border-radius:3px 0 0 3px; } .st-track i:last-child { border-radius:0 3px 3px 0; } .st-track i:only-child { border-radius:3px; }
.st-row b { text-align:right; font-variant-numeric:tabular-nums; } .st-done { display:inline-flex; align-items:center; gap:3px; font-size:12px; color:var(--ink2); }
.feed { display:flex; flex-direction:column; }
.feed-i { display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; padding:9px 2px; border-bottom:1px solid var(--line2); font-size:13px; }
.feed-i:last-child { border-bottom:0; }
.feed-ic { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:var(--navy-tint); color:var(--navy); }
.feed-t { color:var(--ink2); font-size:12px; white-space:nowrap; }
.viz-tip { position:fixed; z-index:50; pointer-events:none; opacity:0; background:var(--navy); color:#fff; padding:8px 11px; border-radius:8px; font-size:12.5px; line-height:1.45; box-shadow:var(--shadow-hi); transition:opacity .12s; max-width:260px; }

/* ---------- AI page ---------- */
.aihero { display:flex; gap:18px; align-items:center; background:var(--navy); color:#fff; border-radius:12px; padding:20px 22px; margin-bottom:18px; }
.aihero .sub { color:#C3CBDD; margin-top:4px; } .aihero .bad { color:#FFB4A8; }
.aihero .orb { background:rgba(255,255,255,.12); } .aihero .orb span { background:#fff; } .aihero.running .orb span { background:var(--orange); } .aihero.off .orb span { background:#6F7B98; }
.aistate { font-size:19px; font-weight:700; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.bars { padding:14px 16px; display:flex; flex-direction:column; gap:9px; }
.bar { display:grid; grid-template-columns:150px 1fr 48px; align-items:center; gap:10px; font-size:13px; }
.bar i { height:10px; border-radius:3px; background:var(--s1); }
.bar b { text-align:right; font-variant-numeric:tabular-nums; }
.bar.conf.c0 i { background:var(--s4); } .bar.conf.c05 i { background:var(--navy-3); } .bar.conf.c07 i { background:var(--navy-2); } .bar.conf.c085 i { background:var(--navy); }
.meter { width:70px; height:8px; background:var(--line2); border-radius:999px; overflow:hidden; } .meter i { display:block; height:100%; } .meter i.ok { background:var(--navy); } .meter i.meh { background:var(--navy-3); }

/* ---------- phones and small screens (16 px gutter, nothing wider than the screen) ---------- */
@media (max-width:1100px) { .ov-row.three { grid-template-columns:1fr 1fr; } .ov-row.two { grid-template-columns:1fr; } }
@media (max-width:980px) { .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:860px) {
  .shell { flex-direction:column; }
  .side { position:static; height:auto; flex:none; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 16px; overflow:visible; }
  .side .logo { flex:1 1 auto; }
  .side .stats, .side .foot { display:none; }
  .side nav { flex-direction:row; flex-wrap:nowrap; overflow-x:auto; width:100%; order:3; }
  .side nav button { white-space:nowrap; }
  .side nav button[aria-pressed=true]::before { left:8px; right:8px; top:auto; bottom:2px; width:auto; height:3px; }
  .navsep { width:1px; height:auto; margin:4px; }
  .side .me { order:4; width:100%; }
  .aipulse { order:2; }
  main { padding:16px; }
  .head { padding:16px; }
  .row { grid-template-columns:28px 1fr; } .row > :nth-child(n+3) { grid-column:2; } .row details { grid-column:2; }
  .split { grid-template-columns:1fr; } .bar { grid-template-columns:110px 1fr 40px; }
  .topbar { padding:10px 16px; gap:10px; } .tb-right .btn span { display:none; } .bellpanel { top:56px; }
}
@media (max-width:700px) { .ov-row.three { grid-template-columns:1fr; } .st-row { grid-template-columns:90px 1fr 40px; } .st-done { display:none; } .hbar { grid-template-columns:90px 1fr 44px; } .rowx { flex-direction:column; } }
@media (max-width:520px) { .kpis { grid-template-columns:1fr; } .alerts { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* tabs, status chips, sort (My day, Referrals, Scheduled) */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:4px 0 12px; overflow-x:auto; }
.tabs button { display:inline-flex; align-items:center; gap:8px; background:none; border:0; border-bottom:2px solid transparent; padding:10px 12px; margin-bottom:-1px; font-weight:600; color:var(--ink2); cursor:pointer; white-space:nowrap; }
.tabs button:hover { color:var(--navy); }
.tabs button[aria-selected=true] { color:var(--navy); border-bottom-color:var(--orange); }
.tab-n { background:var(--line2); color:var(--ink2); border-radius:10px; padding:0 7px; font-size:11.5px; line-height:18px; font-weight:700; }
.tabs button[aria-selected=true] .tab-n { background:var(--navy); color:#fff; }
.filterbar { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; flex:1; min-width:0; }
.chips-l { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--ink2); text-transform:uppercase; letter-spacing:.05em; margin-right:4px; }
.chip { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); font-size:12.5px; font-weight:500; cursor:pointer; }
.chip:hover { border-color:#C6CEDC; }
.chip[aria-pressed=true] { background:var(--navy); border-color:var(--navy); color:#fff; }
.chip-n { font-size:11px; font-weight:700; color:var(--ink2); } .chip[aria-pressed=true] .chip-n { color:#C3CBDD; }
.sortsel { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--ink2); text-transform:uppercase; letter-spacing:.05em; }
.sortsel select { text-transform:none; letter-spacing:0; font-weight:500; }
/* "N new cases assigned to you" */
.banner { display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:var(--orange); color:#fff; border:0; border-radius:var(--radius); padding:14px 18px; margin:0 0 14px; cursor:pointer; font:inherit; }
.banner b { font-size:16px; display:block; } .banner .sub { color:var(--th-tint); }
.banner:hover { background:var(--orange-dk); }
.banner-go { margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-weight:700; white-space:nowrap; }

/* Review AI */
.rvstat { padding:12px 16px; margin-bottom:14px; font-size:15px; }
.rvlist { display:grid; gap:10px; }
.rv { padding:14px 16px; border-left:4px solid var(--line); }
.rv.rv-ok { border-left-color:var(--navy); } .rv.rv-bad { border-left-color:var(--orange); }
.rv-h { margin-bottom:6px; } .rv-t { color:var(--ink); white-space:pre-wrap; margin-bottom:8px; line-height:1.45; }
.rv-a { margin-bottom:10px; }
.rv-b { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.rv-b .btn[aria-pressed="true"] { background:var(--navy); color:#fff; border-color:var(--navy); }
.rv-b select { height:36px; border:1px solid var(--line); border-radius:8px; padding:0 8px; font:inherit; max-width:100%; }

/* Help (coordinator guide) */
.guide { padding:22px 28px; max-width:860px; line-height:1.55; }
.guide h1 { font-size:22px; color:var(--navy); margin:0 0 14px; }
.guide h2 { font-size:16px; color:var(--navy); margin:22px 0 8px; padding-top:14px; border-top:1px solid var(--line); }
.guide ul, .guide ol { margin:0 0 8px; padding-left:22px; } .guide li { margin:4px 0; } .guide p { margin:6px 0; }

/* My day sections: Overdue (red), due dates, the newest note line */
.sec.late, .sec.late .ic { color:var(--alert); } .sec.late .pill { background:var(--alert); }
.row.late { box-shadow:inset 3px 0 0 var(--alert); }
.t-late { background:var(--alert); color:#fff; }
.t-auto { background:var(--orange-tint); color:var(--th-accent3); }
.row .when { display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; font-size:12px; color:var(--ink2); margin-bottom:2px; }
.row .when .due { font-weight:600; color:var(--navy); }
.row summary { width:auto; max-width:100%; }
.row .lastline { color:var(--ink); font-size:12.5px; } .row .lastby { color:var(--ink2); font-size:12px; white-space:nowrap; }
.row .lastnone { grid-column:2 / -1; color:var(--faint); font-size:12px; }

.t-trouble { background:var(--th-tint); color:var(--th-accent3); }
.aisug > span { flex:1; min-width:0; }

/* Rules page */
.rulecard { padding:16px 18px; margin-bottom:8px; } .rc-h { margin-bottom:4px; } .rc-rule { margin:8px 0; font-size:13.5px; } .rc-b { margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
table.rules tr.muted td { color:var(--ink2); } .rc-actions { white-space:nowrap; text-align:right; }
.box.wide { max-width:760px; width:100%; }
.rulegrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:4px 14px; }
.rulegrid .field input, .rulegrid .field select { width:100%; }
.ruleai { padding:12px 14px; margin-top:10px; font-size:13.5px; } .ruleai ul { margin:4px 0 8px; padding-left:20px; }
.next.elig.bad { border-color:#F0C7C2; background:var(--alert-tint); } .next.elig details { margin-top:6px; }

/* GCR ID opens the referral in HHA; signed-in name and Sign out in the top bar */
a.ridlink { text-decoration:none; display:inline-flex; align-items:center; gap:2px; cursor:pointer; }
a.ridlink:hover { background:var(--navy); color:#fff; } a.ridlink .ic { opacity:.6; }
.tb-user { font-size:13px; color:var(--ink2); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width: 720px) { .tb-user { display:none; } #tbLogout span { display:none; } }

/* ===== Light look (Oct 2026): white sidebar, light headers with a soft brand drawing, tinted icon badges, initials.
   Same palette: navy for structure, orange the one accent, red only for cutoffs/overdue. Still no gradients. ===== */
.side { background:#fff; color:var(--ink2); border-right:1px solid var(--line); }
.side .logo { background:transparent; padding:6px 6px 10px; border-radius:0; border-bottom:1px solid var(--line2); }
.side nav button { color:#3B4558; }
.side nav button .ic { color:var(--navy-2); }
.side nav button:hover { background:var(--page); color:var(--navy); } .side nav button:hover .ic { color:var(--navy); }
.side nav button[aria-pressed=true] { background:var(--orange-tint); color:var(--navy); }
.side .navsep { background:var(--line2) !important; }
.side .stats { border-top:1px solid var(--line2); }
.side .stats .k { color:var(--muted); } .side .stats .big { color:var(--navy); } .side .stats .big.hot { color:var(--orange); }
.side .stats .rows { color:var(--ink2); } .side .stats .rows b { color:var(--navy); }
.side .foot { border-top:1px solid var(--line2); color:var(--muted); } .side .foot b { color:var(--navy); }
.side .me { background:var(--page); color:var(--ink); border:1px solid var(--line2); }
.side .me button { color:var(--ink2); } .side .me button:hover { background:var(--navy-tint); color:var(--navy); }
.aipulse { background:var(--navy-tint); color:var(--navy); } .aipulse.off { color:var(--muted); background:var(--page); }
.aipulse.idle .dot { background:var(--navy); }

/* Light page headers with a quiet brand drawing on the right (house roof + hills, in tints). */
.ov-head, .head.hero { position:relative; overflow:hidden; color:var(--ink); background:#fff; border:1px solid var(--line); }
.ov-head::after, .head.hero::after { content:''; position:absolute; left:0; right:0; bottom:0; height:38px; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 38' preserveAspectRatio='none'%3E%3Cpath d='M0 38 V30 C200 12 380 18 600 26 C820 34 1000 10 1200 4 V38Z' fill='%23EEF1F7'/%3E%3Cpath d='M0 38 V34 C260 26 520 30 760 33 C960 36 1100 26 1200 22 V38Z' fill='%23FDF1E5'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
.ov-head, .head.hero { padding-bottom:30px; }
.ov-head > *, .head.hero > * { position:relative; z-index:1; }
.ov-head h1 { color:var(--navy); } .ov-head .sub { color:var(--ink2); } .ov-eyebrow { color:var(--orange-dk); }
.ov-head select { background:#fff; color:var(--ink); border:1px solid var(--line); }
.ov-head .btn { background:#fff; color:var(--navy); border-color:var(--navy); } .ov-head .btn:hover { background:var(--navy-tint); }

/* Tinted icon badges on the number tiles */
.kpi-icon { width:30px; height:30px; border-radius:9px; background:var(--navy-tint); align-items:center; justify-content:center; flex:none; }
.kpi.urgent .kpi-icon { background:var(--alert-tint); }
.kpi { transition:border-color .12s, box-shadow .12s, transform .12s; } .kpi:hover { transform:translateY(-1px); }

/* Initials badges (people and clients) */
.av { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; font-size:11px; font-weight:700; letter-spacing:.02em; flex:none; }
.av.a0 { background:#EEF1F7; color:#203060; } .av.a1 { background:var(--th-tint); color:var(--th-accent3); } .av.a2 { background:#E8F1F8; color:#1D4E73; }
.av.a3 { background:#EEF4EA; color:#2F5B1F; } .av.a4 { background:#F3EEF8; color:#4B2E6F; } .av.a5 { background:#F6F0E4; color:#6B4E12; }
.row .who { display:flex; align-items:center; gap:8px; }
.st-l { display:flex; align-items:center; gap:8px; }
.tb-user { display:inline-flex; align-items:center; gap:8px; }

/* My day header: progress ring + the day's numbers */
.md-hero { display:flex; align-items:center; gap:22px; }
.md-ring { position:relative; width:84px; height:84px; flex:none; }
.md-ring svg { width:84px; height:84px; transform:rotate(-90deg); }
.md-ring .bg { fill:none; stroke:var(--line2); stroke-width:9; } .md-ring .fg { fill:none; stroke:var(--orange); stroke-width:9; stroke-linecap:round; transition:stroke-dashoffset .8s ease; }
.md-ring b { position:absolute; inset:0; display:grid; place-items:center; font-size:18px; color:var(--navy); }
.md-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.md-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:var(--page); border:1px solid var(--line2); font-size:12.5px; color:var(--ink2); }
.md-pill b { color:var(--navy); font-size:13px; } .md-pill.late { background:var(--alert-tint); border-color:#F2C8C3; } .md-pill.late b { color:var(--alert); }
.md-pill.new { background:var(--orange-tint); border-color:var(--th-peach); }

/* Friendly empty states */
.empty-art { display:flex; flex-direction:column; align-items:center; gap:10px; }
.empty-art svg { width:120px; height:auto; }

/* Light sign-in page */
.login-wrap { background:var(--page); position:relative; overflow:hidden; }
.login-wrap::before { content:''; position:absolute; inset:auto 0 0 0; height:46%; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath d='M0 400 V220 C240 140 420 180 640 230 C860 280 1080 200 1440 150 V400Z' fill='%23EEF1F7'/%3E%3Cpath d='M0 400 V310 C300 250 520 290 760 320 C1000 350 1220 300 1440 270 V400Z' fill='%23FDF1E5'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
.login { position:relative; z-index:1; box-shadow:0 12px 40px rgba(32,48,96,.12); border:1px solid var(--line); }
@media (max-width: 720px) {
  .tb-user { display:none; }
  .md-hero { gap:14px; align-items:flex-start; } .md-ring, .md-ring svg { width:64px; height:64px; } .md-ring b { font-size:15px; }
}
@media (max-width: 720px) { .topbar { gap:8px; } .tb-search { flex:1 1 auto; min-width:0; width:auto; } .tb-search input { min-width:0; width:100%; } .tb-right { gap:6px; flex:none; } }

/* MLTC / MAP on every case; HR follow-up line; status meaning on hover */
.t-track { font-weight:700; letter-spacing:.03em; }
.t-track.mltc { background:var(--navy); color:#fff; } .t-track.map { background:var(--orange-tint); color:var(--th-accent3); border:1px solid var(--th-peach); }
.hrnote { display:flex; gap:6px; align-items:flex-start; margin-top:6px; padding:6px 9px; border-radius:8px; background:var(--page); border:1px solid var(--line2); font-size:13px; }
.hrnote .ic { margin-top:1px; color:var(--navy-2); }
.hasmeaning { text-decoration:underline dotted var(--faint); cursor:help; }

/* Road to enrollment */
.pipe-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:6px 0 14px; }
.pipe-kpi { display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:1px solid var(--line2); border-radius:10px; background:var(--page); }
.pipe-kpi b { font-size:24px; color:var(--navy); font-variant-numeric:tabular-nums; } .pipe-kpi .tag { align-self:flex-start; }
.pipe .st-track i + i { margin-left:2px; }
.t-hr { background:#E8F1F8; color:#1D4E73; }

/* Calmer rows (Oct 13): the AI suggestion is a quiet line, tags are smaller, one line of tags where possible */
.row .aisug { background:transparent; padding:2px 0 0; margin-top:4px; color:var(--ink2); font-size:12.5px; }
.row .aisug b { color:var(--navy-2); font-weight:600; }
.row .do .tag { font-size:10.5px; padding:1px 7px; }
.row .do > div:last-child { margin-top:4px; }

/* Problems (managers) */
.pb-reasons { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.pb-reason { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:120px; padding:10px 14px; border-radius:10px; background:#fff; border:1px solid var(--line); font:inherit; font-size:12.5px; color:var(--ink2); cursor:pointer; text-align:left; }
.pb-reason b { font-size:22px; color:var(--navy); line-height:1.1; }
.pb-reason.on { border-color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy); }
.pb-reason.r-overdue b, .pb-reason.r-cutoff b, .pb-reason.r-medicaid b { color:var(--alert); }
.pb-filters { gap:8px; flex-wrap:wrap; align-items:center; } .pb-filters input, .pb-filters select { height:36px; }
.pb-table td { vertical-align:top; font-size:13px; } .pb-table .nowrap { white-space:nowrap; }
.pb-name { font-weight:600; color:var(--navy); text-decoration:none; } .pb-name:hover { text-decoration:underline; }
.pb-tag { display:inline-flex; margin:0 4px 4px 0; white-space:normal; }
.pb-tag.r-overdue, .pb-tag.r-cutoff, .pb-tag.r-medicaid { background:var(--alert-tint); color:var(--alert); }
.pb-tag.r-hr { background:#E8F1F8; color:#1D4E73; } .pb-tag.r-trouble, .pb-tag.r-cfeec { background:var(--th-tint); color:var(--th-accent3); }
.pb-check div { display:flex; gap:4px; align-items:flex-start; font-size:12.5px; line-height:1.35; margin-bottom:3px; }
.pb-check .ok { color:var(--ok); } .pb-check .bad { color:var(--alert); }
a.ridlink, .rid { white-space:nowrap; }
.pb-filters { justify-content:flex-start !important; } .pb-filters input { width:240px; } .pb-filters .sub { margin-left:auto; }

/* The drawer scrolls (its parts never squeeze); Log result stays at the bottom */
.sheet .box > * { flex-shrink:0; }
.sheet .box > .actions { position:sticky; bottom:-24px; margin:auto -24px -24px; padding:12px 24px 16px; background:#fff; border-top:1px solid var(--line2); }
.hrdocs { margin-top:3px; color:var(--th-accent3); font-size:12.5px; } .hrdocs b { color:var(--th-accent3); }
.pb-tag.r-hha { background:var(--alert-tint); color:var(--alert); } .pb-tag.r-stuck { background:var(--th-tint); color:var(--th-accent3); } .pb-tag.r-nomedicaid { background:var(--page); color:var(--ink2); }
.pb-reason.r-hha b { color:var(--alert); }

/* Status colours (the team's), picker in Log result */
.sdot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:1px; border:1px solid rgba(0,0,0,.08); }
.spick { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.schip { border:0; border-radius:999px; padding:5px 11px; font:inherit; font-size:12px; font-weight:700; letter-spacing:.02em; cursor:pointer; opacity:.85; transition:transform .12s, box-shadow .12s, opacity .12s; }
.schip:hover { opacity:1; transform:translateY(-1px); }
.schip[aria-pressed="true"] { opacity:1; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--navy); }
.spick .sother { flex:1 1 160px; min-width:140px; height:30px; border-radius:999px; padding:0 12px; font-size:12.5px; }

/* ===== Calmer layout + motion (Oct 13) ===== */
.row { grid-template-columns:28px minmax(190px,1.1fr) minmax(280px,2.3fr) auto; gap:6px 18px; padding:14px 18px; align-items:start; }
.row .who { font-size:14.5px; }
.row .meta { margin-top:4px; display:flex; flex-wrap:wrap; gap:2px 8px; align-items:center; }
.row .do .what { font-size:14px; color:var(--ink); line-height:1.45; }
.row .do .tags { margin-top:6px; display:flex; flex-wrap:wrap; gap:4px; } .row .do .tags .tag { margin:0; }
.row .aisug { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.row .aisug .ic { vertical-align:-2px; margin-right:4px; }
.row .act { display:flex; flex-direction:column; align-items:flex-end; gap:8px; min-width:150px; }
.row .act .ph { align-items:flex-end; }
.tag.t-more { background:var(--page); color:var(--ink2); border:1px dashed var(--line); cursor:help; }
.row .n { padding-top:3px; }
.row details { margin-top:2px; }
.list { overflow:hidden; }
.list .row { animation:rowIn .28s ease both; }
.list .row:nth-child(2) { animation-delay:.03s } .list .row:nth-child(3) { animation-delay:.06s } .list .row:nth-child(4) { animation-delay:.09s } .list .row:nth-child(5) { animation-delay:.12s } .list .row:nth-child(n+6) { animation-delay:.15s }
@keyframes rowIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.row { transition:background .15s, box-shadow .15s; }

/* Header pills: attention items are buttons */
.md-pill.btnpill { cursor:pointer; font:inherit; font-size:12.5px; transition:transform .12s, box-shadow .12s; }
.md-pill.btnpill:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(32,48,96,.12); }
.banner.slim { padding:10px 16px; } .banner.slim b { font-size:14.5px; display:inline; } .banner.slim .sub { display:inline; margin-left:8px; }

/* Status menu */
.smenu { position:relative; display:inline-block; }
.smenu-btn { gap:6px; } .smenu-btn .ic:last-child { transform:rotate(90deg); transition:transform .15s; } .smenu.open .smenu-btn .ic:last-child { transform:rotate(-90deg); }
.smenu-pop { position:absolute; z-index:6; top:calc(100% + 6px); left:0; min-width:300px; max-height:360px; overflow:auto; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px rgba(32,48,96,.14); padding:6px;
  opacity:0; transform:translateY(-4px); pointer-events:none; visibility:hidden; transition:opacity .14s, transform .14s, visibility 0s linear .14s; }
.smenu.open .smenu-pop { opacity:1; transform:none; pointer-events:auto; visibility:visible; transition:opacity .14s, transform .14s; }   /* closed: out of the Tab order too (v6 audit) */
.smenu-i { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; font-size:13px; cursor:pointer; } .smenu-i:hover { background:var(--page); }
.smenu-i span { flex:1; } .smenu-i b { color:var(--ink2); font-weight:600; font-size:12px; }
.smenu-pop .linkbtn { margin:6px 10px; }
.filterbar { gap:8px; align-items:center; }

/* Drawer: slides in from the right; backdrop fades */
.sheet:not([hidden]) { animation:fadeIn .18s ease both; }
.sheet:not([hidden]) > .box { animation:slideIn .24s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideIn { from { transform:translateX(28px); opacity:.6; } to { transform:none; opacity:1; } }

/* Touch: buttons press, tabs underline glides */
.btn { transition:background .12s, border-color .12s, box-shadow .12s, transform .08s; } .btn:active { transform:scale(.98); }
.tabs button { transition:color .15s, border-color .2s; }
.kpi, .pb-reason, .ov-card { transition:transform .15s, box-shadow .15s, border-color .15s; }
.pb-reason:hover, .ov-card:hover { box-shadow:0 6px 18px rgba(32,48,96,.08); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }
@media (max-width: 760px) { .row .act { align-items:flex-start; } .row .act .ph { align-items:flex-start; } }
.pb-ids { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:3px 0; } .pb-table tr { transition:background .12s; } .pb-table tr:hover td { background:var(--hover); }
.spill { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:999px; padding:1px 9px; font-size:11px; font-weight:700; letter-spacing:.02em; }

/* ===== Motion and polish (Oct 13): sign-in hero, loading placeholders, living headers ===== */
/* Sign-in: navy hero with a moving care network on the left, the card on the right; on phones the hero is the background */
.login-wrap { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(360px,1fr); place-items:center; padding:0; background:var(--page); }
.login-wrap::before { display:none; }
.login-hero { position:relative; align-self:stretch; justify-self:stretch; overflow:hidden; background:radial-gradient(120% 90% at 10% 0%, #2B3F7A 0%, var(--navy) 45%, var(--navy-dk) 100%); color:#fff; display:flex; align-items:flex-end; }
.login-net { position:absolute; inset:0; width:100%; height:100%; }
.lh-glow { position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; pointer-events:none; }
.lh-glow.g1 { width:420px; height:420px; background:var(--th-accent); opacity:.22; left:-120px; bottom:-160px; animation:drift1 18s ease-in-out infinite alternate; }
.lh-glow.g2 { width:360px; height:360px; background:#5B6B9A; opacity:.35; right:-80px; top:-100px; animation:drift2 22s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform:translate(120px,-60px) scale(1.15); } }
@keyframes drift2 { to { transform:translate(-90px,70px) scale(.9); } }
.login-hero::after { content:''; position:absolute; left:0; right:0; bottom:0; height:55%; background:linear-gradient(to top, rgba(22,37,74,.92), rgba(22,37,74,0)); pointer-events:none; }
.lh-copy { position:relative; z-index:1; padding:56px; max-width:520px; animation:heroIn .7s cubic-bezier(.2,.8,.2,1) both; }
.lh-eyebrow { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--th-peach); font-weight:700; }
.lh-title { font-size:40px; line-height:1.1; font-weight:800; letter-spacing:-.02em; margin:12px 0 14px; }
.lh-sub { font-size:15px; line-height:1.55; color:#C3CBDD; max-width:400px; }
@keyframes heroIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.login-wrap .login { margin:32px 24px; animation:cardIn .5s .1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cardIn { from { opacity:0; transform:translateY(10px) scale(.99); } to { opacity:1; transform:none; } }
.login input { transition:border-color .15s, box-shadow .15s; }
.login input:focus { border-color:var(--navy-2); box-shadow:0 0 0 3px rgba(91,107,154,.18); outline:none; }
@media (max-width: 860px) {
  .login-wrap { grid-template-columns:1fr; }
  .login-hero { position:absolute; inset:0; }
  .lh-copy { display:none; }
  .login-wrap .login { width:calc(100% - 32px); max-width:400px; margin:24px 16px; padding:24px; box-shadow:0 20px 50px rgba(0,0,0,.3); }
}

/* Primary buttons: a soft light sweep on hover */
.btn.primary { position:relative; overflow:hidden; }
.btn.primary::after { content:''; position:absolute; top:0; bottom:0; width:40%; left:-60%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform:skewX(-18deg); transition:left .5s ease; pointer-events:none; }
.btn.primary:hover::after { left:130%; }

/* Loading placeholders (instead of a blank page) */
.skel { animation:fadeIn .2s ease both; }
.skel i { display:block; height:12px; border-radius:6px; background:linear-gradient(90deg, #EDF0F5 0%, #F6F8FB 40%, #EDF0F5 80%); background-size:300% 100%; animation:shimmer 1.3s ease-in-out infinite; }
.skel-head { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:16px; display:flex; flex-direction:column; gap:10px; }
.skel-head i:first-child { height:20px; }
.skel-row { display:grid; grid-template-columns:34px 1fr 110px; gap:14px; align-items:center; padding:16px 18px; background:var(--card); border:1px solid var(--line2); border-bottom:0; }
.skel-row:first-of-type { border-radius:var(--radius) var(--radius) 0 0; } .skel-row:last-child { border-radius:0 0 var(--radius) var(--radius); border-bottom:1px solid var(--line2); }
.skel-row > div { display:flex; flex-direction:column; gap:8px; }
.skel-row i.c { width:30px; height:30px; border-radius:50%; } .skel-row i.b { height:30px; border-radius:8px; }
@keyframes shimmer { from { background-position:100% 0; } to { background-position:-100% 0; } }

/* Overview / page heroes: a slow-moving warm wave along the bottom */
.ov-head::before { content:''; position:absolute; left:-10%; right:-10%; bottom:-40px; height:90px; pointer-events:none; z-index:0;
  background:radial-gradient(50% 60% at 30% 50%, rgba(var(--th-accent-rgb), .10), transparent 70%), radial-gradient(45% 60% at 75% 40%, rgba(91,107,154,.10), transparent 70%);
  animation:wave 14s ease-in-out infinite alternate; }
@keyframes wave { to { transform:translateX(6%); } }

/* Empty states float gently */
.empty-art svg { animation:floaty 5s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }

/* Menu: the active page's marker grows in */
#nav button { position:relative; }
#nav button[aria-pressed="true"]::before { animation:growIn .25s ease both; }
@keyframes growIn { from { transform:scaleY(0); } to { transform:scaleY(1); } }

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

/* One instruction per card (audit, Oct 13): the AI's note sits behind a click, with where it came from */
.row details.aisug { display:block; white-space:normal; margin-top:6px; padding:0; background:transparent; }
.row details.aisug summary { display:inline-flex; align-items:center; gap:4px; cursor:pointer; color:var(--navy-2); font-size:12px; font-weight:600; list-style:none; }
.row details.aisug summary::-webkit-details-marker { display:none; }
.row details.aisug[open] > div { margin-top:4px; padding:6px 9px; border-radius:8px; background:var(--page); border:1px solid var(--line2); font-size:12.5px; color:var(--ink); }
.row details.aisug .sub { margin-top:2px; font-size:11.5px; }
.tag.t-decide { background:#FFF4D6; color:#7A5600; } .tag.t-comp { background:#F3E8FF; color:#5B2B8C; }

/* Overview hero: the care network drifts on the right of the header, fading out behind the text */
.ov-head .ov-net { position:absolute !important; inset:0; width:100%; height:100%; z-index:0 !important; pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, transparent 30%, #000 70%); mask-image:linear-gradient(to right, transparent 0%, transparent 30%, #000 70%); }
.ov-head { background:linear-gradient(120deg, #fff 0%, #fff 45%, #F4F6FB 100%); }
.ov-head h1 { animation:heroIn .5s cubic-bezier(.2,.8,.2,1) both; }

/* ===== Whole-portal polish (Oct 13) ===== */
/* Page headers: the care network drifts on the right, fading out behind the title */
.head { position:relative; overflow:hidden; background:linear-gradient(120deg, #fff 0%, #fff 50%, #F4F6FB 100%); }
.head > * { position:relative; z-index:1; }
.head > .head-net { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, transparent 50%, #000 88%); mask-image:linear-gradient(to right, transparent 0%, transparent 50%, #000 88%); }
.head h1 { animation:heroIn .45s cubic-bezier(.2,.8,.2,1) both; }
/* Cards and tiles lift a little on hover; panels and cards ease in when a page opens */
.card, .kpi, .panel { transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.card:hover, .kpi:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(32,48,96,.09); }
main > .cards, main > .panel, main > .kpis, main .ov-grid { animation:pageIn .35s ease both; }
main > .panel { animation-delay:.05s; }
/* Tabs: the active tab's underline grows in */
.tabs button[aria-pressed="true"], .tabs button.on { position:relative; }
/* Inputs: a soft focus ring everywhere */
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--navy-2); box-shadow:0 0 0 3px rgba(91,107,154,.16); transition:box-shadow .15s, border-color .15s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }
.tag.t-new { background:var(--orange-tint); color:var(--th-accent3); }

/* Where a step came from, and the whole-history facts in the drawer */
.whyline { margin-top:4px; font-size:12px; color:var(--ink2); line-height:1.4; } .whyline .sub { font-size:11.5px; }
.facts { display:flex; flex-direction:column; gap:4px; } .fact { font-size:13px; } .fact b { color:var(--navy); font-weight:600; } .fact.bad { color:var(--alert); } .fact.bad b { color:var(--alert); }

/* Managers' Overview: the AI bill (today, this week, last 7 days) */
.ai-bill { margin-top:12px; padding-top:10px; border-top:1px solid var(--line2); display:flex; flex-direction:column; gap:8px; }
.ai-bill-k { display:flex; gap:18px; flex-wrap:wrap; } .ai-bill-k > div { display:flex; flex-direction:column; } .ai-bill-k b { font-size:20px; color:var(--navy); font-variant-numeric:tabular-nums; }
.ai-bill-bars { display:flex; gap:6px; align-items:flex-end; height:56px; }
.ai-bill-bars > div { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; }
.ai-bill-bars i { display:block; width:100%; max-width:22px; border-radius:4px 4px 0 0; background:var(--navy-2); }
.ai-bill-bars > div:last-child i { background:var(--orange); } .ai-bill-bars span { font-size:10.5px; color:var(--ink2); }

/* Overview: workflows, problems, follow-up per coordinator (Oct 14) */
.flows { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
.flow { border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; }
.flow-h { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:8px; }
.flow-s { display:grid; grid-template-columns:42px 70px 1fr; align-items:center; gap:8px; font-size:12.5px; padding:2px 0; }
.flow-s.zero { color:var(--faint); } .fs-n { font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
.fs-bar { height:8px; background:var(--line2); border-radius:4px; overflow:hidden; } .fs-bar i { display:block; height:100%; width:var(--w); background:var(--navy); border-radius:4px; }
.probs { display:flex; flex-direction:column; gap:6px; }
.prob { border:1px solid var(--line); border-radius:var(--radius); padding:8px 12px; } .prob summary { cursor:pointer; } .prob summary b { color:var(--alert); margin-right:4px; }
.prob-list { display:flex; flex-direction:column; gap:2px; margin-top:6px; max-height:280px; overflow:auto; }
.prob-c { text-align:left; background:none; border:0; padding:5px 6px; border-radius:6px; cursor:pointer; font:inherit; color:inherit; } .prob-c:hover { background:var(--hover); }
tr.warnrow td:first-child { box-shadow:inset 3px 0 0 var(--alert); }

/* =====================================================================================================================
   Design v2 (owner, Oct 14: "look exactly like this everywhere, with all the cinematic improvements"). Calm white surfaces,
   one navy (structure) and one orange (attention), generous space, numbers that speak, details that open in place.
   Motion: pages rise in, cards follow one by one, rows open smoothly, numbers count up; all off with reduced motion.
   ===================================================================================================================== */
:root { --page:#F4F6FA; --line:#E6EAF0; --line2:#EEF1F6; --radius:14px; --shadow:0 1px 2px rgba(16,24,40,.04); --shadow-hi:0 12px 32px -12px rgba(16,24,40,.18);
  --ease:cubic-bezier(.22,.8,.24,1); }
body { background:var(--page); }
/* sidebar: white, sections, navy pill for the page you are on */
.side { background:#fff; color:var(--ink); border-right:1px solid var(--line); padding:22px 16px 16px; gap:10px; flex-basis:236px; }
.side .logo { background:none; padding:2px 6px 0; } .side .logo img { height:38px; }
.side-eyebrow { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding:6px 8px 4px; font-weight:600; }
.navlabel { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:16px 12px 6px; }
.side nav { gap:3px; }
.side nav button { color:#3B4658; font-weight:500; padding:10px 14px; border-radius:10px; transition:background .2s var(--ease), color .2s var(--ease); }
.side nav button .ic { color:#7C879A; transition:color .2s var(--ease); }
.side nav button:hover { background:var(--navy-tint); color:var(--navy); } .side nav button:hover .ic { color:var(--navy); }
.side nav button[aria-pressed=true] { background:var(--navy); color:#fff; font-weight:600; box-shadow:0 8px 18px -10px rgba(32,48,96,.55); }
.side nav button[aria-pressed=true]::before { display:none; }
.side nav button[aria-pressed=true] .ic { color:#fff; }
.side nav .pill { background:var(--orange-tint); color:var(--orange-dk); border-radius:8px; padding:1px 8px; line-height:18px; }
.side nav button[aria-pressed=true] .pill { background:rgba(255,255,255,.18); color:#fff; }
.navsep { background:var(--line); margin:12px 6px; }
.side .stats, .side .foot { display:none; }
.aipulse { background:var(--page); color:var(--ink2); border:1px solid var(--line); margin-top:auto; }
.aipulse.idle .dot { background:var(--ok); } .aipulse.off .dot { background:var(--faint); } .aipulse.off { color:var(--muted); }
.side .me { background:var(--page); color:var(--ink); border:1px solid var(--line); padding:8px 8px 8px 10px; }
.side .me > span { display:flex; align-items:center; gap:8px; min-width:0; } .side .me > span > span { display:flex; flex-direction:column; line-height:1.2; font-weight:600; }
.side .me small { color:var(--muted); font-weight:500; font-size:11px; }
.side .me button { color:var(--muted); } .side .me button:hover { background:var(--navy-tint); color:var(--navy); }
/* top bar: breadcrumb, search, actions */
.topbar { background:rgba(255,255,255,.86); backdrop-filter:saturate(1.4) blur(10px); padding:14px 36px; gap:20px; }
.crumb { display:flex; align-items:center; gap:8px; color:var(--ink2); font-size:13.5px; white-space:nowrap; }
.crumb .ic { color:var(--muted); } .crumb b { color:var(--ink2); font-weight:500; } .crumb > span:nth-child(2) { color:var(--ink); font-weight:600; } .crumb-sep { color:var(--faint); }
.tb-search { max-width:420px; margin-left:auto; border-color:var(--line); border-radius:10px; background:var(--page); }
.tb-right { margin-left:0; }
main { padding:30px 40px 72px; max-width:1180px; }
/* page header: eyebrow, a big calm title, one line under it; tools on the right */
.head, .ov-head, .head.hero { background:none !important; border:0 !important; padding:0 0 4px !important; margin-bottom:26px; color:var(--ink); align-items:flex-end; }
.head::after, .ov-head::after, .head.hero::after { display:none !important; }
.head h1, .ov-head h1 { font-size:30px; font-weight:700; letter-spacing:-.025em; color:var(--navy); margin:0; line-height:1.15; }
.head .sub, .ov-head .sub { color:var(--ink2); font-size:14px; margin-top:8px; max-width:760px; }
.ov-eyebrow, .eyebrow { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink2); font-weight:600; margin-bottom:10px; }
.head-net, .ov-net { display:none !important; }
/* cards, tables, tabs */
.panel, .ov-card, .card, .next, .empty, .alert { border-radius:var(--radius); }
.ov-card, .panel { border-color:var(--line); box-shadow:var(--shadow); }
.ov-card { padding:22px 24px; margin-bottom:18px; }
.ov-title { font-size:16px; font-weight:700; color:var(--ink); margin-bottom:4px; letter-spacing:-.01em; }
.ov-title + .sub, .ov-subtitle { color:var(--ink2); font-size:13px; margin:-2px 0 16px; }
th { background:#fff; color:var(--ink2); font-size:11.5px; letter-spacing:.08em; font-weight:600; padding:14px 18px; border-bottom:1px solid var(--line); }
td { padding:16px 18px; border-top:1px solid var(--line2); }
tr:hover td { background:#FAFBFD; }
.tabs { border-bottom:1px solid var(--line); gap:10px; }
.tabs button { padding:12px 6px; font-weight:500; color:var(--ink2); border-bottom-width:2px; transition:color .2s var(--ease), border-color .25s var(--ease); }
.tabs button[aria-selected=true] { color:var(--ink); font-weight:600; border-bottom-color:var(--orange); }
.btn { border-radius:10px; transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.btn.primary { box-shadow:0 8px 18px -10px rgba(var(--th-accent-rgb), .8); } .btn.primary:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0) scale(.98); }
/* KPI cards (Overview): a label with its icon, a big number, one line */
.kpis { gap:16px; margin-bottom:18px; }
.kpi { border-radius:var(--radius); padding:20px 22px 18px; border-color:var(--line); box-shadow:var(--shadow); position:relative; overflow:hidden; }
.kpi-top { gap:8px; } .kpi-icon { width:auto; height:auto; background:none !important; color:var(--ink2); }
.kpi-label { text-transform:none; letter-spacing:0; font-size:13px; font-weight:500; color:var(--ink2); }
.kpi-n { font-size:38px; font-weight:700; letter-spacing:-.03em; margin:14px 0 6px; color:var(--ink); line-height:1; }
.kpi-sub { font-size:12.5px; color:var(--ink2); }
.kpi.hot { box-shadow:inset 0 3px 0 var(--orange), var(--shadow); } .kpi.hot .kpi-n { color:var(--orange-dk); }
.kpi.good .kpi-n { color:var(--ok); }
.kpi.urgent { box-shadow:inset 0 3px 0 var(--orange), var(--shadow); border-color:var(--line); } .kpi.urgent .kpi-n { color:var(--orange-dk); } .kpi.urgent .kpi-icon { color:var(--ink2); }
.kpi:hover { transform:translateY(-2px); box-shadow:var(--shadow-hi); }
.kpi.hot:hover, .kpi.urgent:hover { box-shadow:inset 0 3px 0 var(--orange), var(--shadow-hi); }
/* the attention banner */
.banner { display:flex; align-items:center; gap:16px; background:linear-gradient(180deg,var(--th-tint),var(--th-tint)); border:1px solid var(--th-tint); border-radius:var(--radius); padding:16px 18px; margin-bottom:18px; }
.banner .b-ic { width:40px; height:40px; border-radius:10px; background:rgba(var(--th-accent-rgb), .16); color:var(--orange-dk); display:grid; place-items:center; flex:none; }
.banner b { display:block; color:var(--ink); font-size:14.5px; } .banner .sub { margin-top:2px; }
.banner .btn { margin-left:auto; }
/* priority cases */
.pc-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:22px 24px 0; }
.pc-count { font-size:12px; color:var(--ink2); background:var(--page); border:1px solid var(--line); border-radius:8px; padding:3px 9px; white-space:nowrap; }
.pc .tabs { padding:0 24px; margin:14px 0 0; }
.pc table td, .pc table th { padding-left:24px; } .pc table { table-layout:fixed; }
.pc td { vertical-align:middle; }
.pc .who { color:var(--ink2); font-size:12.5px; margin-top:2px; }
.pc .chip { display:inline-block; font-size:12px; background:var(--line2); color:var(--ink2); border-radius:6px; padding:2px 8px; margin-top:6px; }
.pc .rid-s { color:var(--muted); font-size:12.5px; margin-top:2px; }
.pc .late { color:var(--alert); font-weight:500; } .pc .today { color:var(--orange-dk); font-weight:500; } .pc .later { color:var(--ink2); }
.pc .open-b { width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:#fff; display:grid; place-items:center; cursor:pointer; color:var(--ink2); transition:all .2s var(--ease); }
.pc .open-b:hover, .pc tr.open .open-b { border-color:var(--navy); color:var(--navy); background:var(--navy-tint); }
.pc tr.open .open-b .ic { transform:rotate(90deg); } .pc .open-b .ic { transition:transform .25s var(--ease); }
.pc tr.det td { padding:0; border-top:0; background:var(--page); }
.pc .det-in { display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease); }
.pc tr.det.on .det-in { grid-template-rows:1fr; }
.pc .det-in > div { overflow:hidden; } .pc .det-body { padding:16px 24px 18px; }
.pc .det-top { display:flex; justify-content:space-between; gap:10px; font-weight:600; color:var(--ink2); margin-bottom:8px; }
.pc .src { border-left:3px solid var(--orange); background:#fff; border-radius:8px; padding:10px 14px; margin-top:10px; }
.pc .pc-foot { display:flex; justify-content:space-between; padding:12px 24px; border-top:1px solid var(--line); color:var(--ink2); font-size:12.5px; }
/* milestone board */
.mile { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.mile-col { background:var(--page); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:10px; }
.mile-col h4 { margin:0; display:flex; justify-content:space-between; font-size:13.5px; color:var(--ink); }
.mile-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.mile-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-hi); }
.mile-card.hot { box-shadow:inset 0 3px 0 var(--orange); }
.mile-card b { display:block; margin-bottom:8px; } .mile-card p { margin:8px 0 10px; color:var(--ink2); font-size:13px; }
.mile-card .linkbtn { text-decoration:none; color:var(--ink); }
.mile-foot { color:var(--ink2); font-size:12.5px; margin-top:auto; }
/* workflow steps (inside "Every workflow") */
details.more > summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
details.more > summary::-webkit-details-marker { display:none; }
details.more > summary::after { content:'Show'; font-size:12.5px; color:var(--navy); font-weight:600; } details.more[open] > summary::after { content:'Hide'; }
details.more[open] > summary { margin-bottom:14px; }
/* motion: pages rise in, cards follow one another */
@keyframes riseIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
main > * { animation:riseIn .5s var(--ease) both; }
main > *:nth-child(2) { animation-delay:.05s; } main > *:nth-child(3) { animation-delay:.1s; } main > *:nth-child(4) { animation-delay:.15s; }
main > *:nth-child(5) { animation-delay:.2s; } main > *:nth-child(6) { animation-delay:.25s; } main > *:nth-child(n+7) { animation-delay:.3s; }
.kpis > * { animation:riseIn .5s var(--ease) both; }
.tab-body { animation:riseIn .35s var(--ease) both; }
@media (max-width:1100px) { .mile { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .mile { grid-template-columns:1fr; } main { padding:22px 16px 60px; } .head h1, .ov-head h1 { font-size:24px; } .banner { flex-wrap:wrap; } .banner .btn { margin-left:0; } }
@media (prefers-reduced-motion: reduce) { main > *, .kpis > *, .tab-body { animation:none !important; } .pc .det-in { transition:none; } .kpi:hover, .mile-card:hover, .btn.primary:hover { transform:none; } }
.head::before, .ov-head::before, .head.hero::before { display:none !important; }
.banner { color:var(--ink); cursor:default; } .banner:hover { background:linear-gradient(180deg,var(--th-tint),var(--th-tint)); }
.banner .sub { color:var(--ink2); }
.ov-head .tools { align-self:flex-end; }
/* design v2: the same number cards, calmer tags, a real drop zone */
.cards { gap:14px; }
.card { border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); border-color:var(--line); transition:transform .25s var(--ease), box-shadow .25s var(--ease); animation:riseIn .5s var(--ease) both; }
.card:hover { transform:translateY(-2px); box-shadow:var(--shadow-hi); }
.card .n { font-size:32px; letter-spacing:-.03em; color:var(--ink); } .card .n.hot { color:var(--orange-dk); }
.card .l { font-weight:500; font-size:12.5px; margin-top:6px; }
.cards .card:nth-child(2) { animation-delay:.05s; } .cards .card:nth-child(3) { animation-delay:.1s; } .cards .card:nth-child(4) { animation-delay:.15s; } .cards .card:nth-child(n+5) { animation-delay:.2s; }
.tag { border-radius:6px; font-weight:500; padding:2px 8px; }
input[type=file] { width:100%; padding:30px 18px; border:1.5px dashed #C9D2E2; border-radius:12px; background:var(--page); transition:border-color .2s var(--ease), background .2s var(--ease); }
input[type=file]:hover { border-color:var(--navy); background:var(--navy-tint); }
input[type=file]::file-selector-button { font:inherit; font-weight:600; border:1px solid var(--navy); background:#fff; color:var(--navy); border-radius:9px; padding:7px 14px; margin-right:12px; cursor:pointer; }
.head .eyebrow { margin-bottom:10px; }
@media (prefers-reduced-motion: reduce) { .card { animation:none; } .card:hover { transform:none; } }
/* the other numbers (as before), smaller under the four big ones; the sidebar's cutoffs / numbers back, in the new look */
.kpis.small .kpi { padding:14px 16px; } .kpis.small .kpi-n { font-size:26px; margin:10px 0 4px; } .kpis.small .kpi-label { font-size:12.5px; }
.side .stats:not(:empty), .side .foot:not(:empty) { display:flex; }
.side .foot { display:block; border-top:1px solid var(--line); color:var(--ink2); padding-top:12px; margin-top:auto; font-size:12.5px; }
.side .foot:empty { display:none; } .side .foot b { color:var(--navy); }
.side .stats { border-top:1px solid var(--line); color:var(--ink2); } .side .stats .k { color:var(--muted); } .side .stats .big { color:var(--navy); } .side .stats .rows { color:var(--ink2); } .side .stats .rows b { color:var(--navy); }
.side .foot:not(:empty) ~ .aipulse, .aipulse { margin-top:0; }
.side .foot:not(:empty) { display:block; line-height:1.7; }
/* My day in the theme: number cards, attention chips, one calm list per section (rows like the Overview table) */
.md-kpis .kpi-n { margin-top:12px; }
.md-bar { height:6px; background:var(--line2); border-radius:4px; margin-top:10px; overflow:hidden; } .md-bar i { display:block; height:100%; background:var(--ok); border-radius:4px; transition:width .8s var(--ease); }
.md-att { display:flex; flex-wrap:wrap; gap:8px; margin:-4px 0 18px; }
.md-chip { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:7px 12px; font:inherit; font-size:13px; color:var(--ink2); cursor:pointer; transition:all .2s var(--ease); }
.md-chip b { color:var(--ink); } .md-chip.late { border-color:#F2C8C3; color:var(--alert); } .md-chip.late b { color:var(--alert); }
.md-chip:hover { border-color:var(--navy); color:var(--navy); transform:translateY(-1px); }
.sec { font-size:12px; letter-spacing:.1em; color:var(--ink2); font-weight:600; margin:26px 0 10px; }
.sec .pill { background:var(--line2); color:var(--ink2); font-weight:700; }
.sec.late, .sec.late .ic { color:var(--alert); } .sec.late .pill { background:var(--alert-tint); color:var(--alert); }
.list { border-radius:var(--radius); border-color:var(--line); box-shadow:var(--shadow); animation:riseIn .45s var(--ease) both; }
.row { padding:18px 22px; gap:6px 18px; border-bottom:1px solid var(--line2); transition:background .2s var(--ease); }
.row:hover { background:#FAFBFD; }
.row.late, .row.urgent { box-shadow:inset 3px 0 0 var(--alert); }
.row .who { color:var(--ink); font-size:14.5px; } .row .who .av { flex:none; }
.row .do { color:var(--ink); } .row .what { font-size:14px; }
.tag.t-late { background:none; color:var(--alert); padding:0; font-weight:600; font-size:12.5px; }
.row .when .due { color:var(--ink2); font-weight:500; }
.row .btn { border-radius:10px; }
.filterbar { margin:14px 0 4px; }
.note-foot { margin-top:18px; }

/* New-case alert in the top bar (newalert.js): pulses orange while a new case has not been looked at yet */
.nc-btn { display:inline-flex; align-items:center; gap:8px; height:var(--btn-h); padding:0 14px; margin-right:8px; border-radius:999px; border:1px solid var(--th-peach); background:var(--orange-tint); color:var(--orange-dk); font:inherit; font-weight:600; font-size:13px; cursor:pointer; transition:background .2s var(--ease), transform .2s var(--ease); }
.nc-btn[hidden] { display:none; }
.nc-btn:hover { background:var(--th-tint); transform:translateY(-1px); }
.nc-btn .nc-dot { width:8px; height:8px; border-radius:50%; background:var(--orange); }
.nc-btn.fresh { animation:ncGlow 1.6s var(--ease) infinite; }
.nc-btn.fresh .nc-dot { animation:ncPing 1.6s var(--ease) infinite; }
@keyframes ncGlow { 0%,100% { box-shadow:0 0 0 0 rgba(var(--th-accent-rgb), .45); } 50% { box-shadow:0 0 0 6px rgba(var(--th-accent-rgb), 0); } }
@keyframes ncPing { 0%,100% { transform:scale(1); } 50% { transform:scale(1.5); } }
.ncpanel { position:fixed; right:auto; width:360px; max-width:calc(100vw - 32px); }
.ncpanel .bp-foot { display:flex; justify-content:flex-end; }
@media (max-width:640px) { .nc-btn span { display:none; } .nc-btn { padding:0 12px; } }
@media (prefers-reduced-motion: reduce) { .nc-btn.fresh, .nc-btn.fresh .nc-dot { animation:none; } }

/* Design v2, fit and finish (owner, Oct 14: "this part looks off"): use the whole screen, line the cards up, one style for
   every filter box, and give the Problems table room for "What to do". */
main { max-width:1640px; }
.kpi { display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; }
.filterbar { margin-bottom:18px !important; }
.filterbar input[type=search], .filterbar input[type=text], .filterbar select, .pb-filters input, .pb-filters select, .head .tools input, .head .tools select {
  height:40px; border:1px solid var(--line); border-radius:10px; background:#fff; padding:0 12px; font:inherit; font-size:14px; color:var(--ink); transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.filterbar input:focus, .filterbar select:focus, .pb-filters input:focus, .pb-filters select:focus, .head .tools input:focus, .head .tools select:focus { outline:none; border-color:var(--navy-3); box-shadow:0 0 0 3px var(--navy-tint); }
.head .tools { align-items:center; }
/* Problems: the reason counts look like the Overview cards; the table gets room */
.pb-reasons { gap:12px; margin-bottom:18px; }
.pb-reason { min-width:150px; padding:16px 20px; border-radius:var(--radius); box-shadow:var(--shadow); font-size:13px; gap:6px; }
.pb-reason b { font-size:28px; letter-spacing:-.02em; }
.pb-reason.on { border-color:var(--navy); box-shadow:inset 0 3px 0 var(--orange), var(--shadow); }
.pb-reason:hover { transform:translateY(-1px); }
.pb-table th { white-space:nowrap; }
.pb-table td.pb-todo { min-width:300px; max-width:460px; line-height:1.5; }
.pb-table .pb-check { min-width:190px; }
.pb-table td:first-child { min-width:200px; }
/* Rules: "may change" sits next to its box */
label.check.inline { display:inline-flex; flex-wrap:nowrap; align-items:center; gap:8px; margin:0; white-space:nowrap; }
/* Upload: the file box fills its drop zone */
input[type=file] { font:inherit; }
/* Milestones: every case of the stage under its example, 8 shown, "Show all" for the rest */
.mile-list { display:flex; flex-direction:column; gap:6px; max-height:520px; overflow:auto; }
.mile-row { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; text-align:left; width:100%; background:#fff; border:1px solid var(--line); border-radius:10px; padding:9px 12px; font:inherit; color:inherit; cursor:pointer; transition:border-color .2s var(--ease), transform .2s var(--ease); }
.mile-row:hover { border-color:var(--navy-3); transform:translateY(-1px); }
.mile-row span { display:flex; flex-direction:column; min-width:0; } .mile-row b { font-size:13px; font-weight:600; }
.mile-row small { color:var(--ink2); font-size:12px; line-height:1.35; }
.mile-row em { font-style:normal; font-size:11.5px; color:var(--ink2); white-space:nowrap; } .mile-row em.late { color:var(--alert); font-weight:600; }
.mile-row.more { display:none; } .mile-list.all .mile-row.more { display:flex; }
.mile-all { align-self:flex-start; font-size:13px; }
/* The status menu opens above the list (the list cards rise in with a transform, which put them on top of the menu) */
.filterbar { position:relative; z-index:30; }
.smenu.open { z-index:40; }
.smenu-pop { z-index:50; }
main > *:has(.smenu.open), main *:has(> .filterbar .smenu.open) { position:relative; z-index:60; }
/* Where each case is, step by step (Overview) */
.sb-tabs { margin-bottom:16px; flex-wrap:wrap; }
.sb-steps { display:flex; align-items:stretch; gap:0; overflow-x:auto; padding-bottom:6px; margin-bottom:14px; }
.sb-step { flex:1 0 128px; max-width:220px; display:flex; flex-direction:column; gap:4px; text-align:left; background:var(--page); border:1px solid var(--line); border-radius:12px; padding:12px 14px; font:inherit; color:inherit; cursor:pointer; transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.sb-step:hover { transform:translateY(-1px); border-color:var(--navy-3); }
.sb-step.on { background:#fff; border-color:var(--navy); box-shadow:inset 0 3px 0 var(--orange), var(--shadow); }
.sb-step.empty { opacity:.55; }
.sb-step small { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); font-weight:600; }
.sb-step b { font-size:13px; line-height:1.3; color:var(--ink); }
.sb-n { margin-top:auto; font-size:24px; font-weight:700; color:var(--navy); letter-spacing:-.02em; display:flex; align-items:baseline; gap:8px; }
.sb-n em { font-style:normal; font-size:12px; font-weight:600; color:var(--alert); }
.sb-arrow { flex:0 0 18px; align-self:center; height:2px; background:var(--line); position:relative; }
.sb-arrow::after { content:''; position:absolute; right:0; top:-3px; border:4px solid transparent; border-left-color:var(--navy-3); border-right:0; }
.sb-list table { width:100%; } .sb-list td { vertical-align:top; font-size:13px; } .sb-name { font-weight:600; color:var(--navy); text-decoration:none; text-align:left; }
.sb-list { max-height:560px; overflow:auto; border:1px solid var(--line); border-radius:12px; }
/* Intro checklist in groups (Check / Decide / PCA / Tell them) */
.intro-groups { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px 18px; }
.intro-groups .ig-h { font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--navy); margin-bottom:4px; display:flex; gap:6px; }
.intro-groups .ig-h span { color:var(--ink2); font-weight:600; }
.intro-groups .intro-list li > span { display:flex; flex-direction:column; } .intro-groups .intro-list small { color:var(--ink2); font-size:12px; line-height:1.35; }
.intro-groups > .sub, .intro-groups > div[style] { grid-column:1 / -1; }
/* Focus mode (top bar button): only what to do. Hides the AI note, the "From / Number" lines, the last-note preview, the
   chips over the list and the small lines under the number cards; the action is cut to the sentence that says what to do. */
.what .short { display:none; }
body.focus .what .full { display:none; } body.focus .what .short { display:inline; }
body.focus .row .aisug, body.focus .row .whyline, body.focus .row > details, body.focus .md-att, body.focus .kpi .kpi-sub, body.focus .md-bar { display:none !important; }
body.focus .row .what { font-size:15px; font-weight:500; color:var(--ink); }
body.focus .row { padding-top:14px; padding-bottom:14px; }
body.focus .kpi .kpi-n { margin-bottom:0; }
.tb-right .btn.focus-btn[aria-pressed=true], .tb-right .btn.focus-btn[aria-pressed=true]:hover { background:var(--orange); border-color:var(--orange); color:#fff; box-shadow:0 8px 18px -10px rgba(var(--th-accent-rgb), .8); }
/* Focus mode shows the Medicaid ID on each case (owner, Oct 14: "status name, the labels, Medicaid ID; no AI notes") */
.row .mcid { display:none; }
body.focus .row .mcid { display:inline-flex; gap:4px; align-items:center; font-size:12px; color:var(--ink2); background:var(--page); border:1px solid var(--line); border-radius:6px; padding:1px 7px; }
body.focus .row .mcid b { color:var(--ink); font-weight:600; letter-spacing:.02em; } body.focus .row .mcid.none { color:var(--faint); }
body.focus .row .meta { flex-wrap:wrap; gap:6px; }
/* Focus mode, owner Oct 14 ("just the badges, that's it"): no sentence either; the badges, the status, the Medicaid ID,
   how late, the phone and Log result. The full text is one click away (open the case). */
body.focus .row .what { display:none !important; }
body.focus .row .do .tags { margin-top:6px; }
body.focus .row .do .tags .tag { font-size:12.5px; padding:3px 9px; }
.row .ftags { display:none; }
body.focus .row .ftags { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
body.focus .row .do .tags { display:none !important; }
.tag.t-sent { background:#E8F1F8; color:#1D4E73; border:1px solid #CFE1EF; }
/* Sent to / next call / who to call / one-click No answer / waiting on plans (owner, Oct 14) */
.tag.t-sent.stale { background:var(--orange-tint); color:var(--orange-dk); border-color:#F6D3B2; font-weight:600; }
.tag.t-next { background:#EEF6EE; color:#1B6B3A; border:1px solid #CFE6D5; }
.whocall { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--orange-dk); font-weight:600; margin-top:2px; justify-content:flex-end; }
.actbtns { display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }
.btn.noans { height:32px; padding:0 10px; font-size:12.5px; border:1px solid var(--line); background:#fff; color:var(--ink2); }
.btn.noans:hover { border-color:var(--navy-3); color:var(--navy); }
.quickhha { position:fixed; right:20px; bottom:20px; z-index:80; width:min(420px, calc(100vw - 40px)); background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-hi); padding:16px; }
.plans { display:flex; flex-direction:column; gap:8px; }
.plan { border:1px solid var(--line); border-radius:12px; background:#fff; }
.plan.stale { border-color:#F6D3B2; }
.plan summary { display:grid; grid-template-columns:1fr auto auto; gap:16px; align-items:center; padding:12px 16px; cursor:pointer; list-style:none; font-size:14px; }
.plan summary::-webkit-details-marker { display:none; }
.plan summary .late { color:var(--orange-dk); font-weight:600; } .plan summary span { color:var(--ink2); font-size:13px; }
.plan-list { display:flex; flex-direction:column; border-top:1px solid var(--line2); padding:6px 8px 10px; max-height:320px; overflow:auto; }
.plan-row { display:grid; grid-template-columns:1fr auto auto; gap:14px; text-align:left; padding:7px 8px; text-decoration:none; color:var(--ink); border-radius:8px; }
.plan-row:hover { background:var(--hover); } .plan-row .late { color:var(--orange-dk); font-weight:600; }
/* Report (manager) */
.rp-n { font:inherit; font-weight:700; color:var(--navy); background:var(--navy-tint); border:0; border-radius:8px; padding:2px 10px; cursor:pointer; }
.rp-n:hover { background:var(--navy); color:#fff; } .rp-zero { color:var(--faint); }
.sheet-lite { position:fixed; right:20px; bottom:20px; z-index:9; width:min(480px, calc(100vw - 40px)); max-height:70vh; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-hi); }
.sheet-lite[hidden] { display:none; }
.rp-head { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line2); } .rp-head .linkbtn { margin-left:auto; }
.rp-body { overflow:auto; padding:8px; } .rp-row { display:grid; grid-template-columns:1fr; gap:2px; width:100%; text-align:left; background:none; border:0; border-radius:8px; padding:8px 10px; cursor:pointer; font:inherit; color:inherit; } .rp-row:hover { background:var(--hover); }
.rp-why { padding:16px 20px; margin-bottom:14px; display:flex; flex-direction:column; gap:8px; } .rp-why > b { margin-bottom:4px; }
.rp-bar { display:grid; grid-template-columns:220px 1fr 40px; gap:10px; align-items:center; font-size:13px; } .rp-bar i { display:block; height:10px; border-radius:6px; background:var(--alert); opacity:.75; } .rp-bar b { text-align:right; }
/* New cases today (Overview) */
.nt-card[hidden] { display:none; } .nt-card table { width:100%; } .nt-card td { vertical-align:top; font-size:13px; }
.nt-src { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; } .nt-chip { background:var(--page); border:1px solid var(--line); border-radius:999px; padding:4px 12px; font-size:13px; } .nt-chip b { color:var(--navy); margin-right:4px; }
/* Report: tabs, coordinator filter, sortable columns */
.rp-tabs { margin:6px 0 14px; flex-wrap:wrap; } .rp-tabs button { padding:10px 10px; }
.rp-who { columns:230px; column-gap:20px; margin-top:4px; } .rp-who > div { break-inside:avoid; padding:1px 0; }
.rp-filter { gap:10px; } .rp-filter input[type=search] { width:220px; }
th.rp-sort { cursor:pointer; user-select:none; } th.rp-sort:hover { color:var(--navy); } th.rp-sort.on { color:var(--navy); }
.rp-rm { font-size:12px; white-space:nowrap; color:var(--muted); margin-left:6px; } .rp-rm:hover { color:var(--alert); }
.pb-acts { white-space:nowrap; }
.pb-acts .linkbtn { display:block; margin:2px 0; }

/* the call queue bar at the top of the case drawer */
.qbar { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin:-8px 0 12px; padding:8px 12px; border-radius:10px; background:var(--navy-tint); color:var(--navy); font-size:13px; }
.qbar > span { display:inline-flex; align-items:center; gap:6px; }
.qbar .qbtns { gap:6px; } .qbar .btn { padding:4px 10px; font-size:12.5px; }

/* One set of colours on every page (UX, Oct 15): Late = red, Due today = blue, Done and Ready to close = green,
   No next step = amber, New = orange, Troublesome = brown. The same word always has the same colour. */
:root { --today:#1D4E73; --today-tint:#E8F1F8; --amber:#7A5600; --amber-tint:#FFF4D6; }
.kpi.hot, .kpi.hot:hover { box-shadow:inset 0 3px 0 var(--alert), var(--shadow); } .kpi.hot .kpi-n { color:var(--alert); }
.kpi.hot:hover { box-shadow:inset 0 3px 0 var(--alert), var(--shadow-hi); }
.card .n.hot { color:var(--alert); }
.pc .today { color:var(--today); }
.plan summary .late, .plan-row .late { color:var(--alert); }
.sec.today, .sec.today .ic { color:var(--today); } .sec.today .pill { background:var(--today-tint); color:var(--today); }
.sec.nonext, .sec.nonext .ic { color:var(--amber); } .sec.nonext .pill { background:var(--amber-tint); color:var(--amber); }
.sec.ok, .sec.ok .ic { color:var(--ok); } .sec.ok .pill { background:var(--ok-tint); color:var(--ok); }
.pb-tag.b-late, .pb-tag.b-cut { background:var(--alert-tint); color:var(--alert); } .pb-reason.b-late b { color:var(--alert); }
.pb-tag.b-today { background:var(--today-tint); color:var(--today); } .pb-reason.b-today b { color:var(--today); }
.pb-tag.b-ok { background:var(--ok-tint); color:var(--ok); } .pb-reason.b-ok b { color:var(--ok); }
.pb-tag.b-nonext { background:var(--amber-tint); color:var(--amber); } .pb-reason.b-nonext b { color:var(--amber); }
.pb-tag.b-plain { background:var(--page); color:var(--ink2); }
/* The case drawer in tabs */
.sheet .dtabs { margin:6px 0 4px; position:sticky; top:-24px; background:#fff; z-index:2; padding-top:4px; }
.sheet .dpane { display:flex; flex-direction:column; gap:12px; } .sheet .dpane > * { flex-shrink:0; }
.sheet .dpane .histlist { margin-top:0; }

/* Log the call inside the case (Oct 15) */
.sheet .quick { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--page); display:flex; flex-direction:column; gap:10px; }
.quick-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .quick-top b { color:var(--navy); font-size:13.5px; white-space:nowrap; }
.quick-top input { flex:1; min-width:200px; height:36px; }
.quick-btns { display:flex; gap:8px; flex-wrap:wrap; } .quick-btns .btn { gap:8px; }
.quick-btns kbd, .qbar kbd { font:600 10.5px/1 inherit; border:1px solid currentColor; border-radius:4px; padding:2px 4px; opacity:.55; }
.sheet .quick .check { margin:0; }
.toast.undo { display:flex; align-items:center; gap:14px; } .toast.undo .linkbtn { color:#fff; font-weight:700; text-decoration:underline; background:none; border:0; cursor:pointer; font-size:13px; }
.hha-float { padding:12px; gap:10px; overflow:auto; } .hha-float-one + .hha-float-one { border-top:1px solid var(--line2); padding-top:10px; }
/* The end of the call queue */
.finished { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:60px 20px; }
.finished .ic { color:var(--ok); } .finished h3 { font-size:24px; }
.fin-k { display:flex; gap:14px; margin:10px 0; } .fin-k div { border:1px solid var(--line); border-radius:12px; padding:14px 20px; min-width:110px; display:flex; flex-direction:column; gap:2px; }
.fin-k b { font-size:28px; color:var(--ink); } .fin-k span { font-size:12.5px; color:var(--ink2); }

/* My day: one progress bar (Oct 15) */
.dayprog { background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px; margin-bottom:16px; display:flex; flex-direction:column; gap:14px; }
.dp-top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.dp-n { font-size:17px; color:var(--ink2); } .dp-n b { font-size:26px; color:var(--ink); letter-spacing:-.02em; }
.dp-chips { display:flex; gap:8px; flex-wrap:wrap; }
.dp-chip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:#fff; border-radius:999px; padding:5px 12px; font:inherit; font-size:13px; color:var(--ink2); cursor:pointer; }
.dp-chip:hover { border-color:var(--navy); color:var(--navy); } .dp-chip b { color:var(--ink); }
.dp-chip .dot { width:8px; height:8px; border-radius:50%; background:var(--ink2); }
.dp-chip.ok .dot { background:var(--ok); } .dp-chip.late .dot { background:var(--alert); } .dp-chip.new .dot { background:var(--orange); } .dp-chip.today .dot { background:var(--today); }
.dp-chip.late b { color:var(--alert); } .dp-chip.pa.late { border-color:#F2C8C3; }
.dp-bar { display:flex; height:12px; border-radius:6px; overflow:hidden; background:var(--line2); }
.dp-bar i { display:block; height:100%; } .dp-bar i + i { border-left:2px solid #fff; }
.dp-bar .ok { background:var(--ok); } .dp-bar .late { background:var(--alert); } .dp-bar .new { background:var(--orange); } .dp-bar .today { background:var(--today); }

/* New case popup (Oct 15) */
.nc-pop { position:fixed; bottom:24px; right:24px; z-index:80; width:min(420px, calc(100vw - 32px)); background:#fff; border:1px solid var(--th-tint); border-top:4px solid var(--orange); border-radius:14px; box-shadow:0 18px 50px rgba(22,37,74,.22); padding:16px; display:flex; flex-direction:column; gap:12px; animation:slideIn .3s cubic-bezier(.2,.8,.2,1) both; }
.nc-pop[hidden] { display:none; }
.nc-pop-head { display:flex; gap:12px; align-items:flex-start; } .nc-pop-head > div { flex:1; } .nc-pop-head b { font-size:15px; color:var(--ink); }
.nc-pop-ic { width:38px; height:38px; border-radius:10px; background:var(--orange-tint); color:var(--orange-dk); display:grid; place-items:center; flex:none; }
.nc-pop-list { display:flex; flex-direction:column; gap:4px; max-height:240px; overflow:auto; }
.nc-pop-row { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; background:var(--page); border:1px solid var(--line2); border-radius:10px; padding:9px 12px; font:inherit; cursor:pointer; color:inherit; }
.nc-pop-row:hover { border-color:var(--navy); }
.nc-pop-foot { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .nc-pop-foot .check { margin:0; }
.nc-pop-act { display:flex; justify-content:flex-end; gap:8px; border-top:1px solid var(--line2); padding-top:12px; }

/* Problems: who needs help (Oct 15) */
.who-help { margin-bottom:18px; } .who-help td { vertical-align:middle; } .who-help tr.on td { background:var(--navy-tint); }
.who-help .late { color:var(--alert); } .wh-acts { display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; } .wh-acts .btn { height:32px; padding:0 12px; font-size:13px; }
.mv-list { display:flex; flex-direction:column; gap:4px; max-height:280px; overflow:auto; border:1px solid var(--line2); border-radius:10px; padding:8px 10px; }
.mv-list[hidden] { display:none; }

/* hover explanations for HHA / Medicaid terms */
abbr.gl { text-decoration:none; border-bottom:1px dotted rgba(91,107,154,.55); cursor:help; }
.tag abbr.gl, .btn abbr.gl, button abbr.gl, .side abbr.gl { border-bottom:0; }

/* Search right where you type (Oct 15) */
.tb-search { position:relative; }
.tb-drop { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:40; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 40px rgba(22,37,74,.16); padding:6px; display:flex; flex-direction:column; gap:2px; max-height:420px; overflow:auto; }
.tb-drop[hidden] { display:none; }
.tb-hit { display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; background:none; border:0; border-radius:8px; padding:8px 10px; font:inherit; color:inherit; cursor:pointer; }
.tb-hit:hover, .tb-hit.on { background:var(--navy-tint); } .tb-hit b { color:var(--navy); font-size:14px; } .tb-hit .sub { font-size:12.5px; }
.tb-all { background:none; border:0; border-top:1px solid var(--line2); padding:9px 10px; text-align:left; font:inherit; font-weight:600; color:var(--navy); cursor:pointer; }
.tb-none { padding:12px; color:var(--ink2); font-size:13px; }

/* Design pass (Oct 15): no font ligatures (the uppercase "TH" of THURSDAY drew as one clipped glyph) */
html { font-variant-ligatures:none; font-feature-settings:'liga' 0, 'clig' 0, 'dlig' 0; }

/* Design pass 2 (Oct 15) */
/* HHA status: a small coloured dot and plain text, so red and green only ever mean late and done */
.spill.sdot-l { background:none !important; color:var(--ink2) !important; padding:0; font-weight:600; letter-spacing:0; text-transform:none; font-size:12px; display:inline-flex; align-items:center; gap:6px; border-radius:0; }
.spill.sdot-l .sdot { width:8px; height:8px; margin:0; flex:none; }
/* Three kinds of tags: a problem (red outline), information (grey), the program (navy). Done stays green, New orange. */
.tag:not(.pb-tag):not(.t-late) { background:var(--page); color:var(--ink2); border:1px solid var(--line); }
.tag.t-cut, .tag.t-trouble, .tag.t-decide, .tag.t-sent.stale, .tag.pb-tag.r-trouble, .tag.pb-tag.r-hr, .tag.pb-tag.r-overdue, .tag.pb-tag.r-cutoff, .tag.pb-tag.r-medicaid, .tag.pb-tag.r-hha, .tag.pb-tag.r-stuck, .tag.pb-tag.r-cfeec
  { background:#fff !important; color:var(--alert) !important; border:1px solid #F2C8C3 !important; }
.tag.t-track, .tag.t-track.mltc, .tag.t-track.map, .tag.t-opwdd, .tag.t-code, .tag.c95, .tag.t-lang, .tag.t-cad
  { background:var(--navy-tint) !important; color:var(--navy) !important; border:1px solid #D5DCEB !important; }
.tag.t-ok { background:var(--ok-tint) !important; color:var(--ok) !important; border:1px solid #CFE5D7 !important; }
.tag.t-new { background:var(--orange-tint) !important; color:var(--th-accent3) !important; border:1px solid var(--th-peach) !important; }
.tag.t-next { background:var(--today-tint) !important; color:var(--today) !important; border:1px solid #CFE1EF !important; }
/* chips for near a cutoff / Medicaid problem in the progress bar row */
.dp-chip.info.late { border-color:#F2C8C3; color:var(--alert); } .dp-chip.info.late b { color:var(--alert); } .dp-chip.info .ic { flex:none; }
/* the page header clipped the first letter of the date ("THURSDAY" drew as "ΓHURSDAY"): let glyphs show past its edge */
.head { overflow:visible !important; }
/* the call buttons in the case: one row */
.quick-btns { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; }
.quick-btns .btn { justify-content:center; padding:0 8px; font-size:13px; white-space:nowrap; min-width:0; }
.quick-btns kbd { display:none; } .quick-btns .btn:hover kbd, .quick-btns .btn:focus-visible kbd { display:inline; }

/* Design pass 3 (Oct 15) */
/* the case: the name, phones and the call bar stay on top while the rest scrolls; one ✕ to close (or stop calling) */
.sheet .dhead { position:sticky; top:-24px; z-index:4; background:#fff; margin:-24px -24px 0; padding:20px 24px 12px; border-bottom:1px solid var(--line2); display:flex; flex-direction:column; gap:12px; }
.sheet .dtabs { position:static; }
.xbtn { width:34px; height:34px; flex:none; border-radius:9px; border:1px solid var(--line); background:#fff; color:var(--ink2); font-size:15px; line-height:1; cursor:pointer; display:grid; place-items:center; }
.xbtn:hover { border-color:var(--navy); color:var(--navy); background:var(--navy-tint); } .xbtn:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }
/* readable grey text (contrast 4.5:1 or more on white) */
:root { --muted:#5D6779; }
/* one place for new-case alerts: the popup and the bell (the top-bar pill is gone) */
.nc-btn { display:none !important; }
/* Problems: "What to do" is the widest column */
.pb-table table { table-layout:auto; } .pb-table td.pb-todo { width:34%; min-width:280px; } .pb-table td.pb-check { width:15%; max-width:220px; } .pb-table td.pb-acts { width:1%; white-space:nowrap; }
/* "Saved ✓": a small check that pops in the toast */
.toast.undo .saved-ok { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--ok); color:#fff; font-size:12px; animation:okPop .45s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes okPop { from { transform:scale(.2); opacity:0; } to { transform:scale(1); opacity:1; } }
.dayprog .dp-bar i { transition:width .6s cubic-bezier(.2,.8,.2,1); }
/* Overview (managers): "More numbers" folded */
.more-nums { margin:-4px 0 18px; } .more-nums > summary { cursor:pointer; color:var(--ink2); font-weight:600; font-size:13.5px; padding:6px 0 10px; list-style:none; display:inline-flex; align-items:center; gap:6px; }
.more-nums > summary::before { content:'▸'; transition:transform .2s; } .more-nums[open] > summary::before { transform:rotate(90deg); }
.more-nums > summary::-webkit-details-marker { display:none; }
/* Team: admin lists folded; the same section spacing as the other pages */
.admin-fold { margin-top:26px; border-top:1px solid var(--line); padding-top:14px; }
.admin-fold > summary { cursor:pointer; font-weight:600; color:var(--navy); font-size:14px; list-style:none; display:flex; align-items:center; gap:8px; padding:6px 0; }
.admin-fold > summary::-webkit-details-marker { display:none; } .admin-fold > summary::before { content:'▸'; transition:transform .2s; } .admin-fold[open] > summary::before { transform:rotate(90deg); }
main .sec { margin:28px 0 10px; } main .panel { margin-bottom:6px; } main .note-foot { margin:0 0 10px; }
.pb-table td:nth-child(4) { min-width:170px; } .pb-table td:nth-child(4) .pb-tag { white-space:normal; line-height:1.35; }

/* long lists: the first rows, then Show more (audit, Oct 15) */
.howto { font-size:12.5px; color:var(--ink2); background:var(--page); border:1px dashed var(--line); border-radius:8px; padding:8px 12px; margin:0 0 14px; display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; }
.howto > b { color:var(--navy); } .howto span b { color:var(--ink); }
.wd-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 12px; }
.wd-bar .btn[aria-pressed=true] { background:var(--navy); border-color:var(--navy); color:#fff; }
.wd-bar input[type=date] { height:var(--btn-h); border:1px solid var(--line); border-radius:8px; padding:0 8px; font:inherit; font-size:13px; margin-left:4px; }
.wd-list { margin-top:6px; } .wd-list summary { list-style:none; cursor:pointer; } .wd-list summary::-webkit-details-marker { display:none; }
.wd-exp > td { background:var(--page); padding:6px 14px 10px; }
.wd-items { margin-top:0; font-size:12.5px; background:var(--card); border:1px solid var(--line2); border-radius:8px; } .wd-items td { padding:6px 8px; border-top:1px solid var(--line2); } .wd-items tr:first-child td { border-top:0; }
.showmore { display:flex; justify-content:center; padding:12px; border-top:1px solid var(--line2); }

/* Readable sizes (audit, Oct 15): nothing people must read is under 12px */
.tag { font-size:12px; } .row .do .tag { font-size:11.5px; padding:2px 8px; }
td .sub, .whyline .sub, .row details.aisug .sub, .privacy { font-size:12px; }
.ai-bill-bars span { font-size:11.5px; }

/* The step bar (owner, Oct 16): the workflow's steps, the current one filled; the rule of a step is its tooltip */
.stepbar { display:flex; align-items:flex-start; gap:0; margin:6px 0 4px; max-width:100%; }
.stepbar.full { flex-wrap:nowrap; overflow:hidden; }
.stepbar .spb-step { position:relative; display:flex; flex-direction:column; align-items:center; flex:1 1 0; min-width:0; cursor:default; }
.stepbar .spb-step i { display:block; width:10px; height:10px; border-radius:50%; background:var(--card); border:2px solid var(--line); z-index:1; }
.stepbar .spb-step::before { content:''; position:absolute; top:4px; left:50%; right:-50%; height:2px; background:var(--line); }
.stepbar .spb-step:last-child::before { display:none; }
.stepbar .spb-step.done i { background:var(--navy); border-color:var(--navy); } .stepbar .spb-step.done::before { background:var(--navy); }
.stepbar .spb-step.missed i { background:var(--card); border-color:var(--alert); border-style:dashed; } .stepbar .spb-step.missed b { color:var(--alert); }
.stepbar .spb-step.now i { background:var(--orange); border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-tint); }
.stepbar .spb-step b { font-size:10.5px; font-weight:600; color:var(--muted); margin-top:5px; text-align:center; line-height:1.2; padding:0 3px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.stepbar .spb-step.now b { color:var(--ink); } .stepbar .spb-step.done b { color:var(--ink2); }
.stepbar.compact { align-items:center; gap:0; margin:4px 0 0; }
.stepbar.compact .spb-step { flex:0 0 14px; width:14px; } .stepbar.compact .spb-step i { width:8px; height:8px; border-width:1.5px; } .stepbar.compact .spb-step::before { top:3px; height:1.5px; }
.stepbar.compact .spb-step.now i { box-shadow:0 0 0 2px var(--orange-tint); }
.stepbar .spb-name { font-size:11px; font-weight:700; color:var(--ink2); margin-right:8px; text-transform:uppercase; letter-spacing:.04em; }
.stepbar .spb-now { font-size:11.5px; color:var(--ink); margin-left:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stepbar .spb-unclear { font-size:11px; color:var(--orange-dk); margin-left:8px; white-space:nowrap; }
.pb-todo .stepbar.full { margin:0 0 8px; max-width:420px; }
.row .stepbar.compact { max-width:100%; }

/* UX round (Oct 16): one sentence per row; the rest under More */
.row .rmore { margin-top:4px; } .row .rmore > summary { list-style:none; cursor:pointer; font-size:12px; color:var(--navy); font-weight:600; display:inline-block; }
.row .rmore > summary::-webkit-details-marker { display:none; } .row .rmore > summary::before { content:'▸ '; } .row .rmore[open] > summary::before { content:'▾ '; }
.row .rmore > div { margin-top:6px; font-size:12.5px; color:var(--ink2); line-height:1.45; } .row .rmore .mfull { color:var(--ink); }
.row .rmore .aisug-in .ic { vertical-align:-2px; color:var(--navy-2); }
body.focus .row .rmore { display:none; }
.nowbox { border:1px solid var(--line); border-left:3px solid var(--orange); border-radius:var(--radius); background:var(--card); padding:12px 14px; margin:14px 0 12px; }
.nowbox .nowtext { font-size:14.5px; color:var(--ink); line-height:1.45; }
.nowbox .nowwhy { margin-top:6px; font-size:12.5px; line-height:1.45; }
.nowbox .nownext { display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line2); color:var(--ok); } .nowbox .nownext > span { flex:1; color:var(--ink); }

.startwith { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:-4px 0 14px; }
.startwith .sw-l { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--ink2); text-transform:uppercase; letter-spacing:.05em; margin-right:2px; }
.startwith .sw-c { border:1px solid var(--line); background:var(--card); border-radius:999px; padding:4px 12px 4px 6px; font:inherit; font-size:13px; cursor:pointer; color:var(--ink); display:inline-flex; align-items:center; gap:6px; }
.startwith .sw-c:hover { border-color:var(--navy-3); } .startwith .sw-c b { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--navy); color:#fff; font-size:11px; }
.startwith .sw-late { color:var(--alert); font-size:11.5px; font-weight:600; } .startwith .sw-new { color:var(--orange-dk); font-size:11.5px; font-weight:600; }
.pb-by { display:flex; align-items:center; gap:6px; margin:14px 0 0; } .pb-by .btn.on { background:var(--navy); border-color:var(--navy); color:#fff; }
/* Phone (UX round, Oct 16): rows use the full width; the sidebar keeps the menu and the person only */
@media (max-width: 720px) {
  .side .stats, .side .foot, .side #foot, aside.side .foot, .side .aipulse, .side .side-eyebrow { display:none !important; }
  .row { grid-template-columns:28px minmax(0,1fr); gap:6px 10px; padding:12px; }
  .row > .do, .row > .act, .row > details, .row > .lastnone { grid-column:2 / -1; min-width:0; }
  .row .act { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
  .stepbar.compact .spb-name { display:none; }
  .startwith .sw-c { font-size:12.5px; }
  .nowbox .nownext { flex-wrap:wrap; }
}

/* the step bar's warning goes on its own line, so the steps keep the full width (owner, Oct 16 screenshot) */
.stepbar.full { flex-wrap:wrap; } .stepbar.full .spb-step { flex:1 1 0; min-width:56px; }
.stepbar.full .spb-unclear { flex:0 0 100%; order:9; white-space:normal; margin:8px 0 0; }

/* Rehab / CHHA cases: the initial finding, the four steps and the updates (owner, Oct 16), highlighted in the case window */
.rehabbox { margin:12px 0 0; padding:12px 14px; border:1px solid var(--th-peach); border-left:4px solid var(--orange); border-radius:var(--radius); background:var(--orange-tint); }
.rb-head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.rb-stage { font-weight:700; color:var(--navy); font-size:13.5px; }
.rb-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px 18px; }
.rb-item { font-size:13.5px; min-width:0; } .rb-item .rb-k { display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); font-weight:700; margin-bottom:2px; }
.rb-item b { display:block; color:var(--ink); } .rb-item b.rb-miss { color:var(--orange-dk); } .rb-item small { display:block; color:var(--ink2); font-size:12px; margin-top:2px; line-height:1.4; }
.rb-steps-old { display:flex; flex-wrap:wrap; gap:4px 6px; margin:10px 0 0; font-size:12.5px; }
.rb-steps span { padding:2px 9px; border-radius:11px; background:#fff; border:1px solid var(--line); color:var(--ink2); }
.rb-steps span.done { color:var(--ok); border-color:#CFE5D7; background:var(--ok-tint); } .rb-steps span.now { background:var(--navy); color:#fff; border-color:var(--navy); font-weight:700; }
.rb-why { margin-top:6px; color:var(--orange-dk); display:flex; gap:6px; align-items:flex-start; }
.rb-upd { margin-top:8px; font-size:13px; } .rb-upd summary { cursor:pointer; font-weight:600; color:var(--navy); } .rb-list { margin-top:6px; display:grid; gap:4px; } .rb-list .rb-at { display:inline-block; min-width:84px; color:var(--ink2); }
.rb-foot { margin-top:8px; font-size:11.5px; }

/* "Your week" on My day (owner, Oct 16) and "Ask the AI where this case is" in the case window */
.yourweek { margin-top:10px; font-size:13px; line-height:1.6; } .yourweek:empty { display:none; } .yourweek b { color:var(--ink); } .yourweek svg { vertical-align:-2px; margin-right:2px; }
.aiask { margin:8px 0 0; font-size:13px; } .aiask .sub { margin-left:8px; }
.aiout { margin-top:8px; padding:10px 12px; border:1px solid var(--line); border-left:3px solid var(--navy-3); border-radius:var(--radius); background:var(--navy-tint); font-size:13.5px; }
.aiout b { color:var(--navy); } .aiout .q { display:block; margin-top:4px; color:var(--ink2); font-style:italic; } .aiout .rc-b { margin-top:8px; }
.aiout.same { border-left-color:var(--ok); } .aiout.differs { border-left-color:var(--orange); }
.rb-ai { margin-top:8px; font-size:13px; padding:8px 10px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); } .rb-ai b { color:var(--navy); }

/* UX round 3 (Oct 16): a compact rehab box, the call buttons at the bottom on a phone, darker grey text */
.rehabbox { padding:10px 12px; margin:14px 0 0; } .rb-head { margin-bottom:6px; }
.rb-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px 14px; }
.rb-item { font-size:13px; } .rb-item[title] { cursor:help; } .rb-item[title] b { text-decoration:underline dotted var(--navy-3); text-underline-offset:3px; }
.rb-item b { overflow-wrap:anywhere; } .rb-item small { font-size:11.5px; }
.rb-low { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-top:6px; flex-wrap:wrap; } .rb-low .rb-upd { margin-top:0; flex:1 1 auto; } .rb-low .rb-foot { margin-top:0; }
.qfix { display:none; }
@media (max-width:860px) { .rb-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) {
  .sheet .box.wide { padding-bottom:84px; }
  .qfix { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; position:fixed; left:0; right:0; bottom:0; z-index:12; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:var(--card); border-top:1px solid var(--line); box-shadow:0 -4px 14px rgba(22,37,74,.12); }
  .qfix .btn { padding:8px 4px; font-size:12.5px; justify-content:center; white-space:normal; line-height:1.2; min-height:44px; }
  .quick .quick-btns { display:none; }
  .dtabs { overflow-x:auto; flex-wrap:nowrap; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  .stepbar.full .spb-step b { font-size:10.5px; }
  .rb-grid { grid-template-columns:1fr 1fr; }
  .yourweek { font-size:12.5px; }
}
@media (max-width:380px) { .rb-grid { grid-template-columns:1fr; } }

.sq-btn { align-items:center; } .sq-btn span { display:flex; flex-direction:column; line-height:1.15; text-align:left; } .sq-btn small { font-size:11px; font-weight:500; opacity:.9; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Cottage Helper admin (Oct 16) */
.ha-k { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin:0 0 6px; } .ha-k > div { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; }
.ha-k b { display:block; font-size:20px; color:var(--navy); } .ha-k span { font-size:12.5px; color:var(--ink2); }
.ha-chips { display:flex; flex-wrap:wrap; gap:6px; } .ha-chip { display:inline-flex; gap:6px; align-items:center; padding:3px 6px 3px 10px; border:1px solid var(--line); border-radius:14px; background:var(--navy-tint); font-size:13px; }
.ha-grid { overflow:auto; max-height:560px; border:1px solid var(--line); border-radius:var(--radius); } .ha-grid table { min-width:100%; border-collapse:collapse; font-size:12.5px; }
.ha-grid th { position:sticky; top:0; background:var(--card); z-index:1; white-space:nowrap; text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); }
.ha-grid td { padding:2px 3px; border-bottom:1px solid var(--line); vertical-align:top; min-width:120px; } .ha-grid td:last-child { min-width:0; }
.ha-grid textarea { width:100%; min-width:120px; min-height:0; height:30px; border:1px solid transparent; border-radius:6px; padding:5px 6px; font:inherit; line-height:1.35; resize:vertical; background:transparent; overflow:hidden; box-sizing:border-box; }
.ha-pad { padding:14px 16px; }
.ha-grid textarea:hover { border-color:var(--line); } .ha-grid textarea:focus { border-color:var(--navy-3); background:#fff; outline:none; }

/* the rate sheet and the plain-words changes (Oct 16) */

.ha-changes { margin:8px 0 0; padding-left:0; list-style:none; display:grid; gap:4px; font-size:13px; } .ha-from { text-decoration:line-through; color:var(--ink2); } .ha-to { color:var(--ok); font-weight:700; }
/* the calculator's rules and verdicts (Oct 16) */
.rs-rules { margin-bottom:14px; } .rs-locs { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px; font-weight:400; } .rs-bulk { margin-bottom:12px; } .rs-locs label { display:flex; align-items:center; gap:4px; white-space:nowrap; } .rs-rgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px 14px; }
.rs-v { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; font-weight:700; white-space:normal; line-height:1.3; } .rs-v.ok { background:var(--ok-tint); color:var(--ok); } .rs-v.ask { background:var(--orange-tint); color:var(--orange-dk); } .rs-v.no { background:var(--alert-tint); color:var(--alert); }

/* like the Excel: profit per hour under the line red, else green (Oct 16) */





/* Rate sheet (redesign, Oct 16): calm table, chips, one panel open at a time, a save bar only when something changed */
.rs-try { align-items:flex-end; gap:8px; } .rs-try > .sub { align-self:center; margin-right:2px; } .rs-try .field { width:104px; }
.rs-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:4px 0 14px; }
.rs-kpis > div { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:10px 14px; display:flex; flex-direction:column; }
.rs-kpis b { font-size:20px; color:var(--navy); font-variant-numeric:tabular-nums; } .rs-kpis span { font-size:12px; color:var(--muted, #5B6B9A); }
.rs-kpis .bad b { color:var(--alert); } .rs-kpis .warn b { color:var(--orange-dk); }
.rs-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; } .rs-grow { flex:1; }
.rs-tab[aria-expanded="true"] { background:var(--navy-tint); border-color:var(--navy); }
.rs-find { width:260px; max-width:100%; padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:inherit; font:inherit; font-size:13px; }
.rs-pn { margin-bottom:12px; } .rs-how { margin:0; padding-left:18px; line-height:1.7; font-size:13.5px; }
.rs-wrap { padding:0; overflow:hidden; } .rs-scroll { overflow:auto; max-height:calc(100vh - 220px); }
table.rs { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; font-variant-numeric:tabular-nums; }
table.rs th { position:sticky; top:0; z-index:2; background:var(--card); text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--navy-2); padding:8px 6px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.rs tr.rs-grp th { top:0; padding:8px 8px 2px; border-bottom:0; color:var(--navy-3); font-size:10.5px; text-align:center; }
table.rs tr.rs-grp th[colspan]:not(:empty) { border-bottom:2px solid var(--navy-tint); }
table.rs thead tr:nth-child(2) th { top:26px; }
table.rs td { padding:6px 6px; border-bottom:1px solid var(--line); vertical-align:middle; white-space:nowrap; }
table.rs .rs-num { text-align:right; } table.rs .rs-mute { color:var(--navy-2); font-size:12.5px; }
table.rs tr.rs-sec td { background:var(--navy-tint); color:var(--navy); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:7px 10px; }
table.rs tr.rs-plan td { border-top:1px solid var(--line2, #dde2ee); } table.rs tbody tr:hover td { background:color-mix(in srgb, var(--navy-tint) 55%, transparent); }
table.rs tr.rs-hit td { background:var(--orange-tint) !important; } table.rs tr.rs-dirty td:first-child { box-shadow:inset 3px 0 0 var(--orange); }
.rs-pl b { color:var(--navy); font-size:13.5px; } .rs-pl { min-width:120px; max-width:150px; white-space:normal !important; }
.rs-pact { display:flex; gap:10px; margin-top:3px; font-size:11.5px; opacity:.55; transition:opacity .15s; } table.rs tr:hover .rs-pact, .rs-pact:focus-within { opacity:1; }
.rs-pact .linkbtn { font-size:11.5px; } .rs-delp { color:var(--alert) !important; }
.rs-svc { display:inline-block; margin:1px 6px 1px 0; padding:2px 8px; border-radius:6px; background:var(--navy-tint); color:var(--navy); font-size:11.5px; font-weight:700; }
.rs-loc { white-space:normal !important; min-width:170px; max-width:230px; } .rs-chip { white-space:nowrap; } .rs-chip { display:inline-block; margin:1px 4px 1px 0; padding:1px 7px; border:1px solid var(--line); border-radius:999px; font-size:11.5px; color:var(--navy); background:var(--card); }
table.rs .rs-in { width:54px; padding:5px 6px; border:1px solid transparent; border-radius:6px; background:var(--navy-tint); color:inherit; font:inherit; font-size:13px; text-align:right; font-variant-numeric:tabular-nums; transition:border-color .12s, background .12s; }
table.rs .rs-in:hover { border-color:var(--line); } table.rs .rs-in:focus { outline:none; border-color:var(--navy); background:var(--card); box-shadow:0 0 0 3px var(--navy-tint); }
table.rs .rs-tin { display:block; width:100%; min-width:130px; margin:2px 0; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:inherit; font:inherit; font-size:13px; } table.rs .rs-tin.rs-tplan { font-weight:700; margin-bottom:4px; }
table.rs .rs-in.manual { border-color:var(--orange); background:var(--orange-tint); }
.rs-x15 { text-transform:none; color:var(--orange-dk); letter-spacing:0; }
.rs-ph { display:inline-block; min-width:56px; padding:3px 8px; border-radius:999px; font-weight:800; text-align:right; } .rs-ph.good { background:var(--ok-tint); color:var(--ok); } .rs-ph.bad { background:var(--alert-tint); color:var(--alert); }
table.rs .rs-neg { color:var(--alert); font-weight:700; } .rs-pay { font-size:10.5px; color:var(--faint); margin-top:2px; }
.rs-ans { white-space:normal !important; min-width:96px; } .rs-ans .sub { font-size:11px; margin-top:2px; }
.rs-x .rs-del { color:var(--navy-3) !important; font-size:13px; padding:2px 6px; border-radius:6px; } .rs-x .rs-del:hover { color:var(--alert) !important; background:var(--alert-tint); }
.rs-savebar { position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:50; width:min(640px, calc(100% - 32px)); display:flex; align-items:center; gap:8px; padding:10px 12px 10px 18px; background:var(--card); border:1.5px solid var(--orange); border-radius:14px; box-shadow:0 10px 30px rgba(24,33,58,.18); font-weight:700; color:var(--orange-dk); }
.rs-foot { padding:10px 14px; }
@media (max-width: 900px) { .rs-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); } .rs-find { width:100%; } .rs-grow { display:none; } }
@media (max-width: 560px) { .rs-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.rs-savebar[hidden] { display:none; }
/* charts (look pass, Oct 16) */
.chart { margin:6px 0 2px; } .chart svg { width:100%; height:auto; max-height:220px; display:block; } .chart svg text { font-family:inherit; }
.ch-axis { stroke:var(--line); stroke-width:1; } .ch-v { font-size:10px; fill:var(--ink2); font-weight:700; } .ch-l { font-size:10px; fill:var(--ink2); }
.ch-legend { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:6px; font-size:12px; color:var(--ink2); } .ch-legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.hb { display:grid; gap:6px; } .hb-row { display:grid; grid-template-columns:minmax(90px,150px) 1fr auto; align-items:center; gap:10px; font-size:13px; }
.hb-l { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); } .hb-bar { position:relative; height:12px; background:var(--line2); border-radius:999px; overflow:hidden; }
.hb-bar i { position:absolute; left:0; top:0; bottom:0; border-radius:999px; } .hb-bar .hb-sub { background:var(--ok); opacity:.85; } .hb-v { font-variant-numeric:tabular-nums; color:var(--navy); min-width:32px; text-align:right; }
.rp-charts { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; } @media (max-width: 900px) { .rp-charts { grid-template-columns:1fr; } }
/* keyboard focus everywhere (look pass, Oct 16) */
a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .linkbtn:focus-visible, [role=tab]:focus-visible, summary:focus-visible { outline:2px solid var(--orange); outline-offset:2px; border-radius:4px; }
.btn.quiet.signout { color:var(--ink2); } .btn.quiet.signout:hover { color:var(--alert); border-color:var(--alert); }
/* Rate sheet: the finder (county, plan type, hours) and the best options; Edit mode */
.rs-finder { padding:16px 18px; margin-bottom:14px; }
.rs-fgrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto; gap:12px; align-items:end; }
.rs-clear { align-self:center; margin-top:18px; font-size:12.5px; }
.rs-best { margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }
.rs-bh { display:flex; align-items:baseline; gap:10px; margin-bottom:8px; } .rs-bh b { color:var(--navy); font-size:14px; }
.rs-blist { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.rs-b { display:grid; grid-template-columns:28px minmax(0,1fr) auto 112px; align-items:center; gap:12px; padding:9px 12px; border:1px solid var(--line); border-radius:12px; cursor:pointer; background:var(--card); transition:border-color .12s, box-shadow .12s; }
.rs-b:hover { border-color:var(--navy-3); box-shadow:0 2px 10px rgba(24,33,58,.06); }
.rs-b:first-child { border-color:var(--ok); background:color-mix(in srgb, var(--ok-tint) 45%, var(--card)); }
.rs-b.no { opacity:.65; }
.rs-rank { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--navy-tint); color:var(--navy); font-weight:800; font-size:12.5px; }
.rs-b:first-child .rs-rank { background:var(--ok); color:#fff; }
.rs-bname { display:flex; flex-direction:column; gap:3px; min-width:0; } .rs-bname b { color:var(--navy); font-size:14px; } .rs-bname > span { display:flex; flex-wrap:wrap; gap:2px; }
.rs-bnum { display:flex; align-items:baseline; gap:8px; white-space:nowrap; } .rs-bnum .rs-ph { font-size:14px; }
.rs-b .rs-v { justify-self:end; }
.rs-editbar { display:flex; align-items:center; gap:10px; padding:10px 14px; margin-bottom:12px; border:1.5px dashed var(--orange); border-radius:var(--radius); background:var(--orange-tint); color:var(--orange-dk); }
.rs-editbar b { display:flex; align-items:center; gap:6px; }
.rs-thead { padding:10px 14px; border-bottom:1px solid var(--line); font-size:13px; color:var(--navy-2); } .rs-thead b { color:var(--navy); } .rs-bad { color:var(--alert); font-weight:700; }
.rs-sm { font-size:10.5px; color:var(--orange-dk); font-weight:700; } table.rs .rs-ro { color:var(--navy-2); }
table.rs tr.rs-flash td { animation:flash 1.6s ease; }
@media (max-width: 900px) { .rs-fgrid { grid-template-columns:repeat(2,minmax(0,1fr)); } .rs-b { grid-template-columns:26px minmax(0,1fr) auto; } .rs-b .rs-v { display:none; } }
@media (max-width: 560px) { .rs-fgrid { grid-template-columns:1fr; } .rs-bnum .sub { display:none; } }
/* Cottage Helper control: people, computers, activity, the emergency switch */
.hc-scroll { overflow:auto; } table.hc-t { width:100%; border-collapse:collapse; font-size:13px; }
table.hc-t th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--navy-2); padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.hc-t td { padding:8px; border-bottom:1px solid var(--line); vertical-align:middle; } table.hc-t .hc-f { text-align:center; white-space:normal; max-width:92px; }
table.hc-t tr.hc-offrow td { color:var(--faint); } table.hc-t tr.hc-offrow td b { color:var(--ink2); }
.hc-sw { position:relative; display:inline-block; width:38px; height:22px; cursor:pointer; } .hc-sw input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.hc-sw span { position:absolute; inset:0; border-radius:999px; background:var(--line); transition:background .15s; pointer-events:none; } .hc-sw span::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s; }
.hc-sw input:checked + span { background:var(--ok); } .hc-sw input:checked + span::after { transform:translateX(16px); } .hc-sw input:focus-visible + span { box-shadow:0 0 0 3px var(--navy-tint); }
.hc-st { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:700; } .hc-st.approved { background:var(--ok-tint); color:var(--ok); } .hc-st.pending { background:var(--orange-tint); color:var(--orange-dk); } .hc-st.blocked { background:var(--alert-tint); color:var(--alert); }
.hc-act { white-space:nowrap; } .hc-act .btn { margin-right:6px; } .btn.sm { padding:4px 12px; font-size:12px; }
.btn.hc-block { color:var(--alert); border-color:var(--alert); } .hc-red { color:var(--alert); } .hc-rm { color:var(--navy-3) !important; } .hc-rm:hover { color:var(--alert) !important; }
.hc-off { display:flex; align-items:center; gap:10px; padding:12px 16px; margin:12px 0; border-radius:var(--radius); background:var(--alert-tint); color:var(--alert); border:1.5px solid var(--alert); }
/* Cottage Helper page (redesign, Oct 16): tabs, people cards, computers, ePACES checks joined with our intake */
.hp-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:4px 0 16px; overflow-x:auto; }
.hp-tabs button { display:inline-flex; align-items:center; gap:8px; background:none; border:0; border-bottom:2px solid transparent; padding:10px 14px; margin-bottom:-1px; font:inherit; font-weight:700; font-size:13.5px; color:var(--ink2); cursor:pointer; white-space:nowrap; }
.hp-tabs button:hover { color:var(--navy); } .hp-tabs button[aria-selected=true] { color:var(--navy); border-bottom-color:var(--orange); }
.hp-tabs .n { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--navy-tint); color:var(--navy); font-size:11.5px; } .hp-tabs .n.warn { background:var(--orange-tint); color:var(--orange-dk); }
.hp-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:4px 0 14px; }
.hp-kpis > div { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; display:flex; flex-direction:column; gap:2px; }
.hp-kpis b { font-size:22px; color:var(--navy); font-variant-numeric:tabular-nums; letter-spacing:-.01em; } .hp-kpis span { font-size:12px; color:var(--ink2); }
.hp-kpis .good b { color:var(--ok); } .hp-kpis .warn b { color:var(--orange-dk); } .hp-kpis .bad b { color:var(--alert); }
.hp-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; } .hp-bar .sub { margin-right:auto; }
.hp-people { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:12px; }
.hp-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; display:flex; flex-direction:column; gap:10px; transition:border-color .12s, box-shadow .12s; }
.hp-card:hover { border-color:#CBD3E1; box-shadow:var(--shadow-hi); } .hp-card.off { background:var(--page); } .hp-card.off .hp-name b { color:var(--ink2); }
.hp-head { display:flex; align-items:center; gap:10px; } .hp-av { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--navy-tint); color:var(--navy); font-weight:800; font-size:14px; flex:none; }
.hp-card.off .hp-av { background:var(--line2); color:var(--faint); }
.hp-name { min-width:0; flex:1; } .hp-name b { display:block; color:var(--navy); font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hp-name .sub { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.hp-parts { display:flex; flex-wrap:wrap; gap:6px; }
.hp-part { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:var(--card); font-size:12px; font-weight:600; color:var(--ink2); cursor:pointer; user-select:none; transition:background .12s, color .12s, border-color .12s; }
.hp-part input { position:absolute; opacity:0; pointer-events:none; } .hp-part .dot { width:8px; height:8px; border-radius:50%; background:var(--line); }
.hp-part.on { background:var(--ok-tint); border-color:transparent; color:var(--ok); } .hp-part.on .dot { background:var(--ok); }
.hp-part:hover { border-color:var(--navy-3); } .hp-part:focus-within { box-shadow:0 0 0 3px var(--navy-tint); } .hp-card.off .hp-part { opacity:.55; pointer-events:none; }
.hp-facts { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; padding-top:10px; border-top:1px solid var(--line2); } .hp-facts > div { display:flex; flex-direction:column; } .hp-facts b { font-size:14px; color:var(--navy); font-variant-numeric:tabular-nums; } .hp-facts span { font-size:11.5px; color:var(--ink2); }
.hp-foot { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--ink2); } .hp-foot .linkbtn { font-size:12px; } .hp-foot .rm { margin-left:auto; color:var(--navy-3); } .hp-foot .rm:hover { color:var(--alert); }
.hp-empty { grid-column:1/-1; }
.hp-dev { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); margin-bottom:8px; }
.hp-dev.pending { border-color:var(--orange); background:var(--orange-tint); } .hp-dev .ic { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--navy-tint); color:var(--navy); }
.hp-dev.pending .ic { background:var(--orange); color:#fff; } .hp-dev .acts { display:flex; gap:6px; }
.hp-filters { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; align-items:end; }
.hp-filters .field input, .hp-filters .field select { width:100%; }
.hp-sum { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin:12px 0; } .hp-sum > div { padding:8px 12px; border-radius:10px; background:var(--page); border:1px solid var(--line2); } .hp-sum b { display:block; font-size:18px; color:var(--navy); font-variant-numeric:tabular-nums; } .hp-sum span { font-size:11.5px; color:var(--ink2); }
.hp-sum .came b { color:var(--ok); } .hp-sum .none b { color:var(--ink2); } .hp-sum .bad b { color:var(--alert); } .hp-sum .warn b { color:var(--orange-dk); }
.hp-side { display:inline-block; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.hp-side.came { background:var(--ok-tint); color:var(--ok); } .hp-side.intake { background:var(--navy-tint); color:var(--navy); } .hp-side.lost { background:var(--alert-tint); color:var(--alert); } .hp-side.hold { background:var(--orange-tint); color:var(--orange-dk); } .hp-side.none { background:var(--line2); color:var(--ink2); }
.hp-cov { font-weight:700; } .hp-cov.ok { color:var(--ok); } .hp-cov.bad { color:var(--alert); }
.hp-recert { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap; } .hp-recert.now { background:var(--alert-tint); color:var(--alert); } .hp-recert.soon { background:var(--orange-tint); color:var(--orange-dk); } .hp-recert.later { background:var(--page); color:var(--ink2); border:1px solid var(--line); } .hp-recert.passed { background:var(--line2); color:var(--ink2); }
.hp-who { display:inline-flex; gap:3px; flex-wrap:wrap; } .hp-who span { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--navy-tint); color:var(--navy); font-size:10.5px; font-weight:800; }
.hp-seg { display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; } .hp-seg button { border:0; background:var(--card); padding:6px 14px; font:inherit; font-size:12.5px; font-weight:700; color:var(--ink2); cursor:pointer; } .hp-seg button[aria-pressed=true] { background:var(--navy); color:#fff; }
.hp-note { padding:10px 14px; border-radius:10px; background:var(--navy-tint); color:var(--navy); font-size:13px; margin-bottom:12px; }
.hp-people-stats { margin-top:12px; } table.hc-t td.num, table.hc-t th.num { text-align:right; font-variant-numeric:tabular-nums; }
@media (max-width: 900px) { .hp-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); } .hp-dev { grid-template-columns:auto minmax(0,1fr); } .hp-dev .acts { grid-column:2; } }
@media (max-width: 560px) { .hp-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Wrong step? box (owner, Oct 19) */
.stepwhy { min-width:220px; flex:1 1 260px; } .rc-b.stepset { margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }

/* ePACES from My day (owner, Oct 19, idea 1) */
.epl { font-size:11.5px; color:var(--ok); background:var(--ok-tint); border-radius:999px; padding:1px 8px; } .epl.bad { color:var(--alert); background:var(--alert-tint); }
.linkbtn.epchk { display:inline-flex; align-items:center; gap:3px; font-size:12px; }
.eprun { display:flex; align-items:center; gap:12px; padding:12px 16px; margin:0 0 12px; } .eprun-b { flex:1; min-width:0; }
.eprun-bar { height:6px; border-radius:999px; background:var(--line); margin:6px 0 4px; overflow:hidden; } .eprun-bar i { display:block; height:100%; background:var(--navy); transition:width .3s; }
.rc-b.swrow { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.hp-matrix { padding:12px 16px; margin:0 0 14px; } .hp-mx-wrap { overflow-x:auto; margin-top:10px; } .hp-matrix td, .hp-matrix th { text-align:center; } .hp-matrix td:first-child, .hp-matrix th:first-child { text-align:left; white-space:nowrap; } .hp-matrix tr.muted { opacity:.55; }
.hp-ptable { padding:4px 0; } .hp-ptable th.hp-tick, .hp-ptable td.hp-tick { text-align:center; } .hp-ptable td.hp-tick input { width:18px; height:18px; accent-color:var(--orange); cursor:pointer; }
.hp-ptable tr.muted td { opacity:.55; } .hp-person { display:flex; align-items:center; gap:10px; min-width:200px; } .hp-av.sm { width:30px; height:30px; font-size:12px; }
.hp-bulk { font-size:11px; font-weight:500; text-transform:none; letter-spacing:0; margin-top:2px; } .hp-legend { margin:8px 2px 0; line-height:1.6; }
.hp-bar .hp-q { min-width:220px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; font:inherit; background:var(--card); color:var(--ink); } button.tag.linkish { border:0; cursor:pointer; font:inherit; font-size:11.5px; }
.hp-person > div { white-space:nowrap; } .hp-ptable td { white-space:nowrap; vertical-align:middle; }
.hp-x { border:0; background:none; color:var(--faint); font-size:14px; cursor:pointer; padding:4px 8px; border-radius:8px; } .hp-x:hover { color:var(--alert); background:var(--alert-tint); }

/* Report (owner, Oct 19): one row per coordinator; the via breakdown of a referral source; the KPI numbers open their cases */
.rp-people th, .rp-people td { white-space:nowrap; } .rp-people td:first-child { white-space:normal; min-width:160px; }
.rp-score { padding:12px 16px; } .rp-score summary { cursor:pointer; } .rp-via summary { cursor:pointer; list-style:none; } .rp-via summary::-webkit-details-marker { display:none; } .rp-via[open] summary .sub::after { content:' ▴'; } .rp-via summary .sub::after { content:' ▾'; }
.rp-kpis { grid-template-columns:repeat(5,minmax(0,1fr)); } @media (max-width:1100px) { .rp-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:640px) { .rp-kpis { grid-template-columns:1fr 1fr; } }
.rp-kpis .kpi-n .rp-n { font-size:inherit; padding:0 8px; }
.pb-seeing { margin:4px 0 10px; } .who-help .hp-x { vertical-align:middle; }

/* Problems: the status is the first thing on the row (owner, Oct 19: "patient status is the most important part") */
.pb-status { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:4px 0 2px; font-weight:600; font-size:13px; }
.pb-status .spill { display:inline-flex; align-items:center; gap:6px; }
/* Focus on Problems: the step dots and the status only; the long text, the number and the last note stay in the case window */
body.focus .pb-todo .pb-action, body.focus .pb-todo details, body.focus .pb-todo .pb-call, body.focus .pb-todo .pb-last, body.focus .pb-check .ok, body.focus .pb-check .bad { display:none !important; }
body.focus .pb-todo .stepbar { margin-bottom:0; }
.pb-table td:nth-child(4) .pb-tag { display:block; text-align:left; justify-content:flex-start; width:fit-content; }
/* Overview, managers (Oct 19): the plans, the step board, the charts and the activity fold away under one line each */
.ov-fold { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:12px; box-shadow:var(--shadow); }
.ov-fold > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:12px; padding:14px 18px; font-size:14px; }
.ov-fold > summary::-webkit-details-marker { display:none; }
.ov-fold > summary::before { content:'▸'; color:var(--ink2); transition:transform .2s; } .ov-fold[open] > summary::before { transform:rotate(90deg); }
.ov-fold > summary b { color:var(--navy); } .ov-fold > summary .sub { font-size:13px; } .ov-fold > summary .late { color:var(--alert); }
.ov-fold-in { padding:0 12px 12px; } .ov-fold-in > .ov-card, .ov-fold-in > .ov-row { margin-bottom:12px; } .ov-fold-in > .ov-row:last-child, .ov-fold-in > .ov-card:last-child { margin-bottom:0; }
.ov-fold-in .ov-card { box-shadow:none; }
/* Problems (Oct 19): the row buttons were cut off on the right; the table fits the panel and the buttons stack */
.pb-table td:first-child { min-width:180px; } .pb-table td.pb-todo { min-width:240px; } .pb-table td.pb-check { min-width:160px; }
.pb-table td.pb-acts { white-space:normal; min-width:92px; } .pb-acts .btn.primary { margin-bottom:4px; }

/* ===== Sign-in v3 (Oct 20, from the owner's reference): a light scene with four shapes on the left, the form on the right ===== */
.login-wrap { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(380px,520px); place-items:stretch; min-height:100vh; padding:0; background:var(--page); }
.login-wrap::before { display:none; }
.login-scene { position:relative; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; background:#F3F4F7; padding:40px 24px 0; }
.login-scene .scene { width:min(680px, 94%, 125vh); margin-bottom:-2px; }
.scene-svg { display:block; width:100%; height:auto; overflow:visible; }
.scene-brand { position:absolute; left:28px; top:26px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--navy-3); font-weight:700; }
.login-wrap .login { width:100%; max-width:none; margin:0; border-radius:0; border:0; box-shadow:none; background:#fff; display:flex; align-items:center; justify-content:center; padding:40px 32px; animation:none; }
.login-inner { width:min(360px, 100%); display:flex; flex-direction:column; gap:14px; animation:cardIn .5s .1s cubic-bezier(.2,.8,.2,1) both; }
.login-inner img { height:40px; align-self:center; margin-bottom:6px; }
.login-inner h1 { font-size:26px; margin:6px 0 0; color:var(--navy); text-align:center; letter-spacing:-.01em; }
.login-inner > p { margin:-6px 0 8px; color:var(--ink2); font-size:13px; text-align:center; }
.lf { display:flex; flex-direction:column; gap:16px; }
.lf-field { display:flex; flex-direction:column; gap:2px; font-size:11px; font-weight:600; color:var(--ink2); letter-spacing:.02em; }
.lf-field input { border:0; border-bottom:1.5px solid #D3D9E3; border-radius:0; padding:0; height:34px; font-size:14.5px; background:transparent; width:100%; box-shadow:none; color:var(--ink); transition:border-color .2s; }
.lf-field input:focus { border-color:var(--navy); box-shadow:none; outline:none; }
.lf-field input::placeholder { color:#B4BCCB; }
.lf-pw { position:relative; display:flex; align-items:center; } .lf-pw input { padding-right:34px; }
.lf-eye { position:absolute; right:2px; top:50%; transform:translateY(-50%); width:28px; height:28px; border:0; background:none; cursor:pointer; color:var(--ink2); border-radius:50%; display:grid; place-items:center; padding:0; }
.lf-eye:hover, .lf-eye:focus-visible { color:var(--navy); background:var(--navy-tint); outline:none; }
.lf-row { display:flex; justify-content:flex-end; align-items:center; font-size:12.5px; margin-top:-6px; }
.lf-row a { color:var(--navy); font-weight:600; }
.login-inner .btn.primary.lf-btn { height:42px; font-size:14px; border-radius:10px; background:var(--navy); border-color:var(--navy); color:#fff; }
.login-inner .btn.primary.lf-btn:hover { background:var(--navy-dk); }
.login-inner .btn.primary.lf-btn, .login-inner .btn.primary.lf-btn:hover { box-shadow:0 8px 20px -10px rgba(32,48,96,.6); }
.login-inner .sub { font-size:12.5px; color:var(--ink2); text-align:center; }
.login-inner .sub a { color:var(--navy); font-weight:600; }
.login-inner .err { color:var(--alert); font-size:13px; min-height:1em; text-align:center; }
.login-inner .privacy { font-size:11.5px; color:var(--navy-3); text-align:center; margin-top:6px; }
.login-inner .field { font-size:11px; letter-spacing:.02em; } .login-inner .field input, .login-inner .field select { width:100%; }
.login-inner #gbtn { display:flex; justify-content:center; }
@media (max-width:860px) {
  .login-wrap { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .login-hero { display:none; }
  .login-scene { padding:24px 16px 0; min-height:220px; }
  .login-scene .scene { width:min(360px, 100%); }
  .scene-brand { display:none; }
  .login-wrap .login { padding:28px 20px 32px; border-radius:22px 22px 0 0; margin-top:-16px; position:relative; }
}

/* the scene's motion is done by web/js/doodles.js (springs, every frame); CSS only fades the shut / happy eyes in and out */
.scene-svg { touch-action:manipulation; } .scene-svg .shape { cursor:pointer; }
.scene-svg .shut-eye, .scene-svg .happy-eye { opacity:0; transition:opacity .25s; }
.scene-svg .eye { transition:opacity .25s; }
/* the password shown: the round one closes its eyes as ^ ^ arches, the others look away */
.scene-svg.sc-shut .shape.round .eye { opacity:0; } .scene-svg.sc-shut .shape.round .happy-eye { opacity:1; }
.scene-svg.sc-happy .shape.round .eye { opacity:0; } .scene-svg.sc-happy .happy-eye { opacity:1; }
/* surprise reactions (web/js/doodles.js ACTS): spiral eyes when dizzy, > < when squashed, brows when grumpy */
.scene-svg .fx-spiral, .scene-svg .fx-brow { opacity:0; transition:opacity .2s; }
.scene-svg .fx-spiral path { transform-box:fill-box; transform-origin:50% 50%; animation:ddSpin .9s linear infinite; }
.scene-svg .fx-dizzy .eye { opacity:0; } .scene-svg .fx-dizzy .fx-spiral { opacity:1; }
.scene-svg .fx-xeye .eye { opacity:0; } .scene-svg .fx-xeye .shut-eye { opacity:1; }
.scene-svg .fx-grump .fx-brow { opacity:1; }
@keyframes ddSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .scene-svg .fx-spiral path { animation:none; } }
/* Problems at 1280-1440px: every column and every button fits, no sideways scroll (audit, Oct 21); 1920px is unchanged */
@media (max-width:1560px) {
  .pb-table td, .pb-table th { padding-left:8px; padding-right:8px; } .pb-table th { white-space:normal; }
  .pb-table td:first-child { min-width:150px; } .pb-table td:nth-child(4) { min-width:112px; }
  .pb-table td.pb-todo { width:30%; min-width:190px; } .pb-table td.pb-check { min-width:120px; max-width:200px; }
  .pb-table td.pb-acts { width:auto; min-width:84px; white-space:normal; } .pb-acts .btn { white-space:nowrap; padding:0 8px; font-size:12.5px; }
}
.pb-last q { color:var(--ink2); overflow-wrap:anywhere; } .pb-table td:first-child, .pb-table td:nth-child(2) { overflow-wrap:anywhere; }   /* one long word (a pasted link as a name) no longer widens the table */
/* Problems on a phone: each case is a card, the column name above each part (audit, Oct 21) */
@media (max-width:700px) {
  .pb-table table, .pb-table tbody, .pb-table tr, .pb-table td { display:block; width:auto !important; min-width:0 !important; max-width:none !important; }
  .pb-table tr:has(th) { display:none; }
  .pb-table tr { padding:10px 14px 12px; border-bottom:1px solid var(--line); } .pb-table tr:last-child { border-bottom:0; }
  .pb-table td { padding:4px 0 !important; border:0 !important; overflow-wrap:anywhere; } .pb-table tr:hover td { background:none; }
  .pb-table td[data-l]::before { content:attr(data-l); display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:4px 0 2px; }
  .pb-table td.pb-acts { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; white-space:normal; padding-top:8px !important; } .pb-acts .linkbtn { display:inline-block; margin:0; }
  .pb-filters input { width:100%; }
}

/* ---------- Referral form panel in the case window (web/js/refform.js; owner, Oct 21) ---------- */
.refform { border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin:16px 0 0; background:var(--card); }
.refform .rf-top { flex-wrap:wrap; } .refform .rf-top > * { min-width:140px; }
.rf-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px 12px; margin-top:6px; }
.rf-grid .field input, .rf-grid .field select { width:100%; }
.rf-miss input, .rf-miss select { border-color:var(--orange); background:var(--orange-tint); }
.field:not(.rf-miss) .rf-need { display:none; }
.rf-need { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--orange-dk); margin-left:4px; }
.rf-more { margin-top:10px; } .rf-more > summary { cursor:pointer; }
.rf-btns { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:14px; }
.rf-mail { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; margin-top:10px; } .rf-mail .field { flex:1; min-width:220px; } .rf-mail .field input { width:100%; } .rf-mail .sub { flex-basis:100%; }
.rf-grid .field > span:first-child, .rf-top .field, .rf-mail .field { font-weight:600; color:var(--ink2); }

/* sign-in background (owner, Oct 21): web/js/login-bg.js draws one canvas at the back of the doodles' scene.
   It sits under the doodles and the brand line (its own stacking layer), never over the form, and never catches clicks:
   the scene itself takes the tap for the confetti burst. Still picture with reduced motion (done in the script). */
.login-scene { isolation:isolate; }
.login-scene > canvas.lbg { position:absolute; inset:0; width:100%; height:100%; z-index:-1; display:block; pointer-events:none; }

/* Cottage Helper people cards (owner, Oct 22): ticked list with a count, labelled facts, one action row */
.hp-head .hp-state { font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; } .hp-state.on { background:var(--ok-tint); color:var(--ok); } .hp-state.off { background:var(--line2); color:var(--ink2); }
.hp-lab { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); display:flex; gap:6px; align-items:baseline; } .hp-lab span { letter-spacing:0; text-transform:none; font-weight:600; color:var(--ink2); }
.hp-sec { display:flex; flex-direction:column; gap:8px; }
.hp-parts { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:6px; }
.hp-people { grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); }
.hp-lab { white-space:nowrap; }
.hp-part { justify-content:flex-start; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-radius:8px; }
.hp-ck { width:14px; height:14px; border-radius:4px; border:1.5px solid var(--line); display:grid; place-items:center; flex:none; color:#fff; }
.hp-ck svg { display:none; width:10px !important; height:10px !important; stroke-width:3; } .hp-part.on .hp-ck { background:var(--ok); border-color:var(--ok); } .hp-part.on .hp-ck svg { display:block; }
.hp-part .dot { display:none; }
.hp-facts > div { gap:3px; align-items:flex-start; } .hp-facts b { font-size:15px; } .hp-facts .tag { font-size:11px; }
.hp-foot { gap:8px; padding-top:10px; border-top:1px solid var(--line2); } .hp-last { margin-right:auto; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .hp-foot .btn, .hp-rm { flex:none; }
.btn.hp-sm { padding:5px 10px; font-size:12px; } .hp-rm { background:none; border:0; cursor:pointer; font:inherit; font-size:12px; color:var(--faint); padding:4px 2px; } .hp-rm:hover { color:var(--alert); }
.hp-card.off .hp-sec, .hp-card.off .hp-facts { opacity:.6; }
/* follow-up reminders 30 minutes before a time (web/js/bell.js): a card at the top right, above everything */
.rm-box { position:fixed; top:76px; right:16px; z-index:120; display:flex; flex-direction:column; gap:10px; width:min(380px, calc(100vw - 32px)); }
.rm-item { display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 12px; align-items:start; padding:14px 16px; border-radius:18px; background:var(--card, #fff); border:1px solid var(--line); border-left:5px solid var(--th-accent); box-shadow:0 18px 40px rgba(var(--th-ink-rgb), .18); }
.rm-ic { width:32px; height:32px; border-radius:99px; display:flex; align-items:center; justify-content:center; background:var(--th-tint); color:var(--th-accent2); }
.rm-t b { display:block; font-size:14px; line-height:20px; } .rm-t .sub { display:block; margin-top:2px; font-size:12.5px; line-height:18px; }
.rm-act { grid-column:2; display:flex; gap:8px; } .rm-act .btn { min-height:34px; height:34px; border-radius:99px; }
.rm-desk { grid-column:2; justify-self:start; font-size:12px; }
html.dark .rm-ic { background:rgba(var(--th-daccent-rgb), .18); color:var(--th-daccent); }
@media (max-width:600px) { .rm-box { top:70px; right:12px; left:12px; width:auto; } }

/* a search result found only by a typo or a near number (design lead, Oct 26) */
.close-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1.5; color: var(--th-mute); background: var(--th-soft2); vertical-align: middle; white-space: nowrap; }
html.dark .close-tag { color: var(--th-dmute); background: var(--th-dcard); }
/* the period under a Report table title (owner, Oct 27) */
.rp-when { margin:-4px 0 8px; font-size:12.5px; }

/* live refresh (Nov 9, web/js/live.js): "Updated 9:52 AM" beside the page name */
.crumb .live-at { margin-left:6px; font-size:12px; color:var(--muted); font-weight:400; }
.crumb .live-at:empty { display:none; }

#main .live-at { display:block; margin-top:2px; font-size:12px; color:var(--muted); font-weight:400; }
/* the portal just restarted and is reading the cases (Nov 9): one line at the top until the first normal answer */
.starting-banner { position: sticky; top: 0; z-index: 1000; padding: 10px 16px; background: var(--blue-50, #EAF2FF); color: var(--ink, #12233F); border-bottom: 1px solid var(--line, #D6E2F5); font-size: 14px; text-align: center; }

/* The portal's colours: blue and white (owner, Oct 29; the "Office TV v2: blue and white" board). Every stylesheet takes its
   theme colours from these tokens (the warm orange look's literals were moved here, set to blue); meaning colours stay as they
   were: red for late or an error, green for done, amber for a warning. The dark tokens (--th-d*) are the deep navy dark mode.
   /tv (the office screen) can use the same tokens. Each colour also as "r, g, b" (--th-*-rgb) for see-through shades. */
:root {
  --th-page:#F4F8FD; --th-page-rgb:244, 248, 253;
  --th-white:#FFFFFF; --th-white-rgb:255, 255, 255;
  --th-soft:#EEF4FC; --th-soft-rgb:238, 244, 252;
  --th-soft2:#E3ECF8; --th-soft2-rgb:227, 236, 248;
  --th-line:#DCE6F2; --th-line-rgb:220, 230, 242;
  --th-line2:#C3D1E3; --th-line2-rgb:195, 209, 227;
  --th-faint:#8A97AA; --th-faint-rgb:138, 151, 170;
  --th-mute:#5B6B82; --th-mute-rgb:91, 107, 130;
  --th-text:#2A3F5F; --th-text-rgb:42, 63, 95;
  --th-ink:#0E2A4F; --th-ink-rgb:14, 42, 79;
  --th-tint:#E3EEFF; --th-tint-rgb:227, 238, 255;
  --th-peach:#A9CBFF; --th-peach-rgb:169, 203, 255;
  --th-glow:#8DB8FF; --th-glow-rgb:141, 184, 255;
  --th-accent:#2E7CF6; --th-accent-rgb:46, 124, 246;
  --th-accent2:#1F5FC7; --th-accent2-rgb:31, 95, 199;
  --th-accent3:#174A9C; --th-accent3-rgb:23, 74, 156;
  --th-panel1:#3D7BD9; --th-panel1-rgb:61, 123, 217;
  --th-panel2:#1D4A8F; --th-panel2-rgb:29, 74, 143;
  --th-panel3:#0E2A4F; --th-panel3-rgb:14, 42, 79;
  --th-panel4:#0A1E3C; --th-panel4-rgb:10, 30, 60;
  --th-dpage:#0B1626; --th-dpage-rgb:11, 22, 38;
  --th-dpage2:#08111E; --th-dpage2-rgb:8, 17, 30;
  --th-dcard:#12223A; --th-dcard-rgb:18, 34, 58;
  --th-dsoft:#182C49; --th-dsoft-rgb:24, 44, 73;
  --th-dline:#25395A; --th-dline-rgb:37, 57, 90;
  --th-dtext:#E6EEF9; --th-dtext-rgb:230, 238, 249;
  --th-dmute:#A9B8CE; --th-dmute-rgb:169, 184, 206;
  --th-daccent:#6EA8FF; --th-daccent-rgb:110, 168, 255;
  --th-daccent2:#1C3A66; --th-daccent2-rgb:28, 58, 102;   /* dark mode: the blue tint behind blue words (chips, selected tabs) */
  /* the dark feature panels: a navy gradient, white text, a soft blue-grey shadow */
  --th-panel-grad:radial-gradient(85% 70% at 50% 92%, var(--th-panel1) 0%, var(--th-panel2) 50%, var(--th-panel3) 100%);
  --th-panel-shadow:0 24px 50px rgba(14, 42, 79, .22);
  --th-hero:linear-gradient(160deg, var(--th-accent2), var(--th-accent3));   /* the bright tiles (Late now, Start calling, wins): white text, AA */
  --th-focus:#1F5FC7;   /* the focus ring: blue, seen on white and on navy (with a white halo) */
}
html.dark { --th-focus:#6EA8FF; }

/* New design (Figma handoff, Oct 22: design/portal-redesign on branch design/portal-figma). A reskin only: every rule here
   is under html.dn, so nothing changes until the switch is on (My account > "New design", managers only for now; owner,
   Oct 22: "switched off first"). Warm page, white cards, one brand orange for the main action, status colour pairs. */
html.dn {
  --navy:var(--th-ink); --navy-dk:var(--th-ink); --navy-2:var(--th-mute); --navy-3:var(--th-faint); --navy-tint:var(--th-soft);
  --orange:var(--th-accent2); --orange-dk:var(--th-accent3); --orange-tint:var(--th-tint); --brand:var(--th-accent);
  --alert:#B42318; --alert-tint:#FDEDEA; --ok:#1E6B3F; --ok-tint:#E7F4EC;
  --today:#1D5FA8; --today-tint:#EAF2FB; --amber:#8A5A00; --amber-tint:#FCF3DC;
  --ink:var(--th-ink); --ink2:var(--th-text); --muted:var(--th-mute); --faint:var(--th-mute);
  --line:var(--th-line); --line2:var(--th-soft); --line-strong:var(--th-line2); --page:var(--th-page); --card:#FFFFFF; --hover:var(--th-page); --sunken:var(--th-soft);
  --link:#23305C; --radius:14px; --shadow:none; --shadow-hi:0 8px 24px rgba(var(--th-ink-rgb), .12);
  --s1:#1C3462; --s2:var(--th-accent); --s3:var(--th-faint); --s4:var(--th-line2);
}
html.dn body { background:var(--page); color:var(--ink); }
html.dn a { color:var(--link); }

/* side menu: white rail, the page you are on in soft orange */
html.dn .side { background:var(--card); border-right:1px solid var(--line); flex-basis:232px; padding:20px 14px; }
html.dn .side .logo { border-bottom:0; }
html.dn .navlabel, html.dn .side-eyebrow { color:var(--muted); font-weight:700; letter-spacing:.06em; }
html.dn .side nav button { color:var(--ink2); height:36px; padding:0 10px; border-radius:10px; }
html.dn .side nav button .ic { color:var(--muted); }
html.dn .side nav button:hover { background:var(--sunken); color:var(--ink); } html.dn .side nav button:hover .ic { color:var(--ink); }
html.dn .side nav button[aria-pressed=true] { background:var(--th-tint); color:var(--th-accent3); font-weight:700; box-shadow:none; }
html.dn .side nav button[aria-pressed=true] .ic { color:var(--th-accent3); }
html.dn .side nav .pill { background:transparent; color:var(--muted); font-weight:700; padding:0; }
html.dn .side nav button[aria-pressed=true] .pill { background:transparent; color:var(--th-accent3); }
html.dn .navsep { background:var(--line); }
html.dn .side .me, html.dn .aipulse { background:var(--sunken); border-color:transparent; border-radius:12px; }
html.dn .topbar { background:rgba(var(--th-page-rgb), .94); border-bottom-color:var(--line); }
html.dn .tb-search { border-color:var(--line); border-radius:10px; height:40px; }
html.dn .tb-search:focus-within { border-color:var(--brand); box-shadow:0 0 0 3px rgba(var(--th-accent-rgb), .18); }

/* buttons: brand orange for the main action, white with a warm border for the rest */
html.dn .btn { border-radius:10px; border-color:var(--line-strong); background:var(--card); color:var(--ink); }
html.dn .btn:hover { background:var(--sunken); border-color:var(--line-strong); color:var(--ink); }
html.dn .btn.primary { background:var(--th-accent2); border-color:var(--th-accent2); color:#fff; }
html.dn .btn.primary:hover { background:var(--th-accent3); border-color:var(--th-accent3); color:#fff; }
html.dn .btn.quiet { background:var(--card); color:var(--ink2); }
html.dn .sq-btn { height:auto; min-height:44px; border-radius:12px; padding:6px 18px; }
html.dn input:focus, html.dn select:focus, html.dn textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(var(--th-accent-rgb), .18); outline:none; }

/* cards, panels and lists */
html.dn .panel, html.dn .list, html.dn .card, html.dn .dayprog { border-color:var(--line); border-radius:14px; background:var(--card); box-shadow:none; }
html.dn .sec { color:var(--ink2); letter-spacing:.06em; }
html.dn .sec.late { color:#B42318; }

/* tags: status colour pairs */
html.dn .tag { border-radius:999px; background:var(--sunken); color:var(--ink2); }
html.dn .tag.t-late { background:#FDEDEA; color:#B42318; }
html.dn .tag.t-ok { background:#E7F4EC; color:#1E6B3F; }
html.dn .tag.t-auto { background:#FCF3DC; color:#8A5A00; }

/* tabs: the open one underlined in brand orange, its count in soft orange */
html.dn .tabs { border-bottom-color:var(--line); }
html.dn .tabs button { color:var(--muted); }
html.dn .tabs button[aria-selected=true] { color:var(--ink); border-bottom-color:var(--th-accent); }
html.dn .tabs .tab-n { background:var(--sunken); color:var(--muted); }
html.dn .tabs button[aria-selected=true] .tab-n { background:var(--th-tint); color:var(--th-accent3); }

/* My day rows: a 4px coloured left edge (late red, new orange, due today blue, done green) */
html.dn .row { position:relative; padding-left:20px; }
html.dn .row:hover { background:var(--hover); }
html.dn .row::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:0 3px 3px 0; background:transparent; }
html.dn .row.urgent, html.dn .row.late { box-shadow:none; }
html.dn .row.is-new::before { background:var(--th-accent); }
html.dn .row.is-today::before { background:#1D5FA8; }
html.dn .row.late::before, html.dn .row.urgent::before { background:#B42318; }
html.dn .row.is-done::before, html.dn .row.done::before { background:#1E6B3F; }
html.dn .row.done { background:var(--card); }
html.dn .row .who { color:var(--ink); }
html.dn .row .lastnote { background:var(--sunken); border-left-color:var(--line-strong); }
html.dn .row .when .due { color:var(--ink2); }

/* progress card */
html.dn .dayprog { padding:18px 20px; }
html.dn .dp-bar { height:10px; border-radius:99px; background:var(--sunken); gap:2px; }
html.dn .dp-chip { border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink2); }

/* design review (Oct 22, Figma chat) */
/* the rail runs the full height; AI and the user card sit at the bottom */
html.dn .side { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; }
html.dn .side .aipulse { margin-top:auto; }
html.dn .side .me { margin-bottom:0; }
/* no underline on the ePACES result; glossary words: a light dotted underline that darkens on hover */
html.dn .epl, html.dn .epl abbr.gl, html.dn .epl a { text-decoration:none; border-bottom:0; }
html.dn abbr.gl { border-bottom:0; text-decoration:underline dotted 1px var(--th-line2); text-underline-offset:3px; }
html.dn abbr.gl:hover { text-decoration-color:var(--th-mute); }
html.dn .tag abbr.gl, html.dn .btn abbr.gl, html.dn button abbr.gl, html.dn .epl abbr.gl { text-decoration:none; }
/* selects and date inputs like the other inputs */
html.dn select, html.dn input[type=date], html.dn input[type=datetime-local] { height:36px; border-radius:10px; border:1px solid var(--line-strong); background-color:var(--card); color:var(--ink);
  font:500 14px 'Plus Jakarta Sans', system-ui, sans-serif; padding:0 12px; }
html.dn select { -webkit-appearance:none; appearance:none; padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E665B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:14px; }
/* page files set "background:" on their selects; keep the chevron there too */
html.dn select:not([multiple]) { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E665B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 10px center !important; background-size:14px !important; -webkit-appearance:none; appearance:none; padding-right:32px; }
html.dn select:focus, html.dn input[type=date]:focus, html.dn input[type=datetime-local]:focus { border-color:var(--th-accent); box-shadow:0 0 0 3px rgba(var(--th-accent-rgb), .25); outline:none; }
html.dn .sheet select, html.dn .sheet input[type=date], html.dn .sheet input[type=datetime-local] { height:40px; }
html.dn select[multiple] { height:auto; background-image:none; padding:6px 12px; }
/* charts: a short plot, so one week does not make one tall bar in a big empty box */
html.dn .chart svg { max-height:180px; }

/* design review round 3: "How to use this page" reads lighter, one small muted strip (wording unchanged) */
html.dn .howto:not(.dn-howto) { display:block; font-size:12px; line-height:18px; color:var(--th-mute); background:var(--sunken); border:0; border-radius:10px; padding:8px 12px; }
html.dn .howto:not(.dn-howto) > * { display:inline; margin-right:12px; }
html.dn .howto:not(.dn-howto) b { color:var(--ink2); }
/* section counts: the same pill as My day's section headers (design review round 3) */
html.dn .sec .pill { font-size:12px; font-weight:700; padding:0 8px; border-radius:99px; line-height:20px; letter-spacing:0; background:var(--sunken); color:var(--ink2); text-transform:none; }
/* design review, admin pages (Oct 22): file inputs as a secondary button with the file name beside it */
html.dn input[type=file] { height:auto; border:0; padding:0; background:none; font:400 13px 'Plus Jakarta Sans', system-ui, sans-serif; color:var(--muted); }
html.dn input[type=file]::file-selector-button { height:36px; padding:0 14px 0 34px; margin-right:10px; border-radius:10px; border:1px solid var(--line-strong); background:var(--card) no-repeat 12px center / 16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231F1B16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E");
  color:var(--ink); font:600 14px 'Plus Jakarta Sans', system-ui, sans-serif; cursor:pointer; }
html.dn input[type=file]::file-selector-button:hover { background-color:var(--sunken); }
/* checkboxes green like the switches */
html.dn input[type=checkbox] { accent-color:#1E6B3F; }
html.dn.dark input[type=checkbox] { accent-color:#6FCF97; }
/* long explanations: the light style of the how-to strips, an easy line length (wording unchanged) */
html.dn main .note-foot, html.dn main .panel > .sub, html.dn main .head .sub { font-size:12.5px; line-height:19px; color:var(--muted); max-width:110ch; }

/* New design: myday (scoped under html.dn; see design-new.css)
   Figma handoff d-myday, t-myday-pa / -everyone / -unassigned / -upcoming / -nodate / -trouble, m-log. Colours only through the
   design-new.css variables, so the dark tokens can follow. The markup these rules expect is drawn only with the switch on
   (web/js/myday.js DN, ui.js dnRow). */

/* ---------- header: date, greeting, count | Export CSV, ePACES, Start calling ---------- */
html.dn .head.dnh { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 20px; padding:0 !important; }
html.dn .dnh .dnh-l { display:flex; flex-direction:column; gap:4px; min-width:0; }
html.dn .dnh .dnh-date { font-size:12px; line-height:16px; font-weight:500; color:var(--muted); }
html.dn .dnh h1 { font-size:24px; line-height:32px; font-weight:700; letter-spacing:-.12px; color:var(--ink); margin:0; animation:none; }
html.dn .dnh .sub { margin:0; font-size:13px; line-height:18px; color:var(--ink2); }
html.dn .dnh .sub b { color:var(--ink); font-variant-numeric:tabular-nums; }
html.dn .dnh .tools { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
html.dn .dnh .tools .btn { display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:10px; font-size:14px; font-weight:600; }
html.dn .dnh .tools .btn.dn-ghost { background:transparent; border-color:transparent; color:var(--ink2); }
html.dn .dnh .tools .btn.dn-ghost:hover { background:var(--sunken); }
html.dn .dnh .tools .btn.sq-btn { height:52px; min-height:52px; padding:0 18px; border-radius:12px; gap:10px; font-size:15px; }
html.dn .dnh .tools .sq-btn span { line-height:20px; }
html.dn .dnh .tools .sq-btn small { font-size:12px; line-height:16px; font-weight:500; opacity:.85; max-width:240px; }
html.dn .dnh .tools select { height:36px; padding:0 12px; border-radius:10px; border:1px solid var(--line-strong); background:var(--card); color:var(--ink); font-size:14px; font-weight:600; }

/* ---------- progress card ---------- */
html.dn .dayprog.dnp { display:flex; flex-direction:column; gap:14px; padding:18px 20px; margin:0 0 20px; }
html.dn .dnp-top { display:flex; align-items:center; gap:16px; }
html.dn .dnp .dp-n { flex:1; min-width:0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:18px; line-height:26px; font-weight:700; color:var(--ink2); }
html.dn .dnp .dp-n b { font-size:32px; line-height:36px; font-weight:700; letter-spacing:-.14px; color:var(--ink); font-variant-numeric:tabular-nums; }
html.dn .dnp .dnp-left { margin-left:6px; font-size:13px; line-height:18px; font-weight:400; color:var(--muted); }
html.dn .dnp-cut { display:flex; flex-direction:column; align-items:flex-end; gap:2px; padding:8px 12px; border-radius:10px; background:var(--sunken); flex:none; }
html.dn .dnp-cut span { font-size:12px; line-height:16px; font-weight:500; color:var(--muted); }
html.dn .dnp-cut b { font-size:13px; line-height:18px; font-weight:600; color:var(--ink); white-space:nowrap; }
html.dn .dnp-cut em { font-style:normal; } html.dn .dnp-cut em.hot { color:var(--alert); }
html.dn .dnp .dp-bar { height:12px; border-radius:99px; gap:2px; background:var(--sunken); }
html.dn .dnp .dp-bar i + i { border-left:0; }
html.dn .dnp .dp-bar .ok { background:var(--ok); } html.dn .dnp .dp-bar .late { background:var(--alert); }
html.dn .dnp .dp-bar .new { background:var(--brand); } html.dn .dnp .dp-bar .today { background:var(--today); }
html.dn .dnp .dp-chips { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
html.dn .dnp .dp-chip { display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border-radius:10px; border:1px solid var(--line); background:var(--card); font-size:13px; font-weight:600; color:var(--ink2); white-space:nowrap; }
html.dn .dnp .dp-chip b { color:var(--ink); font-weight:800; }
html.dn .dnp .dp-chip:hover { border-color:var(--line-strong); color:var(--ink); }
html.dn .dnp .dp-chip .dot { width:8px; height:8px; }
html.dn .dnp .dp-chip.ok .dot { background:var(--ok); } html.dn .dnp .dp-chip.late .dot { background:var(--alert); }
html.dn .dnp .dp-chip.new .dot { background:var(--brand); } html.dn .dnp .dp-chip.today .dot { background:var(--today); }
html.dn .dnp .dp-chip.info.k-alert { background:var(--alert-tint); border-color:transparent; color:var(--alert); }
html.dn .dnp .dp-chip.info.k-cutoff, html.dn .dnp .dp-chip.pa { background:var(--amber-tint); border-color:transparent; color:var(--amber); }
html.dn .dnp .dp-chip.info.k-alert b { color:var(--alert); }
html.dn .dnp .dp-chip.info.k-cutoff b, html.dn .dnp .dp-chip.pa b { color:var(--amber); }
html.dn .dnp .dp-chip .dnp-chev { transform:rotate(90deg); }
html.dn .dnp .vsep { width:1px; height:20px; background:var(--line); flex:none; }
html.dn .dnp .yourweek { margin:0; padding-top:14px; border-top:1px solid var(--line); font-size:13px; line-height:18px; color:var(--ink2); }
html.dn .dnp .yourweek:empty { display:none; }
html.dn .dnp .yourweek > b:first-of-type { font-weight:600; }
html.dn .dnp .yourweek svg { color:var(--muted); }
/* the Today tab only (t-myday-upcoming: the other tabs go straight from the header to the tabs) */
html.dn main[data-mdtab]:not([data-mdtab="today"]) .dayprog.dnp,
html.dn main[data-mdtab]:not([data-mdtab="today"]) #teamToday { display:none; }

/* ---------- ePACES check running (t-myday-pa, top) ---------- */
html.dn #epRun .eprun { display:flex; align-items:center; gap:14px; margin:0 0 20px; padding:16px 20px; border:1px solid var(--today); border-radius:14px; background:var(--card); }
html.dn #epRun .eprun > .ic { color:var(--today); width:20px; height:20px; }
html.dn #epRun .eprun-b b { font-size:14px; font-weight:600; color:var(--ink); }
html.dn #epRun .eprun-b .hc-red { color:var(--alert); font-size:13px; font-weight:600; }
html.dn #epRun .eprun-bar { height:6px; margin:8px 0 6px; background:var(--sunken); }
html.dn #epRun .eprun-bar i { background:var(--today); }
html.dn #epRun .eprun-b .sub { font-size:12px; line-height:16px; color:var(--muted); }
html.dn #epRun .eprun .btn { height:30px; padding:0 10px; border-radius:8px; font-size:13px; font-weight:600; }

/* ---------- PA registration with HR (t-myday-pa) ---------- */
html.dn details.dnpa { padding:0; margin:0 0 20px; overflow:hidden; }
html.dn details.dnpa > summary { display:flex; align-items:center; gap:10px; padding:16px 20px; list-style:none; cursor:pointer; color:var(--ink); }
html.dn details.dnpa > summary::-webkit-details-marker { display:none; }
html.dn details.dnpa > summary b { font-size:15px; line-height:22px; font-weight:700; }
html.dn details.dnpa > summary .pill { font-size:12px; font-weight:700; padding:0 8px; border-radius:99px; line-height:20px; background:var(--sunken); color:var(--muted); }
html.dn details.dnpa > summary .ic:first-child { color:var(--ink2); }
html.dn details.dnpa .dnpa-bad { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 8px; border-radius:99px; font-size:12px; font-weight:600; background:var(--amber-tint); color:var(--amber); margin:0; }
html.dn details.dnpa .dnpa-bad i { width:7px; height:7px; border-radius:99px; background:currentColor; }
html.dn details.dnpa .dnpa-chev { margin-left:auto; color:var(--ink2); transform:rotate(90deg); transition:transform .15s; }
html.dn details.dnpa[open] .dnpa-chev { transform:rotate(-90deg); }
html.dn details.dnpa table, html.dn .dnteam table { width:100%; border-collapse:collapse; margin:0 !important; }
html.dn details.dnpa th, html.dn .dnteam th { background:var(--sunken); padding:10px 16px; text-align:left; font-size:11px; line-height:16px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border:0; }
html.dn details.dnpa td, html.dn .dnteam td { padding:12px 16px; border:0; border-top:1px solid var(--line); vertical-align:top; font-size:14px; line-height:20px; color:var(--ink); background:transparent; }
html.dn details.dnpa tr.warnr td { background:transparent; }
html.dn details.dnpa td a { color:var(--link); font-weight:600; text-decoration:none; }
html.dn details.dnpa td a:hover { text-decoration:underline; }
html.dn details.dnpa td .sub { font-size:12px; line-height:18px; color:var(--muted); }
html.dn details.dnpa td .tag { margin:4px 0 0; border:0 !important; height:22px; padding:0 8px; border-radius:99px; font-size:12px; font-weight:600; }
html.dn details.dnpa td .tag.t-cut { background:var(--ok-tint) !important; color:var(--ok) !important; }
html.dn details.dnpa td .tag.t-wait { background:var(--amber-tint) !important; color:var(--amber) !important; }

/* ---------- Everyone: per coordinator today (t-myday-everyone) ---------- */
html.dn .sec.dn-team { color:var(--ink); }
html.dn .panel.dnteam { padding:0; overflow:hidden; margin:0 0 20px; }
html.dn .dnteam td { vertical-align:middle; }
html.dn .dnteam .st-l { display:inline-flex; align-items:center; gap:8px; }
html.dn .dnteam .st-l b { font-weight:500; }
html.dn .dnteam .dnteam-late { color:var(--alert); font-weight:600; }
html.dn .dnteam .dnteam-bar { display:block; width:100%; max-width:240px; height:6px; border-radius:99px; background:var(--sunken); overflow:hidden; }
html.dn .dnteam .dnteam-bar i { display:block; height:100%; background:var(--ok); border-radius:99px; }

/* ---------- tabs and "All statuses" on one line ---------- */
html.dn main[data-mdtab] #mdControls { display:flex; align-items:flex-end; gap:12px; border-bottom:1px solid var(--line); margin:0 0 20px; }
html.dn main[data-mdtab] #mdControls .tabs { flex:1; min-width:0; border-bottom:0; margin:0; gap:4px; }
html.dn main[data-mdtab] #mdControls .tabs button { padding:0 12px 12px; font-size:14px; line-height:22px; font-weight:600; color:var(--muted); }
html.dn main[data-mdtab] #mdControls .tabs button[aria-selected=true] { color:var(--ink); }
html.dn main[data-mdtab] #mdControls .tabs .tab-n { font-size:12px; font-weight:700; padding:0 7px; line-height:20px; border-radius:99px; }
html.dn main[data-mdtab] #mdControls .filterbar { margin:0 0 10px !important; flex:none; }
html.dn main[data-mdtab] #mdControls .smenu-btn { height:32px; padding:0 12px; border-radius:10px; border:1px solid var(--line); background:var(--card); font-size:13px; font-weight:600; color:var(--ink2); }
html.dn main[data-mdtab] #mdControls .smenu-pop { left:auto; right:0; }

/* ---------- morning ePACES line: a soft blue strip ---------- */
html.dn .note-foot.dn-info { display:flex; align-items:center; gap:10px; margin:0 0 20px !important; padding:10px 14px; border-radius:12px; background:var(--today-tint); color:var(--today); font-size:13px; line-height:18px; font-weight:500; }
html.dn .note-foot.dn-info .ic { flex:none; }
html.dn .note-foot.dn-info b { font-weight:800; }
html.dn .note-foot.dn-info .hc-red { color:var(--alert); }
html.dn .note-foot.dn-info abbr { color:inherit; }

/* ---------- section headers: icon, title, count pill, the note under it ---------- */
html.dn main[data-mdtab] #mdList .sec { display:flex; align-items:center; gap:10px; margin:20px 0 0; padding:0 4px 8px; font-size:15px; line-height:22px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--ink2); }
html.dn main[data-mdtab] #mdList .sec:first-child, html.dn main[data-mdtab] #mdList .dn-info + .sec { margin-top:0; }
html.dn main[data-mdtab] #mdList .sec .ic { color:currentColor; }
html.dn main[data-mdtab] #mdList .sec .pill { font-size:12px; font-weight:700; padding:0 8px; border-radius:99px; line-height:20px; letter-spacing:0; background:var(--sunken); color:var(--muted); }
html.dn main[data-mdtab] #mdList .sec.late, html.dn main[data-mdtab] #mdList .sec[data-sec=trouble], html.dn main[data-mdtab] #mdList .sec[data-sec=nonext] { color:var(--alert); }
html.dn main[data-mdtab] #mdList .sec.late .pill, html.dn main[data-mdtab] #mdList .sec[data-sec=trouble] .pill, html.dn main[data-mdtab] #mdList .sec[data-sec=nonext] .pill { background:var(--alert-tint); color:var(--alert); }
html.dn main[data-mdtab] #mdList .sec.accent { color:var(--orange-dk); }
html.dn main[data-mdtab] #mdList .sec.accent .pill { background:var(--orange-tint); color:var(--orange-dk); }
html.dn main[data-mdtab] #mdList .sec.today { color:var(--today); }
html.dn main[data-mdtab] #mdList .sec.today .pill { background:var(--today-tint); color:var(--today); }
html.dn main[data-mdtab] #mdList .sec.ok { color:var(--ok); }
html.dn main[data-mdtab] #mdList .sec.ok .pill { background:var(--ok-tint); color:var(--ok); }
html.dn main[data-mdtab] #mdList .sec[data-sec=closed] { color:var(--ink2); }
html.dn main[data-mdtab] #mdList .sec[data-sec=closed] .pill { background:var(--sunken); color:var(--muted); }
html.dn main[data-mdtab] #mdList .sec + .note-foot { margin:-4px 0 0 !important; padding:0 4px 10px; font-size:13px; line-height:18px; color:var(--muted); }
html.dn main[data-mdtab] #mdList .note-foot abbr { color:inherit; }
html.dn main[data-mdtab] #mdList .list { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--card); margin:0; }
/* "Show the other N": the foot of the list card */
html.dn main[data-mdtab] #mdList .list:has(+ .note-foot > [data-more]) { border-bottom-left-radius:0; border-bottom-right-radius:0; }
html.dn main[data-mdtab] #mdList .list + .note-foot:has(> [data-more]) { display:flex; justify-content:center; margin:0 !important; padding:12px; background:var(--card); border:1px solid var(--line); border-top:0; border-radius:0 0 14px 14px; }
html.dn main[data-mdtab] #mdList [data-more] { height:30px; padding:0 10px; border:0; border-radius:8px; background:transparent; font-size:13px; font-weight:600; color:var(--ink2); }
html.dn main[data-mdtab] #mdList [data-more]:hover { background:var(--sunken); }
html.dn main[data-mdtab] #mdList + .note-foot { margin:20px 0 0; text-align:center; font-size:12px; color:var(--muted); }

/* ---------- the row: who (256) | what (flexible) | call (232) ---------- */
html.dn .row.dnr { display:flex; align-items:flex-start; gap:16px; padding:14px 16px 14px 20px; border-bottom:1px solid var(--line); background:var(--card); opacity:1; }
html.dn .row.dnr:last-child { border-bottom:0; }
html.dn .row.dnr:hover { background:var(--hover); }
html.dn .row.dnr.done { background:var(--card); }
html.dn .row.dnr.done .who, html.dn .row.dnr.done .do { text-decoration:none; color:inherit; }
html.dn .row.dnr.is-again::before, html.dn .row.dnr.is-done.is-again::before { background:var(--brand); }   /* call again = orange, never done green (design review, Oct 22) */
html.dn .row.dnr.is-nonext::before { background:var(--amber); }
html.dn .row.dnr.calm:not(.is-done)::before { background:var(--line-strong); }
html.dn .row.dnr.late::before, html.dn .row.dnr.urgent:not(.is-done):not(.calm)::before { background:var(--alert); }
html.dn .row.dnr.is-done::before { background:var(--ok); }

html.dn .dnr .dnr-who { width:256px; flex:none; display:flex; gap:10px; min-width:0; }
html.dn .dnr .n { padding:0; flex:none; }
html.dn .dnr .tick, html.dn .dnr .dnr-tick { appearance:none; -webkit-appearance:none; width:20px; height:20px; margin:1px 0 0; border-radius:6px; border:1.5px solid var(--line-strong); background:var(--card) center / 13px 13px no-repeat; display:grid; place-items:center; color:#fff; cursor:pointer; }
html.dn .dnr .dnr-tick { cursor:default; }
html.dn .dnr .tick:checked, html.dn .dnr .dnr-tick.on { background-color:var(--ok); border-color:var(--ok); }
html.dn .dnr .tick:checked { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
html.dn .dnr .tick:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
html.dn .dnr .dnr-id { display:flex; flex-direction:column; gap:4px; min-width:0; }
html.dn .dnr .who { display:block; font-size:15px; line-height:22px; font-weight:700; color:var(--ink); }
html.dn .dnr.calm .who, html.dn .dnr.is-done .who { color:var(--muted); }
html.dn .dnr .who:hover span { text-decoration:underline; }
html.dn .dnr .dnr-meta { display:block; margin:0; font-size:12px; line-height:16px; font-weight:500; color:var(--muted); font-variant-numeric:tabular-nums; }
html.dn .dnr .dnr-meta .rid { display:inline; padding:0; margin:0; background:none; border-radius:0; font-size:12px; font-weight:600; letter-spacing:0; color:var(--link); }
html.dn .dnr .dnr-meta .rid .ic { display:none; }
html.dn .dnr .dnr-meta .cin { font:inherit; color:inherit; padding:0; text-decoration:none; }
html.dn .dnr .dnr-ep { display:flex; flex-wrap:wrap; gap:2px 8px; align-items:center; }
html.dn .dnr .epl { display:inline-flex; align-items:center; gap:4px; padding:0; background:none; border-radius:0; font-size:12px; line-height:16px; font-weight:600; color:var(--ok); white-space:nowrap; }
html.dn .dnr .epl.bad { color:var(--alert); background:none; }
html.dn .dnr .epchk { display:inline-flex; align-items:center; gap:4px; font-size:12px; line-height:16px; font-weight:700; color:var(--link); text-decoration:none; }

html.dn .dnr .do { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; color:var(--ink); }
html.dn .dnr .when { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0; font-size:12px; line-height:16px; }
html.dn .dnr .when .due { font-size:12px; line-height:16px; font-weight:500; color:var(--muted); }
html.dn .dnr .tag { display:inline-flex; align-items:center; gap:5px; height:22px; margin:0; padding:0 8px; border:0 !important; border-radius:999px; font-size:12px; line-height:22px; font-weight:600; white-space:nowrap; background:var(--sunken); color:var(--ink2); }
html.dn .dnr .tag .ic { flex:none; }
html.dn .dnr .tag.t-late, html.dn .dnr .tag.t-cut.dn-red { background:var(--alert-tint) !important; color:var(--alert) !important; padding:0 8px; font-size:12px; }
html.dn .dnr .tag.t-due { background:var(--today-tint) !important; color:var(--today) !important; }
html.dn .dnr .tag.t-ok, html.dn .dnr .tag.t-hr { background:var(--ok-tint) !important; color:var(--ok) !important; }
html.dn .dnr .tag.t-new, html.dn .dnr .tag.dn-again, html.dn .dnr .tag.c95 { background:var(--orange-tint) !important; color:var(--orange-dk) !important; }
html.dn .dnr .tag.dn-wait, html.dn .dnr .tag.t-auto, html.dn .dnr .tag.t-cut, html.dn .dnr .tag.t-trouble, html.dn .dnr .tag.t-wait, html.dn .dnr .tag.t-decide { background:var(--amber-tint) !important; color:var(--amber) !important; }
html.dn .dnr .tag.t-lang, html.dn .dnr .tag.t-conf, html.dn .dnr .tag.t-track, html.dn .dnr .tag.t-code, html.dn .dnr .tag.t-more { background:transparent !important; border:1px solid var(--line) !important; color:var(--muted) !important; line-height:20px; }
html.dn .dnr .tag.t-next, html.dn .dnr .tag.t-sent, html.dn .dnr .tag.t-opwdd, html.dn .dnr .tag.t-follow { background:var(--today-tint) !important; color:var(--today) !important; border:0 !important; }
html.dn .dnr .tag.t-ai { background:var(--sunken) !important; color:var(--ink2) !important; }
html.dn .dnr .what { font-size:14px; line-height:21px; font-weight:600; color:var(--ink); }
html.dn .dnr .dnr-line { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
html.dn .dnr .dnr-line .tags { display:contents; }
html.dn .dnr .spill.dn-st { display:inline-flex; align-items:center; gap:6px; height:22px; max-width:100%; padding:0 8px; border-radius:6px; border:1px solid var(--line); background:transparent !important; font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink2) !important; }
html.dn .dnr .spill.dn-st .sdot { width:8px; height:8px; margin:0; border:0; border-radius:50%; flex:none; }   /* a round dot (Nov 7: the 2 px corners read as a stray square) */
html.dn .dnr .spill.dn-st .dn-d { font-weight:500; color:var(--muted); }
/* the step dots as short bars: done dark, the current one longer and orange */
html.dn .dnr .stepbar.compact { display:inline-flex; align-items:center; gap:3px; margin:0; max-width:none; }
html.dn .dnr .stepbar.compact .spb-name, html.dn .dnr .stepbar.compact .spb-now { display:none; }
html.dn .dnr .stepbar.compact .spb-step { flex:none; width:auto; }
html.dn .dnr .stepbar.compact .spb-step::before { display:none; }
html.dn .dnr .stepbar.compact .spb-step i { width:14px; height:6px; border:0; border-radius:3px; background:var(--line); box-shadow:none; }
html.dn .dnr .stepbar.compact .spb-step.done i { background:var(--ink2); }
html.dn .dnr .stepbar.compact .spb-step.now i { width:22px; background:var(--brand); box-shadow:none; }
html.dn .dnr .stepbar.compact .spb-step.missed i { background:transparent; box-shadow:inset 0 0 0 1.5px var(--amber); }
html.dn .dnr .stepbar.compact .spb-unclear { margin-left:4px; font-size:12px; color:var(--amber); }

/* the last note in a sunken box, "More" on the right */
html.dn .dnr .dnr-note { position:relative; padding:8px 72px 8px 10px; border-radius:10px; background:var(--sunken); font-size:13px; line-height:18px; color:var(--ink2); }
html.dn .dnr .dnr-note > details.dnr-last > summary { display:flex; align-items:flex-start; gap:8px; list-style:none; cursor:pointer; width:auto; max-width:100%; color:var(--ink2); font-size:13px; }
html.dn .dnr .dnr-note > details > summary::-webkit-details-marker { display:none; }
html.dn .dnr .dnr-note > details.dnr-last > summary .ic { flex:none; margin-top:2px; color:var(--muted); }
html.dn .dnr .dnr-note .lastline { font-size:13px; color:var(--ink2); }
html.dn .dnr .dnr-note .lastby { font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap; }
html.dn .dnr .dnr-note .lastnote { margin:8px 0 0; padding:8px 10px; border:0; border-radius:8px; background:var(--card); font-size:13px; line-height:18px; color:var(--ink); }
html.dn .dnr .dnr-note .fixrow { margin-top:8px; }
html.dn .dnr .dnr-note .lastnone { font-size:13px; color:var(--muted); }
html.dn .dnr .dnr-note > details.rmore { margin:0; }
html.dn .dnr .dnr-note > details.rmore > summary { position:absolute; top:8px; right:10px; display:inline-flex; align-items:center; gap:4px; margin:0; font-size:12px; line-height:18px; font-weight:700; color:var(--link); }
html.dn .dnr .dnr-note > details.rmore > summary::before { content:none; }
html.dn .dnr .dnr-note > details.rmore > summary::after { content:''; width:5px; height:5px; margin:-3px 0 0 4px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
html.dn .dnr .dnr-note > details.rmore[open] > summary::after { margin-top:3px; transform:rotate(225deg); }
html.dn .dnr .dnr-note > details.rmore[open] { margin-top:8px; padding-top:8px; border-top:1px solid var(--line); }
html.dn .dnr .dnr-note > details.rmore > div, html.dn .dnr .dnr-note > details.rmore .tags { margin-top:6px; font-size:12.5px; color:var(--ink2); }
html.dn .dnr .dnr-note > details.rmore .tags { display:flex; flex-wrap:wrap; gap:4px; }
html.dn .dnr .do > .lastnone { font-size:12px; color:var(--muted); }

/* the call column */
html.dn .dnr .act { width:232px; min-width:0; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
html.dn .dnr .act .ph { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
html.dn .dnr a.tel { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px; border-radius:10px; background:var(--sunken); color:var(--ink); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; text-decoration:none; }
html.dn .dnr a.tel .ic { color:var(--ink); }
html.dn .dnr a.tel:hover { background:var(--line); text-decoration:none; }
html.dn .dnr .whocall { display:inline-flex; align-items:center; gap:6px; margin:0; font-size:12px; line-height:16px; font-weight:600; color:var(--muted); }
html.dn .dnr .act .ph .sub { font-size:12px; line-height:16px; color:var(--muted); text-align:right; }
html.dn .dnr .actbtns { display:flex; gap:6px; margin-top:2px; }
html.dn .dnr .actbtns .btn { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; border-radius:8px; font-size:13px; font-weight:600; border:1px solid var(--line-strong); background:var(--card); color:var(--ink); }
html.dn .dnr .actbtns .btn.noans { color:var(--ink); }
html.dn .dnr .actbtns .btn.primary { background:var(--orange); border-color:var(--orange); color:#fff; }
html.dn .dnr .actbtns .btn.primary:hover { background:var(--orange-dk); border-color:var(--orange-dk); }
html.dn .dnr .actbtns .btn:not(.primary):hover { background:var(--sunken); }

/* ---------- Log result (m-log): a centred window ---------- */
html.dn .sheet:has(> .box.dnlog) { justify-content:center; align-items:flex-start; padding:80px 16px; overflow:auto; background:rgba(var(--th-ink-rgb), .28); }
html.dn .sheet .box.dnlog { width:min(600px, 100%); height:auto; padding:0; gap:0; overflow:visible; border-radius:16px; border:1px solid var(--line); background:var(--card); box-shadow:0 24px 64px rgba(var(--th-ink-rgb), .24); animation:dnLogIn .2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dnLogIn { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
html.dn .dnlog .dnlog-h { padding:20px 24px 14px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:4px; }
html.dn .dnlog .dnlog-h h3 { margin:0; font-size:18px; line-height:26px; font-weight:700; color:var(--ink); }
html.dn .dnlog .dnlog-h .sub { font-size:13px; line-height:18px; color:var(--ink2); }
html.dn .dnlog .dnlog-lbl { margin:20px 24px 10px; font-size:11px; line-height:16px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
html.dn .dnlog .choices { flex-direction:row; flex-wrap:wrap; gap:8px; padding:0 24px; }
html.dn .dnlog .choices button { display:inline-flex; align-items:center; height:40px; padding:0 14px; border-radius:10px; border:1px solid var(--line-strong); background:var(--card); color:var(--ink2); font-size:14px; font-weight:600; box-shadow:none; }
html.dn .dnlog .choices button:hover { background:var(--sunken); }
html.dn .dnlog .choices button[aria-pressed=true] { background:var(--orange-tint); border-color:var(--brand); color:var(--orange-dk); box-shadow:inset 0 0 0 1px var(--brand); }
html.dn .dnlog .rowx { gap:12px; padding:16px 24px 0; }
html.dn .dnlog .field { gap:6px; font-size:13px; line-height:18px; font-weight:600; color:var(--ink); }
html.dn .dnlog .field .sub { font-weight:400; color:var(--muted); }
html.dn .dnlog > .field { margin:16px 24px 0; }
html.dn .dnlog .field input, html.dn .dnlog .field select { height:40px; padding:0 12px; border-radius:10px; border:1px solid var(--line-strong); background:var(--card); color:var(--ink); font-size:14px; }
html.dn .dnlog .field textarea { min-height:84px; padding:10px 12px; border-radius:10px; border:1px solid var(--line-strong); background:var(--card); color:var(--ink); font-size:14px; line-height:20px; }
html.dn .dnlog .counter { margin:6px 24px 0; min-height:0; text-align:right; font-size:12px; color:var(--muted); }
html.dn .dnlog .counter.over { color:var(--alert); }
html.dn .dnlog .dnlog-hha { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; padding:14px 24px 20px; }
html.dn .dnlog .dnlog-hha .rowx { padding:0; }
html.dn .dnlog .hharow { padding-top:22px; font-size:13px; line-height:18px; color:var(--ink); }
html.dn .dnlog .hharow label.check { display:grid; grid-template-columns:18px 1fr; gap:2px 10px; align-items:start; margin:0; font-weight:600; }
html.dn .dnlog .hharow input[type=checkbox] { width:18px; height:18px; margin:0; accent-color:var(--orange); }
html.dn .dnlog .hharow label.check .sub { grid-column:2; font-size:12px; line-height:16px; font-weight:400; color:var(--muted); }
html.dn .dnlog .hharow > .sub { font-size:12px; line-height:16px; color:var(--muted); }
html.dn .dnlog #hhaOut:not(:empty) { padding:16px 24px; }
html.dn .sheet .box.dnlog > .actions { position:static; margin:0; padding:16px 24px; border-top:1px solid var(--line); background:transparent; justify-content:flex-end; gap:8px; border-radius:0 0 16px 16px; }
html.dn .dnlog .actions .btn { height:40px; padding:0 16px; border-radius:10px; font-weight:600; }


/* glossary words (<abbr class="gl">) inside these lines are inline text, not flex items */
html.dn .note-foot.dn-info { display:block; }
html.dn .note-foot.dn-info > .ic { vertical-align:-3px; margin-right:8px; }
html.dn .dnr .epl { display:inline; }
html.dn .dnr .epl > .ic { vertical-align:-2px; margin-right:4px; }
html.dn .dnr abbr.gl, html.dn .note-foot.dn-info abbr.gl, html.dn main[data-mdtab] #mdList .sec + .note-foot abbr.gl { text-decoration:none; border-bottom:1px dotted currentColor; }
html.dn .dnlog .hharow label.check { display:block; position:relative; padding-left:28px; }
html.dn .dnlog .hharow label.check input[type=checkbox] { position:absolute; left:0; top:0; }
html.dn .dnlog .hharow label.check .sub { display:block; margin-top:2px; }
html.dn .dnlog .field > span { font-weight:600; }
html.dn .dnr.is-again .who { color:var(--ink); }
html.dn #teamToday .sec.dn-team { display:flex; align-items:center; gap:10px; margin:0; padding:0 4px 10px; font-size:15px; line-height:22px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--ink); }
html.dn .dnh .tools #checkAll { display:inline-block; line-height:34px; white-space:nowrap; } html.dn .dnh .tools #checkAll > .ic { margin-right:8px; vertical-align:-3px; }
html.dn .dnh .tools .btn abbr.gl { text-decoration:none; }
html.dn .dnlog .hharow label.check .sub { margin-left:0; padding-left:0; }

/* narrow windows without a media rule (phone layouts live in dn-phone.css): the row's three columns, the header and the
   card tops wrap on their own, wide tables scroll inside their card */
html.dn .row.dnr { flex-wrap:wrap; }
html.dn .dnr .dnr-who { flex:0 1 256px; }
html.dn .dnr .do { flex:1 1 320px; }
html.dn .dnr .act { flex:0 1 232px; }
html.dn .dnp-top { flex-wrap:wrap; }
html.dn main[data-mdtab] #mdControls { flex-wrap:wrap; }
html.dn main[data-mdtab] #mdControls .tabs { overflow-x:auto; }
html.dn .panel.dnteam, html.dn details.dnpa { overflow-x:auto; }
html.dn .dnlog .dnlog-hha { grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
html.dn .dnh .tools .sq-btn small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* New design: case (scoped under html.dn; see design-new.css) */
/* The case window (Figma "Case window", d-case / p-case): a 600px drawer on the right. Top line, header with the call
   buttons, a soft orange "Do next" card, "Log this call" as four big buttons, "Where it is" as a segment bar, the tabs
   with Ask AI, and a quiet footer. Colours only from the tokens, so the dark theme can swap them. */
html.dn .sheet:has(> .dn-case) { background:rgba(var(--th-ink-rgb), .28); }
html.dn .sheet .box.dn-case { width:min(600px,100%); padding:20px 24px 24px; gap:20px; background:var(--card); color:var(--ink);
  border-left:1px solid var(--line); box-shadow:-16px 0 40px rgba(var(--th-ink-rgb), .14); }
html.dn .dn-case .dn-label { font-size:11px; line-height:16px; font-weight:700; letter-spacing:.66px; text-transform:uppercase; color:var(--muted); }
html.dn .dn-case .dn-cap { font-size:12px; line-height:16px; font-weight:500; color:var(--muted); }
html.dn .dn-case .dn-grow { flex:1 1 auto; }

/* small buttons and keys */
html.dn .dn-case .btn.dn-ghost { background:transparent; border-color:transparent; color:var(--ink2); height:30px; padding:0 10px; font-size:13px; font-weight:600; border-radius:8px; gap:6px; box-shadow:none; }
html.dn .dn-case .btn.dn-ghost:hover, html.dn .dn-case .xbtn.dn-ghost:hover { background:var(--sunken); color:var(--ink); }
html.dn .dn-case .btn.dn-ghost:disabled { opacity:.4; background:transparent; }
html.dn .dn-case .dn-icon { width:30px; height:30px; padding:0; justify-content:center; }
html.dn .dn-case .xbtn.dn-ghost { border:0; background:transparent; color:var(--ink2); border-radius:8px; font-size:15px; }
html.dn .dn-case .dn-up .ic, html.dn .dn-case .dn-up svg { transform:rotate(-90deg); }
html.dn .dn-case kbd { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 5px; border-radius:5px;
  font:700 11px/20px inherit; background:var(--sunken); color:var(--muted); border:1px solid var(--line); opacity:1; }
html.dn .dn-case .btn.primary kbd { background:rgba(255,255,255,.18); color:inherit; border-color:rgba(255,255,255,.28); }

/* header: top line, name, the GCR line, tags, call buttons */
html.dn .sheet .dn-case .dhead { margin:-20px -24px 0; padding:20px 24px 16px; gap:12px; background:var(--card); border-bottom:1px solid var(--line); top:-20px; }
html.dn .dn-case .dn-top { display:flex; align-items:center; gap:8px; }
html.dn .dn-case .dn-pos { flex:1 1 auto; font-size:12px; line-height:16px; font-weight:500; color:var(--muted); }
html.dn .sheet .dn-case h3 { font-size:24px; line-height:32px; font-weight:700; letter-spacing:-.12px; color:var(--ink); }
html.dn .sheet .dn-case .dn-line { margin-top:4px; font-size:13px; line-height:18px; color:var(--muted); }
html.dn .dn-case .dn-line .rid { margin-right:0; background:transparent; padding:0; font-size:13px; font-weight:500; color:var(--muted); letter-spacing:0; }
html.dn .dn-case .dn-line a.ridlink:hover { background:transparent; color:var(--link); text-decoration:underline; }
html.dn .dn-case .dn-tags { display:flex; flex-wrap:wrap; gap:6px; }
html.dn .dn-case .tag { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px; border-radius:999px; font-size:12px; font-weight:600; line-height:22px; white-space:nowrap; }
html.dn .dn-case .tag.dn-t-out { background:transparent; border:1px solid var(--line); color:var(--muted); }
html.dn .dn-case .tag.dn-t-due { background:var(--today-tint); color:var(--today); }
html.dn .dn-case .tag .cin { color:inherit; font:inherit; text-decoration:none; }
html.dn .dn-case .dn-calls { display:flex; flex-wrap:wrap; gap:8px; }
html.dn .dn-case .dn-calls a.btn { height:36px; padding:0 14px; font-size:14px; font-weight:600; border-radius:10px; gap:8px; text-decoration:none; color:var(--ink); background:var(--card); border:1px solid var(--line-strong); }
html.dn .dn-case .dn-calls a.btn .ic, html.dn .dn-case .dn-calls a.btn svg { color:inherit; }
html.dn .dn-case .dn-calls a.btn.primary { background:var(--orange); border-color:var(--orange); color:#fff; }
html.dn .dn-case .dn-calls a.btn:hover { text-decoration:none; filter:brightness(.97); }

/* Do next: soft orange card, an arrow, the why line and its note */
html.dn .dn-case .nowbox.dn-donext { display:flex; gap:14px; margin:0; padding:16px 18px; border:0; border-radius:14px; background:var(--orange-tint); }
html.dn .dn-case .dn-donext-i { color:var(--orange-dk); display:inline-flex; padding-top:2px; }
html.dn .dn-case .dn-donext-b { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
html.dn .dn-case .dn-donext .dn-label { color:var(--orange-dk); }
html.dn .dn-case .dn-donext .nowtext { font-size:16px; line-height:24px; font-weight:600; color:var(--ink); }
html.dn .dn-case .dn-donext .nowwhy { margin:0; font-size:13px; line-height:18px; color:var(--ink2); }
html.dn .dn-case .dn-donext .whyline { margin:0; font-size:12px; line-height:16px; color:var(--muted); }
html.dn .dn-case .dn-donext .nownext { border-top-color:rgba(var(--th-ink-rgb), .08); margin-top:4px; }

/* Log this call: four big buttons, then the note */
html.dn .sheet .dn-case .quick.dn-log { border:0; padding:0; background:transparent; border-radius:0; gap:8px; }
html.dn .dn-case .dn-log-h { display:flex; align-items:center; justify-content:space-between; gap:12px; }
html.dn .dn-case .dn-log-h .check { font-size:12px; color:var(--muted); font-weight:500; }
html.dn .dn-case .dn-callbar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
html.dn .dn-case .dn-callbar .btn.dn-cb { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:6px; height:auto; min-height:88px;
  padding:12px; border-radius:12px; border:1px solid var(--line-strong); background:var(--card); color:var(--ink); white-space:normal; text-align:left; box-shadow:none; }
html.dn .dn-case .dn-callbar .btn.dn-cb:hover { background:var(--sunken); }
html.dn .dn-case .dn-callbar .btn.dn-cb.primary { background:var(--orange); border-color:var(--orange); color:#fff; }
html.dn .dn-case .dn-callbar .btn.dn-cb.primary:hover { background:var(--orange-dk); border-color:var(--orange-dk); }
html.dn .dn-case .dn-cb-top { display:flex; width:100%; align-items:center; justify-content:space-between; }
html.dn .dn-case .dn-cb-l { font-size:13px; line-height:18px; font-weight:600; }
html.dn .dn-case .quick-btns kbd { display:inline-flex; }
html.dn .dn-case .dn-input { display:flex; align-items:center; gap:10px; height:40px; padding:0 12px; border-radius:10px; border:1px solid var(--line-strong); background:var(--card); color:var(--muted); cursor:text; }
html.dn .dn-case .dn-input:focus-within { border-color:var(--brand); box-shadow:0 0 0 3px rgba(var(--th-accent-rgb), .18); }
html.dn .dn-case .dn-input input { flex:1; min-width:0; height:38px; border:0; padding:0; background:transparent; font-size:14px; color:var(--ink); box-shadow:none; }
html.dn .dn-case .dn-input input:focus { box-shadow:none; border:0; outline:none; }

/* Where it is: a segment bar (done dark, now brand orange), the labels under it */
html.dn .dn-case .dn-where { display:flex; flex-direction:column; gap:10px; }
html.dn .dn-case .dn-sec-h { display:flex; align-items:center; justify-content:space-between; gap:12px; }
html.dn .dn-case .stepbar.full { gap:4px; margin:0; align-items:stretch; flex-wrap:nowrap; }
html.dn .dn-case .stepbar.full .spb-step { align-items:stretch; gap:6px; min-width:0; }
html.dn .dn-case .stepbar.full .spb-step::before { display:none; }
html.dn .dn-case .stepbar.full .spb-step i { width:auto; height:6px; border:0; border-radius:3px; background:var(--line); box-shadow:none; }
html.dn .dn-case .stepbar.full .spb-step.done i { background:var(--ink2); }
html.dn .dn-case .stepbar.full .spb-step.now i { background:var(--brand); box-shadow:none; }
html.dn .dn-case .stepbar.full .spb-step.missed i { background:transparent; outline:1px dashed var(--alert); outline-offset:-1px; }
html.dn .dn-case .stepbar.full .spb-step b { margin:0; padding:0; text-align:left; font-size:12px; line-height:16px; font-weight:500; color:var(--muted); }
html.dn .dn-case .stepbar.full .spb-step.now b { color:var(--ink); font-weight:700; }
html.dn .dn-case .stepbar.full .spb-unclear { color:var(--orange-dk); font-size:12px; }
html.dn .dn-case .stepset { margin:0; font-size:13px; }
html.dn .dn-case .stepset select { height:32px; }
html.dn .dn-case .stepset .btn { height:32px; }

/* tabs: History, Checklist, Details, Medicaid, and Ask AI on the right */
html.dn .sheet .dn-case .dtabs { margin:0; padding-top:0; background:transparent; align-items:flex-end; gap:4px; }
html.dn .dn-case .dtabs button[role=tab] { padding:0 12px 12px; font-size:14px; font-weight:600; }
html.dn .dn-case .dn-askai { display:inline-flex; align-items:center; gap:6px; padding:0 0 12px; font-size:12px; font-weight:500; color:var(--link); text-decoration:none; white-space:nowrap; }
html.dn .dn-case .dn-askai:hover { text-decoration:underline; }
html.dn .dn-case .dn-aiout:empty { display:none; }
html.dn .sheet .dn-case .dpane { gap:12px; margin-top:-8px; }

/* History: avatar, who and when, the outcome tag, the note */
html.dn .dn-case .histlist { border:0; border-radius:0; background:transparent; }
html.dn .dn-case .hist.dn-note { display:flex; flex-wrap:wrap; gap:12px; padding:14px 0; border-bottom:0; border-top:1px solid var(--line); }
html.dn .dn-case .hist.dn-note:first-child { border-top:0; }
html.dn .dn-case .hist.dn-note > .av { width:24px; height:24px; font-size:10px; }
html.dn .dn-case .hist.dn-note > :not(.av):not(.dn-note-b) { flex:0 0 100%; }
html.dn .dn-case .dn-note-b { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
html.dn .dn-case .dn-note .hist-meta { margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:12px; color:var(--muted); }
html.dn .dn-case .dn-note .hist-meta b { font-size:13px; line-height:18px; font-weight:600; color:var(--ink); }
html.dn .dn-case .dn-note-at { font-size:12px; font-weight:500; color:var(--muted); }
html.dn .dn-case .dn-note .hist-text { font-size:13px; line-height:18px; color:var(--ink2); }
html.dn .dn-case .tag.dn-o-ok { background:var(--ok-tint); color:var(--ok); }
html.dn .dn-case .tag.dn-o-bad { background:var(--alert-tint); color:var(--alert); }

/* footer: quiet buttons, a line above */
html.dn .sheet .dn-case > .actions.dn-foot { justify-content:flex-start; align-items:center; gap:8px; margin:auto -24px -24px; padding:12px 24px; bottom:-24px; background:var(--card); border-top:1px solid var(--line); }

/* phone: the window is the whole screen, one big call button, the log bar at the bottom */
html.dn .dn-qfix { display:none; }
@media (max-width:640px) {
  html.dn .sheet .box.dn-case { width:100%; padding:12px 16px 132px; gap:14px; border-left:0; box-shadow:none; background:var(--page); }
  html.dn .sheet .dn-case .dhead { margin:-12px -16px 0; padding:8px 16px 14px; top:-12px; background:var(--page); border-bottom:0; gap:8px; }
  html.dn .dn-case .dn-pos { text-align:center; }
  html.dn .dn-case .dn-calls a.btn { flex:1 1 100%; justify-content:center; height:44px; font-size:15px; border-radius:12px; }
  html.dn .dn-case .dn-calls a.btn:not(.primary):not(:only-child) { height:36px; font-size:14px; }
  html.dn .dn-case .nowbox.dn-donext { padding:14px; }
  html.dn .dn-case .dn-donext-i { display:none; }
  html.dn .dn-case .dn-donext .nowtext { font-size:14px; line-height:22px; }
  html.dn .dn-case .dn-log-h .dn-label { display:none; }
  html.dn .dn-case .quick .dn-callbar { display:none; }
  html.dn .dn-case .dn-top kbd { display:none; }
  html.dn .dn-case .dhead .dn-line { font-size:12px; }
  html.dn .dn-case .dn-sec-h { flex-wrap:wrap; gap:2px 12px; }
  html.dn .dn-case .stepbar.full .spb-step b { font-size:11px; }
  html.dn .sheet .dn-case > .actions.dn-foot { position:static; margin:auto -16px 0; padding:10px 16px 0; background:transparent; }
  html.dn .dn-case .qfix.dn-qfix { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:12px 16px calc(30px + env(safe-area-inset-bottom)); background:var(--card); border-top:1px solid var(--line); box-shadow:none; }
  html.dn .dn-case .qfix.dn-qfix::before { content:'Log this call'; grid-column:1 / -1; font-size:11px; line-height:16px; font-weight:700; letter-spacing:.66px; text-transform:uppercase; color:var(--muted); }
  html.dn .dn-case .qfix .btn.dn-cb { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:10px 4px; min-height:62px; border-radius:12px; border:1px solid var(--line-strong); background:var(--card); color:var(--ink); font-size:12px; font-weight:600; line-height:16px; white-space:nowrap; }
  html.dn .dn-case .qfix .btn.dn-cb.primary { background:var(--orange); border-color:var(--orange); color:#fff; }
}
/* "Link to the real case" on a case with no referral ID yet (owner, Oct 27) */
.nk-link { display:flex; flex-direction:column; gap:6px; margin-top:6px; min-width:0; }
.nk-row { display:flex; gap:8px; flex-wrap:wrap; }
.nk-row input { flex:1 1 140px; min-width:0; }

/* New design: overview (scoped under html.dn; see design-new.css). Mockups: design/portal-redesign m-overview,
   t-overview-more (every fold open), m-overview-coord. The markup it styles is in web/js/overview.js (only while dn is on). */

/* page: the full width of the main column, 28/32 padding like the mockup */
html.dn main:has(> .ov-head) { max-width:none; padding:28px 32px 64px; }
html.dn main:has(> .ov-head) > * + * { margin-top:0; }

/* header: date line, title, the day's numbers; Whole team and Refresh on the right */
html.dn .ov-head { background:none; color:var(--ink); padding:0; border-radius:0; margin:0 0 20px; align-items:flex-end; }
html.dn .ov-eyebrow { font-size:12px; line-height:16px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted); }
html.dn .ov-head h1 { font-size:24px; line-height:32px; font-weight:700; letter-spacing:-.12px; color:var(--ink); margin:4px 0 4px; }
html.dn .ov-head .sub { color:var(--ink2); font-size:13px; line-height:18px; }
html.dn .ov-head .sub b { color:var(--ink); }
html.dn .ov-head .tools { gap:16px; align-items:center; }
html.dn .ov-head .btn { background:var(--card); color:var(--ink); border:1px solid var(--line-strong); height:36px; padding:0 14px; gap:8px; font-size:14px; }
html.dn .ov-head .btn:hover { background:var(--sunken); }
html.dn .dn-sel { position:relative; display:inline-flex; align-items:center; }
html.dn .dn-sel > .ic { position:absolute; left:12px; color:var(--ink2); pointer-events:none; }
html.dn .ov-head select { height:36px; padding:0 34px 0 36px; border:1px solid var(--line-strong); border-radius:10px; background-color:var(--card); color:var(--ink); font-weight:600; font-size:14px; }

/* "HHA logins have no name": a soft yellow strip with a button on the right */
html.dn .alert.dn-alertw { background:var(--amber-tint); color:var(--amber); border:0; border-radius:12px; padding:12px 16px; margin:0 0 20px; gap:12px; font-size:13px; line-height:18px; font-weight:500; }
html.dn .alert.dn-alertw b { font-size:13px; font-weight:800; color:var(--amber); }
html.dn .alert.dn-alertw > .ic { color:var(--amber); }
html.dn .dn-grow { flex:1; min-width:0; }
html.dn .btn.dn-sm { height:30px; padding:0 10px; font-size:13px; border-radius:8px; flex:none; }

/* how to use this page: grey strip, numbered steps */
html.dn .howto.dn-howto { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; background:var(--sunken); border:0; border-radius:12px; padding:10px 16px; margin:0 0 20px; font-size:13px; line-height:18px; color:var(--ink2); }
html.dn .dn-howto > b { color:var(--ink); font-weight:600; }
html.dn .dn-howto span b { color:var(--ink); font-weight:700; }
html.dn .dn-howto .k { display:inline-flex; width:20px; height:20px; border-radius:99px; background:var(--card); border:1px solid var(--line); align-items:center; justify-content:center; font-size:11px; font-weight:800; font-style:normal; color:var(--ink); margin-right:6px; vertical-align:middle; }

/* number cards: label left, icon right, big number, a line, and (managers) an orange "Open … →" */
html.dn .kpis.dn-kpis { gap:12px; margin:0 0 20px; }
html.dn .kpis.dn-kpis.five { grid-template-columns:repeat(5,minmax(0,1fr)); }
html.dn .dn-kpis .kpi { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; display:flex; flex-direction:column; gap:8px; box-shadow:none; }
html.dn .dn-kpis .kpi:hover { border-color:var(--line-strong); box-shadow:var(--shadow-hi); }
html.dn .dn-kpis .kpi-top { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); }
html.dn .dn-kpis .kpi-label { font-size:13px; line-height:18px; font-weight:700; color:var(--ink2); text-transform:none; letter-spacing:0; }
html.dn .dn-kpis .kpi-icon { color:var(--muted); }
html.dn .dn-kpis .kpi-n { font-size:36px; line-height:40px; font-weight:800; letter-spacing:-.4px; color:var(--ink); margin:0; }
html.dn .dn-kpis .kpi-sub { font-size:13px; line-height:18px; color:var(--ink2); }
html.dn .dn-kpis .kpi-go { font-size:13px; line-height:18px; font-weight:700; color:var(--orange-dk); }
html.dn .dn-kpis .kpi.hot { border-color:var(--alert); box-shadow:inset 0 3px 0 var(--alert); }
html.dn .dn-kpis .kpi.urgent { border-color:var(--line); box-shadow:inset 0 3px 0 var(--amber); }
html.dn .dn-kpis .kpi.urgent .kpi-icon { color:var(--muted); }
html.dn .dn-kpis .kpi.good .kpi-n, html.dn .dn-kpis .kpi.urgent .kpi-n { color:var(--ink); }
html.dn .dn-kpis .kpi.n-late .kpi-n { color:var(--alert); }
html.dn .dn-kpis .kpi.n-done .kpi-n { color:var(--ok); }
html.dn .dn-kpis .kpi.n-wait .kpi-n { color:var(--amber); }
html.dn .dn-kpis .kpi.n-brand .kpi-n { color:var(--orange); }
/* the small ones: calm, no coloured edges */
html.dn .kpis.small.dn-kpis .kpi { padding:14px 16px; gap:4px; }
html.dn .kpis.small.dn-kpis .kpi, html.dn .kpis.small.dn-kpis .kpi.hot, html.dn .kpis.small.dn-kpis .kpi.urgent { border-color:var(--line); box-shadow:none; }
html.dn .kpis.small.dn-kpis .kpi-label { font-size:12px; line-height:16px; }
html.dn .kpis.small.dn-kpis .kpi-n, html.dn .kpis.small.dn-kpis .kpi.hot .kpi-n { font-size:24px; line-height:30px; color:var(--ink); margin:2px 0 0; }

/* a section title outside its card */
html.dn .dn-sec { display:flex; align-items:center; gap:10px; padding:0 4px 8px; }
html.dn .dn-sec > .ic { color:var(--ink2); }
html.dn .dn-sec > b { font-size:15px; line-height:22px; font-weight:700; color:var(--ink); }
html.dn .dn-sec > .sub { font-size:13px; line-height:18px; color:var(--muted); }
html.dn .dn-sec-r { margin-left:auto; font-size:12px; color:var(--muted); font-weight:500; }
html.dn .dn-desc { font-size:13px; line-height:18px; color:var(--muted); padding:0 4px 10px; }
html.dn .dn-desc b { color:var(--ink2); font-weight:600; }

/* cards */
html.dn .ov-card { border-radius:14px; border-color:var(--line); box-shadow:none; margin-bottom:20px; }
html.dn .ov-title { color:var(--ink); font-size:14px; font-weight:600; }
html.dn .ov-title .sub { color:var(--muted); font-weight:500; }

/* tables: grey header row in small caps, light rows */
html.dn .ov-card table th { background:var(--sunken); color:var(--muted); font-size:11px; line-height:16px; font-weight:700; letter-spacing:.06em; padding:10px 16px; border-bottom:1px solid var(--line); }
html.dn .ov-card table td { padding:12px 16px; border-top:1px solid var(--line); border-bottom:0; font-size:13px; color:var(--ink); }
html.dn .ov-card table tr:first-child td, html.dn .ov-card thead + tbody tr:first-child td { border-top:0; }

/* New cases today */
html.dn .nt-card { padding:0; overflow:hidden; }
html.dn .nt-card .pc-head { padding:16px 18px !important; align-items:center; }
html.dn .nt-card .ov-title { font-size:15px; font-weight:700; margin:0; }
html.dn .nt-card .pc-head .sub { color:var(--muted); font-size:13px; }
html.dn .dn-x { width:32px; height:32px; display:grid; place-items:center; border:0; background:none; border-radius:8px; color:var(--ink2); cursor:pointer; flex:none; }
html.dn .dn-x:hover { background:var(--sunken); color:var(--ink); }
html.dn .nt-src { padding:0 18px 14px; margin:0; }
html.dn .nt-chip { display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border-radius:10px; border:1px solid var(--line); background:var(--card); font-size:13px; font-weight:600; color:var(--ink2); }
html.dn .nt-chip b { color:var(--ink); font-weight:800; margin:0; }
html.dn .nt-card .sb-name { color:var(--ink); font-weight:600; text-decoration:none; font-size:13px; }
html.dn .nt-card td { color:var(--ink2); }
html.dn .tag.t-next { background:var(--ok-tint); color:var(--ok); }
html.dn .tag.t-sent { background:var(--today-tint); color:var(--today); }
html.dn .tag.t-cut { background:var(--alert-tint); color:var(--alert); }
html.dn .ov-card .tag { font-size:12px; height:22px; padding:0 8px; font-weight:600; }

/* late banner (coordinators): soft red, red title, orange button */
html.dn .banner { background:var(--alert-tint); border:0; border-radius:14px; padding:16px 18px 16px 20px; margin:0 0 20px; gap:14px; }
html.dn .banner:hover { background:var(--alert-tint); }
html.dn .banner .b-ic { width:auto; height:auto; background:none; color:var(--alert); }
html.dn .banner b { color:var(--alert); font-size:14px; font-weight:700; }
html.dn .banner .sub { color:var(--ink2); font-size:13px; }
html.dn .banner .btn.primary { height:36px; }

/* Priority cases */
html.dn .ov-card.dn-pc { padding:0; overflow:hidden; }
html.dn .dn-pc-tabs { display:flex; align-items:flex-end; gap:12px; padding:12px 16px 0; border-bottom:1px solid var(--line); }
html.dn .dn-pc-tabs .tabs { flex:1; border-bottom:0; padding:0; margin:0; gap:4px; }
html.dn .dn-pc-tabs .tabs button { padding:0 12px 12px; font-size:14px; }
html.dn .dn-pc-tabs .pc-count { background:none; border:0; padding:0 0 12px; font-size:12px; color:var(--muted); }
html.dn .pc table td, html.dn .pc table th { padding-left:16px; }
html.dn .pc td { vertical-align:middle; }
html.dn .pc tr.pc-row td { padding-top:12px; padding-bottom:12px; }
html.dn .pc tr.pc-row td > b { font-size:14px; font-weight:600; }
html.dn .pc .rid-s { color:var(--muted); font-size:12px; line-height:16px; margin-top:2px; }
html.dn .dn-rid { color:var(--link); font-weight:600; }
html.dn .pc .dn-blk { font-weight:600; font-size:13px; }
html.dn .pc .who { color:var(--muted); font-size:12px; line-height:16px; }
html.dn .dn-owner { display:inline-flex; align-items:center; gap:8px; font-size:13px; }
html.dn .ov-card .av { width:24px; height:24px; font-size:10px; }
html.dn .dn-due { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; }
html.dn .pc td.late .dn-due, html.dn .pc td.today .dn-due { height:22px; padding:0 8px; border-radius:999px; min-width:150px; max-width:100%; }
html.dn .pc td.late .dn-due { background:var(--alert-tint); color:var(--alert); }
html.dn .pc td.today .dn-due { background:var(--today-tint); color:var(--today); }
html.dn .pc td.later .dn-due { color:var(--ink2); font-size:13px; font-weight:500; }
html.dn .pc .open-b { border:0; background:none; color:var(--muted); width:28px; height:28px; }
html.dn .pc .open-b .ic { transform:rotate(90deg); }
html.dn .pc .open-b:hover, html.dn .pc tr.open .open-b { border:0; background:var(--sunken); color:var(--ink); }
html.dn .pc tr.open .open-b .ic { transform:rotate(-90deg); }
html.dn .pc tr.pc-row.open td { background:var(--orange-tint); }
html.dn .pc tr.det td { background:var(--orange-tint); }
html.dn .pc tr.det.on td { border-top:1px solid var(--line); }
html.dn .pc .det-body { padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; font-size:13px; }
html.dn .pc .det-top { margin:0; color:var(--ink); font-size:14px; font-weight:600; align-items:center; }
html.dn .pc .det-top .linkbtn { display:inline-flex; align-items:center; gap:4px; color:var(--link); font-weight:700; font-size:12px; text-decoration:none; }
html.dn .pc .det-body details summary { list-style:none; cursor:pointer; color:var(--link); font-weight:600; font-size:12px; display:inline-flex; align-items:center; gap:4px; }
html.dn .pc .det-body details summary::-webkit-details-marker { display:none; }
html.dn .pc .det-body details[open] summary .ic { transform:rotate(90deg); }
html.dn .pc .det-body details .sub { margin-top:6px; }
html.dn .pc .src { margin:0; padding:10px 12px; border:1px solid var(--line); border-left:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink2); font-size:13px; line-height:19px; }
html.dn .pc .src .sub { font-size:12px; color:var(--muted); margin-top:2px; }
html.dn #pcMore { display:inline-flex; align-items:center; height:30px; padding:0 10px; border-radius:8px; color:var(--ink2); font-size:13px; text-decoration:none; }
html.dn #pcMore:hover { background:var(--sunken); }
html.dn #pcMore::after { content:''; width:7px; height:7px; margin-left:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); }
html.dn .pc .pc-foot { background:var(--sunken); padding:10px 16px; color:var(--muted); font-size:12px; }

/* Follow-up by coordinator */
html.dn .ov-card.dn-people { padding:0; overflow:hidden; }
html.dn .dn-people .st-l { display:inline-flex; align-items:center; gap:8px; font-size:13px; }
html.dn .dn-people tr.warnrow td { background:var(--alert-tint); }
html.dn .dn-people tr.warnrow td:first-child { box-shadow:none; }
html.dn .dn-people b.late { color:var(--alert); }
html.dn .dn-people .sub { color:var(--muted); font-size:12px; }
html.dn .dn-today { display:flex; align-items:center; gap:8px; }
html.dn .dn-today > span:first-child { width:28px; font-variant-numeric:tabular-nums; }
html.dn .dn-bar { flex:1; max-width:190px; height:6px; border-radius:99px; background:var(--sunken); overflow:hidden; }
html.dn .dn-bar i { display:block; height:100%; background:var(--ok); border-radius:99px; }
html.dn .dn-people td { font-variant-numeric:tabular-nums; }

/* Needs a manager / Needs your attention: dot, title and sub line, count, chevron */
html.dn .ov-card.dn-probs { padding:0; gap:0; overflow:hidden; display:flex; flex-direction:column; }
html.dn .dn-probs .prob { border:0; border-top:1px solid var(--line); border-radius:0; padding:0; }
html.dn .dn-probs .prob:first-child { border-top:0; }
html.dn .dn-probs .prob summary { list-style:none; display:flex; align-items:center; gap:12px; padding:12px 16px; }
html.dn .dn-probs .prob summary::-webkit-details-marker { display:none; }
html.dn .dn-probs .prob summary b { color:var(--ink); margin:0; font-weight:600; font-size:14px; line-height:22px; }
html.dn .dn-pg { flex:1; min-width:0; display:flex; flex-direction:column; }
html.dn .dn-pg .sub { font-size:12px; line-height:16px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html.dn .dn-dot { width:8px; height:8px; border-radius:99px; flex:none; background:var(--muted); }
html.dn .prob.late .dn-dot { background:var(--alert); } html.dn .prob.wait .dn-dot { background:var(--ink); }
html.dn .dn-pn { min-width:22px; height:22px; padding:0 7px; border-radius:99px; display:inline-grid; place-items:center; font-size:12px; font-weight:600; background:var(--sunken); color:var(--ink2); font-variant-numeric:tabular-nums; }
html.dn .prob.late .dn-pn { background:var(--alert-tint); color:var(--alert); } html.dn .prob.wait .dn-pn { background:var(--amber-tint); color:var(--amber); }
html.dn .dn-probs .prob summary > .ic { color:var(--ink); transition:transform .2s; }
html.dn .dn-probs .prob[open] summary > .ic { transform:rotate(90deg); }
html.dn .dn-probs .prob-list { margin:0; padding:0 16px 12px 36px; gap:4px; }
html.dn .dn-probs .prob-c { color:var(--link); font-weight:600; font-size:13px; line-height:20px; padding:2px 0; }
html.dn .dn-probs .prob-c b { font-weight:600; }
html.dn .dn-probs .prob-c:hover { background:none; text-decoration:underline; }
html.dn .dn-probs .prob-list > .sub { color:var(--muted); font-size:12px; }

/* the folds: white rows with a chevron, a title, a muted summary and "Open" / "Fold" on the right */
html.dn .dn-foldlabel { font-size:11px; line-height:16px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:0 4px 8px; }
html.dn details.dn-fold { background:none; border:0; box-shadow:none; border-radius:0; margin:0 0 10px; }
html.dn details.dn-fold > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--card); border:1px solid var(--line); border-radius:14px; font-size:14px; color:var(--ink); }
html.dn details.dn-fold > summary::before { content:none; display:none; }
html.dn details.dn-fold > summary::-webkit-details-marker { display:none; }
html.dn details.dn-fold > summary:hover { border-color:var(--line-strong); }
html.dn details.dn-fold > summary > .ic { color:var(--ink); transition:transform .2s; flex:none; }
html.dn details.dn-fold[open] > summary > .ic { transform:rotate(90deg); }
html.dn details.dn-fold > summary b { color:var(--ink); font-weight:600; font-size:15px; white-space:nowrap; }
html.dn details.dn-fold > summary .sub { flex:1; min-width:0; color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html.dn details.dn-fold > summary .sub .late, html.dn details.dn-fold > summary .sub b { color:var(--alert); font-weight:700; font-size:13px; }
html.dn .dn-fold-go::after { content:'Open'; color:var(--link); font-weight:700; font-size:12px; }
html.dn details.dn-fold[open] .dn-fold-go::after { content:'Fold'; }
html.dn details.dn-fold > .ov-fold-in { padding:8px 0 10px; }
html.dn .ov-fold-in > .ov-card, html.dn .ov-fold-in > .ov-row { margin-bottom:12px; }
html.dn .ov-fold-in .kpis.small { margin:0; grid-template-columns:repeat(4,minmax(0,1fr)); }

/* Waiting on plans: rows, amber when a referral waits over 5 days */
html.dn .dn-plans { margin-bottom:20px; }
html.dn .ov-fold-in > .dn-plans { margin-bottom:0; }
html.dn .dn-plans .plans { gap:0; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
html.dn .dn-plans .plan { border:0; border-top:1px solid var(--line); border-radius:0; background:var(--card); }
html.dn .dn-plans .plan:first-child { border-top:0; }
html.dn .dn-plans .plan.stale > summary { background:var(--amber-tint); }
html.dn .dn-plans .plan summary { grid-template-columns:1.4fr 120px 1.4fr 24px; gap:12px; padding:12px 16px; font-size:13px; line-height:18px; }
html.dn .dn-plans .plan summary b { font-size:14px; font-weight:600; color:var(--ink); }
html.dn .dn-plans .plan summary span { color:var(--ink); font-size:13px; }
html.dn .dn-plans .plan summary .late { color:var(--amber); font-weight:700; }
html.dn .dn-plans .plan summary > .ic { color:var(--ink); transition:transform .2s; justify-self:end; }
html.dn .dn-plans .plan[open] summary > .ic { transform:rotate(90deg); }
html.dn .dn-plans .plan-list { border-top:0; padding:4px 16px 12px; gap:6px; }
html.dn .dn-plans .plan-row { grid-template-columns:200px 1fr auto; gap:12px; padding:0; font-size:13px; line-height:18px; text-decoration:none; align-items:center; }
html.dn .dn-plans .plan-row:hover { background:none; }
html.dn .dn-plans .plan-row > span:first-child { color:var(--link); font-weight:600; }
html.dn .dn-plans .plan-row:hover > span:first-child { text-decoration:underline; }
html.dn .dn-plans .plan-row .sub { color:var(--muted); font-size:13px; }
html.dn .dn-plans .plan-row .late { background:var(--amber-tint); color:var(--amber); font-weight:600; font-size:12px; height:22px; line-height:22px; padding:0 8px; border-radius:999px; }
html.dn .dn-plans #plansAll { margin:10px 16px; text-decoration:none; color:var(--link); font-weight:700; }

/* Where each case is, step by step */
html.dn .dn-stepsec { margin-bottom:20px; }
html.dn .ov-fold-in > .dn-stepsec { margin-bottom:0; }
html.dn .dn-stepsec .sb-card { padding:16px; margin:0; }
html.dn .sb-tabs { margin-bottom:12px; }
html.dn .sb-tabs button { padding:0 12px 12px; }
html.dn .sb-steps { gap:8px; margin-bottom:12px; }
html.dn .sb-arrow { display:none; }
html.dn .sb-step { flex:1 1 0; max-width:none; min-width:120px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px; gap:2px; box-shadow:none; }
html.dn .sb-step:hover { transform:none; border-color:var(--line-strong); }
html.dn .sb-step.on { background:var(--orange-tint); border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); }
html.dn .sb-step small { font-size:12px; line-height:16px; letter-spacing:0; text-transform:none; color:var(--muted); font-weight:500; }
html.dn .sb-step b { font-size:13px; font-weight:600; }
html.dn .sb-n { font-size:18px; line-height:26px; color:var(--ink); gap:6px; margin-top:0; }
html.dn .sb-n em { font-weight:700; }
html.dn .sb-list { border:1px solid var(--line); border-radius:12px; }
html.dn .sb-list .sb-name { color:var(--ink); font-weight:600; font-size:13px; }
html.dn .sb-list td .sub { color:var(--muted); font-size:12px; }

/* charts: ring, cutoffs, AI note reader, weekly bars, statuses */
html.dn .dn-charts { margin-bottom:20px; }
html.dn .ov-row { gap:12px; margin-bottom:12px; }
html.dn .ov-row .ov-card { padding:16px; margin:0; }
html.dn .ring-bg { stroke:var(--sunken); }
html.dn .ring-fg { stroke:var(--ok); }
html.dn .ring-n { color:var(--ink); font-size:18px; font-weight:700; }
html.dn .ring-l { display:none; }
html.dn .ring-card .sub { color:var(--muted); }
html.dn .cutoff { background:var(--sunken); border:0; border-radius:10px; padding:10px 12px; }
html.dn .cutoff.soon { background:var(--alert-tint); }
html.dn .cutoff b { color:var(--ink); font-size:14px; font-weight:600; }
html.dn .cutoff .sub { color:var(--muted); font-size:12px; }
html.dn .cutoff .cd { display:flex; align-items:baseline; gap:12px; }
html.dn .cutoff .cd span { font-size:18px; color:var(--ink); }
html.dn .cutoff.soon .cd span { color:var(--alert); }
html.dn .cutoff .cd small { font-size:12px; color:var(--muted); font-weight:500; }
html.dn .ai-card .ai-mini { gap:8px; align-items:flex-start; }
html.dn .ai-card .orb, html.dn .ai-card .orb.sm { width:8px; height:8px; background:none; margin-top:7px; }
html.dn .ai-card .orb span { width:8px; height:8px; background:var(--muted); }
html.dn .ai-card.idle .orb span { background:var(--ok); }
html.dn .ai-card.running .orb span { background:var(--brand); }
html.dn .ai-card .ai-mini b { font-size:13px; }
html.dn .ai-card .ai-mini .sub { color:var(--muted); font-size:12px; }
html.dn .ai-bill { border-top:0; padding-top:4px; }
html.dn .ai-bill-k { gap:16px; }
html.dn .ai-bill-k .sub { color:var(--muted); font-size:12px; }
html.dn .ai-bill-k b { font-size:18px; line-height:26px; color:var(--ink); }
html.dn .ai-bill-bars i, html.dn .ai-bill-bars > div:last-child i { max-width:none; border-radius:3px 3px 0 0; background:var(--brand); }
html.dn .ai-bill-bars span { color:var(--muted); font-size:11px; }
html.dn .ai-bill > .sub { color:var(--muted); font-size:12px; }
html.dn .cols { border-bottom:0; height:150px; gap:8px; }
html.dn .col-bar { width:100%; max-width:none; background:var(--s1); opacity:.85; border-radius:4px 4px 0 0; }
html.dn .col.partial .col-bar { background:var(--s1); opacity:.4; }
html.dn .col:hover .col-bar { background:var(--brand); opacity:1; }
html.dn .col-x { color:var(--muted); font-size:11px; }
html.dn .hbars { gap:10px; }
html.dn .hbar { grid-template-columns:150px 1fr 44px; font-size:13px; line-height:18px; }
html.dn .hb-l { color:var(--ink2); }
html.dn .hb-track { height:10px; background:none; border-radius:99px; }
html.dn .hb-track i { border-radius:99px; }
html.dn .hbar.other .hb-track i { background:var(--th-faint); }
html.dn .hbar b { font-weight:600; }

/* Recent activity */
html.dn .ov-card.dn-act { padding:6px 16px; }
html.dn .dn-act .feed-i { grid-template-columns:28px 1fr auto; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:0; border-top:1px solid var(--line); font-size:13px; line-height:19px; }
html.dn .dn-act .feed-i:first-child { border-top:0; }
html.dn .dn-act .feed-ic { width:28px; height:28px; border-radius:99px; background:var(--sunken); color:var(--ink2); }
html.dn .dn-act .feed-ic .ic { width:14px; height:14px; }
html.dn .dn-act .feed-i .sub { color:var(--muted); }
html.dn .dn-act .feed-t { color:var(--muted); font-size:12px; }

/* narrower screens */
@media (max-width:1100px) {
  html.dn .kpis.dn-kpis.five { grid-template-columns:repeat(3,minmax(0,1fr)); }
  html.dn .ov-fold-in .kpis.small { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* fixes after the first look at 1440 */
html.dn .pc tr.det td { padding:0; border-top:0; }
html.dn .pc tr.det.on td { border-top:1px solid var(--line); }
html.dn .dn-due { white-space:nowrap; }
html.dn .nt-src:empty { display:none; }
html.dn .dn-people td { vertical-align:middle; }
html.dn .ring-card > .ov-title { align-self:flex-start; }
html.dn .col-x { display:block; transform:none; bottom:-22px; }
html.dn .cols { height:130px; margin-bottom:30px; }
html.dn .cols + .sub { margin-top:0; color:var(--muted); }
html.dn .dn-act .empty { border:0; background:none; padding:24px; color:var(--muted); }
html.dn .nt-card .pc-head { padding:16px 18px 14px !important; }
html.dn .nt-card .pc-head .sub { margin:0; }
html.dn .nt-card .tag.t-next { background:var(--ok-tint) !important; color:var(--ok) !important; border:0 !important; }
html.dn .nt-card .tag.t-sent { background:var(--today-tint) !important; color:var(--today) !important; border:0 !important; }
html.dn .nt-card .tag.t-cut { background:var(--alert-tint) !important; color:var(--alert) !important; border:0 !important; }
html.dn .sb-tabs button[aria-selected=true] { border-bottom-color:var(--brand); color:var(--ink); }

/* narrow windows: never wider than the screen (the phone layout itself is in dn-phone.css). These change nothing at
   desktop widths: the tables are already wider than their minimum, and the rows already fit on one line. */
html.dn .ov-card.dn-pc, html.dn .ov-card.dn-people, html.dn .nt-card { overflow-x:auto; }
html.dn .ov-card.dn-pc table, html.dn .ov-card.dn-people table, html.dn .nt-card table { min-width:640px; }
html.dn .sb-list table { min-width:560px; }
html.dn .dn-sec, html.dn .alert.dn-alertw, html.dn .dn-pc-tabs { flex-wrap:wrap; }
html.dn .dn-sec { row-gap:2px; }
html.dn .dn-plans .plans { overflow-x:auto; }
html.dn .dn-plans .plan summary, html.dn .dn-plans .plan-list { min-width:520px; }
html.dn .col-x { max-width:100%; overflow:hidden; white-space:nowrap; }
html.dn details.dn-fold > summary { flex-wrap:wrap; } html.dn details.dn-fold > summary b { white-space:normal; min-width:0; } html.dn .dn-fold-go { margin-left:auto; }
/* More numbers under the four big cards (owner, Oct 22): the small cards four to a row */
html.dn .more-nums.dn-fold { margin:0 0 20px; }
html.dn .more-nums .dn-kpis { grid-template-columns:repeat(4, minmax(0, 1fr)); }
/* New cases today: how many were done today, always shown (owner, Oct 22; also in Focus) */
html.dn .dn-kpis .kpi-done { font-size:13px; line-height:18px; color:var(--ink2); margin-top:2px; }
html.dn .dn-kpis .kpi-done b { color:var(--ok); font-weight:700; }

/* New design: Problems and Report (scoped under html.dn; see design-new.css). Mockups d-problems, t-problems-status,
   p-problems, d-report, t-report-monday/-coord/-person/-sticks/-plans, p-report. Every rule is limited to the page it
   styles: Problems = main:has(#pbExport), Report = main:has(#rpList), so nothing leaks onto the other pages. */

/* ---------- both pages: header, how-to strip, section labels, tables, toggles ---------- */
html.dn main:is(:has(#pbExport), :has(#rpList)) .head { background:none; border:0; padding:0; margin-bottom:20px; align-items:flex-end; gap:16px; }
html.dn main:is(:has(#pbExport), :has(#rpList)) .head .eyebrow { font-size:13px; line-height:18px; letter-spacing:0; text-transform:none; font-weight:500; color:var(--muted); margin-bottom:4px; }
html.dn main:is(:has(#pbExport), :has(#rpList)) .head h1 { font-size:24px; line-height:32px; font-weight:700; letter-spacing:-.005em; color:var(--ink); }
html.dn main:is(:has(#pbExport), :has(#rpList)) .head h1 b { color:inherit; font-weight:inherit; }
html.dn main:is(:has(#pbExport), :has(#rpList)) .head .sub { font-size:13px; line-height:18px; color:var(--muted); margin-top:4px; }
html.dn main:is(:has(#pbExport), :has(#rpList)) .head > div:first-child { flex:1 1 360px; min-width:0; }
html.dn main:is(:has(#pbExport), :has(#rpList)) .head .tools { gap:10px; flex:0 1 auto; min-width:0; flex-wrap:wrap; }
html.dn main:is(:has(#pbExport), :has(#rpList)) .head .tools > .btn { height:40px; padding:0 14px; font-weight:600; }
html.dn main:is(:has(#pbExport), :has(#rpList)) .howto { background:var(--sunken); border:0; border-radius:12px; padding:10px 14px; font-size:13px; line-height:20px; color:var(--ink2); margin:0 0 20px; }
html.dn main:is(:has(#pbExport), :has(#rpList)) .howto > b { color:var(--ink); }

/* segmented toggle (Group by, the period) */
html.dn main .seg { display:inline-flex; flex-wrap:wrap; max-width:100%; align-items:center; padding:3px; gap:2px; border-radius:10px; background:var(--sunken); }
html.dn main .seg button { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border:0; border-radius:8px; background:transparent; font:inherit; font-size:13px; font-weight:600; color:var(--ink2); cursor:pointer; white-space:nowrap; }
html.dn main .seg button:hover { color:var(--ink); }
html.dn main .seg button.on { background:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(var(--th-ink-rgb), .08); }
html.dn main .seg button:focus-visible { outline:2px solid var(--brand); outline-offset:1px; }

/* section labels: 11px caps, the count muted beside it, the note under it in plain words */
html.dn main:is(:has(#pbExport), :has(#rpList)) .sec { font-size:11px; line-height:16px; font-weight:700; letter-spacing:.06em; color:var(--ink2); margin:24px 0 10px; padding:0 4px; flex-wrap:wrap; gap:4px 10px; }
html.dn main:has(#rpList) .sec .pill { background:transparent; color:var(--muted); padding:0; font-size:12px; font-weight:600; }
/* Problems: the count pill as on My day (design review round 3) */
html.dn main:has(#pbExport) .sec .pill { background:var(--sunken); color:var(--ink2); padding:0 8px; border-radius:99px; line-height:20px; font-size:12px; font-weight:700; }
html.dn main:is(:has(#pbExport), :has(#rpList)) .sec > .sub { flex-basis:100%; text-transform:none; letter-spacing:0; font-size:13px; line-height:18px; font-weight:400; color:var(--muted); margin:0; }

/* tables: a grey header row with small caps labels, roomy rows, hairlines between */
html.dn main:is(:has(#pbExport), :has(#rpList)) .panel { border:1px solid var(--line); border-radius:14px; box-shadow:none; overflow:hidden; }
html.dn main:is(:has(#pbExport), :has(#rpList)) .panel:hover { transform:none; box-shadow:none; }
html.dn main:is(:has(#pbExport), :has(#rpList)) th { background:var(--sunken); color:var(--muted); font-size:11px; line-height:16px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:10px 16px; border-bottom:1px solid var(--line); }
html.dn main:is(:has(#pbExport), :has(#rpList)) td { padding:14px 16px; border-top:1px solid var(--line); font-size:14px; line-height:22px; color:var(--ink); }
html.dn main:is(:has(#pbExport), :has(#rpList)) tr:first-child td { border-top:0; }
html.dn main:has(#rpList) td { padding:11px 16px; }
html.dn main:is(:has(#pbExport), :has(#rpList)) td .sub { color:var(--muted); font-size:12.5px; line-height:18px; }
html.dn main:is(:has(#pbExport), :has(#rpList)) tr.warnrow td:first-child, html.dn main:has(#rpList) tr.warnr td:first-child { box-shadow:inset 4px 0 0 #B42318; }
html.dn main:is(:has(#pbExport), :has(#rpList)) .note-foot { font-size:13px; line-height:20px; color:var(--muted); margin:8px 4px 12px; }
html.dn main:is(:has(#pbExport), :has(#rpList)) .note-foot b { color:var(--ink2); }
html.dn main:is(:has(#pbExport), :has(#rpList)) .filterbar input, html.dn main:is(:has(#pbExport), :has(#rpList)) .filterbar select,
html.dn main:has(#rpList) .head .tools select, html.dn main:has(#rpList) .head .tools input { height:36px; border:1px solid var(--line-strong); border-radius:10px; background:var(--card); font-size:13.5px; color:var(--ink); }
html.dn main:is(:has(#pbExport), :has(#rpList)) .tag.t-cut { background:#FDEDEA; color:#B42318; }
html.dn main:is(:has(#pbExport), :has(#rpList)) .tag.t-trouble { background:var(--th-tint); color:var(--th-accent3); }
html.dn main:is(:has(#pbExport), :has(#rpList)) .tag.t-track.mltc { background:#EAF2FB; color:#1D5FA8; }
html.dn main:is(:has(#pbExport), :has(#rpList)) .tag.t-track.map { background:var(--th-tint); color:var(--th-accent3); border:0; }
html.dn main:is(:has(#pbExport), :has(#rpList)) .hp-x { color:var(--muted); }
html.dn main:is(:has(#pbExport), :has(#rpList)) .hp-x:hover { color:#B42318; }

/* ---------- Problems ---------- */
/* Who needs help: one card per coordinator */
html.dn main:has(#pbExport) .pb-who { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(264px, 100%), 1fr)); gap:12px; margin-bottom:20px; }
html.dn main:has(#pbExport) .pb-wcard { display:flex; flex-direction:column; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
html.dn main:has(#pbExport) .pb-wcard.on { border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); background:var(--th-tint); }
html.dn main:has(#pbExport) .pb-wtop { display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; min-width:0; }
html.dn main:has(#pbExport) .pb-wtop .st-l { gap:8px; font-weight:600; min-width:0; }
html.dn main:has(#pbExport) .pb-wtop .st-l { overflow:visible; white-space:normal; } html.dn main:has(#pbExport) .pb-wtop .st-l b { font-weight:600; font-size:14px; overflow-wrap:anywhere; }
html.dn main:has(#pbExport) .pb-wtop .tag { font-size:12px; font-weight:600; height:22px; line-height:22px; padding:0 8px; white-space:nowrap; color:var(--muted); }
html.dn main:has(#pbExport) .pb-wnums { display:grid; grid-template-columns:auto auto auto; justify-content:start; gap:14px; }
html.dn main:has(#pbExport) .pb-wnums b { display:block; font-size:20px; line-height:24px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
html.dn main:has(#pbExport) .pb-wnums b.late { color:#B42318; }
html.dn main:has(#pbExport) .pb-wnums span { display:block; font-size:12px; line-height:16px; color:var(--muted); }
html.dn main:has(#pbExport) .pb-wcard .wh-acts { display:flex; align-items:center; gap:2px; flex-wrap:wrap; justify-content:flex-start; margin-top:auto; }
html.dn main:has(#pbExport) .pb-wcard .wh-acts .btn { height:32px; padding:0 9px; font-size:13px; font-weight:600; }
html.dn main:has(#pbExport) .pb-wcard .wh-acts .btn:is([data-remind], [data-move]) { border-color:transparent; background:transparent; color:var(--ink2); }
html.dn main:has(#pbExport) .pb-wcard .wh-acts .btn:is([data-remind], [data-move]):hover { background:var(--sunken); color:var(--ink); }
html.dn main:has(#pbExport) .pb-wcard { position:relative; }
html.dn main:has(#pbExport) .pb-wcard .hp-x { position:absolute; top:12px; right:10px; }
html.dn main:has(#pbExport) .pb-wcard:has(.hp-x) .pb-wtop { padding-right:22px; }
html.dn main:has(#pbExport) .pb-seeing { background:var(--th-tint); border:0; border-radius:12px; padding:12px 16px; }
html.dn main:has(#pbExport) .pb-seeing .b-ic { background:var(--card); color:var(--th-accent3); width:32px; height:32px; }
html.dn main:has(#pbExport) .pb-seeing b { font-size:14px; display:inline; }

/* chips: where each case stands, and the flags */
html.dn main:has(#pbExport) .pb-reasons { gap:8px; margin-bottom:14px; }
html.dn main:has(#pbExport) .pb-reasons + .sub, html.dn main:has(#pbExport) .pb-who ~ .sub { font-size:12px; color:var(--muted); }
html.dn main:has(#pbExport) .pb-reason { flex-direction:row; align-items:center; gap:8px; min-width:0; height:34px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); box-shadow:none; font-size:13px; font-weight:600; color:var(--ink2); }
html.dn main:has(#pbExport) .pb-reason:hover { transform:none; box-shadow:none; border-color:var(--line-strong); }
html.dn main:has(#pbExport) .pb-reason b { font-size:13px; line-height:1; font-weight:700; letter-spacing:0; color:var(--ink); }
html.dn main:has(#pbExport) .pb-reason.b-late b { color:#B42318; } html.dn main:has(#pbExport) .pb-reason.b-ok b { color:#1E6B3F; }
html.dn main:has(#pbExport) .pb-reason.b-today b { color:#1D5FA8; } html.dn main:has(#pbExport) .pb-reason.b-nonext b { color:#8A5A00; }
html.dn main:has(#pbExport) .pb-reason.r-trouble b { color:var(--th-accent3); } html.dn main:has(#pbExport) .pb-reason.b-plain { color:var(--muted); }
html.dn main:has(#pbExport) .pb-reason.on { background:var(--th-tint); border-color:var(--th-accent); box-shadow:none; color:var(--th-accent3); }
html.dn main:has(#pbExport) .pb-reason.on b { color:var(--th-accent3); }
html.dn main:has(#pbExport) .pb-filters { margin:4px 0 8px !important; }
html.dn main:has(#pbExport) .pb-filters > .sub { color:var(--muted); font-size:13px; }

/* Ready to close: a soft green strip over its table */
html.dn main:has(#pbExport) .sec.pb-sec-close { background:#E7F4EC; color:#1E6B3F; border-radius:14px; padding:14px 18px 14px 48px; position:relative; margin-top:20px; font-size:14px; line-height:20px; letter-spacing:0; text-transform:none; font-weight:700; }
html.dn main:has(#pbExport) .sec.pb-sec-close::before { content:'✓'; position:absolute; left:16px; top:14px; width:20px; height:20px; border:1.5px solid #1E6B3F; border-radius:50%; display:grid; place-items:center; font-size:11px; line-height:1; }
html.dn main:has(#pbExport) .sec.pb-sec-close .pill { color:#1E6B3F; font-size:14px; font-weight:700; }
html.dn main:has(#pbExport) .sec.pb-sec-close > .sub { color:var(--ink2); font-size:13px; }

/* the case tables */
html.dn main:has(#pbExport) .pb-table td { font-size:13px; line-height:20px; }
html.dn main:has(#pbExport) .pb-table td:nth-child(4) { min-width:150px; }
html.dn main:has(#pbExport) .pb-table tr:hover td { background:var(--page); }
html.dn main:has(#pbExport) .pb-name { font-size:15px; line-height:22px; font-weight:600; color:var(--ink); }
html.dn main:has(#pbExport) .pb-ids, html.dn main:has(#pbExport) .pb-status { color:var(--muted); }
html.dn main:has(#pbExport) .pb-tag { display:flex; width:fit-content; height:auto; min-height:22px; padding:1px 8px; border-radius:8px; font-size:12px; line-height:20px; font-weight:600; }
html.dn main:has(#pbExport) .pb-tag:is(.b-late, .b-nonext, .b-ok, .b-today)::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; margin:7px 6px 0 0; flex:none; align-self:flex-start; }
html.dn main:has(#pbExport) .pb-tag.b-late { background:#FDEDEA; color:#B42318; }
html.dn main:has(#pbExport) .pb-tag.b-nonext { background:#FCF3DC; color:#8A5A00; }
html.dn main:has(#pbExport) .pb-tag.b-ok { background:#E7F4EC; color:#1E6B3F; }
html.dn main:has(#pbExport) .pb-tag.b-today { background:#EAF2FB; color:#1D5FA8; }
html.dn main:has(#pbExport) .pb-tag.b-plain { background:var(--sunken); color:var(--ink2); }
html.dn main:has(#pbExport) .pb-tag.r-trouble { background:var(--th-tint); color:var(--th-accent3); }
html.dn main:has(#pbExport) .pb-tag.t-more { background:transparent; border:1px solid var(--line); color:var(--muted); }
html.dn main:has(#pbExport) .pb-action { font-size:14px; line-height:20px; font-weight:600; color:var(--ink); }
html.dn main:has(#pbExport) .pb-last q { color:var(--ink2); }
html.dn main:has(#pbExport) .pb-check .bad { color:#B42318; } html.dn main:has(#pbExport) .pb-check .ok { color:#1E6B3F; }
html.dn main:has(#pbExport) .pb-acts .btn.primary { height:32px; padding:0 12px; font-size:13px; margin-bottom:6px; }
html.dn main:has(#pbExport) .pb-acts .linkbtn { text-decoration:none; color:var(--ink2); font-size:13px; font-weight:700; padding:3px 0; }
html.dn main:has(#pbExport) .pb-acts .linkbtn:hover { color:var(--ink); text-decoration:underline; }
html.dn main:has(#pbExport) .pb-acts .linkbtn[data-act=log] { display:inline-flex; white-space:nowrap; align-items:center; height:30px; padding:0 10px; margin:0 0 4px; border:1px solid var(--line-strong); border-radius:8px; background:var(--card); color:var(--ink); }
html.dn main:has(#pbExport) .pb-acts .linkbtn[data-act=log]:hover { background:var(--sunken); text-decoration:none; }
html.dn main:has(#pbExport) .showmore { border-top:1px solid var(--line); }

/* ---------- Report ---------- */
html.dn main:has(#rpList) .head .tools #per { display:none; }
html.dn main:has(#rpList) .rp-tabs { gap:4px; margin:0 0 4px; }
html.dn main:has(#rpList) .rp-tabs button { padding:8px 12px 12px; font-size:14px; font-weight:600; color:var(--muted); }
html.dn main:has(#rpList) .rp-tabs button[aria-selected=true] { color:var(--ink); }
/* "This tab answers": a plain muted line under the tabs */
html.dn main:has(#rpList) #out > .banner { background:none; border:0; border-radius:0; padding:0 4px; margin:12px 0 16px !important; font-size:13px; line-height:20px; color:var(--muted); }
html.dn main:has(#rpList) #out > .banner .b-ic { display:none; }
html.dn main:has(#rpList) #out > .banner b { display:inline; font-size:13px; font-weight:600; color:var(--ink2); }
html.dn main:has(#rpList) #out > .banner .sub { display:inline; margin:0; color:var(--muted); }

/* number cards */
html.dn main:has(#rpList) .kpis { gap:12px; margin-bottom:16px; }
html.dn main:has(#rpList) .rp-kpis { grid-template-columns:repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
html.dn main:has(#rpList) .kpi { padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:none; cursor:default; }
html.dn main:has(#rpList) .kpi:hover { transform:none; box-shadow:none; border-color:var(--line); }
html.dn main:has(#rpList) .kpi-top { min-height:32px; align-items:flex-start; }
html.dn main:has(#rpList) .kpi-label { font-size:11px; line-height:16px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); }
html.dn main:has(#rpList) .kpi-n { font-size:28px; line-height:32px; font-weight:700; letter-spacing:-.005em; margin:6px 0 6px; color:var(--ink); }
html.dn main:has(#rpList) .kpi-sub { font-size:12.5px; line-height:18px; color:var(--muted); }
html.dn main:has(#rpList) .kpi.good .kpi-n { color:#1E6B3F; }
html.dn main:has(#rpList) .kpi.hot { box-shadow:none; } html.dn main:has(#rpList) .kpi.hot .kpi-n { color:#B42318; }
html.dn main:has(#rpList) .kpi-n .rp-n { font-size:inherit; line-height:inherit; font-weight:inherit; color:inherit; background:none; padding:0; margin:0; border-radius:4px; text-decoration:none; }
html.dn main:has(#rpList) .kpi-n .rp-n:hover { background:none; color:inherit; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
/* a number with cases behind it: a quiet link, not a pill */
html.dn main:has(#rpList) .rp-n { background:transparent; color:var(--link); font-weight:600; padding:1px 6px; margin:0 -6px; border-radius:6px; text-decoration:underline dotted; text-underline-offset:3px; }
html.dn main:has(#rpList) .rp-n:hover { background:var(--sunken); color:var(--ink); }
html.dn main:has(#rpList) .rp-zero { color:var(--muted); }

/* charts */
html.dn main:has(#rpList) .chart svg text.ch-v { fill:var(--ink); font-weight:600; }
html.dn main:has(#rpList) .chart svg text.ch-l { fill:var(--muted); }
html.dn main:has(#rpList) .ch-axis { stroke:var(--line); }
html.dn main:has(#rpList) .ch-legend { color:var(--muted); }
html.dn main:has(#rpList) .panel > b:first-child { font-size:15px; line-height:22px; font-weight:600; color:var(--ink); }
html.dn main:has(#rpList) .hb { gap:10px; margin-top:12px; }
html.dn main:has(#rpList) .hb-bar { height:8px; background:var(--sunken); }
html.dn main:has(#rpList) .hb-v { color:var(--ink); font-weight:600; }
html.dn main:has(#rpList) .hb-bar .hb-sub { background:#1E6B3F; opacity:1; }
html.dn main:has(#rpList) .rp-why { padding:18px 20px; gap:12px; }
html.dn main:has(#rpList) .rp-bar { grid-template-columns:220px 1fr 40px; font-size:13px; }
html.dn main:has(#rpList) .rp-bar i { height:8px; border-radius:99px; background:var(--th-text); opacity:1; }
html.dn main:has(#rpList) .rp-charts { gap:16px; }

/* Coordinators: the score as a bar with its number */
html.dn main:has(#rpList) .rp-filter { align-items:center; gap:10px; }
html.dn main:has(#rpList) .rp-filter .sub { color:var(--muted); font-size:12.5px; }
html.dn main:has(#rpList) .rp-sbar { display:inline-block; vertical-align:middle; width:96px; height:8px; margin-right:10px; border-radius:99px; background:var(--sunken); overflow:hidden; }
html.dn main:has(#rpList) .rp-sbar i { display:block; height:100%; border-radius:99px; }
html.dn main:has(#rpList) .rp-sbar.sg i { background:#1E6B3F; } html.dn main:has(#rpList) .rp-sbar.sm i { background:#8A5A00; } html.dn main:has(#rpList) .rp-sbar.sb i { background:#B42318; }
html.dn main:has(#rpList) table.rp-people td { vertical-align:middle; }
html.dn main:has(#rpList) th.rp-sort:hover, html.dn main:has(#rpList) th.rp-sort.on { color:var(--ink); }
html.dn main:has(#rpList) details.rp-score { padding:0; }
html.dn main:has(#rpList) details.rp-score > summary { padding:14px 20px; cursor:pointer; font-size:14px; }
html.dn main:has(#rpList) details.rp-score > summary b { font-weight:600; color:var(--ink); }
html.dn main:has(#rpList) details.rp-score[open] > summary { border-bottom:1px solid var(--line); }
html.dn main:has(#rpList) details.rp-score > ul, html.dn main:has(#rpList) details.rp-score > .sub { margin-left:20px !important; margin-right:20px !important; font-size:13px; color:var(--ink2); }
html.dn main:has(#rpList) details.rp-score > .sub { margin-bottom:14px !important; }
html.dn main:has(#rpList) details.rp-score .hc-scroll { border-top:1px solid var(--line); }

/* Where it sticks: one card per workflow, a bar per step (the slowest in red) */
html.dn main:has(#rpList) .rp-stuck { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap:16px; align-items:start; }
html.dn main:has(#rpList) .rp-scard { padding:18px 20px 6px; }
html.dn main:has(#rpList) .rp-scard h3 { margin:0 0 14px; font-size:15px; line-height:22px; font-weight:600; color:var(--ink); }
html.dn main:has(#rpList) .rp-scard h3 .sub { font-weight:400; color:var(--muted); font-size:13px; }
html.dn main:has(#rpList) .rp-step { margin-bottom:16px; }
html.dn main:has(#rpList) .rp-sl { display:flex; justify-content:space-between; gap:12px; font-size:13px; line-height:18px; color:var(--ink); }
html.dn main:has(#rpList) .rp-sl b { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
html.dn main:has(#rpList) .rp-strack { display:block; height:8px; margin:8px 0 6px; border-radius:99px; background:var(--sunken); overflow:hidden; }
html.dn main:has(#rpList) .rp-strack i { display:block; height:100%; border-radius:99px; background:#1C3462; }
html.dn main:has(#rpList) .rp-step.slow .rp-strack i { background:#B42318; }
html.dn main:has(#rpList) .rp-step.slow .rp-sl b, html.dn main:has(#rpList) .rp-step .late { color:#B42318; }
html.dn main:has(#rpList) .rp-step > .sub { font-size:12px; line-height:18px; color:var(--muted); }
html.dn main:has(#rpList) .rp-step .tag { height:20px; line-height:20px; font-size:11px; padding:0 7px; }

/* One person and the Monday summary */
html.dn main:has(#rpList) #psWho { height:36px; border:1px solid var(--line-strong); border-radius:10px; font-weight:600; }
html.dn main:has(#rpList) #psOut > .panel[style*="padding"], html.dn main:has(#rpList) #wkOut > .panel { padding:18px 20px !important; }
html.dn main:has(#rpList) #wkOut ol { padding-left:18px; color:var(--ink2); }
html.dn main:has(#rpList) #wkOut ol li::marker { color:var(--th-accent); }
html.dn main:has(#rpList) .rp-who a { color:var(--ink); font-weight:600; }

/* the list of cases behind a number */
html.dn main:has(#rpList) #rpList { border-color:var(--line); border-radius:14px; box-shadow:0 16px 40px rgba(var(--th-ink-rgb), .16); }
html.dn main:has(#rpList) #rpList .rp-head { border-bottom-color:var(--line); }
html.dn main:has(#rpList) #rpList .rp-row:hover { background:var(--sunken); }

/* New design: admin (scoped under html.dn; see design-new.css). The manager admin pages: Team (+ the Imports fold, Import),
   Rules, Users (+ Names in HHA notes, HHA robot), AI (+ What people corrected) and Cottage Helper (every tab). Mockups
   m-team, t-team-imports, m-rules, t-rules-removed, m-users, t-users-names, m-robot, m-ai, t-ai-corrected, m-helper and
   t-helper-*. Each page's <main> gets "dna dna-<page>" (web/js/team.js DNAdmin.mark, only with the switch on), so nothing
   here reaches another page. Same parts everywhere: an H1 header, white 14px cards, tables with a grey header row, tags,
   seg toggles, green switches. */

/* ---- header ---- */
html.dn main.dna .head { margin-bottom:20px; align-items:flex-end; gap:16px; }
html.dn main.dna .head h1 { font-size:24px; line-height:32px; font-weight:700; letter-spacing:-.12px; color:var(--ink); }
html.dn main.dna .head .sub { font-size:13px; line-height:18px; color:var(--muted); margin-top:4px; max-width:860px; }
html.dn main.dna .head .sub b { color:var(--ink); }
html.dn main.dna .head .tools { gap:12px; }
html.dn main.dna .head .tools .btn { height:36px; padding:0 14px; font-size:14px; gap:8px; }
html.dn main.dna .btn { box-shadow:none; }
html.dn main.dna .btn.sm { height:30px; padding:0 10px; font-size:13px; border-radius:8px; gap:6px; }
html.dn main.dna .btn.hc-block { color:#B42318; border-color:var(--line-strong); background-color:var(--card); }
html.dn main.dna .btn.hc-block:hover { background:#FDEDEA; }
html.dn main.dna .linkbtn { color:var(--ink); font-size:13px; font-weight:600; text-decoration:none; }
html.dn main.dna .linkbtn:hover { color:var(--th-accent3); text-decoration:underline; }

/* ---- section labels, notes, empty lines ---- */
html.dn main.dna .sec { font-size:11px; line-height:16px; font-weight:700; letter-spacing:.66px; color:var(--ink2); margin:24px 0 10px; gap:8px; }
html.dn main.dna .sec .ic { color:var(--muted); }
html.dn main.dna .sec .pill { background:var(--sunken); color:var(--muted); border-radius:99px; padding:0 7px; font-size:12px; line-height:20px; font-weight:700; letter-spacing:0; }
html.dn main.dna .note-foot { color:var(--muted); font-size:13px; line-height:18px; }
html.dn main.dna .note-foot b { color:var(--ink2); }
html.dn main.dna .sub { color:var(--muted); }
html.dn main.dna .empty { background-color:var(--card); border:1px solid var(--line); border-radius:14px; color:var(--muted); font-size:14px; padding:24px; }
html.dn main.dna .hist-meta { font-size:13px; line-height:20px; color:var(--ink2); padding:6px 0; border-top:1px solid var(--line); margin:0; }
html.dn main.dna .hist-meta:first-child { border-top:0; }
html.dn main.dna code { background:var(--sunken); border-radius:6px; padding:1px 6px; font-size:12.5px; color:var(--ink); }

/* ---- cards and panels ---- */
html.dn main.dna .panel { border:1px solid var(--line); border-radius:14px; background-color:var(--card); box-shadow:none; }
html.dn main.dna .panel:hover, html.dn main.dna .card:hover { transform:none; box-shadow:none; }
html.dn main.dna .cards { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:16px; }
html.dn main.dna .card { border:1px solid var(--line); border-radius:14px; padding:16px 18px; background-color:var(--card); box-shadow:none; animation:none; }
html.dn main.dna .card .n { font-size:32px; line-height:40px; font-weight:800; letter-spacing:-.32px; color:var(--ink); }
html.dn main.dna .card .n.hot { color:#B42318; }
html.dn main.dna .card .l { font-size:13px; line-height:18px; font-weight:500; color:var(--muted); margin-top:4px; }
/* a section grouped into one card (DNAdmin.group): the label is the card's title, the table sits inside */
html.dn main.dna .dna-card { background-color:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; min-width:0; }
html.dn main.dna .dna-card > .sec { font-size:15px; line-height:22px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink); margin:0 0 12px; }
html.dn main.dna .dna-card > .sec .ic { color:var(--muted); }
html.dn main.dna .dna-card > .note-foot { margin:-6px 0 12px !important; }
html.dn main.dna .dna-card > .panel { border-radius:12px; }
html.dn main.dna .dna-card > .panel.ha-pad { border:0; padding:0; border-radius:0; }
html.dn main.dna .dna-card > .empty { border:0; padding:8px 0 0; text-align:left; }

/* ---- tables: a grey header row, roomy rows ---- */
html.dn main.dna table { font-size:14px; }
html.dn main.dna th, html.dn main.dna table.hc-t th { background:var(--sunken); color:var(--muted); font-size:11px; line-height:16px; font-weight:700; letter-spacing:.66px; text-transform:uppercase; padding:12px 16px; border-bottom:1px solid var(--line); white-space:normal; }
html.dn main.dna td, html.dn main.dna table.hc-t td { padding:14px 16px; border-top:1px solid var(--line); border-bottom:0; vertical-align:middle; line-height:20px; color:var(--ink); }
html.dn main.dna tr:first-child td { border-top:0; }
html.dn main.dna table.hc-t tbody tr:first-child td { border-top:0; }
html.dn main.dna td b { font-weight:600; }
html.dn main.dna td .sub { font-size:12px; line-height:16px; color:var(--muted); margin-top:2px; }
html.dn main.dna tr.hot td { background:var(--th-tint); }
html.dn main.dna tr.warnr td { background:#FFFBF0; }
html.dn main.dna tr.muted td { color:var(--muted); }
html.dn main.dna .hp-ptable { padding:0; }
html.dn main.dna .hc-scroll { border-radius:14px; }
html.dn main.dna .panel.ha-pad > .hc-scroll { margin:-14px -16px; }

/* ---- tags: outline by default, status pairs where they mean something ---- */
html.dn main.dna .tag { height:22px; padding:0 8px; border-radius:999px; font-size:12px; font-weight:600; line-height:22px; gap:5px; background:transparent !important; border:1px solid var(--line) !important; color:var(--muted) !important; }
html.dn main.dna .tag.t-ok { background:#E7F4EC !important; border-color:transparent !important; color:#1E6B3F !important; }
html.dn main.dna .tag.t-cut, html.dn main.dna .tag.t-late { background:#FDEDEA !important; border-color:transparent !important; color:#B42318 !important; }
html.dn main.dna .tag.t-auto { background:#FCF3DC !important; border-color:transparent !important; color:#8A5A00 !important; }
html.dn main.dna .tag.t-ok::before, html.dn main.dna .tag.t-cut::before, html.dn main.dna .tag.t-late::before { content:''; width:7px; height:7px; border-radius:99px; background:currentColor; flex:none; }
html.dn main.dna button.tag.linkish { background:#FCF3DC !important; color:#8A5A00 !important; border-color:transparent !important; }
html.dn main.dna .hc-st, html.dn main.dna .hp-side, html.dn main.dna .hp-recert { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px; border-radius:999px; font-size:12px; font-weight:600; line-height:22px; }
html.dn main.dna .hc-st::before, html.dn main.dna .hp-side.came::before { content:''; width:7px; height:7px; border-radius:99px; background:currentColor; }
html.dn main.dna .hc-st.approved, html.dn main.dna .hp-side.came { background:#E7F4EC; color:#1E6B3F; }
html.dn main.dna .hc-st.blocked, html.dn main.dna .hp-side.lost, html.dn main.dna .hp-recert.now { background:#FDEDEA; color:#B42318; }
html.dn main.dna .hc-st.pending, html.dn main.dna .hp-side.hold, html.dn main.dna .hp-recert.soon { background:#FCF3DC; color:#8A5A00; }
html.dn main.dna .hp-side.intake { background:#EAF2FB; color:#1D5FA8; }
html.dn main.dna .hp-side.none { background:transparent; border:1px solid var(--line); color:var(--muted); }
html.dn main.dna .hp-cov.ok { color:#1E6B3F; } html.dn main.dna .hp-cov.bad, html.dn main.dna .hc-red { color:#B42318; }

/* ---- tabs (Users, Cottage Helper, and the tabs Rules and AI get in this design) ---- */
html.dn main.dna .tabs, html.dn main.dna .hp-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:0 0 20px; }
html.dn main.dna .tabs button, html.dn main.dna .hp-tabs button { gap:8px; padding:0 12px 12px; margin-bottom:-1px; font-size:14px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; }
html.dn main.dna .tabs button:hover, html.dn main.dna .hp-tabs button:hover { color:var(--ink); }
html.dn main.dna .tabs button[aria-selected=true], html.dn main.dna .hp-tabs button[aria-selected=true] { color:var(--ink); border-bottom-color:var(--th-accent); }
html.dn main.dna .hp-tabs button .ic { display:none; }
html.dn main.dna .tabs .tab-n, html.dn main.dna .hp-tabs .n { display:inline-block; min-width:0; height:auto; padding:0 7px; border-radius:99px; background:var(--sunken); color:var(--muted); font-size:12px; font-weight:700; line-height:20px; }
html.dn main.dna .tabs button[aria-selected=true] .tab-n, html.dn main.dna .hp-tabs button[aria-selected=true] .n { background:var(--th-tint); color:var(--th-accent3); }
html.dn main.dna .hp-tabs .n.warn { background:#FCEBDD; color:#9A4513; }   /* a warning count keeps its amber-orange (meaning) */
html.dn main.dna .dna-tabs button .sub { font-size:12px; font-weight:500; color:var(--muted); }
html.dn main.dna .dna-tabs { margin-top:20px; }
html.dn main.dna .dna-pane > .sec:first-child { display:none; }
html.dn main.dna .dna-pane > .sec:first-child + .note-foot { margin-top:0 !important; }
html.dn main.dna .dna-pane #rlLessons > .sec:first-child { margin-top:0; }
html.dn main.dna .dna-pane > details.admin-fold { margin:0; padding:0; border:0; }
html.dn main.dna .dna-pane > details.admin-fold > summary { display:none; }

/* ---- seg toggles (Today / Yesterday, Table / Cards, By patient / Every check, the computer filter) ---- */
html.dn main.dna .wd-bar, html.dn main.dna .hp-seg { display:inline-flex; align-items:center; gap:2px; padding:3px; border:0; border-radius:10px; background:var(--sunken); overflow:visible; }
html.dn main.dna .wd-bar { margin:0 0 12px; flex-wrap:wrap; }
html.dn main.dna .wd-bar .btn, html.dn main.dna .hp-seg button { height:30px; min-height:0; padding:0 12px; border:0; border-radius:8px; background:transparent; color:var(--ink2); font-size:13px; font-weight:600; box-shadow:none; }
html.dn main.dna .wd-bar .btn[aria-pressed=true], html.dn main.dna .hp-seg button[aria-pressed=true] { background-color:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(var(--th-ink-rgb), .08); }
html.dn main.dna .wd-bar label { display:inline-flex; align-items:center; gap:6px; padding:0 4px 0 10px; font-size:13px; font-weight:600; color:var(--ink2); }
html.dn main.dna .wd-bar input[type=date] { height:30px; border:0; border-radius:8px; background-color:var(--card); padding:0 8px; margin:0; }

/* ---- inputs and switches ---- */
html.dn main.dna select, html.dn main.dna input[type=date], html.dn main.dna input[type=text], html.dn main.dna input:not([type]), html.dn main.dna input[type=email], html.dn main.dna input[type=password], html.dn main.dna input[type=number], html.dn main.dna input[type=search] { height:40px; border:1px solid var(--line-strong); border-radius:10px; background-color:var(--card); padding:0 12px; font-size:14px; color:var(--ink); }
html.dn main.dna td select, html.dn main.dna td input:not([type]) { height:36px; }
html.dn main.dna textarea { border:1px solid var(--line-strong); border-radius:10px; padding:10px 12px; font-size:14px; line-height:22px; }
html.dn main.dna input[type=file] { border:1px dashed var(--line-strong); border-radius:12px; background:var(--page); }
html.dn main.dna input[type=checkbox] { accent-color:#1E6B3F; }
html.dn main.dna .field { font-size:13px; color:var(--ink); font-weight:600; gap:6px; }
html.dn main.dna .hc-sw { width:36px; height:20px; }
html.dn main.dna .hc-sw span { background:var(--line-strong); }
html.dn main.dna .hc-sw span::after { top:2px; left:2px; width:16px; height:16px; box-shadow:0 1px 2px rgba(var(--th-ink-rgb), .25); }
html.dn main.dna .hc-sw input:checked + span { background:#1E6B3F; }
html.dn main.dna .hc-sw input:focus-visible + span { box-shadow:0 0 0 3px rgba(var(--th-accent-rgb), .25); }

/* the glossary wraps HHA / ePACES in <abbr>: inside a flex label each would get the gap, so the gaps go on the icons and pills */
html.dn main.dna .sec, html.dn main.dna .tabs button, html.dn main.dna .hp-tabs button { display:block; gap:0; }
html.dn main.dna .sec > svg { vertical-align:-3px; }
html.dn main.dna .tabs button, html.dn main.dna .hp-tabs button { line-height:22px; }
html.dn main.dna .tabs .tab-n, html.dn main.dna .hp-tabs .n { vertical-align:1px; }
html.dn main.dna .sec .pill, html.dn main.dna .tabs .tab-n, html.dn main.dna .hp-tabs .n, html.dn main.dna .dna-tabs button .sub { margin-left:8px; }
html.dn main.dna .sec > svg, html.dn main.dna .sec > .ic { margin-right:8px; }
html.dn main.dna-users #rb_form .field input { max-width:420px; display:block; }
html.dn main.dna td .btn { height:30px; padding:0 10px; font-size:13px; border-radius:8px; }

/* ---- strips: how to, AI bar, alerts ---- */
html.dn main.dna .howto { background:var(--sunken); border:0; border-radius:12px; padding:12px 16px; font-size:13px; line-height:20px; color:var(--ink2); margin:0 0 16px; }
html.dn main.dna .howto > b, html.dn main.dna .howto span b { color:var(--ink); }
html.dn main.dna .aibar { border:1px solid var(--line); border-radius:14px; background-color:var(--card); padding:16px 20px; gap:12px; font-size:14px; color:var(--ink2); margin-bottom:16px; }
html.dn main.dna .aibar .ic { color:var(--th-accent2); }
html.dn main.dna .aibar .btn { margin-left:auto; height:32px; font-size:13px; }
html.dn main.dna .alert { border:0; border-radius:14px; padding:16px 20px; font-size:14px; line-height:20px; color:var(--ink); box-shadow:none; gap:12px; align-items:flex-start; }
html.dn main.dna .alert b { font-size:14px; font-weight:600; color:var(--ink); }
html.dn main.dna .alert.warn { background:#FCF3DC; } html.dn main.dna .alert.warn svg { color:#8A5A00; }
html.dn main.dna .alert.bad { background:#FDEDEA; } html.dn main.dna .alert.bad svg, html.dn main.dna .alert.bad b { color:#B42318; }
html.dn main.dna .alert:hover { box-shadow:none; }
html.dn main.dna .hc-off { border:0; border-radius:14px; background:#FDEDEA; color:#B42318; padding:14px 20px; }
html.dn main.dna .hp-note { background:var(--sunken); color:var(--ink2); border-radius:12px; }

/* ---- Team ---- */
html.dn main.dna-team .st-l b { font-weight:500; }
html.dn main.dna-team .wd-exp > td { background:var(--page); padding:8px 16px 14px; }
html.dn main.dna-team .wd-items { border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:13px; }
html.dn main.dna-team .wd-items td { padding:8px 12px; }
html.dn main.dna-team details.admin-fold { margin-top:20px; padding:0; border:1px solid var(--line); border-radius:14px; background-color:var(--card); }
html.dn main.dna-team details.admin-fold > summary { display:flex; align-items:center; gap:12px; padding:16px 20px; font-size:15px; font-weight:600; color:var(--ink); }
html.dn main.dna-team details.admin-fold > summary::before { content:''; width:7px; height:7px; border:solid var(--ink2); border-width:0 2px 2px 0; transform:rotate(-45deg); margin:0 4px 0 2px; transition:transform .15s; }
html.dn main.dna-team details.admin-fold[open] > summary::before { transform:rotate(45deg); }
html.dn main.dna-team details.admin-fold > summary .sub { margin-left:auto; font-size:13px; font-weight:500; }
html.dn main.dna-team details.admin-fold[open] { background:transparent; border-color:transparent; }
html.dn main.dna-team details.admin-fold[open] > summary { padding:0 0 12px; font-size:24px; line-height:32px; font-weight:700; letter-spacing:-.12px; }
html.dn main.dna-team details.admin-fold[open] > summary::before { width:9px; height:9px; }
html.dn main.dna-team .dna-foldgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:16px; align-items:start; }
html.dn main.dna-team .dna-foldgrid > :not(.dna-card):not(#teamRules) { grid-column:1 / -1; }
html.dn main.dna-team .dna-foldgrid #teamRules { display:contents; }

/* ---- Import ---- */
html.dn main.dna-import .panel { padding:20px !important; max-width:720px; }

/* ---- Rules ---- */
html.dn main.dna-rules .rulecard { padding:20px; margin:0; }
html.dn main.dna-rules .rulecard .rc-h b { font-size:15px; font-weight:600; }
html.dn main.dna-rules .rc-rule { background:var(--sunken); border-radius:10px; padding:10px 14px; font-size:14px; }
html.dn main.dna-rules table.rules td:first-child b { font-weight:600; }
html.dn main.dna-rules .rc-actions .btn { height:30px; padding:0 10px; font-size:13px; border-radius:8px; }
html.dn .dna-sheet { border-radius:16px 0 0 16px; padding:28px; gap:14px; }
html.dn .dna-sheet h3 { font-size:18px; line-height:26px; font-weight:700; color:var(--ink); }
html.dn .dna-sheet .sub { color:var(--muted); }
html.dn .dna-sheet .sec { font-size:11px; letter-spacing:.66px; color:var(--ink2); }
html.dn .dna-sheet textarea, html.dn .dna-sheet input, html.dn .dna-sheet select { border:1px solid var(--line-strong); border-radius:10px; }
html.dn .dna-sheet textarea { padding:12px; font-size:14px; line-height:22px; }
html.dn .dna-sheet .panel.ruleai { background:var(--th-tint); border:0; border-radius:14px; padding:16px 18px; font-size:14px; line-height:22px; }
html.dn .dna-sheet .panel.ruleai > b { display:block; font-size:11px; letter-spacing:.66px; text-transform:uppercase; color:var(--th-accent3); margin-top:4px; }
html.dn .dna-sheet .panel.ruleai ul { padding-left:20px; margin:6px 0 10px; }
html.dn .dna-sheet .hp-part.on { background:#E7F4EC; color:#1E6B3F; } html.dn .dna-sheet .hp-part.on .dot { background:#1E6B3F; }
html.dn .dna-sheet > .actions { border-top-color:var(--line); }

/* ---- Users ---- */
html.dn main.dna-users > .panel[style*="border-color"] { border:0 !important; background:#FCF3DC; border-radius:14px; padding:16px 20px !important; }
html.dn main.dna-users [data-upane="robot"] .panel, html.dn main.dna-users #form .panel, html.dn main.dna-users #shown .panel { padding:20px !important; max-width:none !important; }
html.dn main.dna-users [data-upane] .panel > .sec:first-child, html.dn main.dna-users #staff .panel .sec { font-size:15px; line-height:22px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink); margin:0 0 6px; }
html.dn main.dna-users [data-upane="robot"] details { margin-top:10px; }
html.dn main.dna-users [data-upane="robot"] details > summary { cursor:pointer; font-size:13px; font-weight:600; color:var(--ink2); padding:6px 0; }
html.dn main.dna-users [data-upane="robot"] details table { border:1px solid var(--line); border-radius:12px; border-collapse:separate; border-spacing:0; overflow:hidden; }
html.dn main.dna-users [data-upane="robot"] details table th:first-child { border-top-left-radius:12px; }
html.dn main.dna-users [data-upane="robot"] details table td { border-top:1px solid var(--line); }
html.dn main.dna-users #robotSt .panel > div[style*="max-height"] { border-color:var(--line) !important; border-radius:12px !important; padding:8px 14px !important; }
html.dn main.dna-users #staff .panel > div:first-child { padding:20px 20px 16px !important; }
html.dn main.dna-users #staff tr.warnr input[data-name] { background:#FCF3DC; border-color:#E0B54A; }
html.dn main.dna-users #staff td code { background:none; padding:0; font-family:inherit; font-size:14px; font-weight:600; }
html.dn main.dna-users .err { color:#B42318; }

/* ---- AI ---- */
html.dn main.dna-ai .aihero { background-color:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:14px; padding:18px 20px; gap:16px; margin-bottom:12px; }
html.dn main.dna-ai .aihero .orb { background:var(--sunken); }
html.dn main.dna-ai .aihero .orb span { background:var(--muted); }
html.dn main.dna-ai .aihero.idle .orb { background:#E7F4EC; } html.dn main.dna-ai .aihero.idle .orb span { background:#1E6B3F; }
html.dn main.dna-ai .aihero.running .orb { background:var(--th-tint); } html.dn main.dna-ai .aihero.running .orb span { background:var(--th-accent); }
html.dn main.dna-ai .aistate { font-size:18px; line-height:26px; font-weight:700; color:var(--ink); }
html.dn main.dna-ai .aihero.idle .aistate { color:#1E6B3F; }
html.dn main.dna-ai .aihero .sub { color:var(--muted); } html.dn main.dna-ai .aihero .bad { color:#B42318; }
html.dn main.dna-ai .tag.t-ai { background:transparent !important; }
html.dn main.dna-ai #corrBox > .sub { margin-bottom:12px !important; line-height:20px; }
html.dn main.dna-ai #corrBox > .sub .linkbtn { display:inline-flex; align-items:center; height:30px; padding:0 10px; margin-top:8px; border:1px solid var(--line-strong); border-radius:8px; background-color:var(--card); color:var(--ink); }
html.dn main.dna-ai #corrBox > .sub .linkbtn:hover { background:var(--sunken); text-decoration:none; }
html.dn main.dna-ai .rv { padding:16px 20px; }
html.dn main.dna-ai .rvstat { padding:14px 20px; margin-bottom:12px; }

/* ---- Cottage Helper ---- */
html.dn main.dna-helper .hp-kpis { gap:12px; margin:0 0 20px; }
html.dn main.dna-helper .hp-kpis > div { border-radius:14px; padding:16px 18px; gap:4px; border-color:var(--line); }
html.dn main.dna-helper .hp-kpis b { font-size:32px; line-height:40px; font-weight:800; letter-spacing:-.32px; color:var(--ink); }
html.dn main.dna-helper .hp-kpis b span { font-size:13px !important; font-weight:500; letter-spacing:0; color:var(--muted) !important; }
html.dn main.dna-helper .hp-kpis > div > span { font-size:13px; line-height:18px; color:var(--muted); }
html.dn main.dna-helper .hp-kpis .good b { color:#1E6B3F; } html.dn main.dna-helper .hp-kpis .warn b { color:#8A5A00; } html.dn main.dna-helper .hp-kpis .bad b { color:#B42318; }
html.dn main.dna-helper .hp-kpis .warn { border-color:#F2D9A0; }
html.dn main.dna-helper .hp-bar { gap:8px; margin-bottom:16px; }
html.dn main.dna-helper .hp-bar .hp-q { height:40px; min-width:min(300px,100%); border:1px solid var(--line-strong); border-radius:10px; padding:0 12px; font-size:14px; }
html.dn main.dna-helper .hp-bar > .sub { font-size:13px; line-height:18px; }
html.dn main.dna-helper .hp-person { gap:10px; }
html.dn main.dna-helper .hp-person b { font-weight:500; }
html.dn main.dna-helper .hp-av { background:#1C3462; color:#fff; font-weight:700; }
html.dn main.dna-helper .hp-av.sm { width:24px; height:24px; font-size:10px; }
html.dn main.dna-helper .hp-ptable th { vertical-align:bottom; white-space:nowrap; }
html.dn main.dna-helper .hp-ptable th.hp-tick, html.dn main.dna-helper .hp-ptable td.hp-tick { padding-left:10px; padding-right:10px; }
html.dn main.dna-helper .hp-ptable th .sub { font-size:11px; font-weight:600; color:var(--muted); letter-spacing:0; text-transform:none; margin-top:2px; }
html.dn main.dna-helper .hp-ptable td.hp-tick input { accent-color:#1E6B3F; }
html.dn main.dna-helper .hp-bulk .linkbtn { font-size:11px; color:var(--ink2); }
html.dn main.dna-helper .hp-legend { font-size:13px; line-height:20px; color:var(--muted); margin-top:12px; }
html.dn main.dna-helper .hp-legend b { color:var(--ink2); font-weight:600; }
html.dn main.dna-helper .hp-card { border-radius:14px; padding:16px 18px; }
html.dn main.dna-helper .hp-card:hover { box-shadow:none; border-color:var(--line-strong); }
html.dn main.dna-helper .hp-part { height:28px; padding:0 10px; border-radius:999px; font-size:13px; }
html.dn main.dna-helper .hp-part.on { background:#E7F4EC; color:#1E6B3F; } html.dn main.dna-helper .hp-part.on .dot { background:#1E6B3F; }
html.dn main.dna-helper .hp-name b, html.dn main.dna-helper .hp-facts b { color:var(--ink); }
html.dn main.dna-helper .hp-dev { border-radius:14px; padding:14px 16px; }
html.dn main.dna-helper .hp-dev.pending { border-color:#F2D9A0; background:#FCF3DC; }
html.dn main.dna-helper .hp-dev.pending .ic { background:var(--th-accent2); }
html.dn main.dna-helper .hp-dev .ic { background:var(--sunken); color:var(--ink2); }
html.dn main.dna-helper .panel.ha-pad { padding:20px; }
html.dn main.dna-helper .hp-filters { gap:12px; }
html.dn main.dna-helper .hp-sum { gap:12px; margin:0 0 16px; }
html.dn main.dna-helper .hp-sum > div { background-color:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
html.dn main.dna-helper .hp-sum b { font-size:24px; line-height:32px; font-weight:800; color:var(--ink); }
html.dn main.dna-helper .hp-sum span { font-size:13px; color:var(--muted); }
html.dn main.dna-helper .hp-sum .came b { color:#1E6B3F; } html.dn main.dna-helper .hp-sum .bad b { color:#B42318; } html.dn main.dna-helper .hp-sum .warn b { color:#8A5A00; }
html.dn main.dna-helper details.panel > summary { cursor:pointer; font-size:15px; }
html.dn main.dna-helper .hp-who span { background:#1C3462; color:#fff; width:24px; height:24px; font-size:10px; }
html.dn main.dna-helper .eprun-bar { height:10px; background:var(--sunken); margin:10px 0 8px; } html.dn main.dna-helper .eprun-bar i { background:#1E6B3F; }
html.dn main.dna-helper .hp-move { margin-bottom:12px; }
html.dn main.dna-helper .aiout { background:var(--th-tint); border-radius:14px; padding:16px 18px; }
html.dn main.dna-helper .aiout b { color:var(--ink); }
html.dn main.dna-helper .ha-to { color:#1E6B3F; }
html.dn main.dna-helper .ha-grid { border-radius:12px; border-color:var(--line); }
html.dn main.dna-helper .ha-grid th { background:var(--sunken); padding:10px 12px; }
html.dn main.dna-helper .ha-grid td { padding:2px 4px; }
html.dn main.dna-helper .ha-grid textarea { border-radius:8px; font-size:13px; }
html.dn main.dna-helper #haTabs .tabs { margin-bottom:12px; }
/* Settings and Rules tabs: each part a card with its title inside; Settings three across */
html.dn main.dna-helper #hpBody.dna-tab-settings { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px; align-items:start; }
html.dn main.dna-helper #hpBody.dna-tab-settings > .dna-card:first-child, html.dn main.dna-helper #hpBody.dna-tab-settings > .dna-card:last-child { grid-column:1 / -1; }
html.dn main.dna-helper #hpBody.dna-tab-rules > .dna-card { margin-bottom:16px; }
html.dn main.dna-helper #hpBody.dna-tab-rules > details.panel { border-radius:14px; padding:16px 20px; }


html.dn main.dna-helper #hcIds { min-width:0 !important; flex:1 1 220px; }

/* Cottage Helper people cards, new design (owner, Oct 22) */
html.dn main.dna-helper .hp-people { grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:16px; }
html.dn main.dna-helper .hp-card { gap:14px; }
html.dn main.dna-helper .hp-av { width:40px; height:40px; font-size:14px; }
html.dn main.dna-helper .hp-name b { font-size:15px; font-weight:700; }
html.dn main.dna-helper .hp-state.on { background:#E7F4EC; color:#1E6B3F; } html.dn main.dna-helper .hp-state.off { background:var(--sunken); color:var(--muted); }
html.dn main.dna-helper .hp-lab { color:var(--muted); font-size:11px; } html.dn main.dna-helper .hp-lab span { color:var(--ink2); }
html.dn main.dna-helper .hp-part { height:32px; border-radius:9px; font-size:13px; font-weight:600; background:var(--card); border:1px solid var(--line); color:var(--muted); padding:0 10px; gap:7px; }
html.dn main.dna-helper .hp-part.on { background:#F3FAF5; border-color:#CFE8D9; color:#1E6B3F; }
html.dn main.dna-helper .hp-part:hover { border-color:var(--line-strong); }
html.dn main.dna-helper .hp-part:focus-within { box-shadow:0 0 0 3px rgba(var(--th-accent-rgb), .25); }
html.dn main.dna-helper .hp-ck { border-color:var(--line-strong); border-radius:5px; } html.dn main.dna-helper .hp-part.on .hp-ck { background:#1E6B3F; border-color:#1E6B3F; }
html.dn main.dna-helper .hp-facts { border-top-color:var(--line); padding-top:14px; gap:12px; }
html.dn main.dna-helper .hp-facts b { font-size:16px; line-height:22px; font-weight:700; color:var(--ink); }
html.dn main.dna-helper .hp-foot { border-top-color:var(--line); padding-top:12px; font-size:13px; }
html.dn main.dna-helper .hp-last { color:var(--muted); }
html.dn main.dna-helper .btn.hp-sm { height:30px; padding:0 12px; font-size:13px; border-radius:8px; }
html.dn main.dna-helper .hp-rm { color:var(--muted); font-size:13px; } html.dn main.dna-helper .hp-rm:hover { color:#B42318; }
html.dn.dark main.dna-helper .hp-part.on { background:#15301F; border-color:#245236; color:#6FCF97; } html.dn.dark main.dna-helper .hp-part.on .hp-ck { background:#6FCF97; border-color:#6FCF97; color:var(--th-dpage2); }
html.dn.dark main.dna-helper .hp-state.on { background:#15301F; color:#6FCF97; } html.dn.dark main.dna-helper .hp-state.off { background:var(--th-dsoft); color:var(--th-dmute); }
html.dn.dark main.dna-helper .hp-facts .tag.t-cut { background:#3A1D19 !important; color:#FF8A7A !important; border-color:transparent !important; }
html.dn.dark main.dna-helper .hp-facts .tag.t-ok { background:#15301F !important; color:#6FCF97 !important; border-color:transparent !important; }

/* New design: pages (scoped under html.dn; see design-new.css). Referrals and Scheduled, Rate sheet, OPWDD, Help, My account,
   the states (empty, loading, error, saved toast), the sign-in card, and dark mode for the whole new design (html.dn.dark).
   Mockups: design/portal-redesign/mockups m-referrals, m-rates, t-rates-*, m-opwdd, m-help, m-account, d-states, d-signin2*,
   p-signin2, d-myday-dark, p-case-dark. The pages that need it add main.dnp (+ main.dnp-<page>) only while the design is on. */

/* ---------- page header (these pages): the line under the title moves above it as a small caption, like the mockups ---------- */
html.dn main.dnp > .head { align-items:flex-end; margin-bottom:18px; gap:16px; }
html.dn main.dnp > .head .eyebrow { display:none; }
html.dn main.dnp > .head > div:first-child { display:flex; flex-direction:column; gap:4px; min-width:0; }
html.dn main.dnp > .head h1 { order:2; font-size:24px; line-height:32px; font-weight:700; letter-spacing:-.005em; color:var(--ink); }
html.dn main.dnp > .head > div:first-child > .sub { order:1; margin:0; font-size:12px; line-height:16px; font-weight:500; color:var(--ink2); max-width:820px; }
html.dn main.dnp > .head > div:first-child > .sub b { color:var(--ink); }
html.dn main.dnp > .head .tools { gap:12px; }
html.dn main.dnp > .head .tools select, html.dn main.dnp .dnr-bar select, html.dn main.dnp .filterbar select, html.dn main.dnp .pb-filters select {
  height:36px; border-radius:10px; border:1px solid var(--line); background-color:var(--card); color:var(--ink); font-weight:500; font-size:14px; padding:0 12px; }
html.dn main.dnp .btn { height:36px; font-size:14px; gap:8px; }
html.dn main.dnp .sec { font-size:11px; line-height:16px; letter-spacing:.06em; color:var(--ink2); }
html.dn main.dnp .sec .pill { background:var(--sunken); color:var(--ink2); }
html.dn main.dnp .linkbtn { color:var(--link); }

/* shared table look: a sunken header row of small capitals, 14px rows, a warm line between */
html.dn main.dnp table th { background:var(--sunken); color:var(--muted); font-size:11px; line-height:16px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:10px 16px; border-bottom:1px solid var(--line); }
html.dn main.dnp table td { padding:14px 16px; border-top:1px solid var(--line); font-size:14px; line-height:20px; color:var(--ink); }
html.dn main.dnp table tr:first-child td { border-top:0; }
html.dn main.dnp table td .sub { font-size:12px; color:var(--muted); }
html.dn main.dnp .tag .dot, html.dn .dnr .dot { display:inline-block; width:7px; height:7px; border-radius:99px; background:currentColor; flex:none; }
html.dn .ridlink, html.dn .rid { font-variant-numeric:tabular-nums; }

/* ---------- Referrals and Scheduled (m-referrals) ---------- */
html.dn main.dnp-referrals .dnr-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
html.dn main.dnp-referrals .dnr-q { display:flex; align-items:center; gap:10px; height:40px; width:240px; flex:0 1 240px; min-width:200px; max-width:100%; padding:0 12px; border-radius:10px; border:1px solid var(--line-strong); background:var(--card); color:var(--muted); }
html.dn main.dnp-referrals .dnr-q:focus-within { border-color:var(--brand); box-shadow:0 0 0 3px rgba(var(--th-accent-rgb), .18); }
html.dn main.dnp-referrals .dnr-q input { flex:1; min-width:0; height:38px; border:0; padding:0; background:transparent; box-shadow:none; color:var(--ink); font-size:14px; }
html.dn main.dnp-referrals .dnr-q input:focus { box-shadow:none; border:0; }
html.dn main.dnp-referrals #rfControls { flex:1; min-width:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* the buckets as a segmented control */
html.dn main.dnp-referrals #rfControls .tabs { display:inline-flex; gap:2px; padding:3px; margin:0; border:0; border-radius:10px; background:var(--sunken); max-width:100%; overflow-x:auto; }
html.dn main.dnp-referrals #rfControls .tabs button { flex:none; }
html.dn main.dnp-referrals #rfControls .tabs button { height:30px; padding:0 12px; margin:0; border:0; border-radius:8px; font-size:13px; font-weight:600; color:var(--ink2); gap:5px; }
html.dn main.dnp-referrals #rfControls .tabs button[aria-selected=true] { background:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(var(--th-ink-rgb), .08); }
html.dn main.dnp-referrals #rfControls .tabs .tab-n, html.dn main.dnp-referrals #rfControls .tabs button[aria-selected=true] .tab-n { background:none; color:inherit; padding:0; font-size:13px; font-weight:600; }
html.dn main.dnp-referrals #rfControls .filterbar { flex:1; margin:0 !important; justify-content:flex-end; }
html.dn main.dnp-referrals .sortsel { font-size:0; gap:0; }
html.dn main.dnp-referrals #rfControls .smenu-pop { left:auto; right:0; max-width:calc(100vw - 32px); min-width:min(300px, calc(100vw - 32px)); }
html.dn main.dnp-referrals .sortsel select { font-size:14px; width:140px; }
html.dn main.dnp-referrals #rfControls .filterbar { flex:1 0 auto; flex-wrap:wrap; max-width:100%; }
html.dn main.dnp-referrals #list > .sec:first-child { margin-top:0; }
/* the table: Case | Plan | HHA status | Next step | Follow-up | Coordinator (or Phone) */
html.dn main.dnp-referrals .dnr-list { border-radius:14px; border:1px solid var(--line); background:var(--card); overflow:hidden; overflow-x:auto; }
html.dn main.dnp-referrals .dnr-list > * { min-width:880px; }
html.dn main.dnp-referrals .dnr-th, html.dn main.dnp-referrals .dnr-list .row.dnr { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.8fr) 132px minmax(110px,.8fr); gap:16px; align-items:center; }
html.dn main.dnp-referrals .dnr-th { padding:10px 16px; background:var(--sunken); border-bottom:1px solid var(--line); }
html.dn main.dnp-referrals .dnr-th span { font-size:11px; line-height:16px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
html.dn main.dnp-referrals .dnr-list .row.dnr { position:relative; padding:12px 16px; margin:0; border:0; border-top:1px solid var(--line); border-radius:0; background:var(--card); box-shadow:none; min-height:62px; }
html.dn main.dnp-referrals .dnr-list .row.dnr::before, html.dn main.dnp-referrals .dnr-list .row.dnr::after { display:none; content:none; }
html.dn main.dnp-referrals .dnr-list .dnr-th + .row.dnr { border-top:0; }
html.dn main.dnp-referrals .dnr-list .row.dnr:hover { background:var(--hover); }
html.dn main.dnp-referrals .dnr-case { display:flex; flex-direction:column; min-width:0; }
html.dn main.dnp-referrals .dnr-case b { font-size:14px; line-height:22px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html.dn main.dnp-referrals .dnr-case .rid { background:none; padding:0; border:0; font-size:12px; line-height:16px; font-weight:500; color:var(--muted); }
html.dn main.dnp-referrals .dnr-plan { font-size:13px; line-height:18px; color:var(--ink2); }
html.dn main.dnp-referrals .dnr-st { display:inline-flex; align-items:center; gap:6px; max-width:100%; height:22px; padding:0 8px; border-radius:999px; border:1px solid var(--line); font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html.dn main.dnp-referrals .dnr-st .sdot { width:7px; height:7px; border-radius:50%; flex:none; margin:0; }   /* round (Nov 7) */
html.dn main.dnp-referrals .dnr-what { font-size:13px; line-height:18px; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
html.dn main.dnp-referrals .dnr .tag { margin:0; height:22px; padding:0 8px; font-size:12px; font-weight:600; gap:5px; }
html.dn main.dnp-referrals .dnr .tag.dnr-today { background:var(--today-tint); color:var(--today); }
html.dn main.dnp-referrals .dnr .tag.dnr-out { background:transparent; border:1px solid var(--line); color:var(--muted); min-width:64px; }
html.dn main.dnp-referrals .dnr-who { font-size:13px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html.dn main.dnp-referrals .dnr-who .tel { font-size:13px; font-weight:600; color:var(--ink); }
html.dn main.dnp-referrals .showmore { border-top:0; }

/* ---------- Rate sheet (m-rates, t-rates-rules, t-rates-pay, t-rates-how) ---------- */
html.dn main.dnp-rates .rs-finder { padding:20px; border-radius:14px; margin-bottom:20px; }
html.dn main.dnp-rates .rs-fgrid { gap:16px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
html.dn main.dnp-rates .rs-fgrid .field input, html.dn main.dnp-rates .rs-fgrid .field select { width:100%; min-width:0; }
html.dn main.dnp-rates .field { font-size:13px; font-weight:600; color:var(--ink); gap:6px; letter-spacing:0; }
html.dn main.dnp-rates .field input, html.dn main.dnp-rates .field select { height:40px; border-radius:10px; border:1px solid var(--line-strong); background-color:var(--card); color:var(--ink); font-size:14px; padding:0 12px; }
html.dn main.dnp-rates .rs-best { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
html.dn main.dnp-rates .rs-bh b { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); }
html.dn main.dnp-rates .rs-bh .sub { font-size:12px; }
/* best options: cards side by side, the profit an hour big */
html.dn main.dnp-rates .rs-blist { grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px; }
html.dn main.dnp-rates .rs-b { display:grid !important; grid-template-columns:1fr auto; grid-template-areas:"name v" "num num"; gap:10px 12px; align-items:start; padding:18px; border:1px solid var(--line) !important; border-radius:14px; background:var(--card) !important; box-shadow:none !important; cursor:pointer; }
html.dn main.dnp-rates .rs-b:hover { border-color:var(--line-strong) !important; }
html.dn main.dnp-rates .rs-b .rs-rank { display:none; }
html.dn main.dnp-rates .rs-b .rs-bname { grid-area:name; display:flex; flex-direction:column; gap:4px; min-width:0; }
html.dn main.dnp-rates .rs-b .rs-bname > b { font-size:15px; font-weight:600; color:var(--ink); }
html.dn main.dnp-rates .rs-b .rs-v { grid-area:v; }
html.dn main.dnp-rates .rs-b .rs-bnum { grid-area:num; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
html.dn main.dnp-rates .rs-b .rs-bnum .rs-ph { background:none !important; padding:0; min-width:0; font-size:28px; line-height:32px; font-weight:700; letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums; text-align:left; }
html.dn main.dnp-rates .rs-b .rs-bnum .rs-ph.bad { color:var(--alert); }
html.dn main.dnp-rates .rs-b .rs-bnum .sub { font-size:13px; font-weight:600; color:var(--ink2); }
/* service and place: plain muted text, not boxes */
html.dn main.dnp-rates .rs-svc { background:none; padding:0; margin:0; font-size:12px; font-weight:600; color:var(--muted); border-radius:0; }
html.dn main.dnp-rates .rs-svc::after { content:' · '; white-space:pre; }
html.dn main.dnp-rates .rs-chip + .rs-chip::before { content:', '; }
html.dn main.dnp-rates #rsEdit { background:var(--card); border-color:var(--line-strong); color:var(--ink); box-shadow:none; }
html.dn main.dnp-rates #rsEdit:hover { background:var(--sunken); }
html.dn main.dnp-rates #rsEdit svg { display:none; }
html.dn main.dnp-rates .rs-chip { border:0; padding:0; margin:0; background:none; font-size:12px; color:var(--muted); }
/* the verdict pill with its dot */
html.dn main.dnp-rates .rs-v { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
html.dn main.dnp-rates .rs-v::before { content:''; width:7px; height:7px; border-radius:99px; background:currentColor; flex:none; }
html.dn main.dnp-rates .rs-v.ok { background:var(--ok-tint); color:var(--ok); }
html.dn main.dnp-rates .rs-v.ask { background:var(--amber-tint); color:var(--amber); }
html.dn main.dnp-rates .rs-v.no { background:var(--alert-tint); color:var(--alert); }
/* the table */
html.dn main.dnp-rates .rs-wrap { border-radius:14px; }
html.dn main.dnp-rates .rs-thead { padding:12px 16px; font-size:13px; color:var(--ink2); border-bottom:1px solid var(--line); }
html.dn main.dnp-rates table.rs th { position:sticky; top:0; z-index:2; }
html.dn main.dnp-rates table.rs td { padding:12px 16px; vertical-align:middle; font-variant-numeric:tabular-nums; }
html.dn main.dnp-rates table.rs tr.rs-sec td { background:var(--page); color:var(--ink2); font-size:11px; letter-spacing:.06em; padding:8px 16px; }
html.dn main.dnp-rates table.rs tbody tr:hover td { background:var(--hover); }
html.dn main.dnp-rates .rs-pl b { color:var(--ink); font-size:14px; font-weight:600; }
html.dn main.dnp-rates table.rs .rs-ph { background:none !important; padding:0; min-width:0; font-weight:700; color:var(--ink); }
html.dn main.dnp-rates table.rs .rs-ph.bad { color:var(--alert); }
html.dn main.dnp-rates table.rs .rs-in { background:var(--sunken); color:var(--ink); }
html.dn main.dnp-rates table.rs .rs-in:focus { background:var(--card); border-color:var(--brand); box-shadow:0 0 0 3px rgba(var(--th-accent-rgb), .18); }
html.dn main.dnp-rates table.rs tr.rs-hit td { background:var(--orange-tint) !important; }
html.dn main.dnp-rates .rs-editbar { display:flex; align-items:center; gap:12px; padding:12px 16px; margin-bottom:12px; border-radius:14px; background:var(--orange-tint); color:var(--orange-dk); }
html.dn main.dnp-rates .rs-editbar b { display:inline-flex; gap:6px; align-items:center; }
html.dn main.dnp-rates .rs-savebar { border-radius:14px; border-color:var(--brand); }
/* edit mode: the four tabs (Contracts, Calculator rules, Caregiver pay, How it works) */
html.dn main.dnp-rates .dn-rtabs { display:flex; gap:4px; margin:0 0 20px; border-bottom:1px solid var(--line); overflow-x:auto; }
html.dn main.dnp-rates .dn-rtabs button { display:inline-flex; align-items:center; gap:8px; height:auto; padding:0 12px 12px; margin:0 0 -1px; border:0; border-bottom:2px solid transparent; border-radius:0; background:none; box-shadow:none; color:var(--muted); font-size:14px; font-weight:600; cursor:pointer; }
html.dn main.dnp-rates .dn-rtabs button svg { display:none; }
html.dn main.dnp-rates .dn-rtabs button:hover { color:var(--ink); background:none; }
html.dn main.dnp-rates .dn-rtabs button[aria-expanded=true], html.dn main.dnp-rates .dn-rtabs:not(:has([aria-expanded=true])) .dn-rtab0 { color:var(--ink); border-bottom-color:var(--brand); }
html.dn main.dnp-rates .rs-bar { gap:12px; }
/* a tab with its own page (rules, how it works): the finder and the table step aside, like the mockups; Caregiver pay keeps the table (the lines that change light up) */
html.dn main.dnp-rates:has(.dn-rtabs [data-pn=rules][aria-expanded=true]) :is(.rs-finder, .rs-wrap, .rs-bar),
html.dn main.dnp-rates:has(.dn-rtabs [data-pn=how][aria-expanded=true]) :is(.rs-finder, .rs-wrap, .rs-bar) { display:none; }
html.dn main.dnp-rates .rs-pn { padding:20px; border-radius:14px; margin-bottom:20px; }
html.dn main.dnp-rates .rs-pn .sec { font-size:15px; line-height:22px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink); margin:0 0 10px; }
html.dn main.dnp-rates .rs-pn .sec svg { display:none; }
html.dn main.dnp-rates .rs-rgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px 16px; }
html.dn main.dnp-rates .rs-rgrid .field .sub { font-weight:400; font-size:12px; }
html.dn main.dnp-rates .rs-locs label { font-weight:500; font-size:13px; color:var(--ink2); }
/* Calculator rules: what each answer means beside the numbers */
html.dn main.dnp-rates #pn-rules:not([hidden]) { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap:16px; padding:0; background:none; border:0; overflow:visible; }
html.dn main.dnp-rates #pn-rules > div { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; }
html.dn main.dnp-rates .dn-legend ul { list-style:none; margin:4px 0 12px; padding:0; display:flex; flex-direction:column; gap:12px; }
html.dn main.dnp-rates .dn-legend li { display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ink); }
html.dn main.dnp-rates .dn-legend .sub { color:var(--muted); }
html.dn main.dnp-rates .dn-nums .rs-rgrid { grid-template-columns:1fr; gap:10px; }
html.dn main.dnp-rates .dn-nums .rs-rgrid .field { display:grid; grid-template-columns:minmax(0,1fr) 160px; align-items:center; font-weight:500; column-gap:12px; }
html.dn main.dnp-rates .dn-nums .rs-rgrid .field .sub { grid-column:1 / -1; }
/* How it works: numbered steps beside the example */
html.dn main.dnp-rates .dn-how { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap:16px; }
html.dn main.dnp-rates #pn-how:not([hidden]):has(.dn-how) { padding:0; background:none; border:0; overflow:visible; }
html.dn main.dnp-rates .dn-howcol { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; }
html.dn main.dnp-rates .rs-how { list-style:none; padding:0; margin:4px 0 0; counter-reset:dnh; display:flex; flex-direction:column; gap:12px; font-size:14px; line-height:22px; color:var(--ink); }
html.dn main.dnp-rates .rs-how li { counter-increment:dnh; position:relative; padding-left:36px; margin:0; }
html.dn main.dnp-rates .rs-how li::before { content:counter(dnh); position:absolute; left:0; top:-1px; width:24px; height:24px; border-radius:99px; background:var(--brand); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; }
html.dn main.dnp-rates .rs-how b { font-weight:600; }
html.dn main.dnp-rates .dn-ex { display:grid; grid-template-columns:auto 1fr; margin:0; }
html.dn main.dnp-rates .dn-ex dt, html.dn main.dnp-rates .dn-ex dd { margin:0; padding:14px 0; border-top:1px solid var(--line); font-size:13px; }
html.dn main.dnp-rates .dn-ex dt:first-of-type, html.dn main.dnp-rates .dn-ex dd:first-of-type { border-top:0; }
html.dn main.dnp-rates .dn-ex dt { color:var(--ink2); }
html.dn main.dnp-rates .dn-ex dd { text-align:right; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }

/* (rates, edit mode) the places on one line, room for "+ line · Delete plan", the edit bar without the dashed edge */
html.dn main.dnp-rates .rs-rgrid .field:has(.rs-locs) { grid-column:1 / -1; }
html.dn main.dnp-rates .rs-rgrid .rs-locs { flex-direction:row; flex-wrap:wrap; gap:6px 16px; margin-top:8px; }
html.dn main.dnp-rates table.rs.editing td { padding:10px 10px; }
html.dn main.dnp-rates table.rs.editing .rs-pl { min-width:150px; }
html.dn main.dnp-rates .rs-pact { gap:8px; flex-wrap:wrap; }
html.dn main.dnp-rates .rs-editbar { border:0; }

/* ---------- OPWDD (m-opwdd) ---------- */
html.dn main.dnp-opwdd .pb-reasons { gap:8px; margin-bottom:16px; }
html.dn main.dnp-opwdd .pb-reason { display:block; line-height:30px; white-space:nowrap; min-width:0; padding:0 12px; height:32px; border-radius:10px; border:1px solid var(--line); background:var(--card); box-shadow:none; font-size:13px; font-weight:600; color:var(--ink2); }
html.dn main.dnp-opwdd .pb-reason:hover { transform:none; border-color:var(--line-strong); }
html.dn main.dnp-opwdd .pb-reason b { margin-right:6px; font-size:13px; color:var(--ink); letter-spacing:0; }
html.dn main.dnp-opwdd .pb-reason.r-overdue b { color:var(--ink); }
html.dn main.dnp-opwdd .pb-reason.on { background:var(--orange-tint); border-color:transparent; color:var(--orange-dk); box-shadow:none; }
html.dn main.dnp-opwdd .pb-reason.on b { color:var(--orange-dk); }
html.dn main.dnp-opwdd .pb-filters { gap:8px; margin:0 0 16px !important; }
html.dn main.dnp-opwdd .pb-filters input { height:36px; border-radius:10px; border-color:var(--line-strong); background:var(--card); color:var(--ink); }
html.dn main.dnp-opwdd .pb-filters label.sub { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink2); }
html.dn main.dnp-opwdd .dno-table { border-radius:14px; overflow:auto; }
html.dn main.dnp-opwdd .dno-table table { min-width:860px; }
html.dn main.dnp-opwdd .dno-table td { vertical-align:middle; }
html.dn main.dnp-opwdd .pb-name { font-size:14px; font-weight:600; color:var(--ink); text-decoration:none; }
html.dn main.dnp-opwdd .pb-ids .rid { background:none; border:0; padding:0; font-size:12px; font-weight:500; color:var(--muted); }
html.dn main.dnp-opwdd .dno-step { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
html.dn main.dnp-opwdd .dno-bars { display:inline-flex; gap:3px; }
html.dn main.dnp-opwdd .dno-bars i { display:block; width:14px; height:6px; border-radius:3px; background:var(--line); }
html.dn main.dnp-opwdd .dno-bars i.on { background:var(--ink2); }
html.dn main.dnp-opwdd .dno-bars i.cur { background:var(--brand); width:22px; }
html.dn main.dnp-opwdd .dno-step .tag { margin:0; height:22px; padding:0 8px; font-size:12px; gap:5px; }
html.dn main.dnp-opwdd .pb-todo b { font-weight:600; color:var(--ink); }
html.dn main.dnp-opwdd .dno-at { margin-top:2px; font-size:12px; color:var(--muted); }
html.dn main.dnp-opwdd td.sub { color:var(--ink2); font-size:13px; }
html.dn main.dnp-opwdd .dno-foot { margin-top:14px; font-size:13px; color:var(--muted); }

/* ---------- Help (m-help) ---------- */
html.dn main.dnp-help .head .tools .btn { height:36px; }
html.dn main.dnp-help .dnh { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; }
html.dn main.dnp-help .dnh > .dnh-toc { flex:1 1 220px; max-width:260px; }
html.dn main.dnp-help .dnh > .guide { flex:999 1 420px; min-width:0; }
html.dn main.dnp-help .dnh-toc { position:sticky; top:84px; padding:12px 8px; border-radius:14px; display:flex; flex-direction:column; gap:2px; overflow:visible; }
html.dn main.dnp-help .dnh-toc button { text-align:left; padding:8px 12px; border:0; border-radius:10px; background:none; font:inherit; font-size:13px; line-height:22px; color:var(--ink2); cursor:pointer; }
html.dn main.dnp-help .dnh-toc button:hover { background:var(--sunken); color:var(--ink); }
html.dn main.dnp-help .dnh-toc button[aria-current=true] { background:var(--orange-tint); color:var(--orange-dk); font-weight:700; }
html.dn main.dnp-help .guide { max-width:none; padding:28px 32px; border-radius:14px; font-size:14px; line-height:22px; color:var(--ink); }
html.dn main.dnp-help .guide > h1:first-child { display:none; }
html.dn main.dnp-help .guide h2 { font-size:18px; line-height:26px; font-weight:700; color:var(--ink); margin:28px 0 12px; padding-top:20px; border-top:1px solid var(--line); scroll-margin-top:84px; }
html.dn main.dnp-help .guide .dnh-sec > h2:first-child { margin-top:0; padding-top:0; border-top:0; }
html.dn main.dnp-help .guide > p:not([hidden]) + .dnh-sec:not([hidden]) > h2 { margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }
html.dn main.dnp-help .guide > p { color:var(--ink2); }
html.dn main.dnp-help .guide ul { list-style:none; padding-left:0; }
html.dn main.dnp-help .guide ul > li { position:relative; padding-left:16px; margin:8px 0; }
html.dn main.dnp-help .guide ul > li::before { content:''; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:99px; background:var(--brand); }
html.dn main.dnp-help .guide b { font-weight:700; color:var(--ink); }

/* ---------- My account (m-account) ---------- */
html.dn main.dnp-account .dna { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:16px; align-items:start; }
html.dn main.dnp-account .dna-side { display:flex; flex-direction:column; gap:16px; }
html.dn main.dnp-account .dna-card { padding:22px; border-radius:14px; display:flex; flex-direction:column; gap:14px; margin:0; overflow:visible; }
html.dn main.dnp-account .dna-h { font-size:15px; line-height:22px; font-weight:600; color:var(--ink); }
html.dn main.dnp-account .dna-must { border-color:var(--brand); box-shadow:0 0 0 3px rgba(var(--th-accent-rgb), .14); }
html.dn main.dnp-account .field { font-size:13px; font-weight:600; color:var(--ink); gap:8px; }
html.dn main.dnp-account .field input { height:40px; width:100%; border-radius:10px; border:1px solid var(--line-strong); background:var(--card); color:var(--ink); font-size:14px; padding:0 12px; }
html.dn main.dnp-account .field input[readonly] { background:var(--sunken); border-color:var(--line); color:var(--muted); }
html.dn main.dnp-account .field input[readonly]:focus { box-shadow:none; border-color:var(--line); }
html.dn main.dnp-account .dna-in { position:relative; display:block; }
html.dn main.dnp-account .dna-in svg { position:absolute; left:12px; top:12px; color:var(--muted); pointer-events:none; }
html.dn main.dnp-account .dna-in input { padding-left:38px; }
html.dn main.dnp-account .btn { height:36px; }
html.dn main.dnp-account .err { color:var(--alert); font-size:13px; }
html.dn main.dnp-account .err:empty { display:none; }
html.dn main.dnp-account .dna-hha { background:var(--orange-tint); border-color:transparent; }
html.dn main.dnp-account .dna-hha .sub { color:var(--ink2); }
html.dn main.dnp-account .dna-steps { list-style:none; counter-reset:dna; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:13px; line-height:18px; color:var(--ink); }
html.dn main.dnp-account .dna-steps li { counter-increment:dna; position:relative; padding-left:34px; }
html.dn main.dnp-account .dna-steps li::before { content:counter(dna); position:absolute; left:0; top:-2px; width:24px; height:24px; border-radius:99px; background:var(--brand); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; }
html.dn main.dnp-account .bookmarklet { border:1px dashed var(--line-strong); background:var(--card); color:var(--ink); border-radius:10px; cursor:grab; }
html.dn main.dnp-account .check { display:flex; gap:8px; align-items:center; font-size:14px; color:var(--ink); }

/* ---------- States (d-states): empty, loading, error, saved toast ---------- */
html.dn .empty { background:var(--card); border:1px solid var(--line); border-radius:14px; color:var(--ink2); font-size:14px; padding:32px; }
html.dn .empty.big { padding:40px; }
html.dn .empty-art { gap:14px; }
html.dn .empty-art > div { max-width:420px; line-height:22px; }
html.dn .skel i { background:linear-gradient(90deg, var(--sunken) 0%, var(--page) 40%, var(--sunken) 80%); background-size:300% 100%; border-radius:6px; }
html.dn .skel-head, html.dn .skel-row { background:var(--card); border-color:var(--line); }
html.dn .skel-row { position:relative; }
html.dn .skel-row::before { content:''; position:absolute; left:20px; top:14px; bottom:14px; width:3px; border-radius:3px; background:var(--sunken); }
html.dn .skel-row:first-of-type { border-radius:14px 14px 0 0; } html.dn .skel-row:last-child { border-radius:0 0 14px 14px; border-bottom-color:var(--line); }
html.dn .skel-head { border-radius:14px; }
html.dn .dn-err { display:flex; gap:14px; align-items:flex-start; max-width:560px; padding:22px; border:1px solid var(--alert); border-radius:14px; background:var(--card); color:var(--ink); }
html.dn .dn-err > svg { color:var(--alert); flex:none; margin-top:1px; }
html.dn .dn-err b { font-size:15px; line-height:22px; font-weight:600; }
html.dn .dn-err .sub { font-size:13px; line-height:18px; margin-top:4px; color:var(--ink2); }
html.dn .dn-err-b { display:flex; gap:8px; margin-top:14px; }
html.dn .dn-err-b .btn { height:32px; font-size:13px; }
html.dn .toast { display:flex; align-items:center; gap:12px; min-height:44px; padding:10px 16px; border-radius:12px; background:var(--th-ink); color:var(--th-soft2); font-size:14px; font-weight:600; box-shadow:0 8px 24px rgba(var(--th-ink-rgb), .2); }
html.dn .toast.undo { padding:0 8px 0 16px; }
html.dn .toast.undo .saved-ok { background:none; color:var(--th-soft2); width:auto; height:auto; font-size:15px; }
html.dn .toast.undo .linkbtn { color:var(--th-accent); text-decoration:none; font-size:14px; font-weight:700; padding:6px 10px; border-radius:8px; }
html.dn .toast.undo .linkbtn:hover { background:rgba(var(--th-accent-rgb), .14); }

/* ---------- top bar: the light / dark button (app.js ThemeBtn) ---------- */
html.dn .tb-theme { width:36px; height:36px; padding:0; justify-content:center; border-radius:10px; color:var(--ink2); }
html.dn .tb-theme:hover { color:var(--ink); background:var(--sunken); }

/* ---------- Sign-in (d-signin2, d-signin2-err, p-signin2): only the card around the shapes ---------- */
html.dn .login-wrap { background:var(--page); }
html.dn .login-scene { background:var(--th-tint); }
html.dn .scene-brand { color:#9AA6C4; }
html.dn .login-wrap .login { background:#fff; }
html.dn .login-inner { width:min(380px, 100%); gap:16px; }
html.dn .login-inner > img { align-self:flex-start; height:40px; margin-bottom:28px; }
html.dn .login-inner h1 { font-size:32px; line-height:40px; font-weight:800; letter-spacing:-.01em; color:var(--th-ink); text-align:left; margin:0; }
html.dn .login-inner > p { margin:-12px 0 4px; font-size:14px; color:var(--th-text); text-align:left; }
html.dn .login-inner #gbtn:empty, html.dn .login-inner #gbtn:empty + .lf-or { display:none; }
html.dn .login-inner .lf-or { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--th-mute); }
html.dn .login-inner .lf-or::before, html.dn .login-inner .lf-or::after { content:''; flex:1; height:1px; background:var(--th-line); }
html.dn .login-inner .lf { gap:14px; }
html.dn .login-inner .lf-field { gap:8px; font-size:13px; font-weight:600; color:var(--th-ink); letter-spacing:0; }
html.dn .login-inner .lf-box, html.dn .login-inner .lf-pw { position:relative; display:flex; align-items:center; }
html.dn .login-inner .lf-ic { position:absolute; left:14px; color:var(--th-text); pointer-events:none; }
html.dn .login-inner .lf-field input { height:46px; padding:0 14px 0 40px; border:1px solid var(--th-line2); border-radius:10px; background:#fff; color:var(--th-ink); font-size:15px; transition:border-color .15s, box-shadow .15s; }
html.dn .login-inner .lf-field input:not(.lf-box input):not(.lf-pw input) { padding-left:14px; }
html.dn .login-inner .lf-pw input { padding-right:44px; }
html.dn .login-inner .lf-field input::placeholder { color:var(--th-faint); }
html.dn .login-inner .lf-field input:focus { border-color:var(--th-accent); box-shadow:0 0 0 3px rgba(var(--th-accent-rgb), .18); outline:none; }
html.dn .login-inner .lf-eye { right:8px; color:var(--th-mute); }
html.dn .login-inner .lf-eye:hover, html.dn .login-inner .lf-eye:focus-visible { background:var(--th-soft); color:var(--th-ink); }
/* wrong password: the box goes red and the reason sits right under it */
html.dn .login-inner .lf:has(#loginErr:not(:empty)) #lgPw { border-color:#B42318; box-shadow:0 0 0 3px rgba(180,35,24,.14); }
html.dn .login-inner #loginErr { margin-top:-6px; text-align:left; font-size:13px; font-weight:500; color:#B42318; display:flex; gap:6px; align-items:flex-start; }
html.dn .login-inner #loginErr:empty { display:none; }
html.dn .login-inner #loginErr:not(:empty)::before { content:''; flex:none; width:14px; height:14px; margin-top:2px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat; }
html.dn .login-inner .lf-row { margin-top:-4px; font-size:13px; }
html.dn .login-inner .lf-row a, html.dn .login-inner .sub a { color:#23305C; font-weight:600; text-decoration:none; }
html.dn .login-inner .lf-row a:hover, html.dn .login-inner .sub a:hover { text-decoration:underline; }
html.dn .login-inner .btn.primary.lf-btn { height:44px; border-radius:10px; font-size:15px; gap:8px; background:var(--th-accent2); border-color:var(--th-accent2); color:#fff; box-shadow:none; margin-top:4px; }
html.dn .login-inner .btn.primary.lf-btn:hover { background:var(--th-accent3); border-color:var(--th-accent3); }
html.dn .login-inner .btn:not(.primary) { border-color:var(--th-line2); color:var(--th-ink); border-radius:10px; height:44px; }
html.dn .login-inner .sub { font-size:13px; color:var(--th-text); }
html.dn .login-inner .lf .sub { text-align:left; }
html.dn .login-inner .err { color:#B42318; }
html.dn .login-inner .privacy { display:flex; align-items:center; justify-content:center; gap:6px; font-size:12px; color:var(--th-mute); margin-top:-8px; }
html.dn .login-inner .field { font-size:13px; font-weight:600; color:var(--th-ink); letter-spacing:0; gap:8px; }
html.dn .login-inner .field select { height:44px; border-radius:10px; border-color:var(--th-line2); }
/* narrow windows: no width rules here (the phone layout is web/css/dn-phone.css); the grids above wrap by themselves and the
   wide tables scroll inside their card, so nothing runs off the page at 390 */

/* ======================================================================================================================
   Dark mode (tokens.json "dark"; d-myday-dark, p-case-dark). The same variable names as design-new.css, so every page that
   uses them follows; below them, the colours design-new.css and app.css write out in light (white cards, tinted tags…).
   ====================================================================================================================== */
html.dn.dark {
  color-scheme:dark;
  --navy:var(--th-dtext); --navy-dk:var(--th-dtext); --navy-2:var(--th-dmute); --navy-3:var(--th-dmute); --navy-tint:var(--th-dsoft);
  --orange:var(--th-daccent); --orange-dk:var(--th-daccent); --orange-tint:var(--th-daccent2); --brand:var(--th-daccent);
  --alert:#FF8A7A; --alert-tint:#3A1D19; --ok:#6FCF97; --ok-tint:#15301F;
  --today:#7FB5F0; --today-tint:#172638; --amber:#F2C14E; --amber-tint:#352A12;
  --ink:var(--th-dtext); --ink2:var(--th-dmute); --muted:var(--th-dmute); --faint:var(--th-dmute);
  --line:var(--th-dsoft); --line2:var(--th-dcard); --line-strong:var(--th-dline); --page:var(--th-dpage2); --card:var(--th-dpage); --hover:var(--th-dpage); --sunken:var(--th-dsoft);
  --link:#AEB8DA; --shadow:none; --shadow-hi:0 8px 24px rgba(0,0,0,.45);
  --s1:#AEB8DA; --s2:var(--th-daccent); --s3:var(--th-dmute); --s4:var(--th-dline);
}
html.dn.dark body { background:var(--page); color:var(--ink); }
html.dn.dark ::selection { background:rgba(var(--th-daccent-rgb), .35); }
/* the shell (design-new.css writes these in light) */
html.dn.dark .side, html.dn.dark .side .logo { background:var(--card); border-color:var(--line); }
html.dn.dark .side .logo img, html.dn.dark .login-inner > img { filter:none; }
/* dark logo (design review, Oct 22): the same logo with the navy in warm white, no chip */
html.dn.dark .side .logo { background:none; border-radius:0; padding:2px 6px 0; }
html.dn.dark .side .logo img { content:url('/img/logo-dark.png'); }
/* dark progress bar: the dark status tokens (late, due, done), brand orange for new */
html.dn.dark .dp-bar .late, html.dn.dark .dnp .dp-bar .late { background:#FF8A7A; }
html.dn.dark .dp-bar .today, html.dn.dark .dnp .dp-bar .today { background:#7FB5F0; }
html.dn.dark .dp-bar .ok, html.dn.dark .dnp .dp-bar .ok { background:#6FCF97; }
html.dn.dark .dp-bar .new, html.dn.dark .dnp .dp-bar .new { background:var(--th-daccent); }
html.dn.dark .topbar { background:rgba(var(--th-dpage2-rgb), .94); border-bottom-color:var(--line); }
html.dn.dark .tb-search { background:var(--card); border-color:var(--line); }
html.dn.dark .tb-search input { background:transparent; color:var(--ink); }
html.dn.dark .side nav button[aria-pressed=true] { background:var(--th-daccent2); color:var(--th-daccent); }
html.dn.dark .side nav button[aria-pressed=true] .ic, html.dn.dark .side nav button[aria-pressed=true] .pill { color:var(--th-daccent); }
html.dn.dark .crumb b { color:var(--ink); }
/* buttons: the brand button is orange with dark text in dark mode */
html.dn.dark .btn { background:var(--card); border-color:var(--th-dmute); color:var(--ink); }
html.dn.dark .btn:hover { background:var(--sunken); border-color:var(--th-dmute); color:var(--ink); }
html.dn.dark .btn.primary, html.dn.dark .btn.primary:hover { background:var(--th-daccent); border-color:var(--th-daccent); color:var(--th-dpage); }
html.dn.dark .btn.primary:hover { background:var(--th-daccent); border-color:var(--th-daccent); }
html.dn.dark .btn.quiet, html.dn.dark .btn.quiet:hover { background:transparent; border-color:transparent; color:var(--ink2); }
html.dn.dark .btn.quiet:hover { background:var(--sunken); color:var(--ink); }
html.dn.dark .btn.noans { background:var(--card); border-color:var(--th-dmute); color:var(--ink); }
html.dn.dark .xbtn, html.dn.dark .pc .open-b { background:var(--card); border-color:var(--line); color:var(--ink2); }
html.dn.dark .linkbtn { color:var(--link); }
/* inputs */
html.dn.dark select, html.dn.dark input[type=date], html.dn.dark input[type=text], html.dn.dark input:not([type]), html.dn.dark input[type=email], html.dn.dark input[type=password],
html.dn.dark input[type=number], html.dn.dark input[type=search], html.dn.dark input[type=time], html.dn.dark input[type=datetime-local], html.dn.dark textarea { background-color:var(--card); border-color:var(--th-dline); color:var(--ink); }
html.dn.dark input::placeholder, html.dn.dark textarea::placeholder { color:var(--th-dmute); }
html.dn.dark input[type=file] { background:var(--sunken); border-color:var(--th-dline); color:var(--ink2); }
html.dn.dark input[type=file]::file-selector-button { background:var(--card); color:var(--ink); border-color:var(--th-dmute); }
html.dn.dark main.dnp-account .field input[readonly] { background:var(--sunken); color:var(--muted); }
/* cards, lists, tables, popovers */
html.dn.dark .panel, html.dn.dark .list, html.dn.dark .card, html.dn.dark .dayprog, html.dn.dark .dp-chip, html.dn.dark .row.done, html.dn.dark .head.hero, html.dn.dark .ov-head,
html.dn.dark .chip, html.dn.dark .pb-reason, html.dn.dark .mile-card, html.dn.dark .mile-row, html.dn.dark .md-chip, html.dn.dark .plan, html.dn.dark .choices button,
html.dn.dark .sb-step.on, html.dn.dark .rb-steps span, html.dn.dark .rb-ai, html.dn.dark .pc .src, html.dn.dark .ov-head select { background:var(--card); border-color:var(--line); color:var(--ink); }
html.dn.dark .sheet .box, html.dn.dark .sheet .box > .actions, html.dn.dark .sheet .dhead, html.dn.dark .sheet .dtabs, html.dn.dark .bellpanel, html.dn.dark .smenu-pop, html.dn.dark .tb-drop,
html.dn.dark .quickhha, html.dn.dark .sheet-lite, html.dn.dark .nc-pop { background:var(--card); border-color:var(--line); color:var(--ink); }
html.dn.dark th { background:var(--sunken); color:var(--muted); border-color:var(--line); }
html.dn.dark td { border-color:var(--line); }
html.dn.dark .empty { background:var(--card); border-color:var(--line); }
html.dn.dark .empty-art svg rect[fill="#fff"], html.dn.dark .empty-art svg circle[fill="#fff"] { fill:var(--sunken); }
html.dn.dark .empty-art svg ellipse { fill:var(--sunken); }
/* tags and status pairs (design-new.css writes the light pairs) */
html.dn.dark .tag { background:var(--sunken); color:var(--ink2); }
html.dn.dark .tag.t-late { background:#3A1D19; color:#FF8A7A; }
html.dn.dark .tag.t-ok { background:#15301F; color:#6FCF97; }
html.dn.dark .tag.t-auto { background:#352A12; color:#F2C14E; }
html.dn.dark .tabs button[aria-selected=true] { color:var(--ink); border-bottom-color:var(--th-daccent); }
html.dn.dark .tabs button[aria-selected=true] .tab-n { background:var(--th-daccent2); color:var(--th-daccent); }
/* My day row edges (design-new.css) in the dark status colours */
html.dn.dark .row.is-new::before { background:var(--th-daccent); }
html.dn.dark .row.is-today::before { background:#7FB5F0; }
html.dn.dark .row.late::before, html.dn.dark .row.urgent::before { background:#FF8A7A; }
html.dn.dark .row.is-done::before, html.dn.dark .row.done::before { background:#6FCF97; }
html.dn.dark .row:hover { background:var(--hover); }
html.dn.dark .sec.late { color:#FF8A7A; }
/* loading shimmer, toast */
html.dn.dark .skel i { background:linear-gradient(90deg, var(--th-dsoft) 0%, var(--th-dcard) 40%, var(--th-dsoft) 80%); background-size:300% 100%; }
html.dn.dark .toast { background:var(--th-dtext); color:var(--th-dpage); box-shadow:0 8px 24px rgba(0,0,0,.5); }
html.dn.dark .toast.undo .saved-ok { color:#1E6B3F; }
html.dn.dark .toast.undo .linkbtn { color:var(--th-daccent); }
/* the HHA status colours stay the team's own (UI.STATUSES); a light ring keeps the dark ones visible */
html.dn.dark .sdot { box-shadow:0 0 0 1px rgba(var(--th-dtext-rgb), .18); }
/* the rate sheet's dirty / hit rows and the referral table read on dark */
html.dn.dark main.dnp-rates table.rs tr.rs-sec td { background:var(--page); }
html.dn.dark main.dnp-rates .rs-how li::before, html.dn.dark main.dnp-account .dna-steps li::before { color:var(--th-dpage); }
/* focus rings */
html.dn.dark input:focus, html.dn.dark select:focus, html.dn.dark textarea:focus { border-color:var(--th-daccent); box-shadow:0 0 0 3px rgba(var(--th-daccent-rgb), .22); }
/* Referrals / Scheduled use the My day row (re-test, Oct 22); the tick does nothing on these lists, so it is hidden */
html.dn main.dnp-referrals .dnr-rows .row .n { visibility:hidden; }

/* Emails waiting for a reply (Nov 9; web/js/email-replies.js): My day and the manager Overview */
.er-box { margin:12px 0 16px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); }
.er-h { display:flex; flex-direction:column; gap:2px; margin-bottom:8px; }
.er-h h3 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0; font-size:15px; }
.er-n { font-size:12px; font-weight:700; padding:1px 8px; border-radius:999px; background:var(--line2); }
.er-chip { display:inline-flex; align-items:center; font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--line2); color:var(--ink2); white-space:nowrap; }
.er-chip.late { background:#FDECEA; color:#A1281B; }
.er-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.er-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:8px 10px; border:1px solid var(--line2); border-radius:10px; }
.er-row.late { border-color:#F4C7C1; }
.er-main { display:flex; flex-direction:column; flex:1 1 260px; min-width:0; }
.er-subj { font-weight:600; overflow-wrap:anywhere; }
.er-nr { min-height:36px; }
.er-people { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 8px; }
.er-p { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border:1px solid var(--line2); border-radius:999px; font-size:13px; }
.er-all, .er-set { margin-top:8px; } .er-all summary, .er-set summary { cursor:pointer; font-weight:600; min-height:32px; }
.er-form { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; padding-top:6px; }
.er-form label { display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color:var(--muted); }
.er-form .er-tog { flex-direction:row; align-items:center; gap:6px; color:var(--ink); }
.er-form select { min-height:36px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; font:inherit; background:var(--card); color:var(--ink); }
@media (max-width: 640px) { .er-row { align-items:flex-start; } .er-nr { width:100%; } }
.er-p { cursor:pointer; background:var(--card); color:var(--ink); font:inherit; min-height:36px; }
.er-p.on, .er-p:hover { border-color:var(--ink2); }
/* Recerts (Nov 9; web/js/recerts.js): the Medicaid team's page and the My day box */
.rc-banner { display:flex; gap:8px; align-items:flex-start; margin:8px 0 12px; padding:10px 12px; border-radius:10px; background:var(--line2); color:var(--ink2); font-size:13.5px; }
.rc-tabs { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 10px; }
.rc-tab { min-height:36px; padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink); font:inherit; cursor:pointer; }
.rc-tab.on { border-color:var(--ink2); font-weight:700; }
.rc-n { font-size:12px; font-weight:700; padding:1px 7px; border-radius:999px; background:var(--line2); }
.rc-table { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); }
.rc-tr { display:grid; grid-template-columns:1.6fr 1fr 1.1fr 1fr .8fr 1.6fr; gap:8px; align-items:center; padding:10px 12px; border-top:1px solid var(--line2); font-size:13.5px; }
.rc-th { border-top:0; font-size:12px; font-weight:700; color:var(--muted); background:var(--page); }
.rc-when { font-weight:700; } .rc-when.this { color:#b3541e; }
.rc-act { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.rc-by, .rc-mine { font-size:12.5px; font-weight:600; color:var(--ink2); }
.rc-re { display:flex; flex-direction:column; gap:2px; } .rc-re select { min-height:32px; border:1px solid var(--line); border-radius:8px; font:inherit; background:var(--card); color:var(--ink); }
.rc-box { margin:12px 0 16px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); }
.rc-h { display:flex; flex-direction:column; gap:2px; margin-bottom:8px; } .rc-h h3 { display:flex; align-items:center; gap:8px; margin:0; font-size:15px; }
.rc-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.rc-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:8px 10px; border:1px solid var(--line2); border-radius:10px; }
.rc-main { display:flex; flex-direction:column; flex:1 1 240px; min-width:0; } .rc-subj { font-weight:600; }
.rc-chip { font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--line2); color:var(--ink2); white-space:nowrap; } .rc-chip.now { background:#FDECEA; color:#A1281B; }
@media (max-width: 900px) { .rc-th { display:none; } .rc-tr { grid-template-columns:1fr 1fr; } .rc-tr > :first-child, .rc-act { grid-column:1 / -1; } }

/* New design, phone (390 wide; mockups p-myday, p-case, p-problems, p-report, p-signin2 on branch design/portal-figma).
   CSS only, every rule under html.dn and inside the phone width, so today's look and the desktop new design do not move.
   The side menu becomes a bottom tab bar, list rows become cards with the coloured left edge, the case window fills the
   screen. Behaviour is unchanged: the same buttons, in the same places in the page. */
@media (max-width: 600px) {
  /* bottom tab bar: the same menu buttons, icon over label, scrolling sideways when there are more than fit */
  html.dn .shell { flex-direction:column; }
  html.dn .side { position:fixed; left:0; right:0; bottom:0; top:auto; z-index:9; height:auto; flex:none; flex-direction:row; flex-wrap:nowrap;
    gap:0; padding:0 0 env(safe-area-inset-bottom); background:#fff; border-right:0; border-top:1px solid var(--line); box-shadow:0 -6px 18px rgba(var(--th-ink-rgb), .06); overflow:visible; }
  html.dn .side .logo, html.dn .side .side-eyebrow, html.dn .side .navlabel, html.dn .side .navsep, html.dn .side .aipulse,
  html.dn .side .stats, html.dn .side .foot, html.dn .side .me { display:none; }
  html.dn .side nav { order:0; display:flex; flex-direction:row; flex-wrap:nowrap; width:100%; gap:2px; padding:6px 6px 4px; overflow-x:auto; scrollbar-width:none; }
  html.dn .side nav::-webkit-scrollbar { display:none; }
  html.dn .side nav button { flex:0 0 auto; min-width:70px; height:auto; min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; padding:4px 8px; font-size:11px; font-weight:600; line-height:1.15; color:var(--muted); border-radius:12px; white-space:nowrap; position:relative; }
  html.dn .side nav button .ic { width:22px; height:22px; color:inherit; }
  html.dn .side nav button:hover { background:transparent; }
  html.dn .side nav button[aria-pressed=true] { background:transparent; color:var(--th-accent3); font-weight:700; }
  html.dn .side nav button[aria-pressed=true] .ic { color:var(--th-accent2); }
  html.dn .side nav button[aria-pressed=true]::before { display:none; }
  html.dn .side nav .pill { position:absolute; top:2px; left:calc(50% + 6px); min-width:16px; padding:0 4px; border-radius:999px; background:#B42318; color:#fff;
    font-size:10px; line-height:16px; text-align:center; }
  html.dn .side nav button[aria-pressed=true] .pill { background:#B42318; color:#fff; }

  /* the top bar stays (search, sign out, bell), quieter; the page leaves room for the tab bar */
  html.dn .topbar { padding:10px 16px; gap:8px; }
  html.dn .topbar .crumb { display:none; }
  html.dn main { padding:16px 16px 96px; }
  html.dn .head { padding:0; margin-bottom:14px; gap:12px; flex-wrap:wrap; }
  html.dn .head h1, html.dn .ov-head h1 { font-size:22px; line-height:1.2; }
  html.dn .head .eyebrow { font-size:12px; letter-spacing:.02em; text-transform:none; }
  html.dn .head .tools { width:100%; display:flex; flex-wrap:wrap; gap:8px; }
  html.dn .head .tools > select { flex:1 1 140px; min-height:44px; }

  /* My day: "Start calling" floats above the tab bar, full width, as in the mockup */
  html.dn .head .sq-btn { position:fixed; left:16px; right:16px; bottom:calc(72px + env(safe-area-inset-bottom)); z-index:8; justify-content:center;
    min-height:52px; border-radius:14px; box-shadow:0 8px 24px rgba(var(--th-accent2-rgb), .32); }
  html.dn main:has(.head .sq-btn) { padding-bottom:164px; animation:none; transform:none; }
  html.dn main > .head:has(.sq-btn) { animation:none; transform:none; }   /* a moving parent would hold the fixed button inside it */

  /* rows become cards: white, rounded, the 4px status edge on the left, a gap between them */
  html.dn .list { background:transparent; border:0; border-radius:0; overflow:visible; }
  html.dn .list > .row { background:#fff; border:1px solid var(--line); border-radius:14px; margin:0 0 12px; overflow:hidden; padding:14px 14px 14px 18px;
    grid-template-columns:24px minmax(0,1fr); column-gap:10px; }
  html.dn .list > .row::before { border-radius:0; }
  html.dn .list > .row:hover { background:#fff; }
  html.dn .list > .row.done { background:#fff; }
  html.dn .row .who { font-size:16px; font-weight:700; }
  html.dn .row .what { font-size:15px; line-height:1.4; }
  html.dn .row .act { display:flex; flex-wrap:wrap; gap:8px; width:100%; }
  html.dn .row .act .btn { flex:1 1 auto; min-height:44px; justify-content:center; }
  html.dn .row .act .btn.primary { flex:1 1 100%; }
  html.dn .sec { margin:18px 2px 10px; font-size:12px; }
  /* the new three-column row (.dnr, dn-myday.css) stacks: who, then what to do, then the call buttons full width */
  html.dn .list > .row.dnr { flex-wrap:wrap; gap:10px; }
  html.dn .list > .row.dnr .dnr-who { width:100%; flex:1 1 100%; }
  html.dn .list > .row.dnr .do { flex:1 1 100%; }
  html.dn .list > .row.dnr .act { width:100%; flex:1 1 100%; align-items:stretch; }
  html.dn .list > .row.dnr .act .ph { align-items:stretch; }
  html.dn .list > .row.dnr .act .ph .sub { text-align:left; }
  html.dn .list > .row.dnr .actbtns { width:100%; gap:8px; }
  html.dn .list > .row.dnr .actbtns .btn { flex:1 1 0; height:44px; justify-content:center; font-size:14px; }
  html.dn .list > .row.dnr .act .ph > a, html.dn .list > .row.dnr .act .ph > .btn { min-height:44px; justify-content:center; }
  html.dn .list > .row.dnr .dnr-note { padding-right:10px; }
  html.dn .list > .row.dnr .dnr-note > details.rmore > summary { position:static; margin-top:6px; }

  /* the progress card and chips: tighter, chips scroll sideways rather than stacking five lines */
  html.dn .dayprog { padding:16px; border-radius:16px; }
  html.dn .dp-chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  html.dn .dp-chips::-webkit-scrollbar { display:none; }
  html.dn .dp-chip { flex:0 0 auto; white-space:nowrap; }
  /* the new progress card (dnp): "0 of 1314 done today" on one line with "1314 left" on the right, the cutoffs as two small
     boxes side by side under it, chips in one sideways row */
  html.dn .dnp-top { display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:stretch; }
  html.dn .dnp-top .dp-n { grid-column:1 / -1; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 6px; font-size:15px; }
  html.dn .dnp-top .dp-n b { font-size:28px; line-height:1; }
  html.dn .dnp-top .dnp-left { margin-left:auto; }
  html.dn .dnp-cut { min-width:0; padding:8px 10px; text-align:left; }
  html.dn .dnp-cut b { font-size:13px; white-space:nowrap; }
  html.dn .dp-chips .vsep { display:none; }

  /* tabs and filter chips scroll sideways */
  html.dn .tabs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  html.dn .tabs::-webkit-scrollbar { display:none; }
  html.dn .tabs button { flex:0 0 auto; white-space:nowrap; }
  html.dn .pb-reasons, html.dn .filterbar { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  html.dn .pb-reasons::-webkit-scrollbar, html.dn .filterbar::-webkit-scrollbar { display:none; }
  html.dn .pb-reason { flex:0 0 auto; white-space:nowrap; border-radius:12px; }

  /* cards of numbers (Report, Overview): two a row, as in p-report */
  html.dn .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  html.dn .kpi { padding:14px; border-radius:16px; }

  /* wide tables keep their columns and scroll sideways inside their card */
  html.dn main .panel { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:16px; }
  html.dn main .panel table { min-width:100%; }
  /* "How to use this page" and "This tab answers…": two lines on a phone, the whole text on a tap (design review, Oct 22);
     the wording is unchanged */
  html.dn main .howto, html.dn main:has(#rpList) #out > .banner { display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    overflow:hidden; font-size:12px !important; line-height:18px !important; cursor:pointer; }
  /* exactly two lines: the bottom space is a transparent border, which the clipping does not show text in (padding would) */
  html.dn main .howto { box-sizing:border-box; padding:8px 12px 0 !important; border:0 !important; border-bottom:8px solid transparent !important; max-height:52px; }
  html.dn main .howto > *, html.dn main:has(#rpList) #out > .banner > div { display:inline; }
  html.dn main .howto.dn-howto .k { display:none; }
  html.dn main .howto:hover, html.dn main .howto:active, html.dn main:has(#rpList) #out > .banner:hover, html.dn main:has(#rpList) #out > .banner:active { -webkit-line-clamp:unset; max-height:none; }
  html.dn .who-help table { min-width:620px; }   /* keep its columns readable; the card scrolls sideways */
  html.dn .who-help td, html.dn .who-help th { padding:10px 12px; white-space:nowrap; }
  html.dn .who-help .wh-acts { flex-wrap:nowrap; }

  /* the case window fills the screen; its log buttons stay at the bottom, above the safe area */
  html.dn .sheet { background:var(--page); z-index:80; }   /* above the tab bar and My day's open filter menu (z 60) */
  html.dn .sheet .box, html.dn .sheet .box.wide { width:100%; max-width:none; height:100%; border-radius:0; box-shadow:none; padding:16px 16px 0; background:var(--page); }
  html.dn .sheet .box > .actions { bottom:0; margin:auto -16px 0; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line); }
  html.dn .sheet .box > .actions .btn { flex:1 1 0; min-height:52px; justify-content:center; }
  html.dn .sheet .dtabs { top:-16px; background:var(--page); }
  html.dn .sheet h3 { font-size:22px; }
  html.dn .sheet-lite { left:12px; right:12px; bottom:calc(80px + env(safe-area-inset-bottom)); width:auto; max-height:72vh; }

  /* Help: the guide's sections as one line above the text that scrolls sideways (the sticky box sat on top of the text) */
  html.dn main.dnp-help .dnh > .dnh-toc { position:static; flex:1 1 100%; max-width:100%; flex-direction:row; overflow-x:auto; scrollbar-width:none; padding:6px; }
  html.dn main.dnp-help .dnh-toc::-webkit-scrollbar { display:none; }
  html.dn main.dnp-help .dnh-toc button { flex:0 0 auto; white-space:nowrap; }

  /* sign in: the new sign-in card (dn-pages.css) already has the phone shapes; nothing extra here (the shapes stay as they are) */
}

/* Phone pass (design lead, Oct 27): every tap target 44 px or more, and the log form's Save always within the thumb's reach */
@media (max-width: 600px) {
  /* Log a call: Cancel / Save stay at the bottom of the screen while the form scrolls (Save was 1,171 px down on a 780 px phone) */
  html.dn .sheet .box.dnlog #logActions, .sheet .box #logActions { position:sticky; bottom:0; z-index:3; margin:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--card, #fff); border-top:1px solid var(--line); box-shadow:0 -8px 20px rgba(var(--th-ink-rgb), .08); border-radius:0 0 16px 16px; }
  #logActions .btn { min-height:48px; flex:1; }
  /* inputs and small buttons to 44 px */
  #tbQ, #qNote, #hxQ, #fuDate, .dnlog input[type=date], .dnlog input[type=text], .dnlog select { min-height:44px; }
  .wn-x, #closeD, .v6-tick { min-width:44px; min-height:44px; }
  #v6All { display:inline-flex; align-items:center; min-height:44px; min-width:44px; padding:0 6px; }
  /* checkboxes: a bigger box, and the whole line is the target */
  input.tick, #qHha, #toHha { width:22px; height:22px; }
  label.check, label:has(> #qHha), label:has(> input.tick) { display:inline-flex; align-items:center; gap:10px; min-height:44px; }
}
/* the row's Done box: the label around it is the 44 px target (phone pass, Oct 27) */
label.tick-hit { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
@media (max-width: 600px) { label.tick-hit { min-width:44px; min-height:44px; margin:-12px; } }

/* Bento (owner, Oct 23; design/bento on branch design/portal-figma): one rounded app card on a warm glow, a pill menu on top for
   the main pages, a round icon rail on the left for the rest, white 28px tiles with one orange hero and one dark tile per page.
   A preview: html.bento is set only when a manager ticks it in My account (this computer). It sits on top of html.dn, so
   anything not written here keeps the new design. The shell, the tokens and dark mode are here; the pages are in bento-*.css. */
html.bento {
  --b-bg:var(--th-soft2); --b-app:var(--th-tint); --b-glow1:var(--th-tint); --b-glow2:var(--th-tint);
  --b-tile:#FFFFFF; --b-r-tile:28px; --b-r-app:32px; --b-tile-shadow:0 1px 2px rgba(var(--th-ink-rgb), .04);
  --b-hero:var(--th-hero); --b-hero-ink:#FFFFFF; --b-hero-sub:rgba(255,255,255,.85);
  --b-dark:var(--th-ink); --b-dark-ink:var(--th-soft2); --b-dark-sub:var(--th-line2); --b-dark-line:rgba(255,255,255,.08);
  --b-pill:#FFFFFF; --b-pill-ink:var(--th-text); --b-pill-on:var(--th-ink); --b-pill-on-ink:#FFFFFF; --b-soft:var(--th-soft); --b-round:var(--th-tint);
  --b-big:56px;
  --card:#FFFFFF; --page:var(--th-tint);
}
html.bento.dark {
  --b-bg:var(--th-dpage2); --b-app:var(--th-dpage2); --b-glow1:rgba(var(--th-daccent-rgb), .09); --b-glow2:rgba(216,58,46,.05);
  --b-tile:var(--th-dpage); --b-tile-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  --b-dark:var(--th-dcard); --b-dark-ink:var(--th-dtext); --b-dark-sub:var(--th-dmute);
  --b-pill:var(--th-dpage); --b-pill-ink:var(--th-dmute); --b-pill-on:var(--th-daccent); --b-pill-on-ink:var(--th-dpage); --b-soft:var(--th-dsoft); --b-round:var(--th-dsoft);
  --card:var(--th-dpage); --page:var(--th-dpage2);
}
html.bento body { background:var(--b-bg); }

/* the app card: the top bar across, the icon rail on the left, the page on the right */
html.bento .shell { display:grid; grid-template-columns:60px minmax(0,1fr); grid-template-rows:auto 1fr; gap:18px 24px; margin:16px; padding:18px 26px 28px 22px;
  min-height:calc(100vh - 32px); border-radius:var(--b-r-app); background-color:var(--b-app);
  background-image:radial-gradient(700px 420px at 0% 0%, var(--b-glow1) 0%, transparent 70%), radial-gradient(600px 400px at 100% 0%, var(--b-glow2) 0%, transparent 70%);
  background-repeat:no-repeat; box-shadow:0 30px 80px rgba(var(--th-panel4-rgb), .12); }
html.bento.dark .shell { box-shadow:0 30px 80px rgba(0,0,0,.5); }
html.bento .page { grid-column:2; grid-row:2; min-width:0; }
html.bento main { padding:0 0 24px; max-width:none; width:100%; }

/* top bar: the logo pill, the page pills in the middle, round buttons and the avatar on the right */
html.bento .topbar { grid-column:1 / -1; grid-row:1; position:sticky; top:12px; z-index:20; display:flex; align-items:center; gap:12px; padding:0; margin:0;
  background:transparent; border:0; backdrop-filter:none; }
html.bento .topbar .crumb { display:none; }
html.bento .topbar .logo { display:flex; align-items:center; height:48px; padding:0 18px 0 14px; border-radius:99px; background:var(--b-pill); box-shadow:0 1px 2px rgba(var(--th-ink-rgb), .06); border:0; margin:0; flex:none; }
html.bento .topbar .logo img { height:30px; width:auto; display:block; }
/* dark: the logo keeps its own colours on a warm cream chip (owner, Oct 23: the dark logo looked bad) */
html.bento.dark .topbar .logo { background:var(--th-dtext); box-shadow:none; }
/* the normal logo on the light chip, named outright (owner, Oct 27: unreadable in dark; "content:none" here showed no picture
   in Safari, and the old dark logo is light-on-light on the chip) */
html.bento.dark .topbar .logo img { content:url('/img/logo.png'); filter:none; opacity:1; }
html.bento .b-pills { display:flex; gap:2px; padding:4px; border-radius:99px; background:var(--b-pill); box-shadow:0 1px 2px rgba(var(--th-ink-rgb), .06); margin:0 auto; min-width:0; overflow-x:auto; scrollbar-width:none; }
html.bento .b-pills::-webkit-scrollbar { display:none; }
html.bento .b-pills button { display:flex; align-items:center; gap:6px; height:40px; padding:0 16px; border:0; border-radius:99px; background:transparent; color:var(--b-pill-ink);
  font:600 13px 'Plus Jakarta Sans', system-ui, sans-serif; white-space:nowrap; cursor:pointer; box-shadow:none; }
html.bento .b-pills button svg { display:none; }
html.bento .b-pills button:hover { background:var(--b-soft); color:var(--ink); }
html.bento .b-pills button[aria-pressed=true] { background:var(--b-pill-on); color:var(--b-pill-on-ink); }
html.bento .b-pills button[hidden] { display:none; }
html.bento .b-pills .pill { font-size:11px; font-weight:800; padding:0 6px; border-radius:99px; background:#FDEDEA; color:#B42318; line-height:18px; margin:0; }
html.bento .b-pills button[aria-pressed=true] .pill { background:#FDEDEA; color:#B42318; }
html.bento .tb-search { height:44px; width:200px; border:0; border-radius:99px; background:var(--b-pill); box-shadow:0 1px 2px rgba(var(--th-ink-rgb), .06); transition:width .2s ease; flex:none; }
html.bento .tb-search:focus-within { width:360px; box-shadow:0 0 0 3px rgba(var(--th-accent-rgb), .25); }
html.bento .tb-search input { background:transparent; }
html.bento .tb-right { display:flex; align-items:center; gap:10px; margin-left:0; flex:none; }
html.bento .tb-right > .btn, html.bento .tb-right .bell, html.bento .tb-right #bellSlot > button { width:44px; height:44px; min-height:0; padding:0; border:0; border-radius:99px; background:var(--b-pill);
  color:var(--b-pill-ink); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 1px 2px rgba(var(--th-ink-rgb), .06); }
html.bento .tb-right > .btn span { display:none; }
html.bento .tb-right > .btn.focus-btn[aria-pressed=true] { background:var(--b-pill-on); color:var(--b-pill-on-ink); }
html.bento .tb-right #bellSlot { display:flex; gap:10px; }
/* the avatar (the name is its tooltip; sign out is the round button next to it) */
html.bento .tb-right .me { display:flex; align-items:center; padding:0; background:none; border:0; }
html.bento .tb-right .me > span > span:not(.av), html.bento .tb-right .me > button { display:none; }
html.bento .tb-right .me .av { width:44px; height:44px; font-size:14px; font-weight:800; background:#1C3462; color:#fff; }

/* the icon rail: AI, Cottage Helper, Rate sheet, Users, Help, My account; light / dark at the bottom */
html.bento .side { grid-column:1; grid-row:2; position:sticky; top:84px; align-self:start; width:60px; height:auto; min-height:calc(100vh - 150px); flex:none;
  padding:10px 0; margin:0; border:0; border-radius:99px; background:var(--b-pill); box-shadow:0 1px 2px rgba(var(--th-ink-rgb), .06);
  display:flex; flex-direction:column; align-items:center; gap:8px; overflow:visible; }
html.bento .side .side-eyebrow, html.bento .side .stats, html.bento .side .foot { display:none; }
html.bento .side nav { display:flex; flex-direction:column; align-items:center; gap:8px; }
html.bento .side nav button { position:relative; width:44px; height:44px; padding:0; border:0; border-radius:99px; background:var(--b-round); color:var(--b-pill-ink);
  display:flex; align-items:center; justify-content:center; box-shadow:none; }
html.bento .side nav button > span:not(.pill) { display:none; }
html.bento .side nav button .ic, html.bento .side nav button svg { color:inherit; margin:0; }
html.bento .side nav button:hover { background:var(--b-soft); color:var(--ink); }
html.bento .side nav button[aria-pressed=true] { background:var(--b-pill-on); color:var(--b-pill-on-ink); font-weight:700; }
html.bento .side nav button[aria-pressed=true] .ic { color:var(--b-pill-on-ink); }
html.bento .side nav button .pill { position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 4px; border-radius:99px; background:#D83A2E; color:#fff;
  font-size:10px; font-weight:800; line-height:18px; text-align:center; }
/* the count stays a red dot above the button, on the page you are on too (owner, Oct 23: on Users it hid behind the dark circle) */
html.bento .side nav button .pill, html.bento .side nav button[aria-pressed=true] .pill, html.bento.dark .side nav button[aria-pressed=true] .pill {
  background:#D83A2E; color:#fff; z-index:2; box-shadow:0 0 0 2px var(--b-pill); }
/* the page name beside a rail button: on hover and for the page you are on */
html.bento .side nav button::after { content:attr(aria-label); position:absolute; left:52px; top:50%; transform:translateY(-50%); white-space:nowrap; pointer-events:none;
  font:700 12px 'Plus Jakarta Sans', system-ui, sans-serif; background:var(--th-ink); color:#fff; padding:5px 10px; border-radius:99px; opacity:0; transition:opacity .15s; z-index:30; }
html.bento .side nav button:hover::after, html.bento .side nav button:focus-visible::after { opacity:1; }
html.bento .side .navsep { width:24px; height:1px; margin:4px 0; background:var(--line); }
html.bento .side .aipulse { width:44px; height:44px; padding:0; margin:0; border:0; border-radius:99px; background:var(--b-round); display:flex; align-items:center; justify-content:center; order:-1; cursor:pointer; }
html.bento .side .aipulse > span:not(.dot) { display:none; }
html.bento .b-rail-foot { margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:8px; }
html.bento .b-rail-foot .tb-theme { width:44px; height:44px; padding:0; border:0; border-radius:99px; background:var(--b-pill-on); color:var(--b-pill-on-ink); display:flex; align-items:center; justify-content:center; }

/* every page: a big light title, tiles instead of bordered cards, pill buttons and pill tabs */
html.bento main .head h1, html.bento main .ov-head h1 { font-size:34px; line-height:42px; font-weight:600; letter-spacing:-.6px; }
html.bento main .panel, html.bento main .card, html.bento main .list, html.bento main .dayprog, html.bento main .kpi, html.bento main .tile, html.bento .sheet .panel {
  border:0; border-radius:var(--b-r-tile); background:var(--b-tile); box-shadow:var(--b-tile-shadow); }
html.bento .btn { border-radius:99px; }
html.bento .btn.primary { background:var(--th-ink); border-color:var(--th-ink); color:#fff; }
html.bento .btn.primary:hover { background:#000; border-color:#000; }
html.bento.dark .btn.primary { background:var(--th-daccent); border-color:var(--th-daccent); color:var(--th-dpage); }
html.bento .tag { border-radius:99px; }
html.bento .tabs { display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; border:0; border-radius:99px; background:var(--b-soft); width:auto; max-width:100%; }
html.bento .tabs button { height:34px; padding:0 14px; border:0; border-radius:99px; margin:0; color:var(--ink2); font-weight:600; }
html.bento .tabs button[aria-selected=true] { background:var(--b-pill-on); color:var(--b-pill-on-ink); border:0; }
html.bento .tabs button .tab-n, html.bento .tabs button[aria-selected=true] .tab-n { background:transparent; color:inherit; opacity:.8; }
/* the shared bento pieces the pages can use: the orange hero tile, the dark tile, a big number */
html.bento .b-hero { background:var(--b-hero); color:var(--b-hero-ink); }
html.bento .b-hero h2, html.bento .b-hero h3, html.bento .b-hero b, html.bento .b-hero .k, html.bento .b-hero .big, html.bento .b-hero .num { color:var(--b-hero-ink); }
html.bento .b-hero .sub, html.bento .b-hero .muted, html.bento .b-hero small { color:var(--b-hero-sub); }
html.bento .b-dark { background:var(--b-dark); color:var(--b-dark-ink); }
html.bento .b-dark h2, html.bento .b-dark h3, html.bento .b-dark b, html.bento .b-dark .big, html.bento .b-dark .num { color:#fff; }
html.bento .b-dark .sub, html.bento .b-dark .muted, html.bento .b-dark small { color:var(--b-dark-sub); }
html.bento .b-big { font-size:var(--b-big); line-height:1.05; font-weight:600; letter-spacing:-1.5px; font-variant-numeric:tabular-nums; }

/* smaller screens (the phone layout itself is in bento-phone.css): the rail turns into a row under the top bar */
@media (max-width: 600px) {   /* a phone only: at half a screen the rail stays a slim column (Oct 23) */
  html.bento .shell { display:flex; flex-direction:column; margin:0; padding:12px; border-radius:0; gap:12px; min-height:100vh; }
  html.bento .topbar { position:static; flex-wrap:wrap; }
  html.bento .b-pills { order:5; width:100%; margin:0; }
  html.bento .tb-search { flex:1 1 auto; width:auto; min-width:0; }
  html.bento .tb-search:focus-within { width:auto; }
  html.bento .side { position:static; width:auto; min-height:0; flex-direction:row; flex-wrap:wrap; justify-content:center; border-radius:99px; }
  html.bento .side nav { flex-direction:row; flex-wrap:wrap; justify-content:center; }
  html.bento .side nav button::after { display:none; }
  html.bento .b-rail-foot { margin:0; flex-direction:row; }
}

/* Owner, Oct 23 ("the dark mode doesn't look good; on hover the left menu text goes behind the designs"). */
/* the rail and its page-name labels sit above the page's tiles */
html.bento .side { z-index:25; }
html.bento .side nav button::after { z-index:40; box-shadow:0 6px 18px rgba(var(--th-ink-rgb), .18); }
html.bento.dark .side nav button::after { background:var(--th-dtext); color:var(--th-dpage); }
/* dark: every light-mode colour (!important: the page files carry ids for weight) that was left dark on dark (found by a contrast check on every page) */
html.bento.dark main:not(#_b) .sec, html.bento.dark main:not(#_b) .sec abbr { color:var(--ink2) !important; }
html.bento.dark main:not(#_b) .card .l, html.bento.dark main:not(#_b) .pb-reason, html.bento.dark main:not(#_b) .pb-reason b, html.bento.dark main:not(#_b) .pb-reason abbr { color:var(--ink) !important; }
html.bento.dark main:not(#_b) .late, html.bento.dark main:not(#_b) .bad, html.bento.dark main:not(#_b) .hot, html.bento.dark main:not(#_b) .pb-reason.b-late b { color:#FF8A7A !important; }
html.bento.dark main:not(#_b) .pb-check .ok, html.bento.dark main:not(#_b) .pb-reason.b-ok b, html.bento.dark main:not(#_b) .kpi.good .kpi-n { color:#6FCF97 !important; }
html.bento.dark main:not(#_b) tr.hot, html.bento.dark main:not(#_b) tr.hot > td { background:rgba(255,138,122,.08); }
html.bento.dark main:not(#_b) .tabs button[aria-selected=true] { color:var(--b-pill-on-ink) !important; }
html.bento.dark .bell .badge { color:var(--th-dpage); }
html.bento .sb-step.on em { color:#FF8A7A; }
/* the top bar keeps the app's colour while the page scrolls under it (rows no longer show through the menu) */
html.bento .topbar { top:0; padding:10px 0; margin:-10px 0; background:transparent; border-radius:0 0 22px 22px; transition:background-color .2s, box-shadow .2s; }
/* only once the page has scrolled (at the top it sat as a flat box on the warm glow, owner Oct 23) */
html.bento.b-scrolled .topbar { background:color-mix(in srgb, var(--b-app) 88%, transparent); backdrop-filter:blur(12px); box-shadow:0 8px 20px -14px rgba(var(--th-ink-rgb), .35); }
/* the status beside the name, GCR ID and Medicaid on every list (owner, Oct 23) */
.st-tag { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:99px; background:var(--b-soft, var(--th-soft)); color:var(--ink2); font-size:12px; font-weight:600; white-space:nowrap; margin-top:3px; }
.st-tag .sdot { width:7px; height:7px; border-radius:50%; flex:none; }
html.bento .dnr-st { margin-top:4px; } html.bento .dnr-st .dn-st { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
/* design chat's live check (Oct 23) */
/* 1. a table never loses its right-hand columns: the tile scrolls sideways instead of clipping (round corners still clip) */
html.bento main .panel:has(table), html.bento main .pb-table, html.bento main .card:has(> table) { overflow-x:auto !important; overflow-y:hidden; }
/* 2. the case window: one solid backing behind its tiles, so the page does not show through the gaps */
html.bento .sheet .box.b-case:not(.b-load) { background:var(--th-soft) !important; padding:12px !important; border-radius:var(--b-r-app) !important; box-shadow:0 24px 60px rgba(var(--th-ink-rgb), .22) !important; }
html.bento.dark .sheet .box.b-case:not(.b-load) { background:var(--th-dpage2) !important; box-shadow:0 24px 60px rgba(0,0,0,.6) !important; }
html.bento .sheet:has(> .b-case) { backdrop-filter:blur(3px); }
/* 3. "Spoke with them" wraps instead of being cut; in dark the chosen tab is the light pill everywhere (count readable) */
html.bento .b-case .b-log .dn-callbar .btn.dn-cb { white-space:normal; text-align:left; line-height:1.25; }
html.bento .b-case .b-log .dn-callbar .btn.dn-cb * { white-space:normal; overflow:visible; text-overflow:clip; }
html.bento.dark main .tabs button[aria-selected=true], html.bento.dark .b-case .dtabs button[role=tab][aria-selected=true] { background:var(--th-dtext) !important; color:var(--th-dpage) !important; }
html.bento.dark main .tabs button[aria-selected=true] .tab-n, html.bento.dark .b-case .dtabs button[aria-selected=true] .tab-n { color:var(--th-dpage) !important; background:transparent !important; }
/* 5. the Overview's date line is the same small upper-case kicker as the other pages */
html.bento main .ov-eyebrow { font-size:12px; line-height:16px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
/* sortable table headers (New cases today, owner Oct 23): click for A to Z, again for Z to A */
.th-sort { cursor:pointer; user-select:none; white-space:nowrap; }
.th-sort::after { content:'↕'; margin-left:6px; opacity:.35; font-size:11px; }
.th-sort:hover { color:var(--ink); }
.th-sort[aria-sort=ascending]::after { content:'↑'; opacity:1; color:var(--orange, var(--th-accent2)); }
.th-sort[aria-sort=descending]::after { content:'↓'; opacity:1; color:var(--orange, var(--th-accent2)); }

/* Half a screen (owner, Oct 23: most coordinators use the portal in half a screen, 720-960 wide) */
@media (min-width: 601px) and (max-width: 1240px) {
  /* the menu pills get their own row under the logo, search and buttons, so none is hidden behind the search */
  html.bento .topbar { flex-wrap:wrap; row-gap:10px; }
  html.bento .b-pills { order:5; flex:1 1 100%; margin:0; justify-content:flex-start; }
  html.bento .tb-search { margin-left:auto; flex:1 1 160px; max-width:320px; width:auto; min-width:0; }
  html.bento .tb-search:focus-within { max-width:420px; width:auto; }
  html.bento .tb-right { flex:none; gap:8px; }
  html.bento .topbar .logo { flex:none; }
  html.bento .shell { margin:10px; padding:14px 16px 20px 12px; gap:14px 16px; grid-template-columns:52px minmax(0,1fr); }
  html.bento .side { width:52px; padding:8px 0; top:128px; min-height:0; }
  html.bento .side nav button, html.bento .side .aipulse, html.bento .b-rail-foot .tb-theme { width:40px; height:40px; }
  html.bento.b-scrolled .topbar { margin:-10px -6px; padding:10px 6px; }
}
@media (min-width: 601px) and (max-width: 1100px) {
  /* My day / Referrals rows: who on the left, what to do on the right, then one action bar across the whole row */
  html.bento .list > .row.dnr { flex-wrap:wrap; align-items:flex-start; column-gap:16px; row-gap:10px; }
  html.bento .list > .dnr .dnr-who { width:auto; flex:0 0 236px; min-width:0; }
  html.bento .list > .dnr .dnr-st .spill.dn-st { height:auto; min-height:22px; white-space:normal; flex-wrap:wrap; }
  html.bento .list > .dnr .do { flex:1 1 280px; min-width:0; }
  html.bento .list > .dnr .act { flex:1 1 100%; width:100%; max-width:none; flex-wrap:wrap; justify-content:flex-end; }
  html.bento .list > .dnr .act .ph { width:auto; flex-wrap:nowrap; justify-content:flex-end; }
  html.bento .list > .dnr .act .ph > a.tel { flex:0 0 auto; }
  /* Today's list: the title on its own line, then the tabs and "All statuses" on one row (tabs scroll if they must) */
  html.bento .bmd-lh { flex-direction:column; align-items:stretch; }
  html.bento main[data-mdtab] .bmd-lh #mdControls { flex-wrap:nowrap; }
  html.bento main[data-mdtab] #mdControls .tabs { flex:1 1 auto; min-width:0; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  html.bento main[data-mdtab] #mdControls .filterbar { flex:none; margin-left:auto; white-space:nowrap; }
  /* Overview: the big tiles stay short, the due tag short and on one line; the coordinator's own list drops Owner */
  html.bento .b-ov-kpis .kpi { min-height:150px; padding:18px; }
  html.bento main .dn-due { white-space:nowrap; }
  html.bento main .due-l { display:none; }
  html.bento main .pc-own .c-owner { display:none; }
}
html.bento main .due-s { display:none; }
@media (min-width: 601px) and (max-width: 1100px) { html.bento main .due-s { display:inline; } }
/* the case window takes the whole window below 900 (no page peeking at the side) */
@media (min-width: 601px) and (max-width: 900px) {
  html.bento .sheet .box.b-case:not(.b-load) { width:100% !important; max-width:none; margin:0 !important; max-height:100% !important; height:100%; border-radius:0 !important; }
}
/* the status chip under the name is only as wide as its words (it looked like an empty select, Oct 23) */
html.bento .dnr-st { display:block; } html.bento .dnr .dnr-st .spill.dn-st { display:inline-flex; width:auto; max-width:100%; }
/* design check, Oct 23: the log buttons' labels wrap (no "…"); at half a screen the Overview's big tiles are short */
html.bento .b-case .dn-cb .dn-cb-l { white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }
@media (min-width: 601px) and (max-width: 1100px) {
  html.bento main .b-ov-kpis .kpi { min-height:150px !important; height:auto; justify-content:flex-start; gap:6px; }
  html.bento main .b-ov-kpis .kpi .kpi-n { margin-top:4px !important; }
}

/* the Medicaid recert month near (owner, Oct 23): this month or passed red, next month orange, in 2 months plain */
html .tag.t-recert.rc-now, html.bento main:not(#_b) .tag.t-recert.rc-now { background:#FDEDEA !important; color:#B42318 !important; font-weight:700; }
html .tag.t-recert.rc-next, html.bento main:not(#_b) .tag.t-recert.rc-next { background:var(--th-tint) !important; color:var(--th-accent3) !important; }
html .tag.t-recert.rc-soon, html.bento main:not(#_b) .tag.t-recert.rc-soon { background:#F5F0E9 !important; color:#4A433A !important; }
html.dark .tag.t-recert.rc-now, html.bento.dark main:not(#_b) .tag.t-recert.rc-now { background:#3A1D19 !important; color:#FF8A7A !important; }
html.dark .tag.t-recert.rc-next, html.bento.dark main:not(#_b) .tag.t-recert.rc-next { background:var(--th-daccent2) !important; color:var(--th-daccent) !important; }
html.dark .tag.t-recert.rc-soon, html.bento.dark main:not(#_b) .tag.t-recert.rc-soon { background:#29241F !important; color:#C9BFB2 !important; }

/* Bento: overview (see bento.css for the tokens and the shell; every rule under html.bento). Mockups: design/bento b-overview,
   b-overview-dark, b-t-overview-more. The bento-only markup (b-ov-*, b-tile) is added in web/js/overview.js. */

/* header: the big title on the left; the three numbers of the day, then Whole team and Refresh, on the right */
html.bento .ov-head { flex-wrap:wrap; gap:16px 24px; margin:4px 0 20px; }
html.bento .ov-head .btn, html.bento .ov-head select { border:0; border-radius:99px; background-color:var(--b-pill); box-shadow:0 1px 2px rgba(var(--th-ink-rgb), .06); height:40px; }
html.bento .b-ov-right { display:flex; flex-direction:column; align-items:flex-end; gap:12px; margin-left:auto; }
html.bento .b-ov-stats { display:flex; gap:36px; }
html.bento .b-ov-stat { display:flex; flex-direction:column; align-items:flex-start; gap:2px; border:0; background:none; padding:0; cursor:pointer; color:var(--ink); text-align:left; }
html.bento .b-ov-stat > .sub { font-size:13px; color:var(--ink2); }
html.bento .b-ov-sn { display:flex; align-items:center; gap:10px; }
html.bento .b-ov-sn b { font-size:44px; line-height:1.1; font-weight:500; letter-spacing:-1.2px; font-variant-numeric:tabular-nums; color:var(--ink); }
html.bento .b-ov-sn i { font-style:normal; font-size:11px; font-weight:800; height:40px; min-width:40px; padding:0 10px; border-radius:99px; display:inline-grid; place-items:center; background:var(--b-tile); color:var(--ink); }
html.bento .b-ov-sn i.ok { background:#1E9E5A; color:#fff; }
html.bento .b-ov-stat:hover b { color:var(--brand, var(--th-accent2)); }

/* the big tiles: label and a round icon on top, a big light number; Late is the orange hero */
html.bento .kpis.b-ov-kpis { gap:16px; margin:0 0 16px; }
html.bento .kpis.b-ov-kpis.b-prog { grid-template-columns:minmax(0,1.9fr) repeat(4,minmax(0,1fr)); }
html.bento .b-ov-kpis .kpi { border:0; border-radius:var(--b-r-tile); background:var(--b-tile); box-shadow:var(--b-tile-shadow); padding:22px; min-height:250px; gap:10px; }
html.bento .b-ov-kpis .kpi:hover { border:0; box-shadow:0 8px 24px rgba(var(--th-ink-rgb), .08); }
html.bento .b-ov-kpis .kpi.hot, html.bento .b-ov-kpis .kpi.urgent { box-shadow:var(--b-tile-shadow); }
html.bento .b-ov-kpis .kpi-top { align-items:flex-start; }
html.bento .b-ov-kpis .kpi-label { font-size:18px; line-height:24px; font-weight:600; color:var(--ink); }
html.bento .b-ov-kpis .kpi-icon { width:38px; height:38px; flex:none; border-radius:99px; background:var(--b-soft); color:var(--ink); display:grid; place-items:center; }
html.bento .b-ov-kpis .kpi-sub { font-size:13px; line-height:18px; color:var(--ink2); }
html.bento .b-ov-kpis .kpi-n, html.bento .b-ov-kpis .kpi.n-late .kpi-n, html.bento .b-ov-kpis .kpi.n-done .kpi-n, html.bento .b-ov-kpis .kpi.n-wait .kpi-n, html.bento .b-ov-kpis .kpi.n-brand .kpi-n {
  order:5; margin-top:auto; font-size:var(--b-big); line-height:1.05; font-weight:500; letter-spacing:-1.5px; color:var(--ink); font-variant-numeric:tabular-nums; }
html.bento .b-ov-kpis .kpi.n-wait .kpi-n { color:var(--amber); }
html.bento .b-ov-kpis .kpi-done { order:6; }
html.bento .b-ov-kpis .kpi-go { order:7; align-self:flex-start; height:34px; padding:0 14px; border-radius:99px; background:var(--b-soft); color:var(--ink); font-size:13px; font-weight:700; display:inline-flex; align-items:center; }
html.bento .b-ov-kpis .kpi.b-hero { background:var(--b-hero); }
html.bento .b-ov-kpis .kpi.b-hero .kpi-label, html.bento .b-ov-kpis .kpi.b-hero .kpi-n { color:var(--b-hero-ink); }
html.bento .b-ov-kpis .kpi.b-hero .kpi-sub { color:var(--b-hero-sub); order:4; margin-top:auto; }
html.bento .b-ov-kpis .kpi.b-hero .kpi-n { margin-top:0; font-size:72px; }
html.bento .b-ov-kpis .kpi.b-hero .kpi-icon { background:rgba(255,255,255,.22); color:#fff; }
html.bento .b-ov-kpis .kpi.b-hero .kpi-go { order:1; height:40px; padding:0 18px; background:#fff; color:var(--th-ink); }
html.bento .b-ov-kpis .kpi.b-hero:hover { box-shadow:0 10px 30px rgba(var(--th-accent2-rgb), .3); }

/* Today's progress: the percent, a half ring, and the coordinators with the most late */
html.bento .b-ov-kpis .b-ov-prog { cursor:pointer; text-align:left; }
html.bento .b-ov-pg { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:6px; }
html.bento .b-ov-pg > div { flex:1; min-width:0; }
html.bento .b-ov-pg .sub { font-size:13px; color:var(--ink2); }
html.bento .b-ov-pg .b-big { color:var(--ink); font-weight:500; margin:4px 0; }
html.bento .b-ov-gauge { width:min(190px,48%); flex:none; overflow:visible; }
html.bento .b-ov-gauge path { fill:none; stroke-width:16; stroke-linecap:round; }
html.bento .b-ov-gauge .g-bg { stroke:var(--b-soft); }
html.bento .b-ov-gauge .g-fg { stroke:var(--th-accent); }
html.bento .b-ov-who { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:auto; padding-top:10px; }
html.bento .b-ov-av { position:relative; display:inline-grid; place-items:center; width:44px; height:44px; border-radius:99px; border:1px dashed var(--line-strong, var(--th-line2)); }
html.bento .b-ov-av .av { width:34px; height:34px; font-size:12px; }
html.bento .b-ov-av i { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:99px; background:#D83A2E; color:#fff; font:800 10px/18px 'Plus Jakarta Sans', system-ui, sans-serif; text-align:center; }
html.bento .b-ov-behind { display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 10px; border-radius:99px; border:1px solid var(--line); margin-left:auto; min-width:0; }
html.bento .b-ov-behind > .ic { color:#D83A2E; flex:none; }
html.bento .b-ov-behind > span { display:flex; flex-direction:column; font-size:13px; line-height:17px; }
html.bento .b-ov-behind b { color:var(--ink); font-weight:700; }
html.bento .b-ov-behind .sub { font-size:12px; color:var(--ink2); }

/* More numbers and the other folds: a pill row; the small number tiles under it */
html.bento details.dn-fold > summary { border:0; border-radius:99px; background:var(--b-tile); box-shadow:var(--b-tile-shadow); padding:14px 22px; }
html.bento details.dn-fold > summary:hover { border:0; box-shadow:0 6px 18px rgba(var(--th-ink-rgb), .07); }
html.bento .dn-fold-go::after { display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:99px; background:var(--b-soft); color:var(--ink); }
html.bento .more-nums.dn-fold { margin:0 0 16px; }
html.bento .ov-fold-in .kpis.small { gap:12px; }
html.bento .kpis.small.dn-kpis .kpi { border:0; border-radius:var(--b-r-tile); background:var(--b-tile); box-shadow:var(--b-tile-shadow); padding:18px 20px; }
html.bento .kpis.small.dn-kpis .kpi.hot, html.bento .kpis.small.dn-kpis .kpi.urgent { border:0; box-shadow:var(--b-tile-shadow); }
html.bento .kpis.small.dn-kpis .kpi-label { font-size:13px; font-weight:600; }
html.bento .kpis.small.dn-kpis .kpi-n, html.bento .kpis.small.dn-kpis .kpi.hot .kpi-n { font-size:34px; line-height:40px; font-weight:500; letter-spacing:-.8px; margin:6px 0 2px; }
html.bento .dn-foldlabel { padding:6px 8px 10px; }

/* a section as one tile: its title inside, the card in it without its own frame */
html.bento .b-tile { background:var(--b-tile); border-radius:var(--b-r-tile); box-shadow:var(--b-tile-shadow); padding:22px 24px; margin:0 0 16px; min-width:0; }
html.bento .b-tile > .dn-sec { padding:0 0 14px; }
html.bento .b-tile > .dn-sec > b { font-size:20px; line-height:26px; font-weight:600; letter-spacing:-.2px; }
html.bento .b-tile > .dn-sec > .ic { display:none; }
html.bento .b-tile > .ov-card { background:transparent; border:0; border-radius:0; box-shadow:none; margin:0; }
html.bento .b-tile .ov-card table th { background:transparent; }
html.bento .b-ov-row { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:16px; margin:0 0 16px; align-items:stretch; }
html.bento .b-ov-row > .b-tile { margin:0; }

/* Priority cases: pill tabs, no lines around them */
html.bento .b-ov-pc .dn-pc-tabs { border-bottom:0; padding:0 0 10px; align-items:center; }
html.bento .b-ov-pc .dn-pc-tabs .tabs { flex:0 1 auto; padding:4px; }
html.bento .b-ov-pc .dn-pc-tabs .tabs button { height:34px; padding:0 14px; font-size:13px; }
html.bento .b-ov-pc .dn-pc-tabs .pc-count { padding:0; margin-left:auto; }
html.bento .b-ov-pc .pc-foot { background:transparent; padding:12px 0 0; }
html.bento .b-ov-pc .pc table td:first-child, html.bento .b-ov-pc .pc table th:first-child { padding-left:0; }
html.bento .b-ov-pc .pc tr.pc-row.open td, html.bento .b-ov-pc .pc tr.det td { background:var(--b-soft); }
html.bento .b-ov-pc .pc td.late .dn-due, html.bento .b-ov-pc .pc td.today .dn-due { min-width:0; height:26px; padding:0 10px; }
html.bento .b-ov-pc #pcMore { border-radius:99px; background:var(--b-soft); color:var(--ink); }

/* Needs a manager: the dark tile */
html.bento .b-tile.b-dark { background:var(--b-dark); color:var(--b-dark-ink); }
html.bento .b-dark > .dn-sec > b { color:#fff; }
html.bento .b-dark > .dn-sec > .sub { color:var(--b-dark-sub); }
html.bento .b-dark .dn-probs .prob { border-top:1px solid var(--b-dark-line); background:transparent; }
html.bento .b-dark .dn-probs .prob:first-child { border-top:1px solid var(--b-dark-line); }
html.bento .b-dark .dn-probs .prob summary { padding:14px 0; }
html.bento .b-dark .dn-probs .prob summary b { color:var(--b-dark-ink); font-weight:500; }
html.bento .b-dark .dn-pg .sub, html.bento .b-dark .dn-probs .prob-list > .sub { color:var(--b-dark-sub); }
html.bento .b-dark .dn-dot { background:var(--b-dark-sub); }
html.bento .b-dark .prob.late .dn-dot { background:#F2735F; } html.bento .b-dark .prob.wait .dn-dot { background:#F2B33D; }
html.bento .b-dark .dn-pn, html.bento .b-dark .prob.late .dn-pn, html.bento .b-dark .prob.wait .dn-pn { background:rgba(255,255,255,.1); color:#fff; min-width:26px; height:26px; }
html.bento .b-dark .dn-probs .prob summary > .ic { color:var(--b-dark-sub); }
html.bento .b-dark .dn-probs .prob-list { padding:0 0 12px 20px; }
html.bento .b-dark .dn-probs .prob-c, html.bento .b-dark .dn-probs .prob-c b { color:var(--th-peach); }

/* Follow-up by coordinator */
html.bento .b-ov-people .ov-card table td:first-child, html.bento .b-ov-people .ov-card table th:first-child { padding-left:8px; }
html.bento .b-ov-people .dn-bar { background:var(--b-soft); height:8px; }
html.bento .b-ov-people .dn-bar i { background:var(--th-accent); }
html.bento .b-ov-people tr.warnrow td:first-child { border-radius:14px 0 0 14px; } html.bento .b-ov-people tr.warnrow td:last-child { border-radius:0 14px 14px 0; }

/* every other card (in the folds, coordinators' sections): a tile */
html.bento main .ov-card { border:0; border-radius:var(--b-r-tile); background:var(--b-tile); box-shadow:var(--b-tile-shadow); }
html.bento main .ov-card:not(.dn-pc):not(.dn-people):not(.dn-probs):not(.nt-card):not(.dn-act) { padding:20px 22px; }
html.bento .ov-card.dn-act { padding:10px 22px; }
html.bento .dn-act .feed-ic { width:36px; height:36px; background:var(--b-soft); }
html.bento .dn-plans .plans { border:0; border-radius:var(--b-r-tile); background:var(--b-tile); }
html.bento .dn-plans .plan summary { padding:14px 22px; }
html.bento .dn-plans .plan-list { padding:4px 22px 14px; }
html.bento .dn-plans .plan.stale > summary { background:transparent; }
html.bento .sb-step { border:0; border-radius:20px; background:var(--b-soft); padding:14px 16px; }
html.bento .sb-step.on { background:var(--b-dark); box-shadow:none; }
html.bento .sb-step.on small { color:var(--b-dark-sub); } html.bento .sb-step.on b, html.bento .sb-step.on .sb-n { color:#fff; }
html.bento .sb-n { font-size:30px; line-height:36px; font-weight:500; }
html.bento .sb-list { border:0; }
html.bento .ov-row .ov-card { padding:20px 22px; }
html.bento .cutoff { border-radius:18px; background:var(--b-soft); }
html.bento .nt-card { border-radius:var(--b-r-tile); }
html.bento .nt-chip { border:0; border-radius:99px; background:var(--b-soft); }
html.bento .banner { border-radius:var(--b-r-tile); }
html.bento .ring-bg { stroke:var(--b-soft); } html.bento .ring-fg { stroke:var(--th-accent); }

/* dark */
html.bento.dark .b-ov-sn i:not(.ok) { background:var(--b-soft); }
html.bento.dark .b-ov-gauge .g-fg, html.bento.dark .ring-fg { stroke:var(--th-daccent); }
html.bento.dark .b-ov-kpis .kpi.b-hero .kpi-go { background:var(--th-dpage); color:#fff; }
html.bento.dark .b-dark .dn-pn { background:rgba(255,255,255,.08); }
html.bento.dark .b-tile.b-dark { box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }

/* narrower screens */
@media (max-width:1280px) {
  html.bento .kpis.b-ov-kpis.b-prog { grid-template-columns:repeat(4,minmax(0,1fr)); }
  html.bento .b-ov-kpis .b-ov-prog { grid-column:1 / -1; min-height:0; }
}
@media (max-width:1100px) {
  html.bento .b-ov-row { grid-template-columns:minmax(0,1fr); }
  html.bento .b-ov-right { align-items:flex-start; margin-left:0; }
}
@media (max-width:700px) {
  html.bento .kpis.b-ov-kpis, html.bento .kpis.b-ov-kpis.b-prog { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  html.bento .b-ov-kpis .kpi { min-height:180px; padding:18px; }
  html.bento .b-ov-kpis .kpi-label { font-size:15px; line-height:20px; }
  html.bento .b-ov-kpis .kpi-n, html.bento .b-ov-kpis .kpi.b-hero .kpi-n { font-size:44px; }
  html.bento .b-ov-stats { gap:18px; flex-wrap:wrap; }
  html.bento .b-ov-sn b { font-size:32px; }
  html.bento .b-ov-sn i { height:30px; min-width:30px; }
  html.bento .b-ov-behind { margin-left:0; }
  html.bento .b-tile { padding:18px 16px; }
  html.bento .b-ov-kpis .kpi-go, html.bento .b-ov-kpis .kpi.b-hero .kpi-go { height:auto; min-height:32px; padding:6px 12px; font-size:12px; }
  html.bento .b-ov-pc .dn-pc-tabs .tabs { border-radius:20px; }
}
/* the needle: at the left for 0%, at the right for 100% (design review, Oct 23) */
html.bento .b-ov-gauge .g-nd path { stroke:var(--th-ink); stroke-width:5; } html.bento .b-ov-gauge .g-nd circle { fill:var(--th-ink); stroke:none; }
html.bento.dark .b-ov-gauge .g-nd path { stroke:var(--th-dtext); } html.bento.dark .b-ov-gauge .g-nd circle { fill:var(--th-dtext); }

/* Bento: myday (see bento.css for the tokens and the shell; every rule under html.bento) */
/* b-myday: the date and greeting on the left, Done / Left / Late big on the right; then four tiles, the cutoffs and PA, the list in one tile */
html.bento .head.bmd-head { display:flex; align-items:flex-end; flex-wrap:wrap; gap:16px 28px; margin:6px 0 18px; padding:0 4px; }
html.bento .bmd-hl { flex:1 1 360px; min-width:0; display:flex; flex-direction:column; gap:4px; padding-bottom:14px; border-bottom:1px solid var(--line); }
html.bento .bmd-date { font-size:14px; line-height:20px; color:var(--muted); }
html.bento .bmd-date b { font-weight:600; color:inherit; }
html.bento main .bmd-head h1 { margin:0; font-size:38px; line-height:46px; font-weight:600; letter-spacing:-.8px; color:var(--ink); }
html.bento .bmd-head .bmd-tt { display:none; }
html.bento main[data-mdtab]:not([data-mdtab=today]) .bmd-head .bmd-td { display:none; }
html.bento main[data-mdtab]:not([data-mdtab=today]) .bmd-head .bmd-tt { display:inline; }
html.bento .bmd-stats { display:flex; gap:28px; flex:none; }
html.bento .bmd-stat { display:flex; flex-direction:column; gap:2px; min-width:120px; }
html.bento .bmd-stat .l { font-size:13px; line-height:18px; font-weight:500; color:var(--muted); }
html.bento .bmd-stat .v { display:flex; align-items:center; gap:8px; font-size:40px; line-height:46px; font-weight:600; letter-spacing:-1px; color:var(--ink); font-variant-numeric:tabular-nums; }
html.bento .bmd-chip { white-space:nowrap; font-size:11px; line-height:16px; font-weight:800; padding:2px 8px; border-radius:99px; letter-spacing:0; }
html.bento .bmd-chip.g { background:#22A35A; color:#fff; } html.bento .bmd-chip.r { background:#D83A2E; color:#fff; } html.bento .bmd-chip.s { background:var(--b-soft); color:var(--ink2); }
html.bento main[data-mdtab]:not([data-mdtab=today]) .bmd-stats { display:none; }
html.bento .bmd-head .tools { display:flex; align-items:center; gap:8px; flex:none; margin-left:auto; }
html.bento .bmd-head .tools select, html.bento .bmd-head .tools .btn { height:40px; border-radius:99px; border:0; background:var(--b-pill); color:var(--ink); box-shadow:var(--b-tile-shadow); padding:0 16px; font-weight:600; }

/* the tiles */
html.bento .bmd-tiles, html.bento .bmd-row2 { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:16px; }
html.bento main[data-mdtab]:not([data-mdtab=today]) .bmd-tiles, html.bento main[data-mdtab]:not([data-mdtab=today]) .bmd-row2 { display:none; }
html.bento main .tile.bmd-start, html.bento main .tile.bmd-prog, html.bento main .tile.bmd-week, html.bento main .tile.bmd-ep, html.bento main .tile.bmd-cuts, html.bento main .tile.bmd-pa, html.bento main .tile.bmd-side {
  position:relative; display:flex; flex-direction:column; gap:12px; padding:22px; min-width:0; overflow:hidden; }
html.bento .bmd-tiles > .bmd-start { flex:.9 1 220px; } html.bento .bmd-tiles > .bmd-prog { flex:1.35 1 300px; }
html.bento .bmd-tiles > .bmd-week, html.bento .bmd-tiles > .bmd-ep { flex:1 1 230px; }
html.bento .bmd-row2 > .tile { flex:1 1 380px; }
html.bento main .tile h3 { margin:0; font-size:18px; line-height:24px; font-weight:600; letter-spacing:-.2px; color:var(--ink); }
html.bento main .tile.b-hero { background:var(--b-hero); color:var(--b-hero-ink); } html.bento main .tile.b-dark { background:var(--b-dark); color:var(--b-dark-ink); }
html.bento main .tile.b-hero h3, html.bento main .tile.b-dark h3 { color:#fff; }
html.bento main .tile > .sub, html.bento main .tile .bmd-pgn .sub { font-size:12px; line-height:18px; color:var(--muted); }
html.bento main .tile.b-hero .sub { color:var(--b-hero-sub); } html.bento main .tile.b-dark .sub { color:var(--b-dark-sub); }
html.bento main .tile .b-big { color:inherit; }
/* Start calling (orange): the first case, the count big and Go */
html.bento .bmd-first { display:flex; flex-direction:column; gap:2px; margin-top:auto; padding:12px 14px; border-radius:18px; background:rgba(255,255,255,.16); }
html.bento .bmd-first b { font-size:16px; line-height:22px; font-weight:700; color:#fff; overflow-wrap:anywhere; }
html.bento .bmd-go { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:auto; }
html.bento .bmd-wbtn, html.bento .bmd-obtn { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border:0; border-radius:99px; background:#fff; color:var(--th-ink); font:700 13px 'Plus Jakarta Sans', system-ui, sans-serif; cursor:pointer; white-space:nowrap; margin-bottom:6px; }
html.bento .bmd-wbtn:hover { background:var(--th-soft); }
html.bento .bmd-obtn { background:var(--th-accent); color:var(--th-ink); align-self:flex-start; margin:0; } html.bento .bmd-obtn:hover { background:var(--th-accent); }
html.bento .bmd-obtn:disabled { opacity:.6; cursor:default; }
/* Today's progress: the percent big, a half-circle gauge, the chips as soft pills */
html.bento .bmd-pg { display:flex; align-items:center; gap:16px; }
html.bento .bmd-pgn { display:flex; flex-direction:column; }
html.bento .bmd-pgn .b-big { font-size:48px; color:var(--ink); }
html.bento .bmd-gauge { width:150px; height:auto; margin-left:auto; flex:none; }
html.bento .bmd-gauge path { fill:none; stroke-width:20; stroke-linecap:butt; }
html.bento .bmd-gauge .tr { stroke:var(--b-soft); } html.bento .bmd-gauge .on { stroke:var(--th-accent); }
html.bento .bmd-prog .dp-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
html.bento .bmd-prog .dp-chip { display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border:0; border-radius:99px; background:var(--b-soft); color:var(--ink2); font:700 12px 'Plus Jakarta Sans', system-ui, sans-serif; white-space:nowrap; cursor:pointer; }
html.bento .bmd-prog .dp-chip b { color:inherit; font-weight:800; }
html.bento .bmd-prog .dp-chip .dot, html.bento .bmd-prog .dp-chip .ic, html.bento .bmd-prog .dp-chip svg { display:none; }
html.bento .bmd-prog .dp-chip.ok { background:var(--ok-tint); color:var(--ok); }
html.bento .bmd-prog .dp-chip.late, html.bento .bmd-prog .dp-chip.k-alert { background:var(--alert-tint); color:var(--alert); }
html.bento .bmd-prog .dp-chip.new { background:var(--orange-tint); color:var(--orange-dk); }
html.bento .bmd-prog .dp-chip.today { background:var(--today-tint); color:var(--today); }
html.bento .bmd-prog .dp-chip.k-cutoff, html.bento .bmd-prog .dp-chip.pa { background:var(--amber-tint); color:var(--amber); }
html.bento .bmd-prog .dp-chip.pa.late { background:var(--alert-tint); color:var(--alert); }
html.bento .bmd-prog .dp-chip:hover { filter:brightness(.97); }
/* Your week, and the Next 7 days beside Upcoming: a line per number, a thin orange bar */
html.bento .bmd-score { display:flex; align-items:baseline; gap:6px; }
html.bento .bmd-score .b-big { font-size:48px; color:var(--ink); }
html.bento .bmd-wl { display:flex; flex-direction:column; gap:5px; }
html.bento .bmd-wr { display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:13px; line-height:18px; color:var(--ink2); }
html.bento .bmd-wr b { color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
html.bento .bmd-bar { height:6px; border-radius:6px; background:var(--b-soft); overflow:hidden; }
html.bento .bmd-bar i { display:block; height:100%; border-radius:6px; background:var(--th-accent); }
html.bento .bmd-lm { margin-top:-6px; }
html.bento .bmd-wlinks { font-size:12px; line-height:18px; color:var(--muted); margin-top:auto; }
html.bento .bmd-wlinks b { color:var(--ink); }
html.bento .bmd-wlinks .linkbtn { font-size:12px; }
/* the ePACES check (dark) */
html.bento .bmd-epn { display:flex; align-items:center; gap:10px; margin-top:auto; }
html.bento .bmd-epn .b-big { font-size:44px; color:#fff; }
html.bento .bmd-epn .sub { line-height:15px; }
html.bento .bmd-ep .hc-red { color:#FF8A7A; }
/* Cutoffs this week: a day pill and a bubble per day, the two cutoffs below */
html.bento .bmd-th { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
html.bento .bmd-month { margin-left:auto; height:36px; padding:0 14px; border-radius:99px; background:var(--b-soft); display:inline-flex; align-items:center; font-size:13px; font-weight:600; color:var(--ink); }
html.bento .bmd-days { display:flex; gap:6px; }
html.bento .bmd-day { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:10px; }
html.bento .bmd-dh { height:30px; padding:0 10px; border-radius:99px; display:flex; align-items:center; font-size:12px; font-weight:600; color:var(--ink2); white-space:nowrap; }
html.bento .bmd-dh.on { background:var(--b-pill-on); color:var(--b-pill-on-ink); }
html.bento .bmd-bub { width:58px; height:58px; max-width:100%; aspect-ratio:1; border-radius:99px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; text-align:center; line-height:14px; }
html.bento .bmd-bub.h { background:var(--th-accent); color:#fff; } html.bento .bmd-bub.l { background:var(--th-tint); color:var(--th-accent3); }
html.bento .bmd-bub.r { background:#F6C9C2; color:#B42318; font-size:12px; } html.bento .bmd-bub.e { border:1.5px dashed var(--line-strong); }
html.bento .bmd-cutl { display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; }
html.bento .bmd-cutl .dnp-cut { flex:1 1 160px; align-items:flex-start; border-radius:16px; background:var(--b-soft); padding:10px 14px; }
/* PA registration with HR: one line per case, how it is going on the right */
html.bento .bmd-n { font-size:12px; font-weight:800; padding:0 8px; border-radius:99px; background:var(--b-soft); color:var(--ink2); line-height:22px; }
html.bento .bmd-tag { display:inline-block; text-align:center; min-height:24px; padding:2px 10px; border-radius:99px; font-size:12px; line-height:16px; font-weight:700; flex:none; max-width:260px; }
html.bento .bmd-tag.l { background:var(--alert-tint); color:var(--alert); } html.bento .bmd-tag.ok { background:var(--ok-tint); color:var(--ok); } html.bento .bmd-tag.w { background:var(--amber-tint); color:var(--amber); }
html.bento .bmd-pal { max-height:300px; overflow:auto; margin:0 -4px; padding:0 4px; }
html.bento .bmd-li { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:13px; }
html.bento .bmd-li:first-child { border-top:0; }
html.bento .bmd-lc { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
html.bento .bmd-lc a { font-weight:700; color:var(--ink); text-decoration:none; } html.bento .bmd-lc a:hover { text-decoration:underline; }
html.bento .bmd-lc .sub { font-size:12px; line-height:17px; color:var(--muted); overflow-wrap:anywhere; }

/* the list in one tile: the title, the pill tabs and the status filter on one line, sections as coloured lines, rows split by a hairline */
html.bento .bmd-listwrap { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; }
html.bento .bmd-listwrap.has-side { grid-template-columns:minmax(260px,364px) minmax(0,1fr); }
html.bento main .tile.bmd-side { position:sticky; top:84px; min-height:236px; }
html.bento main .tile.bmd-side .b-big { font-size:56px; }
html.bento main .tile.bmd-side.bmd-next { min-height:0; }
html.bento main .tile.bmd-list { padding:8px 0 4px; overflow:hidden; min-width:0; }
html.bento .bmd-lh { display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; padding:12px 18px 10px; }
html.bento main[data-mdtab] .bmd-lh #mdControls { flex:1; min-width:0; margin:0; padding:0; border:0; display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
html.bento main[data-mdtab] #mdControls .tabs { flex:0 1 auto; max-width:100%; display:inline-flex; gap:4px; padding:3px; border:0; border-radius:99px; background:var(--b-soft); margin:0; width:auto; }
html.bento main[data-mdtab] #mdControls .tabs button { height:30px; padding:0 12px; border:0; border-radius:99px; margin:0; font-size:12.5px; font-weight:600; color:var(--ink2); background:transparent; }
html.bento main[data-mdtab] #mdControls .tabs button[aria-selected=true] { background:var(--b-pill-on); color:var(--b-pill-on-ink); }
html.bento main[data-mdtab] #mdControls .tabs .tab-n { background:transparent; color:inherit; opacity:.85; padding:0 0 0 2px; }
html.bento main[data-mdtab] #mdControls .filterbar { margin:0 0 0 auto !important; }
html.bento main[data-mdtab] #mdControls .smenu-btn { height:36px; border:0; border-radius:99px; background:var(--b-soft); color:var(--ink); padding:0 14px; }
html.bento main[data-mdtab]:not([data-mdtab=today]) > #mdControls { margin:0 0 16px; border:0; }
html.bento main[data-mdtab] #mdList .sec { margin:10px 0 0; padding:6px 18px; font-size:13px; line-height:20px; font-weight:700; background:none; }
html.bento main[data-mdtab] #mdList .sec:first-child, html.bento main[data-mdtab] #mdList .dn-info + .sec, html.bento main[data-mdtab] #mdList .note-foot + .sec { margin-top:0; }
html.bento main[data-mdtab] #mdList .sec .pill { background:transparent !important; color:inherit !important; padding:0; font-size:13px; }
html.bento main[data-mdtab] #mdList .sec .pill::before { content:'· '; }
html.bento main[data-mdtab] #mdList .sec .pill { margin-left:-6px; }
html.bento main[data-mdtab] #mdList .sec + .note-foot, html.bento main[data-mdtab] #mdList > .note-foot { margin:0 18px 8px !important; }
html.bento main[data-mdtab] #mdList .list { border:0; border-radius:0; background:transparent; box-shadow:none; margin:0; }
html.bento main[data-mdtab] #mdList .list + .note-foot:has(> [data-more]) { border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; }
html.bento main[data-mdtab] #mdList [data-more] { border-radius:99px; }
html.bento main[data-mdtab] #mdList > .empty { margin:8px 18px 18px; }
/* the other tabs: the side tile says what the heading and note said */
html.bento main[data-mdtab=upcoming] #mdList .sec[data-sec=upcoming], html.bento main[data-mdtab=nonext] #mdList .sec[data-sec=nonext], html.bento main[data-mdtab=nonext] #mdList .sec[data-sec=nonext] + .note-foot,
html.bento main[data-mdtab=trouble] #mdList .sec[data-sec=trouble], html.bento main[data-mdtab=trouble] #mdList .sec[data-sec=trouble] + .note-foot,
html.bento main[data-mdtab=unassigned] #mdList .sec[data-sec=unassigned], html.bento main[data-mdtab=unassigned] #mdList .sec[data-sec=unassigned] + .note-foot { display:none; }
html.bento main[data-mdtab]:not([data-mdtab=today]) .bmd-lh { border-bottom:1px solid var(--line); }
html.bento main[data-mdtab]:not([data-mdtab=today]) #mdList .list:first-child .row.dnr:first-child, html.bento main[data-mdtab]:not([data-mdtab=today]) #mdList > .sec:first-child + .list .row.dnr:first-child { border-top:0; }

/* the row (ui.js dnRow; the same on Referrals): an avatar, the case, what to do, then the phone, No answer and Log result as pills on one line */
html.bento .list > .row.dnr { padding:14px 18px; border-bottom:0; border-top:1px solid var(--line); background:transparent; align-items:center; position:relative; }
html.bento .list > .row.dnr::before { top:12px; bottom:12px; width:4px; border-radius:0 4px 4px 0; }
html.bento .list > .row.dnr:hover { background:var(--b-soft); }
html.bento .list > .dnr .dnr-who { width:280px; align-items:center; gap:12px; }
html.bento .list > .dnr .dnr-who > .av { width:34px; height:34px; font-size:12px; font-weight:800; }
html.bento .list > .row.dnr.late .dnr-who > .av, html.bento .list > .row.dnr.urgent:not(.is-done):not(.calm) .dnr-who > .av { background:#D83A2E; color:#fff; }
html.bento .list > .row.dnr.is-new .dnr-who > .av, html.bento .list > .row.dnr.is-again .dnr-who > .av { background:var(--th-accent); color:#fff; }
html.bento .list > .row.dnr.is-today:not(.late) .dnr-who > .av { background:#1D5FA8; color:#fff; }
html.bento .list > .row.dnr.is-done .dnr-who > .av { background:var(--ok-tint); color:var(--ok); }
html.bento .list > .dnr .who { font-size:14px; font-weight:700; overflow-wrap:anywhere; }
html.bento .list > .dnr .tag { height:24px; padding:0 10px; font-weight:700; }
html.bento .list > .dnr .dnr-note { border-radius:14px; background:var(--b-soft); }
html.bento .list > .dnr .act { width:auto; max-width:440px; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }
html.bento .list > .dnr .act .ph { flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }
html.bento .list > .dnr a.tel { height:40px; padding:0 16px; border-radius:99px; background:var(--b-soft); }
html.bento .list > .dnr .actbtns { margin:0; gap:8px; }
html.bento .list > .dnr .actbtns .btn { height:40px; padding:0 16px; border:0; border-radius:99px; background:var(--b-soft); color:var(--ink); font-weight:600; }
html.bento .list > .dnr .actbtns .btn:hover { background:var(--line); }
html.bento .list > .dnr .actbtns .btn[data-log] { background:var(--th-ink); color:#fff; font-weight:700; }
html.bento .list > .dnr .actbtns .btn[data-log]:hover { background:#000; }
html.bento .list > .dnr .actbtns .btn[data-log] .ic, html.bento .list > .dnr .actbtns .btn[data-log] svg { display:none; }
html.bento.dark .list > .dnr .actbtns .btn[data-log] { background:var(--th-daccent); color:var(--th-dpage); }
html.bento.dark .list > .dnr .actbtns .btn[data-log]:hover { background:var(--th-daccent); }

/* dark */
html.bento.dark .bmd-chip.s { background:var(--b-soft); color:var(--ink2); }
html.bento.dark .bmd-bub.l { background:var(--th-daccent2); color:var(--th-daccent); } html.bento.dark .bmd-bub.r { background:#3A1D19; color:#FF8A7A; } html.bento.dark .bmd-bub.h { background:var(--th-daccent); color:var(--th-dpage); }
html.bento.dark .bmd-wbtn { background:#fff; color:var(--th-dpage); }
html.bento.dark .bmd-first { background:rgba(255,255,255,.18); }
html.bento.dark .bmd-gauge .on, html.bento.dark .bmd-bar i { stroke:var(--th-daccent); background:var(--th-daccent); }
html.bento.dark .list > .row.dnr.is-done .dnr-who > .av { background:var(--ok-tint); color:var(--ok); }

/* smaller screens */
@media (max-width: 1100px) {
  html.bento .bmd-listwrap.has-side { grid-template-columns:minmax(0,1fr); }
  html.bento main .tile.bmd-side { position:static; min-height:0; }
  html.bento .list > .dnr .act { max-width:none; }
}
@media (max-width: 600px) {
  html.bento .head.bmd-head { gap:12px; margin-top:0; }
  html.bento main .bmd-head h1 { font-size:30px; line-height:36px; }
  html.bento .bmd-stats { width:100%; gap:12px; justify-content:space-between; }
  html.bento .bmd-stat { min-width:0; }
  html.bento .bmd-stat .v { font-size:30px; line-height:36px; flex-wrap:wrap; gap:4px 6px; }
  html.bento .bmd-head .tools { width:100%; flex-wrap:wrap; }
  html.bento .bmd-head .tools select { flex:1; min-width:0; }
  html.bento .bmd-tiles > .tile, html.bento .bmd-row2 > .tile { flex:1 1 100%; }
  html.bento main .tile.bmd-start, html.bento main .tile.bmd-prog, html.bento main .tile.bmd-week, html.bento main .tile.bmd-ep, html.bento main .tile.bmd-cuts, html.bento main .tile.bmd-pa, html.bento main .tile.bmd-side { padding:18px; border-radius:24px; }
  html.bento .bmd-gauge { width:110px; }
  html.bento .bmd-days { gap:2px; }
  html.bento .bmd-dh { padding:0 4px; font-size:11px; height:24px; }
  html.bento .bmd-bub { width:40px; height:40px; font-size:11px; }
  html.bento .bmd-bub.r { font-size:9px; }
  html.bento .bmd-li { flex-wrap:wrap; }
  html.bento .bmd-lh { padding:12px 14px 10px; }
  html.bento main[data-mdtab] .bmd-lh #mdControls { flex:1 1 100%; }
  html.bento main[data-mdtab] #mdControls .filterbar { margin:0 !important; }
  html.bento main[data-mdtab] #mdControls .tabs { overflow-x:auto; flex-wrap:nowrap; max-width:100%; scrollbar-width:none; }
  html.bento main[data-mdtab] #mdControls .tabs button { white-space:nowrap; flex:none; }
  html.bento main[data-mdtab] #mdList .sec { padding:6px 14px; }
  html.bento .list > .row.dnr { padding:14px; }
  html.bento .list > .dnr .dnr-who { width:100%; }
  html.bento .list > .dnr .act { width:100%; justify-content:stretch; }
  html.bento .list > .dnr .act .ph { width:100%; justify-content:stretch; }
  html.bento .list > .dnr .act .ph > a.tel { flex:1 1 auto; justify-content:center; height:44px; }
  html.bento .list > .dnr .actbtns .btn { height:44px; }
}
/* wide, no side tile: the phone, No answer and Log result on one line (b-myday) */
@media (min-width: 1300px) {
  html.bento .bmd-listwrap:not(.has-side) .list > .dnr .act { flex:0 1 auto; }
}
/* the needle: at the left for 0%, at the right for 100% (design review, Oct 23) */
html.bento .bmd-gauge .nd path { stroke:var(--th-ink); stroke-width:5; stroke-linecap:round; } html.bento .bmd-gauge .nd circle { fill:var(--th-ink); stroke:none; }
html.bento.dark .bmd-gauge .nd path { stroke:var(--th-dtext); } html.bento.dark .bmd-gauge .nd circle { fill:var(--th-dtext); }
/* a chip's jump lands the section header (or the first case) just under the top bar (owner, Oct 23) */
html.bento main [data-sec], html.bento main .row { scroll-margin-top:96px; }

/* Cutoffs this week, clearer (design check, Oct 23): why the days matter, each cutoff's own cases, a calm "–" on a free day */
html.bento .bmd-why { margin:-4px 0 10px; font-size:13px; }
html.bento .bmd-bub.e { border:0 !important; background:var(--b-soft) !important; color:var(--muted) !important; font-weight:600; }
html.bento .bmd-cut .bmd-cutn { font-size:13px; font-weight:700; color:var(--th-accent3); padding:0; margin-top:2px; } html.bento.dark .bmd-cut .bmd-cutn { color:var(--th-daccent); }
html.bento .bmd-cut > .sub { font-size:12px; margin-top:2px; }
html.bento .bmd-cutlist { display:flex; flex-direction:column; gap:4px; width:100%; margin-top:8px; }
html.bento .bmd-cutrow { display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; text-align:left; border:0; border-radius:12px; padding:8px 10px; background:var(--b-tile); color:var(--ink); font:inherit; font-size:13px; cursor:pointer; }
html.bento .bmd-cutrow:hover, html.bento .bmd-cutrow:focus-visible { background:var(--th-tint); } html.bento.dark .bmd-cutrow:hover { background:var(--th-daccent2); }
html.bento .bmd-cutrow .sub { font-size:12px; }
@media (max-width: 600px) { .chart .ch-l.ch-ph { display:none; } }

/* Bento: case (see bento.css for the tokens and the shell; every rule under html.bento) */
/* The case window (design b-case): no drawer, a column of tiles floating on the scrim. The header tile (top line, name, the GCR
   line, the call pills), the orange hero "Do next", the four log buttons as small tiles (Spoke with them the dark one), the note
   tile, then one tile for Where it is, the pill tabs and the footer. detail.js adds b-case, b-log, b-lognote, b-tabrow, b-case-main. */
html.bento .sheet:has(> .b-case) { z-index:40; background:rgba(var(--th-ink-rgb), .28); align-items:stretch; }
html.bento.dark .sheet:has(> .b-case) { background:rgba(0,0,0,.55); }
html.bento .sheet .box.b-case { width:min(620px,calc(100% - 48px)); height:auto; max-height:calc(100% - 48px); margin:24px 24px 24px 0; padding:0; gap:12px;
  background:transparent; border:0; box-shadow:none; overflow:auto; scrollbar-width:thin; color:var(--ink); border-radius:var(--b-r-tile); }
html.bento .sheet .box.b-case.b-load { background:var(--b-tile); padding:22px 24px; }
html.bento .b-case { --b-shadow:0 18px 44px rgba(var(--th-ink-rgb), .18); }
html.bento.dark .b-case { --b-shadow:0 18px 44px rgba(0,0,0,.45); }
/* every part on its own is a tile (warnings, code boxes, the rehab box) */
html.bento .sheet .b-case > :where(:not(.quick):not(.qfix):not(.refform):not(.b-load)) { flex-shrink:0; margin:0; border:0; border-radius:var(--b-r-tile); background:var(--b-tile); box-shadow:var(--b-shadow); padding:18px 22px; }
html.bento .sheet .b-case > .alert { padding:16px 20px; }
html.bento .sheet .b-case > .alert.warn { background:#FCF3DC; color:#4A3A12; }
html.bento.dark .sheet .b-case > .alert.warn { background:#352A12; color:#F3EEE7; }

/* header tile */
html.bento .sheet .b-case .dhead { position:static; margin:0; padding:22px 24px; gap:14px; border-bottom:0; }
html.bento .b-case .dn-top { gap:8px; }
html.bento .b-case .dn-top .tag { height:26px; padding:0 10px; font-size:12px; font-weight:700; }
html.bento .b-case .dn-pos { font-size:12px; color:var(--muted); }
html.bento .b-case .dn-top .btn.dn-ghost, html.bento .b-case .dn-top .xbtn.dn-ghost { height:34px; min-width:34px; border-radius:99px; background:var(--b-soft); color:var(--ink); }
html.bento .b-case .dn-top .btn.dn-ghost:hover, html.bento .b-case .dn-top .xbtn.dn-ghost:hover { background:var(--line); }
html.bento .b-case .dn-top .btn.dn-ghost:disabled { opacity:.45; background:var(--b-soft); }
html.bento .b-case .dn-top .dn-icon { width:34px; padding:0; }
html.bento .sheet .b-case h3 { font-size:30px; line-height:36px; font-weight:600; letter-spacing:-.6px; color:var(--ink); }
html.bento .sheet .b-case .dn-line { margin-top:2px; font-size:12px; line-height:18px; }
html.bento .b-case .dn-line .rid { font-size:12px; }
html.bento .b-case .dn-calls { gap:8px; }
html.bento .b-case .dn-calls a.btn, html.bento .b-case .dn-calls .btn { height:44px; padding:0 18px; border:0; border-radius:99px; background:var(--b-soft); color:var(--ink); font-size:13px; font-weight:600; box-shadow:none; }
html.bento .b-case .dn-calls a.btn.primary { background:var(--th-accent2); color:#fff; }
html.bento.dark .b-case .dn-calls a.btn.primary { background:var(--th-daccent); color:var(--th-dpage); }
html.bento .b-case .dn-calls .btn:hover { filter:brightness(.96); }
html.bento .b-case .dn-eligline { margin-top:-6px; font-size:12px; }

/* Do next: the orange hero */
html.bento .sheet .b-case > .nowbox.dn-donext { background:var(--b-hero); color:var(--b-hero-ink); padding:20px 22px; gap:0; }
html.bento .b-case .dn-donext-i { display:none; }
html.bento .b-case .dn-donext-b { gap:8px; }
html.bento .b-case .dn-donext .dn-label { color:var(--b-hero-sub); font-weight:800; letter-spacing:.6px; }
html.bento .b-case .dn-donext .nowtext { font-size:18px; line-height:25px; font-weight:600; color:var(--b-hero-ink); }
html.bento .b-case .dn-donext .sub, html.bento .b-case .dn-donext .nowwhy, html.bento .b-case .dn-donext .whyline, html.bento .b-case .dn-donext .whyline * { color:var(--b-hero-sub); }
html.bento .b-case .dn-donext a { color:var(--b-hero-ink); }
html.bento .b-case .dn-donext .nownext { border-top-color:rgba(255,255,255,.25); color:var(--b-hero-ink); }
html.bento .b-case .dn-donext .nownext b { color:var(--b-hero-ink); }
html.bento .b-case .dn-donext .nownext .btn { border:0; border-radius:99px; background:#fff; color:var(--th-ink); font-weight:700; }

/* Log this call: four small tiles, Spoke with them dark; the note tile under them */
html.bento .sheet .b-case .quick.b-log { gap:10px; padding:0; border:0; background:transparent; }
html.bento .b-case .b-log .dn-callbar { gap:10px; }
html.bento .b-case .b-log .dn-callbar .btn.dn-cb { min-height:96px; padding:14px; gap:16px; justify-content:space-between; border:0; border-radius:22px; background:var(--b-tile); color:var(--ink); box-shadow:var(--b-shadow); }
html.bento .b-case .b-log .dn-callbar .btn.dn-cb:hover { background:var(--b-soft); }
html.bento .b-case .b-log .dn-callbar .btn.dn-cb.primary { background:var(--b-dark); color:var(--b-dark-ink); }
html.bento .b-case .b-log .dn-callbar .btn.dn-cb.primary:hover { background:#000; }
html.bento .b-case .dn-cb-l { font-size:14px; font-weight:700; }
html.bento .b-case .dn-callbar kbd { border:0; background:var(--b-soft); color:var(--muted); border-radius:6px; }
html.bento .b-case .dn-callbar .primary kbd { background:rgba(255,255,255,.14); color:#fff; }
html.bento .sheet .b-case .b-lognote { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:14px 16px 14px 22px; border-radius:22px; background:var(--b-tile); box-shadow:var(--b-shadow); }
html.bento .b-case .b-lognote .dn-label { flex:none; }
html.bento .b-case .b-lognote .dn-input { flex:1 1 240px; height:40px; border:0; border-radius:99px; background:var(--b-soft); }
html.bento .b-case .b-lognote .dn-input:focus-within { box-shadow:0 0 0 3px rgba(var(--th-accent-rgb), .25); }
html.bento .b-case .b-lognote .dn-input input { background:transparent; }
html.bento .b-case .b-lognote .check { flex:none; font-size:12px; }

/* the big tile: Where it is, the tabs, the panes, the footer */
html.bento .sheet .b-case > .b-case-main { display:flex; flex-direction:column; gap:14px; padding:20px 22px 14px; }
html.bento .b-case .dn-where { gap:12px; }
html.bento .b-case .dn-where .dn-label { font-size:15px; line-height:22px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink); }
html.bento .b-case .dn-where .dn-cap { font-size:12px; }
html.bento .b-case .stepbar.full { gap:6px; flex-wrap:wrap; }
html.bento .b-case .stepbar.full .spb-step { flex:1 1 0; min-width:96px; }
html.bento .b-case .stepbar.full .spb-step i { display:none; }
html.bento .b-case .stepbar.full .spb-step b { display:flex; align-items:center; justify-content:center; min-height:30px; padding:4px 12px; border-radius:99px; text-align:center;
  font-size:12px; line-height:16px; font-weight:600; color:var(--ink2); }
html.bento .b-case .stepbar.full .spb-step.done b { background:var(--b-soft); }
html.bento .b-case .stepbar.full .spb-step.now b { background:var(--b-pill-on); color:var(--b-pill-on-ink); font-weight:700; }
html.bento .b-case .stepbar.full .spb-step.missed b { outline:1px dashed var(--alert); outline-offset:-1px; }
html.bento .b-case .stepset select, html.bento .b-case .stepset input, html.bento .b-case .stepset .btn { border-radius:99px; }
html.bento .b-case .stepset .btn { border:0; background:var(--b-soft); color:var(--ink); font-weight:600; }
html.bento .b-case .b-tabrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; }
html.bento .sheet .b-case .dtabs { position:static; margin:0; padding:3px; gap:4px; align-items:center; background:var(--b-soft); border:0; border-radius:99px; overflow-x:auto; flex-wrap:nowrap; max-width:100%; }
html.bento .b-case .dtabs button[role=tab] { height:32px; padding:0 12px; margin:0; border:0; border-radius:99px; font-size:12px; font-weight:600; color:var(--ink2); }
html.bento .b-case .dtabs button[role=tab][aria-selected=true] { background:var(--b-pill-on); color:var(--b-pill-on-ink); }
html.bento .b-case .dtabs .tab-n { background:transparent; color:inherit; padding:0; margin-left:-2px; }
html.bento .b-case .b-tabrow .dn-askai { margin-left:auto; height:36px; padding:0 14px; border-radius:99px; background:var(--b-soft); color:var(--ink); font-size:13px; font-weight:600; text-decoration:none; }
html.bento .b-case .b-tabrow .dn-askai:hover { background:var(--line); text-decoration:none; }
html.bento .sheet .b-case .dpane { margin-top:0; border-top:1px solid var(--line); padding-top:4px; }
html.bento .b-case .dpane .next, html.bento .b-case .dpane .panel, html.bento .b-case .dpane .alert { border:0; border-radius:20px; background:var(--b-soft); box-shadow:none; }
html.bento .b-case .hist.dn-note > .av { width:30px; height:30px; font-size:11px; }
html.bento .b-case .hist.dn-note .hist-text { overflow-wrap:anywhere; }
html.bento .b-case .hist.dn-note .tag { height:22px; padding:0 9px; }
html.bento .sheet .b-case .b-case-main > .actions.dn-foot { position:static; margin:0 -22px -14px; padding:10px 14px; border-top:1px solid var(--line); background:transparent; border-radius:0 0 var(--b-r-tile) var(--b-r-tile); }
html.bento .b-case .dn-foot .btn.dn-ghost { height:34px; border-radius:99px; }
html.bento .b-case .dn-foot .btn.dn-ghost:hover { background:var(--b-soft); }
html.bento .b-case .refform:not([hidden]) { padding:16px; border-radius:20px; background:var(--b-soft); }

/* phone: the window fills the screen on the page colour, the tiles stack, the log bar stays at the bottom */
@media (max-width:640px) {
  html.bento .sheet:has(> .b-case), html.bento.dark .sheet:has(> .b-case) { background:var(--b-app); z-index:80; }
  html.bento .sheet .box.b-case { width:100%; max-height:none; height:100%; margin:0; padding:12px 12px 150px; gap:10px; border-radius:0; }
  html.bento .sheet .b-case > :where(:not(.quick):not(.qfix):not(.refform):not(.b-load)) { box-shadow:var(--b-tile-shadow); padding:16px; border-radius:24px; }
  html.bento .sheet .b-case .dhead { padding:16px; gap:10px; }
  html.bento .sheet .b-case h3 { font-size:24px; line-height:30px; }
  html.bento .b-case .dn-calls a.btn, html.bento .b-case .dn-calls .btn { flex:1 1 100%; justify-content:center; }
  html.bento .b-case .b-log .dn-callbar { display:none; }
  html.bento .sheet .b-case .b-lognote { padding:12px; border-radius:24px; box-shadow:var(--b-tile-shadow); }
  html.bento .b-case .b-lognote .dn-label { display:none; }
  html.bento .b-case .stepbar.full .spb-step { min-width:0; flex:1 1 40%; }
  html.bento .b-case .b-tabrow .dn-askai { margin-left:0; }
  html.bento .b-case .qfix.dn-qfix { left:8px; right:8px; bottom:8px; gap:6px; padding:12px 12px calc(12px + env(safe-area-inset-bottom)); border:0; border-radius:var(--b-r-tile); background:var(--b-tile); box-shadow:0 -6px 30px rgba(var(--th-ink-rgb), .16); }
  html.bento .b-case .qfix .btn.dn-cb { box-shadow:none; border:0; border-radius:18px; background:var(--b-soft); color:var(--ink); }
  html.bento .b-case .qfix .btn.dn-cb.primary { background:var(--b-dark); color:var(--b-dark-ink); }
}

/* Bento: Problems, Referrals, Scheduled, My account (second chat; the rules chat has bento-pages.css for its pages). Tokens and shell in bento.css; every rule under html.bento */

/* shared: big light numbers beside a page title (Problems, Referrals, Scheduled) */
html.bento main .b-stats { display:flex; gap:28px; align-items:flex-start; }
html.bento main .b-stat { display:flex; flex-direction:column; gap:4px; min-width:120px; }
html.bento main .b-stat .sub { font-size:13px; line-height:18px; color:var(--ink2); white-space:nowrap; }
html.bento main .b-stat .b-big { color:var(--ink); font-weight:500; }

/* Problems: the title, the group-by pills and three numbers; coordinator tiles; pill chips; an orange Ready to close tile and a dark tile for the first group */
html.bento main:has(#pbExport) .pb-head { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:'t s' 'o s'; align-items:end; gap:14px 28px; padding:0 0 18px;
  margin-bottom:18px; border-bottom:1px solid var(--line); }
html.bento main:has(#pbExport) .pb-head > div:first-child { grid-area:t; }
html.bento main:has(#pbExport) .pb-head h1, html.bento main.b-rf > .b-rf-head h1, html.bento main.dnp-account > .head h1 { font-size:34px; line-height:42px; font-weight:600; letter-spacing:-.6px; }
html.bento main:has(#pbExport) .pb-head h1 b { font-weight:600; }
html.bento main:has(#pbExport) .pb-head .pb-bstats { grid-area:s; align-self:end; }
html.bento main:has(#pbExport) .pb-head .tools { grid-area:o; justify-content:flex-start; flex-wrap:wrap; gap:10px; }
html.bento main:has(#pbExport) .pb-seg { display:inline-flex; gap:4px; padding:4px; border:0; border-radius:99px; background:var(--b-soft); }
html.bento main:has(#pbExport) .pb-seg button { height:32px; padding:0 14px; border:0; border-radius:99px; background:transparent; color:var(--ink2); font-weight:600; box-shadow:none; }
html.bento main:has(#pbExport) .pb-seg button.on { background:var(--b-pill-on); color:var(--b-pill-on-ink); }
html.bento main:has(#pbExport) #pbExport { background:var(--b-pill-on); border-color:var(--b-pill-on); color:var(--b-pill-on-ink); height:40px; padding:0 18px; }
html.bento main:has(#pbExport) .howto { border-radius:20px; background:var(--b-tile); }
html.bento main:has(#pbExport) .pb-who { grid-template-columns:repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap:16px; }
html.bento main:has(#pbExport) .pb-wcard { border:0; border-radius:var(--b-r-tile); background:var(--b-tile); box-shadow:var(--b-tile-shadow); padding:20px 20px 18px; gap:14px; }
html.bento main:has(#pbExport) .pb-wcard.on { box-shadow:inset 0 0 0 2px var(--th-accent); background:var(--b-tile); }
html.bento main:has(#pbExport) .pb-wcard .pb-wtop .tag { background:var(--b-soft); border:0; }
html.bento main:has(#pbExport) .pb-wnums b { font-size:26px; line-height:30px; font-weight:500; }
html.bento main:has(#pbExport) .pb-wcard .wh-acts { gap:6px; }
html.bento main:has(#pbExport) .pb-wcard .wh-acts .btn, html.bento main:has(#pbExport) .pb-wcard .wh-acts .btn:is([data-remind], [data-move]) { height:34px; padding:0 14px; border:0; background:var(--b-soft); color:var(--ink); }
html.bento main:has(#pbExport) .pb-wcard .wh-acts .btn.primary { background:var(--b-pill-on); color:var(--b-pill-on-ink); }
html.bento main:has(#pbExport) .pb-reason { height:36px; padding:0 14px; border:0; border-radius:99px; background:var(--b-tile); box-shadow:var(--b-tile-shadow); }
html.bento main:has(#pbExport) .pb-reason.on, html.bento main:has(#pbExport) .pb-reason.on b { background:var(--b-pill-on); color:var(--b-pill-on-ink); }
html.bento main:has(#pbExport) .pb-filters input, html.bento main:has(#pbExport) .pb-filters select { border-radius:99px; border:0; background:var(--b-tile); height:40px; padding-left:16px; }
html.bento main:has(#pbExport) .b-pb-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap:16px; margin:18px 0 6px; }
html.bento main:has(#pbExport) .b-pb-row > .panel { display:flex; flex-direction:column; justify-content:space-between; gap:24px; min-height:220px; padding:22px 24px; margin:0; }
html.bento main:has(#pbExport) .b-pb-row > .panel.b-hero { background:var(--b-hero); color:var(--b-hero-ink); }
html.bento main:has(#pbExport) .b-pb-row > .panel.b-dark { background:var(--b-dark); color:var(--b-dark-ink); }
html.bento main:has(#pbExport) .b-pb-row > .b-hero :is(h3, .b-big) { color:var(--b-hero-ink); }
html.bento main:has(#pbExport) .b-pb-row > .b-hero .sub { color:var(--b-hero-sub); }
html.bento main:has(#pbExport) .b-pb-row > .b-dark :is(h3, .b-big) { color:#fff; }
html.bento main:has(#pbExport) .b-pb-row > .b-dark .sub { color:var(--b-dark-sub); }
html.bento main:has(#pbExport) .b-pb-row .b-big { font-size:72px; }
html.bento main:has(#pbExport) .b-pb-row h3 { margin:0 0 6px; font-size:20px; line-height:26px; font-weight:600; }
html.bento main:has(#pbExport) .b-pb-row .sub { font-size:13px; line-height:19px; }
html.bento main:has(#pbExport) .b-pb-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
html.bento main:has(#pbExport) .b-pb-foot .btn { height:40px; padding:0 18px; border:0; background:#fff; color:var(--th-ink); font-weight:700; }
html.bento main:has(#pbExport) .b-pb-dark .b-pb-foot .btn { background:var(--th-accent); color:var(--th-ink); }
html.bento main:has(#pbExport) .sec.pb-sec-close { border-radius:20px; }
html.bento.dark main:has(#pbExport) .sec.pb-sec-close { background:rgba(46,160,95,.16); color:#7BD39F; }
html.bento.dark main:has(#pbExport) .sec.pb-sec-close .pill { color:#7BD39F; background:transparent; }
html.bento.dark main:has(#pbExport) .sec.pb-sec-close::before { border-color:#7BD39F; }
html.bento.dark main:has(#pbExport) .sec.pb-sec-close > .sub { color:var(--ink2); }
html.bento main:has(#pbExport) .pb-table { overflow:hidden; }
html.bento main:has(#pbExport) .pb-table th { background:transparent; }
html.bento main:has(#pbExport) .pb-table tr:hover td { background:var(--b-soft); }
html.bento main:has(#pbExport) .pb-acts .btn { border-radius:99px; }
html.bento main:has(#pbExport) .pb-seeing { border-radius:20px; }

/* Referrals and Scheduled: the title with three numbers, one pill row (search, tabs, statuses, sort, Everyone, Export), the list in one tile */
html.bento main.b-rf > .b-rf-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px 28px; flex-wrap:wrap; padding:0 0 18px; margin-bottom:18px; border-bottom:1px solid var(--line); }
html.bento main.b-rf > .b-rf-head .sub { font-size:13px; color:var(--ink2); margin-bottom:2px; }
html.bento main.b-rf .dnr-bar { gap:10px; }
html.bento main.b-rf .dnr-q { height:48px; flex:1 1 240px; width:auto; max-width:340px; border:0; border-radius:99px; padding:0 18px; background:var(--b-tile); box-shadow:var(--b-tile-shadow); }
html.bento main.b-rf .dnr-q input { height:46px; }
html.bento main.b-rf #rfControls { display:contents; }
html.bento main.b-rf #rfControls .filterbar { margin:0; flex-wrap:nowrap; }
html.bento main.b-rf #rfControls .tabs { background:var(--b-soft); }
html.bento main.b-rf #rfControls .tabs button[aria-selected=true] { background:var(--b-pill-on); color:var(--b-pill-on-ink); }
html.bento main.b-rf #rfControls .filterbar :is(button, select), html.bento main.b-rf .b-rf-tools select { border:0; border-radius:99px; background:var(--b-tile); height:40px; }
html.bento main.b-rf .b-rf-tools { display:flex; align-items:center; gap:10px; margin-left:auto; }
html.bento main.b-rf .b-rf-tools #exportBtn { height:40px; padding:0 18px; border:0; background:var(--b-pill-on); color:var(--b-pill-on-ink); }
html.bento main.b-rf #list > .sec { margin:18px 0 0; padding:20px 22px 14px; border-radius:var(--b-r-tile) var(--b-r-tile) 0 0; background:var(--b-tile); font-size:18px; line-height:24px;
  font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink); }
html.bento main.b-rf #list > .sec + .list { margin-top:0; border-top-left-radius:0; border-top-right-radius:0; border-top:1px solid var(--line); }
html.bento main.b-rf #list > .sec .pill { font-size:18px; font-weight:600; background:transparent; color:var(--ink2); }
html.bento main.b-rf #list > .sec svg { display:none; }
html.bento main.b-rf .showmore .btn { height:40px; padding:0 20px; }
/* Scheduled: the calendar tile, one round count per day; the first (soonest) day is the orange one */
html.bento main.b-rf .b-cal { padding:20px 22px 22px; margin:6px 0 0; }
html.bento main.b-rf .b-cal-h { display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
html.bento main.b-rf .b-cal-h b { font-size:18px; font-weight:600; color:var(--ink); }
html.bento main.b-rf .b-cal-days { display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:8px; }
html.bento main.b-rf .b-cal-day { display:flex; flex-direction:column; align-items:center; gap:10px; padding:4px 0; border:0; background:transparent; cursor:pointer; color:var(--ink2); }
html.bento main.b-rf .b-cal-d { font-size:12px; font-weight:600; padding:4px 10px; border-radius:99px; white-space:nowrap; }
html.bento main.b-rf .b-cal-n { width:58px; height:58px; border-radius:99px; display:grid; place-items:center; background:var(--th-tint); color:var(--th-accent3); font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
html.bento main.b-rf .b-cal-day.on .b-cal-d { background:var(--b-pill-on); color:var(--b-pill-on-ink); }
html.bento main.b-rf .b-cal-day.on .b-cal-n { background:var(--b-hero); color:#fff; }
html.bento main.b-rf .b-cal-day:hover .b-cal-n { box-shadow:0 0 0 3px rgba(var(--th-accent-rgb), .25); }
html.bento.dark main.b-rf .b-cal-n { background:rgba(var(--th-daccent-rgb), .18); color:var(--th-daccent); }
html.bento.dark main.b-rf .b-cal-day.on .b-cal-n { color:#fff; }

/* My account: three tiles, soft round boxes, the HHA card is the orange tile, Dark mode the dark one, Bento preview a plain tile */
html.bento main.dnp-account > .head { flex-direction:column-reverse; align-items:flex-start; gap:2px; padding:0 0 18px; margin-bottom:18px; border-bottom:1px solid var(--line); }
html.bento main.dnp-account .dna-card { border-radius:var(--b-r-tile); padding:24px; }
html.bento main.dnp-account .dna-h { font-size:18px; line-height:24px; }
html.bento main.dnp-account .field { font-weight:500; color:var(--ink2); }
html.bento main.dnp-account .field input, html.bento main.dnp-account .field input[readonly] { height:46px; border:0; border-radius:99px; background:var(--b-soft); padding:0 18px; color:var(--ink); }
html.bento main.dnp-account .field input:focus { box-shadow:0 0 0 3px rgba(var(--th-accent-rgb), .25); }
html.bento main.dnp-account .dna-in svg { left:18px; top:15px; }
html.bento main.dnp-account .dna-in input { padding-left:44px; }
html.bento main.dnp-account .btn { height:40px; padding:0 18px; }
html.bento main.dnp-account .btn:not(.primary):not(.bookmarklet) { border:0; background:var(--b-soft); }
html.bento main.dnp-account .dna-hha.b-hero { background:var(--b-hero); }
html.bento main.dnp-account .dna-hha.b-hero .dna-h, html.bento main.dnp-account .dna-hha.b-hero .dna-steps, html.bento main.dnp-account .dna-hha.b-hero .dna-steps b { color:var(--b-hero-ink); }
html.bento main.dnp-account .dna-hha.b-hero .sub { color:var(--b-hero-sub); }
html.bento main.dnp-account .dna-hha.b-hero .dna-steps li::before { background:#fff; color:var(--th-accent2); }
html.bento main.dnp-account .dna-hha.b-hero .bookmarklet { border:0; background:#fff; color:var(--th-ink); font-weight:700; }
html.bento main.dnp-account .dna-card.b-dark { background:var(--b-dark); color:var(--b-dark-ink); }
html.bento main.dnp-account .dna-card.b-dark .dna-h { color:#fff; }
html.bento main.dnp-account .dna-card.b-dark .sub { color:var(--b-dark-sub); }
html.bento main.dnp-account .b-acc-bento .dna-check { display:inline-flex; align-self:flex-start; align-items:center; gap:10px; height:40px; padding:0 18px; border-radius:99px; background:var(--b-soft); color:var(--ink); font-size:14px; font-weight:600; cursor:pointer; }
html.bento main.dnp-account .b-acc-bento .dna-check:has(input:checked) { background:var(--b-pill-on); color:var(--b-pill-on-ink); }
html.bento main.dnp-account .b-acc-bento .dna-check input { accent-color:var(--th-accent); width:16px; height:16px; margin:0; }

/* narrow screens: the numbers wrap under the title, the calendar scrolls sideways */
@media (max-width: 900px) {
  html.bento main .b-stats { gap:16px; flex-wrap:wrap; }
  html.bento main .b-stat { min-width:0; }
  html.bento main .b-stat .b-big { font-size:40px; }
  html.bento main:has(#pbExport) .pb-head { grid-template-columns:minmax(0,1fr); grid-template-areas:'t' 's' 'o'; }
  html.bento main.b-rf .dnr-q { max-width:none; flex-basis:100%; }
  html.bento main.b-rf .b-rf-tools { margin-left:0; }
  html.bento main.b-rf .b-cal-days { display:flex; overflow-x:auto; scrollbar-width:none; }
  html.bento main.b-rf .b-cal-day { flex:0 0 72px; }
}

/* Bento: signin (see bento.css for the tokens and the shell; every rule under html.bento)
   Design: design/bento b-signin, b-signin-err, b-phone-signin. Only the frame and the form card change here: the four shapes,
   their scene and the background layer (web/js/doodles.js, web/js/login-bg.js) keep every size, colour and reaction they have.
   The sign-in page is always light (app.js drops .dark before it draws the page). */

/* the app card on the warm page: the scene tile on the left, the white form tile on the right */
html.bento .login-wrap { grid-template-columns:minmax(0,1.25fr) minmax(380px,1fr); gap:18px; margin:28px; padding:22px;
  min-height:calc(100vh - 56px); border-radius:var(--b-r-app); background-color:var(--b-app);
  background-image:radial-gradient(700px 420px at 0% 0%, var(--b-glow1) 0%, transparent 70%), radial-gradient(600px 400px at 100% 0%, var(--b-glow2) 0%, transparent 70%);
  background-repeat:no-repeat; box-shadow:0 30px 80px rgba(var(--th-panel4-rgb), .12); }
html.bento .login-scene { border-radius:var(--b-r-tile); background:var(--th-soft); }
html.bento .login-wrap .login { position:static; border-radius:var(--b-r-tile); background:var(--b-tile); box-shadow:var(--b-tile-shadow); padding:40px 32px; }

/* the logo as a white pill at the top left of the scene tile (it is the form's logo, placed on the frame) */
@keyframes bentoSigninIn { from { opacity:0; } to { opacity:1; } }
html.bento .login-inner { width:min(400px, 100%); gap:16px; animation:bentoSigninIn .5s .1s ease both; }
html.bento .login-inner > img { position:absolute; left:50px; top:48px; z-index:2; height:48px; width:auto; margin:0; padding:9px 18px 9px 12px; box-sizing:border-box;
  border-radius:99px; background:var(--b-pill); box-shadow:0 1px 2px rgba(var(--th-ink-rgb), .06); }
/* the brand line becomes the small "Intake portal" chip at the top right of the scene tile */
html.bento .scene-brand { left:auto; right:26px; top:26px; z-index:1; display:flex; align-items:center; gap:6px; height:32px; padding:0 14px; border-radius:99px;
  background:var(--b-pill); font-size:0; letter-spacing:0; text-transform:none; color:var(--b-pill-ink); }
html.bento .scene-brand::before { content:''; width:14px; height:14px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E") center/contain no-repeat; }
html.bento .scene-brand::after { content:'Intake portal'; font:600 12px/1 'Plus Jakarta Sans', system-ui, sans-serif; }

/* the heading */
html.bento .login-inner h1 { font-size:40px; line-height:46px; font-weight:600; letter-spacing:-1px; color:var(--th-ink); }
html.bento .login-inner > p { margin:-12px 0 4px; font-size:15px; color:var(--th-mute); }

/* Google and the "or with email" line */
html.bento .login-inner #gbtn { justify-content:center; }
html.bento .login-inner .lf-or { color:var(--th-mute); }

/* the boxes: soft pills, the icon inside on the left, an orange ring when typing in one */
html.bento .login-inner .lf-field { gap:6px; font-size:13px; font-weight:600; color:var(--th-ink); }
html.bento .login-inner .lf-ic { left:18px; color:var(--th-text); }
html.bento .login-inner .lf-field input { height:52px; padding:0 18px 0 46px; border:1.5px solid transparent; border-radius:99px; background:var(--b-app); font-size:15px; }
html.bento .login-inner .lf-field input:not(.lf-box input):not(.lf-pw input) { padding-left:18px; }
html.bento .login-inner .lf-pw input { padding-right:50px; }
html.bento .login-inner .lf-field input:hover { border-color:var(--th-line); }
html.bento .login-inner .lf-field input:focus { border-color:var(--th-accent); box-shadow:0 0 0 4px rgba(var(--th-accent-rgb), .18); background:var(--b-app); }
html.bento .login-inner .lf-eye { right:10px; width:34px; height:34px; color:var(--th-text); }
html.bento .login-inner .lf-eye:hover, html.bento .login-inner .lf-eye:focus-visible { background:var(--th-soft2); color:var(--th-ink); }
/* wrong password: the password pill goes red with a soft red ring, the reason right under it */
html.bento .login-inner .lf:has(#loginErr:not(:empty)) #lgPw { border-color:#D83A2E; box-shadow:0 0 0 4px rgba(216,58,46,.12); }
html.bento .login-inner #loginErr { margin-top:-4px; font-size:13px; font-weight:600; color:#B42318; }

/* forgot, the sign-in button (a big pill), the small print */
html.bento .login-inner .lf-row { margin-top:-2px; }
html.bento .login-inner .lf-row a { font-weight:700; color:#23305C; }
html.bento .login-inner .btn.primary.lf-btn { height:54px; border-radius:99px; margin-top:6px; background:var(--th-accent2); border-color:var(--th-accent2); font-size:15px; font-weight:700; }
html.bento .login-inner .btn.primary.lf-btn:hover { background:var(--th-accent3); border-color:var(--th-accent3); }
html.bento .login-inner .btn:not(.primary) { height:48px; border-radius:99px; background:var(--b-soft); border-color:transparent; font-weight:600; }
html.bento .login-inner .btn:not(.primary):hover { background:var(--th-soft2); }
html.bento .login-inner .sub { font-size:12.5px; color:var(--th-mute); }
html.bento .login-inner .privacy { font-size:12.5px; color:var(--th-mute); margin-top:-10px; }
html.bento .login-inner .field select { height:48px; border-radius:99px; padding:0 18px; border:1.5px solid transparent; background-color:var(--b-app); }
html.bento .login-inner .field select:focus { border-color:var(--th-accent); box-shadow:0 0 0 4px rgba(var(--th-accent-rgb), .18); outline:none; }

/* tablet and phone: the scene fills the page, the logo pill at the top left, the form a white card with all four corners round */
@media (max-width:860px) {
  html.bento .login-wrap { grid-template-columns:1fr; gap:0; margin:0; padding:0 0 12px; min-height:100vh; border-radius:0; box-shadow:none;
    background:var(--th-soft); }
  html.bento .login-scene { border-radius:0; padding:76px 16px 0; }
  html.bento .scene-brand { display:none; }
  html.bento .login-wrap .login { width:auto; margin:-16px 12px 0; padding:28px 24px 32px; border-radius:var(--b-r-tile); box-shadow:0 -8px 30px rgba(var(--th-panel4-rgb), .06); }
  html.bento .login-inner > img { left:16px; top:16px; }
  html.bento .login-inner h1 { font-size:32px; line-height:40px; letter-spacing:-.6px; }
  html.bento .login-inner > p { font-size:13px; }
}

/* Bento look shared by the rules chat's pages (owner, Oct 23; design/bento on branch design/portal-figma): Report, Team,
   AI (and its rules), Cottage Helper, Rate sheet, Users, Help, OPWDD. Look only: every rule is under html.bento (on top of
   html.dn) and applies only while one of those pages is open (its menu button is aria-pressed); the same tabs, numbers,
   buttons and handlers. Tokens from bento.css (second chat) with fallbacks. Page-specific touches: bento-<page>.css. */
html.bento:is(:has([data-page=report][aria-pressed=true]), :has([data-page=team][aria-pressed=true]), :has([data-page=ai][aria-pressed=true]), :has([data-page=helper][aria-pressed=true]), :has([data-page=rates][aria-pressed=true]), :has([data-page=users][aria-pressed=true]), :has([data-page=help][aria-pressed=true]), :has(main.dnp-opwdd)) main:not(#_b) {
  --bt-tile: var(--b-tile, #fff); --bt-r: var(--b-r-tile, 28px); --bt-pill: var(--b-pill, rgba(255,255,255,.72));
  --bt-on: var(--b-pill-on, var(--th-ink)); --bt-on-ink: var(--b-pill-on-ink, #fff); --bt-dark: var(--b-dark, var(--th-ink)); --bt-dark-ink: var(--b-dark-ink, var(--th-soft2));
  --bt-hero: var(--b-hero, var(--th-accent)); --bt-hero-ink: var(--b-hero-ink, #fff); --bt-shadow: 0 1px 2px rgba(var(--th-ink-rgb), .04);
  --bt-line: var(--th-soft2); --bt-field: var(--th-tint); --bt-soft: var(--b-soft, var(--th-soft)); --bt-muted: var(--text-tertiary, var(--th-mute)); --bt-dark-sub: var(--b-dark-sub, var(--th-line2));
}
html.bento.dark:is(:has([data-page=report][aria-pressed=true]), :has([data-page=team][aria-pressed=true]), :has([data-page=ai][aria-pressed=true]), :has([data-page=helper][aria-pressed=true]), :has([data-page=rates][aria-pressed=true]), :has([data-page=users][aria-pressed=true]), :has([data-page=help][aria-pressed=true]), :has(main.dnp-opwdd)) main:not(#_b) {
  --bt-tile: var(--b-tile, var(--th-dpage)); --bt-pill: var(--b-pill, rgba(255,255,255,.06)); --bt-on: var(--b-pill-on, var(--th-dtext)); --bt-on-ink: var(--b-pill-on-ink, var(--th-dpage));
  --bt-dark: var(--b-dark, var(--th-dtext)); --bt-dark-ink: var(--b-dark-ink, var(--th-dpage)); --bt-shadow: none;
  --bt-line: rgba(255,255,255,.07); --bt-field: var(--th-dsoft); --bt-soft: var(--b-soft, var(--th-dsoft)); --bt-muted: var(--th-dmute); --bt-dark-sub: var(--b-dark-sub, var(--th-dmute));
}

/* everything below only while one of these pages is open (CSS nesting) */
html.bento:is(:has([data-page=report][aria-pressed=true]), :has([data-page=team][aria-pressed=true]), :has([data-page=ai][aria-pressed=true]), :has([data-page=helper][aria-pressed=true]), :has([data-page=rates][aria-pressed=true]), :has([data-page=users][aria-pressed=true]), :has([data-page=help][aria-pressed=true]), :has(main.dnp-opwdd)) main:not(#_b) {
  /* the page head: a big light title; the page's own buttons as pills */
  & > .head > div:first-child { display:flex; flex-direction:column; }
  & > .head .eyebrow { display:block; order:0; font-size:12px; line-height:16px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--bt-muted); margin:0 0 4px; }
  & > .head h1 { order:1; }
  & > .head > div:first-child > .sub { order:2; }
  & > .head h1 abbr { text-decoration:none; border:0; cursor:inherit; }
  & > .head h1 { font-size:44px; line-height:52px; font-weight:600; letter-spacing:-0.9px; }
  & > .head .tools .btn, & > .head .tools select, & > .head .tools input { border-radius:999px; }
  & > .head .tools .btn.primary { background:var(--bt-dark); border-color:var(--bt-dark); color:var(--bt-dark-ink); }

  /* segmented choices and tabs as pills: dark = chosen */
  & .seg { background:var(--bt-pill); border:0; border-radius:999px; padding:4px; gap:2px; box-shadow:none; }
  & .seg button { border-radius:999px; background:transparent; box-shadow:none; font-weight:600; }
  & .seg button[aria-pressed=true], & .seg button.on { background:var(--bt-on); color:var(--bt-on-ink); }
  & .tabs { border-bottom:0; gap:4px; background:var(--bt-pill); border-radius:999px; padding:4px; width:max-content; max-width:100%; }
  & .tabs button { border:0; border-radius:999px; height:34px; padding:0 14px; margin:0; font-weight:600; }
  & .tabs button::after { display:none; }
  & .tabs button:is([aria-selected=true], [aria-pressed=true], .on), & .tabs.tabs button:is([aria-selected=true], [aria-pressed=true], .on) { background:var(--bt-on); color:var(--bt-on-ink); }
  & .tabs button .pill, & .tabs button .n { background:rgba(127,127,127,.16); color:inherit; }

  /* how-to lines: a quiet pill, no box */
  & .howto { background:var(--bt-pill); border:0; border-radius:999px; padding:10px 18px; }

  /* number tiles: white, 28px, no border, a big light number */
  & .kpis { gap:16px; }
  & .kpi { background:var(--bt-tile); border:0; border-radius:var(--bt-r); box-shadow:var(--bt-shadow); padding:22px 22px 20px; }
  & .kpi .kpi-label { text-transform:none; letter-spacing:0; font-size:13px; font-weight:500; color:var(--bt-muted); }
  & .kpi .kpi-n { font-size:44px; line-height:52px; font-weight:600; letter-spacing:-1px; }

  /* panels, cards and tables as tiles */
  & .panel, & .card { background:var(--bt-tile); border:0; border-radius:var(--bt-r); box-shadow:var(--bt-shadow); }
  & .panel:has(table) { overflow:hidden; }
  & .dna-card > .panel.ha-pad { border-radius:0; background:transparent; box-shadow:none; }   /* a plain box inside a card (no padding): round corners would cut its first letters */   /* only where a table needs the round corners; text panels never clip their first letter */
  /* tables inside a tile: no header band, 11px muted labels, rows split by one thin warm line, rows inset from the edge */
  & table th { background:transparent; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--bt-muted); border:0; border-bottom:1px solid var(--bt-line); }
  & table tbody td { border:0; border-bottom:1px solid var(--bt-line); }
  & table tbody tr:last-child td { border-bottom:0; }
  & .panel table :is(th, td):first-child { padding-left:22px; }
  & .panel table :is(th, td):last-child { padding-right:22px; }
  & .panel:has(> table, > .tbl, > .scroll) { padding:4px 0; }
  & .sec { text-transform:none; letter-spacing:-0.1px; font-size:20px; line-height:28px; font-weight:600; color:var(--text-primary, var(--th-ink)); margin:22px 4px 10px; }
  & .filterbar { background:var(--bt-pill); border-radius:999px; padding:4px 6px; border:0; }
  & .filterbar input, & .filterbar select { border-radius:999px; }
  & .btn { border-radius:999px; }
  /* fields as pills: 44 high, warm fill, no border (ticks, switches and text boxes stay as they are) */
  & :is(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color]), select) { height:44px; min-height:44px; border-radius:999px; background-color:var(--bt-field); border:0; box-shadow:none; padding-inline:16px; }
  & :is(input, select):focus-visible { outline:2px solid var(--v6-ring, var(--th-accent2)); outline-offset:2px; box-shadow:0 0 0 3px rgba(var(--th-accent-rgb), .25); }   /* the keyboard ring (a11y pass, Oct 27) */
  & select { padding-right:34px; }
  /* fields that sit on the page itself (not in a tile) are white, so they still read as fields */
  & :is(.wd-bar, .pb-filters, .hp-bar) :is(input:not([type=checkbox], [type=radio]), select) { background-color:var(--bt-tile); box-shadow:0 1px 2px rgba(var(--th-ink-rgb), .06); }
  & :is(.wd-bar, .pb-filters, .hp-bar) :is(input:not([type=checkbox], [type=radio]), select):focus-visible { box-shadow:0 0 0 3px rgba(var(--th-accent-rgb), .25); }
  & .sheet-lite { border-radius:var(--bt-r); border:0; box-shadow:0 24px 60px rgba(var(--th-ink-rgb), .18); }
}

/* Bento look, Report page (owner, Oct 23; mockup b-report and the b-t-report-* tabs on branch design/portal-figma). The
   shared tile / pill look is in bento-pages.css; here only the Report's own touches. Look only, under html.bento, while
   the Report is open; the same tabs, numbers, buttons and handlers. */
html.bento:has([data-page=report][aria-pressed=true]) main:not(#_b) {
  /* Export CSV is the dark pill */
  & > .head .tools > .btn { background:var(--bt-dark); color:var(--bt-dark-ink); border-color:var(--bt-dark); height:40px; padding:0 18px; }
  & > .head .tools > .btn .ic { color:inherit; }
  /* "This tab answers": a plain line under the tabs */
  & #out > .banner { background:transparent; border:0; padding:4px 6px; }
  /* the first number tile (new cases) is the orange hero, the last (stuck) the dark tile */
  & .kpis > .kpi:first-child { background:var(--bt-hero); color:var(--bt-hero-ink); }
  & .kpis > .kpi:first-child :is(.kpi-label, .kpi-n, .kpi-sub, .sub) { color:var(--bt-hero-ink); }
  & .kpis > .kpi:last-child { background:var(--bt-dark); color:var(--bt-dark-ink); }
  & .kpis > .kpi:last-child :is(.kpi-label, .kpi-n, .kpi-sub, .sub) { color:var(--bt-dark-ink); }
  & .kpis > .kpi:is(:first-child, :last-child) .sub { opacity:.85; }
  /* the bars round, as in the mockup */
  & :is(.rp-bar, .rp-strack) { border-radius:999px; }
}

/* Report v3 (owner, Oct 26; design/portal-figma design/features/v3/f3-report): 5 tiles with a pill against the period
   before, the Coordinators table as pills with a 5-week line, cases received by week, "?" tips in place of the long
   explanations. web/js/report.js. Desk, half screen (720–1100), phone; light and dark (html.dark). */
.rp-tabrow { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin:0 0 16px; }
.rp-tabrow .tabs { margin:0; }
.rp-hint { margin-left:auto; font-size:13px; color:var(--muted); }
.rp3 { --rp-g:#1E6B3F; --rp-gb:#E3F2E8; --rp-a:#8A5A00; --rp-ab:#FCF0D2; --rp-r:#B42318; --rp-rb:#FDE8E5; --rp-card:var(--bt-tile, var(--card, #fff));
  --rp-r-card:var(--bt-r, 20px); --rp-soft:var(--b-soft, var(--th-soft)); display:flex; flex-direction:column; gap:16px; }
.rp3 .rp-q { display:inline-grid; place-items:center; width:17px; height:17px; border-radius:99px; background:rgba(127,127,127,.16); color:inherit; font-size:11px; font-weight:700;
  cursor:help; position:relative; vertical-align:1px; margin-left:4px; line-height:1; }
.rp3 .rp-q:is(:hover, :focus-visible)::after { content:attr(data-tip); position:absolute; z-index:30; left:50%; top:calc(100% + 8px); transform:translateX(-50%); width:max-content; max-width:280px;
  padding:9px 12px; border-radius:12px; background:var(--th-ink); color:var(--th-soft2); font-size:12.5px; font-weight:500; line-height:1.4; text-align:left; white-space:normal; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.rp3 .rp-q:focus-visible { outline:2px solid var(--th-accent); outline-offset:2px; }

/* the 5 tiles */
.rp-k5 { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:16px; }
.rp-k { background:var(--rp-card); border-radius:var(--rp-r-card); box-shadow:var(--bt-shadow, 0 1px 2px rgba(16,24,40,.04)); padding:20px 20px 18px; min-width:0; display:flex; flex-direction:column; gap:6px; color:var(--ink); }
.rp-k.hero { background:var(--bt-hero, var(--th-accent)); color:var(--bt-hero-ink, #fff); }
.rp-k.dark { background:var(--bt-dark, var(--th-dpage)); color:var(--bt-dark-ink, var(--th-dtext)); }
.rp-kl { font-size:13px; font-weight:600; }
.rp-kn { font-size:44px; line-height:50px; font-weight:600; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.rp3 .rp-kn .rp-n { all:unset; cursor:pointer; color:inherit; } .rp-kn .rp-n:hover { text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px; }
.rp-kn .rp-n:focus-visible { outline:2px solid var(--th-accent); outline-offset:2px; border-radius:6px; }
.rp-tr { align-self:flex-start; display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px; border-radius:99px; font-size:12px; font-weight:700; white-space:nowrap; }
.rp-tr.up { background:var(--rp-gb); color:var(--rp-g); } .rp-tr.down { background:var(--rp-rb); color:var(--rp-r); } .rp-tr.same { background:rgba(127,127,127,.14); color:inherit; opacity:.85; }
.rp-k.hero .rp-tr, .rp-k.dark .rp-tr { background:#fff; } .rp-k.hero .rp-tr.same, .rp-k.dark .rp-tr.same { color:var(--th-text); }

/* cards */
.rp-card { background:var(--rp-card); border-radius:var(--rp-r-card); box-shadow:var(--bt-shadow, 0 1px 2px rgba(16,24,40,.04)); padding:20px 22px; min-width:0; }
.rp-ch { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; margin-bottom:12px; }
.rp-ch h3 { margin:0; font-size:18px; font-weight:600; color:var(--ink); } .rp-ch .sub { font-size:12px; }
.rp-chp { margin:0; }
.rp-two { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px; }
.rp-none { padding:10px 0; }

/* the Coordinators table */
.rp-ct { --cols:minmax(150px, 2fr) repeat(6, minmax(64px, 1fr)) 110px 20px; }   /* + Goal score (Oct 29) */
.rp-cth, .rp-cr { display:grid; grid-template-columns:var(--cols); align-items:center; gap:8px; }
.rp-cth { padding:0 10px 8px; border-bottom:1px solid var(--line); }
.rp-cth > * { all:unset; white-space:nowrap; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); text-align:center; cursor:default; }
.rp-cth > :first-child { text-align:left; } .rp-cth > .rp-sort { cursor:pointer; } .rp-cth > .rp-sort.on { color:var(--ink); }
.rp-cth > .rp-sort:focus-visible { outline:2px solid var(--th-accent); outline-offset:2px; border-radius:4px; }
.rp-cr { padding:10px; border-bottom:1px solid var(--line); cursor:pointer; text-align:center; font-variant-numeric:tabular-nums; color:var(--ink); }
.rp-cr:hover, .rp-cr.on { background:var(--rp-soft); } .rp-cr.on { border-radius:14px 14px 0 0; border-bottom-color:transparent; }
.rp-cr:focus-visible { outline:2px solid var(--th-accent); outline-offset:-2px; border-radius:12px; }
.rp-c-who { display:flex; align-items:center; gap:10px; min-width:0; text-align:left; } .rp-c-who b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rp-c-who .av { flex:none; }
.rp-pill { display:inline-grid; place-items:center; min-width:52px; height:30px; padding:0 10px; border-radius:10px; font-weight:700; font-size:13.5px; font-style:normal; background:rgba(127,127,127,.1); color:var(--ink); box-sizing:border-box; }
.rp-pill.g { background:var(--rp-gb); color:var(--rp-g); } .rp-pill.a { background:var(--rp-ab); color:var(--rp-a); } .rp-pill.r { background:var(--rp-rb); color:var(--rp-r); }
.rp3 .rp-pill .rp-n { all:unset; cursor:pointer; color:inherit; } .rp-pill .rp-n:hover { text-decoration:underline; } .rp-pill .rp-n:focus-visible { outline:2px solid var(--th-accent); outline-offset:3px; border-radius:4px; }
.rp-pill .rp-zero { color:inherit; opacity:.75; }
.rp-spark { display:block; margin:0 auto; overflow:visible; } .rp-spark polyline { fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.rp-spark.up polyline { stroke:#2F8F5B; } .rp-spark.down polyline { stroke:#C2412D; }
.rp-chev { color:var(--muted); font-size:18px; transition:transform .15s ease; } .rp-cr.on .rp-chev { transform:rotate(90deg); }
.rp-more { background:var(--rp-soft); border-radius:0 0 14px 14px; padding:6px 16px 16px; margin-bottom:8px; display:flex; flex-direction:column; gap:12px; }
.rp-ml { display:block; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.rp-mscore { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; } .rp-mscore .rp-ml { width:100%; }
.rp-mbig { font-size:22px; } .rp-mbig .sub { font-size:13px; }
.rp-mparts { display:flex; flex-wrap:wrap; gap:8px 18px; width:100%; } .rp-mparts > div { display:flex; flex-direction:column; min-width:150px; flex:1 1 150px; font-size:13px; }
.rp-mgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px 16px; } .rp-mgrid b { font-weight:600; font-size:15px; color:var(--ink); }
.rp-warn { color:var(--orange-dk, #B45309); }
.rp-mfoot { display:flex; flex-wrap:wrap; gap:8px; } .rp-mfoot .btn { border-radius:99px; }
.rp-days:empty { display:none; }
.rp-legend { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-top:12px; font-size:12.5px; color:var(--ink2); }
.rp-legend .rp-pill { min-width:0; height:22px; padding:0 8px; font-size:12px; margin-right:4px; } .rp-grow { flex:1; }

/* cases received, by week */
.rp-wk { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:8px; align-items:end; height:170px; }
.rp-wb { all:unset; box-sizing:border-box; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; gap:4px; cursor:pointer; text-align:center; }
.rp-wb:disabled { cursor:default; } .rp-wb:focus-visible { outline:2px solid var(--th-accent); outline-offset:2px; border-radius:8px; }
.rp-wbar { position:relative; display:block; border-radius:8px 8px 4px 4px; background:var(--th-tint); overflow:hidden; min-height:2px; }
.rp-wbar i { position:absolute; left:0; right:0; bottom:0; background:#2F7A4C; }
.rp-wb.now .rp-wbar { background:var(--th-accent); }
.rp-wb:not(:disabled):hover .rp-wbar { filter:brightness(.95); }
.rp-wn { order:-1; font-size:12px; font-weight:700; color:var(--ink); } .rp-wl { font-size:12px; color:var(--muted); }
.rp-dot { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; } .rp-dot.rec { background:var(--th-tint); } .rp-dot.adm { background:#2F7A4C; }
.rp-quiet, .rp-soon { display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:22px 12px; border-radius:16px; background:var(--rp-soft); }
.rp-quiet b, .rp-soon b { font-size:15px; color:var(--ink); } .rp-quiet .sub, .rp-soon .sub { display:block; margin-top:4px; }
.rp-why2 { display:flex; flex-direction:column; gap:6px; }

/* half screen: tiles 3 + 2, the panels stacked, the table without the line */
@media (max-width: 1100px) {
  .rp-k5 { grid-template-columns:repeat(6, minmax(0, 1fr)); } .rp-k { grid-column:span 2; } .rp-k:nth-child(4), .rp-k:nth-child(5) { grid-column:span 3; }
  .rp-two { grid-template-columns:minmax(0, 1fr); }
  .rp-ct { --cols:minmax(130px, 2fr) repeat(6, minmax(56px, 1fr)) 20px; } .rp-ct .rp-c-sp { display:none; }
}
/* phone: tiles 2 a row, each coordinator a card with its numbers labelled */
@media (max-width: 720px) {
  .rp-hint { display:none; }
  .rp-k5 { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; } .rp-k, .rp-k:nth-child(4), .rp-k:nth-child(5) { grid-column:auto; padding:16px; } .rp-k.hero { grid-column:1 / -1; }
  .rp-kn { font-size:34px; line-height:40px; }
  .rp-card { padding:16px; }
  .rp-cth { display:none; }
  .rp-cr { grid-template-columns:repeat(3, minmax(0, 1fr)); row-gap:8px; padding:12px 8px; }
  .rp-cr > .rp-c-who { grid-column:1 / -1; } .rp-cr > .rp-chev { display:none; }
  .rp-cr > [data-l] { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:13px; }
  .rp-cr > [data-l]::before { content:attr(data-l); font-size:10px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
  .rp-pill { min-width:40px; height:28px; padding:0 6px; }
  .rp-wk { height:140px; gap:5px; }
  .rp-legend .rp-grow, .rp-legend > .sub { display:none; }
  .rp3 .rp-q:is(:hover, :focus-visible)::after { max-width:220px; }
}

/* the portal's dark mode */
html.dark .rp3 { --rp-g:#6FCF97; --rp-gb:#15301F; --rp-a:#F2C14E; --rp-ab:#352A12; --rp-r:#FF8A7A; --rp-rb:#3A1D19; }
html.dark .rp-wbar, html.dark .rp-dot.rec { background:var(--th-dsoft); } html.dark .rp-wbar i, html.dark .rp-dot.adm { background:#4FB07A; }
html.dark .rp-why2 .rp-bar i { background:var(--th-dmute); }
html.dark .rp-spark.up polyline { stroke:#6FCF97; } html.dark .rp-spark.down polyline { stroke:#FF8A7A; }
html.dark .rp3 .rp-q:is(:hover, :focus-visible)::after { background:var(--th-dtext); color:var(--th-dpage); }
html.dark .rp-k.hero .rp-tr.up, html.dark .rp-k.dark .rp-tr.up { color:#1E6B3F; } html.dark .rp-k.hero .rp-tr.down, html.dark .rp-k.dark .rp-tr.down { color:#B42318; }

/* last week on one page (the Monday summary) */
.rp-lw { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:8px; margin-bottom:14px; }
.rp-lw > div { background:var(--rp-soft); border-radius:14px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.rp-lw b { font-size:22px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; } .rp-lw span { font-size:12px; color:var(--ink2); }
.rp-lw3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; font-size:13.5px; color:var(--ink); }
.rp-lw3 > div { display:flex; flex-direction:column; gap:6px; min-width:0; } .rp-lw3 ol { margin:0; padding-left:18px; }
.rp-lw3 summary { cursor:pointer; } .rp-lw3 details .sub { margin:4px 0 0 14px; }
@media (max-width: 1100px) { .rp-lw { grid-template-columns:repeat(4, minmax(0, 1fr)); } .rp-lw3 { grid-template-columns:minmax(0, 1fr); } }
@media (max-width: 720px) { .rp-lw { grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* a person's day by day inside their row: plain tiles (not the orange / dark first and last tile of the page) */
html.bento main .rp-days .kpis > .kpi { background:var(--rp-card); color:var(--ink); }
html.bento main .rp-days .kpis > .kpi :is(.kpi-label, .kpi-n, .kpi-sub, .sub) { color:inherit; }

/* the clickable numbers: the tile's own colour (the page's dotted link style stays as the "click me" sign in the pills) */
html.dn main:has(#rpList) .rp3 .rp-kn .rp-n { color:inherit; background:none; padding:0; margin:0; font-weight:inherit; text-decoration:none; }
html.dn main:has(#rpList) .rp3 .rp-kn .rp-n:hover { background:none; color:inherit; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; }
html.dn main:has(#rpList) .rp3 .rp-pill .rp-n { color:inherit; background:none; padding:0; margin:0; font-weight:inherit; }
html.dn main:has(#rpList) .rp3 .rp-pill .rp-n:hover { background:none; color:inherit; text-decoration-style:solid; }
/* phone: the tabs scroll sideways in one line */
@media (max-width: 720px) { html main .rp-tabrow .tabs.rp-tabs { flex-wrap:nowrap !important; overflow-x:auto; width:100%; max-width:100%; box-sizing:border-box; scrollbar-width:none; } html main .rp-tabrow .tabs.rp-tabs button { flex:none; } }

/* Fixes (owner via the design chat, Oct 26) */
/* Hold · PNA · NHTD under Lost */
.rp-koff { font-size:12.5px; color:var(--ink2); margin-top:-2px; } .rp-k.dark .rp-koff, .rp-k.hero .rp-koff { color:inherit; opacity:.85; }
html.dn main:has(#rpList) .rp3 .rp-koff .rp-n { padding:0 2px; margin:0; background:none; font-weight:700; }
.rp-all { font-size:13px; font-weight:600; }
/* phone: the title, the period as one dropdown and Export as an icon on one row */
@media (max-width: 720px) {
  html main:has(#rpList) > .head { flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; }
  html main:has(#rpList) > .head > div:first-child { flex:1 1 100%; }
  html main:has(#rpList) > .head .tools { flex:1 1 100%; display:flex; flex-wrap:nowrap; gap:8px; margin:0; }
  html.dn main:has(#rpList) > .head .tools #per { display:block; flex:1 1 auto; min-width:0; height:40px; border-radius:99px; padding:0 14px; font-weight:600; }
  html main:has(#rpList) > .head .tools .rp-per { display:none !important; }
  html main:has(#rpList) > .head .tools #exp { flex:none; width:40px; height:40px; padding:0; justify-content:center; }
  html main:has(#rpList) > .head .tools #exp .rp-exp-t { display:none; }
}

/* Bento look, Team page (owner, Oct 23; mockup b-team and b-t-team-imports on branch design/portal-figma). The shared
   tile / pill look is in bento-pages.css; here the Team's own parts. Look only, under html.bento, while Team is open. */
html.bento:has([data-page=team][aria-pressed=true]) main:not(#_b) {
  /* the number cards: tiles with a big light number; the late / unassigned ones keep their red */
  & .cards { gap:16px; }
  & .cards > .card { padding:22px 22px 20px; }
  & .cards > .card .n { font-size:44px; line-height:52px; font-weight:600; letter-spacing:-1px; }
  & .cards > .card .l { font-size:14px; font-weight:500; color:var(--text-secondary, var(--th-text)); }
  & .cards > .card:last-child { background:var(--bt-dark); color:var(--bt-dark-ink); }
  & .cards > .card:last-child :is(.n, .l) { color:var(--bt-dark-ink); }
  /* the day choice (Today / Yesterday / Pick a day) as pills */
  & .wd-bar { gap:6px; align-items:center; }
  & .wd-bar > .btn { height:34px; padding:0 14px; background:var(--bt-pill); border:0; }
  & .wd-bar > .btn:is([aria-pressed=true], .on, .primary) { background:var(--bt-on); color:var(--bt-on-ink); }
  /* the AI line and the footnotes stay quiet */
  & .aibar { background:var(--bt-pill); border:0; border-radius:999px; }
  & .panel tr.hot td:first-child { font-weight:700; }
  /* two columns (team.js adds them under Bento): the day's work and the workload on the left, Unassigned and the ticks on the right */
  & .bt-cols { display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:0 20px; align-items:start; }
  & .bt-col { min-width:0; }
  & .bt-col > .sec:first-child { margin-top:8px; }
  /* the right column's tables read as rows of facts that wrap (a narrow column; the same cells), the header row hidden */
  & .bt-col:last-child .panel table, & .bt-col:last-child .panel tbody { display:block; }
  & .bt-col:last-child .panel tr:has(> th) { display:none; }
  & .bt-col:last-child .panel tr { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:12px 22px; border-bottom:1px solid var(--bt-line); }
  & .bt-col:last-child .panel tr:last-child { border-bottom:0; }
  & .bt-col:last-child .panel td { padding:0; border:0; }
  & .bt-col:last-child .panel td:first-child { flex:1 1 100%; }
  & .bt-col:last-child .panel td:has(select) { margin-left:auto; }
  & .bt-col:last-child .panel td select { height:36px; min-height:36px; }
}
@media (max-width: 1100px) { html.bento:has([data-page=team][aria-pressed=true]) main:not(#_b) .bt-cols { grid-template-columns:minmax(0, 1fr); } }

/* Bento look, Cottage Helper page (owner, Oct 23; mockups b-helper and b-t-helper-* on branch design/portal-figma). The
   shared tile / pill look is in bento-pages.css; here the page's own parts. Look only, under html.bento, while it is open. */
html.bento:has([data-page=helper][aria-pressed=true]) main:not(#_b) {
  /* the five numbers at the top as tiles with a big light number; the first is the orange hero */
  & .hp-kpis { gap:16px; }
  & .hp-kpis > * { background:var(--bt-tile); border:0; border-radius:var(--bt-r); box-shadow:var(--bt-shadow); padding:22px; }
  & .hp-kpis > * b { font-size:44px; line-height:52px; font-weight:600; letter-spacing:-1px; }
  & .hp-kpis > *:first-child { background:var(--bt-hero); color:var(--bt-hero-ink); }
  & .hp-kpis > *:first-child :is(b, span, .sub) { color:var(--bt-hero-ink) !important; }
  /* the six tabs as pills: dark = selected */
  & .hp-tabs { border-bottom:0; gap:4px; background:var(--bt-pill); border-radius:999px; padding:4px; width:max-content; max-width:100%; }
  & .hp-tabs button { border:0; border-radius:999px; height:34px; padding:0 14px; margin:0; font-weight:600; }
  & .hp-tabs button::after { display:none; }
  & .hp-tabs button:is([aria-selected=true], [aria-pressed=true], .on) { background:var(--bt-on); color:var(--bt-on-ink); }
  & .hp-tabs button .n { background:rgba(127,127,127,.16); color:inherit; }
  /* the search, the filter and Table / Cards as pills */
  & .hp-bar .hp-q, & .hp-bar select { border-radius:999px; }
  & .hp-seg { background:var(--bt-pill); border-radius:999px; padding:3px; }
  & .hp-seg button { border-radius:999px; }
  & .hp-seg button:is([aria-pressed=true], .on) { background:var(--bt-on); color:var(--bt-on-ink); }
  /* People as cards (mockup b-helper): white tiles, the parts as round pills, the three facts on a sunken strip */
  & .hp-people { gap:16px; }
  & .hp-card { border:0; border-radius:var(--bt-r); box-shadow:var(--bt-shadow); padding:22px; gap:14px; background:var(--bt-tile); }
  & .hp-card:hover { box-shadow:0 8px 24px rgba(var(--th-ink-rgb), .08); }
  & .hp-card .hp-lab { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--bt-muted); }
  & .hp-card .hp-state { border-radius:999px; }
  & .hp-parts { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
  & .hp-part { border:0; border-radius:999px; background:var(--bt-soft); padding:8px 12px; white-space:nowrap; line-height:16px; font-size:12px; overflow:hidden; text-overflow:ellipsis; }
  & .hp-part.on { background:#E7F4EC; color:#1E6B3E; }
  & .hp-facts { background:var(--bt-soft); border:0; border-radius:20px; padding:14px 16px; }
  & .hp-foot .btn { border-radius:999px; }
  /* file pickers (Move cases: the Excel import): the choose button as a pill, the file name beside it */
  & input[type=file] { font-size:13px; color:var(--bt-muted); }
  & input[type=file]::file-selector-button { height:40px; padding:0 16px; margin-right:10px; border:0; border-radius:999px; background:var(--bt-field); color:var(--text-primary, var(--th-ink)); font:inherit; font-weight:600; cursor:pointer; }
  & input[type=file]::file-selector-button:hover { background:var(--bt-soft); }
  /* Settings: the emergency switch is the page's dark tile */
  & :is(.dna-card:has(#hcEmerg), #hcEmerg) { background:var(--bt-dark); color:var(--bt-dark-ink); border:0; border-radius:var(--bt-r); box-shadow:none; }
  & .dna-card:has(#hcEmerg) #hcEmerg { background:transparent; padding:0; }
  & :is(.dna-card:has(#hcEmerg), #hcEmerg) :is(span, b, .sec) { color:var(--bt-dark-ink); }
  & :is(.dna-card:has(#hcEmerg), #hcEmerg) .sub { color:var(--bt-dark-sub); }
  & #hcEmerg .btn { background:#fff; color:#B42318; border:0; }
  /* the different-ID line (owner, Oct 23: "it should come in the current design ... I should be able to remove those"):
     a white tile like the numbers below, a small orange mark, pill buttons */
  & .hc-idw { background:var(--bt-tile); color:var(--ink); border:0; border-radius:var(--bt-r); box-shadow:var(--bt-shadow); padding:16px 20px; gap:14px; flex-wrap:wrap; align-items:flex-start; }
  & .hc-idw > svg, & .hc-idw > .ic { flex:none; width:34px; height:34px; padding:8px; border-radius:999px; background:var(--th-tint); color:var(--th-accent2); box-sizing:border-box; }
  & .hc-idw .btn { border-radius:999px; height:34px; padding:0 14px; }
  & .hc-idw details .btn { height:30px; padding:0 12px; }
  & .hc-idw details > div { padding:8px 0 0; border-top:1px solid var(--line); margin-top:8px; }
}
html.bento.dark:has([data-page=helper][aria-pressed=true]) main:not(#_b) .hp-part.on { background:rgba(46,160,90,.18); color:#8FD6A8; }

/* Bento look, the smaller manager pages (owner, Oct 23; mockups b-ai, b-rules, b-rates, b-users, b-help, b-opwdd and their
   b-t-* tabs on branch design/portal-figma). The shared tile / pill look is in bento-pages.css; here each page's own
   parts. Look only, under html.bento, while that page is open. */

/* AI: the state line and the numbers as tiles; Latest readings / What people corrected are the shared pill tabs */
html.bento:has([data-page=ai][aria-pressed=true]) main:not(#_b) {
  /* the state (Switched off / Reading notes / Waiting) is the page's dark tile */
  & .aihero { background:var(--bt-dark); color:var(--bt-dark-ink); border:0; border-radius:var(--bt-r); box-shadow:none; padding:22px; }
  & .aihero :is(.aistate, b) { color:var(--bt-dark-ink); background:transparent; }
  & .aihero .sub { color:var(--bt-dark-sub); }
  & .card .n { font-size:44px; line-height:52px; font-weight:600; letter-spacing:-1px; }
  & .admin-fold { background:var(--bt-tile); border:0; border-radius:var(--bt-r); }
  & .alert.warn { border-radius:var(--bt-r); }
}

/* Rate sheet: the best options as rounder tiles */
html.bento:has([data-page=rates][aria-pressed=true]) main:not(#_b) {
  & .tabs.dn-rtabs { margin-bottom:8px; }
  & .rs-best button, & .rs-best [role=button] { border-radius:22px; }
  /* the boxes inside the table (Edit): compact, not the 44px page fields */
  & table.rs :is(.rs-in, .rs-tin) { height:34px; min-height:34px; padding:4px 10px; border-radius:10px; }
  & table.rs .rs-in { padding-inline:6px; }
  /* the places: the comma goes after a place, never at the start of a line */
  & .rs-chip + .rs-chip::before { content:none; }
  & .rs-chip:not(:last-child)::after { content:', '; }
  /* How it works: the worked example is the page's dark tile */
  & .dn-how > .dn-howcol:last-child { background:var(--bt-dark); color:var(--bt-dark-ink); border:0; border-radius:var(--bt-r); box-shadow:none; padding:22px; }
  & .dn-how > .dn-howcol:last-child :is(.sec, dt, dd, b) { color:var(--bt-dark-ink); }
  & .dn-how > .dn-howcol:last-child .sub { color:var(--bt-dark-sub); }
}

/* Users: People / HHA robot / Names in HHA notes are the shared pill tabs; Add person the dark pill */
html.bento:has([data-page=users][aria-pressed=true]) main:not(#_b) {
  & > .head .tools .btn { background:var(--bt-dark); color:var(--bt-dark-ink); border-color:var(--bt-dark); }
  /* the HHA robot (its sign-in and the last downloads) is the page's dark tile; its fields and lines in light ink */
  & #robot > .panel { background:var(--bt-dark); color:var(--bt-dark-ink); border:0; border-radius:var(--bt-r); box-shadow:none; padding:22px; }
  & #robot > .panel :is(.sec, b, .field) { color:var(--bt-dark-ink); }
  & #robot > .panel :is(.sub, .hist-meta) { color:var(--bt-dark-sub); }
  & #robot > .panel :is(input, select) { background-color:rgba(255,255,255,.08); color:var(--bt-dark-ink); }
  & #robot > .panel .btn:not(.primary) { background:rgba(255,255,255,.1); color:var(--bt-dark-ink); border:0; }
  & #robot > .panel .btn.primary { background:#fff; color:var(--th-ink); border:0; }
  & #robot > .panel :is(.panel, table, thead, tbody, tr, td, th) { background:transparent; color:var(--bt-dark-ink); box-shadow:none; }
  & #robot > .panel :is(td, th) { border-color:rgba(255,255,255,.08); }
  & #robot > .panel th { color:var(--bt-dark-sub); }
  & #robot > .panel tr.hot td { background:rgba(216,58,46,.14); }
  & #robot > .panel :is(.panel, table) { border:1px solid rgba(255,255,255,.08); border-radius:18px; }
}

/* Help: the chapters as a pill list, the guide as one tile */
html.bento:has([data-page=help][aria-pressed=true]) main:not(#_b) {
  & .panel.guide { padding:24px 28px; }
  & .panel.guide :is(nav, .toc) a, & .panel.guide :is(nav, .toc) button { border-radius:999px; }
}

/* OPWDD: the six steps and the filters as pills */
html.bento:has(main.dnp-opwdd) main:not(#_b) {
  /* the six steps as tiles: the step's name on top, its count big under it; the step you picked is orange */
  & .pb-reasons { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:12px; padding:0; background:transparent; border-radius:0; box-shadow:none; }
  & .pb-reasons > * { display:block; position:relative; height:auto; min-height:108px; padding:16px 16px 62px;
    border:0; border-radius:var(--bt-r); background:var(--bt-tile); box-shadow:var(--bt-shadow); color:var(--text-primary, var(--th-ink)); font-size:13px; font-weight:600; line-height:18px; text-align:left; white-space:normal; }
  & .pb-reasons > * b { position:absolute; left:16px; bottom:12px; font-size:40px; line-height:44px; font-weight:600; letter-spacing:-1px; color:inherit; background:none; padding:0; }
  & .pb-reasons > *:is([aria-pressed=true], .on) { background:var(--bt-hero); color:var(--bt-hero-ink); }
  & .filterbar.pb-filters { background:transparent; padding:0; }
  & .filterbar.pb-filters > * { border-radius:999px; }
}

/* Bento look on a phone, the rules chat's pages (owner, Oct 23; mockups b-phone* on branch design/portal-figma): Report,
   Team, AI, Cottage Helper, Rate sheet, Users, Help, OPWDD. Under html.bento, inside the phone width, while one of those
   pages is open. Tiles two a row, pill tabs and choices scroll sideways in one line, a smaller title. Look only. */
@media (max-width: 600px) {
  html.bento:is(:has([data-page=report][aria-pressed=true]), :has([data-page=team][aria-pressed=true]), :has([data-page=ai][aria-pressed=true]), :has([data-page=helper][aria-pressed=true]), :has([data-page=rates][aria-pressed=true]), :has([data-page=users][aria-pressed=true]), :has([data-page=help][aria-pressed=true]), :has(main.dnp-opwdd)) main:not(#_b) {
    --bt-r: 22px;
    & > .head h1 { font-size:30px; line-height:36px; letter-spacing:-0.5px; }
    & :is(.kpis, .cards, .hp-kpis) { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
    & :is(.kpi, .cards > .card, .hp-kpis > *) { padding:16px; }
    & :is(.kpi .kpi-n, .cards > .card .n, .hp-kpis > * b) { font-size:32px; line-height:38px; }
    & :is(.tabs, .hp-tabs, .seg, .pb-reasons) { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; max-width:100%; }
    & :is(.tabs, .hp-tabs, .seg, .pb-reasons)::-webkit-scrollbar { display:none; }
    & :is(.tabs, .hp-tabs, .seg, .pb-reasons) > * { flex:0 0 auto; white-space:nowrap; }
    & .howto { border-radius:18px; }
    & > .head .tools { width:100%; flex-wrap:wrap; }
    /* OPWDD: the filters stacked (search, then the day and Same day last week, then the two choices), the step tiles three a row */
    & .filterbar.pb-filters { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; padding:0; border-radius:0; overflow:visible; }
    & .pb-filters > #opQ { grid-column:1 / -1; width:100%; }
    & .pb-filters > label { display:flex; min-width:0; font-size:0; gap:0; padding:0; margin:0; }   /* the words stay for screen readers via the label; the field shows the date */
    & .pb-filters > label input { flex:1 1 auto; min-width:0; width:100%; font-size:14px; padding-inline:12px; }
    & .pb-filters > .btn { min-width:0; padding:0 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    & .pb-filters > select { min-width:0; width:100%; }
    & .pb-filters > .sub:last-child { grid-column:1 / -1; }
    & .pb-reasons { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); overflow:visible; padding:0; gap:8px; }
    & .pb-reasons > * { white-space:normal; min-height:92px; padding:12px 12px 48px; }
    & .pb-reasons > * b { left:12px; bottom:8px; }
    & .pb-reasons > * b { font-size:30px; line-height:34px; }
    /* Help: the guide's sections as one line of pills above the text (not a sticky box over it) */
    & .dnh-toc { position:static; flex:1 1 100%; max-width:100%; flex-direction:row; overflow-x:auto; scrollbar-width:none; padding:6px; border-radius:999px; }
    & .dnh-toc::-webkit-scrollbar { display:none; }
    & .dnh-toc button { flex:0 0 auto; white-space:nowrap; border-radius:999px; }
  }
}

/* The Bento shell on a phone (mockup b-phone-overview): a slim top row (the logo, round search, sign out, focus, bell, the
   avatar), the main pages as a dark rounded tab bar fixed at the bottom (icon over label, the page you are on orange), the
   rail's pages (AI, Helper, Rate sheet, Users, Help, My account, light / dark) as one line of round buttons under the page.
   The same buttons as on the desktop, only placed differently. */
@media (max-width: 600px) {
  html.bento .shell { display:flex; flex-direction:column; margin:0; padding:10px 14px calc(96px + env(safe-area-inset-bottom)); gap:14px; border-radius:0; min-height:100vh; box-shadow:none; }
  html.bento .page { order:1; }
  /* the top row */
  html.bento .topbar { position:sticky; top:0; order:0; flex-wrap:nowrap; gap:6px; padding:6px 0; margin:0 -14px; padding-inline:14px; background:var(--b-app); }
  html.bento .topbar .logo { height:40px; padding:0 12px; margin-right:auto; }
  html.bento .topbar .logo img { height:22px; }
  html.bento .tb-right { gap:6px; }
  html.bento .tb-right > .btn, html.bento .tb-right .bell, html.bento .tb-right #bellSlot > button, html.bento .tb-right .me .av { width:40px; height:40px; }
  html.bento .tb-right #bellSlot { gap:6px; }
  /* search: a round button; tapping it opens the full-width field over the top row */
  html.bento .tb-search { position:relative; width:40px; height:40px; flex:none; padding:0; justify-content:center; overflow:hidden; }
  html.bento .tb-search input { position:absolute; inset:0; width:100%; height:100%; padding:0 14px 0 42px; opacity:0; cursor:pointer; }
  html.bento .tb-search > svg { position:relative; z-index:1; pointer-events:none; }
  html.bento .tb-search:focus-within { position:absolute; left:14px; right:14px; top:6px; width:auto; z-index:30; justify-content:flex-start; padding-left:14px; }
  html.bento .tb-search:focus-within input { opacity:1; cursor:text; }
  /* the bottom tab bar */
  html.bento .b-pills { position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:25; order:9; width:auto; margin:0;
    padding:6px; gap:2px; border-radius:26px; background:var(--th-ink); box-shadow:0 12px 30px rgba(var(--th-ink-rgb), .28); justify-content:flex-start; }
  html.bento.dark .b-pills { background:var(--th-dcard); box-shadow:0 12px 30px rgba(0,0,0,.5); }
  html.bento .b-pills button { position:relative; flex:1 0 56px; flex-direction:column; justify-content:center; gap:3px; height:56px; padding:0 4px; border-radius:20px;
    color:var(--th-line2); font-size:11px; font-weight:600; }
  html.bento .b-pills button svg, html.bento .b-pills button .ic { display:block; width:20px; height:20px; color:inherit; }
  html.bento .b-pills button:hover { background:transparent; color:#fff; }
  html.bento .b-pills button[aria-pressed=true] { background:transparent; color:var(--th-peach); }   /* light blue on the navy bar: AA */
  html.bento .b-pills .pill { position:absolute; top:4px; left:calc(50% + 6px); min-width:16px; line-height:16px; padding:0 4px; font-size:10px; background:#D83A2E; color:#fff; }
  html.bento .b-pills button[aria-pressed=true] .pill { background:#D83A2E; color:#fff; }
  /* the rail's pages: one line of round buttons under the page, scrolling sideways */
  html.bento .side { order:2; position:static; align-self:stretch; width:auto; max-width:100%; min-height:0; height:auto; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; gap:8px;
    padding:8px; border-radius:99px; overflow-x:auto; scrollbar-width:none; }
  html.bento .side::-webkit-scrollbar { display:none; }
  html.bento .side nav { flex-direction:row; flex-wrap:nowrap; gap:8px; }
  html.bento .side nav button, html.bento .side .aipulse { flex:none; width:44px; min-width:0; height:44px; min-height:0; padding:0; flex-direction:row; }
  html.bento .side nav button::after { display:none; }
  html.bento .side .navsep { width:1px; height:24px; margin:0 2px; align-self:center; }
  html.bento .b-rail-foot { margin:0 0 0 auto; flex-direction:row; }
  /* My day's floating "Start calling" sits above the tab bar */
  html.bento .head .sq-btn { bottom:calc(84px + env(safe-area-inset-bottom)); }
  html.bento main { padding-bottom:16px; }
}
/* Phone + the v6 glass header (v6 audit, Oct 26): a backdrop-filter on the top bar makes it the box that position:fixed
   children are placed in, so the bottom page menu jumped up over Sign out and Focus once the page scrolled. On a phone the
   scrolled top bar is solid instead of frosted, and the menu stays at the bottom. */
@media (max-width: 600px) {
  html.bento .topbar, html.bento.b-scrolled .topbar, html.bento.v6-glass .topbar { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }   /* every state: any blur would re-anchor the fixed menu */
  html.bento.v6-glass .topbar.topbar, html.bento.b-scrolled .topbar.topbar { background:var(--b-app); }
}
/* Users › Names in HHA notes on a phone (v6 audit): one card per HHA user name, the full-name box full width, nothing off the edge */
@media (max-width: 600px) {
  .us-auth, .us-auth tbody, .us-auth tr, .us-auth td { display:block; width:100%; }
  .us-auth tr:first-child { display:none; }
  .us-auth tr { padding:10px 0; border-bottom:1px solid var(--line); }
  .us-auth td { padding:3px 0; border:0; }
  .us-auth td[data-l]::before { content:attr(data-l) ": "; color:var(--muted); font-size:12px; }
  .us-auth input, .us-auth select { width:100%; min-width:0 !important; }
}
/* dark mode: the rows still waiting for a name (tr.warnr, cream #FFFBF0 in light) get a dark warm tint, not cream under cream
   text (chat 3's contrast check, Oct 26; on every width, the stacked phone cards included) */
html.dn.dark main.dna tr.warnr td, html.dark .us-auth tr.warnr, html.dark .us-auth tr.warnr td { background:rgba(224,181,74,.10); }
html.dn.dark main.dna-users #staff tr.warnr input[data-name] { background:rgba(224,181,74,.14); border-color:#B58A2A; color:#F3EEE7; }
/* a 16 px right gutter on the top bar of a small phone (design lead, Oct 27: the avatar touched the edge at 360 px) */
@media (max-width: 400px) {
  html.bento .topbar { padding-right:16px; gap:4px; }
  html.bento .topbar .logo { padding:0 9px; }
  html.bento .topbar .logo img { height:20px; }
  html.bento .tb-right { gap:4px; }
}

/* New features (owner, Oct 23; design/features on branch design/portal-figma): the Forms library, profiles and Meet the team.
   Bento look (bento.css tokens). Behind the managers' Preview for now (web/js/app.js). */
:root { --fl-ok: #1E7A44; --fl-ok-bg: #E4F4EA; --fl-ok-line: #9AD3AE; --fl-chk: var(--th-accent2); --fl-chk-bg: var(--th-tint); --fl-chk-line: var(--th-peach); --fl-sel: var(--th-accent3); --fl-sel-bg: var(--th-tint); }
html.dark { --fl-ok: #8FD6A8; --fl-ok-bg: rgba(46,160,90,.16); --fl-ok-line: rgba(143,214,168,.45); --fl-chk: var(--th-daccent); --fl-chk-bg: rgba(var(--th-daccent-rgb), .16); --fl-chk-line: rgba(var(--th-daccent-rgb), .5); --fl-sel: var(--th-daccent); --fl-sel-bg: rgba(var(--th-daccent-rgb), .28); }

/* ---- the head: a kicker, the title, the page's buttons, big numbers on the right ---- */
main.dnp-forms .fl-head { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:end; gap:16px 28px; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:18px; }
html main.dnp-forms:not(#_b) .fl-head .eyebrow { display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--text-tertiary, var(--th-mute)); margin-bottom:6px; }
html main.dnp-forms:not(#_b) .fl-head h1 { font-size:44px; line-height:52px; font-weight:600; letter-spacing:-.9px; margin:0; }
main.dnp-forms .fl-head .tools { display:flex; gap:10px; align-items:center; }
main.dnp-forms .fl-up { background:var(--th-accent2); border-color:var(--th-accent2); color:#fff; height:44px; padding:0 20px; border-radius:99px; font-weight:700; }
main.dnp-forms .fl-up:hover { background:var(--th-accent2); border-color:var(--th-accent2); }
main.dnp-forms .fl-stats { display:flex; gap:34px; }
main.dnp-forms .fl-stats div { display:flex; flex-direction:column; min-width:80px; }
main.dnp-forms .fl-stats span { font-size:14px; color:var(--text-secondary, var(--th-text)); }
main.dnp-forms .fl-stats b { font-size:44px; line-height:52px; font-weight:600; letter-spacing:-1px; display:flex; align-items:center; gap:8px; }
main.dnp-forms .fl-stats b em { font-style:normal; font-size:12px; font-weight:700; line-height:1; background:#1E9E52; color:#fff; border-radius:99px; padding:12px 10px; }

/* ---- tabs and search ---- */
main.dnp-forms .fl-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
main.dnp-forms .seg { display:inline-flex; gap:2px; padding:4px; border-radius:99px; background:var(--b-pill, #fff); }
main.dnp-forms .seg button { border:0; background:transparent; border-radius:99px; height:34px; padding:0 14px; font-weight:600; color:var(--ink2); cursor:pointer; }
main.dnp-forms .seg button[aria-pressed=true] { background:var(--b-pill-on, var(--th-ink)); color:var(--b-pill-on-ink, #fff); }
main.dnp-forms .fl-find { display:flex; align-items:center; gap:10px; height:44px; padding:0 18px; border-radius:99px; background:var(--b-tile, #fff); min-width:280px; color:var(--muted); }
main.dnp-forms .fl-find input { border:0; background:transparent; height:auto; min-height:0; padding:0; box-shadow:none; flex:1; color:var(--ink); font:inherit; }

/* ---- the grid of forms ---- */
main.dnp-forms .fl-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
main.dnp-forms .fl-card, main.dnp-forms .fl-how { background:var(--b-tile, #fff); border-radius:var(--b-r-tile, 28px); padding:16px 16px 18px; box-shadow:var(--b-tile-shadow); display:flex; flex-direction:column; gap:6px; cursor:pointer; min-width:0; }
main.dnp-forms .fl-card:hover { box-shadow:0 10px 28px rgba(var(--th-ink-rgb), .08); }
main.dnp-forms .fl-thumb { height:150px; border-radius:18px; background:var(--b-soft, var(--th-soft)); display:flex; justify-content:center; align-items:flex-end; overflow:hidden; margin-bottom:10px; }
main.dnp-forms .fl-sheet { width:116px; height:134px; background:#fff; border-radius:6px 6px 0 0; padding:14px 11px; display:flex; flex-direction:column; gap:9px; box-shadow:0 1px 2px rgba(var(--th-ink-rgb), .06); }
html.dark main.dnp-forms .fl-sheet { background:var(--th-dcard); }
main.dnp-forms .fl-sheet i { height:6px; border-radius:3px; background:var(--th-soft2); width:60%; }
main.dnp-forms .fl-sheet i.g { background:var(--fl-ok-bg); box-shadow:inset 0 0 0 1px var(--fl-ok-line); width:100%; height:8px; }
main.dnp-forms .fl-sheet i.w { background:var(--fl-chk-bg); box-shadow:inset 0 0 0 1px var(--fl-chk-line); width:100%; height:8px; }
html.dark main.dnp-forms .fl-sheet i.ln { background:rgba(255,255,255,.08); }
main.dnp-forms .fl-name { font-size:17px; line-height:24px; font-weight:600; }
main.dnp-forms .fl-card .sub { font-size:13px; line-height:18px; color:var(--muted); }
main.dnp-forms .fl-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:12px; }
.fl-pill { display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:99px; font-size:12.5px; font-weight:700; }
.fl-pill.ok { background:var(--fl-ok-bg); color:var(--fl-ok); } .fl-pill.warn { background:#FFF1D6; color:#8A5A00; } .fl-pill.off { background:var(--b-soft, var(--th-soft)); color:var(--muted); } .fl-pill.read { background:#E6EEFB; color:#2D56A6; }
html.dark .fl-pill.warn { background:rgba(240,180,60,.16); color:#F2C46A; } html.dark .fl-pill.read { background:rgba(80,130,220,.2); color:#A9C4F2; }
main.dnp-forms .fl-more { width:34px; height:34px; border-radius:99px; border:0; background:var(--b-soft, var(--th-soft)); color:var(--ink2); display:flex; align-items:center; justify-content:center; cursor:pointer; }
main.dnp-forms .fl-prog, .fl-read .fl-prog { height:8px; border-radius:99px; background:var(--b-soft, var(--th-soft)); overflow:hidden; margin:6px 0 2px; }
main.dnp-forms .fl-prog i, .fl-read .fl-prog i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--th-accent),var(--th-accent2)); transition:width .4s ease; }
/* the dark "drop a PDF" tile */
main.dnp-forms .fl-drop { background:var(--b-dark, var(--th-ink)); color:var(--b-dark-ink, var(--th-soft2)); border-radius:var(--b-r-tile, 28px); padding:14px; }
main.dnp-forms .fl-drop-in { height:100%; border:2px dashed rgba(255,255,255,.22); border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; padding:24px 18px; }
main.dnp-forms .fl-drop.over .fl-drop-in { border-color:var(--th-accent); background:rgba(var(--th-accent-rgb), .08); }
main.dnp-forms .fl-drop-ic { width:56px; height:56px; border-radius:99px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; }
main.dnp-forms .fl-drop b { font-size:17px; } main.dnp-forms .fl-drop .sub { color:var(--b-dark-sub, var(--th-line2)); font-size:13px; line-height:20px; }
main.dnp-forms .fl-drop .btn { background:#fff; color:var(--th-ink); border:0; border-radius:99px; height:40px; padding:0 18px; font-weight:700; }
main.dnp-forms .fl-how { cursor:default; gap:14px; } main.dnp-forms .fl-how b { font-size:13px; }
main.dnp-forms .fl-how ol { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
main.dnp-forms .fl-how li { display:grid; grid-template-columns:26px minmax(0,1fr); gap:10px; font-size:14px; line-height:20px; }
main.dnp-forms .fl-how li span { width:22px; height:22px; border-radius:99px; background:var(--fl-chk-bg); color:var(--fl-chk); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.fl-menu { position:absolute; z-index:60; width:260px; background:var(--card, #fff); border-radius:18px; box-shadow:0 18px 40px rgba(var(--th-ink-rgb), .18); padding:8px; display:flex; flex-direction:column; }
.fl-menu button { text-align:left; border:0; background:none; padding:10px 12px; border-radius:12px; font:inherit; cursor:pointer; color:var(--ink); }
.fl-menu button:hover { background:var(--b-soft, var(--th-soft)); } .fl-menu .fl-del { color:#B42318; } html.dark .fl-menu .fl-del { color:#F59E8B; } .fl-menu .sub { padding:6px 12px 4px; font-size:12px; }

/* ---- Add a form (a sheet over the blurred page) ---- */
.fl-scrim { position:fixed; inset:0; z-index:90; background:rgba(var(--th-ink-rgb), .22); backdrop-filter:blur(6px); display:flex; align-items:flex-start; justify-content:flex-end; padding:120px 56px 24px; }
.fl-sheet-box { width:min(560px, 100%); background:var(--card, #fff); border-radius:28px; padding:24px 26px 22px; box-shadow:0 30px 70px rgba(var(--th-ink-rgb), .25); display:flex; flex-direction:column; gap:14px; }
.fl-sh-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; }
.fl-sh-head b { font-size:22px; font-weight:600; display:block; } .fl-sh-head .sub { font-size:12.5px; }
.fl-sh-ic { width:44px; height:44px; border-radius:99px; background:var(--fl-chk-bg); color:var(--fl-chk); display:flex; align-items:center; justify-content:center; }
.fl-x { width:36px; height:36px; border-radius:99px; border:0; background:var(--b-soft, var(--th-soft)); cursor:pointer; color:var(--ink); }
.fl-lab { display:flex; flex-direction:column; gap:8px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.fl-lab input { height:44px; border-radius:99px; border:0; background:var(--b-soft, var(--th-soft)); padding:0 16px; font:inherit; font-size:15px; text-transform:none; letter-spacing:0; color:var(--ink); }
.fl-lab input:focus { outline:0; box-shadow:0 0 0 2px var(--th-accent), 0 0 0 6px rgba(var(--th-accent-rgb), .18); }
.fl-two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fl-read { background:var(--b-soft, var(--th-tint)); border-radius:20px; padding:16px; }
.fl-read-h { display:flex; align-items:center; gap:8px; color:var(--th-accent2); } .fl-read-h b { color:var(--ink); } .fl-read-h .sub { margin-left:auto; }
.fl-steps { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:14px; }
.fl-steps li { display:flex; align-items:center; gap:10px; color:var(--muted); } .fl-steps li.done { color:var(--ink); } .fl-steps li.done svg { color:var(--fl-ok); } .fl-steps li.now { color:var(--ink); } .fl-steps li.now svg { color:var(--th-accent2); }
.fl-steps li i { width:15px; height:15px; border-radius:99px; border:1.5px solid var(--line); display:inline-block; }
.fl-sh-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; } .fl-sh-foot .sub { font-size:12.5px; }
.fl-sh-foot .btn.primary { height:44px; border-radius:99px; padding:0 20px; }

/* ---- Check the matches ---- */
main.fl-editing .fl-test { display:inline-flex; gap:6px; align-items:center; background:var(--b-soft, var(--th-soft)); border-radius:99px; padding:4px 4px 4px 14px; }
main.fl-editing .fl-test input { width:96px; height:36px; min-height:0; border:0; background:transparent; padding:0; box-shadow:none; font:inherit; color:var(--ink); }
main.fl-editing .fl-test .btn { height:36px; border-radius:99px; border:0; background:var(--b-tile, #fff); }
main.dnp-forms .fl-map { display:grid; grid-template-columns:minmax(360px, 460px) minmax(0,1fr); gap:16px; align-items:start; }
main.dnp-forms .fl-map.big { grid-template-columns:minmax(0, 1.35fr) minmax(360px, 1fr); }
main.dnp-forms .fl-page-tile, main.dnp-forms .fl-list-tile { background:var(--b-tile, #fff); border-radius:var(--b-r-tile, 28px); padding:22px; box-shadow:var(--b-tile-shadow); }
main.dnp-forms .fl-page-tile { position:sticky; top:84px; }
main.dnp-forms .fl-ptabs { display:flex; align-items:center; gap:14px; margin-bottom:16px; } main.dnp-forms .fl-ptabs .seg { background:var(--b-soft, var(--th-soft)); } main.dnp-forms .fl-ptabs .sub { font-size:12.5px; }
main.dnp-forms .fl-page { position:relative; width:100%; background:#fff; border-radius:12px; box-shadow:0 1px 2px rgba(var(--th-ink-rgb), .08), 0 8px 24px rgba(var(--th-ink-rgb), .06); overflow:hidden; }
html.dark main.dnp-forms .fl-page { background:var(--th-dcard); }
main.dnp-forms .fl-box { position:absolute; border-radius:3px; border:1.2px solid var(--fl-ok-line); background:var(--fl-ok-bg); padding:0; cursor:pointer; display:flex; align-items:flex-start; }
main.dnp-forms .fl-box span { font-size:9px; line-height:1; font-weight:700; padding:1px 2px; color:var(--fl-ok); }
main.dnp-forms .fl-box.chk { border-color:var(--fl-chk-line); background:var(--fl-chk-bg); } main.dnp-forms .fl-box.chk span { color:var(--fl-chk); }
main.dnp-forms .fl-box.none { border-color:var(--line); background:transparent; } main.dnp-forms .fl-box.none span { color:var(--muted); }
main.dnp-forms .fl-box.sel { border-color:var(--fl-sel); background:var(--fl-sel-bg); box-shadow:0 0 0 3px rgba(var(--th-accent2-rgb), .2); z-index:2; } main.dnp-forms .fl-box.sel span { color:var(--fl-sel); }
main.dnp-forms .fl-legend { display:flex; justify-content:center; gap:8px; margin-top:16px; }
main.dnp-forms .fl-legend span { font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:99px; }
.fl-legend .ok { background:var(--fl-ok-bg); color:var(--fl-ok); } .fl-legend .chk { background:#FFF1D6; color:#8A5A00; } .fl-legend .sel { background:var(--fl-sel-bg); color:var(--fl-sel); }
main.dnp-forms .fl-lh { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; } main.dnp-forms .fl-lh b { font-size:20px; font-weight:600; }
main.dnp-forms .fl-lh .seg { background:var(--b-soft, var(--th-soft)); }
main.dnp-forms .fl-row { display:grid; grid-template-columns:30px minmax(0,1fr) minmax(180px, 320px) 86px; gap:12px; align-items:center; padding:9px 8px; border-bottom:1px solid var(--th-soft2); border-radius:14px; }
html.dark main.dnp-forms .fl-row { border-bottom-color:rgba(255,255,255,.06); }
main.dnp-forms .fl-row.fl-rh { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding-top:0; }
main.dnp-forms .fl-row.sel { background:var(--fl-chk-bg); border-bottom-color:transparent; }
main.dnp-forms .fl-n { width:24px; height:24px; border-radius:99px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; background:var(--b-soft, var(--th-soft)); color:var(--ink2); }
main.dnp-forms .fl-n.chk { background:var(--fl-chk-bg); color:var(--fl-chk); } main.dnp-forms .fl-row.sel .fl-n { background:var(--th-accent2); color:#fff; }
main.dnp-forms .fl-bn { font-size:14.5px; font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; } main.dnp-forms .fl-bn em { display:block; font-style:normal; font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
main.dnp-forms .fl-row select { height:40px; min-height:40px; border-radius:99px; border:1.5px solid transparent; background-color:var(--b-soft, var(--th-soft)); padding:0 34px 0 14px; font:inherit; font-size:14px; color:var(--ink); width:100%; }
main.dnp-forms .fl-row select.chk { border-color:var(--fl-chk-line); background-color:var(--fl-chk-bg); }
main.dnp-forms .fl-row.sel select { border-color:var(--th-accent2); background-color:var(--card, #fff); }
main.dnp-forms .fl-conf { display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 10px; border-radius:99px; border:0; font-size:12.5px; font-weight:700; cursor:pointer; justify-self:start; }
main.dnp-forms .fl-conf.ok { background:var(--fl-ok-bg); color:var(--fl-ok); } main.dnp-forms .fl-conf.chk { background:#FFF1D6; color:#8A5A00; }
main.dnp-forms .fl-q { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; margin-top:14px; padding:14px 16px; border-radius:20px; background:var(--fl-chk-bg); color:var(--ink); font-size:14px; line-height:20px; }
main.dnp-forms .fl-q > svg { color:var(--th-accent2); } main.dnp-forms .fl-q .btn { background:var(--b-dark, var(--th-ink)); color:var(--b-dark-ink, #fff); border:0; height:40px; border-radius:99px; padding:0 16px; font-weight:700; }

/* half a screen and a phone */
@media (max-width: 1240px) { main.dnp-forms .fl-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } main.dnp-forms .fl-head { grid-template-columns:minmax(0,1fr) auto; } main.dnp-forms .fl-stats { grid-column:1 / -1; } }
@media (max-width: 1100px) { main.dnp-forms .fl-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } main.dnp-forms .fl-map { grid-template-columns:minmax(0,1fr); } main.dnp-forms .fl-page-tile { position:static; max-width:520px; } }
@media (max-width: 600px) {
  main.dnp-forms .fl-head { grid-template-columns:minmax(0,1fr); } html main.dnp-forms:not(#_b) .fl-head h1 { font-size:30px; line-height:36px; }
  main.dnp-forms .fl-stats { gap:18px; } main.dnp-forms .fl-stats b { font-size:30px; line-height:36px; }
  main.dnp-forms .fl-grid { grid-template-columns:minmax(0,1fr); } main.dnp-forms .fl-find { min-width:0; width:100%; } main.dnp-forms .fl-bar .seg { overflow-x:auto; max-width:100%; }
  main.dnp-forms .fl-row { grid-template-columns:26px minmax(0,1fr); } main.dnp-forms .fl-row select { grid-column:2; } main.dnp-forms .fl-row .fl-conf, main.dnp-forms .fl-row > .sub { grid-column:2; } main.dnp-forms .fl-row.fl-rh { display:none; }
  .fl-scrim { padding:12px; align-items:flex-end; } .fl-two { grid-template-columns:1fr; }
  main.fl-editing .fl-head .tools { flex-wrap:wrap; }
}

/* ==== Profiles and Meet the team (web/js/meet.js; f-profile, f-team, f-team-dark, f-phone) ==== */
/* the card colours: all blues (Oct 29); the keys keep their old names (see .pf-g-* in people-dir.css) */
:root { --pf-orange:var(--th-peach); --pf-orange2:var(--th-accent); --pf-blue:#C9DAF3; --pf-green:#CBEAF0; --pf-purple:#DCDDF7; --pf-yellow:#CFE8FA; --pf-red:#D9DEF2; --pf-dark:var(--th-ink); }
html.dark { --pf-orange:var(--th-daccent2); --pf-blue:#26364F; --pf-green:#173A42; --pf-purple:#262A52; --pf-yellow:#18344D; --pf-red:#2B3150; --pf-dark:var(--th-dpage2); }
.pf-c-orange { --pf-bg:var(--pf-orange); } .pf-c-blue { --pf-bg:var(--pf-blue); } .pf-c-green { --pf-bg:var(--pf-green); } .pf-c-purple { --pf-bg:var(--pf-purple); }
.pf-c-yellow { --pf-bg:var(--pf-yellow); } .pf-c-red { --pf-bg:var(--pf-red); } .pf-c-dark { --pf-bg:var(--pf-dark); }
.pf-face { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; object-fit:cover; background:var(--th-tint); color:var(--th-accent3); font-weight:700; flex:none; }
html.dark .pf-face.pf-ini { background:var(--th-dsoft); color:var(--th-daccent); }
.pf-face.pf-sm { width:40px; height:40px; font-size:14px; } .pf-face.pf-mid { width:72px; height:72px; font-size:24px; } .pf-face.pf-big { width:112px; height:112px; font-size:36px; }
.pf-status { display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 12px; border-radius:99px; background:#fff; color:var(--th-ink); font-size:13px; font-weight:700; box-shadow:0 1px 3px rgba(var(--th-ink-rgb), .12); }
html.dark .pf-status { background:var(--th-dpage); color:var(--th-dtext); }
.pf-badges { display:flex; flex-wrap:wrap; gap:8px; }
.pf-badge { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px 0 8px; border-radius:99px; background:var(--b-soft, var(--th-soft)); font-size:13px; font-weight:700; color:var(--ink); }
.pf-badge i { font-style:normal; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; font-size:12px; }
html.dark .pf-badge { background:rgba(255,255,255,.08); } html.dark .pf-badge i { background:rgba(255,255,255,.1); }
main.dnp-account .dna[hidden], .pf-box[hidden], .pf-tabbar [hidden], main.dnp-account .pf-off { display:none !important; }
.pf-tabbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 18px; flex-wrap:wrap; }
.pf-tabbar .seg, main.dnp-meet .seg, .pf-tones { display:inline-flex; gap:2px; padding:4px; border-radius:99px; background:var(--b-pill, #fff); }
.pf-tabbar .seg button, main.dnp-meet .seg button, .pf-tones button { border:0; background:transparent; border-radius:99px; height:34px; padding:0 14px; font-weight:600; color:var(--ink2); cursor:pointer; font:inherit; font-weight:600; }
.pf-tabbar .seg button[aria-pressed=true], main.dnp-meet .seg button[aria-pressed=true], .pf-tones button[aria-pressed=true] { background:var(--b-pill-on, var(--th-ink)); color:var(--b-pill-on-ink, #fff); }
.pf-tabbar > .btn, main.dnp-meet .mt-head .btn { border-radius:99px; height:40px; }

/* ---- My profile ---- */
.pf-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
.pf-card, .pf-edit { background:var(--b-tile, #fff); border-radius:var(--b-r-tile, 28px); box-shadow:var(--b-tile-shadow); overflow:hidden; }
.pf-cover { height:150px; background:linear-gradient(135deg, var(--pf-bg), color-mix(in srgb, var(--pf-bg) 55%, var(--th-accent2))); display:flex; justify-content:flex-end; align-items:flex-start; padding:16px; position:relative; }
.pf-c-dark .pf-cover { background:linear-gradient(135deg, var(--th-ink), var(--th-ink)); }
.pf-who { display:flex; align-items:flex-end; gap:16px; padding:0 24px; margin-top:-56px; position:relative; }
.pf-who .pf-big { border:5px solid var(--b-tile, #fff); width:122px; height:122px; }
.pf-who h2 { margin:0 0 2px; font-size:28px; line-height:34px; font-weight:600; letter-spacing:-.4px; }
.pf-who .sub { font-size:13px; color:var(--muted); padding-bottom:12px; }
.pf-about { margin:18px 24px 0; padding:16px 18px; border-radius:20px; background:var(--b-soft, var(--th-soft)); }
.pf-about p { margin:6px 0 0; font-size:17px; line-height:26px; }
.pf-about.pf-none p { font-size:14px; color:var(--muted); margin:0; }
.pf-eb { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--th-accent2); display:flex; align-items:center; gap:6px; }
html.dark .pf-eb { color:var(--th-daccent); }
.pf-card .pf-badges { margin:16px 24px 0; }
.pf-rings { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:16px 24px 0; }
.pf-ring { position:relative; display:flex; align-items:center; gap:10px; padding:12px; border-radius:20px; border:1px solid var(--line); }
.pf-ring svg { width:52px; height:52px; transform:rotate(-90deg); flex:none; } .pf-ring circle { fill:none; stroke:var(--b-soft, var(--th-soft)); stroke-width:5; } .pf-ring circle.v { stroke-linecap:round; }
.pf-ring.o circle.v { stroke:var(--th-accent2); } .pf-ring.g circle.v { stroke:#1E7A44; } .pf-ring.b circle.v { stroke:#2C6BC0; }
html.dark .pf-ring.g circle.v { stroke:#8FD6A8; } html.dark .pf-ring.b circle.v { stroke:#8DB4EE; }
.pf-ring b { position:absolute; left:12px; width:52px; text-align:center; font-size:16px; font-weight:700; }
.pf-ring span { font-size:13px; color:var(--muted); line-height:17px; }
.pf-facts { display:flex; flex-wrap:wrap; gap:6px 18px; margin:14px 24px 22px; font-size:14px; color:var(--ink2); }
.pf-edit { padding:22px 24px; display:flex; flex-direction:column; gap:10px; }
.pf-edit h3 { margin:0 0 4px; font-size:20px; font-weight:600; }
.pf-lab { display:block; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
.pf-photo { display:flex; gap:14px; align-items:center; } .pf-photo .sub { font-size:12.5px; color:var(--muted); }
.pf-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .pf-sp { justify-content:space-between; }
.pf-edit .btn { border-radius:99px; height:38px; display:inline-flex; align-items:center; gap:6px; }
.pf-colors { display:flex; gap:10px; flex-wrap:wrap; }
.pf-dot { width:34px; height:34px; border-radius:50%; border:0; background:var(--pf-bg); cursor:pointer; box-shadow:inset 0 0 0 1px rgba(var(--th-ink-rgb), .12); }
.pf-dot.pf-c-orange { background:var(--th-accent); } .pf-dot.pf-c-blue { background:#6E9BDA; } .pf-dot.pf-c-green { background:#5FA57E; } .pf-dot.pf-c-purple { background:#A487D0; } .pf-dot.pf-c-yellow { background:#E2B53A; } .pf-dot.pf-c-red { background:#E07A70; } .pf-dot.pf-c-dark { background:var(--th-ink); }
.pf-dot[aria-checked=true] { box-shadow:0 0 0 3px var(--b-tile, #fff), 0 0 0 5px var(--ink); }
.pf-tones { display:grid; grid-template-columns:repeat(3, 1fr); background:var(--b-soft, var(--th-soft)); }
.pf-edit textarea, .pf-edit input, .pf-edit select, .fl-lab select, .fl-lab textarea { width:100%; border:0; background:var(--b-soft, var(--th-soft)); border-radius:20px; padding:12px 16px; font:inherit; font-size:15px; color:var(--ink); resize:vertical; box-sizing:border-box; text-transform:none; letter-spacing:0; font-weight:400; }
.pf-edit input, .pf-edit select, .fl-lab select { height:46px; border-radius:99px; padding:0 16px; }
.pf-edit textarea:focus, .pf-edit input:focus, .pf-edit select:focus, .fl-lab select:focus, .fl-lab textarea:focus { outline:0; box-shadow:0 0 0 2px var(--th-accent), 0 0 0 6px rgba(var(--th-accent-rgb), .18); }
.pf-two { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .pf-two label { display:flex; flex-direction:column; gap:8px; }
.pf-foot { margin-top:8px; } .pf-foot .sub { font-size:12.5px; color:var(--muted); display:inline-flex; align-items:center; gap:5px; }
.pf-edit .pf-save { background:var(--th-accent2); border-color:var(--th-accent2); color:#fff; height:44px; padding:0 22px; font-weight:700; }
.pf-cropv { width:280px; height:280px; margin:0 auto; position:relative; overflow:hidden; border-radius:20px; background:var(--th-ink); touch-action:none; cursor:grab; }
.pf-cropv img { position:absolute; left:0; top:0; max-width:none; user-select:none; }
.pf-ring-mask { position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 400px rgba(var(--th-ink-rgb), .55); pointer-events:none; }
.pf-crop input[type=range] { accent-color:var(--th-accent2); }

/* ---- Meet the team ---- */
main.dnp-meet .mt-head { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:end; gap:16px 28px; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:18px; }
html main.dnp-meet:not(#_b) .mt-head .eyebrow { display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--text-tertiary, var(--th-mute)); margin-bottom:6px; }
html main.dnp-meet:not(#_b) .mt-head h1 { font-size:44px; line-height:52px; font-weight:600; letter-spacing:-.9px; margin:0; }
main.dnp-meet .fl-stats { display:flex; gap:34px; } main.dnp-meet .fl-stats div { display:flex; flex-direction:column; } main.dnp-meet .fl-stats span { font-size:14px; color:var(--ink2); }
main.dnp-meet .fl-stats b { font-size:44px; line-height:52px; font-weight:600; display:flex; align-items:center; gap:8px; }
main.dnp-meet .fl-stats b em { font-style:normal; font-size:12px; font-weight:700; line-height:1; background:var(--b-soft, var(--th-soft)); color:var(--ink); border-radius:99px; padding:12px 10px; }
main.dnp-meet .fl-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
main.dnp-meet .fl-find { display:flex; align-items:center; gap:10px; height:44px; padding:0 18px; border-radius:99px; background:var(--b-tile, #fff); min-width:280px; color:var(--muted); }
main.dnp-meet .fl-find input { border:0; background:transparent; height:auto; min-height:0; padding:0; box-shadow:none; flex:1; color:var(--ink); font:inherit; }
.mt-wall { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; grid-auto-flow:dense; }
.mt-card, .mt-tile { background:var(--b-tile, #fff); border-radius:var(--b-r-tile, 28px); box-shadow:var(--b-tile-shadow); overflow:hidden; display:flex; flex-direction:column; min-width:0; }
.mt-big { grid-row:span 2; }
.mt-top { height:120px; background:var(--pf-bg); position:relative; display:flex; justify-content:center; align-items:flex-end; padding-top:14px; }
.mt-big .mt-top { height:210px; }
.mt-top .pf-status { position:absolute; left:14px; top:14px; }
.mt-top .pf-face { margin-bottom:-1px; border-radius:50% 50% 0 0; } .mt-top .pf-face.pf-mid { width:84px; height:84px; } .mt-top .pf-face.pf-big { width:150px; height:150px; font-size:44px; }
.mt-top .pf-face.pf-ini { border-radius:50%; margin-bottom:14px; }
.mt-body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.mt-nm { display:flex; justify-content:space-between; align-items:center; gap:8px; } .mt-nm b { font-size:17px; font-weight:600; } .mt-big .mt-nm b { font-size:21px; }
.mt-body .sub { font-size:13px; color:var(--muted); }
.mt-about { margin:2px 0; font-size:14.5px; line-height:21px; } .mt-big .mt-about { font-size:16.5px; line-height:24px; }
.mt-flip, .mt-more { width:32px; height:32px; flex:none; border-radius:50%; border:0; background:var(--b-soft, var(--th-soft)); color:var(--ink2); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
html.dark .mt-flip, html.dark .mt-more { background:rgba(255,255,255,.1); color:var(--th-dtext); }
.mt-shout { display:flex; gap:6px; align-items:flex-start; font-size:13px; padding:8px 10px; border-radius:14px; background:var(--th-tint); color:var(--th-accent3); } html.dark .mt-shout { background:rgba(var(--th-daccent-rgb), .16); color:var(--th-daccent); }
.mt-acts { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:auto; padding-top:6px; }
.mt-acts .btn { border-radius:99px; height:36px; display:inline-flex; align-items:center; gap:6px; }
.mt-ext { display:inline-flex; align-items:center; gap:5px; height:36px; padding:0 12px; border-radius:99px; background:var(--b-soft, var(--th-soft)); font-size:13px; font-weight:600; }
html.dark .mt-ext { background:rgba(255,255,255,.08); }
.mt-hide { margin-left:auto; border:0; background:transparent; color:var(--muted); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; padding:6px 4px; text-decoration:underline; text-underline-offset:3px; }
.mt-hidden { opacity:.6; }
.mt-week { background:var(--b-dark, var(--th-ink)); color:var(--b-dark-ink, var(--th-soft2)); padding:18px; gap:12px; }
.mt-wh { display:flex; gap:10px; align-items:center; } .mt-wh div { flex:1; display:flex; flex-direction:column; } .mt-wh b { font-size:17px; } .mt-wh span { font-size:12.5px; opacity:.7; }
.mt-week .mt-flip { background:rgba(255,255,255,.1); color:var(--th-soft2); }
.mt-nums { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .mt-nums div { background:rgba(255,255,255,.07); border-radius:18px; padding:12px 14px; display:flex; flex-direction:column; }
.mt-nums b { font-size:34px; line-height:40px; font-weight:600; } .mt-nums span { font-size:12.5px; opacity:.7; }
.mt-best { font-size:13px; opacity:.8; margin-top:auto; }
.mt-tile { padding:20px; gap:10px; }
.mt-tile h3 { margin:0; font-size:20px; font-weight:600; }
.mt-eb { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.mt-orange { background:var(--th-hero); color:#fff; } .mt-orange .mt-eb { color:rgba(255,255,255,.85); }
.mt-quote { font-size:21px; line-height:28px; font-weight:600; margin:4px 0; } .mt-from { font-size:13px; opacity:.9; }
.mt-white { margin-top:auto; align-self:flex-start; background:#fff !important; color:var(--th-ink) !important; border:0 !important; border-radius:99px; height:40px; display:inline-flex; align-items:center; gap:6px; font-weight:700; }
.mt-bd { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.mt-bd li { display:flex; align-items:center; gap:10px; } .mt-bd li div { flex:1; display:flex; flex-direction:column; } .mt-bd b { font-size:15px; } .mt-bd span { font-size:12.5px; color:var(--muted); }
.mt-bd .btn { border-radius:99px; height:34px; }
.mt-foot { margin-top:auto; font-size:12.5px; color:var(--muted); }
.mt-big-n { font-size:52px; line-height:58px; font-weight:600; letter-spacing:-1px; }
.mt-bars { display:flex; align-items:flex-end; gap:6px; margin-top:auto; padding-top:14px; }
.mt-bars div { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; } .mt-bars i { width:100%; border-radius:10px; background:var(--th-tint); } .mt-bars i.on { background:var(--th-accent); }
html.dark .mt-bars i { background:rgba(255,255,255,.12); } html.dark .mt-bars i.on { background:var(--th-daccent); }
.mt-bars span { font-size:11.5px; color:var(--muted); }
@media (max-width: 1240px) { .mt-wall { grid-template-columns:repeat(3, minmax(0,1fr)); } main.dnp-meet .mt-head { grid-template-columns:minmax(0,1fr) auto; } main.dnp-meet .mt-stats { grid-column:1 / -1; } }
@media (max-width: 1100px) { .mt-wall { grid-template-columns:repeat(2, minmax(0,1fr)); } .pf-grid { grid-template-columns:minmax(0,1fr); } }
@media (max-width: 600px) {
  .mt-wall { grid-template-columns:minmax(0,1fr); } .mt-big { grid-row:auto; } .mt-big .mt-top { height:170px; }
  html main.dnp-meet:not(#_b) .mt-head h1 { font-size:32px; line-height:38px; } main.dnp-meet .mt-head { grid-template-columns:minmax(0,1fr); } main.dnp-meet .fl-stats b { font-size:32px; line-height:38px; }
  main.dnp-meet .fl-bar .seg { overflow-x:auto; max-width:100%; flex-wrap:nowrap; scrollbar-width:none; } main.dnp-meet .seg button { white-space:nowrap; } main.dnp-meet .fl-find { min-width:0; width:100%; box-sizing:border-box; }
  .pf-two { grid-template-columns:1fr; } .pf-rings { grid-template-columns:1fr; } .pf-who { flex-direction:column; align-items:flex-start; gap:8px; } .pf-who .sub { padding-bottom:0; }
  .pf-tones button { padding:0 6px; font-size:13px; } .pf-edit { padding:18px; } .pf-tabbar .seg { overflow-x:auto; max-width:100%; flex-wrap:nowrap; scrollbar-width:none; } .pf-tabbar .seg button { white-space:nowrap; }
  .pf-cropv { width:240px; height:240px; }
}
/* the page-wide button and box styles are stronger than the ones above: the same look, one step more specific */
html body .pf-tones button[aria-pressed=true] { background:var(--b-pill-on, var(--th-ink)); color:var(--b-pill-on-ink, #fff); }
html body .pf-edit select, html body .fl-lab select { border:0; background-color:var(--b-soft, var(--th-soft)); border-radius:99px; height:46px; box-shadow:none; }
html body .pf-edit .btn.pf-save { background:var(--th-accent2); border-color:var(--th-accent2); color:#fff; }
html body .pf-edit .btn.pf-save:hover { background:var(--th-accent2); border-color:var(--th-accent2); }
html body .pf-tabbar .seg button[aria-pressed=true], html body main.dnp-meet .seg button[aria-pressed=true], html body .pf-tones button[aria-pressed=true],
html body main.dnp-forms .seg button[aria-pressed=true] { background:var(--b-pill-on, var(--th-ink)); color:var(--b-pill-on-ink, #fff); }
/* the real page behind the numbered boxes (GET /api/forms/:id/page/:n); the boxes see-through so the printed words show */
main.dnp-forms .fl-pimg { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; user-select:none; }
html.dark main.dnp-forms .fl-pimg { filter:invert(.88) hue-rotate(180deg); }
main.dnp-forms .fl-page:has(.fl-pimg) .fl-box { background:color-mix(in srgb, var(--fl-ok-bg) 45%, transparent); }
main.dnp-forms .fl-page:has(.fl-pimg) .fl-box.chk { background:color-mix(in srgb, var(--fl-chk-bg) 50%, transparent); }
main.dnp-forms .fl-page:has(.fl-pimg) .fl-box.none { background:transparent; border-style:dashed; border-color:rgba(var(--th-ink-rgb), .35); }
main.dnp-forms .fl-page:has(.fl-pimg) .fl-box span { background:rgba(255,255,255,.85); border-radius:2px; }
html.dark main.dnp-forms .fl-page:has(.fl-pimg) .fl-box span { background:rgba(var(--th-dpage-rgb), .85); }
main.dnp-forms .fl-ptabs { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
main.dnp-forms .fl-zoom { margin-left:auto; display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 12px; border:0; border-radius:99px; background:var(--b-soft, var(--th-soft)); color:var(--ink); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.pf-grid > #pfCard, .pf-card, .pf-edit { align-self:start; } .pf-end { height:22px; }

/* ==== "Get set up" on My day (web/js/setup.js) ==== */
.su-card { display:flex; flex-direction:column; gap:12px; padding:20px 22px; border-radius:var(--b-r-tile, 28px); margin:0 0 16px; background:var(--b-tile, #fff); box-shadow:var(--b-tile-shadow); }
.su-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.su-card h3 { margin:2px 0 0; font-size:20px; line-height:26px; font-weight:600; }
.su-k { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--th-accent2); } html.dark .su-k { color:var(--th-daccent); }
.su-hide { border:0; background:transparent; color:var(--muted); font:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:6px 4px; text-decoration:underline; text-underline-offset:3px; }
.su-bar { height:8px; border-radius:99px; background:var(--b-soft, var(--th-soft)); overflow:hidden; } .su-bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--th-accent),var(--th-accent2)); }
html.dark .su-bar { background:rgba(255,255,255,.08); }
.su-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.su-steps li { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; gap:6px 10px; align-items:start; padding:14px; border-radius:20px; background:var(--b-soft, var(--th-soft)); }
html.dark .su-steps li { background:rgba(255,255,255,.06); }
.su-steps li > div { display:flex; flex-direction:column; gap:2px; } .su-steps b { font-size:15px; } .su-steps .sub { font-size:12.5px; line-height:17px; color:var(--muted); }
.su-dot { width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#fff; color:var(--th-accent2); font-weight:700; font-size:13px; box-shadow:inset 0 0 0 1.5px var(--th-peach); }
html.dark .su-dot { background:var(--th-dpage); color:var(--th-daccent); box-shadow:inset 0 0 0 1.5px rgba(var(--th-daccent-rgb), .5); }
.su-steps li.on .su-dot { background:var(--fl-ok, #1E7A44); color:#fff; box-shadow:none; }
.su-steps li.on b { color:var(--muted); }
.su-go, .su-tick { grid-column:2; justify-self:start; }
html body .su-card .btn.su-go { height:34px; border-radius:99px; padding:0 16px; background:var(--th-accent2); border-color:var(--th-accent2); color:#fff; font-weight:700; }
html body .su-card .btn.su-go:hover { background:var(--th-accent2); border-color:var(--th-accent2); }
.su-tick { font-size:12.5px; font-weight:700; color:var(--fl-ok, #1E7A44); }
.su-done { flex-direction:row; align-items:center; gap:14px; background:var(--fl-ok-bg, #E4F4EA); box-shadow:inset 0 0 0 1px var(--fl-ok-line, #9AD3AE); }
.su-done > div { flex:1; } .su-done b { font-size:17px; color:var(--fl-ok, #1E7A44); } .su-done .sub { font-size:13px; }
.su-ok { width:38px; height:38px; border-radius:50%; background:var(--fl-ok, #1E7A44); color:#fff; display:inline-flex; align-items:center; justify-content:center; flex:none; }
@media (max-width: 1100px) { .su-steps { grid-template-columns:minmax(0,1fr); } .su-steps li { grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto; align-items:center; } .su-go, .su-tick { grid-column:3; } }
@media (max-width: 600px) { .su-card { padding:16px; } .su-steps li { grid-template-columns:auto minmax(0,1fr); } .su-go, .su-tick { grid-column:2; } }
/* Help: pictures in the guide ("What's new") */
.dnh-fig { margin:10px 0 18px; } .dnh-fig img { display:block; max-width:min(100%, 760px); height:auto; border-radius:16px; box-shadow:0 1px 2px rgba(var(--th-ink-rgb), .08), 0 8px 24px rgba(var(--th-ink-rgb), .08); }
.dnh-fig figcaption { font-size:12.5px; color:var(--muted); margin-top:6px; }
html.dark .dnh-fig img { box-shadow:0 0 0 1px rgba(255,255,255,.08); }

/* ==== Meet the team v2 (owner, Oct 23; design/features/v2/f2-meet, f2-shout) ==== */
.m2-wall { columns:4 260px; column-gap:16px; }
.m2-wall > * { break-inside:avoid; -webkit-column-break-inside:avoid; display:inline-block; width:100%; margin:0 0 16px; box-sizing:border-box; vertical-align:top; }
.m2-card, .m2-tile { background:var(--b-tile, #fff); border-radius:var(--b-r-tile, 28px); box-shadow:var(--b-tile-shadow); overflow:hidden; }
.m2-cover { height:96px; background:var(--pf-bg); display:flex; justify-content:flex-end; align-items:flex-start; padding:12px; box-sizing:border-box; }
.m2-big .m2-cover { height:150px; }
.m2-body { padding:0 18px 18px; display:flex; flex-direction:column; gap:8px; }
.m2-body .pf-face.m2-face { margin-top:-40px; border:4px solid var(--b-tile, #fff); box-shadow:0 2px 8px rgba(var(--th-ink-rgb), .12); }
.m2-big .m2-body .pf-face.m2-face { margin-top:-62px; width:116px; height:116px; }
.m2-nm b { font-size:18px; font-weight:600; } .m2-big .m2-nm b { font-size:22px; }
.m2-you { font-size:13px; color:var(--muted); font-weight:500; }
.m2-body .sub { font-size:13px; color:var(--muted); margin-top:-4px; }
.m2-about { margin:2px 0; font-size:16px; line-height:23px; }
.m2-nums { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; }
.m2-nums div { background:var(--b-soft, var(--th-soft)); border-radius:14px; padding:8px 10px; display:flex; flex-direction:column; }
.m2-nums b { font-size:18px; font-weight:600; line-height:22px; } .m2-nums span { font-size:11.5px; color:var(--muted); }
html.dark .m2-nums div { background:rgba(255,255,255,.07); }
.m2-thx { display:flex; gap:6px; align-items:flex-start; font-size:13px; line-height:18px; padding:9px 11px; border-radius:14px; background:var(--th-tint); color:var(--th-accent3); }
html.dark .m2-thx { background:rgba(var(--th-daccent-rgb), .16); color:var(--th-daccent); }
.m2-acts { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:2px; }
html body .m2-acts .btn.m2-thank { background:var(--th-ink); border-color:var(--th-ink); color:#fff; border-radius:99px; height:38px; padding:0 16px; display:inline-flex; align-items:center; gap:6px; font-weight:700; }
html.dark body .m2-acts .btn.m2-thank, html.dark .m2-acts .btn.m2-thank { background:var(--th-dtext); border-color:var(--th-dtext); color:var(--th-dpage); }
.m2-acts .btn.m2-ghost { border-radius:99px; height:38px; display:inline-flex; align-items:center; gap:6px; }
html body main.dnp-meet .mt-head .btn.m2-primary { background:var(--th-accent2); border-color:var(--th-accent2); color:#fff; font-weight:700; }
main.dnp-meet .mt-head .tools { display:flex; gap:10px; }
.m2-tile { padding:20px; display:flex; flex-direction:column; gap:10px; }
.m2-feed { background:var(--th-hero); color:#fff; } .m2-feed .mt-eb { color:rgba(255,255,255,.85); }
.m2-fi { display:flex; gap:10px; align-items:flex-start; background:rgba(255,255,255,.14); border-radius:16px; padding:10px 12px; }
.m2-fi > div { display:flex; flex-direction:column; gap:2px; min-width:0; } .m2-fi b { font-size:14px; } .m2-fi span { font-size:13.5px; line-height:19px; overflow-wrap:anywhere; } .m2-fi i { font-style:normal; font-size:12px; opacity:.8; }
.m2-fic { font-size:16px; line-height:20px; }
.m2-empty { margin:0; font-size:14px; opacity:.9; }
.m2-tw { display:flex; gap:18px; align-items:flex-end; } .m2-tw div { display:flex; flex-direction:column; } .m2-tw b { font-size:34px; line-height:38px; font-weight:600; letter-spacing:-.5px; } .m2-tw span { font-size:12.5px; color:var(--muted); }
.m2-tw div:first-child b { font-size:44px; line-height:48px; }
/* the Thank someone window */
.m2-sheet { width:min(620px, 100%); gap:10px; }
.m2-sheet .pf-lab { margin-top:6px; }
.m2-who { display:flex; gap:8px; flex-wrap:wrap; }
.m2-chip { display:flex; flex-direction:column; align-items:center; gap:6px; width:84px; padding:10px 6px; border-radius:18px; border:2px solid transparent; background:var(--b-soft, var(--th-soft)); cursor:pointer; font:inherit; font-size:13px; font-weight:600; color:var(--ink); }
.m2-chip[aria-checked=true] { border-color:var(--ink); background:var(--b-tile, #fff); }
.m2-chip .pf-face.pf-sm { width:44px; height:44px; }
.m2-more { justify-content:center; color:var(--ink2); }
html.dark .m2-chip { background:rgba(255,255,255,.07); }
.m2-why { display:flex; gap:8px; flex-wrap:wrap; }
.m2-rs { height:36px; padding:0 14px; border-radius:99px; border:0; background:var(--b-soft, var(--th-soft)); font:inherit; font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer; }
.m2-rs[aria-checked=true] { background:var(--b-pill-on, var(--th-ink)); color:var(--b-pill-on-ink, #fff); }
html.dark .m2-rs { background:rgba(255,255,255,.08); }
.m2-words { height:48px; border-radius:99px; border:1.5px solid var(--line); background:var(--b-tile, #fff); padding:0 18px; font:inherit; font-size:15px; color:var(--ink); }
.m2-words:focus { outline:0; border-color:var(--th-accent); box-shadow:0 0 0 4px rgba(var(--th-accent-rgb), .16); }
.m2-hint { display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); } .m2-hint span:first-child { display:inline-flex; align-items:center; gap:5px; }
.m2-prev { display:flex; gap:6px; align-items:flex-start; font-size:13.5px; padding:10px 14px; border-radius:16px; background:var(--th-tint); color:var(--th-accent3); min-height:20px; }
html.dark .m2-prev { background:rgba(var(--th-daccent-rgb), .16); color:var(--th-daccent); }
.m2-foot { justify-content:flex-end; gap:10px; }
.m2-foot .btn { border-radius:99px; height:42px; padding:0 18px; }
html body .m2-foot .btn.m2-send { background:var(--th-accent2); border-color:var(--th-accent2); color:#fff; font-weight:700; }
html body .m2-foot .btn.m2-send:disabled { opacity:.45; cursor:not-allowed; }
.m2-find { min-width:0; height:40px; background:var(--b-soft, var(--th-soft)); border-radius:99px; display:flex; align-items:center; gap:8px; padding:0 14px; }
.m2-find input { border:0; background:transparent; font:inherit; flex:1; color:var(--ink); }
@media (max-width: 1100px) { .m2-wall { columns:3 230px; } }
@media (max-width: 900px) { .m2-wall { columns:2 220px; } }
@media (max-width: 600px) { .m2-wall { columns:1; } .m2-chip { width:72px; } .m2-sheet { padding:18px; } .m2-tw b { font-size:28px; } }
html body .m2-sheet input.m2-words { height:48px; border-radius:99px; border:1.5px solid var(--line); background:var(--b-tile, #fff); padding:0 18px; box-shadow:none; }
html body .m2-sheet input.m2-words:focus { border-color:var(--th-accent); box-shadow:0 0 0 4px rgba(var(--th-accent-rgb), .16); }
/* Agency details (owner, Oct 26): the agency's address, email, fax the forms fill */
main.dnp-forms .fl-agency { gap:10px; } main.dnp-forms .fl-agency > .btn { align-self:flex-start; }
.fl-ag { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink); }
.fl-ag > div { display:grid; grid-template-columns:64px minmax(0,1fr); gap:8px; overflow-wrap:anywhere; } .fl-ag span { color:var(--muted); font-size:12px; } .fl-ag i { color:var(--muted); }
.fl-ag-miss { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:#9A4513; } html.dark .fl-ag-miss { color:#F5A062; }
.fl-ag-form .fl-wide { grid-column:1 / -1; }
.fl-sh-foot .btn.gm-main { height:44px; border-radius:99px; padding:0 20px; }
/* "Came back" (server/came-back.js): the tag, the case window line, the new-case popup line */
.tag.t-back { background:#E6F0FF; color:#1D4F91; } html.dark .tag.t-back { background:rgba(80,130,220,.2); color:#A9C4F2; }
.cb-line { display:flex; align-items:center; gap:10px; margin:10px 0 4px; padding:10px 14px; border-radius:16px; background:#E6F0FF; color:#1D4F91; font-size:13.5px; line-height:19px; flex-wrap:wrap; }
.cb-line span { flex:1; min-width:220px; } .cb-line .btn { border-radius:99px; height:32px; }
html.dark .cb-line { background:rgba(80,130,220,.16); color:#C7D8F5; }
/* why the case is on this list (detail.js own-line, Nov 3): looks like the came-back line, its own class */
.own-line { display:flex; align-items:center; gap:10px; margin:10px 0 4px; padding:10px 14px; border-radius:16px; background:#EEF1F6; color:#33415C; font-size:13.5px; }
.own-line span { flex:1; min-width:220px; }
html.dark .own-line { background:rgba(160,175,200,.14); color:#D5DCE8; }
.nc-back { display:block; font-size:12px; color:#1D4F91; margin-top:2px; } html.dark .nc-back { color:#A9C4F2; }

/* ---- Insights (Report › Insights, managers; web/js/insights.js) ---- */
:root { --in-r:#C1372C; --in-o:var(--th-accent); --in-y:#C99A12; --in-p:#7A57C2; --in-g:var(--th-mute); --in-n:var(--th-line2); --in-ok:#1E6B3F; --in-ok2:#2E8B57;
  --in-a:#B9DFC8; --in-b:#F3D27A; --in-c:#F0A9A4; --in-heat:30,120,75; --in-or1:var(--th-accent); --in-or2:var(--th-accent2); }
html.dark { --in-n:var(--th-dline); --in-a:#2F6B48; --in-b:#8A6A1F; --in-c:#8A3A35; --in-heat:111,207,151; --in-or1:var(--th-accent2); --in-or2:var(--th-accent3); }
.in-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin:2px 0 16px; }
.in-k { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.in-per { margin-top:8px; }
.in-upd { margin-top:6px; }
.in-kpis { display:flex; gap:28px; flex-wrap:wrap; }
.in-kpi { display:grid; grid-template-columns:auto auto; align-items:center; column-gap:10px; }
.in-kpi > span { grid-column:1 / -1; font-size:13px; color:var(--muted); }
.in-kpi > b { font-size:40px; font-weight:600; letter-spacing:-.02em; line-height:1.1; color:var(--ink); }
.in-chip { font-style:normal; font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:99px; background:var(--b-soft); color:var(--ink2); white-space:nowrap; }
.in-chip.up { background:var(--ok-tint); color:var(--ok); } .in-chip.dn, .in-chip.bad { background:var(--alert-tint); color:var(--alert); }
.in-n { all:unset; cursor:pointer; font:inherit; color:inherit; border-radius:6px; text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:color-mix(in srgb, currentColor 35%, transparent); text-underline-offset:3px; }
.in-n:hover { text-decoration-color:currentColor; } .in-n:focus-visible { outline:2px solid var(--b-pill-on); outline-offset:2px; }
.in-zero { color:var(--muted); }
.in-grid { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:16px; }
.in-t { grid-column:span 4; padding:20px 22px; min-width:0; }
.in-t h3 { margin:0 0 14px; font-size:18px; font-weight:600; color:var(--ink); }
.in-t h3 .sub { font-size:13px; font-weight:400; }
.in-fun { grid-column:span 7; } .in-lost { grid-column:span 5; } .in-heat { grid-column:1 / -1; }
.in-foot { margin-top:12px; font-size:12px; }
/* the funnel */
.in-frow { display:grid; grid-template-columns:150px 1fr 48px 84px; align-items:center; gap:12px; margin:8px 0; font-size:14px; }
.in-fbar { height:28px; }
.in-fbar i { min-width:max-content; display:flex; align-items:center; height:100%; padding:0 10px; box-sizing:border-box; border-radius:8px; color:#fff; font-style:normal; font-weight:700; font-size:13px; background:linear-gradient(90deg, var(--in-or1), var(--in-or2)); }
.in-fbar i.ok { background:linear-gradient(90deg, var(--in-ok2), var(--in-ok)); }
.in-call { display:flex; gap:8px; margin-top:14px; padding:12px 14px; border-radius:14px; background:color-mix(in srgb, var(--in-or1) 12%, var(--b-tile)); font-size:13px; color:var(--ink); }
.in-call b { color:var(--in-or2); }
/* why lost */
.in-lrow { display:grid; grid-template-columns:150px 1fr 40px; align-items:center; gap:12px; margin:9px 0; font-size:14px; }
.in-lbar, .in-spb { height:8px; border-radius:99px; background:var(--b-soft); overflow:hidden; }
.in-lbar i, .in-spb i { display:block; height:100%; border-radius:99px; }
.c-r { background:var(--in-r); } .c-o { background:var(--in-o); } .c-y { background:var(--in-y); } .c-p { background:var(--in-p); } .c-g { background:var(--in-g); } .c-n { background:var(--in-n); }
.in-lby { display:grid; grid-template-columns:1fr 44px; gap:2px 12px; padding:7px 0; border-bottom:1px solid var(--line); font-size:14px; }
.in-lby .sub { grid-column:1 / -1; font-size:12px; }
.in-lseg { margin-top:14px; } .in-nudge { margin-top:12px; font-size:12px; }
/* sources */
.in-src { display:grid; grid-template-columns:minmax(0,1fr) auto auto auto minmax(40px,auto); align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }
.in-src:last-of-type { border-bottom:0; } .in-src > b { min-width:0; overflow-wrap:anywhere; }
.in-kpi > b.in-nd { font-size:18px; font-weight:500; color:var(--muted); }   /* "not enough data" (fewer than 3 dated cases) */
.in-fsafe { border-top:1px dashed var(--line); padding-top:6px; }
.in-tag { font-size:12px; font-weight:700; padding:3px 9px; border-radius:99px; white-space:nowrap; }
.in-tag.ok { background:var(--ok-tint); color:var(--ok); } .in-tag.w { background:var(--pf-yellow); color:#6B4E00; } .in-tag.l { background:var(--alert-tint); color:var(--alert); } .in-tag.n { background:var(--b-soft); color:var(--ink2); }
html.dark .in-tag.w { color:#F8E2A0; }
/* speed */
.in-big { font-size:40px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.in-sp { display:grid; grid-template-columns:110px 1fr 48px; align-items:center; gap:12px; margin:9px 0; font-size:14px; }
.in-spb i.g { background:var(--in-ok); } .in-spb i.y { background:var(--in-y); } .in-spb i.r { background:var(--in-r); }
/* starting soon (the orange tile) */
:is(#insOut, #rpInsights) .tile.in-rev { background:linear-gradient(160deg, var(--in-or1), var(--in-or2)); color:#fff; }
/* channels (validated categorical slots 1-4, light and dark; numbers and names always written beside the swatch) */
:root { --ch-email:#2a78d6; --ch-ringcentral:#eb6834; --ch-careport:#1baf7a; --ch-other:#eda100; }
html.dark { --ch-email:#3987e5; --ch-ringcentral:#d95926; --ch-careport:#199e70; --ch-other:#c98500; }
.ch-email { background:var(--ch-email); } .ch-ringcentral { background:var(--ch-ringcentral); } .ch-careport { background:var(--ch-careport); } .ch-other { background:var(--ch-other); }
/* Today, live */
.iz-chs { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-bottom:10px; }
.iz-ch { display:grid; grid-template-columns:8px 1fr; column-gap:8px; align-items:center; padding:8px 10px; border-radius:10px; background:var(--b-soft); min-width:0; }
.iz-ch > i { grid-row:span 2; width:8px; height:100%; min-height:30px; border-radius:4px; }
.iz-ch > b { font-size:22px; font-weight:600; color:var(--ink); line-height:1.1; } .iz-ch > span { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.iz-trow { grid-template-columns:140px 1fr; margin:6px 0; } .iz-trow .in-fbar { height:24px; }
.in-fbar i.wait { background:var(--in-y); color:#3A2A00; }
.iz-stk { margin-top:12px; } .iz-stk > b { display:flex; gap:8px; align-items:center; font-size:14px; margin-bottom:4px; }
.iz-cr-q { cursor:default; }
/* case entry speed */
.iz-spd { display:grid; grid-template-columns:minmax(0,1fr) 88px 88px; gap:8px; align-items:baseline; padding:7px 0; border-bottom:1px solid var(--line); font-size:14px; }
.iz-spd > span:not(:first-child) { display:flex; gap:6px; align-items:baseline; } .iz-spd b { font-size:16px; font-weight:600; color:var(--ink); } .iz-spd .sub { font-size:12px; }
.iz-spd-h { border-bottom:0; padding-bottom:0; }
/* coordinators */
.iz-people { grid-column:1 / -1; }
.iz-ptbl { overflow-x:auto; }
.iz-prow { display:grid; grid-template-columns:minmax(130px,1.4fr) repeat(9, minmax(64px,1fr)); gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; min-width:760px; }
.iz-prow > span { text-align:right; font-variant-numeric:tabular-nums; } .iz-prow > b { font-weight:600; color:var(--ink); }
/* daily intake */
.iz-trend { grid-column:1 / -1; }
.iz-tk { display:flex; flex-wrap:wrap; gap:10px 28px; margin-bottom:10px; } .iz-tk > div { display:flex; flex-direction:column; } .iz-tk b { font-size:26px; font-weight:600; color:var(--ink); line-height:1.15; } .iz-tk span { font-size:12.5px; color:var(--muted); }
.iz-chleg { display:flex; flex-wrap:wrap; gap:6px 14px; margin:4px 0 8px; font-size:12.5px; color:var(--ink2); } .iz-chleg span { display:inline-flex; align-items:center; gap:6px; } .iz-chleg i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.iz-reo { background:var(--in-g); }
.iz-bars { display:flex; align-items:flex-end; gap:2px; height:140px; border-bottom:1px solid var(--line); }
.iz-bars-r { height:36px; margin-top:6px; }
.iz-bc { flex:1 1 0; min-width:0; height:100%; display:flex; align-items:flex-end; }
.iz-bc:hover .iz-bst { outline:1px solid var(--ink2); outline-offset:1px; }
.iz-bst { width:100%; display:flex; flex-direction:column-reverse; gap:1px; border-radius:4px 4px 0 0; overflow:hidden; }
.iz-bst i { display:block; min-height:1px; }
.iz-bx { display:flex; justify-content:space-between; margin-top:4px; font-size:12px; }
.iz-tbl { margin-top:8px; } .iz-tscroll { max-height:260px; overflow:auto; } .iz-tbl table { width:100%; border-collapse:collapse; font-size:13px; } .iz-tbl th, .iz-tbl td { text-align:right; padding:4px 6px; border-bottom:1px solid var(--line); white-space:nowrap; } .iz-tbl th:first-child, .iz-tbl td:first-child { text-align:left; }
/* marketers */
.iz-mk { grid-column:span 7; }
.iz-mrow { display:grid; grid-template-columns:minmax(0,1.6fr) repeat(5, minmax(56px,1fr)); gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; }
.iz-mrow > span { text-align:right; font-variant-numeric:tabular-nums; } .iz-mrow > b { font-weight:600; color:var(--ink); overflow-wrap:anywhere; } .iz-mrow.iz-phead > span { font-size:12px; color:var(--muted); font-weight:600; }
/* re-opened */
.iz-reo-c { grid-column:span 5; }
.iz-rog { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px 18px; margin-top:12px; }
.iz-rog .in-k { display:block; font-size:11px; margin-bottom:4px; }
.iz-rol { display:flex; justify-content:space-between; gap:8px; padding:4px 0; border-bottom:1px solid var(--line); font-size:13.5px; } .iz-rol span { overflow-wrap:anywhere; min-width:0; }
/* case types */
.iz-tyrow { display:grid; grid-template-columns:minmax(0,1.6fr) repeat(4, minmax(48px,1fr)); gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; }
.iz-tyrow > span { text-align:right; font-variant-numeric:tabular-nums; } .iz-tyrow > b { font-weight:600; color:var(--ink); } .iz-tyrow.iz-phead > span { font-size:12px; color:var(--muted); font-weight:600; }
/* arrivals heat map (one hue, light to dark) */
.iz-arr { grid-column:span 8; }
.iz-hseg { margin-bottom:10px; }
.iz-ahm { gap:3px; } .iz-ac { all:unset; position:relative; height:24px; border-radius:5px; background:rgba(var(--in-heat), var(--a)); box-shadow:inset 0 0 0 1px var(--line); display:flex; align-items:center; justify-content:center; }
.iz-ac i { font-style:normal; font-size:10.5px; font-weight:700; color:#fff; }
.iz-hl { display:flex; align-items:center; gap:4px; margin-top:8px; font-size:12px; } .iz-hl i { width:18px; height:12px; border-radius:3px; background:rgba(var(--in-heat), var(--a)); box-shadow:inset 0 0 0 1px var(--line); }
/* Careport & rehab */
.iz-cpk { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0 4px; }
.iz-cpk > div { display:flex; flex-direction:column; gap:2px; padding:12px; border-radius:12px; background:var(--b-soft); }
.iz-cpk > div > span:first-child { font-size:13px; color:var(--muted); } .iz-cpk b { font-size:32px; font-weight:600; color:var(--ink); line-height:1.1; }
.iz-phead > span { font-size:12px; color:var(--muted); font-weight:600; } .iz-prow .iz-bad .in-n { color:var(--alert); font-weight:700; }
.in-rev h3, .in-rev .sub, .in-rev .in-foot { color:#fff; } .in-rev .sub, .in-rev .in-foot { opacity:.85; }
.in-rev .in-n { color:#fff; }
.in-rv { display:flex; gap:28px; margin:16px 0 12px; }
.in-rv b { display:block; font-size:38px; font-weight:600; letter-spacing:-.02em; } .in-rv span { font-size:12.5px; opacity:.9; }
.in-rb { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; margin:8px 0; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.16); font-size:14px; }
.in-rb span { font-size:13px; opacity:.9; }
/* workload */
.in-wl { margin:10px 0; } .in-wl > div:first-child { display:flex; justify-content:space-between; font-size:14px; margin-bottom:5px; }
.in-wbar { display:flex; height:20px; border-radius:99px; overflow:hidden; gap:2px; }
.in-ws { all:unset; cursor:pointer; height:100%; } .in-ws:focus-visible { outline:2px solid var(--b-pill-on); }
.in-ws.a, .in-leg .a { background:var(--in-a); } .in-ws.b, .in-leg .b { background:var(--in-b); } .in-ws.c, .in-leg .c { background:var(--in-c); }
.in-leg { display:flex; align-items:center; gap:6px; margin-top:12px; font-size:12px; color:var(--muted); }
.in-leg i { width:10px; height:10px; border-radius:3px; margin-left:6px; }
/* cutoffs */
.in-cuts { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:10px; }
.in-cut { padding:14px; border-radius:16px; background:var(--b-soft); display:flex; flex-direction:column; gap:4px; }
.in-cut.hot { background:var(--alert-tint); }
.in-cut b { font-size:34px; font-weight:600; color:var(--ink); } .in-cut .in-k { font-size:11px; }
.in-cr { all:unset; cursor:pointer; display:grid; grid-template-columns:auto auto 1fr auto; gap:8px; align-items:center; width:100%; box-sizing:border-box; padding:10px 0; border-top:1px solid var(--line); font-size:13.5px; }
.in-cr:hover b { text-decoration:underline; } .in-cr:focus-visible { outline:2px solid var(--b-pill-on); }
/* data that needs a look */
.in-lk { all:unset; cursor:pointer; display:grid; grid-template-columns:18px 1fr auto 14px; gap:10px; align-items:center; width:100%; box-sizing:border-box; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink); }
.in-lk:last-child { border-bottom:0; } .in-lk[disabled] { cursor:default; opacity:.6; } .in-lk:not([disabled]):hover span { text-decoration:underline; }
.in-lk:focus-visible { outline:2px solid var(--b-pill-on); }
.in-cnt { font-style:normal; font-size:12px; font-weight:700; min-width:22px; text-align:center; padding:3px 8px; border-radius:99px; }
.in-cnt.r { background:var(--alert-tint); color:var(--alert); } .in-cnt.y { background:var(--pf-yellow); color:#6B4E00; } .in-cnt.b { background:var(--pf-blue, #C9DAF3); color:#23305C; }
html.dark .in-cnt.y { color:#F8E2A0; } html.dark .in-cnt.b { color:#C9DAF3; }
/* best time */
.in-hm { display:grid; gap:4px; align-items:center; }
.in-hh { text-align:center; font-size:12px; color:var(--muted); } .in-hd { font-size:12px; color:var(--muted); }
.in-hc { all:unset; height:26px; border-radius:6px; background:rgba(var(--in-heat), var(--a)); box-shadow:inset 0 0 0 1px var(--line); }
.in-hc:not([disabled]) { cursor:pointer; } .in-hc:focus-visible { outline:2px solid var(--b-pill-on); }
/* waiting */
.in-wait { display:flex; gap:14px; align-items:center; padding:22px; }
.in-spin { width:20px; height:20px; border-radius:50%; border:3px solid var(--b-soft); border-top-color:var(--in-or1); animation:in-spin 1s linear infinite; }
@keyframes in-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .in-spin { animation:none; } }
/* half and phone */
@media (max-width: 1180px) { .in-t, .in-fun, .in-lost { grid-column:span 6; } .in-fun, .in-heat, .iz-people, .iz-trend, .iz-mk, .iz-arr { grid-column:1 / -1; } }
@media (max-width: 760px) {
  .in-grid { grid-template-columns:1fr; } .in-t, .in-fun, .in-lost, .in-heat { grid-column:1 / -1; padding:16px; }
  .in-kpis { gap:18px; } .in-kpi > b { font-size:30px; }
  .in-frow { grid-template-columns:96px 1fr 38px; } .in-frow > .sub { display:none; }
  .in-lrow { grid-template-columns:110px 1fr 34px; }
  .iz-mrow { grid-template-columns:repeat(5, minmax(0,1fr)); font-size:13px; } .iz-mrow > b { grid-column:1 / -1; } .iz-mrow.iz-phead > span:first-child { display:none; }
  .iz-ahm { gap:2px; } .iz-ac { height:20px; } .iz-ac i { display:none; } .iz-ahm .in-hh { font-size:9.5px; }
  .iz-trow { grid-template-columns:110px 1fr; }
  .iz-prow { min-width:0; grid-template-columns:repeat(3, minmax(0,1fr)); row-gap:6px; } .iz-prow > b { grid-column:1 / -1; } .iz-prow.iz-phead { display:none; } .iz-prow > span { text-align:left; } .iz-prow > span::before { content:attr(data-l); display:block; font-size:11px; color:var(--muted); }
  .in-src { grid-template-columns:repeat(4, auto); justify-content:start; row-gap:4px; } .in-src > b { grid-column:1 / -1; }
  .in-hm { overflow-x:auto; } .in-hc { height:22px; }
  .in-rv b { font-size:30px; }
}
:is(#insOut, #rpInsights) .in-rev .sub, :is(#insOut, #rpInsights) .in-rev .in-zero { color:#fff; opacity:.85; }
#rpInsights .in-rv .in-zero, #insOut .in-rv .in-zero { color:inherit; font-size:inherit; font-weight:inherit; opacity:1; } .in-empty { padding:18px 0; }
.in-priced { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:12px; font-size:13px; } .in-priced b { width:100%; }
/* Forms: a box already written on the form is kept (grey), and where the sender's extension goes (owner, Oct 26) */
main.dnp-forms .fl-from { display:flex; flex-direction:column; gap:4px; min-width:0; } main.dnp-forms .fl-from select { width:100%; }
main.dnp-forms .fl-kept { display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-radius:12px; background:var(--b-soft, var(--th-soft)); color:var(--muted); font-size:12.5px; overflow-wrap:anywhere; }
main.dnp-forms .fl-kept b { color:var(--ink2); font-weight:700; } main.dnp-forms .fl-kept .linkbtn, main.dnp-forms .fl-from > .linkbtn { align-self:flex-start; font-size:12px; }
main.dnp-forms .fl-kept em, main.dnp-forms .fl-auto { font-style:normal; font-size:11.5px; font-weight:700; color:var(--orange-dk, var(--th-accent2)); }
@media (max-width:600px) { main.dnp-forms .fl-row .fl-from { grid-column:2; } }
main.dnp-forms .fl-came { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:6px 10px; border-radius:12px; background:var(--orange-tint, var(--th-tint)); color:var(--orange-dk, var(--th-accent2)); font-size:12px; font-weight:600; overflow-wrap:anywhere; }
html.dark main.dnp-forms .fl-came { background:rgba(var(--th-daccent-rgb), .14); color:var(--th-daccent); }

/* Overview v4 for managers (web/js/overview-v4.js; the design chat's f4-ov-mgr). Bento tiles; at 960 two numbers a row,
   then one tile a row, the team table drops last names, nothing scrolls sideways. */
:root { --v4-o1:var(--th-accent); --v4-o2:var(--th-accent2); --v4-ok:#1E6B3F; --v4-ok-bg:#E7F4EC; --v4-y:#F8E2A0; --v4-y-ink:#6B4E00; --v4-r-bg:#FDEDEA; --v4-r:#B42318; }
html.dark { --v4-o1:var(--th-accent2); --v4-o2:var(--th-accent3); --v4-ok:#6FCF97; --v4-ok-bg:#15301F; --v4-y:#4A3D1A; --v4-y-ink:#F8E2A0; --v4-r-bg:#3A1D19; --v4-r:#FF8A7A; }
.v4-head { margin-bottom:16px; }
.v4-nums { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; margin-bottom:16px; }
.v4-n { all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:8px; padding:20px 22px; border-radius:var(--b-r-tile, 28px); background:var(--b-tile); box-shadow:var(--b-tile-shadow); min-width:0; color:var(--ink); }
.v4-n:focus-visible { outline:2px solid var(--b-pill-on); outline-offset:2px; }
.v4-l { font-size:14px; font-weight:600; color:var(--ink2, var(--ink)); }
.v4-big { display:flex; align-items:baseline; gap:6px; } .v4-big b { font-size:44px; font-weight:600; letter-spacing:-.02em; line-height:1.05; } .v4-big small { font-size:20px; color:var(--muted); }
.v4-sub { display:flex; justify-content:space-between; align-items:flex-end; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }
.v4-bar { display:block; height:8px; border-radius:99px; background:var(--b-soft); overflow:hidden; } .v4-bar i { display:block; height:100%; background:var(--v4-ok); border-radius:99px; }
.v4-bar.sm { height:6px; width:100%; }
.v4-chip { font-style:normal; font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:99px; background:var(--b-soft); color:var(--ink2, var(--ink)); white-space:nowrap; align-self:flex-start; }
.v4-chip.up { background:var(--v4-ok-bg); color:var(--v4-ok); } .v4-chip.dn { background:var(--v4-r-bg); color:var(--v4-r); }
.v4-hot { background:linear-gradient(160deg, var(--v4-o1), var(--v4-o2)) !important; color:#fff; } .v4-hot .v4-l { color:#fff; }
.v4-hot .v4-chip { background:rgba(255,255,255,.92); color:var(--th-accent3); } .v4-hot .v4-chip.up { color:var(--ok, #1E6B3F); }
.v4-btn { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding:8px 14px; border-radius:99px; background:#fff; color:var(--th-ink); font-weight:700; font-size:13px; }
.late { color:var(--v4-r); }
.v4-row2 { display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(0, 1fr); gap:16px; margin-bottom:16px; }
.v4-row3 { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:16px; margin-bottom:16px; }
.v4-row4 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-bottom:22px; }
.v4-row2 > section, .v4-row3 > section, .v4-row4 > section { padding:20px 22px; min-width:0; }
.v4-row2 h3, .v4-row3 h3, .v4-row4 h3 { margin:0 0 12px; font-size:18px; font-weight:600; display:flex; justify-content:space-between; align-items:center; }
.v4-tabrow { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.v4-th, .v4-row { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, .8fr) auto 18px; gap:12px; align-items:center; }
.v4-th { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:8px 4px; border-bottom:1px solid var(--line); }
.v4-th span:last-child { grid-column:4 / span 2; }
.v4-row { all:unset; box-sizing:border-box; display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, .8fr) auto 18px; gap:12px; align-items:center; width:100%; padding:13px 4px; border-bottom:1px solid var(--line); cursor:pointer; font-size:14px; color:var(--ink); }
.v4-row:hover { background:var(--b-soft); } .v4-row:focus-visible { outline:2px solid var(--b-pill-on); }
.v4-c { display:flex; flex-direction:column; min-width:0; } .v4-c .sub { font-size:12px; }
.v4-why { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.v4-own { display:flex; align-items:center; gap:6px; min-width:0; }
.v4-tag { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; padding:4px 10px; border-radius:99px; white-space:nowrap; }
.v4-tag.late { background:var(--v4-r-bg); color:var(--v4-r); } .v4-tag.wait { background:var(--v4-y); color:var(--v4-y-ink); } .v4-tag.ok { background:var(--v4-ok-bg); color:var(--v4-ok); }
.v4-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; font-size:12.5px; }
.v4-nm .sub { color:var(--b-dark-sub, var(--th-line2)); }
.v4-nmi { all:unset; box-sizing:border-box; cursor:pointer; display:grid; grid-template-columns:10px 1fr auto; gap:12px; align-items:center; width:100%; margin-top:10px; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.06); color:var(--b-dark-ink, var(--th-soft2)); font-size:14px; }
.v4-nmi:hover { background:rgba(255,255,255,.1); } .v4-nmi[disabled] { cursor:default; opacity:.6; } .v4-nmi:focus-visible { outline:2px solid var(--v4-o1); }
.v4-nmi > span { display:flex; flex-direction:column; min-width:0; } .v4-nmi .sub { font-size:12px; }
.v4-dot { width:8px; height:8px; border-radius:50%; } .v4-dot.o { background:var(--v4-o1); } .v4-dot.r { background:#E5484D; } .v4-dot.y { background:#F2C94C; } .v4-dot.b { background:#7AA7F0; } .v4-dot.g { background:var(--th-line2); }
.v4-cnt { min-width:26px; text-align:center; padding:4px 8px; border-radius:99px; background:rgba(255,255,255,.12); font-weight:700; font-size:12.5px; }
.v4-tt, .v4-tr { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, 1.4fr) 54px minmax(0, .9fr); gap:12px; align-items:center; }
.v4-tt { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:8px 4px; border-bottom:1px solid var(--line); }
.v4-tr { all:unset; box-sizing:border-box; display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, 1.4fr) 54px minmax(0, .9fr); gap:12px; align-items:center; width:100%; padding:11px 4px; border-bottom:1px solid var(--line); cursor:pointer; font-size:14px; color:var(--ink); }
.v4-tr:hover { background:var(--b-soft); } .v4-tr:focus-visible { outline:2px solid var(--b-pill-on); }
.v4-who { display:flex; align-items:center; gap:8px; min-width:0; } .v4-who b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .v4-first { display:none; }
.v4-st { display:inline-block; font-size:12px; font-weight:700; padding:4px 10px; border-radius:99px; background:var(--b-soft); white-space:nowrap; }
.v4-fd { display:flex; flex-direction:column; gap:4px; } .v4-fd .sub { font-size:12px; }
.v4-late { justify-self:center; min-width:34px; text-align:center; font-weight:700; padding:4px 8px; border-radius:10px; }
.v4-late.ok { background:var(--v4-ok-bg); color:var(--v4-ok); } .v4-late.mid { background:var(--v4-y); color:var(--v4-y-ink); } .v4-late.bad { background:var(--v4-r-bg); color:var(--v4-r); }
.v4-ok { font-size:12px; font-weight:700; padding:4px 10px; border-radius:99px; background:var(--v4-ok-bg); color:var(--v4-ok); white-space:nowrap; }
.v4-moves #movesTile > * { margin:0; }
.v4-cr { all:unset; box-sizing:border-box; cursor:pointer; display:grid; grid-template-columns:48px 1fr auto; gap:10px; align-items:center; width:100%; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink); }
.v4-cr > span { display:flex; flex-direction:column; min-width:0; } .v4-cr .sub { font-size:12px; } .v4-cr:focus-visible { outline:2px solid var(--b-pill-on); }
.v4-t { font-weight:600; }
.v4-note { margin-top:12px; font-size:12px; }
.v4-cuts { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.v4-cut { all:unset; box-sizing:border-box; display:flex; flex-direction:column; gap:4px; padding:14px; border-radius:16px; background:var(--b-soft); cursor:pointer; color:var(--ink); }
.v4-cut[disabled] { cursor:default; } .v4-cut.hot { background:var(--v4-r-bg); } .v4-cut b { font-size:28px; font-weight:600; } .v4-cut .sub { font-size:12px; }
/* half screen (960) */
@media (max-width: 1100px) {
  .v4-nums { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .v4-row2, .v4-row3, .v4-row4 { grid-template-columns:minmax(0, 1fr); }
  .v4-full { display:none; } .v4-first { display:inline; }
  .v4-th, .v4-row { grid-template-columns:minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, .7fr) auto 18px; }
}
@media (max-width: 640px) {
  .v4-nums { grid-template-columns:minmax(0, 1fr); }
  .v4-th { display:none; } .v4-row { grid-template-columns:minmax(0, 1fr) auto 18px; } .v4-row .v4-why, .v4-row .v4-own { display:none; }
  .v4-tt { display:none; } .v4-tr { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) 44px; } .v4-tr > span:nth-child(2), .v4-tr > span:nth-child(5) { display:none; }
}
/* the manager Overview: "The team today" is the per-person view, so the moves tile's By coordinator table stays on My day /
   the Report (design chat, Oct 26: it clipped at 1440); tiles keep their own height, no stretched dark area */
.v4-moves .bmt-team { display:none; }
.v4-row2, .v4-row3 { align-items:start; }
/* the portal confidence card (owner, Nov 5): one row under the four numbers; managers only */
.v4-conf { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; padding:14px 22px; margin:0 0 16px; text-decoration:none; color:inherit; }
.v4-conf .v4-big { display:flex; align-items:baseline; gap:6px; } .v4-conf .v4-big b { font-size:28px; }
.v4-confready { font-size:13px; font-weight:600; } .v4-confready.yes { color:var(--ok, #146C43); }
.v4-confgo { margin-left:auto; font-size:13px; }
@media (max-width: 760px) { .v4-conf { min-height:44px; } .v4-confgo { margin-left:0; } }
/* Cases per status (owner, Nov 7): the ladder's groups side by side; a status opens who covers it */
.v4-status { padding:20px 22px; margin:0 0 22px; }
.v4-status h3 { margin:0 0 4px; font-size:18px; font-weight:600; display:flex; align-items:baseline; gap:8px; } .v4-status h3 .sub { font-weight:400; font-size:13px; }
.v4-stg { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px 18px; margin-top:12px; }
.v4-stgrp h4 { margin:0 0 6px; font-size:13px; font-weight:600; color:var(--muted); display:flex; justify-content:space-between; text-transform:uppercase; letter-spacing:.04em; }
.v4-stgrp ul { list-style:none; margin:0; padding:0; }
.v4-st { border-top:1px solid var(--line, #E4E9F0); } .v4-st:first-child { border-top:0; }
.v4-stb { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; min-height:36px; padding:6px 4px; border:0; background:none; color:inherit; font:inherit; font-size:14px; text-align:left; cursor:pointer; border-radius:6px; }
.v4-stb:hover { background:var(--th-soft, rgba(0,0,0,.04)); } .v4-stb b { font-variant-numeric:tabular-nums; }
.v4-st.pos .v4-stn::before { content:'● '; color:var(--ok, #146C43); }
.v4-st.pos .v4-stb b { color:var(--ok, #146C43); }
.v4-stgrp.muted .v4-stb { color:var(--muted); }
.v4-stpeople { list-style:none; margin:2px 0 8px 14px; padding:0; font-size:13px; } .v4-stpeople li { display:flex; justify-content:space-between; padding:3px 4px; }
@media (max-width: 760px) { .v4-stb { min-height:44px; } }
/* Nov 9 (owner: "not properly aligned, some words can't be read"): .v4-st is also the small status pill elsewhere on Overview
   (inline-block, nowrap, a pill background), so each row here became a pill that never wraps and ran into the next column.
   Inside this card a status is a full-width row, and a long HHA status wraps instead of being cut off. */
.v4-status .v4-stg { grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.v4-status .v4-stgrp { min-width:0; }
.v4-status .v4-st { display:block; white-space:normal; padding:0; border-radius:0; background:none; font-size:inherit; font-weight:inherit; }
.v4-status .v4-stb { align-items:flex-start; }
.v4-status .v4-stn { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; line-height:1.35; }
.v4-status .v4-stb b { flex:0 0 auto; padding-left:6px; }
.v4-status .v4-stgrp h4 span { flex:0 0 auto; padding-left:8px; }

/* The motion library (owner approved v6, Oct 26: "no cuts, all things properly handled with care"; design/effects-v2).
   One easing, transform and opacity only (nothing moves the layout), and all of it off under prefers-reduced-motion: the
   final values always show. web/js/motion.js (window.Motion) drives the parts that need numbers or the mouse. */
:root { --m-ease:cubic-bezier(.2,.8,.2,1); --m-fast:160ms; --m-med:240ms; --m-orange:var(--th-accent); --m-green:#22A35A; }
/* hover lift and press */
.m-lift { transition:transform var(--m-med) var(--m-ease), box-shadow var(--m-med) var(--m-ease); }
.m-lift:hover { transform:translateY(-3px); box-shadow:0 12px 28px -14px rgba(var(--th-ink-rgb), .28); }
.m-press { transition:transform var(--m-fast) var(--m-ease); } .m-press:active { transform:scale(.97); }
button.m-lift:active, a.m-lift:active { transform:translateY(-1px) scale(.98); }
/* a slow warm light behind a hero title (put .m-glow on a positioned parent) */
.m-glow { position:relative; isolation:isolate; overflow:hidden; }
.m-glow::before { content:''; position:absolute; z-index:-1; inset:-200px -200px auto auto; width:700px; height:500px; border-radius:50%; background:radial-gradient(closest-side, rgba(var(--th-accent-rgb), .20), rgba(var(--th-accent-rgb), 0)); filter:blur(10px); animation:m-drift 14s ease-in-out infinite alternate; pointer-events:none; }
@keyframes m-drift { to { transform:translate(-160px, 90px) scale(1.15); } }
/* the live dot (Motion.liveDot) */
.m-live { display:inline-block; width:8px; height:8px; border-radius:99px; background:var(--m-green); vertical-align:middle; margin-right:6px; animation:m-breathe 2.4s ease-out infinite; }
@keyframes m-breathe { 0% { box-shadow:0 0 0 0 rgba(34,163,90,.45); } 80%, 100% { box-shadow:0 0 0 9px rgba(34,163,90,0); } }
/* odometer digits (Motion.odometer): each digit is a column of 0-9 that slides */
.m-odo { display:inline-flex; overflow:hidden; height:1.15em; line-height:1.15em; font-variant-numeric:tabular-nums; vertical-align:bottom; }
.m-odo .m-d { display:inline-block; height:1.15em; overflow:hidden; } .m-odo .m-d i { display:flex; flex-direction:column; font-style:normal; transition:transform 700ms var(--m-ease); }
.m-odo .m-d i span { height:1.15em; } .m-odo .m-s { display:inline-block; }
/* sparkline (Motion.sparkline) */
.m-spark path.m-line { fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:stroke-dashoffset 1.1s var(--m-ease); }
.m-spark path.m-area { stroke:none; fill:currentColor; opacity:.12; } .m-spark circle { fill:currentColor; transition:opacity .3s var(--m-ease) 1s; }
/* ring with a milestone ripple (Motion.ring) */
.m-ring { position:relative; display:inline-block; } .m-ring svg { transform:rotate(-90deg); display:block; }
.m-ring .m-bg { fill:none; stroke:var(--b-soft, var(--th-soft)); } .m-ring .m-fg { fill:none; stroke:var(--m-orange); stroke-linecap:round; transition:stroke-dashoffset 900ms var(--m-ease); }
.m-ring .m-pct { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:700; }
.m-ring.m-ms::after { content:''; position:absolute; inset:-6px; border-radius:50%; border:3px solid rgba(var(--th-accent-rgb), .6); animation:m-ripple 900ms var(--m-ease) forwards; pointer-events:none; }
@keyframes m-ripple { from { transform:scale(.9); opacity:1; } to { transform:scale(1.25); opacity:0; } }
.m-praise { font-size:12.5px; font-weight:700; color:var(--ok, #1E6B3F); min-height:18px; }
/* spotlight on a dark tile (Motion.spotlight) */
.m-spot { position:relative; isolation:isolate; }
.m-spot::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--th-accent-rgb), .28), transparent 60%); opacity:0; transition:opacity var(--m-med); pointer-events:none; }
.m-spot:hover::before { opacity:1; }
/* content glides in (Motion.glide) */
@keyframes m-glide { from { opacity:0; transform:translateX(10px); } }
.m-glide { animation:m-glide 260ms var(--m-ease); }
/* the sliding tab pill (Motion.slidePill) */
.m-pill-host { position:relative; isolation:isolate; }
.m-pill { position:absolute; z-index:-1; left:0; top:0; border-radius:99px; background:var(--b-pill-on, var(--th-ink)); transition:transform var(--m-med) var(--m-ease), width var(--m-med) var(--m-ease); pointer-events:none; }
.m-pill-host > .on, .m-pill-host > [aria-selected="true"], .m-pill-host > [aria-pressed="true"] { background:transparent !important; }
/* live change: a number pulses orange once (Motion.pulse) */
@keyframes m-pulse { 0% { box-shadow:0 0 0 0 rgba(var(--th-accent-rgb), .55); } 100% { box-shadow:0 0 0 12px rgba(var(--th-accent-rgb), 0); } }
.m-pulse { animation:m-pulse 700ms var(--m-ease) 1; border-radius:10px; }
/* done: the check draws, the row slides out (Motion.doneRow) */
@keyframes m-check { from { stroke-dashoffset:24; } to { stroke-dashoffset:0; } }
.m-check path { stroke-dasharray:24; animation:m-check var(--m-med) var(--m-ease) both; }
.m-out { transition:transform var(--m-med) var(--m-ease), opacity var(--m-med) var(--m-ease); transform:translateX(24px); opacity:0; }
/* the friendly empty state (Motion.empty) */
.m-empty { display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px 12px; text-align:center; }
.m-empty b { font-size:15px; } .m-empty .sub { max-width:34ch; }
.m-sun { width:54px; height:54px; border-radius:99px; background:radial-gradient(circle at 40% 35%, var(--th-tint), var(--th-glow)); box-shadow:0 0 0 10px rgba(var(--th-accent-rgb), .12); animation:m-sunb 3s ease-in-out infinite; }
@keyframes m-sunb { 50% { box-shadow:0 0 0 16px rgba(245,181,71,.08); } }
/* the burst canvas (Motion.celebrate) */
.m-cel { position:fixed; inset:0; pointer-events:none; z-index:9999; }
/* a hidden tab: the endless ones rest */
html.m-hidden .m-glow::before, html.m-hidden .m-live, html.m-hidden .m-sun { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce) {
  .m-glow::before, .m-live, .m-sun, .m-ring.m-ms::after, .m-glide, .m-pulse, .m-check path { animation:none !important; }
  .m-lift, .m-press, .m-odo .m-d i, .m-spark path.m-line, .m-spark circle, .m-ring .m-fg, .m-pill, .m-out, .m-spot::before { transition:none !important; }
  .m-lift:hover, .m-lift:active, .m-press:active { transform:none !important; }
}

/* My day, v6 (web/js/myday-v6.js; design/v6 v6-myday). The bento tiles, one row of three, then two rows of wide + narrow.
   960: two tiles a row, then one; 390: one column. Nothing scrolls sideways; light and dark from the bento tokens. */
.v6-live { text-transform:uppercase; letter-spacing:.06em; }
.v6-hello { display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.v6-hi { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px; color:var(--ink2, var(--ink)); }
.v6-cover { display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:var(--b-r-tile, 28px); background:var(--b-dark, var(--th-ink)); color:var(--b-dark-ink, var(--th-soft2)); margin:0 0 16px; font-size:14px; }
.v6-cover > span:nth-child(2) { flex:1; min-width:0; }
.v6-wbtn { all:unset; cursor:pointer; padding:9px 16px; border-radius:99px; background:#fff; color:var(--th-ink); font-weight:700; font-size:13px; white-space:nowrap; }
.v6-wbtn:focus-visible { outline:2px solid var(--b-pill-on); outline-offset:2px; }
.v6-row1 { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap:16px; margin-bottom:16px; }
.v6-row2, .v6-row3 { display:grid; grid-template-columns:minmax(0, 1.75fr) minmax(0, 1fr); gap:16px; margin-bottom:16px; align-items:start; }
.v6-row2:has(> .v6-off[hidden]) { grid-template-columns:minmax(0, 1fr); }
.v6-row2:has(> .v6-off[hidden]):has(> .v6-streak[hidden]) { display:none; }
.v6-row1 > .tile, .v6-row2 > .tile, .v6-row3 > .tile, .v6-side > .tile { min-width:0; }
.v6-side { display:flex; flex-direction:column; gap:16px; min-width:0; }
.v6-th { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.v6-th h3 { margin:0; }
/* progress ring */
.v6-pg { display:flex; align-items:center; gap:18px; margin-top:6px; }
.v6-ring .m-pct { font-size:22px; }
.v6-pgr { display:flex; flex-direction:column; gap:6px; min-width:0; }
.v6-links { margin-top:12px; font-size:12.5px; }
.v6-links .linkbtn { font-size:12.5px; }
/* why off the list */
.v6-off { border:2px solid color-mix(in srgb, var(--m-orange, var(--th-accent)) 45%, transparent); }
.v6-or { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:14px; align-items:center; padding:14px 0; border-top:1px solid var(--line); }
.v6-or:first-of-type { margin-top:10px; }
.v6-or > span:first-child { display:flex; flex-direction:column; min-width:0; }
.v6-orb { display:flex; flex-wrap:wrap; gap:6px; }
.v6-rb { all:unset; cursor:pointer; padding:7px 12px; border-radius:99px; background:var(--b-soft); font-size:13px; font-weight:600; color:var(--ink); transition:transform var(--m-fast, 160ms) var(--m-ease, ease); }
.v6-rb:hover { transform:translateY(-1px); } .v6-rb:active { transform:scale(.97); } .v6-rb:focus-visible { outline:2px solid var(--b-pill-on); }
.v6-rb.on { background:var(--b-pill-on, var(--th-ink)); color:var(--b-pill-on-ink, #fff); } .v6-rb.skip { background:transparent; color:var(--muted); text-decoration:underline; }
/* streak */
.v6-sk { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:6px 0 10px; }
.v6-dots { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.v6-dot { font-style:normal; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; font-size:12px; font-weight:700; background:var(--b-soft); color:var(--muted); }
.v6-dot.ok { background:var(--ok-tint, #E7F4EC); color:var(--ok, #1E6B3F); } .v6-dot.late { background:var(--alert-tint, #FDEDEA); color:var(--alert, #B42318); }
.v6-dot.today { background:var(--ok, #1E6B3F); color:#fff; animation:v6-flame 1.8s ease-in-out infinite; }
@keyframes v6-flame { 50% { box-shadow:0 0 0 4px rgba(30,107,63,.18); } }
.v6-goal { display:flex; flex-direction:column; gap:6px; font-size:14px; }
/* call next */
.v6-nh, .v6-nr { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1fr) auto 34px; gap:12px; align-items:center; }
.v6-nh { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:12px 2px 8px; border-bottom:1px solid var(--line); }
.v6-nr { padding:11px 2px; border-bottom:1px solid var(--line); font-size:14px; }
.v6-nc { display:flex; flex-direction:column; align-items:flex-start; min-width:0; text-align:left; } .v6-nc b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.v6-ns { min-width:0; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.v6-btp { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:99px; background:var(--pf-blue, #C9DAF3); color:#1C3462; font-size:12.5px; font-weight:700; white-space:nowrap; }
html.dark .v6-btp { color:#C9DAF3; }
.v6-btp.now, html.dark .v6-btp.now { background:#2F6FD6; color:#fff; }   /* white in dark too (was light blue on blue, 3.4:1; Oct 27) */ .v6-bt .sub.v6-btp { background:transparent; }
.v6-due { font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:99px; white-space:nowrap; justify-self:start; }
.v6-due.late { background:var(--alert-tint, #FDEDEA); color:var(--alert, #B42318); } .v6-due.today { background:var(--pf-yellow, #F8E2A0); color:#6B4E00; } .v6-due.new { background:var(--b-soft); color:var(--ink); }
html.dark .v6-due.today { color:#F8E2A0; }
.v6-tick { all:unset; cursor:pointer; width:32px; height:32px; border-radius:99px; display:inline-flex; align-items:center; justify-content:center; background:var(--b-soft); color:var(--muted); transition:transform var(--m-fast, 160ms) var(--m-ease, ease), background-color var(--m-fast, 160ms); }
.v6-tick:hover { transform:translateY(-1px); color:var(--ok, #1E6B3F); } .v6-tick:active { transform:scale(.96); } .v6-tick:focus-visible { outline:2px solid var(--b-pill-on); }
.v6-tick.on { background:var(--ok, #1E6B3F); color:#fff; }
/* PA registration, one line each */
.v6-pai { border-top:1px solid var(--line); }
.v6-pai:first-of-type { margin-top:10px; }
.v6-pai summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 0; }
.v6-pai summary::-webkit-details-marker { display:none; }
.v6-pan { display:flex; flex-direction:column; min-width:0; } .v6-pan .sub { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v6-pai .bmd-tag { white-space:nowrap; }
.v6-pad { padding:0 0 12px; }
/* cutoffs */
.v6-cut { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 0; border-top:1px solid var(--line); font-size:14px; }
.v6-cut:first-of-type { margin-top:8px; } .v6-cut em { font-style:normal; font-weight:700; } .v6-cut em.hot { color:var(--alert, #B42318); }
.v6-cut .sub, .v6-cut .linkbtn { margin-left:auto; }
/* that's everything for today */
.v6-end { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 24px; margin-bottom:16px; flex-wrap:wrap; }
.v6-k { font-size:20px; font-weight:600; }
.v6-endn { display:flex; gap:28px; flex-wrap:wrap; margin:14px 0 10px; } .v6-endn > div { display:flex; flex-direction:column; } .v6-endn .sub { color:var(--b-dark-sub, var(--th-line2)); }
.v6-endl { display:flex; gap:12px; align-items:center; flex-wrap:wrap; } .v6-endl .sub { color:var(--b-dark-sub, var(--th-line2)); }
.v6-pill { padding:5px 12px; border-radius:99px; background:rgba(255,255,255,.1); font-weight:700; font-size:13px; }
.v6-out { background:#fff !important; color:var(--th-ink) !important; }
.v6-out.glow-once { animation:v6-glow 1.6s var(--m-ease, ease) 1; }
@keyframes v6-glow { 0%, 100% { box-shadow:0 0 0 0 rgba(var(--th-accent-rgb), 0); } 40% { box-shadow:0 0 0 8px rgba(var(--th-accent-rgb), .35); } }
/* sizes */
@media (max-width: 1100px) {
  .v6-row1 { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } .v6-row1 > .v6-ep { grid-column:1 / -1; }
  .v6-row2, .v6-row3 { grid-template-columns:minmax(0, 1fr); }
  .v6-nh, .v6-nr { grid-template-columns:minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1fr) auto 34px; }
}
@media (max-width: 640px) {
  .v6-row1 { grid-template-columns:minmax(0, 1fr); }
  .v6-cover { flex-wrap:wrap; }
  .v6-or { grid-template-columns:minmax(0, 1fr); gap:8px; }
  .v6-nh { display:none; } .v6-nr { grid-template-columns:minmax(0, 1fr) auto 34px; } .v6-nr .v6-ns, .v6-nr .v6-bt { display:none; }
  .v6-endn { gap:18px; }
}
@media (prefers-reduced-motion: reduce) { .v6-dot.today, .v6-out.glow-once { animation:none !important; } .v6-rb, .v6-tick { transition:none !important; } .v6-rb:hover, .v6-tick:hover, .v6-rb:active, .v6-tick:active { transform:none !important; } }
/* the v6 tiles get the bento tile's padding (the old layout's rules name their own containers) */
html.bento main :is(.v6-row1, .v6-row2, .v6-row3, .v6-side) > .tile { position:relative; display:flex; flex-direction:column; gap:10px; padding:22px; min-width:0; overflow:hidden; }
html.bento main .v6-row1 > .bmd-start { overflow:hidden; }
.v6-row1:not(:has(> .v6-ep)) { grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); }
/* the other tabs of My day (Upcoming, Done…): only the list, as before */
html.bento main[data-mdtab]:not([data-mdtab=today]) :is(.v6-row1, .v6-row2, .v6-row3, .v6-cover, #v6End) { display:none; }
.v6-nc.linkbtn { text-decoration:none; } .v6-nc.linkbtn:hover b { text-decoration:underline; }
@media (max-width: 640px) { html.bento main :is(.v6-row1, .v6-row2, .v6-row3, .v6-side) > .tile { padding:18px; } }
/* no "Why off the list?" today: the streak sits in one calm line instead of a tall wide tile */
html.bento main .v6-row2:has(> .v6-off[hidden]) > .v6-streak { flex-direction:row; align-items:center; flex-wrap:wrap; gap:10px 28px; }
.v6-row2:has(> .v6-off[hidden]) > .v6-streak h3 { width:100%; margin:0; }
.v6-row2:has(> .v6-off[hidden]) > .v6-streak .v6-sk, .v6-row2:has(> .v6-off[hidden]) > .v6-streak .v6-dots { margin:0; }
/* phone: one tile a row, also when there is no ePACES tile (the two-column rule above came later) */
@media (max-width: 640px) { .v6-row1, .v6-row1:not(:has(> .v6-ep)) { grid-template-columns:minmax(0, 1fr); } .v6-pg { flex-wrap:wrap; } }
@media (min-width: 641px) and (max-width: 860px) { .v6-row1, .v6-row1:not(:has(> .v6-ep)) { grid-template-columns:minmax(0, 1fr); } }
/* design review, Oct 26: names in the normal text colour (also dark); the best time under the name on a phone; no Daily report button beside the end card */
.v6-nc b, .v6-pan b, .v6-or b { color:var(--ink); }
.v6-order { font-size:12px; }
html:has(.v6-end) :is(#gmReportBtn, .gm-card.gm-slim) { display:none; }
@media (max-width: 640px) {
  .v6-nr .v6-bt { display:block; grid-column:1; grid-row:2; margin-top:-4px; }
  .v6-nr .v6-nc { grid-column:1; grid-row:1; } .v6-nr .v6-due { grid-column:2; grid-row:1 / span 2; } .v6-nr .v6-tick { grid-column:3; grid-row:1 / span 2; }
}
/* phone pass (Oct 27): the Done tick is a 44 px target on a phone */
@media (max-width: 600px) { .v6-tick { width:44px; height:44px; } .v6-nr { grid-template-columns:minmax(0, 1fr) auto 44px; } }
/* Stage 2 (Nov 5): "Likely lost: act today" / "Going cold": one line per case, GCR first, the best time at the right */
.v6-cold .v6-coldr { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:8px; align-items:center; padding:6px 0; border-top:1px solid var(--line, rgba(0,0,0,.08)); }
.v6-cold .v6-coldr:first-of-type { border-top:0; }
.v6-cold .v6-coldwhy { margin:8px 0 0; font-size:12px; }
@media (max-width: 640px) { .v6-cold .v6-coldr { grid-template-columns:auto minmax(0, 1fr); } .v6-cold .v6-coldr .v6-btp { grid-column:1 / -1; } }

/* Gmail drafts and the daily report (owner, Oct 23; design/features f-gmail, f-report, f-report-done, f-report-settings,
   f-refform). Bento look: tiles, pills, the orange hero for the main action. Light and dark, desk, half a screen and phone. */
.gm-m { width:18px; height:18px; flex:none; background:#fff; border-radius:50%; padding:3px; box-sizing:content-box; }
html.bento .btn.gm-main, .gm-main { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px 0 8px; border:0; border-radius:99px; background:var(--th-accent2); color:#fff; font-weight:700; cursor:pointer; }
html.bento .btn.gm-main:hover, .gm-main:hover { background:var(--th-accent3); color:#fff; } .gm-main[disabled] { opacity:.6; cursor:default; }
.gm-main:not(:has(.gm-m)) { padding-left:16px; }
html.dark .btn.gm-main, html.dark .gm-main { background:var(--th-daccent); color:var(--th-dpage); } html.dark .btn.gm-main:hover, html.dark .gm-main:hover { background:var(--th-daccent); color:var(--th-dpage); }
.gm-pill { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px 0 8px; border:0; border-radius:99px; background:#fff; color:var(--th-ink); font-weight:700; text-decoration:none; cursor:pointer; align-self:flex-start; }
.gm-pill:hover { background:var(--th-tint); color:var(--th-ink); }
.gm-lbl { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:14px 0 8px; }
.gm-lbl.gm-or { color:var(--th-accent2); margin-top:0; } html.dark .gm-lbl.gm-or { color:var(--th-daccent); }
.gm-chips { display:flex; flex-wrap:wrap; gap:8px; }
.gm-chip { display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 12px 0 4px; border-radius:99px; background:var(--b-soft, var(--th-soft)); font-size:13px; }
.gm-chip .av { width:26px; height:26px; font-size:10px; } .gm-chip b { font-weight:600; color:var(--ink); } .gm-chip span:not(.av) { color:var(--muted); }
.gm-x { border:0; background:none; color:var(--muted); font-size:16px; line-height:1; cursor:pointer; padding:0; min-width:28px; min-height:28px; margin-right:-8px; border-radius:99px; display:inline-flex; align-items:center; justify-content:center; } .gm-x:hover { color:var(--alert, #B42318); background:var(--th-soft, rgba(0,0,0,.05)); }
/* the × is a real target (owner, Nov 5: removing was hard): 28 px, 44 px on a phone */
@media (max-width: 760px) { .gm-chip { height:44px; } .gm-x { min-width:44px; min-height:44px; margin-right:-12px; } }
html.bento .gm-in, .gm-in { width:100%; min-height:44px; padding:10px 16px; border:0; border-radius:22px; background:var(--b-soft, var(--th-soft)); color:var(--ink); font:500 14px 'Plus Jakarta Sans', system-ui, sans-serif; box-sizing:border-box; }
textarea.gm-in { border-radius:18px; resize:vertical; line-height:1.45; }
.gm-in:focus { outline:none; box-shadow:0 0 0 3px rgba(var(--th-accent-rgb), .3); }
.gm-add { display:flex; gap:8px; margin-top:8px; } .gm-add .gm-in { flex:1; }
.gm-on { display:inline-flex; align-items:center; height:24px; padding:0 10px; border:0; border-radius:99px; background:#E7F4EC; color:#1E6B3F; font-size:12px; font-weight:700; cursor:pointer; }
.gm-on.off { background:transparent; color:var(--muted); }
html.dark .gm-on { background:#15301F; color:#6FCF97; } html.dark .gm-on.off { background:transparent; color:var(--muted); }
.gm-rem { display:flex; align-items:center; gap:10px; } .gm-rem .gm-in { max-width:180px; font-weight:700; }

/* the toast after a draft: Open Gmail, Undo */
.gm-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:200; display:flex; align-items:center; gap:14px; max-width:min(640px, calc(100vw - 32px)); padding:12px 12px 12px 14px;
  border-radius:22px; background:var(--th-ink); color:var(--th-soft2); box-shadow:0 18px 40px rgba(var(--th-ink-rgb), .35); animation:gmIn .25s ease both; }
.gm-toast .sub { color:var(--th-line2); } .gm-toast b { color:#fff; }
html.bento .gm-toast .btn, .gm-toast .btn { border-radius:99px; height:38px; white-space:nowrap; } html.bento .gm-toast .gm-open, .gm-toast .gm-open { background:var(--th-accent); border-color:var(--th-accent); color:var(--th-ink); font-weight:700; text-decoration:none; display:inline-flex; align-items:center; }
html.bento .gm-toast .gm-undo, .gm-toast .gm-undo { background:rgba(255,255,255,.1); border:0; color:#fff; }
.gm-tic .gm-m { width:20px; height:20px; }
@keyframes gmIn { from { opacity:0; transform:translate(-50%, 10px); } to { opacity:1; transform:translate(-50%, 0); } }

/* the daily report sheet (f-report): a floating sheet on the right; it fills the window at half a screen and on a phone */
.gm-ov { position:fixed; inset:0; z-index:150; background:rgba(var(--th-ink-rgb), .28); backdrop-filter:blur(3px); display:flex; justify-content:flex-end; align-items:flex-start; padding:24px; overflow:auto; }
html.dark .gm-ov { background:rgba(0,0,0,.55); }
.gm-sheet { width:min(640px, 100%); border-radius:32px; background:var(--b-tile, #fff); color:var(--ink); padding:24px 26px; box-shadow:0 24px 60px rgba(var(--th-ink-rgb), .25); box-sizing:border-box; }
.gm-top { display:flex; align-items:flex-start; gap:14px; } .gm-top h2 { margin:0; font-size:24px; line-height:30px; font-weight:600; letter-spacing:-.3px; }
.gm-ic { width:44px; height:44px; border-radius:50%; background:var(--th-tint); color:var(--th-accent2); display:flex; align-items:center; justify-content:center; flex:none; }
html.dark .gm-ic { background:var(--th-daccent2); color:var(--th-daccent); }
.gm-close { margin-left:auto; width:38px; height:38px; border:0; border-radius:50%; background:var(--b-soft, var(--th-soft)); color:var(--ink2); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
.gm-what { margin-top:16px; padding:18px; border-radius:24px; background:var(--th-tint); border:1px solid var(--line); }
html.dark .gm-what { background:var(--th-dpage); }
.gm-nums { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin-bottom:6px; }
.gm-nums > div { padding:12px 14px; border-radius:18px; background:var(--b-tile, #fff); display:flex; flex-direction:column; }
.gm-nums b { font-size:32px; line-height:36px; font-weight:600; letter-spacing:-.6px; color:var(--ink); } .gm-nums span { font-size:12px; color:var(--muted); }
.gm-nums .ok b { color:#1E6B3F; } .gm-nums .or b { color:var(--th-accent2); } .gm-nums .bl b { color:#1D5FA8; }
html.dark .gm-nums .ok b { color:#6FCF97; } html.dark .gm-nums .or b { color:var(--th-daccent); } html.dark .gm-nums .bl b { color:#7FB5F0; }
.gm-h { font-weight:700; margin:12px 0 4px; } .gm-what ul { margin:0; padding-left:18px; } .gm-what li { margin:2px 0; color:var(--ink2); }
.gm-foot { display:flex; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap; } .gm-foot > .sub { flex:1 1 220px; display:flex; gap:6px; align-items:flex-start; }
.gm-foot .btn.quiet { border-radius:99px; height:40px; }

/* My day: the report card */
.gm-card { display:flex; flex-direction:column; gap:8px; padding:22px; border-radius:var(--b-r-tile, 28px); margin:0 0 16px; }
.gm-card h3 { margin:0; font-size:22px; font-weight:600; color:#fff; } .gm-card .gm-k { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.85); }

/* My account › Gmail & daily report (f-gmail) */
.gm-wrap { margin-top:22px; }
.gm-sech { display:flex; align-items:center; gap:10px; font-size:18px; margin:0 0 12px; }
.gm-prev { font-size:11px; font-weight:700; padding:3px 10px; border-radius:99px; background:#FCF3DC; color:#8A5A00; letter-spacing:0; }
html.dark .gm-prev { background:#352A12; color:#F2C14E; }
.gm-acct { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; align-items:start; }
.gm-side { display:flex; flex-direction:column; gap:16px; }
.gm-t { padding:22px; display:flex; flex-direction:column; gap:6px; } .gm-t h3 { margin:0 0 8px; font-size:18px; font-weight:600; }
.gm-t.b-hero h3 { color:#fff; } .gm-t.b-hero .sub { color:rgba(255,255,255,.88); }
.gm-con { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:18px; background:#E7F4EC; }
.gm-con .gm-m { width:26px; height:26px; } .gm-con div { display:flex; flex-direction:column; min-width:0; } .gm-con b { color:var(--ink); } .gm-con span { font-size:13px; color:#1E6B3F; overflow-wrap:anywhere; }
.gm-con em { margin-left:auto; font-style:normal; font-weight:700; color:#1E6B3F; }
.gm-con.off { background:var(--b-soft, var(--th-soft)); } .gm-con.off span { color:var(--muted); }
html.dark .gm-con { background:#15301F; } html.dark .gm-con span, html.dark .gm-con em { color:#6FCF97; } html.dark .gm-con.off { background:var(--th-dsoft); } html.dark .gm-con.off span { color:var(--muted); }
.gm-ticks { list-style:none; padding:0; margin:10px 0; } .gm-ticks li { margin:4px 0; padding-left:20px; position:relative; color:var(--ink2); }
.gm-ticks li::before { content:'✓'; position:absolute; left:0; color:var(--muted); }
.gm-btns { display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; } .gm-btns .btn { border-radius:99px; }
.gm-danger { color:#B42318; } html.dark .gm-danger { color:#FF8A7A; }
.gm-ask { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:4px 10px; border-radius:99px; background:#FCF3DC; color:#8A5A00; font-size:12px; font-weight:700; }
html.dark .gm-ask { background:#352A12; color:#F2C14E; }
.gm-warn { box-shadow:inset 0 0 0 2px #E5A62E; }
.gm-link { text-decoration:none; color:inherit; } .gm-link:hover { box-shadow:0 8px 24px rgba(var(--th-ink-rgb), .08); }

/* managers: Daily report settings (f-report-settings) */
.gm-page .head { display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.gm-stats { margin-left:auto; display:flex; gap:28px; } .gm-stats .b-stat { display:flex; flex-direction:column; } .gm-stats .b-big { font-size:44px; line-height:48px; }
.gm-of { display:inline-flex; align-items:center; vertical-align:middle; margin-left:8px; font-size:12px; line-height:1; font-weight:800; letter-spacing:0; padding:8px 10px; border-radius:99px; background:#22A35A; color:#fff; }
.gm-head h1 { margin:4px 0 0; }
.gm-set { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
.gm-secs { display:flex; flex-direction:column; gap:6px; } .gm-sec { display:flex; align-items:center; gap:12px; border:0; background:none; padding:2px 0; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.gm-sec .gm-on { min-width:38px; justify-content:center; }
.gm-who { display:flex; flex-direction:column; } .gm-wr { display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.gm-wr:first-child { border-top:0; } .gm-wr .av { width:34px; height:34px; } .gm-wr b { font-weight:600; } .gm-wr .tag { margin-left:auto; }

/* the referral form's Gmail part (f-refform) */
.rf-gm { margin-top:12px; padding:18px; border-radius:24px; background:var(--b-tile, #fff); box-shadow:inset 0 0 0 1px var(--line); display:flex; flex-direction:column; gap:10px; }
.rf-gmh { display:flex; align-items:center; gap:10px; } .rf-gmh b { font-size:18px; font-weight:600; } .rf-gmh .tag { margin-left:auto; }
html.bento .rf-gm .field input, html.bento .rf-gm .field textarea { border-radius:18px; background:var(--b-soft, var(--th-soft)); border:0; padding:10px 14px; }
.rf-gmatt { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:18px; background:var(--th-tint); color:var(--th-accent3); }
.rf-gmatt span { display:flex; flex-direction:column; } .rf-gmatt .sub { color:var(--th-accent3); opacity:.8; }
html.dark .rf-gmatt, html.dark .rf-gmatt .sub { background:var(--th-daccent2); color:var(--th-daccent); }
.rf-gmb { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .rf-gmb .sub { flex:1 1 200px; } .rf-gmb .gm-main { margin-left:auto; }
.rf-btns .gm-main { height:40px; }

/* half a screen and phone: the sheet fills the window; the tiles stack */
@media (max-width: 1100px) {
  .gm-acct { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .gm-side { grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; } .gm-side > * { flex:1 1 260px; }
  .gm-set { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 900px) {
  .gm-ov { padding:0; } .gm-sheet { width:100%; min-height:100%; border-radius:0; padding:20px 18px 28px; }
}
@media (max-width: 600px) {
  .gm-acct { grid-template-columns:minmax(0,1fr); }
  .gm-nums { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .gm-stats { margin-left:0; gap:18px; } .gm-stats .b-big { font-size:34px; line-height:38px; }
  .gm-foot .gm-main { width:100%; justify-content:center; } .gm-toast { flex-wrap:wrap; bottom:96px; }
  .rf-gmb .gm-main { width:100%; justify-content:center; }
}

/* design check, Oct 23: the connect tile is the orange hero (a page rule made it white); "saved for <plan>" inside the To field */
html.bento main .panel.gm-t.b-hero { background:var(--b-hero, var(--th-hero)); color:#fff; }
.rf-gmto { position:relative; display:block; } .rf-gmto input { width:100%; padding-right:150px !important; box-sizing:border-box; }
.rf-saved { position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--muted); pointer-events:none; white-space:nowrap; }
html.bento main .panel.gm-t.b-hero h3 { color:#fff; } html.bento main .panel.gm-t.b-hero .sub { color:rgba(255,255,255,.92); }
/* the email signature (owner, Oct 23): paste from Gmail, see the cleaned version */
.gm-sig { margin-top:16px; }
.gm-sigrow { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin-top:6px; }
.gm-sigbox, .gm-sigprev { min-height:140px; max-height:360px; overflow:auto; padding:14px 16px; border-radius:18px; font-size:13px; line-height:1.45; color:var(--th-ink); }
.gm-sigbox { background:var(--b-soft, var(--th-soft)); outline:none; } .gm-sigbox:focus { box-shadow:0 0 0 3px rgba(var(--th-accent-rgb), .3); }
.gm-sigbox:empty::before { content:attr(data-ph); color:var(--muted); }
.gm-sigprev { background:#fff; box-shadow:inset 0 0 0 1px var(--line); }   /* an email is white, in dark mode too */
.gm-sigbox img, .gm-sigprev img { max-width:100%; height:auto; }
/* the boxes show the signature as the email will: white with the light colours, in dark mode too */
html.dark .gm-sigbox, html.dark .gm-sigprev { color-scheme:light; --ink:var(--th-dpage); --ink2:var(--th-dsoft); --muted:var(--th-dline); --navy:var(--th-dpage); --link:#23305C; --line:var(--th-dtext); color:var(--th-dpage); }
html.dark .gm-sigbox { background:var(--th-daccent); } html.dark .gm-sigprev { background:#fff; box-shadow:none; }
html.dark .gm-sigbox :is(td, th, p, div, span, li), html.dark .gm-sigprev :is(td, th, p, div, span, li) { color:inherit; }
.gm-uses { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0 4px; font-size:13px; color:var(--muted); }
.gm-uses span { padding:3px 10px; border-radius:99px; background:#E7F4EC; color:#1E6B3F; font-weight:600; font-size:12px; }
html.dark .gm-uses span { background:#15301F; color:#6FCF97; }
.gm-notice { margin-top:10px; } .gm-notice summary { cursor:pointer; color:var(--ink2); font-weight:600; } .gm-notice .gm-in { margin:8px 0; }
@media (max-width: 900px) { .gm-sigrow { grid-template-columns:minmax(0,1fr); } }

/* daily report: Status moves today (groups open and close; a case opens its window) */
.gm-mv { margin:4px 0; border-radius:16px; background:var(--b-tile, #fff); padding:0 12px; }
.gm-mv > summary { display:flex; align-items:center; gap:8px; padding:10px 0; cursor:pointer; font-size:13px; font-weight:600; color:var(--ink); list-style:none; }
.gm-mv > summary::-webkit-details-marker { display:none; }
.gm-mv > summary::before { content:'›'; display:inline-block; width:12px; transition:transform .15s; color:var(--muted); } .gm-mv[open] > summary::before { transform:rotate(90deg); }
.gm-mv > summary b { margin-left:auto; min-width:28px; padding:2px 10px; border-radius:999px; background:var(--b-soft, var(--th-soft)); text-align:center; }
.gm-mvr { padding:6px 0 8px 20px; border-top:1px solid var(--line); }
.gm-mvp { font-size:13px; color:var(--ink2); } .gm-mvp b { color:var(--ink); margin-left:4px; }
.gm-mvcs { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.gm-mvc { border:0; border-radius:999px; padding:4px 10px; font:inherit; font-size:12px; background:var(--b-soft, var(--th-soft)); color:var(--ink); cursor:pointer; }
.gm-mvc:hover, .gm-mvc:focus-visible { background:var(--th-tint); color:var(--th-accent3); } html.dark .gm-mvc:hover, html.dark .gm-mvc:focus-visible { background:var(--th-daccent2); color:var(--th-daccent); }
.gm-mvt { margin:6px 2px 8px; font-size:13px; color:var(--muted); } .gm-mvt b { color:var(--ink); }
/* Status moves today, v2 (Oct 26): one group per status the cases are now in; the cases one per line */
.gm-mv .gm-mvcs { flex-direction:column; align-items:stretch; gap:4px; padding:0 0 10px 20px; margin-top:0; }
.gm-mv .gm-mvc { border-radius:12px; text-align:left; padding:6px 10px; }
.gm-mv > summary .sub { font-weight:400; font-size:12px; margin-left:6px; }
.gm-mv-r > summary b { background:#FDEDEA; color:#B42318; } .gm-mv-a > summary b { background:#FCF3DC; color:#8A5A00; } .gm-mv-g > summary b { background:#E7F4EC; color:#1E6B3F; }
html.dark .gm-mv-r > summary b { background:#3A1D19; color:#FF8A7A; } html.dark .gm-mv-a > summary b { background:#352A12; color:#F2C14E; } html.dark .gm-mv-g > summary b { background:#15301F; color:#6FCF97; }
/* daily report v2 (owner, Oct 26): two rows of five; amber Hold / PNA, red Lost and late; a small line under a number */
.gm-nums.gm-n5 { grid-template-columns:repeat(5, minmax(0,1fr)); }
.gm-nums i { font-style:normal; font-size:11px; color:var(--muted); margin-top:2px; }
.gm-nums .am b { color:#8A5A00; } .gm-nums .rd b { color:#B42318; }
html.dark .gm-nums .am b { color:#F2C14E; } html.dark .gm-nums .rd b { color:#FF8A7A; }
/* phone: two a row, the fifth across both, so no hole (design check, Oct 26) */
@media (max-width: 600px) { .gm-nums.gm-n5 { grid-template-columns:repeat(2, minmax(0,1fr)); } .gm-nums.gm-n5 > div:nth-child(5) { grid-column:1 / -1; } .gm-nums.gm-n5 b { font-size:26px; line-height:30px; } }
/* a manager's own report with no cases of their own */
.gm-none { display:flex; align-items:center; gap:10px; border-radius:16px; padding:14px 16px; margin:10px 0; background:#E6F0FF; color:#1D4ED8; font-weight:600; font-size:14px; }
html.dark .gm-none { background:#1B2A44; color:#9CC2FF; }

/* daily report v3: the sent email in a frame, the reconnect line, the sent badge (owner, Oct 27) */
.gm-sheet.gm-v3 { max-width: 760px; }
.gm-framebox { border-radius: 14px; overflow: hidden; background: var(--th-soft2); }
.gm-frame { display: block; width: 100%; height: 62vh; border: 0; background: var(--th-soft2); }
.gm-recon { display: flex; gap: 10px; align-items: flex-start; background: #FBF1DC; color: #5C3D00; border-radius: 12px; padding: 12px 14px; margin: 10px 0; }
.gm-recon .btn { margin-top: 8px; }
.gm-sentok { display: flex; gap: 8px; align-items: center; background: #DFF1E6; color: #1E6B3F; border-radius: 12px; padding: 10px 14px; margin: 10px 0; font-weight: 600; }
.gm-acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
html.dark .gm-recon { background: var(--th-daccent2); color: #F1D9A6; } html.dark .gm-sentok { background: #173826; color: #A9E0BE; }
@media (max-width: 600px) { .gm-frame { height: 58vh; } }
/* Daily report settings: who people copy on their own (Nov 5), each with "Remove from their copies" */
.gm-copied { list-style:none; margin:4px 0 8px; padding:0; }
.gm-copied li { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 12px; padding:6px 0; border-top:1px solid var(--line, #E4E9F0); font-size:13px; overflow-wrap:anywhere; }
.gm-copied li:first-child { border-top:0; }
@media (max-width: 760px) { .gm-copied .btn { min-height:44px; } }

/* Send a referral (owner, Oct 23; design f2-ref-0…3): the readiness tile in the case window and the 3-step sheet (Plan, Check
   details, Send). Light and dark, desk, half a screen (full width) and phone (full screen). */
.rs-tilewrap { margin:0 0 12px; }
.rs-tile { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:16px 18px 30px; border-radius:24px; background:var(--b-tile, #fff); }
.rs-ti, .rs-ic { width:42px; height:42px; border-radius:50%; background:var(--th-tint); color:var(--th-accent2); display:flex; align-items:center; justify-content:center; flex:none; }
.rs-tb b { font-size:15px; color:var(--ink); } .rs-tb .sub { font-size:13px; }
.rs-bar { position:absolute; left:18px; right:18px; bottom:10px; height:6px; border-radius:99px; background:var(--b-soft, var(--th-soft)); overflow:hidden; }
.rs-bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--th-accent),var(--th-accent2)); }
html.bento .btn.rs-go { background:var(--th-ink); color:#fff; border:0; border-radius:99px; padding:10px 18px; font-weight:700; white-space:nowrap; }
html.bento.dark .btn.rs-go { background:var(--th-dtext); color:var(--th-dpage); }
html.bento .btn.rs-headbtn { border-radius:99px; }

.rs-ov { position:fixed; inset:0; z-index:160; background:rgba(var(--th-ink-rgb), .30); backdrop-filter:blur(3px); display:flex; justify-content:center; align-items:flex-start; padding:40px 24px; overflow:auto; }
html.dark .rs-ov { background:rgba(0,0,0,.58); }
.rs-sheet { width:min(900px, 100%); border-radius:32px; background:var(--b-tile, #fff); color:var(--ink); padding:24px 26px 0; box-shadow:0 24px 60px rgba(var(--th-ink-rgb), .25); box-sizing:border-box; display:flex; flex-direction:column; max-height:calc(100vh - 80px); }
.rs-top { display:flex; align-items:flex-start; gap:14px; } .rs-top h2 { margin:0; font-size:24px; line-height:30px; font-weight:600; letter-spacing:-.3px; } .rs-top .sub { font-size:13px; }
.rs-x { margin-left:auto; width:38px; height:38px; border-radius:50%; border:0; background:var(--b-soft, var(--th-soft)); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
.rs-steps { list-style:none; margin:18px 0 14px; padding:0; display:flex; align-items:center; gap:10px; }
.rs-steps li:not(.rs-ln) { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--muted); white-space:nowrap; }
.rs-steps li > span { width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; background:var(--b-soft, var(--th-soft)); color:var(--muted); }
.rs-steps li.on { color:var(--ink); } .rs-steps li.on > span { background:var(--th-ink); color:#fff; }
.rs-steps li.done { color:#1E6B3F; } .rs-steps li.done > span { background:#E7F4EC; color:#1E6B3F; }
.rs-steps .rs-ln { flex:1; height:1px; background:var(--line); min-width:16px; }
html.dark .rs-steps li.on > span { background:var(--th-dtext); color:var(--th-dpage); } html.dark .rs-steps li.done { color:#6FCF97; } html.dark .rs-steps li.done > span { background:#15301F; color:#6FCF97; }
.rs-body { flex:1 1 auto; min-height:0; overflow:auto; margin:0 -26px; padding:4px 26px 8px; }
.rs-lbl { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:10px 0 10px; }
.rs-lbl .sub { margin-left:auto; text-transform:none; letter-spacing:0; font-weight:500; }
.rs-lbl.wa { color:var(--th-accent3); } .rs-lbl.ok { color:#1E6B3F; } html.dark .rs-lbl.wa { color:var(--th-daccent); } html.dark .rs-lbl.ok { color:#6FCF97; }
.rs-dot { width:7px; height:7px; border-radius:50%; background:var(--th-accent); display:inline-block; flex:none; }
.rs-cards { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.rs-card { position:relative; min-width:150px; text-align:left; display:flex; flex-direction:column; gap:4px; padding:14px 44px 14px 16px; border-radius:20px; border:2px solid transparent; background:var(--b-soft, var(--th-soft)); color:var(--ink); cursor:pointer; font:inherit; }
.rs-card b { font-size:15px; } .rs-card .sub { font-size:12px; }
.rs-card.on { border-color:var(--th-ink); background:var(--b-tile, #fff); box-shadow:0 4px 14px rgba(var(--th-ink-rgb), .08); } html.dark .rs-card.on { border-color:var(--th-dtext); }
.rs-ok { position:absolute; top:12px; right:12px; width:26px; height:20px; border-radius:99px; background:#E7F4EC; color:#1E6B3F; display:flex; align-items:center; justify-content:center; }
html.dark .rs-ok { background:#15301F; color:#6FCF97; }
.rs-card.rs-more { min-width:auto; padding:14px 18px; justify-content:center; }
.rs-row3 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; max-width:520px; }
.rs-in { position:relative; display:flex; align-items:center; } .rs-in input { flex:1; } .rs-in .sub { position:absolute; right:14px; font-size:12px; pointer-events:none; }
.rs-mail svg { position:absolute; left:14px; color:var(--muted); } html.bento .rs-mail input { padding-left:40px; } .rs-mail .sub { background:var(--b-tile, #fff); padding-left:6px; }
.rs-good { display:flex; align-items:flex-start; gap:10px; margin:16px 0 4px; padding:12px 16px; border-radius:18px; background:#EEF7F1; color:#1E6B3F; font-size:14px; }
html.dark .rs-good { background:#15301F; color:#6FCF97; }
.rs-two { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:20px; align-items:start; }
.rs-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 14px; margin-bottom:10px; }
.rs-f > span { display:flex; align-items:center; gap:6px; }
html.bento .rs-todo input, html.bento .rs-todo select { border:1.5px solid var(--th-peach) !important; background:var(--th-tint) !important; }
html.bento.dark .rs-todo input, html.bento.dark .rs-todo select { border-color:var(--th-daccent2) !important; background:var(--th-dpage) !important; }
.rs-src { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; font-size:12px; color:var(--muted); font-weight:500; }
.rs-src.ok { color:#1E6B3F; } html.dark .rs-src.ok { color:#6FCF97; }
.rs-src.warn > span { color:#9A4513; font-weight:600; } html.dark .rs-src.warn > span { color:#F5A062; }
.rs-chip { border:1px solid var(--line); background:var(--b-tile, #fff); color:var(--ink2); border-radius:99px; padding:3px 10px; font:inherit; font-size:12px; cursor:pointer; }
.rs-chip b { color:var(--ink); font-weight:600; } .rs-chip.on { border-color:#1E6B3F; background:#E7F4EC; } html.dark .rs-chip.on { border-color:#6FCF97; background:#15301F; }
.rs-addr { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0 0 12px; padding:10px 14px; border-radius:16px; font-size:13px; }
.rs-addr > span { display:inline-flex; align-items:center; gap:6px; }
.rs-addr.ok { background:#EEF7F1; color:#1E6B3F; } .rs-addr.warn { background:#FCF3E8; color:#8A3A0B; } .rs-addr .rs-src { margin:0; width:100%; }
html.dark .rs-addr.ok { background:#15301F; color:#6FCF97; } html.dark .rs-addr.warn { background:#352A12; color:#F2C14E; }
.rs-grp { display:grid; grid-template-columns:110px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 14px; margin-bottom:8px; border-radius:16px; background:var(--b-soft, var(--th-soft)); font-size:14px; }
.rs-grp.open { display:block; background:transparent; box-shadow:inset 0 0 0 1px var(--line); }
.rs-gh { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.rs-sum { color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rs-ssn { display:flex; align-items:center; gap:6px; margin:8px 0; }
.rs-side { display:flex; flex-direction:column; gap:12px; }
.rs-pv { display:flex; flex-direction:column; gap:10px; position:sticky; top:0; }
.rs-pvdoc { padding:14px; border-radius:16px; background:#fff; box-shadow:0 2px 10px rgba(var(--th-ink-rgb), .10); display:flex; flex-direction:column; gap:7px; }
html.dark .rs-pvdoc { background:var(--th-dtext); }
.rs-pvlogo { color:#1C3462; } .rs-pvt { display:block; height:7px; width:60%; border-radius:4px; background:var(--th-line); margin-bottom:4px; }
.rs-pvr { display:grid; grid-template-columns:36% 1fr; gap:8px; } .rs-pvr i { height:7px; border-radius:4px; background:var(--th-soft2); display:block; }
.rs-pvr i.f { background:#CDEBD8; border:1px solid #9FD3B2; } .rs-pvr i.e { background:var(--th-tint); border:1px dashed var(--th-accent); }
.rs-pvn { display:flex; gap:6px; flex-wrap:wrap; }
.rs-pill { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:700; }
.rs-pill.ok { background:#E7F4EC; color:#1E6B3F; } .rs-pill.wa { background:#FCF3DC; color:#8A5A00; }
html.dark .rs-pill.ok { background:#15301F; color:#6FCF97; } html.dark .rs-pill.wa { background:#352A12; color:#F2C14E; }
html.bento .btn.rs-open { width:100%; justify-content:center; border-radius:99px; }
.rs-ready { padding:14px 16px; border-radius:18px; background:#EEF7F1; color:#1E6B3F; display:grid; grid-template-columns:auto 1fr; gap:4px 8px; align-items:center; }
.rs-ready .sub { grid-column:1 / -1; color:#2E6B47; } html.dark .rs-ready { background:#15301F; color:#6FCF97; } html.dark .rs-ready .sub { color:#9FD3B2; }
.rs-att { display:flex; align-items:center; gap:12px; padding:12px 14px; margin:4px 0 12px; border-radius:18px; background:var(--th-tint); }
.rs-att b { display:block; font-size:14px; color:var(--ink); } .rs-att .sub { font-size:12px; } .rs-att .linkbtn { margin-left:auto; }
html.dark .rs-att { background:var(--th-daccent2); }
.rs-pdf { width:40px; height:40px; border-radius:50%; background:#fff; color:#B42318; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none; }
.rs-foot { flex:none; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 0 20px; margin-top:8px; border-top:1px solid var(--line); background:var(--b-tile, #fff); }
.rs-saved { font-size:13px; }
.rs-sheet .err { margin:4px 0 0; }
/* design check, Oct 23: the masked Medicaid # with Change, the missing intake address, the "could not tell" hint, field spacing */
.rs-cin { display:flex; align-items:center; gap:12px; min-height:40px; padding:0 14px; border-radius:99px; background:var(--b-soft, var(--th-soft)); }
.rs-cin b { font-weight:600; letter-spacing:.04em; } .rs-cin .linkbtn { margin-left:auto; }
.rs-warn { margin:6px 0 0; padding:8px 12px; border-radius:12px; background:#FCF3E8; color:#8A3A0B; font-size:13px; } html.dark .rs-warn { background:#352A12; color:#F2C14E; }
.rs-hint { margin:-4px 0 12px; }
.rs-row3 { margin-top:12px; }
.rs-main > .field + .field, .rs-main > .rs-warn + .field, .rs-main > .rs-att + .field, .rs-main > .field + .rs-att { margin-top:14px; }
.rs-pill:not(.ok):not(.wa) { background:var(--b-soft, var(--th-soft)); color:var(--ink2); }

/* half a screen: the sheet takes the whole width; the preview goes under the boxes */
@media (max-width: 900px) {
  .rs-ov { padding:16px 12px; } .rs-sheet { width:100%; max-height:calc(100vh - 32px); }
  .rs-two { grid-template-columns:minmax(0,1fr); } .rs-pv { position:static; } .rs-pvdoc { display:none; }
  .rs-tile { grid-template-columns:auto minmax(0,1fr); } .rs-tile .rs-go { grid-column:1 / -1; justify-self:start; }
}
/* phone: full screen, one column */
@media (max-width: 600px) {
  .rs-ov { padding:0; } .rs-sheet { height:100vh; height:100dvh; max-height:none; border-radius:0; padding:18px 16px 0; } .rs-body { margin:0 -16px; padding:4px 16px 8px; }
  .rs-steps li:not(.rs-ln):not(.on) { font-size:0; gap:0; } .rs-grid, .rs-row3 { grid-template-columns:minmax(0,1fr); }
  .rs-card { min-width:calc(50% - 5px); flex:1 1 calc(50% - 5px); }
  .rs-grp { grid-template-columns:minmax(0,1fr) auto; } .rs-grp .rs-sum { grid-column:1 / -1; grid-row:2; white-space:normal; }
  .rs-foot .btn { flex:1 1 auto; justify-content:center; } .rs-saved { display:none; }
}
/* Address check · ePACES first (owner, Oct 26): ask, then street, apt, city, zip and county side by side */
.rs-ep { display:flex; flex-direction:column; gap:8px; margin:0 0 12px; padding:12px 14px; border-radius:16px; font-size:13px; background:var(--b-soft, var(--th-soft)); color:var(--ink); }
.rs-ep.ok { background:#EEF7F1; } .rs-ep.warn { background:#FCF3E8; }
.rs-eph { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; } .rs-eph > span { display:inline-flex; align-items:center; gap:6px; }
.rs-ep.ok .rs-eph > span { color:#1E6B3F; } .rs-ep.warn .rs-eph > span { color:#8A3A0B; font-weight:600; }
.rs-epf { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.rs-ept { width:100%; border-collapse:collapse; font-size:12.5px; }
.rs-ept th, .rs-ept td { text-align:left; padding:5px 8px 5px 0; vertical-align:top; border-top:1px solid var(--line); overflow-wrap:anywhere; }
.rs-ept thead th { border-top:0; font-size:11px; color:var(--muted); font-weight:600; }
.rs-ept tbody th { font-weight:600; color:var(--ink2); white-space:nowrap; width:1%; }
.rs-ept tr.ok td:last-child { color:#1E6B3F; } .rs-ept tr.wa td { color:var(--th-accent3); } .rs-ept tr.wa td:last-child { white-space:nowrap; }
.rs-epm { color:var(--ink2); }
html.dark .rs-ep.ok { background:#15301F; } html.dark .rs-ep.warn { background:#352A12; }
html.dark .rs-ep.ok .rs-eph > span, html.dark .rs-ept tr.ok td:last-child { color:#6FCF97; } html.dark .rs-ep.warn .rs-eph > span, html.dark .rs-ept tr.wa td { color:#F2C14E; }

/* The case window's History (owner, Oct 26; design f3-history): "Where this case stands", the status trail, the "Check this
   case" warning, the filter chips and search, the notes by day (a status change is a thin line). Light and dark, desk, half
   a screen and phone. */
.hx-head { display:flex; flex-direction:column; gap:12px; margin:14px 0 4px; }
.hx-sum { padding:14px 16px; border-radius:20px; background:#EEF7F1; color:var(--th-ink); }
.hx-sum.bad { background:#FDEDEA; }
.hx-sum p { margin:6px 0 0; font-size:15px; line-height:22px; } .hx-sum p b { color:#1E6B3F; font-weight:600; } .hx-sum.bad p b { color:#B42318; }
.hx-lbl { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#1E6B3F; }
.hx-lbl.hx-tl { color:var(--muted); margin-bottom:-4px; }
.hx-trail { display:flex; flex-wrap:wrap; align-items:center; gap:6px 4px; }
.hx-chip { display:inline-flex; align-items:baseline; gap:6px; padding:6px 10px; border-radius:99px; background:var(--b-soft, var(--th-soft)); font-size:13px; color:var(--ink); }
.hx-chip span { font-size:12px; color:var(--muted); }
.hx-chip.warn { background:#FCF3DC; } .hx-chip.warn b { color:#8A5A00; }
.hx-chip.bad { background:#FDEDEA; } .hx-chip.bad b { color:#B42318; }
.hx-chip.now { background:var(--th-ink); } .hx-chip.now b { color:#fff; } .hx-chip.now span { color:var(--th-line2); }
.hx-arr { color:var(--muted); font-size:12px; margin:0 2px; }
.hx-check { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:16px; background:var(--th-tint); color:var(--th-accent3); font-size:14px; line-height:20px; }
.hx-check svg { flex:none; margin-top:2px; } .hx-check b { font-weight:700; } .hx-fix { color:var(--th-accent3); font-weight:700; text-decoration:underline; padding:0; }
.stepset.flash { box-shadow:0 0 0 3px rgba(var(--th-accent-rgb), .45); border-radius:14px; transition:box-shadow .3s; }
html.dark .hx-sum { background:#15301F; color:var(--th-dtext); } html.dark .hx-sum p b { color:#6FCF97; } html.dark .hx-lbl { color:#6FCF97; }
html.dark .hx-sum.bad { background:#3A1D19; } html.dark .hx-sum.bad p b { color:#FF8A7A; }
html.dark .hx-chip.warn { background:#352A12; } html.dark .hx-chip.warn b { color:#F2C14E; }
html.dark .hx-chip.bad { background:#3A1D19; } html.dark .hx-chip.bad b { color:#FF8A7A; }
html.dark .hx-chip.now { background:var(--th-dtext); } html.dark .hx-chip.now b { color:var(--th-dpage); } html.dark .hx-chip.now span { color:var(--th-dsoft); }
html.dark .hx-check { background:#352A12; color:#F2C14E; } html.dark .hx-fix { color:#F2C14E; }

.hx-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:4px 0 10px; }
.hx-filters { display:flex; gap:6px; flex-wrap:wrap; }
.hx-f { display:inline-flex; align-items:center; gap:6px; border:0; border-radius:99px; padding:7px 12px; background:var(--b-soft, var(--th-soft)); color:var(--ink); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.hx-f span { color:var(--muted); font-weight:500; }
.hx-f[aria-pressed=true] { background:var(--th-ink); color:#fff; } .hx-f[aria-pressed=true] span { color:var(--th-line2); }
html.dark .hx-f[aria-pressed=true] { background:var(--th-dtext); color:var(--th-dpage); } html.dark .hx-f[aria-pressed=true] span { color:var(--th-dsoft); }
.hx-search { margin-left:auto; display:flex; align-items:center; gap:6px; padding:0 12px; border-radius:99px; background:var(--b-soft, var(--th-soft)); color:var(--muted); min-width:180px; }
.hx-search input { border:0 !important; background:transparent !important; box-shadow:none !important; padding:8px 0 !important; font:inherit; font-size:13px; color:var(--ink); width:100%; outline:none; }
.hx-day { display:flex; align-items:center; gap:10px; margin:14px 0 6px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.hx-day::after { content:''; flex:1; height:1px; background:var(--line); }
.hx-st { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:6px 0 6px 6px; font-size:13px; color:var(--ink2); }
.hx-sti { color:var(--muted); display:inline-flex; }
.hx-pill { padding:2px 9px; border-radius:99px; background:var(--b-soft, var(--th-soft)); color:var(--ink); font-weight:600; font-size:12px; }
.hx-pill.to { background:#E7F4EC; color:#1E6B3F; } html.dark .hx-pill.to { background:#15301F; color:#6FCF97; }
.hx-pill.warn { background:#FCF3DC !important; color:#8A5A00 !important; } .hx-pill.bad { background:#FDEDEA !important; color:#B42318 !important; }
html.dark .hx-pill.warn { background:#352A12 !important; color:#F2C14E !important; } html.dark .hx-pill.bad { background:#3A1D19 !important; color:#FF8A7A !important; }
html.bento .hist.dn-note.hx-n, .hist.dn-note.hx-n { display:flex !important; flex-direction:row !important; gap:12px; align-items:flex-start; }
.hx-n .dn-note-b { flex:1; min-width:0; }
.hx-ic { width:32px !important; height:32px !important; min-width:32px; border-radius:50% !important; flex:none !important; display:flex; align-items:center; justify-content:center; background:var(--b-soft, var(--th-soft)); color:var(--muted); }
.hx-ic.call { background:#E7F4EC; color:#1E6B3F; } .hx-ic.email { background:#EEEAF8; color:#5B4BA8; }
html.dark .hx-ic.call { background:#15301F; color:#6FCF97; } html.dark .hx-ic.email { background:#272238; color:#B9ADF0; }
.hx-tag { display:inline-block; padding:2px 8px; border-radius:99px; font-size:12px; font-weight:600; background:var(--b-soft, var(--th-soft)); color:var(--ink2); }
.hx-tag.good { background:#E7F4EC; color:#1E6B3F; } .hx-tag.bad { background:#FDEDEA; color:#B42318; } .hx-tag.info { background:#EAF2FB; color:#1D5FA8; }
html.dark .hx-tag.good { background:#15301F; color:#6FCF97; } html.dark .hx-tag.bad { background:#3A1D19; color:#FF8A7A; } html.dark .hx-tag.info { background:#172638; color:#7FB5F0; }
.hx-hint { font-size:12px; color:var(--muted); }
.hx-tel { text-decoration:underline; }
@media (max-width: 600px) {
  .hx-search { margin-left:0; width:100%; } .hx-sum p { font-size:14px; }
}

/* Team v2 (new map, Oct 26; design/new-map f5-team, f5-cover, f5-team-half): Today · People · Settings and the Cover sheet.
   The current bento look: white tiles on the warm page, 24-32px radii, soft panels, black pill for the chosen tab. */
.tv-page { min-width:0; }
.tv-eyebrow { font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); margin:2px 0 6px; }
.tv-h1 { margin:0 0 18px; font-size:40px; line-height:46px; font-weight:600; letter-spacing:-.8px; padding-bottom:18px; border-bottom:1px solid rgba(var(--th-ink-rgb), .08); }
.tv-tabs { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin:0 0 18px; }
.tv-tabs button { border:0; background:var(--b-soft, var(--th-soft)); color:var(--ink); font:inherit; font-size:14px; font-weight:600; padding:8px 14px; border-radius:99px; cursor:pointer; }
.tv-tabs button[aria-selected=true] { background:var(--th-ink); color:#fff; }
.tv-hint { margin-left:auto; font-size:14px; color:var(--ink); opacity:.8; }

.tv-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:16px; align-items:start; }
.tv-cards { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.tv-side { display:flex; flex-direction:column; gap:16px; min-width:0; }
.tile.tv-card, .tile.tv-box { background:var(--b-tile, #fff); border-radius:28px; padding:18px; box-sizing:border-box; min-width:0; }
.tv-card.is-off { background:var(--b-soft, var(--th-soft)); box-shadow:inset 0 0 0 1px rgba(var(--th-ink-rgb), .08); }
.tv-top { display:flex; align-items:center; gap:12px; }
.tv-face { border-radius:50%; object-fit:cover; flex:none; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; }
.tv-ini .av { width:100%; height:100%; font-size:15px; }
.tv-who { display:flex; flex-direction:column; gap:4px; min-width:0; } .tv-who b { font-size:17px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tv-st { align-self:flex-start; font-size:13px; font-weight:600; padding:3px 10px; border-radius:99px; background:#E6F0FF; color:#1D4ED8; }
.tv-st.off { background:var(--b-soft, var(--th-soft)); color:var(--ink); } .tv-st.none { background:transparent; color:var(--muted); padding-left:0; font-weight:500; }
.tv-nums { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; margin:14px 0 12px; }
.tv-n { background:var(--b-soft, var(--th-soft)); border-radius:16px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.tv-n b { font-size:20px; font-weight:600; line-height:26px; } .tv-n b small { font-size:13px; color:var(--muted); font-weight:500; }
.tv-n span { font-size:12px; color:var(--muted); }
.tv-n.ok b { color:#1E7A46; } .tv-n.warn b { color:#B7791F; } .tv-n.bad b { color:#C0392B; }
.tv-n .tv-rep { font-size:15px; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.tv-tags { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.tv-tag { font-size:13px; font-weight:600; padding:3px 10px; border-radius:99px; }
.tv-tag.blue { background:#E6F0FF; color:#1D4ED8; } .tv-tag.amber { background:#FDF1D8; color:#9A6B00; }
.tv-btns { display:flex; flex-wrap:wrap; gap:8px; }
.tv-btn { border:0; background:var(--b-soft, var(--th-soft)); color:var(--ink); font:inherit; font-size:14px; font-weight:600; padding:8px 14px; border-radius:99px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.tv-card.is-off .tv-btn { background:var(--b-tile, #fff); }
.tv-btn:disabled { opacity:.6; cursor:default; }

.tv-box h3 { margin:0 0 4px; font-size:20px; font-weight:600; letter-spacing:-.2px; display:flex; align-items:center; gap:8px; }
.tv-cnt { font-size:13px; background:var(--b-soft, var(--th-soft)); border-radius:99px; padding:2px 9px; font-weight:600; }
.tv-box .sub { font-size:13px; color:var(--muted); }
.tv-sug { margin-top:12px; background:var(--b-soft, var(--th-soft)); border-radius:20px; padding:14px; display:flex; align-items:center; gap:12px; }
.tv-sug b { font-weight:600; font-size:14px; } .tv-sug > div { flex:1; min-width:0; }
.tv-go, .tv-start { border:0; border-radius:99px; background:var(--th-ink); color:#fff; font:inherit; font-weight:700; padding:10px 18px; cursor:pointer; white-space:nowrap; }
.tv-nc { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid rgba(var(--th-ink-rgb), .07); } .tv-nc:last-child { border-bottom:0; }
.tv-nc > div { flex:1; min-width:0; } .tv-nc a { color:var(--ink); text-decoration:none; }
.tv-give { border:0; background:var(--b-soft, var(--th-soft)); border-radius:99px; padding:7px 10px; font:inherit; font-size:13px; font-weight:600; color:var(--ink); max-width:130px; }
.tv-th { padding:10px 0; border-top:1px solid rgba(var(--th-ink-rgb), .07); font-size:14px; } .tv-th b { font-weight:600; }
.tv-link { display:inline-block; margin-top:8px; font-size:14px; font-weight:600; color:var(--ink); }
.tv-more { margin-top:18px; } .tv-more > summary { cursor:pointer; font-weight:600; font-size:14px; padding:10px 0; color:var(--ink); }

/* the Cover sheet (rs-ov / rs-sheet from the referral sheet) */
.rs-sheet.tv-sheet { width:min(600px, 100%); padding:24px; gap:10px; }
.tv-sh-head { display:flex; align-items:flex-start; gap:12px; } .tv-sh-head > div { flex:1; min-width:0; }
.tv-sh-head h2 { margin:0; font-size:24px; line-height:30px; font-weight:600; letter-spacing:-.3px; }
.tv-x { border:0; width:36px; height:36px; border-radius:50%; background:var(--b-soft, var(--th-soft)); color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none; }
.tv-lbl { font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin:8px 0 0; }
.tv-row { display:flex; align-items:center; gap:12px; background:var(--b-soft, var(--th-soft)); border-radius:18px; padding:12px 14px; }
.tv-rw { flex:1; min-width:0; } .tv-rw b { font-weight:600; font-size:15px; }
.tv-step { display:flex; align-items:center; gap:10px; } .tv-step b { min-width:18px; text-align:center; }
.tv-step button { width:30px; height:30px; border-radius:50%; border:0; background:var(--b-tile, #fff); color:var(--ink); font-size:16px; cursor:pointer; }
.tv-sw { display:flex; align-items:center; gap:12px; background:var(--b-soft, var(--th-soft)); border-radius:18px; padding:12px 14px; cursor:pointer; position:relative; }
.tv-sw > div { flex:1; min-width:0; } .tv-sw b { font-weight:600; font-size:15px; }
.tv-sw input { position:absolute; opacity:0; width:1px; height:1px; }
.tv-tg { width:42px; height:26px; border-radius:99px; background:var(--th-line2); position:relative; flex:none; transition:background .15s; }
.tv-tg::after { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .15s; }
.tv-sw input:checked + .tv-tg { background:#1E6B3F; } .tv-sw input:checked + .tv-tg::after { left:19px; }
.tv-sw input:focus-visible + .tv-tg { outline:2px solid #1D4ED8; outline-offset:2px; }
.tv-note { display:flex; align-items:center; gap:10px; background:#E6F0FF; color:#1D4ED8; border-radius:16px; padding:12px 14px; font-size:14px; }
.tv-foot { display:flex; justify-content:flex-end; gap:10px; padding:6px 0 0; }
.tv-start { background:#1E6B3F; } .tv-start:disabled { opacity:.5; cursor:default; }

/* dark */
html.dark .tile.tv-card, html.dark .tile.tv-box { background:var(--b-tile, var(--th-dcard)); }
html.dark .tv-card.is-off { background:var(--th-dcard); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
html.dark .tv-tabs button[aria-selected=true] { background:var(--th-dtext); color:var(--th-dpage); }
html.dark .tv-h1 { border-bottom-color:rgba(255,255,255,.08); }
html.dark .tv-st, html.dark .tv-tag.blue, html.dark .tv-note { background:#1B2A44; color:#9CC2FF; }
html.dark .tv-tag.amber { background:#352A12; color:#F2C14E; }
html.dark .tv-n.ok b { color:#6FCF97; } html.dark .tv-n.warn b { color:#F2C14E; } html.dark .tv-n.bad b { color:#FF8A7A; }
html.dark .tv-go { background:var(--th-dtext); color:var(--th-dpage); } html.dark .tv-start { background:#2E8B57; color:#fff; }
html.dark .tv-nc, html.dark .tv-th { border-color:rgba(255,255,255,.08); }

/* half screen (960): the cards one across next to the side, then the side under them */
@media (max-width: 1100px) { .tv-cards { grid-template-columns:minmax(0,1fr); } }
@media (max-width: 900px) { .tv-grid { grid-template-columns:minmax(0,1fr); } .tv-cards { grid-template-columns:repeat(2, minmax(0,1fr)); } .tv-hint { display:none; } }
/* phone (390) */
@media (max-width: 600px) {
  .tv-h1 { font-size:32px; line-height:38px; padding-bottom:12px; margin-bottom:12px; }
  .tv-cards { grid-template-columns:minmax(0,1fr); }
  .tile.tv-card, .tile.tv-box { border-radius:24px; padding:16px; }
  .tv-sug { flex-wrap:wrap; }
  .rs-sheet.tv-sheet { padding:18px; border-radius:24px; }
  .tv-row { padding:10px 12px; } .tv-foot { flex-wrap:wrap; } .tv-start { flex:1; }
}

/* "Covering Priya" / "From Priya" on a case in My day (a cover or a move on the Team page) */
html .tag.t-cover, html.bento main:not(#_b) .tag.t-cover { background:#E6F0FF !important; color:#1D4ED8 !important; font-weight:700; }
html.dark .tag.t-cover, html.dark.bento main:not(#_b) .tag.t-cover { background:#1B2A44 !important; color:#9CC2FF !important; }

/* touch-ups after the first shots */
.tv-card.is-off .tv-btn { background:#fff; }
.tv-nc a b { color:var(--ink); }
html.dark .tv-tabs button[aria-selected=true] { background:var(--th-daccent); color:#fff; }
html.dark .tv-st.off { background:var(--th-dcard); color:var(--th-dtext); }
html.dark .tv-card.is-off .tv-btn { background:var(--th-dpage); }
html.dark .tv-nc a b { color:var(--th-dtext); }
/* the daily report settings inside Team › Settings: the page already says the day and "Team" */
#tvPane .gm-head .ov-eyebrow, #tvPane .gm-head .eyebrow { display:none; }
#tvPane .gm-head h1 { font-size:28px; line-height:34px; }
/* someone off today and not covered yet: Cover is the action needed (design check, Oct 26) */
.tv-btn.primary, .tv-card.is-off .tv-btn.primary { background:var(--th-ink); color:#fff; }
html.dark .tv-btn.primary, html.dark .tv-card.is-off .tv-btn.primary { background:var(--th-daccent); color:#fff; }
.tv-card.is-off .tv-btn:not(.primary) { background:var(--b-soft, var(--th-soft)); }
/* the daily report tile opens that person's report (managers) */
.tv-repb { border:0; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.tv-repb:hover { background:var(--th-soft2); } .tv-repb:focus-visible { outline:2px solid #1D4ED8; outline-offset:2px; }
html.dark .tv-repb:hover { background:var(--th-dsoft); }

/* "Today, everyone" (daily report v4, owner Oct 27) */
.tv-every { margin-bottom: 16px; padding: 18px 20px; border-radius: 22px; background: var(--card, #fff); }
.tv-ev-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tv-ev-wrap { overflow-x: auto; border-radius: 14px; background: var(--card, #fff); }
.tv-ev { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 760px; }
.tv-ev th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--th-mute); text-align: right; padding: 10px; border-bottom: 1px solid var(--th-soft2); white-space: nowrap; }
.tv-ev td { padding: 10px; text-align: right; border-bottom: 1px solid var(--th-soft2); font-size: 14px; }
.tv-ev th:first-child, .tv-ev td:first-child { text-align: left; white-space: nowrap; }
.tv-ev td.red { color: #B42318; font-weight: 800; background: #FDF1EF; }
.tv-ev td.green { color: #1E7F47; font-weight: 700; }
.tv-ev tr.tot td { font-weight: 800; background: var(--th-page); }
.tv-ev-name { font-weight: 600; }
.tv-ev-legend { margin-top: 10px; }
.tv-ev-red { color: #B42318; font-weight: 800; }
html.dark .tv-ev-red { color:#FF8A80; }   /* 4.5:1 on the dark tile (a11y pass, Oct 27: #B42318 was 2.6:1) */
html.dark .tv-ev th { color: var(--th-dmute); border-color: var(--th-dsoft); } html.dark .tv-ev td { border-color: var(--th-dcard); }
html.dark .tv-ev td.red { background: #3B1F1B; color: #F4A79B; } html.dark .tv-ev td.green { color: #8FD3A8; } html.dark .tv-ev tr.tot td { background: var(--th-dcard); }
/* Team › Settings › Office TV (Oct 29): the TV link, shown once */
.otv-set { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.otv-set .otv-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.otv-set .otv-on { display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border-radius:999px; background:#E7F5EC; color:#1E6B3A; font-size:13px; font-weight:700; }
.otv-set .otv-link { display:flex; gap:8px; } .otv-set .otv-link input { flex:1; min-width:0; min-height:44px; padding:0 12px; border:1px solid var(--line, var(--th-line)); border-radius:12px; font:inherit; font-size:13px; background:var(--b-soft, var(--th-soft)); color:inherit; }
.otv-set .btn { min-height:44px; }
html.dark .otv-set .otv-on { background:#1E3326; color:#7FD3A0; }
/* several TVs (Oct 29 evening): one row each */
@font-face { font-family:'Caveat'; src:url('/fonts/Caveat.woff2') format('woff2'); font-weight:600; font-display:swap; }   /* the preview's handwriting, as on the TV */
.otv-tile > .otv-links { margin-top:0; padding-top:14px; border-top:1px solid var(--line, #E9E2D8); }
.otv-mmset { display:flex; flex-direction:column; gap:10px; }
.otv-mmset .otv-mmgrid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px; align-items:start; }
@media (max-width: 760px) { .otv-mmset .otv-mmgrid { grid-template-columns:1fr; } }
.otv-mmset .otv-mmform { display:flex; flex-direction:column; gap:8px; min-width:0; }
.otv-mmset .otv-mmform label.sub { min-width:110px; }
.otv-mmset .otv-mmcount { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.otv-mmset .otv-name { flex:1; min-width:160px; min-height:44px; padding:0 12px; border:1px solid var(--line, #E9E2D8); border-radius:12px; font:inherit; font-size:13px; background:var(--b-soft, #F7F3EE); color:inherit; }
.otv-pv { border-radius:18px; padding:16px; background:linear-gradient(180deg, #FFFFFF, #EEF4FC); color:#0E2A4F; text-align:center; border:1px solid #DCE6F2; }
.otv-pv-eb { font-size:11px; font-weight:700; letter-spacing:.18em; color:#2E7CF6; }
.otv-pv-card { position:relative; margin-top:22px; padding:22px 18px 12px; border-radius:16px; background:rgba(255,255,255,.8); box-shadow:0 8px 20px rgba(14,42,79,.08); }
.otv-pv-to { position:absolute; left:50%; top:-13px; transform:translateX(-50%); white-space:nowrap; padding:4px 12px; border-radius:999px; background:linear-gradient(90deg, #2E7CF6, #1F5FC7); color:#fff; font-size:11px; font-weight:800; letter-spacing:.06em; }
.otv-pv-q { font-family:Caveat, 'Segoe Script', cursive; font-weight:600; font-size:26px; line-height:1.15; overflow-wrap:anywhere; }
.otv-pv-hl { color:#1F5FC7; background:linear-gradient(180deg, transparent 62%, rgba(95,160,255,.32) 62%, rgba(95,160,255,.32) 92%, transparent 92%); padding:0 3px; }
.otv-pv-sig { margin-top:6px; font-family:Caveat, cursive; font-size:20px; color:#1F5FC7; }
.otv-mmset .otv-mmtext { width:100%; box-sizing:border-box; min-height:64px; padding:10px 12px; border:1px solid var(--line, var(--th-line)); border-radius:12px; font:inherit; background:var(--b-soft, var(--th-soft)); color:inherit; resize:vertical; }
.otv-mmset .otv-mmwarn { color:#8A4B00; font-weight:700; } html.dark .otv-mmset .otv-mmwarn { color:#F5C38A; }
.otv-mmset .otv-mmnow { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line, #E9E2D8); border-radius:14px; overflow-wrap:anywhere; }
.otv-set .otv-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.otv-set .otv-list > li { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--line, #E9E2D8); border-radius:14px; }
.otv-set .otv-li { flex:1; min-width:200px; display:flex; flex-direction:column; } .otv-set .otv-li b { font-size:14px; }
.otv-set .otv-list .otv-link { flex-basis:100%; } .otv-set .otv-once { flex-basis:100%; }
.otv-set .otv-name { flex:1; min-width:180px; min-height:44px; padding:0 12px; border:1px solid var(--line, #E9E2D8); border-radius:12px; font:inherit; font-size:13px; background:var(--b-soft, #F7F3EE); color:inherit; }
.otv-set .otv-kind { display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; vertical-align:middle; }
.otv-set .otv-k-team { background:#E8F0FD; color:#1F5FC7; } .otv-set .otv-k-mgr { background:#FFF1E2; color:#8A4B00; }
.otv-set .otv-sel { min-height:44px; padding:0 10px; border:1px solid var(--line, #E9E2D8); border-radius:12px; font:inherit; font-size:13px; background:var(--b-soft, #F7F3EE); color:inherit; }
html.dark .otv-set .otv-k-team { background:#1C2A40; color:#A9CBFF; } html.dark .otv-set .otv-k-mgr { background:#3A2A18; color:#F2C48A; }
.otv-set .otv-swl { flex-basis:100%; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; min-height:32px; }
.otv-set .otv-swl input { width:18px; height:18px; }

/* Cover / Move (owner, Nov 2): a typeable count, By person / By status, "N of 30 assigned", the preview before confirming */
.tv-num { width:56px; min-height:36px; padding:4px 6px; border:1px solid var(--th-line2); border-radius:10px; font:inherit; font-weight:700; text-align:center; background:var(--b-tile, #fff); color:var(--ink); -moz-appearance:textfield; }
.tv-num::-webkit-outer-spin-button, .tv-num::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.tv-num:focus { outline:2px solid var(--th-focus); outline-offset:1px; }
.tv-modes { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:4px; }
.tv-modes [role=tab] { min-height:40px; padding:6px 14px; border-radius:999px; border:1px solid var(--th-line2); background:var(--b-tile, #fff); color:var(--ink); font:inherit; font-weight:600; cursor:pointer; }
.tv-modes [role=tab][aria-selected="true"] { background:var(--th-accent2); border-color:var(--th-accent2); color:#fff; }
.tv-modes .tv-even { margin-left:auto; min-height:40px; }
.tv-grp { background:var(--b-soft, var(--th-soft)); border-radius:18px; padding:10px 14px; display:flex; flex-direction:column; gap:8px; }
.tv-gh { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.tv-gleft { margin-left:auto; font-weight:700; font-size:13px; color:var(--th-accent2); } .tv-gleft.bad { color:#A61B1B; }
.tv-srow { display:grid; grid-template-columns:minmax(0, 1fr) 60px 36px; gap:8px; align-items:center; }
.tv-del { width:36px; height:36px; border-radius:50%; border:0; background:transparent; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.tv-del:hover { background:var(--b-tile, #fff); color:#A61B1B; }
.tv-srow select { min-height:40px; border:1px solid var(--th-line2); border-radius:10px; padding:4px 8px; font:inherit; background:var(--b-tile, #fff); color:var(--ink); min-width:0; }
.tv-add { align-self:flex-start; min-height:36px; }
.tv-total { padding:10px 14px; border-radius:14px; background:var(--th-tint); color:var(--th-accent3); font-size:14px; }
.tv-total.full { background:#E3F6EA; color:#17663A; } .tv-total.bad { background:#FDE4E4; color:#A61B1B; }
.tv-prev ul { margin:4px 0 0; padding-left:18px; line-height:1.7; font-size:14px; }
html.dark .tv-num, html.dark .tv-srow select, html.dark .tv-modes [role=tab] { background:var(--th-dsoft); border-color:var(--th-dline); color:var(--th-dtext); }
html.dark .tv-modes [role=tab][aria-selected="true"] { background:var(--th-daccent); border-color:var(--th-daccent); color:var(--th-dpage2); }
html.dark .tv-total { background:var(--th-daccent2); color:#CFE1FF; } html.dark .tv-total.full { background:#123A27; color:#9BE3B6; } html.dark .tv-total.bad { background:#401818; color:#FFB1B1; }
html.dark .tv-gleft { color:var(--th-daccent); }
@media (max-width: 600px) {
  .tv-modes .tv-even { margin-left:0; }
}

/* v6 (owner approved, Oct 26; design/v6 v6-overview, v6-overview-half, v6-team; design/effects-v2): the Overview and Team effects.
   The current bento colours. Everything that moves stops under prefers-reduced-motion. */

/* the eyebrow (Motion.liveDot puts the dot in) and the hero (.m-glow) */
.v6-eye { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* the morning summary: a dark tile, three columns */
.v6-morning { padding:20px 22px; margin-bottom:16px; border-radius:var(--b-r-tile, 28px); }
.v6-mh { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.v6-mh > div:first-child { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.v6-hello { font-size:18px; font-weight:600; } .v6-morning .sub { color:rgba(255,255,255,.62); font-size:13px; }
.v6-mtools { display:flex; align-items:center; gap:12px; }
.v6-mlbl { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#F2C14E; }
.v6-mhide { border:0; border-radius:99px; padding:8px 14px; font:inherit; font-size:13px; font-weight:700; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; }
.v6-mhide:hover { background:rgba(255,255,255,.2); } .v6-mhide:focus-visible { outline:2px solid var(--th-accent); }
.v6-mcols { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.v6-mc { background:rgba(255,255,255,.06); border-radius:16px; padding:14px 16px; min-width:0; }
.v6-mk { display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:6px; }
.v6-mc p { margin:0; font-size:14px; line-height:1.45; color:#fff; overflow-wrap:anywhere; }

/* the sparkline under Follow-ups done (Motion.sparkline draws it) */
.v6-spark { display:block; width:100%; height:36px; color:var(--v4-ok, #1E6B3F); }
.v6-spark .m-line { stroke:currentColor; } .v6-spark circle { fill:currentColor; }
.v6-spot .v4-nmi { transition:transform .15s ease, background .15s; }
.v6-spot .v4-nmi:not([disabled]):hover { transform:translateX(3px); }

/* the hover peek (web/js/peek.js) */
.pk-card { position:fixed; z-index:180; box-sizing:border-box; background:var(--b-tile, #fff); color:var(--ink); border-radius:22px; padding:16px; box-shadow:0 18px 44px rgba(var(--th-ink-rgb), .22); display:flex; flex-direction:column; gap:10px; animation:pk-in .14s ease-out; }
@keyframes pk-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.pk-top { display:flex; justify-content:space-between; align-items:center; gap:10px; } .pk-top b { font-size:16px; font-weight:600; }
.pk-sub { font-size:12.5px; color:var(--muted); margin-top:-6px; }
.pk-tag { font-size:12px; font-weight:700; padding:3px 9px; border-radius:99px; white-space:nowrap; } .pk-tag.late { background:#FDEDEA; color:#B42318; } .pk-tag.due { background:#FDF1D8; color:#8A5A00; }
.pk-trail { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pk-pill { font-size:12px; font-weight:600; padding:4px 10px; border-radius:99px; background:var(--b-soft, var(--th-soft)); }
.pk-pill.warn { background:#FDF1D8; color:#8A5A00; } .pk-pill.bad { background:#FDEDEA; color:#B42318; } .pk-pill.now { background:var(--th-ink); color:#fff; }
.pk-arr { color:var(--muted); font-size:12px; }
.pk-note { background:var(--b-soft, var(--th-soft)); border-radius:14px; padding:10px 12px; font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
.pk-btns { display:flex; gap:8px; }
.pk-open, .pk-call { border:0; border-radius:99px; padding:8px 14px; font:inherit; font-size:13px; font-weight:700; display:inline-flex; align-items:center; gap:6px; cursor:pointer; text-decoration:none; }
.pk-open { background:var(--th-ink); color:#fff; } .pk-call { background:var(--b-soft, var(--th-soft)); color:var(--ink); }
html.dark .pk-card { background:var(--th-dcard); box-shadow:0 18px 44px rgba(0,0,0,.55); }
html.dark .pk-tag.late, html.dark .pk-pill.bad { background:#3A1D19; color:#FF8A7A; } html.dark .pk-tag.due, html.dark .pk-pill.warn { background:#352A12; color:#F2C14E; }
html.dark .pk-pill.now { background:var(--th-dtext); color:var(--th-dpage); } html.dark .pk-open { background:var(--th-daccent); }
.v4-row .v4-c b, .v4-cr b { text-decoration:underline dotted rgba(var(--th-ink-rgb), .35); text-underline-offset:3px; }
html.dark .v4-row .v4-c b, html.dark .v4-cr b { text-decoration-color:rgba(255,255,255,.35); }

/* Team › Today: who is off and covered, the 8 AM switch */
.tv-out { display:flex; align-items:center; gap:10px; border-radius:16px; padding:12px 14px; margin:0 0 14px; font-size:14px; font-weight:600; }
.tv-out.ok { background:#E7F4EC; color:#1E6B3F; } .tv-out.warn { background:#FDF1D8; color:#8A5A00; }
html.dark .tv-out.ok { background:#15301F; color:#6FCF97; } html.dark .tv-out.warn { background:#352A12; color:#F2C14E; }
.tv-m8 { margin:0 0 16px; }

/* half screen (960, v6-overview-half): the numbers two a row, the morning summary one column, Do this first without "what is
   blocking it", Needs a manager full width (overview-v4.css already stacks the rows) */
@media (max-width: 1100px) { .v6-mcols { grid-template-columns:minmax(0, 1fr); } }
@media (min-width: 641px) and (max-width: 1100px) {
  .v4-th, .v4-row { grid-template-columns:minmax(0, 1.4fr) minmax(0, .8fr) auto 18px; }
  .v4-th span:nth-child(2), .v4-row .v4-why { display:none; }
  .v4-th span:last-child { grid-column:3 / span 2; }
}
@media (max-width: 640px) {
  .v6-morning { padding:16px; } .v6-mh { margin-bottom:10px; } .v6-day { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .pk-card { animation:none !important; }
  .v6-spot .v4-nmi { transition:none !important; } .v6-spot .v4-nmi:not([disabled]):hover { transform:none !important; }
}
.v4-row .v4-c b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v6-spark .m-line { vector-effect:non-scaling-stroke; stroke-width:2.4; } .v6-spark circle { r:3.4px; }

/* "This month's wins" on Team › People (idea 6, design/ideas/idea-06): an orange tile with the month's admitted, badge cards,
   a dark shout-outs tile. The current bento look; it reads well in a screenshot at 1440. */
.tw-wall { margin:0 0 22px; }
.tw-head h2 { margin:0; font-size:28px; line-height:34px; font-weight:600; letter-spacing:-.4px; } .tw-head .sub { font-size:14px; }
.tw-head { margin:0 0 14px; }
.tw-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 3fr); grid-template-rows:auto auto; gap:16px; }
.tw-big { grid-row:1 / span 2; display:flex; flex-direction:column; gap:6px; padding:22px; border-radius:28px; color:#fff; min-height:260px; box-sizing:border-box;
  background:var(--th-hero); }
.tw-eb { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.9; }
.tw-n { font-size:64px; line-height:1; font-weight:600; letter-spacing:-.03em; margin-top:8px; }
.tw-l { font-size:15px; opacity:.95; } .tw-foot { margin-top:auto; font-size:13px; font-weight:600; }
.tw-cards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; align-content:start; }
.tw-card { display:flex; gap:12px; align-items:flex-start; padding:18px; border-radius:24px; background:var(--b-tile, #fff); min-width:0; }
.tw-cw { display:flex; flex-direction:column; gap:4px; min-width:0; } .tw-cw b { font-size:16px; font-weight:600; } .tw-cw .sub { font-size:12.5px; }
.tw-badge { align-self:flex-start; margin-top:6px; font-size:13px; font-weight:700; padding:5px 11px; border-radius:99px; background:#FDF1D8; color:#8A5A00; white-space:nowrap; }
.tw-shouts { grid-column:2; display:flex; flex-direction:column; gap:10px; padding:20px; border-radius:28px; background:var(--th-ink); color:#fff; }
.tw-shouts .tw-eb { color:rgba(255,255,255,.75); }
.tw-sh { background:rgba(255,255,255,.07); border-radius:16px; padding:12px 14px; display:flex; flex-direction:column; gap:3px; font-size:14px; overflow-wrap:anywhere; }
.tw-sh b { font-weight:600; } .tw-sh.none { color:rgba(255,255,255,.75); }
.tw-early { grid-row:1 / span 2; }
.tw-note { margin-top:10px; font-size:12.5px; }
html.dark .tw-card { background:var(--b-tile, var(--th-dcard)); } html.dark .tw-badge { background:#352A12; color:#F2C14E; }
html.dark .tw-shouts { background:var(--th-dpage2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
html.dark .tw-big { background:var(--th-hero); }
@media (max-width: 1100px) { .tw-grid { grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); } .tw-cards { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .tw-grid { grid-template-columns:minmax(0, 1fr); } .tw-big { grid-row:auto; min-height:0; } .tw-shouts, .tw-early { grid-column:auto; grid-row:auto; }
  .tw-cards { grid-template-columns:minmax(0, 1fr); } .tw-n { font-size:52px; }
}
.tw-sh .tw-why { font-size:12.5px; font-weight:600; color:var(--th-peach); }   /* what it was for (Covered for me …), Oct 27 */
.tw-sh .tw-ago { font-style:normal; font-size:12px; color:rgba(255,255,255,.72); }   /* "2h ago", Oct 27 */

/* "Your cases today" (owner, Oct 23; v2 the same evening; web/js/moves.js): one short tile per kind (all the same height, 0 muted),
   then "Moved forward, by step" and "Off the list" side by side (stacked on half screen and phone), and for managers a compact
   "By coordinator" table. Light and dark (html.bento.dark), desk, half screen (720–1100) and phone. */
html.bento main .tile.bmt { display:flex; flex-direction:column; gap:14px; padding:22px; min-width:0; margin-bottom:16px; }
html.bento .bmt-head { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; }
html.bento .bmt-ht { flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:2px; }
html.bento .bmt-head .sub { font-size:12px; color:var(--muted); }
html.bento .bmt-seg { display:inline-flex; gap:2px; padding:3px; border-radius:99px; background:var(--b-soft); }
html.bento .bmt-seg button { all:unset; cursor:pointer; height:28px; padding:0 12px; border-radius:99px; font-size:12.5px; font-weight:600; color:var(--ink2); display:inline-flex; align-items:center; }
html.bento .bmt-seg button[aria-pressed=true] { background:var(--b-pill-on); color:var(--b-pill-on-ink); }
html.bento .bmt-ok { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:16px; background:#E7F4EC; color:#1E6B3F; font-size:13.5px; }
html.bento .bmt-ok b { font-weight:600; }
html.bento .bmt-okic { width:28px; height:28px; border-radius:99px; background:#1E6B3F; color:#fff; display:grid; place-items:center; flex:none; }

/* row 1: the counts */
html.bento .bmt-counts { display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:8px; }
/* v3 (Oct 26): one box per status reached, only the ones that happened */
html.bento .bmt-counts.bmt-st { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
html.bento .bmt-st .bmt-l { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
html.bento .bmt-r3 { font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html.bento .bmt-ok .linkbtn { margin-left:auto; }
html.bento .bmt-c { all:unset; box-sizing:border-box; cursor:pointer; --k:var(--th-text); --kb:var(--b-soft); display:flex; flex-direction:column; justify-content:flex-end; gap:2px;
  height:112px; padding:12px; border-radius:18px; background:var(--kb); color:var(--k); min-width:0; transition:box-shadow .15s ease; }
html.bento .bmt-c.bmt-g { --k:#1E6B3F; --kb:#E7F4EC; } html.bento .bmt-c.bmt-a { --k:#8A5A00; --kb:#FCF3DC; } html.bento .bmt-c.bmt-r { --k:#B42318; --kb:#FDEDEA; }
html.bento .bmt-c.zero { --k:var(--muted); --kb:var(--b-soft); }
html.bento .bmt-c.zero .bmt-big { opacity:.5; }
html.bento .bmt-c:hover { box-shadow:inset 0 0 0 1px var(--k); }
html.bento .bmt-c.on { box-shadow:inset 0 0 0 2px var(--k); }
html.bento .bmt-c:focus-visible, html.bento .bmt-row:focus-visible, html.bento .bmt-chip:focus-visible, html.bento .bmt-seg button:focus-visible { outline:2px solid var(--th-accent); outline-offset:2px; }
html.bento .bmt-big { font-size:32px; line-height:36px; font-weight:600; letter-spacing:-.8px; font-variant-numeric:tabular-nums; }
html.bento .bmt-l { font-size:12.5px; line-height:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html.bento .bmt-w { font-size:11.5px; line-height:15px; opacity:.85; white-space:nowrap; } html.bento .bmt-w b { font-weight:700; }

/* row 2: two panels */
html.bento .bmt-row2 { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:12px; }
html.bento .bmt-p { display:flex; flex-direction:column; gap:10px; padding:14px 16px; border-radius:18px; background:var(--b-soft); min-width:0; }
html.bento .bmt-p.on { box-shadow:inset 0 0 0 2px var(--line); }
html.bento .bmt-ph { display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:13.5px; color:var(--ink); }
html.bento .bmt-ph b { font-weight:700; }
html.bento .bmt-bars { display:flex; flex-direction:column; gap:7px; }
html.bento .bmt-bar { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr) 28px; align-items:center; gap:10px; font-size:12.5px; color:var(--ink); }
html.bento .bmt-bn { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html.bento .bmt-bt { height:8px; border-radius:99px; background:var(--b-tile); overflow:hidden; } html.bento .bmt-bt i { display:block; height:100%; border-radius:99px; background:#2F8F5B; }
html.bento .bmt-bar b { text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
html.bento .bmt-chips { display:flex; flex-wrap:wrap; gap:6px; }
html.bento .bmt-chip { all:unset; box-sizing:border-box; cursor:pointer; height:28px; padding:0 11px; border-radius:99px; background:var(--b-tile); color:var(--ink2); font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:5px; }
html.bento .bmt-chip b { font-weight:800; }
html.bento .bmt-chip.on { background:var(--b-pill-on); color:var(--b-pill-on-ink); }
html.bento .bmt-rows { display:flex; flex-direction:column; max-height:420px; overflow-y:auto; margin:0 -6px; }
html.bento .bmt-row { all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-top:1px solid var(--line); }
html.bento .bmt-row:first-child { border-top:0; }
html.bento .bmt-row:hover { background:var(--b-tile); border-radius:12px; border-top-color:transparent; }
html.bento .bmt-r1 { display:flex; gap:6px; align-items:baseline; font-size:13px; color:var(--ink); min-width:0; } html.bento .bmt-r1 b { font-weight:700; }
html.bento .bmt-when { margin-left:auto; font-size:11.5px; color:var(--muted); white-space:nowrap; padding-left:8px; }
html.bento .bmt-r2 { font-size:12px; color:var(--ink2); } html.bento .bmt-r2 b { font-weight:700; color:var(--ink); }
html.bento .bmt-none { padding:4px 0; }

/* managers: by coordinator */
html.bento .bmt-team summary { cursor:pointer; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:6px; }
html.bento .bmt-tw { overflow-x:auto; }
html.bento .bmt-t { width:100%; border-collapse:collapse; font-size:13px; }
html.bento .bmt-t th { text-align:left; font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); font-weight:700; padding:6px 8px; cursor:pointer; white-space:nowrap; user-select:none; }
html.bento .bmt-t th[aria-sort=ascending]::after { content:" ▲"; } html.bento .bmt-t th[aria-sort=descending]::after { content:" ▼"; }
html.bento .bmt-t td { padding:7px 8px; border-top:1px solid var(--line); color:var(--ink); }
html.bento .bmt-t .num { text-align:right; font-variant-numeric:tabular-nums; } html.bento .bmt-t td.zero { color:var(--muted); opacity:.6; }
html.bento .bmt-t tbody tr { cursor:pointer; } html.bento .bmt-t tbody tr:hover td { background:var(--b-soft); }

/* half screen: 4 counts a row, the panels stacked */
@media (max-width: 1100px) { html.bento .bmt-counts { grid-template-columns:repeat(4, minmax(0, 1fr)); } html.bento .bmt-row2 { grid-template-columns:minmax(0, 1fr); } }
/* phone: 2 counts a row, smaller */
@media (max-width: 600px) {
  html.bento main .tile.bmt { padding:16px; gap:12px; }
  html.bento .bmt-counts { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; }
  html.bento .bmt-c { height:92px; padding:10px; border-radius:16px; } html.bento .bmt-big { font-size:26px; line-height:30px; }
  html.bento .bmt-r1 { flex-wrap:wrap; } html.bento .bmt-when { margin-left:0; padding-left:0; width:100%; }
}

/* the portal's dark mode */
html.bento.dark .bmt-c.bmt-g { --k:#6FCF97; --kb:#15301F; } html.bento.dark .bmt-c.bmt-a { --k:#F2C14E; --kb:#352A12; } html.bento.dark .bmt-c.bmt-r { --k:#FF8A7A; --kb:#3A1D19; }
html.bento.dark .bmt-c.bmt-n, html.bento.dark .bmt-c.zero { --k:var(--b-dark-sub); --kb:var(--b-soft); }
html.bento.dark .bmt-ok { background:#15301F; color:#6FCF97; } html.bento.dark .bmt-okic { background:#6FCF97; color:var(--th-dpage2); }
html.bento.dark .bmt-bt i { background:#6FCF97; }
html.bento main[data-mdtab]:not([data-mdtab=today]) .bmt { display:none; }
/* v3 boxes grow with a two-line status name ("MLTC RN Assessment" on a phone) */
html.bento .bmt-st .bmt-c { height:auto; min-height:112px; }
@media (max-width: 600px) { html.bento .bmt-st .bmt-c { min-height:92px; } html.bento .bmt-p .bmt-ph .sub { display:none; } }

/* Overview v4, the coordinator's "Your week" (owner, Oct 26; design/overview f4-ov-coord). web/js/yourweek.js. Desk, half screen
   (960: two numbers a row, then one tile a row) and phone; nothing scrolls sideways. Light and dark. */
.yw { display:flex; flex-direction:column; gap:16px; min-width:0; }
.yw .tile { background:var(--b-tile, #fff); border-radius:var(--b-r-tile, 28px); box-shadow:var(--b-shadow, none); padding:20px 22px; min-width:0; }
.yw h3 { margin:0; font-size:17px; font-weight:600; color:var(--ink); }
.yw-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--line); }
.yw-eye { font-size:12px; letter-spacing:.8px; text-transform:uppercase; font-weight:600; color:var(--ink2); }
.yw-head h1 { margin:4px 0 0; font-size:clamp(28px, 4vw, 40px); letter-spacing:-1px; color:var(--ink); }
.yw-today { display:flex; align-items:center; gap:12px; padding:12px 14px 12px 18px; border-radius:20px; background:var(--b-dark, var(--th-ink)); color:var(--b-dark-ink, #fff); font-size:14px; flex-wrap:wrap; }
.yw-today > span:nth-child(2) { flex:1 1 260px; min-width:0; }
.yw-tic { display:inline-flex; opacity:.85; }
.yw-pill { all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:99px; background:#fff; color:var(--th-ink); font-size:13px; font-weight:600; }
.yw-pill:focus-visible, .yw-row:focus-visible, .yw-st:focus-visible, .yw-tabs button:focus-visible { outline:2px solid var(--th-accent); outline-offset:2px; }
.yw-four { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.yw-n { display:flex; flex-direction:column; gap:6px; }
.yw-nl { font-size:13.5px; font-weight:600; color:var(--ink); }
.yw-nb { font-size:44px; line-height:48px; font-weight:600; letter-spacing:-1.5px; color:var(--ink); font-variant-numeric:tabular-nums; }
.yw-of { font-size:20px; letter-spacing:0; color:var(--muted); font-weight:500; }
.yw-ns { font-size:12.5px; color:var(--ink2); overflow-wrap:anywhere; }
.yw-bar { height:8px; border-radius:99px; background:var(--b-soft, var(--th-soft2)); overflow:hidden; } .yw-bar i { display:block; height:100%; border-radius:99px; background:#2F8F5B; }
.yw-vs { align-self:flex-start; margin-top:4px; padding:3px 9px; border-radius:99px; font-size:12px; font-weight:600; background:var(--b-soft, var(--th-soft2)); color:var(--ink2); }
.yw-vs.up { background:#E7F4EC; color:#1E6B3F; } .yw-vs.dn { background:#FDEDEA; color:#B42318; }
.yw-two { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px; align-items:start; }
.yw-two #ywMoves { margin:0; }
.yw-th { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.yw-ic { width:34px; height:34px; border-radius:99px; background:var(--b-soft, var(--th-soft2)); display:grid; place-items:center; color:var(--ink2); flex:none; }
.yw-tabs { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-bottom:14px; }
.yw-tabs button { all:unset; cursor:pointer; height:30px; padding:0 12px; border-radius:99px; font-size:12.5px; font-weight:600; color:var(--ink2); background:var(--b-soft, var(--th-soft2)); }
.yw-tabs button[aria-selected=true] { background:var(--b-pill-on, var(--th-ink)); color:var(--b-pill-on-ink, #fff); }
.yw-red { margin-left:auto; font-size:12px; }
.yw-sb { display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:8px; }
.yw-st { all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:2px; padding:12px; border-radius:18px; background:var(--b-soft, var(--th-soft2)); color:var(--ink); min-width:0; }
.yw-st b { font-size:24px; line-height:28px; font-weight:600; font-variant-numeric:tabular-nums; }
.yw-stn { font-size:12.5px; line-height:16px; color:var(--ink2); white-space:normal; overflow-wrap:anywhere; min-height:32px; }   /* wraps, no … (design check) */
.yw-sts { font-size:12px; color:var(--muted); }
.yw-st.late { background:#FDEDEA; } .yw-st.late .yw-sts { color:#B42318; font-weight:700; }
.yw-st.on { box-shadow:inset 0 0 0 2px var(--ink); }
.yw-sbl { margin-top:12px; display:flex; flex-direction:column; max-height:340px; overflow-y:auto; }
.yw-three { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; align-items:start; }
.yw-list { display:flex; flex-direction:column; }
.yw-row { all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:12px; padding:10px 4px; border-top:1px solid var(--line); color:var(--ink); min-width:0; }
.yw-row:first-of-type { border-top:0; }
.yw-row:hover { background:var(--b-soft, var(--th-soft2)); border-radius:12px; }
.yw-when { width:48px; flex:none; font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.yw-who { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .yw-who b { font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.yw-tag { flex:none; padding:3px 9px; border-radius:99px; font-size:12px; font-weight:600; background:#E7F4EC; color:#1E6B3F; } .yw-tag.red { background:#FDEDEA; color:#B42318; }
.yw-more { align-self:flex-start; margin-top:10px; }
.yw-foot { margin-top:10px; font-size:12px; }
.yw-none { padding:6px 0; }
.yw-ty { display:flex; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:13.5px; color:var(--ink); } .yw-ty:first-of-type { border-top:0; }
.yw-ty > span:last-child { display:flex; flex-direction:column; gap:2px; min-width:0; } .yw-q { color:var(--ink2); overflow-wrap:anywhere; }
.yw-av { width:34px; height:34px; border-radius:99px; flex:none; background:var(--c); display:grid; place-items:center; font-weight:700; color:var(--th-ink); overflow:hidden; } .yw-av img { width:100%; height:100%; object-fit:cover; }
@media (max-width: 1100px) { .yw-four { grid-template-columns:repeat(2, minmax(0, 1fr)); } .yw-two, .yw-three { grid-template-columns:minmax(0, 1fr); } }
@media (max-width: 600px) { .yw-four { grid-template-columns:minmax(0, 1fr); } .yw .tile { padding:16px; } .yw-red { margin-left:0; width:100%; } }
html.dark .yw-pill { background:var(--th-dtext); }
html.dark .yw-vs.up, html.dark .yw-tag { background:#15301F; color:#6FCF97; } html.dark .yw-vs.dn, html.dark .yw-tag.red { background:#3A1D19; color:#FF8A7A; }
html.dark .yw-st.late { background:#3A1D19; } html.dark .yw-st.late .yw-sts { color:#FF8A7A; } html.dark .yw-bar i { background:#6FCF97; }
.yw-th + .yw-ty, .yw-th + .yw-row { border-top:0; }
.yw-none0 { font-size:17px; line-height:24px; letter-spacing:0; color:var(--ink2); font-weight:500; }
/* Your streak + This week's goal (nav v2, Oct 26; design f5-myday) */
.yw-two > .yw-streak { grid-column:2; }
.yw-sbig { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } .yw-sbig b { font-size:36px; line-height:40px; font-weight:600; letter-spacing:-1px; color:var(--ink); }
.yw-dots { display:flex; gap:6px; margin:10px 0 14px; flex-wrap:wrap; }
.yw-dot { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:11.5px; font-weight:700; background:var(--b-soft, var(--th-soft2)); color:var(--muted); }
.yw-dot.ok { background:#E7F4EC; color:#1E6B3F; } .yw-dot.late { background:#FDEDEA; color:#B42318; } .yw-dot.today { background:#1E6B3F; color:#fff; }
.yw-gl { font-size:11.5px; letter-spacing:.8px; text-transform:uppercase; font-weight:700; color:var(--ink2); margin-bottom:8px; }
.yw-gbar { height:8px; border-radius:99px; background:var(--b-soft, var(--th-soft2)); overflow:hidden; } .yw-gbar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--th-accent), var(--th-accent2)); }
.yw-gs { margin-top:8px; }
.yw-gform { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; } .yw-gform input { width:90px; }
html.dark .yw-dot.ok { background:#15301F; color:#6FCF97; } html.dark .yw-dot.late { background:#3A1D19; color:#FF8A7A; } html.dark .yw-dot.today { background:#6FCF97; color:var(--th-dpage2); }
@media (max-width: 1100px) { .yw-two > .yw-streak { grid-column:auto; } }
.yw-two > #ywMoves { grid-row:span 2; } @media (max-width: 1100px) { .yw-two > #ywMoves { grid-row:auto; } }

/* "How is this counted?" (design lead, Oct 27): the ⓘ button and its one-line note. web/js/how-counted.js */
.how-i { all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; min-width:24px; min-height:24px; margin-left:2px; border-radius:99px; font-size:12px; line-height:1; color:var(--muted, var(--th-mute)); vertical-align:middle; }
.how-i:hover, .how-i[aria-expanded=true] { color:var(--ink, var(--th-ink)); background:var(--b-soft, var(--th-soft2)); }
.how-i:focus-visible { outline:2px solid var(--th-accent); outline-offset:1px; }
@media (pointer: coarse) { .how-i { min-width:44px; min-height:44px; margin:-10px -8px; } }
.how-pop { position:absolute; z-index:1000; padding:10px 12px; border-radius:12px; background:var(--th-ink); color:var(--th-soft2); font-size:12.5px; line-height:1.45; box-shadow:0 8px 24px rgba(var(--th-ink-rgb), .25); text-transform:none; letter-spacing:0; font-weight:500; white-space:normal; }
html.dark .how-pop { background:var(--th-dtext); color:var(--th-dpage); }

/* "Why 4.3?" score panel (owner, Oct 27). web/js/score-why.js. Light and dark; nothing scrolls sideways on a phone. */
.sw { margin-top:8px; min-width:0; }
.sw > summary { cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink2, var(--th-text)); text-decoration:underline; text-underline-offset:3px; }
.sw > summary::-webkit-details-marker { display:none; }
.sw > summary:focus-visible { outline:2px solid var(--th-accent); outline-offset:2px; border-radius:6px; }
.sw-p { margin-top:10px; display:flex; flex-direction:column; gap:10px; padding:12px 14px; border-radius:16px; background:var(--b-soft, var(--th-soft2)); color:var(--ink, var(--th-ink)); }
.sw-r { display:flex; flex-direction:column; gap:3px; min-width:0; }
.sw-r + .sw-r { padding-top:10px; border-top:1px solid var(--line, rgba(0,0,0,.08)); }
.sw-h { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sw-n { font-size:13.5px; font-weight:600; }
.sw-dots { display:inline-flex; align-items:center; gap:3px; }
.sw-dots i { width:8px; height:8px; border-radius:99px; background:var(--line, rgba(0,0,0,.14)); }
.sw-dots i.on { background:var(--th-accent); }
.sw-dots b { margin-left:5px; font-size:13px; font-variant-numeric:tabular-nums; }
.sw-nc { font-size:12px; font-weight:600; color:var(--muted, var(--th-mute)); }
.sw-say { font-size:12.5px; color:var(--ink2, var(--th-text)); overflow-wrap:anywhere; }
.sw-tip { font-size:12.5px; font-weight:600; color:var(--ink, var(--th-ink)); overflow-wrap:anywhere; }
.sw-tip::before { content:'To raise it: '; font-weight:500; color:var(--ink2, var(--th-text)); }
.sw-r.off .sw-say { font-style:italic; }
.sw-f { font-size:12px; color:var(--muted, var(--th-mute)); }
/* on the dark week tile */
.b-dark .sw > summary { color:inherit; opacity:.85; }
/* a part not counted because it can only help (Results / moved forward, owner Oct 30): grey, a quiet chip, never a penalty look */
.sw-chip { display:inline-block; margin-left:6px; padding:1px 8px; border-radius:99px; background:var(--th-soft); box-shadow:inset 0 0 0 1px var(--th-line2); color:var(--th-mute); font-size:11px; font-weight:600; line-height:18px; white-space:nowrap; vertical-align:1px; letter-spacing:0; text-transform:none; }
.sw-r.nc .sw-n { color:var(--th-mute); } .sw-r.nc .sw-say { color:var(--th-mute); }
.sw-dots.nc i.on { background:var(--th-faint); } .sw-dots.nc b { color:var(--th-mute); }
.sw-tip.own::before { content:none; }   /* the tip says "To raise it (a suggestion):" itself */
html.dark .sw-chip { background:var(--th-dsoft); box-shadow:inset 0 0 0 1px var(--th-dline); color:var(--th-dmute); }
html.dark .sw-r.nc .sw-n, html.dark .sw-r.nc .sw-say, html.dark .sw-dots.nc b { color:var(--th-dmute); } html.dark .sw-dots.nc i.on { background:rgba(var(--th-dmute-rgb), .45); }
.b-dark .sw-chip { background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); color:inherit; }
.b-dark .sw-r.nc .sw-n, .b-dark .sw-r.nc .sw-say { color:inherit; opacity:.85; } .b-dark .sw-dots.nc i.on { background:rgba(255,255,255,.35); }
/* points (Nov 10: the same as Performer of the Month): a bar 0–100, red under the weak floor */
.sw-pts { display:inline-flex; align-items:center; gap:6px; }
.sw-pts i { display:block; width:64px; height:6px; border-radius:99px; background:var(--line, rgba(0,0,0,.14)); overflow:hidden; }
.sw-pts i b { display:block; height:100%; border-radius:99px; background:var(--th-accent); }
.sw-pts > b { font-size:13px; font-variant-numeric:tabular-nums; min-width:2ch; text-align:right; }
.sw-pts.weak i b { background:#B3122E; } .sw-pts.weak > b { color:#B3122E; }
.sw-pts.nc i b { background:var(--th-faint); } .sw-pts.nc > b { color:var(--th-mute); }
html.dark .sw-pts.weak i b { background:#FF8A9B; } html.dark .sw-pts.weak > b { color:#FF8A9B; }
.b-dark .sw-pts i { background:rgba(255,255,255,.2); } .b-dark .sw-pts i b { background:rgba(255,255,255,.85); } .b-dark .sw-pts.weak i b { background:#FF8A9B; } .b-dark .sw-pts.weak > b { color:#FF8A9B; }
.sw-tbar { display:block; width:100%; max-width:220px; height:8px; margin-top:6px; border-radius:99px; background:var(--line, rgba(0,0,0,.14)); overflow:hidden; }
.sw-tbar i { display:block; height:100%; border-radius:99px; }
.sw-tbar.sg i { background:#15803D; } .sw-tbar.sm i { background:#B45309; } .sw-tbar.sb i { background:#B3122E; }
html.dark .sw-tbar.sg i { background:#4ADE80; } html.dark .sw-tbar.sm i { background:#FBBF24; } html.dark .sw-tbar.sb i { background:#FF8A9B; }
.b-dark .sw-tbar { background:rgba(255,255,255,.2); }
.sw-same { display:block; margin-top:4px; font-size:12px; color:var(--muted, var(--th-mute)); }
.b-dark .sw-same { color:inherit; opacity:.75; }
/* the big total's bar and note take their own lines wherever the number sits in a row */
.bmd-score, .yw-sc { flex-wrap:wrap; }
.bmd-score .sw-tbar, .bmd-score .sw-same, .yw-sc .sw-tbar, .yw-sc .sw-same { flex-basis:100%; }

/* The new map (nav v2, owner approved Oct 26; design/new-map f5-map). Loaded last: the left rail gets a name under every icon
   (64px; groups split by a thin line, no group words; owner, Oct 26); at half a screen (601-1100px) the rail is a Menu button that opens the
   same list; on a phone the rail stays the icon row of bento-phone.css. Plus the ⌘K hint in the search box and the quick
   finder (web/js/finder.js). Light and dark. */

/* desk: the rail, 64px (owner, Oct 26: "too bulky"): a 20px icon, a tiny name under it (2 short lines at most), 6px apart; the
   pill only on the page you are on; the groups split by a thin 24px line, no group words; the full name in a tooltip after 300 ms */
html.bento .shell { grid-template-columns:64px minmax(0, 1fr); }
html.bento .side.b-rail2 { width:64px; padding:10px 0; border-radius:28px; gap:6px; }
html.bento .side.b-rail2 nav { gap:6px; width:100%; padding:0 6px; box-sizing:border-box; }
html.bento .side.b-rail2 nav button { width:52px; height:auto; min-height:50px; padding:6px 1px 5px; border-radius:14px; flex-direction:column; justify-content:center; gap:3px; background:transparent; }
html.bento .side.b-rail2 nav button svg, html.bento .side.b-rail2 nav button .ic { width:20px; height:20px; flex:none; }
html.bento .side.b-rail2 nav button > .nb-s { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:50px; font-size:10.5px; letter-spacing:-.15px; line-height:12px; font-weight:600; text-align:center; white-space:normal; color:inherit; }
html.bento .side.b-rail2 nav button > .nb-f { display:none; }
html.bento .side.b-rail2 nav button:hover { background:rgba(var(--th-ink-rgb), .04); color:var(--ink); }
html.bento.dark .side.b-rail2 nav button:hover { background:rgba(255,255,255,.05); }
/* the page you are on: a soft pill 6px inside the rail (owner, Oct 27: the black / orange block edge to edge "feels like
   something cut off, not clean"): a warm tint with the icon and name in the brand orange; in dark a see-through orange */
html.bento .side.b-rail2 nav button[aria-pressed=true], html.bento .side.b-rail2 nav button[aria-pressed=true]:hover { background:var(--th-tint); color:var(--th-accent2); font-weight:700; }
html.bento .side.b-rail2 nav button[aria-pressed=true] .ic, html.bento .side.b-rail2 nav button[aria-pressed=true] svg { color:inherit; }
html.bento.dark .side.b-rail2 nav button[aria-pressed=true], html.bento.dark .side.b-rail2 nav button[aria-pressed=true]:hover { background:rgba(var(--th-daccent-rgb), .16); color:var(--th-daccent); }
html.bento .side.b-rail2 nav button:focus-visible { outline:2px solid var(--th-accent2); outline-offset:2px; }
html.bento.dark .side.b-rail2 nav button:focus-visible { outline-color:var(--th-daccent); }
html.bento .side.b-rail2 nav button .pill { top:0; right:4px; }
html.bento .side.b-rail2 .navsep { width:24px; height:1px; margin:4px auto; background:var(--line); }
html.bento .side.b-rail2 .aipulse { margin-bottom:2px; }
/* the tooltip: the full name, after 300 ms */
html.bento .side.b-rail2 nav button::after { content:attr(data-full); display:block; position:absolute; left:62px; top:50%; transform:translateY(-50%); white-space:nowrap; pointer-events:none;
  padding:6px 10px; border-radius:10px; background:var(--b-pill-on, var(--th-ink)); color:var(--b-pill-on-ink, #fff); font-size:12px; font-weight:600; box-shadow:0 6px 18px rgba(var(--th-ink-rgb), .18);
  opacity:0; transition:opacity .12s ease 0s; z-index:30; }
html.bento .side.b-rail2 nav button:hover::after, html.bento .side.b-rail2 nav button:focus-visible::after { opacity:1; transition-delay:.3s; }
html.bento .side.b-rail2 nav button:focus-visible::after { transition-delay:0s; }   /* the keyboard: the name shows at once (a11y pass) */

/* the Menu button: only at half a screen */
html.bento .b-menu { display:none; align-items:center; gap:6px; height:44px; padding:0 14px; border:0; border-radius:99px; background:var(--b-pill); color:var(--ink); font:inherit; font-size:13px; font-weight:600; cursor:pointer; box-shadow:0 1px 2px rgba(var(--th-ink-rgb), .06); flex:none; }
html.bento .b-menu:hover { background:var(--b-soft); }
html.bento .b-menu:focus-visible { outline:2px solid var(--th-accent); outline-offset:2px; }
@media (min-width: 601px) and (max-width: 1100px) {
  html.bento .b-menu { display:inline-flex; }
  html.bento .shell { grid-template-columns:0 minmax(0, 1fr); column-gap:0; }   /* the rail's column is empty: the page keeps column 2 */
  html.bento .side.b-rail2 { display:none; }
  /* opened: the same list as a panel, a name next to each icon */
  html.bento.b-menu-open .side.b-rail2 { display:flex; position:fixed; z-index:60; top:76px; left:12px; width:240px; min-height:0; max-height:calc(100vh - 96px); overflow-y:auto; padding:10px;
    align-items:stretch; border-radius:22px; box-shadow:0 18px 48px rgba(var(--th-ink-rgb), .22); }
  html.bento.b-menu-open .side.b-rail2 nav { padding:0; align-items:stretch; }
  html.bento.b-menu-open .side.b-rail2 nav button { width:100%; min-height:44px; flex-direction:row; justify-content:flex-start; gap:12px; padding:0 12px; border-radius:14px; }
  html.bento.b-menu-open .side.b-rail2 nav button > .nb-s { display:none; }
  html.bento.b-menu-open .side.b-rail2 nav button > .nb-f, html.bento.b-menu-open .side.b-rail2 nav button:not(:has(.nb-f)) > .nb-s { display:block; -webkit-line-clamp:unset; max-width:none; font-size:13.5px; line-height:18px; text-align:left; font-weight:600; }
  html.bento.b-menu-open .side.b-rail2 nav button::after { display:none; }
  html.bento.b-menu-open .side.b-rail2 nav button svg { width:18px; height:18px; }
  html.bento.b-menu-open .side.b-rail2 nav button .pill { position:static; margin-left:auto; }
  html.bento.b-menu-open .side.b-rail2 .navsep { width:auto; margin:6px 12px; }
  html.bento.b-menu-open .side.b-rail2 .aipulse { width:100%; justify-content:flex-start; padding:0 12px; }
  html.bento.b-menu-open .b-rail-foot { flex-direction:row; justify-content:flex-start; padding:0 12px; }
}
/* a phone: the icon row has no layer of its own, so the fixed bottom menu (inside the sticky top bar, layer 20) stays on top
   of it. The rail's layer 25 is for its names over the tiles on a desk, and a phone has no names. Before: on a short page the
   row covered the six page buttons (chat 4's v6-check, Oct 26: #users › Names in HHA notes at 390). */
@media (max-width: 600px) { html.bento .side.b-rail2 { z-index:auto; } }
@media (max-width: 600px) {   /* a phone: the rail is the icon row of bento-phone.css, no names */
  html.bento .side.b-rail2 { width:auto; padding:0; border-radius:0; }
  html.bento .side.b-rail2 nav { padding:0; width:auto; }
  html.bento .side.b-rail2 nav button { width:44px; min-height:0; height:44px; padding:0; border-radius:99px; background:var(--b-round); flex-direction:row; }
  html.bento .side.b-rail2 nav button > span:not(.pill) { display:none; }
  html.bento .side.b-rail2 nav button::after { display:none; }
  html.bento .side.b-rail2 .navsep { width:1px; height:24px; margin:0 2px; }
  html.bento .side.b-rail2 nav button .pill { top:-3px; right:-3px; }
}

/* the ⌘K hint in the search box */
html.bento .tb-search { position:relative; }
html.bento .tb-kbd { flex:none; margin-right:8px; height:24px; padding:0 8px; border:1px solid var(--line); border-radius:8px; background:var(--b-tile, #fff); color:var(--ink2); font:inherit; font-size:11.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
html.bento .tb-kbd:hover { color:var(--ink); }
@media (max-width: 600px) { html.bento .tb-kbd { display:none; } }

/* the quick finder */
.qf-ov { position:fixed; inset:0; z-index:200; background:rgba(var(--th-ink-rgb), .36); display:flex; align-items:flex-start; justify-content:center; padding:12vh 16px 16px; }
.qf { width:min(620px, 100%); background:var(--b-tile, #fff); color:var(--ink); border-radius:24px; box-shadow:0 30px 80px rgba(var(--th-ink-rgb), .35); overflow:hidden; display:flex; flex-direction:column; max-height:70vh; }
.qf-in { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); color:var(--ink2); }
.qf-in input, html.bento .qf-in input { flex:1; min-width:0; height:auto; padding:0; border:0; outline:0; box-shadow:none; background:transparent; font:inherit; font-size:16px; color:var(--ink); }
.qf kbd, .qf-in kbd { display:inline-block; min-width:18px; padding:1px 6px; border:1px solid var(--line); border-radius:6px; font:inherit; font-size:11px; font-weight:600; color:var(--ink2); background:var(--b-soft, var(--th-soft2)); text-align:center; }
.qf-list { overflow-y:auto; padding:6px; }
.qf-it { all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; cursor:pointer; }
.qf-it.on { background:var(--b-soft, var(--th-soft2)); }
.qf-ic { width:30px; height:30px; border-radius:99px; display:grid; place-items:center; background:var(--b-soft, var(--th-soft2)); color:var(--ink2); flex:none; }
.qf-it.on .qf-ic { background:var(--b-tile, #fff); }
.qf-t { flex:1; min-width:0; display:flex; flex-direction:column; } .qf-t b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .qf-t .sub { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qf-k { flex:none; font-size:11.5px; }
.qf-none { padding:18px 12px; }
.qf-foot { display:flex; gap:16px; flex-wrap:wrap; padding:10px 18px; border-top:1px solid var(--line); font-size:12px; } .qf-foot kbd { margin-right:2px; }
html.dark .qf-ov { background:rgba(0,0,0,.55); }
html.dark .qf { box-shadow:0 30px 80px rgba(0,0,0,.6); }
/* design check (Oct 26): the finder's native clear button (browser blue) hidden; the top search box a little wider for the hint */
.qf-in input::-webkit-search-cancel-button { display:none; -webkit-appearance:none; }
@media (min-width: 1241px) { html.bento .tb-search { width:240px; } }
/* the group names (Tools, Admin) are headings, not buttons (owner, Oct 26: "Admin button not working"): no hover, no pointer */
html.bento .side .navlabel { cursor:default; user-select:none; pointer-events:none; }
/* v6 (owner's design, Oct 26): the rail is as tall as its items (not the whole page), and the AI status dot is not on the rail
   (the AI reader page shows it) */
@media (min-width: 1101px) {
  html.bento .side.b-rail2 { min-height:0; padding:12px 0; }
  html.bento .side.b-rail2 .aipulse { display:none; }
  html.bento .side.b-rail2 .b-rail-foot { margin-top:6px; }
}

/* Notifications v2 (design lead, Oct 26; design/notifications on design/portal-figma): the bell panel. White, 28px corners,
   the portal's colours; unread = an orange dot and a bold title. Follows the bento tokens (and dark mode) where they are set. */
.bellpanel.nv { --nv-bg:var(--b-tile, var(--card, #fff)); --nv-ink:var(--ink, var(--th-ink)); --nv-ink2:var(--ink2, var(--th-text)); --nv-mut:var(--muted, var(--th-mute));
  --nv-soft:var(--b-soft, var(--th-soft)); --nv-line:var(--line2, var(--th-soft2)); --nv-hover:var(--hover, var(--th-page)); --nv-on:var(--b-pill-on, var(--th-ink)); --nv-on-ink:var(--b-pill-on-ink, #fff);
  --nv-or:var(--th-accent); --nv-orbg:var(--th-tint); --nv-g:#1E6B3F; --nv-gbg:#E7F4EC; --nv-r:#B42318; --nv-rbg:#FDEDEA; --nv-b:#1D5FA8; --nv-bbg:#EAF2FB; --nv-p:#7A4E9E; --nv-pbg:#F3ECFA; --nv-pk:#B4235E; --nv-pkbg:#FDE7EF;
  --nv-urg:#FFF6F4; --nv-urg-line:#F6CFC8; --nv-ease:cubic-bezier(.2,.8,.2,1);
  width:min(440px, calc(100vw - 24px)); max-height:min(860px, calc(100vh - 90px)); display:flex; flex-direction:column; padding:0; border:0; border-radius:28px; background:var(--nv-bg); color:var(--nv-ink);
  box-shadow:0 24px 64px rgba(var(--th-ink-rgb), .22), 0 2px 6px rgba(var(--th-ink-rgb), .06); overflow:hidden; transform-origin:top right; animation:nvPop 260ms var(--nv-ease); }
.bellpanel.nv[hidden] { display:none; }
@keyframes nvPop { from { opacity:0; transform:translateY(-6px) scale(.98); } }
html.dark .bellpanel.nv, html.dn.dark .bellpanel.nv, html.bento.dark .bellpanel.nv { --nv-ink:var(--th-dtext); --nv-ink2:var(--th-dtext); --nv-mut:var(--th-dmute); --nv-line:rgba(255,255,255,.08); --nv-hover:rgba(255,255,255,.04);
  --nv-orbg:rgba(var(--th-daccent-rgb), .16); --nv-gbg:rgba(30,107,63,.25); --nv-g:#7FD3A0; --nv-rbg:rgba(216,58,46,.18); --nv-r:#FF8A7E; --nv-bbg:rgba(29,95,168,.25); --nv-b:#8DBDF2; --nv-pbg:rgba(122,78,158,.28); --nv-p:#CDA8EC; --nv-pkbg:rgba(180,35,94,.25); --nv-pk:#F59BC1;
  --nv-urg:rgba(216,58,46,.10); --nv-urg-line:rgba(255,138,126,.35); box-shadow:0 24px 64px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06); }
.nv-head { padding:18px 20px 12px; display:flex; flex-direction:column; gap:12px; border-bottom:1px solid var(--nv-line); }
.nv-row { display:flex; align-items:center; gap:10px; } .nv-row h2 { margin:0; font-size:20px; font-weight:600; letter-spacing:-.3px; color:var(--nv-ink); }
.nv-n { font-size:12px; font-weight:800; color:var(--nv-or); background:var(--nv-orbg); padding:2px 8px; border-radius:99px; }
.nv-grow { flex:1; }
.nv-link { border:0; background:none; padding:0; cursor:pointer; font:inherit; font-size:12.5px; font-weight:700; color:var(--nv-ink2); text-decoration:underline; text-underline-offset:3px; }
.nv-tabs { display:flex; gap:4px; padding:3px; border-radius:99px; background:var(--nv-soft); position:relative; }
.nv-tabs button { flex:1; height:32px; border:0; background:none; cursor:pointer; border-radius:99px; font:inherit; font-size:12.5px; font-weight:700; color:var(--nv-mut); position:relative; z-index:1; white-space:nowrap; padding:0 6px; transition:color 200ms var(--nv-ease); }
.nv-tabs button.on { color:var(--nv-on-ink); } .nv-tabs em { font-style:normal; opacity:.7; margin-left:4px; }
.nv-sl { position:absolute; top:3px; height:32px; border-radius:99px; background:var(--nv-on); transition:left 240ms var(--nv-ease), width 240ms var(--nv-ease); }
.nv-body { overflow-y:auto; padding:6px 10px 10px; flex:1; scrollbar-width:thin; }
.nv-grp { font-size:11px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--nv-mut); padding:12px 10px 6px; display:flex; align-items:center; gap:8px; }
.nv-grp.now { color:var(--nv-r); } .nv-grp.now i { width:7px; height:7px; border-radius:99px; background:var(--nv-r); }
.nv-it { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:12px; align-items:flex-start; padding:12px 10px; border-radius:18px; cursor:pointer; outline:none;
  transition:background 160ms var(--nv-ease), opacity 240ms var(--nv-ease), transform 240ms var(--nv-ease); }
.nv-it:hover, .nv-it:focus-visible { background:var(--nv-hover); } .nv-it:focus-visible { box-shadow:inset 0 0 0 2px var(--nv-or); }
.nv-it.urgent { background:var(--nv-urg); box-shadow:inset 0 0 0 1.5px var(--nv-urg-line); margin:4px 0; }
.nv-ic { width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none; }
.nv-ic.k-new { background:var(--nv-orbg); color:var(--nv-or); } .nv-ic.k-st { background:var(--nv-gbg); color:var(--nv-g); } .nv-ic.k-al { background:var(--nv-rbg); color:var(--nv-r); }
.nv-ic.k-ai { background:var(--nv-pbg); color:var(--nv-p); } .nv-ic.k-hha { background:var(--nv-bbg); color:var(--nv-b); } .nv-ic.k-rep { background:var(--nv-soft); color:var(--nv-ink2); } .nv-ic.k-ty { background:var(--nv-pkbg); color:var(--nv-pk); }
.nv-main { min-width:0; }
.nv-tt { font-size:14px; line-height:19px; font-weight:600; color:var(--nv-ink); overflow-wrap:anywhere; } .nv-it.read .nv-tt { font-weight:500; color:var(--nv-ink2); }
.nv-ss { font-size:12.5px; line-height:18px; color:var(--nv-mut); margin-top:2px; overflow-wrap:anywhere; }
.nv-meta { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.nv-tm { font-size:11.5px; color:var(--nv-mut); white-space:nowrap; font-weight:600; }
.nv-dot { width:9px; height:9px; border-radius:99px; background:var(--nv-or); box-shadow:0 0 0 3px var(--nv-orbg); transition:transform 200ms var(--nv-ease), opacity 200ms; }
.nv-it.read .nv-dot { transform:scale(0); opacity:0; }
.nv-note { display:none; margin-top:8px; padding:10px 12px; border-radius:14px; background:var(--nv-soft); font-size:12.5px; line-height:18px; color:var(--nv-ink2); white-space:pre-line; overflow-wrap:anywhere; }
.nv-it.open .nv-note { display:block; animation:nvFade 200ms var(--nv-ease); } @keyframes nvFade { from { opacity:0; transform:translateY(-3px); } }
.nv-acts { display:flex; flex-wrap:nowrap; gap:6px; margin-top:10px; max-height:0; opacity:0; overflow:hidden; transition:max-height 240ms var(--nv-ease), opacity 200ms var(--nv-ease); }
.nv-it:hover .nv-acts, .nv-it:focus-within .nv-acts, .nv-it.open .nv-acts, .nv-it.urgent .nv-acts { max-height:80px; opacity:1; }
.nv-acts button, .nv-acts a { height:30px; padding:0 11px; white-space:nowrap; flex:none; border:0; border-radius:99px; background:var(--nv-soft); font:inherit; font-size:12px; font-weight:700; color:var(--nv-ink2); display:inline-flex; align-items:center; gap:5px; cursor:pointer; text-decoration:none; transition:transform 140ms var(--nv-ease); }
.nv-acts button:active, .nv-acts a:active { transform:scale(.95); }
.nv-acts .pri { background:var(--nv-on); color:var(--nv-on-ink); } .nv-it.urgent .nv-acts .pri { background:#B42318; color:#fff; }
.nv-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.nv-chip { height:26px; padding:0 10px; border:0; border-radius:99px; background:var(--nv-soft); font:inherit; font-size:12px; font-weight:700; color:var(--nv-ink2); display:inline-flex; align-items:center; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.nv-chip.more { cursor:default; }
.nv-it.gone { opacity:0; transform:translateX(30px); }
.nv-foot { padding:12px 20px; border-top:1px solid var(--nv-line); display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12.5px; color:var(--nv-mut); }
.nv-empty { padding:40px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; } .nv-empty b { font-size:16px; font-weight:600; color:var(--nv-ink); }
.nv-big { width:56px; height:56px; border-radius:99px; background:var(--nv-gbg, #E7F4EC); color:var(--nv-g, #1E6B3F); display:flex; align-items:center; justify-content:center; }
/* the bell count bumps once on a new item; the live toast */
.bell .badge.bump { animation:nvBump 420ms cubic-bezier(.2,.8,.2,1); } @keyframes nvBump { 40% { transform:scale(1.35); } }
.nv-toast { position:fixed; right:24px; bottom:24px; z-index:200; width:min(380px, calc(100vw - 24px)); display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:12px; align-items:center; padding:14px 14px 14px 16px;
  border-radius:22px; background:var(--th-ink); color:var(--th-soft2); box-shadow:0 18px 40px rgba(var(--th-ink-rgb), .3); transform:translateY(20px); opacity:0; pointer-events:none; transition:transform 260ms cubic-bezier(.2,.8,.2,1), opacity 260ms; }
.nv-toast.on { transform:none; opacity:1; pointer-events:auto; } .nv-toast b { color:#fff; font-size:14px; display:block; overflow-wrap:anywhere; } .nv-toast .nv-ss { color:var(--th-line2); }
.nv-toast .nv-ic { background:rgba(255,255,255,.1); color:var(--th-accent); }
.nv-toast button { height:32px; padding:0 14px; border:0; border-radius:99px; background:var(--th-accent); color:var(--th-ink); font:inherit; font-weight:800; font-size:12.5px; cursor:pointer; }
@media (max-width:560px) { .bellpanel.nv { left:8px; right:8px; width:auto; } .nv-acts { flex-wrap:wrap; } .nv-toast { left:12px; right:12px; width:auto; bottom:12px; }
  html.bento .nv-toast { bottom:calc(84px + env(safe-area-inset-bottom)); }   /* above the phone's bottom page menu (v6 audit) */ .nv-acts { max-height:80px; opacity:1; } .nv-tabs button { font-size:12px; } }
@media (prefers-reduced-motion: reduce) { .bellpanel.nv, .bellpanel.nv *, .nv-toast, .bell .badge.bump { transition:none !important; animation:none !important; } }
/* v6 (design/v6 v6-notifications): a status bundle's names on one grey line; the bell turns dark while its panel is open */
.nv-moves { margin-top:3px; } .nv-mv { border:0; background:none; padding:0; font:inherit; color:inherit; cursor:pointer; text-decoration:none; }
.nv-mv:hover, .nv-mv:focus-visible { color:var(--nv-ink); text-decoration:underline; text-underline-offset:2px; }
.bell.on { background:var(--b-pill-on, var(--th-ink)) !important; color:var(--b-pill-on-ink, #fff) !important; }

/* Sign-in delight (owner approved, Oct 26; design/ideas idea-01..04): the scene's light by New York time, the green
   "Opening your day" button and the record line. The characters and the form stay exactly as they are. */
.login-scene::before { content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; transition:opacity .6s; opacity:0; }
.login-scene.ls-morning::before { opacity:1; background:radial-gradient(520px 300px at 18% 100%, rgba(var(--th-peach-rgb), .55), transparent 70%), linear-gradient(180deg, rgba(var(--th-tint-rgb), .45), transparent 60%); }
.login-scene.ls-day::before { opacity:1; background:radial-gradient(600px 340px at 80% 0%, rgba(255,255,255,.7), transparent 70%), linear-gradient(180deg, rgba(214,232,250,.35), transparent 65%); }
.login-scene.ls-evening::before { opacity:1; background:radial-gradient(420px 320px at 86% 18%, rgba(var(--th-peach-rgb), .45), transparent 70%), linear-gradient(180deg, rgba(60,52,92,.16), rgba(var(--th-accent-rgb), .10)); }
html.dark .login-scene.ls-morning::before { background:radial-gradient(520px 300px at 18% 100%, rgba(var(--th-daccent-rgb), .18), transparent 70%); }
html.dark .login-scene.ls-day::before { background:radial-gradient(600px 340px at 80% 0%, rgba(255,255,255,.06), transparent 70%); }
html.dark .login-scene.ls-evening::before { background:radial-gradient(420px 320px at 86% 18%, rgba(var(--th-daccent-rgb), .16), transparent 70%); }
/* signed in: the button turns green */
.login .lf-btn.lf-ok, .login .lf-btn.lf-ok:disabled { background:#1E6B3F; border-color:#1E6B3F; color:#fff; opacity:1; cursor:default; }
.login .lf-record { font-weight:700; color:var(--orange-dk, var(--th-accent2)); animation:lfRec .4s cubic-bezier(.2,.8,.2,1); }
html.dark .login .lf-record { color:var(--th-daccent); }
@keyframes lfRec { from { opacity:0; transform:translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .login-scene::before { transition:none; } .login .lf-record { animation:none; } }

/* Polish round (design check, Oct 26: "every tab should make sense to everyone"). Loaded last. Light and dark. */

/* Referrals / My day rows: the date line and the status tag wrap instead of being cut ("received Oct", "RVI documents pend…") */
html.bento .list > .row.dnr .dnr-meta { white-space:normal; overflow-wrap:anywhere; }
html.bento .list > .row.dnr .dnr-st { height:auto; overflow:visible; white-space:normal; text-overflow:clip; }
html.bento .list > .row.dnr .dnr-st .spill.dn-st { height:auto; min-height:22px; white-space:normal; flex-wrap:wrap; line-height:16px; padding-top:3px; padding-bottom:3px; }
html.bento .list > .row.dnr .dnr-id { white-space:normal; height:auto; }

/* a tab row wider than its place scrolls in its own row, a soft fade at the edge while more is hidden (web/js/filters.js) */
html.bento main .tabs { max-width:100%; overflow-x:auto; scrollbar-width:none; }
html.bento main .tabs::-webkit-scrollbar { display:none; }
html.bento main .tabs.is-over { -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent); }
html.bento main .tabs > button { flex:none; }

/* Cottage Helper tabs: the count pill keeps its space from the name */
html.bento .hp-tabs button .n { margin-left:2px; }

/* My day: the plain meaning of the picked tab, under the tabs */
html.bento .md-tabhint { margin:8px 2px 0; font-size:12.5px; color:var(--ink2); }

/* Team › People: the Team page has the title; the profiles keep their buttons and numbers, no second heading */
html.bento .mt-head.mt-inteam { align-items:center; margin-top:4px; }
html.bento .mt-head.mt-inteam .mt-sub { flex:1 1 260px; font-size:12.5px; letter-spacing:.6px; text-transform:uppercase; font-weight:600; color:var(--ink2); }

/* Report: the period buttons read as a choice of time, the section tabs as tabs */
html.bento .rp-perl { align-self:center; margin-right:6px; font-size:11px; letter-spacing:.8px; text-transform:uppercase; font-weight:700; color:var(--muted); }
html.bento .rp-per { box-shadow:inset 0 0 0 1px var(--line); }

/* the daily report card: a slim white bar (one orange block on My day: Start calling) */
html.bento main .tile.gm-card.gm-slim, html.bento .tile.gm-card.gm-slim { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; text-align:left; flex-wrap:wrap; gap:4px 14px; padding:14px 18px; background:var(--b-tile, #fff); color:var(--ink); min-height:0; }
html.bento .tile.gm-card.gm-slim .gm-k { width:100%; font-size:11px; letter-spacing:.8px; text-transform:uppercase; font-weight:700; color:var(--th-accent2); margin:0; }
html.bento .tile.gm-card.gm-slim h3 { margin:0; font-size:16px; color:var(--ink); }
html.bento .tile.gm-card.gm-slim .sub { flex:1 1 240px; margin:0; color:var(--ink2); }
html.bento .tile.gm-card.gm-slim .gm-pill { margin:0 0 0 auto; background:var(--b-soft, var(--th-soft2)); color:var(--ink); }
html.bento.dark .tile.gm-card.gm-slim .gm-k { color:var(--th-daccent); }

/* Design v6, the shell (owner approved Oct 26; design/v6 and design/effects-v2 on design/portal-figma). With web/js/shell-v6.js;
   the effects themselves are Intake 1's Motion (web/js/motion.js, web/css/motion.css). Light and dark; every movement is off
   under prefers-reduced-motion. */
:root { --v6-ease:cubic-bezier(.2,.8,.2,1); }

/* 1. the sticky glass header: after 120px of scroll (back above 40px) the top bar is frosted with a soft shadow. It keeps its
   height (owner, Oct 27: shrinking it 12px moved the page back across the line and the bar flipped by itself many times a
   second); scripts/topbar-check.js checks it. */
html.bento .topbar { transition:background-color 240ms var(--v6-ease), box-shadow 240ms var(--v6-ease); }
html.bento.v6-glass .topbar { background:color-mix(in srgb, var(--b-app) 82%, transparent); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 var(--line), 0 10px 30px rgba(var(--th-ink-rgb), .06); }
html.bento.dark.v6-glass .topbar { box-shadow:0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.35); }
/* the mini numbers (done · late · new), on the Overview and My day, wide screens only */
html.bento .v6-mini { display:none; gap:16px; align-items:baseline; flex:none; white-space:nowrap; }
html.bento .v6-mini span { font-size:12.5px; font-weight:600; color:var(--muted); }
html.bento .v6-mini b { font-size:16px; font-weight:700; color:var(--ink); margin-right:3px; font-variant-numeric:tabular-nums; }
html.bento .v6-mini .l b { color:#B42318; } html.bento.dark .v6-mini .l b { color:#FF8A7A; }
@media (min-width: 1241px) {
  html.bento.v6-glass .v6-mini { display:flex; animation:v6in 240ms var(--v6-ease); }
  html.bento.v6-glass .b-pills:has(+ .v6-mini) { margin:0 0 0 auto; }
  /* the numbers take the search box's place while scrolled (Ctrl K still opens the finder) */
  html.bento.v6-glass .topbar:has(.v6-mini) .tb-search { display:none; }
  html.bento.v6-glass .topbar:has(.v6-mini) .tb-right { margin-left:auto; }
}
@keyframes v6in { from { opacity:0; transform:translateY(-4px); } }

/* 2. the sliding tab pill (Motion.slidePill, web/css/motion.css) in the chosen tab's own colour (--sp-c, web/js/shell-v6.js); the
   chosen tab goes see-through over it even where a page's own rule is strong (an id in :not() for weight) */
html .m-pill-host.m-pill-host > .m-pill { background:var(--sp-c, var(--b-pill-on, var(--th-ink))); }
/* the pill's group is its box (see shell-v6.js setup): never static */
html .m-pill-host.m-pill-host.m-pill-host:not(#_sp) { position:relative; }
html .m-pill-host.m-pill-host.m-pill-host:not(#_sp) > :is(button, a):is([aria-selected=true], [aria-pressed=true], .on) { background:transparent !important; background-image:none !important; box-shadow:none !important; }

/* 4. My week: the sparkline in green under follow-ups done, today's streak square glows */
.yw-spark { display:block; width:100%; height:34px; margin-top:14px; overflow:visible; color:#1E6B3F; }
html.dark .yw-spark { color:#6FCF97; }
.yw-dot.today { animation:v6flame 1.8s ease-in-out infinite; }
@keyframes v6flame { 50% { box-shadow:0 0 0 4px rgba(30,107,63,.2); } }
html.dark .yw-dot.today { animation-name:v6flameD; } @keyframes v6flameD { 50% { box-shadow:0 0 0 4px rgba(111,207,151,.25); } }
.yw-eye .m-live { margin-right:8px; }
.yw-upd { text-transform:none; letter-spacing:0; }

/* 6. the quick finder, v6: soft cream chips, rounder, a small glide in */
.qf-ov { animation:v6fade 160ms ease; backdrop-filter:blur(2px); }
.qf { border-radius:28px; animation:v6qf 220ms var(--v6-ease); box-shadow:0 30px 80px rgba(var(--th-ink-rgb), .28), 0 1px 0 var(--line); }
.qf-in { padding:16px 20px; }
.qf kbd, .qf-in kbd { border:0; border-radius:8px; padding:3px 7px; font-weight:800; background:var(--b-soft, var(--th-soft)); color:var(--ink2); }
.qf-it { border-radius:16px; transition:background-color 120ms; }
.qf-it.on { background:var(--b-soft, var(--th-soft)); }
.qf-it.on .qf-k { color:var(--ink); }
html.bento .tb-kbd { border:0; background:var(--b-soft, var(--th-soft)); font-weight:800; font-size:11px; height:22px; padding:0 7px; }
@keyframes v6fade { from { opacity:0; } }
@keyframes v6qf { from { opacity:0; transform:translateY(-8px) scale(.98); } }

/* less motion: nothing moves, everything is still there */
@media (prefers-reduced-motion: reduce) {
  html.bento .topbar { transition:none !important; }
  .v6-mini, .yw-dot.today, .qf-ov, .qf, html.bento.v6-glass .v6-mini { animation:none !important; }
}

/* Keyboard (a11y pass, Oct 26): a visible focus ring on every piece of the shell, 3:1 against what is around it in both themes
   (light: the darker orange #B8541A on the cream page; dark: #F08A3C on the dark page). Only for the keyboard (:focus-visible). */
html.bento { --v6-ring:var(--th-accent2); } html.bento.dark { --v6-ring:var(--th-daccent); }
html.bento :is(#bpills, [role=tablist], .seg, .hp-seg, .bmt-seg, .fl-ptabs) > :is(button, a):focus-visible,
html.bento .side nav button:focus-visible, html.bento .b-menu:focus-visible, html.bento .tb-kbd:focus-visible, html.bento .topbar .btn:focus-visible,
html.bento .topbar .me button:focus-visible, html.bento #tbTheme:focus-visible, html.bento .row[data-id] .who > span[role=button]:focus-visible {
  outline:2px solid var(--v6-ring) !important; outline-offset:2px; }
html.bento .row[data-id] .who > span[role=button] { border-radius:6px; cursor:pointer; }
/* fields too (a11y pass, Oct 27: the owner pickers and search boxes showed no ring at all from the keyboard): the same ring;
   a field drawn borderless inside its own box (the Referrals and Forms search) rings the box instead */
html.bento :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea):focus-visible { outline:2px solid var(--v6-ring); outline-offset:2px; }
html.bento :is(.dnr-q, .fl-find):has(> input:focus-visible) { outline:2px solid var(--v6-ring); outline-offset:2px; }
html.bento :is(.dnr-q, .fl-find) > input:focus-visible:not([type=checkbox]):not([type=radio]):not([type=range]) { outline:0; }
/* the finder: the box shows it has the focus; the picked row has a ring as well as its fill (not colour alone) */
.qf:focus-within .qf-in { box-shadow:inset 0 -2px 0 var(--v6-ring, var(--th-accent2)); }
.qf-it.on { box-shadow:inset 0 0 0 2px var(--v6-ring, var(--th-accent2)); }
html.dark .qf-it.on { box-shadow:inset 0 0 0 2px var(--th-daccent); }
/* the case window: the History / Details tabs keep 12px of space under the "Why?" box (design check, Oct 26) */
html.bento .sheet .b-case .dtabs { margin-top:12px; }
/* Esc on a typed note (a11y pass, Oct 27; web/js/sheet-keys.js): the question sits at the foot of the window */
.sk-ask { position:sticky; bottom:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; padding:12px 14px; border-radius:16px;
  background:var(--b-tile, #FFFFFF); color:var(--text-primary, var(--th-ink)); box-shadow:0 -1px 0 rgba(var(--th-ink-rgb), .08), 0 8px 24px rgba(var(--th-ink-rgb), .16); font-weight:600; }
.sk-ask > span { margin-right:auto; }
html.dark .sk-ask { background:var(--th-dcard); color:var(--th-dtext); box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 8px 24px rgba(0,0,0,.4); }

/* The patient's journey in the case window (idea 7, owner approved Oct 26; web/js/journey.js). Light and dark; the glow is off
   under prefers-reduced-motion; one line on a phone. */
.jn { container-type:inline-size; --jn-green:#1E6B3F; --jn-orange:var(--th-accent); --jn-track:var(--th-line); margin:14px 0 4px; padding:16px 18px 14px; border-radius:22px; background:var(--b-tile, #fff); border:1px solid var(--line); }
html.dark .jn { --jn-green:#4FBF7F; --jn-track:rgba(255,255,255,.12); }
.jn-h { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.jn-h .dn-label { margin-right:auto; }
.jn-pill { display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:99px; background:#EAF2FB; color:#1D5FA8; font-size:12px; font-weight:700; white-space:nowrap; }
html.dark .jn-pill { background:rgba(110,168,232,.16); color:#9CC5F2; }
.jn-paused { display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:99px; background:#FCF3DC; color:#8A5A00; font-size:12px; font-weight:700; }
html.dark .jn-paused { background:rgba(245,207,115,.14); color:#F5CF73; }
.jn-path { position:relative; margin:0 0 14px; }
.jn-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.jn-svg path { fill:none; stroke-width:9; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.jn-rest { stroke:var(--jn-track); }
.jn-st { position:absolute; transform:translate(-50%, -9px); display:flex; flex-direction:column; align-items:center; gap:2px; width:max-content; max-width:120px; text-align:center; pointer-events:none; }
.jn-dot { width:18px; height:18px; border-radius:99px; display:grid; place-items:center; background:var(--b-tile, #fff); border:2.5px solid var(--th-line2); color:#fff; box-sizing:border-box; flex:none; }
html.dark .jn-dot { border-color:rgba(255,255,255,.28); background:var(--th-dpage); }
.jn-st.done .jn-dot { background:var(--jn-green); border-color:var(--jn-green); }
.jn-st.now .jn-dot { width:26px; height:26px; margin-top:-4px; background:var(--jn-orange); border:0; box-shadow:0 0 0 6px rgba(var(--th-accent-rgb), .22); animation:jnGlow 2.2s ease-in-out infinite; }
.jn-st.now.paused .jn-dot { background:#D9A441; box-shadow:0 0 0 6px rgba(217,164,65,.2); animation:none; }
@keyframes jnGlow { 50% { box-shadow:0 0 0 10px rgba(var(--th-accent-rgb), .08); } }
.jn-name { margin-top:6px; font-size:13px; font-weight:600; color:var(--ink2); line-height:1.2; white-space:normal; }
.jn-st.now .jn-name { color:var(--ink); font-weight:800; }
.jn-st.todo .jn-name { color:var(--muted); font-weight:600; }
.jn-date { font-size:11.5px; color:var(--muted); white-space:nowrap; }
.jn-list { list-style:none; margin:0; padding:0; position:absolute; inset:0; }
.jn-vh, .qf-live { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.jn-one { display:none; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0 2px; font-size:14px; }
.jn-onedot { width:12px; height:12px; border-radius:99px; background:var(--jn-orange); box-shadow:0 0 0 4px rgba(var(--th-accent-rgb), .2); flex:none; }
.jn-onedot.done { background:var(--jn-green); box-shadow:none; } .jn-onedot.paused { background:#D9A441; box-shadow:none; }
.jn-tell { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:16px; background:var(--b-soft, var(--th-soft)); font-size:13.5px; line-height:1.45; color:var(--ink2); }
.jn-tell b { color:var(--ink); }
html.dark .jn-tell { background:rgba(255,255,255,.05); }
/* a narrow case window: every other name above its dot, so 7-8 steps never run into each other */
@container (max-width: 820px) {
  .jn-st.alt { flex-direction:column-reverse; transform:translate(-50%, calc(-100% + 9px)); }
  .jn-st.alt .jn-name { margin:0 0 6px; }
  .jn-st.alt.now { transform:translate(-50%, calc(-100% + 13px)); }
}
/* half a screen: names a little smaller so 7-8 fit */
@media (max-width: 1100px) { .jn-name { font-size:12px; } .jn-date { font-size:11px; } .jn-st { max-width:92px; } }
/* a phone: one line instead of the path */
@media (max-width: 600px) { .jn-path { position:absolute; width:1px; height:1px !important; overflow:hidden; clip:rect(0 0 0 0); margin:0; } .jn-one { display:flex; } .jn { padding:14px; position:relative; } }
@media (prefers-reduced-motion: reduce) { .jn-st.now .jn-dot { animation:none; } }

/* Seasonal touches on page headers (idea 9, owner approved Oct 26; web/js/seasonal.js). At most 12 pieces, CSS animation only,
   never clickable, on the right side of the header behind its buttons, none under prefers-reduced-motion. Light and dark. */
.ssn-host { position:relative; isolation:isolate; }
.ssn-host > :not(.ssn) { position:relative; z-index:1; }
.ssn { position:absolute; z-index:0; top:-14px; bottom:-10px; right:0; width:min(38%, 440px); overflow:hidden; pointer-events:none; user-select:none; }
.ssn i { position:absolute; top:-24px; left:calc(6% + var(--i) * 8%); font-style:normal; line-height:1; will-change:transform; }
/* November: a few leaves drift down and sway */
.ssn-leaves i { font-size:18px; opacity:.85; animation:ssnLeaf 11s linear infinite; animation-delay:calc(var(--i) * -1.6s); left:calc(4% + var(--i) * 13%); }
.ssn-leaves i:nth-child(even) { font-size:14px; animation-duration:13s; }
@keyframes ssnLeaf { 0% { transform:translate(0, 0) rotate(0); opacity:0; } 10% { opacity:.85; } 50% { transform:translate(-22px, 70px) rotate(140deg); } 90% { opacity:.8; } 100% { transform:translate(10px, 150px) rotate(300deg); opacity:0; } }
/* December: light snow */
.ssn-snow i { width:6px; height:6px; border-radius:99px; background:#C9D8EA; animation:ssnSnow 9s linear infinite; animation-delay:calc(var(--i) * -.75s); }
.ssn-snow i:nth-child(3n) { width:4px; height:4px; animation-duration:12s; } .ssn-snow i:nth-child(4n+1) { width:7px; height:7px; animation-duration:10s; }
html.dark .ssn-snow i { background:rgba(255,255,255,.75); }
@keyframes ssnSnow { 0% { transform:translate(0, 0); opacity:0; } 12% { opacity:.9; } 50% { transform:translate(8px, 70px); } 100% { transform:translate(-6px, 150px); opacity:0; } }
/* Friday from 2 PM: confetti and one party face */
.ssn-party i { width:5px; height:10px; border-radius:2px; background:var(--c, var(--th-accent)); animation:ssnConf 7s linear infinite; animation-delay:calc(var(--i) * -.65s); }
.ssn-party i:nth-child(5n+1) { --c:var(--th-accent); } .ssn-party i:nth-child(5n+2) { --c:#1E6B3F; } .ssn-party i:nth-child(5n+3) { --c:#F5CF73; } .ssn-party i:nth-child(5n+4) { --c:#7B4FB0; } .ssn-party i:nth-child(5n) { --c:#1C3462; }
html.dark .ssn-party i:nth-child(5n) { --c:#9CC5F2; }
.ssn-party i:last-child { width:auto; height:auto; background:none; top:10px; left:auto; right:8%; font-size:30px; animation:ssnBob 3.2s ease-in-out infinite; }
@keyframes ssnConf { 0% { transform:translate(0, 0) rotate(0); opacity:0; } 10% { opacity:1; } 100% { transform:translate(-14px, 150px) rotate(520deg); opacity:0; } }
@keyframes ssnBob { 50% { transform:translateY(-4px) rotate(-6deg); } }
@media (max-width: 600px) { .ssn { width:44%; } .ssn i:nth-child(n+7) { display:none; } }
@media (prefers-reduced-motion: reduce) { .ssn { display:none !important; } }
.ssn-sw { display:inline-flex; align-items:center; gap:8px; margin-top:6px; font-weight:600; cursor:pointer; }
.ssn-sw input { width:18px; height:18px; accent-color:var(--th-accent); }

/* The What's new card (web/js/whatsnew.js): a small v6 tile under the page header, light and dark; the highlight on "Show me"
   is a ring that pulses twice (a still ring under reduced motion). */
.wn { margin:0 0 16px; padding:16px 18px 14px; border-radius:22px; }
.wn-h { display:flex; align-items:center; gap:10px; }
.wn-h h3 { margin:0; font-size:16px; font-weight:700; }
.wn-badge { display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:99px; background:var(--th-tint); color:var(--th-accent3); font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
html.dark .wn-badge { background:rgba(var(--th-daccent-rgb), .18); color:var(--th-daccent); }
.wn-x { margin-left:auto; width:44px; height:44px; border:0; border-radius:99px; background:transparent; color:var(--ink2); font-size:22px; line-height:1; cursor:pointer; }
.wn-x:hover { background:var(--b-soft, var(--th-soft)); }
.wn-list { list-style:none; margin:10px 0 12px; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:10px; }
.wn-it { display:flex; align-items:center; gap:12px; padding:10px; border-radius:16px; background:var(--b-soft, var(--th-soft)); min-width:0; }
html.dark .wn-it { background:rgba(255,255,255,.05); }
.wn-pic { width:88px; height:56px; object-fit:cover; border-radius:10px; flex:none; box-shadow:0 1px 0 var(--line); }
.wn-t { flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.3; }
.wn-show { flex:none; min-height:44px; padding:0 6px; font-weight:700; white-space:nowrap; }
.wn-foot { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.wn-foot .btn { min-height:44px; }
.wn-spot { outline:3px solid var(--th-accent2); outline-offset:4px; border-radius:12px; animation:wnSpot 1.2s ease-in-out 2; }
html.dark .wn-spot { outline-color:var(--th-daccent); }
@keyframes wnSpot { 50% { outline-offset:9px; } }
@media (max-width: 600px) { .wn-list { grid-template-columns:1fr; } .wn-pic { width:64px; height:42px; } }
@media (prefers-reduced-motion: reduce) { .wn-spot { animation:none; } }
/* four lines (managers): two per row at a desk, so each reads in one or two lines; three (coordinators) stay one row */
@media (min-width: 601px) { .wn-list:has(> .wn-it:nth-child(4)) { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
/* a phone (design lead, Oct 27): "What's new" starts as one line; "N new · see them" opens it */
.wn-open { display:none; }
.wn.wn-c .wn-list, .wn.wn-c .wn-foot { display:none; }
.wn.wn-c .wn-open { all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; min-height:44px; padding:0 4px; margin-left:auto; font-size:13.5px; font-weight:600; color:var(--orange-dk, var(--th-accent2)); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
html.dark .wn.wn-c .wn-open { color:var(--th-daccent); }
.wn.wn-c .wn-open:focus-visible { outline:2px solid var(--th-accent); outline-offset:2px; border-radius:6px; }
.wn.wn-c .wn-h h3 { display:none; }
.wn.wn-c .wn-open { flex:1; min-width:0; margin-left:0; overflow:hidden; text-overflow:ellipsis; }
.wn.wn-c { padding-top:10px; padding-bottom:10px; }

/* Team › People: "Meet the team" (owner approved Oct 27, the boss's request; design/team-people on design/portal-figma). With
   web/js/meet.js. Portrait cards: a tinted photo area (the person's own photo, or initials on a white circle), the role in big
   outlined letters down the right side, an "On calls" badge, then a white info card (name, what they handle, extension, one
   positive chip, Call / Email / Thank). 4 per row at a desk with ‹ › arrows and dots; 3 at half a screen; a swipe row on a
   phone. Light and dark; 44px taps; no motion under prefers-reduced-motion. */
.mtm { padding:26px 26px 20px; margin:0 0 16px; border-radius:28px; }
.mtm-h { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.mtm-h h2 { margin:0; font-size:32px; line-height:1.1; font-weight:700; letter-spacing:-.5px; color:var(--ink); }
.mtm-h .sub { margin-top:6px; font-size:14px; }
.mtm-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mtm .mtm-find { display:flex; align-items:center; gap:10px; height:44px; padding:0 18px; border-radius:99px; background:var(--b-soft, var(--th-soft)); min-width:220px; color:var(--muted); box-sizing:border-box; }
/* main:not(#_b) #mtQ: stronger than the Team page's "fields as pills" (bento-pages.css), so the box is one pill, not two */
html main:not(#_b) .mtm .mtm-find #mtQ { border:0; background:transparent; height:auto; min-height:0; padding:0; box-shadow:none; flex:1; min-width:0; color:var(--ink); font:inherit; outline:0; }
.mtm .mtm-find:focus-within { outline:2px solid var(--v6-ring, var(--th-accent2)); outline-offset:2px; }
html.dark .mtm .mtm-find { background:rgba(255,255,255,.06); }
.mtm-stage { position:relative; margin-top:18px; container-type:inline-size; }
.mtm-row { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; list-style:none; margin:0; padding:2px 0 4px; }
.mtm-row::-webkit-scrollbar { display:none; }
.mtm-c { flex:0 0 calc((100% - 48px) / 4); scroll-snap-align:start; display:flex; flex-direction:column; border-radius:24px; background:color-mix(in srgb, var(--pf-bg, var(--th-peach)) 22%, var(--b-tile, #fff)); overflow:hidden; min-width:0; }
@container (max-width: 1000px) { .mtm-c { flex-basis:calc((100% - 32px) / 3); } }
@container (max-width: 700px) { .mtm-c { flex-basis:calc((100% - 16px) / 2); } }
@container (max-width: 520px) { .mtm-c { flex-basis:80%; } }
.mtm-ph { position:relative; height:280px; display:grid; place-items:center; background:linear-gradient(180deg, color-mix(in srgb, var(--pf-bg, var(--th-peach)) 55%, #fff), var(--pf-bg, var(--th-peach))); }
html.dark .mtm-ph { background:linear-gradient(180deg, color-mix(in srgb, var(--pf-bg) 70%, #000), var(--pf-bg)); }
.mtm-img, .mtm-ini { width:150px; height:150px; border-radius:50%; margin-bottom:46px; box-shadow:0 0 0 6px rgba(255,255,255,.55); }
.mtm-img { object-fit:cover; display:block; }
.mtm-ini { display:grid; place-items:center; background:#fff; color:var(--mtm-ink, var(--th-accent2)); font-size:46px; font-weight:800; letter-spacing:-1px; }
html.dark .mtm-ini { background:var(--th-dpage); color:color-mix(in srgb, var(--mtm-ink) 45%, #fff); box-shadow:0 0 0 6px rgba(255,255,255,.08); }
/* the role down the right side: big outlined letters, read from the bottom up */
.mtm-role { position:absolute; top:14px; right:10px; max-height:240px; overflow:hidden; writing-mode:vertical-rl; transform:rotate(180deg); font-size:34px; line-height:1; font-weight:800; letter-spacing:.01em;
  color:transparent; -webkit-text-stroke:1.5px var(--mtm-ink, var(--th-accent2)); white-space:nowrap; pointer-events:none; user-select:none; }
html.dark .mtm-role { -webkit-text-stroke-color:color-mix(in srgb, var(--mtm-ink) 50%, #fff); }
.mtm-on { position:absolute; top:14px; left:14px; display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:99px; background:#fff; color:var(--th-ink); font-size:12px; font-weight:700; box-shadow:0 1px 2px rgba(var(--th-ink-rgb), .12); }
.mtm-on i { width:8px; height:8px; border-radius:50%; background:#1E7F47; }
/* the info card over the photo area */
.mtm-info { position:relative; margin:-58px 12px 12px; padding:16px 16px 12px; border-radius:18px; background:var(--b-tile, #fff); box-shadow:0 8px 24px rgba(var(--th-ink-rgb), .10); display:flex; flex-direction:column; gap:4px; flex:1; }
html.dark .mtm-info { background:var(--th-dpage); box-shadow:0 8px 24px rgba(0,0,0,.35); }
.mtm-nm { font-size:17px; line-height:1.25; font-weight:700; color:var(--ink); }
.mtm-what { font-size:13.5px; line-height:1.35; color:var(--ink2); }
.mtm-ext { font-size:13px; color:var(--ink2); margin-bottom:8px; }
.mtm-vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mtm-chip { align-self:flex-start; margin:0 0 8px; display:inline-flex; align-items:center; height:26px; padding:0 10px; border-radius:99px; font-size:12.5px; font-weight:700; }
.mtm-chip.o { background:var(--th-tint); color:var(--th-accent3); } .mtm-chip.g { background:#E7F4EC; color:#1E6B3F; } .mtm-chip.b { background:#EAF2FB; color:#1D5FA8; }
html.dark .mtm-chip.o { background:rgba(var(--th-daccent-rgb), .16); color:var(--th-daccent); } html.dark .mtm-chip.g { background:rgba(111,207,151,.14); color:#8FE0B0; } html.dark .mtm-chip.b { background:rgba(110,168,232,.16); color:#A9C8F2; }
.mtm-acts { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }
/* html .mtm .mtm-c: stronger than the theme's html.dn .btn, which would turn these white */
html .mtm .mtm-c .mtm-b { min-height:44px; height:auto; display:inline-flex; align-items:center; justify-content:center; padding:0 6px; border-radius:99px; border:1px solid color-mix(in srgb, var(--pf-bg, var(--th-peach)) 70%, var(--th-mute)); background:color-mix(in srgb, var(--pf-bg, var(--th-peach)) 30%, #fff); color:var(--th-ink); font:inherit; font-size:13.5px; font-weight:700; text-decoration:none; cursor:pointer; }
html .mtm .mtm-c .mtm-b:hover { filter:brightness(.96); }
html .mtm .mtm-c .mtm-b.mtm-dark { background:var(--th-ink); border-color:var(--th-ink); color:#fff; }
html.dark .mtm .mtm-c .mtm-b { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); color:var(--th-dtext); }
html.dark .mtm .mtm-c .mtm-b.mtm-dark { background:var(--th-dtext); border-color:var(--th-dtext); color:var(--th-dpage); }
html .mtm .mtm-c .mtm-b.is-off { background:transparent; border-style:dashed; color:var(--th-text); cursor:default; }
html.dark .mtm .mtm-c .mtm-b.is-off { background:transparent; color:var(--th-dmute); }
/* a manager's ⋯ on a card: Hide (with a confirm step) or Show */
.mtm-info:has(.mtm-more) .mtm-nm { padding-right:34px; }
html .mtm .mtm-more { position:absolute; top:4px; right:4px; width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:var(--ink2); font-size:22px; line-height:1; font-weight:700; cursor:pointer; display:grid; place-items:center; }
html .mtm .mtm-more:hover, html .mtm .mtm-more[aria-expanded="true"] { background:var(--b-soft, var(--th-soft)); color:var(--ink); }
html.dark .mtm .mtm-more:hover, html.dark .mtm .mtm-more[aria-expanded="true"] { background:rgba(255,255,255,.08); }
.mtm .mtm-more:focus-visible { outline:2px solid var(--v6-ring, var(--th-accent2)); outline-offset:1px; }
.mtm-menu { position:absolute; top:48px; right:8px; left:8px; z-index:3; padding:6px; border-radius:16px; background:var(--b-tile, #fff); border:1px solid var(--line); box-shadow:0 12px 32px rgba(var(--th-ink-rgb), .18); display:flex; flex-direction:column; gap:6px; }
html.dark .mtm-menu { background:var(--th-dcard); border-color:rgba(255,255,255,.12); box-shadow:0 12px 32px rgba(0,0,0,.5); }
html .mtm .mtm-mi { min-height:44px; width:100%; padding:0 12px; border:0; border-radius:12px; background:transparent; color:var(--ink); font:inherit; font-size:14px; font-weight:600; text-align:left; cursor:pointer; }
html .mtm .mtm-mi:hover, html .mtm .mtm-mi:focus-visible { background:var(--b-soft, var(--th-soft)); }
html.dark .mtm .mtm-mi:hover, html.dark .mtm .mtm-mi:focus-visible { background:rgba(255,255,255,.08); }
.mtm-q { margin:4px 6px; font-size:13.5px; line-height:1.4; color:var(--ink); }
.mtm-mb { display:flex; gap:8px; justify-content:flex-end; padding:0 2px 2px; } html .mtm .mtm-c .mtm-mb .mtm-b { padding:0 16px; }
.mtm-c.mt-hidden { opacity:.7; }
.mtm-none { padding:24px 6px; list-style:none; }
/* the arrows and the dots */
.mtm-arr { position:absolute; top:calc(50% - 23px); z-index:2; width:46px; height:46px; border-radius:50%; border:0; background:var(--th-accent2); color:#fff; font-size:26px; line-height:1; font-weight:700; cursor:pointer; box-shadow:0 6px 16px rgba(var(--th-accent2-rgb), .35); display:grid; place-items:center; }
.mtm-arr.prev { left:-18px; } .mtm-arr.next { right:-18px; }
.mtm-arr:disabled { opacity:0; pointer-events:none; }
.mtm-arr:focus-visible { outline:2px solid var(--v6-ring, var(--th-accent2)); outline-offset:3px; }
.mtm-dots { display:flex; justify-content:center; gap:6px; min-height:8px; margin:14px 0 4px; }
.mtm-dots i { width:7px; height:7px; border-radius:99px; background:var(--line-strong, var(--th-line2)); transition:width .2s; }
.mtm-dots i.on { width:22px; background:var(--th-accent2); }
html.dark .mtm-dots i.on { background:var(--th-daccent); }
.mtm-foot { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; margin-top:8px; }
/* under the card: This month's wins (full width, as before), then the team's week beside the birthdays (Team › People), or
   the shout-outs beside them (the old Meet the team page) */
.mtm-below { display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:16px; margin:0 0 16px; align-items:start; }
.mtm-below > * { min-width:0; margin:0; }
.mtm-wall { margin:0; display:flex; flex-direction:column; gap:16px; }
.mtm-below.one { grid-template-columns:1fr; }
@media (max-width: 900px) { .mtm-below { grid-template-columns:1fr; } }
@media (max-width: 600px) {
  .mtm { padding:20px 16px 16px; }
  .mtm-h h2 { font-size:28px; }
  .mtm-tools, .mtm-find { width:100%; }
  .mtm-tools .seg { max-width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .mtm-tools .seg::-webkit-scrollbar { display:none; } .mtm-tools .seg > button { flex:none; }
  .mtm-tools .seg.mtm-fr { -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .mtm-tools .seg.mtm-fl { -webkit-mask-image:linear-gradient(90deg, transparent, #000 44px); mask-image:linear-gradient(90deg, transparent, #000 44px); }
  .mtm-tools .seg.mtm-fl.mtm-fr { -webkit-mask-image:linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image:linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
  .mtm-arr { display:none; }
  .mtm-c { flex-basis:80%; }
  .mtm-ph { height:240px; } .mtm-role { max-height:220px; font-size:27px; }
  .mtm-foot { justify-content:stretch; } .mtm-foot .btn { flex:1; }
}
@media (prefers-reduced-motion: reduce) { .mtm-row { scroll-behavior:auto; } .mtm-dots i { transition:none; } }

/* Team › People, the final design (owner approved, Oct 28; design/people-directory team-people-v8-top + team-people-v7-page,
   web/js/meet.js). The portal's warm theme: ink #1F1B16, orange #E58025, cream #FBF8F4. Top performers on a dark warm panel; below,
   a sticky bar, Leadership as a group photo, the intake team's cards and the thank-you wall. Fonts: Anton and Fraunces italic
   (SIL Open Font License, web/fonts/*-OFL.txt), served by the portal itself. */
@font-face { font-family:'Anton'; src:url('/fonts/Anton.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('/fonts/Fraunces-Italic.woff2') format('woff2'); font-style:italic; font-weight:500; font-display:swap; }
.pd { --pd-ink:var(--th-ink); --pd-text:var(--th-text); --pd-mute:var(--th-mute); --pd-line:var(--th-line); --pd-card:#FFFFFF; --pd-page:var(--th-page); --pd-soft:var(--th-soft); --pd-or:var(--th-accent); --pd-eb:var(--th-accent2); --pd-peach:var(--th-peach);
  --pd-sil-h:rgba(255,255,255,.28); --pd-sil-n:rgba(255,255,255,.22); --pd-sil-b:rgba(255,255,255,.22);
  background:var(--pd-page); border:1px solid var(--pd-line); border-radius:28px; padding:22px; display:flex; flex-direction:column; gap:0; color:var(--pd-ink); font-family:'Plus Jakarta Sans', system-ui, sans-serif; }
.pf-mega { font-family:Anton, Impact, 'Arial Narrow', sans-serif; font-weight:400; text-transform:uppercase; line-height:.82; letter-spacing:-.01em; white-space:nowrap; user-select:none; }
.pd-vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.pd-you { font-size:13px; font-weight:600; color:var(--pd-mute); }
.pd-hid { display:block; font-size:12px; font-weight:700; color:var(--pd-eb); }
.pd-hidden { opacity:.62; }
/* a photo: an arch over the backdrop; a cut-out (a PNG with its background removed): no arch and no frame, the whole figure
   standing on the bottom edge. The box (width and height) comes from where it stands. */
.pd-photo { display:block; object-fit:cover; object-position:center 30%; border-radius:98px 98px 0 0; }
.pd-photo.pd-cut { border-radius:0; object-fit:contain; object-position:center bottom; background:none; filter:drop-shadow(0 16px 18px rgba(var(--th-ink-rgb), .35)); }
.pd-sil { display:block; } .pd-sil-h { fill:var(--pd-sil-h); } .pd-sil-n { fill:var(--pd-sil-n); } .pd-sil-b { fill:var(--pd-sil-b); }

/* ---- Top performers ---- */
.tp-panel { position:relative; background:var(--th-ink); border-radius:24px; overflow:hidden; padding:58px 0 30px; color:#fff; }
.tp-halo { position:absolute; left:50%; top:120px; transform:translateX(-50%); width:900px; height:520px; border-radius:50%; background:radial-gradient(closest-side, rgba(var(--th-accent-rgb), .30), rgba(var(--th-accent-rgb), 0)); pointer-events:none; }
.tp-ring { position:absolute; left:50%; top:40px; transform:translateX(-50%); width:460px; height:460px; border-radius:50%; border:1px solid rgba(255,255,255,.07); pointer-events:none; }
.tp-head { position:relative; text-align:center; display:flex; flex-direction:column; align-items:center; gap:2px; padding:0 24px; }
.tp-eb { font-size:12px; font-weight:700; letter-spacing:.2em; color:var(--pd-peach); margin-bottom:12px; }
.tp-h { margin:0; font-size:44px; font-weight:700; letter-spacing:-.02em; line-height:1.1; color:#fff; }
.tp-serif { font-family:Fraunces, Georgia, serif; font-style:italic; font-weight:500; font-size:38px; color:var(--pd-peach); letter-spacing:0; }
.tp-ln { display:block; overflow:hidden; padding-bottom:4px; }
.tp-ln > span { display:inline-block; animation:tpLine 900ms cubic-bezier(.2,.8,.2,1) both; animation-delay:var(--d, 0ms); }
@keyframes tpLine { from { transform:translateY(105%); } to { transform:none; } }
@keyframes tpIn { from { opacity:0; transform:translateY(40px) scale(.96); } to { opacity:1; transform:none; } }
.tp-row { position:relative; margin:40px auto 0; width:1040px; max-width:calc(100% - 140px); }
.tp-arr { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.06); color:#fff; font:inherit; font-size:20px; line-height:1; cursor:pointer; }
.tp-prev { left:-60px; } .tp-next { right:-60px; }
.tp-arr:disabled { opacity:.35; cursor:default; } .tp-arr[hidden] { display:none; }
.tp-view { overflow:hidden; border-radius:22px; }
.tp-track { list-style:none; margin:0; padding:0; display:flex; gap:16px; transition:transform 700ms cubic-bezier(.65,0,.25,1); }
.tp-c { position:relative; flex:0 0 calc((100% - 32px) / 3); height:360px; border-radius:22px; overflow:hidden; outline-offset:4px; cursor:pointer;
  background:radial-gradient(85% 70% at 50% 92%, var(--th-panel1) 0%, var(--th-panel2) 45%, var(--th-panel3) 100%); animation:tpIn 800ms cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(450ms + var(--i, 0) * 110ms); }
.tp-glow { position:absolute; left:50%; top:70px; transform:translateX(-50%); width:190px; height:190px; border-radius:50%; background:radial-gradient(closest-side, rgba(var(--th-accent-rgb), .45), rgba(var(--th-accent-rgb), 0)); }
.tp-fig { position:absolute; left:50%; bottom:0; width:230px; height:292px; transform:translateX(-50%); transition:transform 700ms cubic-bezier(.2,.8,.2,1); transform-origin:50% 100%; }
.tp-fig > .tp-img { width:100%; height:100%; }
.tp-fig > .pd-photo:not(.pd-cut) { width:196px; height:240px; margin:52px auto 0; }
.tp-rank { position:absolute; left:14px; top:12px; font-family:Anton, Impact, sans-serif; font-size:28px; line-height:1; color:var(--pd-peach); }
.tp-tag { position:absolute; left:0; right:0; bottom:0; padding:40px 16px 14px; background:linear-gradient(180deg, rgba(var(--th-panel4-rgb), 0) 0%, rgba(var(--th-panel4-rgb), .88) 100%); display:flex; flex-direction:column; gap:2px; transition:opacity 300ms ease, transform 400ms ease; }
.tp-tag b { font-size:16px; } .tp-tag span { font-size:12px; font-weight:600; color:var(--pd-peach); }
.tp-lift { position:absolute; left:0; right:0; bottom:0; height:56%; box-sizing:border-box; padding:14px 16px; background:var(--th-accent2); color:#fff; display:flex; flex-direction:column; gap:5px;
  transform:translateY(101%); transition:transform 650ms cubic-bezier(.65,0,.25,1); cursor:default; }
.tp-l1 { display:flex; justify-content:space-between; align-items:baseline; gap:8px; } .tp-l1 b { font-size:18px; font-weight:800; }
.tp-proof { font-family:Anton, Impact, sans-serif; font-size:24px; line-height:1; white-space:nowrap; } .tp-proof small { font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-size:11px; font-weight:700; }
.tp-why { font-size:10px; font-weight:800; letter-spacing:.06em; line-height:1.35; }
.tp-nums { font-size:12.5px; font-weight:700; line-height:1.35; } .tp-thx { font-size:11px; font-weight:600; color:#fff; }
.tp-ai { margin:0; font-size:12.5px; line-height:1.4; color:#fff; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.tp-acts { margin-top:auto; display:grid; grid-template-columns:1fr 44px; gap:6px; }
.tp-call { min-height:44px; display:flex; align-items:center; justify-content:center; gap:6px; border-radius:11px; background:var(--th-ink); color:#fff; font-size:13px; font-weight:700; text-decoration:none; }
.tp-call.is-off { opacity:.6; }
.tp-heart { min-height:44px; border-radius:11px; border:0; background:#fff; color:var(--pd-eb); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.tp-c:hover .tp-lift, .tp-c:focus-within .tp-lift, .tp-c.is-open .tp-lift { transform:none; }
.tp-c:hover .tp-fig, .tp-c:focus-within .tp-fig, .tp-c.is-open .tp-fig { transform:translateX(-50%) translateY(-150px) scale(.72); }
.tp-c:hover .tp-tag, .tp-c:focus-within .tp-tag, .tp-c.is-open .tp-tag { opacity:0; transform:translateY(10px); }
.tp-c:focus-visible { outline:2px solid var(--pd-peach); }
.tp-bar { margin:24px auto 0; width:200px; height:2px; background:rgba(255,255,255,.15); border-radius:2px; position:relative; }
.tp-bar i { position:absolute; top:0; height:2px; border-radius:2px; background:var(--pd-peach); transition:left 600ms ease, width 600ms ease; }
.tp-note { position:relative; margin:18px auto 0; padding:0 24px; max-width:640px; text-align:center; font-size:12px; color:var(--th-line2); }
.tp-empty { position:relative; margin:34px auto 0; padding:0 24px; text-align:center; font-size:15px; color:var(--th-line); }
.tp-panel :is(.tp-arr, .tp-call, .tp-heart):focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* ---- the sticky bar ---- */
.pf-bar { position:sticky; top:74px; z-index:30;   /* under the portal's own sticky top bar (68 px) */
  margin:18px -22px 0; padding:12px 22px; background:rgba(var(--th-page-rgb), .96); border-bottom:1px solid var(--pd-line); display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; backdrop-filter:blur(6px); }
.pf-tabs { display:flex; gap:4px; background:var(--pd-soft); border-radius:999px; padding:4px; }
.pf-tab { min-height:44px; padding:0 16px; border:0; border-radius:999px; background:transparent; color:var(--pd-text); font:inherit; font-size:14px; font-weight:700; display:inline-flex; align-items:center; gap:8px; cursor:pointer; white-space:nowrap; transition:background 250ms ease, color 250ms ease; }
.pf-tab .pd-n { min-width:22px; padding:1px 7px; border-radius:999px; background:#fff; font-size:12px; text-align:center; }
.pf-tab[aria-pressed="true"] { background:var(--pd-ink); color:#fff; } .pf-tab[aria-pressed="true"] .pd-n { background:var(--th-peach); color:var(--th-ink); }
.pd-find { display:flex; align-items:center; gap:10px; min-height:44px; width:320px; max-width:100%; box-sizing:border-box; padding:0 16px; border:1px solid var(--pd-line); border-radius:999px; background:#fff; color:var(--pd-mute); }
.pd-find:focus-within { outline:2px solid var(--v6-ring, var(--th-accent2)); outline-offset:2px; }
.pd-find input { flex:1; min-width:0; border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important; font:inherit; font-size:14px; color:var(--pd-ink); height:auto !important; min-height:0 !important; padding:0 !important; }
.pf-body { display:flex; flex-direction:column; gap:40px; padding:30px 8px 8px; }
.pf-sec { display:flex; flex-direction:column; gap:18px; }
.pf-sec[hidden] { display:none; }
.pf-sh { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; } .pf-sh h3 { margin:0; font-size:46px; color:var(--pd-ink); } .pf-sh .sub { font-size:13px; color:var(--pd-mute); }
.pf-oncall { display:inline-flex; align-items:center; gap:6px; background:#E3F3E8; color:#1D6B3E; border-radius:999px; padding:4px 10px; font-size:11px; font-weight:700; }
.pf-oncall i { width:6px; height:6px; border-radius:50%; background:#2E9E57; }
.pf-ext { display:flex; align-items:baseline; gap:8px; } .pf-ext span { font-size:10px; font-weight:700; letter-spacing:.1em; color:var(--th-mute); } .pf-ext b { font-family:Anton, Impact, sans-serif; font-weight:400; font-size:30px; line-height:1; color:var(--pd-ink); }
.pf-ai { background:var(--pd-soft); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:4px; } .pf-ai p { margin:0; font-size:14px; line-height:1.45; color:var(--pd-ink); }
.pf-ai-eb { font-size:10px; font-weight:700; letter-spacing:.12em; color:var(--th-accent3); }
html.dark .pf-ai-eb { color:var(--pd-eb); }
.pf-b { min-height:44px; display:flex; align-items:center; justify-content:center; gap:7px; border-radius:12px; border:1px solid var(--pd-line); background:#fff; color:var(--pd-ink); font:inherit; font-size:14px; font-weight:700; text-decoration:none; cursor:pointer; padding:0 10px; box-sizing:border-box; }
.pf-b.pf-call { background:var(--pd-ink); border-color:var(--pd-ink); color:#fff; } .pf-b.pf-sq { width:44px; padding:0; flex:none; } .pf-b.is-off { opacity:.45; cursor:default; }

/* ---- Leadership and the intake team: Top performers' motion (owner, Oct 28 evening: "that level of movement and
   smoothness ... very pleasing to the eyes, yet very fast") ----
   The headings rise line by line (lineUp) and the cards and people rise in with a stagger (cardIn, at most 600 ms of waiting)
   when they first come into view (an IntersectionObserver in web/js/meet.js adds .is-seen; .pf-anim only when there is motion).
   Hover, focus or tap: an orange panel rises over the bottom half with the name, title, Ext., the ✦ line and Call / Email / ♥,
   and the photo lifts clear so the face stays in view. Only transform and opacity move; the photo (and its drop-shadow) sits
   still inside a moving wrapper (.rc-fig); will-change only on what moves on hover; a hover never re-creates a node. */
.pf-ln { display:inline-block; overflow:hidden; vertical-align:bottom; padding:.08em 0 .04em; }
.pf-ln > span { display:inline-block; }
.pf-anim .pf-sec[data-key]:not(.is-seen) .pf-ln > span { transform:translateY(110%); }
.pf-anim .pf-sec.is-seen:not(.no-rise) .pf-ln > span { animation:tpLine 900ms cubic-bezier(.2,.8,.2,1) backwards; }
.pf-anim .rise[data-key]:not(.is-seen) { opacity:0; }
.pf-anim .rise.is-seen:not(.no-rise) { animation:tpIn 800ms cubic-bezier(.2,.8,.2,1) backwards; animation-delay:min(calc(var(--i, 0) * 100ms), 600ms); }
.rc { position:relative; }
.rc-clip { position:absolute; inset:0; overflow:hidden; border-radius:inherit; }
.rc-fig { position:absolute; left:50%; bottom:0; width:200px; height:250px; margin-left:-100px; transform-origin:50% 100%; will-change:transform; transition:transform 650ms cubic-bezier(.2,.8,.2,1); }
.rc-fig > .pd-photo, .rc-fig > .pd-sil { position:absolute; left:0; bottom:0; display:block; width:100%; height:100%; }
.rc-fig > .pd-sil { height:auto; }
.rc-fig > .pd-photo:not(.pd-cut) { left:10px; width:180px; height:212px; }
.rc-tag { position:absolute; left:0; right:0; bottom:0; padding:40px 16px 14px; background:linear-gradient(180deg, rgba(var(--th-panel4-rgb), 0) 0%, rgba(var(--th-panel4-rgb), .88) 100%); color:#fff; display:flex; flex-direction:column; gap:2px;
  transition:opacity 300ms cubic-bezier(.2,.8,.2,1), transform 400ms cubic-bezier(.2,.8,.2,1); }
.rc-tag b { font-size:16px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rc-tag span { font-size:12px; font-weight:600; color:var(--pd-peach); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rc-lift { position:absolute; left:0; right:0; bottom:0; height:50%; box-sizing:border-box; padding:12px 14px; background:var(--th-accent2); color:#fff; display:flex; flex-direction:column; gap:4px;
  transform:translateY(101%); will-change:transform; transition:transform 650ms cubic-bezier(.65,0,.25,1); cursor:default; }
.rc-l1 { display:flex; justify-content:space-between; align-items:baseline; gap:8px; min-width:0; } .rc-l1 b { font-size:17px; font-weight:800; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rc-ext { font-family:Anton, Impact, sans-serif; font-size:22px; line-height:1; white-space:nowrap; } .rc-ext small { font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-size:10px; font-weight:800; letter-spacing:.08em; margin-right:4px; }
.rc-role { font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rc-lift .pd-hid, .rc-lift .pd-you { color:#DCE9FF; }
.rc-ai { margin:0; font-size:12.5px; line-height:1.4; color:#fff; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.rc-acts { margin-top:auto; display:grid; grid-template-columns:minmax(0, 1fr) 44px 44px; gap:6px; }
.rc-call { min-height:44px; display:flex; align-items:center; justify-content:center; gap:6px; border-radius:11px; background:var(--th-ink); color:#fff; font-size:13px; font-weight:700; text-decoration:none; }
.rc-call.is-off { opacity:.6; }
.rc-sq { min-height:44px; border-radius:11px; border:0; background:#fff; color:var(--pd-eb); display:flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; }
.rc:hover .rc-lift, .rc:focus-within .rc-lift, .rc.is-open .rc-lift { transform:none; }
/* the face stays above the panel (it covers the bottom half only): the figure lifts and settles, like the top row's */
.rc:hover .rc-fig, .rc:focus-within .rc-fig, .rc.is-open .rc-fig { transform:translateY(-120px) scale(.84); }
.rc:hover .rc-tag, .rc:focus-within .rc-tag, .rc.is-open .rc-tag { opacity:0; transform:translateY(10px); }
.rc:focus-visible { outline:2px solid var(--v6-ring, var(--th-accent2)); outline-offset:3px; }
.rc :is(.rc-call, .rc-sq):focus-visible { outline:2px solid var(--th-ink); outline-offset:2px; }

/* Leadership: one row of equal people (no back row, nobody behind anyone), the card beside the stage cross-fades */
.ld-grid { display:grid; grid-template-columns:260px minmax(0, 1fr); gap:18px; align-items:stretch; }
.ld-card { position:relative; display:grid; background:var(--pd-card); border:1px solid var(--pd-line); border-radius:24px; padding:22px; }
.ld-ci { grid-area:1 / 1; min-width:0; display:flex; flex-direction:column; gap:10px; opacity:0; transition:opacity 350ms cubic-bezier(.2,.8,.2,1); }
.ld-ci.is-in { opacity:1; } .ld-ci.is-out { pointer-events:none; }
.ld-top { display:flex; justify-content:space-between; align-items:center; gap:8px; } .ld-pos { font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--pd-eb); }
.ld-name { font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1.1; overflow-wrap:anywhere; } .ld-role { font-size:14px; color:var(--pd-mute); }
.ld-acts { margin-top:auto; display:flex; gap:8px; } .ld-acts .pf-call { flex:1 1 auto; }
.ld-card .mtm-menu { position:absolute; right:12px; bottom:66px; z-index:5; }
/* the stage (owner, Oct 29): the photos about 1.4x bigger, all the same size, side by side, five fit at 1280 px; the outline word
   behind their heads. A photo fills its box like a portrait (the shoulders trimmed at the sides with a soft fade; the face whole). */
.ld-stage { position:relative; height:430px; border-radius:24px; overflow:hidden; background:radial-gradient(70% 90% at 50% 115%, var(--th-glow) 0%, var(--th-panel1) 30%, var(--th-panel2) 70%, var(--th-ink) 100%); }
.ld-word { position:absolute; left:50%; top:30px; transform:translateX(-50%); font-size:170px; color:rgba(255,255,255,.06); -webkit-text-stroke:1.5px rgba(255,255,255,.2); }
.ld-people { position:absolute; inset:0; list-style:none; margin:0; display:flex; align-items:flex-end; justify-content:safe center; gap:10px; padding:30px 14px 14px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; scroll-behavior:smooth; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.35) transparent; }
.ld-m { position:relative; flex:0 0 clamp(120px, calc((100% - (var(--n, 1) - 1) * 10px) / var(--n, 1)), 230px); height:330px; border-radius:20px; cursor:pointer; scroll-snap-align:center; color:#fff;
  outline-offset:4px; -webkit-tap-highlight-color:transparent; }
.ld-feet { position:absolute; left:12%; right:12%; bottom:-6px; height:22px; border-radius:50%; background:radial-gradient(closest-side, rgba(var(--th-panel4-rgb), .55), rgba(var(--th-panel4-rgb), 0)); pointer-events:none; }
/* the moving part: the person lifts and grows to 1.06 (from the floor); the rest ease back and dim. Only transform and opacity. */
.ld-lift { position:absolute; inset:0; transform-origin:50% 100%; will-change:transform; transition:transform 420ms cubic-bezier(.2,.8,.2,1), opacity 420ms cubic-bezier(.2,.8,.2,1); }
.ld-rim { position:absolute; left:-8%; right:-8%; top:4%; bottom:30px; border-radius:50%; pointer-events:none; opacity:0; transform:scale(.86);
  background:radial-gradient(closest-side, rgba(var(--th-accent-rgb), .8) 0%, rgba(var(--th-accent-rgb), .45) 50%, rgba(var(--th-accent-rgb), 0) 100%); transition:opacity 420ms cubic-bezier(.2,.8,.2,1), transform 420ms cubic-bezier(.2,.8,.2,1); }
.ld-fig { position:absolute; left:0; right:0; bottom:0; height:270px; overflow:hidden; border-radius:0 0 20px 20px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); }
.ld-fig > .pd-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 100%; }
.ld-fig > .pd-photo.pd-cut { filter:none; }   /* no drop-shadow on what sits in a moving part (the feet's ellipse is the shadow) */
.ld-fig > .pd-photo:not(.pd-cut) { inset:auto 8% 0; width:84%; height:88%; object-position:50% 30%; border-radius:999px 999px 0 0; }
.ld-fig > .pd-sil { position:absolute; left:50%; bottom:0; width:auto; height:100%; translate:-50% 0; }
.ld-tag { position:absolute; left:0; right:0; bottom:0; padding:34px 8px 12px; text-align:center; border-radius:0 0 20px 20px; background:linear-gradient(180deg, rgba(var(--th-panel4-rgb), 0) 0%, rgba(var(--th-panel4-rgb), .82) 100%);
  transition:transform 420ms cubic-bezier(.2,.8,.2,1); }
.ld-nm { display:block; font-size:15px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ld-ti { display:block; font-size:11.5px; font-weight:600; color:var(--pd-peach); opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity 420ms cubic-bezier(.2,.8,.2,1); }
.ld-m.is-on .ld-rim { opacity:.35; transform:scale(.94); }
.ld-m:hover .ld-lift, .ld-m:focus-visible .ld-lift { transform:translateY(-10px) scale(1.06); }
.ld-m:hover .ld-rim, .ld-m:focus-visible .ld-rim { opacity:1; transform:none; }
.ld-m:hover .ld-tag, .ld-m:focus-visible .ld-tag { transform:translateY(-6px); } .ld-m:hover .ld-ti, .ld-m:focus-visible .ld-ti { opacity:1; }
.ld-people:has(.ld-m:hover, .ld-m:focus-visible) .ld-m:not(:hover):not(:focus-visible) .ld-lift { opacity:.55; transform:scale(.97); }
.ld-m:focus-visible { outline:2px solid #fff; }

.pd a.tp-call, .pd a.pf-call, .pd a.rc-call, .pd a.tp-call:visited, .pd a.pf-call:visited, .pd a.rc-call:visited { color:#fff; }
.pd a.rc-sq, .pd a.rc-sq:visited { color:var(--pd-eb); }
html.dark .pd a.pf-call, html.dark .pd a.pf-call:visited { color:var(--th-dpage); }
.pd a.pf-b.pf-sq { color:var(--pd-ink); }

/* ---- the intake team: the Top performers card on the person's colour; the face in view at rest and on hover ---- */
.tc-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:18px; }
.tc { --g1:var(--th-ink); --g2:var(--th-panel2); --g3:var(--th-panel1); height:380px; border-radius:24px; background:var(--g1); cursor:pointer; outline-offset:4px; }
/* the Intake team cards, one blue each (design lead, Oct 29: no mustard, green, purple or red; white text AA on the deep shade).
   The stored keys stay (orange = royal, green = teal, yellow = sky, purple = indigo, blue = steel, red = slate blue, dark = navy) */
.pf-g-orange { --g1:var(--th-accent2); --g2:var(--th-panel1); --g3:var(--th-glow); } .pf-g-green { --g1:#0E5C6B; --g2:#1C8293; --g3:#86D0DA; } .pf-g-yellow { --g1:#1A5F99; --g2:#2B86C9; --g3:#9CD3F5; }
.pf-g-purple { --g1:#34368F; --g2:#5154B8; --g3:#ABADEC; } .pf-g-blue { --g1:#33506E; --g2:#4C6A8C; --g3:#9DB6D2; } .pf-g-red { --g1:#3E4B7E; --g2:#5D6BA3; --g3:#B3BDE3; } .pf-g-dark { --g1:var(--th-ink); --g2:var(--th-panel2); --g3:var(--th-panel1); }
.tc-stage { position:absolute; inset:0; background:radial-gradient(90% 75% at 50% 90%, var(--g3) 0%, var(--g2) 45%, var(--g1) 100%); }
.tc-mega { position:absolute; left:50%; top:18px; transform:translateX(-50%); color:rgba(255,255,255,.18); }
.tc-badges { position:absolute; left:12px; top:12px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.tc-on { background:#fff; }
.tc-thx { background:#fff; border-radius:999px; padding:4px 10px; font-size:11px; font-weight:700; color:var(--pd-eb); }
.tc-more { position:absolute; z-index:3; top:8px; right:8px; width:44px; height:44px; border:0; border-radius:12px; background:rgba(255,255,255,.88); color:var(--pd-ink); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.tc .mtm-menu { position:absolute; top:56px; right:8px; z-index:5; }
/* click to flip (owner and their boss, Oct 29): the card turns over (rotateY, transform only); the face away is hidden; the ⋯ stays on top */
.tc { perspective:1400px; }
.tc-flip { position:absolute; inset:0; border-radius:inherit; transform-style:preserve-3d; transition:transform 550ms cubic-bezier(.2,.8,.2,1); }
.tc.is-flipped .tc-flip { transform:rotateY(180deg); }
.tc-front, .tc-back { -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.tc-back { position:absolute; inset:0; border-radius:inherit; transform:rotateY(180deg); box-sizing:border-box; padding:16px 16px 14px; overflow:hidden; display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(160deg, var(--g1) 0%, var(--th-ink) 100%); color:#fff; }
.tc-more { transform:translateZ(1px); }
.tc-bh { display:flex; align-items:center; gap:10px; min-width:0; padding-right:48px; } .tc-bh > div { display:flex; flex-direction:column; min-width:0; }
.tc-bh b { font-size:16px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tc-bh span { font-size:11.5px; font-weight:600; color:var(--pd-peach); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-bh .pd-you { color:rgba(255,255,255,.7); }
.tc-back .pf-face.pf-sm { width:44px; height:44px; border:2px solid rgba(255,255,255,.85); background:var(--g3); }
.tc-beb { font-size:10.5px; font-weight:800; letter-spacing:.14em; color:rgba(255,255,255,.72); margin-top:4px; }
.tc-set { letter-spacing:0; font-weight:600; text-transform:none; color:var(--pd-peach); margin-left:4px; }
.tc-chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; max-height:132px; overflow:hidden; }
.tc-chips li { padding:6px 11px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); font-size:12.5px; font-weight:700; color:#fff; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.tc-chips li b { color:var(--pd-peach); font-weight:800; }
.tc-chips li:first-child { background:var(--pd-or); border-color:var(--pd-or); color:var(--th-ink); } .tc-chips li:first-child b { color:var(--th-ink); }
.tc-line { margin:0; font-size:13.5px; line-height:1.4; color:rgba(255,255,255,.92); }
.tc-bacts { margin-top:auto; }
.tc-chips abbr.gl { border-bottom:0; } .tc-line abbr.gl { border-bottom-color:rgba(255,255,255,.45); }   /* the glossary's dotted line: not inside a chip */
.tc-hint { font-size:10.5px; color:rgba(255,255,255,.55); text-align:center; }
.tc.is-flipped:focus-visible { outline:2px solid var(--pd-or); outline-offset:3px; }

/* ---- Hidden people (managers) ---- */
.pf-hidbtn { min-height:44px; padding:0 16px; border-radius:999px; border:1px dashed var(--pd-line); background:transparent; color:var(--pd-text); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.pf-hidbtn:focus-visible { outline:2px solid var(--v6-ring, var(--th-accent2)); outline-offset:2px; }
.pf-hidsheet { max-width:480px; }
.pf-hidlist { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.pf-hidlist li { display:grid; grid-template-columns:48px minmax(0, 1fr) auto; gap:12px; align-items:center; }
.pf-hidlist li b { display:block; overflow-wrap:anywhere; } .pf-hidlist .btn { min-height:44px; }
.pf-hidface { width:48px; height:48px; border-radius:50%; overflow:hidden; background:var(--th-panel2); display:flex; align-items:flex-end; justify-content:center; }
.pf-hidface .pf-hidimg { width:44px; height:44px; } .pf-hidface .pd-photo:not(.pd-cut) { width:48px; height:48px; border-radius:50%; }

/* ---- the thank-you wall ---- */
.pf-wall { display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; background:var(--th-ink); color:#fff; border-radius:24px; padding:24px 28px; }
.pf-wall > div { display:flex; flex-direction:column; gap:4px; min-width:0; }
.pf-wall-eb { font-size:12px; font-weight:700; letter-spacing:.16em; color:var(--pd-peach); }
.pf-wall p { margin:0; font-size:22px; font-weight:800; color:#fff; } .pf-wall-last { font-size:13px; color:var(--th-line2); overflow-wrap:anywhere; }
.pd-send { min-height:48px; padding:0 22px; border:0; border-radius:999px; background:var(--pd-or); color:var(--th-ink); font:inherit; font-size:15px; font-weight:800; cursor:pointer; white-space:nowrap; }
.pf-lines { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; font-size:12.5px; color:var(--pd-mute); }
.pf-lines > span { flex:1 1 320px; display:flex; gap:6px; align-items:center; }
.pf-sw { min-height:44px; padding:0 16px; border-radius:999px; border:1px solid var(--pd-line); background:#fff; color:var(--pd-ink); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.pf-sw[aria-pressed="true"] { background:var(--pd-ink); border-color:var(--pd-ink); color:#fff; }
.pf-cap { display:flex; align-items:center; gap:8px; min-height:44px; font-weight:600; color:var(--pd-text); } .pf-cap input { width:76px; min-height:40px; }
.pd-none { margin:0; }
.pd :is(.pf-tab, .pf-b, .pd-send, .pd-more, .pf-sw):focus-visible { outline:2px solid var(--v6-ring, var(--th-accent2)) !important; outline-offset:2px; }
.pf-wall .pd-send:focus-visible { outline-color:#fff !important; }

/* a tablet */
@media (max-width: 1100px) {
  .tp-row { max-width:calc(100% - 120px); }
  .ld-grid { grid-template-columns:260px minmax(0, 1fr); } .ld-word { font-size:120px; }
}
/* a phone (600 px and under): the top row swipes (one and a half cards), Leadership is a swipe row of people, one team card per row */
@media (max-width: 600px) {
  .pd { padding:10px; border-radius:20px; }
  .tp-panel { padding:34px 0 22px; border-radius:20px; } .tp-h { font-size:27px; } .tp-serif { font-size:23px; } .tp-halo { width:560px; }
  .tp-row { width:auto; max-width:none; margin:26px 0 0; } .tp-arr { display:none; }
  .tp-view { overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 16px; padding:0 16px; border-radius:0; scrollbar-width:none; overscroll-behavior-x:contain; }
  .tp-view::-webkit-scrollbar { display:none; }
  .tp-track { transform:none !important; gap:12px; } .tp-track::after { content:''; flex:0 0 4px; }
  .tp-c { flex:0 0 62%; height:340px; scroll-snap-align:start; }
  .tp-lift { height:66%; padding:12px 14px; gap:4px; } .tp-ai { -webkit-line-clamp:2; }
  .tp-c:hover .tp-fig, .tp-c:focus-within .tp-fig, .tp-c.is-open .tp-fig { transform:translateX(-50%) translateY(-176px) scale(.6); }
  .pf-bar { top:60px; margin:12px -10px 0; padding:10px; flex-direction:column; align-items:stretch; }
  .pf-bar > * { min-width:0; max-width:100%; box-sizing:border-box; } .pf-tabs { overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap; } .pf-tabs::-webkit-scrollbar { display:none; }
  .pd-find { width:100%; }
  .pf-body { padding:22px 4px 4px; gap:30px; } .pf-sh h3 { font-size:36px; }
  .ld-grid { grid-template-columns:minmax(0, 1fr); } .ld-card { order:2; min-width:0; } .ld-stage { min-width:0; }
  .ld-stage { order:1; height:auto; background:none; border-radius:0; overflow:visible; } .ld-word { display:none; }
  .ld-people { position:relative; inset:auto; justify-content:flex-start; gap:12px; padding:4px 2px 8px; scroll-snap-type:x mandatory; scrollbar-width:none; } .ld-people::-webkit-scrollbar { display:none; }
  .ld-m { flex:0 0 62%; height:360px; scroll-snap-align:start; background:radial-gradient(90% 75% at 50% 90%, var(--th-panel1) 0%, var(--th-panel2) 60%, var(--th-ink) 100%); } .ld-feet { display:none; }
  .ld-fig { height:300px; } .ld-m.is-on { box-shadow:0 0 0 3px var(--pd-or); } .ld-m.is-on .ld-rim { opacity:.8; transform:none; }
  .tc-grid { grid-template-columns:1fr; gap:14px; }
  .pf-wall { flex-direction:column; align-items:stretch; padding:20px; } .pf-wall p { font-size:19px; }
}
/* no motion when the person asked for less */
@media (prefers-reduced-motion: reduce) {
  .tp-ln > span, .tp-c, .pf-ln > span, .rise { animation:none !important; }
  .tp-track, .tp-fig, .tp-lift, .tp-tag, .tp-bar i, .pf-tab, .ld-m, .ld-lift, .ld-rim, .ld-tag, .ld-ti, .ld-ci, .tc, .rc-fig, .rc-lift, .rc-tag { transition:none !important; }
  .ld-m .ld-lift, .ld-m .ld-tag { transform:none !important; }   /* calm: the rim light and the dimming still show who it is, nothing moves */
  .pf-anim .rise, .pf-anim .pf-ln > span { opacity:1 !important; transform:none !important; }
  .ld-people { scroll-behavior:auto; }
  /* the flip becomes a quick cross-fade: nothing turns */
  .tc-flip, .tc.is-flipped .tc-flip { transform:none !important; transition:none !important; }
  .tc-back { transform:none; } .tc-front, .tc-back { backface-visibility:visible; -webkit-backface-visibility:visible; transition:opacity 160ms linear !important; }
  .tc-back { opacity:0; } .tc.is-flipped .tc-back { opacity:1; } .tc.is-flipped .tc-front { opacity:0; }
}
/* dark */
html.dark .pd { --pd-ink:var(--th-dtext); --pd-text:var(--th-dmute); --pd-mute:var(--th-dmute); --pd-line:rgba(255,255,255,.1); --pd-card:var(--th-dcard); --pd-page:var(--th-dpage); --pd-soft:var(--th-dsoft); --pd-eb:var(--th-daccent); }
html.dark .tp-panel, html.dark .pf-wall { background:var(--th-dpage2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
html.dark .pf-bar { background:rgba(var(--th-dpage-rgb), .96); }
html.dark .pf-tab .pd-n { background:var(--th-dpage); } html.dark .pf-tab[aria-pressed="true"] { background:var(--th-dtext); color:var(--th-dpage); } html.dark .pf-tab[aria-pressed="true"] .pd-n { background:var(--pd-or); color:var(--th-dpage); }
html.dark .pd-find, html.dark .pf-b, html.dark .pf-sw { background:var(--th-dsoft); }
html.dark .pf-b.pf-call { background:var(--pd-or); border-color:var(--pd-or); color:var(--th-dpage); }
html.dark .pf-sw[aria-pressed="true"] { background:var(--th-dtext); border-color:var(--th-dtext); color:var(--th-dpage); }
html.dark .pf-oncall, html.dark .tc-on { background:var(--th-dpage); color:#7FD3A0; } html.dark .pf-oncall i { background:#5CC487; }
html.dark .tc-thx { background:var(--th-dpage); color:var(--th-daccent); } html.dark .tc-more { background:rgba(var(--th-dcard-rgb), .88); }
html.dark .pf-ext span { color:var(--th-dmute); }
/* My day: "♥ <name> thanked you" (once) */
.tn { display:flex; align-items:center; gap:10px; margin:0 0 14px; padding:10px 8px 10px 16px; border-radius:14px; background:var(--th-tint); color:#16254A; font-size:14px; }
.tn-h { color:var(--th-accent); font-size:18px; } .tn-t { flex:1; min-width:0; overflow-wrap:anywhere; }
.tn-x { width:44px; height:44px; border:0; border-radius:10px; background:transparent; color:inherit; font-size:22px; cursor:pointer; }
.tn-x:focus-visible { outline:2px solid var(--v6-ring, var(--th-accent2)); outline-offset:2px; }
html.dark .tn { background:var(--th-dcard); color:var(--th-dtext); }
/* the upload's "Remove the plain background" (web/js/meet.js cropPhoto) */
.pf-bg { margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.pf-bg .pf-chk { min-height:44px; display:flex; align-items:center; gap:10px; font-weight:600; }
.pf-bgprev { display:flex; gap:12px; align-items:center; } .pf-bgprev canvas { width:140px; height:140px; border-radius:12px; flex:none; }
/* the managers' ⋯ menu on a People card (Upload / Replace photo, Use the original, Remove, Hide; Oct 28): the same look as Meet the
   team's menu wherever the card is, 44 px rows on a desk and a phone */
.mtm-menu .mtm-mi { display:flex; align-items:center; min-height:44px; width:100%; padding:0 12px; border:0; border-radius:12px; background:transparent; color:var(--ink, var(--th-ink)); font:inherit; font-size:14px; font-weight:600; text-align:left; cursor:pointer; }
.mtm-menu .mtm-mi:hover, .mtm-menu .mtm-mi:focus-visible { background:var(--b-soft, var(--th-soft)); }
.mtm-menu .mtm-mi:focus-visible { outline:2px solid var(--v6-ring, var(--th-accent2)); outline-offset:-2px; }
html.dark .mtm-menu .mtm-mi { color:var(--th-dtext); } html.dark .mtm-menu .mtm-mi:hover, html.dark .mtm-menu .mtm-mi:focus-visible { background:rgba(255,255,255,.08); }
/* My profile: "How to take your photo" (Oct 28 overnight) */
.pf-howto { margin-top:10px; } .pf-howto summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-weight:700; color:var(--b-ink2, #3E4459); }
.pf-howto summary:focus-visible { outline:2px solid var(--v6-ring, var(--th-accent2)); outline-offset:2px; border-radius:8px; }
.pf-howto-b { display:flex; gap:14px; align-items:flex-start; padding:4px 0 6px; } .pf-howto-pic { width:96px; height:96px; flex:none; }
.pf-howto ul { margin:0; padding-left:18px; display:grid; gap:4px; font-size:13.5px; line-height:1.4; }
@media (max-width: 640px) { .pf-howto-b { flex-direction:column; } .pf-howto-pic { width:84px; height:84px; } }
/* phones (Oct 28 overnight): the sticky People bar stays under the portal's bottom menu (z-index 25), which it covered at 360 px */
@media (max-width: 640px) { .pf-bar { z-index:20; } }
/* phones: the three group tabs (Everyone / Intake team / On a call) share the width instead of running off the right edge at
   360-390 px; a long name wraps to two lines inside its 44 px tab */
@media (max-width: 640px) {
  .pf-bar .pf-tabs { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); width:100%; box-sizing:border-box; }
  .pf-bar .pf-tab { white-space:normal; justify-content:center; text-align:center; padding:4px 6px; font-size:13px; line-height:1.15; gap:5px; flex-wrap:wrap; }
  .pf-bar .pf-tab .pd-n { min-width:20px; padding:1px 6px; font-size:11px; }
}
/* the ⋯ menu's "Edit title" (owner, Oct 29): a 40-character box and its count; My profile shows the title read only */
.mtm-in { display:block; width:100%; min-height:44px; box-sizing:border-box; margin:6px 0 2px; padding:0 12px; border:1px solid var(--pd-line, var(--th-line)); border-radius:10px; font:inherit; font-size:14px; }
.mtm-cnt { display:block; font-size:11px; margin-bottom:8px; }
.pf-title { margin:2px 0 10px; } .pf-title span { color:var(--pd-mute, var(--th-mute)); }
html.dark .mtm-in { background:var(--th-dpage); color:var(--th-dtext); border-color:rgba(255,255,255,.15); }
/* dark: My profile's title note and "How to take your photo" readable (blue theme pass, Oct 29; both were under 3.5:1) */
html.dark .pf-title span { color:var(--th-dmute); } html.dark .pf-howto summary { color:var(--th-dtext); }

/* Marketer reports (owner, Oct 27): web/js/marketers.js */
.mk-pick { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(220px, 1.3fr) minmax(170px, 1fr) minmax(200px, 1.4fr) auto; gap: 12px; align-items: end; padding: 16px; margin-bottom: 14px; }
.mk-pick .field { margin: 0; }
.mk-act { display: flex; gap: 8px; }
.mk-when { margin: 4px 0 10px; }
.mk-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.mk-tile { background: var(--card, #fff); border: 1px solid var(--line, var(--th-line)); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.mk-tile b { font-size: 24px; line-height: 1.1; }
.mk-tile span { font-size: 13px; color: var(--muted, #5d6670); }
.mk-g { margin-bottom: 18px; }
.mk-t { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--card, #fff); border-radius: 12px; overflow: hidden; }
.mk-t th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--muted, #5d6670); padding: 8px 10px; border-bottom: 1px solid var(--line, var(--th-line)); }
.mk-t td { padding: 9px 10px; border-bottom: 1px solid var(--line, var(--th-soft2)); vertical-align: top; }
.mk-t td.mk-c { max-width: 420px; color: var(--muted, #48515a); }
.mk-mail { padding: 16px; margin-top: 18px; }
.mk-mt input { width: 100%; min-width: 160px; }
@media (max-width: 900px) { .mk-pick { grid-template-columns: 1fr 1fr; } .mk-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .mk-pick { grid-template-columns: 1fr; }
  .mk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-t thead { display: none; }
  .mk-t, .mk-t tbody, .mk-t tr, .mk-t td { display: block; width: 100%; }
  .mk-t tr { border-bottom: 1px solid var(--line, var(--th-line)); padding: 8px 0; }
  .mk-t td { border: 0; padding: 3px 12px; }
  .mk-t td[data-l]::before { content: attr(data-l) ": "; color: var(--muted, #5d6670); font-size: 12.5px; }
  .mk-t td.mk-c { max-width: none; }
}
@media (min-width: 601px) {
  .mk-t:not(.mk-mt) { table-layout: fixed; }
  .mk-t:not(.mk-mt) th:nth-child(1) { width: 14%; } .mk-t:not(.mk-mt) th:nth-child(2) { width: 7%; } .mk-t:not(.mk-mt) th:nth-child(3) { width: 11%; } .mk-t:not(.mk-mt) th:nth-child(4) { width: 8%; }
  .mk-t:not(.mk-mt) th:nth-child(5) { width: 14%; } .mk-t:not(.mk-mt) th:nth-child(6) { width: 24%; }
}
.mk-left { margin: -4px 0 16px; font-size: 13.5px; } .mk-left summary { cursor: pointer; color: var(--muted, #5d6670); padding: 4px 0; } .mk-left table { margin-top: 6px; }
.mk-pick #mkFind { width: 100%; box-sizing: border-box; height: auto; min-height: 36px; border-radius: 10px; font-size: 14px; }

/* "Possible duplicate" (design lead, Oct 27): amber, not red; "possible" is no error. web/js/ui.js, web/js/detail.js */
.tag.t-dup { background:#FFF4D6 !important; color:#7A5600 !important; border:1px solid #F1DC9C !important; }
.cb-line.dup-line { background:#FFF4D6 !important; border:1px solid #F1DC9C; color:#5C4300 !important; }
.cb-line.dup-line .btn { margin:2px 4px 0 0; }
html.dark .tag.t-dup { background:rgba(224,181,74,.16) !important; color:#F2D58A !important; border-color:rgba(224,181,74,.35) !important; }
html.dark .cb-line.dup-line { background:rgba(224,181,74,.12) !important; border:1px solid rgba(224,181,74,.3); color:#F2D58A !important; }
html.dark .cb-line.dup-line .btn { border-color:rgba(224,181,74,.45); color:#F2D58A; }

/* Data quality (design lead, Oct 27): web/js/data-quality.js */
.dq-grid { display:grid; gap:12px; }
.dq-c { padding:14px 18px; }
.dq-c > summary { display:flex; align-items:baseline; gap:12px; cursor:pointer; list-style:none; }
.dq-c > summary::-webkit-details-marker { display:none; }
.dq-n { font-size:24px; min-width:48px; color:var(--th-accent2); }
.dq-ok .dq-n { color:var(--ok, #1E6B3F); }
.dq-l { font-weight:600; font-size:15px; }
.dq-fix { margin:8px 0 10px; font-size:13.5px; color:var(--muted, #5d6670); }
.dq-t { width:100%; border-collapse:collapse; font-size:14px; }
.dq-t th { text-align:left; font-size:12.5px; font-weight:600; color:var(--muted, #5d6670); padding:6px 8px; border-bottom:1px solid var(--line, var(--th-line)); }
.dq-t td { padding:7px 8px; border-bottom:1px solid var(--line, var(--th-soft2)); }
.linkbtn { background:none; border:0; padding:0; color:var(--link, #1D4E73); font:inherit; font-weight:600; cursor:pointer; text-decoration:underline; }
@media (max-width: 600px) { .dq-t thead { display:none; } .dq-t, .dq-t tbody, .dq-t tr, .dq-t td { display:block; width:100%; } .dq-t tr { border-bottom:1px solid var(--line, var(--th-line)); padding:6px 0; } .dq-t td { border:0; padding:2px 0; } .dq-t td[data-l]::before { content:attr(data-l) ": "; color:var(--muted, #5d6670); font-size:12.5px; } }
/* Data › Record check (Oct 30): web/js/record-check.js */
.rc-tabs { display:flex; gap:4px; margin-bottom:8px; }
.rc-tabs a { padding:4px 12px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--muted, #5d6670); text-decoration:none; border:1px solid var(--line, var(--th-line)); }
.rc-tabs a.on { color:var(--th-accent2); border-color:currentColor; }
.rc-sum { margin:0 0 10px; }
.rc-act { padding:4px 10px; font-size:13px; white-space:nowrap; }
.rc-c > summary { flex-wrap:wrap; }
.rc-show { margin-left:auto; font-size:13.5px; font-weight:600; color:var(--link, #1D4E73); white-space:nowrap; }
.rc-c[open] .rc-show { visibility:hidden; }
.rc-info { opacity:.62; }
.rc-info .dq-n { color:var(--muted, #5d6670); }
.rc-find { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:6px 0 12px; }
.rc-find label { font-weight:600; font-size:14px; }
.rc-find input { width:160px; max-width:100%; padding:6px 10px; border:1px solid var(--line, var(--th-line)); border-radius:8px; font:inherit; background:transparent; color:inherit; }
.rc-case { padding:14px 18px; margin-bottom:12px; }
.rc-case-h { display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; margin-bottom:8px; }
.rc-notes { margin-top:10px; }
.rc-notes .dq-l { display:block; margin-bottom:4px; }
.dn-step-by { font-size:12.5px; }
.wnk { font-weight:400; color:var(--muted, #5d6670); }
.rc-goal { font-size:12.5px; color:var(--muted, #5d6670); white-space:nowrap; }
.rc-up { color:var(--bad, #9b2c2c); } .rc-down { color:var(--ok, #1E6B3F); }
.rc-fixbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px; }
.rc-fixbar .sub { margin-right:auto; }
/* Activity log (web/js/activity.js) */
.act-f { grid-template-columns: minmax(180px, 1.2fr) minmax(180px, 1.2fr) minmax(140px, 1fr) minmax(140px, 1fr) auto; }
.act-d { color: var(--muted, #5d6670); font-size: 13px; }
.act-pg { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }

/* ---- Record check, the simple page (weekend plan, owner Fri Oct 30: "make it user friendly"; web/js/record-simple.js) ---- */
.rs { max-width:1080px; }
.rs h1 { margin:4px 0 12px; }
.rs-top { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; padding:18px 22px; border-radius:20px; margin-bottom:16px; }
.rs-top + .rs-checked { margin:-8px 0 16px 6px; font-size:13px; }
.rs-sum { margin:-8px 0 12px 6px; font-size:14px; font-weight:600; }
.rs-kept { margin-top:16px; padding:0 14px; } .rs-kept summary { cursor:pointer; min-height:44px; display:flex; align-items:center; color:var(--th-mute); }
.rs-kgcrs { display:flex; flex-wrap:wrap; gap:4px 10px; max-height:260px; overflow:auto; padding-bottom:12px; }
.rs-top b { font-size:24px; font-weight:800; letter-spacing:-.01em; } .rs-top span { font-size:15px; }
.rs-ok { background:#E2F5EA; color:#14532D; } .rs-need { background:var(--th-tint); color:var(--th-ink); }
.rs-list { display:flex; flex-direction:column; gap:14px; }
.rs-card { background:rgba(var(--th-white-rgb), .78); border:1px solid #fff; box-shadow:0 10px 30px rgba(var(--th-ink-rgb), .08); border-radius:20px; padding:18px 20px; }
.rs-ch { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin-bottom:12px; }
.rs-gcr { font-size:18px; font-weight:800; } .rs-what { font-size:15px; font-weight:600; color:var(--th-text); }
.rs-sides { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:stretch; }
.rs-side { border-radius:14px; padding:12px 14px; border:1px solid var(--th-line); background:var(--th-white); }
.rs-hha { border-color:var(--th-accent); box-shadow:inset 0 0 0 1px var(--th-accent); }
.rs-sh { font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--th-mute); margin-bottom:6px; } .rs-hha .rs-sh { color:var(--th-accent2); }
.rs-kv { display:flex; justify-content:space-between; gap:10px; padding:4px 0; font-size:14.5px; } .rs-kv span { color:var(--th-mute); } .rs-kv b { font-weight:700; color:var(--th-ink); text-align:right; }
.rs-arrow { align-self:center; font-size:22px; color:var(--th-accent); }
.rs-prev { margin:12px 0 0; font-size:14px; color:var(--th-text); } .rs-prev::before { content:'This will change: '; font-weight:700; }
.rs-prev:empty { display:none; }
.rs-acts { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:12px; } .rs-acts .btn { min-height:44px; height:auto; white-space:normal; text-align:left; line-height:1.3; padding-top:10px; padding-bottom:10px; }
.rs-leave, .rs-undo1, .rs-undo { min-height:44px; padding:0 6px; font-weight:600; }
.rs-card.is-done { border-color:#BFE6CC; } .rs-done { font-weight:700; color:#1E7A45; }
.rs-card.is-left { opacity:.7; }
.rs-today { margin-top:20px; padding:16px 20px; border-radius:20px; } .rs-today h2 { margin:0 0 8px; font-size:18px; }
.rs-today ul { list-style:none; margin:0; padding:0; } .rs-today li { display:grid; grid-template-columns:70px 1fr auto; gap:10px; align-items:center; padding:8px 0; border-top:1px solid var(--th-line); font-size:14px; }
.rs-today li:first-child { border-top:0; } .rs-tt { color:var(--th-mute); font-variant-numeric:tabular-nums; }
.rs-details { margin-top:20px; } .rs-details summary { cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:700; color:var(--th-mute); }
.rs-dbody { padding:6px 0 10px; display:flex; flex-direction:column; gap:8px; }
html.dark .rs-ok { background:#163A26; color:#BFF0D1; } html.dark .rs-need { background:var(--th-daccent2); color:var(--th-dtext); }
html.dark .rs-card { background:rgba(var(--th-dcard-rgb), .88); border-color:var(--th-dline); box-shadow:none; }
html.dark .rs-side { background:var(--th-dsoft); border-color:var(--th-dline); } html.dark .rs-hha { border-color:var(--th-daccent); box-shadow:inset 0 0 0 1px var(--th-daccent); }
html.dark .rs-kv b, html.dark .rs-gcr { color:var(--th-dtext); } html.dark .rs-kv span, html.dark .rs-sh, html.dark .rs-tt { color:var(--th-dmute); } html.dark .rs-hha .rs-sh { color:var(--th-daccent); }
html.dark .rs-what, html.dark .rs-prev { color:var(--th-dtext); } html.dark .rs-done { color:#7FD3A0; } html.dark .rs-card.is-done { border-color:#2C6B45; }
html.dark .rs-today li { border-color:var(--th-dline); }
@media (max-width:600px) {
  .rs-top b { font-size:20px; } .rs-sides { grid-template-columns:1fr; } .rs-arrow { transform:rotate(90deg); justify-self:center; }
  .rs-today li { grid-template-columns:1fr auto; } .rs-tt { grid-column:1 / -1; }
}
.rs-writers { margin-top:16px; padding:0 14px; } .rs-writers summary { cursor:pointer; min-height:44px; display:flex; align-items:center; color:var(--th-mute); } .rs-wl { list-style:none; padding:0; display:grid; gap:8px; } .rs-wl li { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.rs-health { margin:-8px 0 14px 6px; font-size:13px; }

/* New referrals (#intake, weekend plan Sat Oct 31): the blue glass look of the design lead's IntakeV1 board. Glass cards use the
   tokens from glass.css (--gl-*) when the bento look is on, plain white cards otherwise. Dark mode: html.dark. Phone: one column. */
main .in { display:flex; flex-direction:column; gap:14px; }
main .in [hidden] { display:none !important; }
main .in h1 { margin:0; font-size:22px; color:var(--th-ink); }
main .in h2 { margin:0 0 8px; font-size:15px; color:var(--th-ink); }
main .in .sub { color:var(--th-mute); font-size:13px; }
main .in-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
main .in-strip { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
main .in-glass { background:var(--gl-bg, #fff); border-radius:16px; padding:14px 16px; box-shadow:inset 0 0 0 1px var(--gl-edge, var(--th-line)), inset 0 1px 0 var(--gl-hi, transparent), var(--gl-shadow, 0 4px 14px rgba(var(--th-ink-rgb), .06)); }

/* pills: the meaning colours stay (green done, amber warning, red error); blue is the theme */
.in-pill { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:600; line-height:1.3; white-space:nowrap; text-decoration:none; border:1px solid transparent; }
.in-blue { background:var(--th-tint); color:var(--th-accent2); }
.in-navy { background:var(--th-ink); color:#fff; }
.in-green { background:#E3F6EA; color:#17663A; }
.in-amber { background:#FFF2D9; color:#8A5300; }
.in-red { background:#FDE4E4; color:#A61B1B; }
.in-grey { background:var(--th-soft2); color:var(--th-mute); }
.in-violet { background:#EEE8FF; color:#5A3DB8; }
main a.in-pill.in-navy, main a.in-pill.in-navy:visited { color:#fff; }
html.dark main a.in-pill.in-navy { color:var(--th-dpage2); }
.in-mail { background:#fff; color:var(--th-accent2); border-color:var(--th-line2); }
.in-rc { background:#FFF0E6; color:#A44A10; border-color:#F5CFB4; }

/* tabs */
main .in-tabs { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--th-line); }
main .in-tabs a { padding:8px 12px; border-radius:10px 10px 0 0; color:var(--th-mute); text-decoration:none; font-weight:600; font-size:14px; min-height:44px; box-sizing:border-box; display:inline-flex; align-items:center; }
main .in-tabs a[aria-current="page"] { color:var(--th-accent2); box-shadow:inset 0 -3px 0 var(--th-accent); }

/* queue */
main .in-chips { display:flex; gap:6px; flex-wrap:wrap; }
main .in-chip { min-height:36px; padding:6px 12px; border-radius:999px; border:1px solid var(--th-line2); background:#fff; color:var(--th-text); font:inherit; font-size:13px; cursor:pointer; }
main .in-chip b { margin-left:4px; }
main .in-chip[aria-pressed="true"] { background:var(--th-accent2); border-color:var(--th-accent2); color:#fff; }
main .in-table { padding:6px 0; overflow:hidden; }
main .in-row { display:grid; grid-template-columns:70px 1.3fr 1.2fr .8fr 1fr 1.2fr .9fr 1.4fr; gap:10px; align-items:center; padding:10px 16px; color:var(--th-text); text-decoration:none; border-top:1px solid var(--th-line); font-size:13px; }
main .in-row:first-child { border-top:0; }
main a.in-row:hover { background:rgba(var(--th-accent-rgb), .06); }
main .in-th { font-size:12px; color:var(--th-mute); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
main .in-row > span { display:flex; flex-direction:column; gap:3px; min-width:0; align-items:flex-start; }
main .in-row small { color:var(--th-mute); font-size:12px; }
main .in-c-z { flex-direction:row !important; flex-wrap:wrap; align-items:center !important; }
main .in-row .in-pill { white-space:normal; max-width:100%; }
main .in-why { color:#8A5300 !important; }
main .in-none { padding:20px 16px; color:var(--th-mute); }

/* one referral */
main .in-back { color:var(--th-accent2); text-decoration:none; font-weight:600; min-height:44px; display:inline-flex; align-items:center; }
main .in-two { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr); gap:14px; align-items:start; }
main .in-text { margin:10px 0; padding:12px; border-radius:12px; background:rgba(var(--th-soft-rgb), .7); line-height:1.55; font-size:14px; color:var(--th-text); overflow-wrap:anywhere; }
main .in-text mark { background:#FFE9A8; color:inherit; border-radius:3px; padding:0 2px; }
main .in-att { margin:10px 0 0; }
main .in-att img { max-width:100%; border-radius:10px; border:1px solid var(--th-line); display:block; }
main .in-att figcaption { font-size:12px; color:var(--th-mute); margin-top:4px; }
main .in-att-ph { font-size:28px; padding:10px; background:var(--th-soft); border-radius:10px; width:48px; text-align:center; }
main .in-fh { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
main .in-fh h2 { margin:0; }
main .in-reasons { background:#FFF7E6; border:1px solid #F3D9A4; border-radius:12px; padding:10px 12px; margin-bottom:10px; color:#6B4200; font-size:13px; }
main .in-reasons ul { margin:4px 0 0; padding-left:18px; }
main .in-flist.with-photo { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr); gap:12px; align-items:start; }
main .in-photo .in-att { margin:0; position:sticky; top:8px; }
main .in-f { display:grid; grid-template-columns:130px minmax(0, 1fr) auto auto; gap:8px; align-items:center; padding:6px 0; border-top:1px solid var(--th-line); font-size:13px; }
main .with-photo .in-f { grid-template-columns:minmax(0, 1fr) auto auto; row-gap:4px; }
main .with-photo .in-f label { grid-column:1 / -1; }
main .in-f:first-child { border-top:0; }
main .in-f .in-pill { justify-self:start; }
main .in-f label { color:var(--th-mute); font-weight:600; }
main .in-f input { min-height:36px; padding:6px 8px; border:1px solid var(--th-line2); border-radius:8px; font:inherit; background:#fff; color:var(--th-text); min-width:0; }
main .in-f.is-low input, main .in-f.is-low .in-v { outline:2px solid #F0B73F; outline-offset:1px; border-radius:6px; }
main .in-v { color:var(--th-ink); font-weight:600; overflow-wrap:anywhere; }
main .in-low { font-size:11px; color:#8A5300; font-weight:700; }
main .in-boxes { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
main .in-box { display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:12px; font-size:13px; border:1px solid var(--th-line); }
main .in-good { background:#EEF9F2; border-color:#BFE6CC; color:#17663A; }
main .in-warn { background:#FFF7E6; border-color:#F3D9A4; color:#6B4200; }
main .in-bad { background:#FDECEC; border-color:#F2B9B9; color:#8E1717; }
main .in-info { background:var(--th-tint); border-color:var(--th-peach); color:var(--th-accent3); }
main .in-fu { margin-top:10px; }
main .in-note { margin-top:10px; font-size:13px; }
main .in-note p { margin:4px 0 0; padding:10px; border-radius:10px; background:var(--th-soft); color:var(--th-text); white-space:pre-wrap; }
main .in-acts { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:14px; }
main .in-acts .btn { min-height:44px; }
main .in-acts .linkbtn { min-height:44px; }

/* What it learned */
main .in-lessons { list-style:none; margin:0; padding:4px 16px; }
main .in-lesson { display:grid; grid-template-columns:minmax(0, 1fr) auto auto auto; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--th-line); }
main .in-lesson:first-child { border-top:0; }
main .in-lesson > div { display:flex; flex-direction:column; gap:2px; }
main .in-lesson.is-off b { color:var(--th-mute); }
main .in-lesson .linkbtn { min-height:44px; }
main .in .linkbtn.in-del { color:#A61B1B; }

/* Accuracy */
main .in-acc { display:grid; grid-template-columns:220px minmax(0, 1fr); gap:14px; }
main .in-big { display:flex; flex-direction:column; justify-content:center; gap:4px; }
main .in-big b { font-size:44px; color:var(--th-accent2); line-height:1; }
main .in-big span { color:var(--th-mute); font-size:13px; }
main .in-bars { display:flex; align-items:flex-end; gap:12px; height:200px; padding-top:22px; }
main .in-bar { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:4px; font-size:12px; color:var(--th-mute); position:relative; }
main .in-bar i { display:block; width:100%; max-width:46px; height:var(--h); background:linear-gradient(180deg, var(--th-accent), var(--th-accent2)); border-radius:8px 8px 3px 3px; order:1; }
main .in-bar b { color:var(--th-ink); order:0; }
main .in-bar span { order:2; }
main .in-kinds { display:flex; flex-direction:column; gap:8px; }
main .in-kind { display:grid; grid-template-columns:180px minmax(0, 1fr) 48px 70px; gap:10px; align-items:center; font-size:13px; }
main .in-kbar { height:10px; border-radius:6px; background:var(--th-soft2); overflow:hidden; }
main .in-kbar i { display:block; height:100%; width:var(--w); background:var(--th-accent); border-radius:6px; }
main .in-kind small { color:var(--th-mute); }

/* Intake rules, Cottage Helper */
main .in-grid3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; align-items:start; }
main .in-grid2 { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; align-items:start; }
main .in-card h2:not(:first-child) { margin-top:16px; }
main .in-sw { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--th-line); font-size:13px; }
main .in-sw:first-of-type { border-top:0; }
main .in-ol { margin:0; padding-left:20px; font-size:13px; line-height:1.7; color:var(--th-text); }
main .in-team { display:flex; flex-direction:column; gap:2px; padding:6px 0; font-size:13px; border-top:1px solid var(--th-line); }
main .in-team span { color:var(--th-mute); }
main .in-tags { display:flex; flex-wrap:wrap; gap:6px; }
main .in-src { width:100%; border-collapse:collapse; font-size:13px; }
main .in-src td:last-child:has(.linkbtn) { width:1%; white-space:nowrap; }
main .in-src td { padding:6px 4px; border-top:1px solid var(--th-line); overflow-wrap:anywhere; }
main .in-addsrc { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
main .in-addsrc input { flex:1 1 140px; min-height:40px; padding:6px 8px; border:1px solid var(--th-line2); border-radius:8px; font:inherit; min-width:0; }

/* dark mode */
html.dark main .in h1, html.dark main .in h2, html.dark main .in-v, html.dark main .in-bar b { color:var(--th-dtext); }
html.dark main .in .sub, html.dark main .in-row small, html.dark main .in-th, html.dark main .in-f label, html.dark main .in-tabs a, html.dark main .in-big span, html.dark main .in-bar, html.dark main .in-team span { color:var(--th-dmute); }
html.dark main .in-glass { background:var(--gl-bg, var(--th-dcard)); }
html.dark main .in-row, html.dark main .in-text { color:var(--th-dtext); }
html.dark main .in-row, html.dark main .in-f, html.dark main .in-lesson, html.dark main .in-sw, html.dark main .in-team, html.dark main .in-src td, html.dark main .in-tabs { border-color:var(--th-dline); }
html.dark main .in-text, html.dark main .in-note p { background:rgba(var(--th-dsoft-rgb), .7); color:var(--th-dtext); }
html.dark main .in-text mark { background:#6B5A1E; }
html.dark main .in-tabs a[aria-current="page"] { color:var(--th-daccent); box-shadow:inset 0 -3px 0 var(--th-daccent); }
html.dark main .in-chip, html.dark main .in-f input, html.dark main .in-addsrc input { background:var(--th-dsoft); border-color:var(--th-dline); color:var(--th-dtext); }
html.dark main .in-chip[aria-pressed="true"] { background:var(--th-daccent); border-color:var(--th-daccent); color:var(--th-dpage2); }
html.dark .in-blue, html.dark .in-info { background:var(--th-daccent2); color:#CFE1FF; border-color:var(--th-dline); }
html.dark .in-navy { background:var(--th-daccent); color:var(--th-dpage2); }
html.dark .in-green, html.dark main .in-good { background:#123A27; color:#9BE3B6; border-color:#1E5A3C; }
html.dark .in-amber, html.dark main .in-warn, html.dark main .in-reasons { background:#3D2E0E; color:#F6CD7A; border-color:#5E4718; }
html.dark .in-red, html.dark main .in-bad { background:#401818; color:#FFB1B1; border-color:#642424; }
html.dark .in-grey { background:var(--th-dsoft); color:var(--th-dmute); }
html.dark .in-violet { background:#2C2350; color:#CDBBFF; }
html.dark .in-mail { background:var(--th-dsoft); color:#CFE1FF; border-color:var(--th-dline); }
html.dark .in-rc { background:#3B2414; color:#FFC59C; border-color:#5E3A1F; }
html.dark main .in-why, html.dark main .in-low { color:#F6CD7A !important; }
html.dark main .in-big b { color:var(--th-daccent); }
html.dark main .in-kbar { background:var(--th-dsoft); }
html.dark main .in .linkbtn.in-del { color:#FF9C9C; }

/* tablet and phone */
@media (max-width: 1100px) {
  main .in-grid3 { grid-template-columns:1fr 1fr; }
  main .in-two { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  main .in-th { display:none; }
  main .in-row { grid-template-columns:1fr auto; gap:6px 10px; }
  main .in-c-t { grid-column:2; grid-row:1; }
  main .in-c-p { grid-column:1; grid-row:1; }
  main .in-c-from, main .in-c-s { grid-column:1 / -1; }
  main .in-c-from { flex-direction:row !important; flex-wrap:wrap; align-items:center !important; }
  main .in-c-m, main .in-c-a { display:none !important; }
  main .in-grid3, main .in-grid2, main .in-acc, main .in-boxes, main .in-flist.with-photo { grid-template-columns:1fr; }
  main .in-photo .in-att { position:static; }
  main .in-f { grid-template-columns:1fr auto; }
  main .in-f label { grid-column:1 / -1; }
  main .in-f input, main .in-f .in-v { grid-column:1 / -1; }
  main .in-lesson { grid-template-columns:1fr auto; }
  main .in-lesson > div { grid-column:1 / -1; }
  main .in-kind { grid-template-columns:1fr 44px; }
  main .in-kbar { grid-column:1 / -1; grid-row:2; }
  main .in-kind small { display:none; }
  main .in-bars { gap:6px; }
}

/* the door chip's icon; the two reads of a photo under a field, one click picks one (design lead, Oct 31) */
.in-pill svg { width:13px; height:13px; flex:none; }
main .in-reads { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; }
main .in-read { min-height:36px; padding:6px 12px; border-radius:10px; border:1px solid #F0B73F; background:#FFF7E6; color:#6B4200; font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
main .in-read:hover { background:#FFEFCC; }
html.dark main .in-read { background:#3D2E0E; color:#F6CD7A; border-color:#5E4718; }
main .in-f .in-epaces { min-height:36px; padding:6px 12px; justify-self:start; }

/* Settings › Connections */
main .in-login { display:grid; grid-template-columns:90px minmax(0, 1fr); gap:6px 10px; align-items:center; margin-top:10px; }
main .in-login input { min-height:40px; padding:6px 8px; border:1px solid var(--th-line2); border-radius:8px; font:inherit; background:#fff; color:var(--th-text); min-width:0; }
main .in-login label { color:var(--th-mute); font-weight:600; font-size:13px; }
main .in-login .in-acts { grid-column:1 / -1; margin-top:6px; }
main .in-conn .in-box { margin-top:8px; }
main .in-conn a.btn { text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }
html.dark main .in-login input { background:var(--th-dsoft); border-color:var(--th-dline); color:var(--th-dtext); }
@media (max-width: 760px) { main .in-login { grid-template-columns:1fr; } }

/* the kind chip, What it is, Read now, Senders */
main .in-c-s { gap:4px !important; }
main .in-kindchip { margin-right:4px; }
main .in-kindbox { background:rgba(var(--th-soft-rgb), .7); border-radius:12px; padding:10px 12px; margin-bottom:10px; }
main .in-kindbox .in-acts { margin-top:8px; }
main .in-gcr { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--th-mute); }
main .in-gcr input { width:110px; min-height:40px; padding:6px 8px; border:1px solid var(--th-line2); border-radius:8px; font:inherit; background:#fff; color:var(--th-text); }
main .in-tools { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
main .in-tools .btn { min-height:40px; }
main .in-scroll { overflow-x:auto; }
main .in-senders th { text-align:left; font-size:12px; color:var(--th-mute); text-transform:uppercase; letter-spacing:.03em; padding:6px 4px; }
html.dark main .in-kindbox { background:rgba(var(--th-dsoft-rgb), .7); }
html.dark main .in-gcr input { background:var(--th-dsoft); border-color:var(--th-dline); color:var(--th-dtext); }
.in-preview { padding:16px 18px; margin-top:12px; } .in-preview h2 { font-size:16px; margin:0 0 8px; } .in-preview dl { display:grid; grid-template-columns:max-content 1fr; gap:6px 14px; margin:0; } .in-preview dt { color:var(--th-mute); } .in-preview dd { margin:0; font-weight:600; }
.in-group > summary { cursor:pointer; min-height:44px; display:flex; align-items:center; gap:8px; padding:0 12px; font-weight:600; color:var(--th-mute); } .in-missing { color:var(--th-amber, #b45309); font-weight:700; }
/* where a field came from, two places that disagree ("check"), a later email's suggestion (owner, Nov 2) */
.in-preview dd small { display:block; font-weight:400; font-size:12px; } .in-preview dd small.sub { display:inline; }
main .in-check { color:#8A5300 !important; } main .in-sug { color:var(--th-mute); } html.dark main .in-check { color:#F6CD7A !important; }
.in-unread svg { vertical-align:-2px; }
/* the action first (owner, Nov 2): "New case: call the patient", "Update on GCR-…", "Ask <coordinator> about zip …", "Not a new case: …" */
.in-act { display:block; font-weight:700; font-size:13px; margin:0 0 2px; }
p.in-act { font-size:16px; margin:4px 0 6px; padding:8px 12px; border-radius:10px; }
.in-act-new { color:#0B6B3A; } p.in-act-new { background:#E6F4EC; }
.in-act-upd { color:#1D3E7A; } p.in-act-upd { background:#E8EEF8; }
.in-act-staff { color:#8A5300; } p.in-act-staff { background:#FFF4DE; }
.in-act-not { color:var(--th-mute, #5b6470); font-weight:600; }
html.dark .in-act-new { color:#7BD8A2; } html.dark p.in-act-new { background:rgba(123,216,162,.12); }
html.dark .in-act-upd { color:#9DB8EA; } html.dark p.in-act-upd { background:rgba(157,184,234,.12); }
html.dark .in-act-staff { color:#F6CD7A; } html.dark p.in-act-staff { background:rgba(246,205,122,.12); }
/* "Enter in HHA" (chat 4, Nov 4): the confirm shows the exact fields, the note and the files */
dialog.in-confirm { max-width: min(640px, calc(100vw - 32px)); width: 100%; border: 1px solid var(--th-line); border-radius: 16px; padding: 18px 20px; background: var(--th-panel, #fff); color: var(--th-ink, #10213a); }
dialog.in-confirm::backdrop { background: rgba(10, 20, 40, .45); }
dialog.in-confirm h2 { margin: 0 0 8px; } dialog.in-confirm h3 { margin: 14px 0 4px; font-size: 14px; }
dialog.in-confirm table th { text-align: left; padding-right: 12px; font-weight: 600; white-space: nowrap; }
dialog.in-confirm .in-drynote { white-space: pre-wrap; max-height: 30vh; overflow: auto; padding: 8px 10px; border: 1px solid var(--th-line); border-radius: 10px; }
main .in-hhaenter .in-box { margin: 8px 0; }
/* New cases: today's total, and the Today / Earlier sections (owner, Nov 4) */
main .in-today { margin:0 0 10px; font-size:15px; }
main .in-today .sub { margin-left:4px; }
main .in-dayh { display:block; padding:10px 16px 6px; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--th-mute); border-bottom:1px solid var(--th-line, rgba(127,127,127,.2)); }
main .in-dayh b { color:var(--th-text, inherit); }
main .in-assign { display:flex; gap:6px; align-items:center; margin-top:6px; }

/* ---- New referrals, the redesign (owner's approved mockups, Nov 4): Cottage blue and white, calm. The queue and the case page
   carry .in-v2; the other tabs keep their look. Every state says its meaning by shape and word, not by colour alone. ---- */
main .in-v2 { --v-bg:#F6F8FB; --v-card:#FFFFFF; --v-line:#E4E9F0; --v-ink:#0F1B2D; --v-mute:#5B6B80; --v-accent:#1D5FD6; --v-navy:#0B2A4A; --v-tint:#EAF1FD; --v-tint2:#F3F7FE; --v-tline:#D6E3FA;
  --v-ok-bg:#F2F8F4; --v-ok:#146C43; --v-ok-line:#CFE6D8; --v-q-bg:#FFF8EC; --v-q:#8A4B00; --v-q-line:#F2D3A2; --v-miss:#A1261A; --v-miss-line:#E3A39B; --v-sug:#0B4AB5; --v-sug-line:#8DB0EE; --v-hover:#F3F6FB;
  color:var(--v-ink); }
html.dark main .in-v2 { --v-bg:var(--th-dpage2, #0E1726); --v-card:var(--th-dcard, #152033); --v-line:var(--th-dline, #26354D); --v-ink:var(--th-dtext, #E6EDF7); --v-mute:var(--th-dmute, #9AA8BA); --v-accent:#7FA9F5; --v-navy:#CFE1FF;
  --v-tint:rgba(127,169,245,.16); --v-tint2:rgba(127,169,245,.10); --v-tline:rgba(127,169,245,.35); --v-ok-bg:#123A27; --v-ok:#9BE3B6; --v-ok-line:#1E5A3C; --v-q-bg:#3D2E0E; --v-q:#F6CD7A; --v-q-line:#5E4718;
  --v-miss:#FFB1B1; --v-miss-line:#8A3A3A; --v-sug:#BBD2FF; --v-sug-line:#5C7FC4; --v-hover:rgba(127,169,245,.08); }
main .in-v2 :focus-visible { outline:2px solid var(--v-accent); outline-offset:2px; }
main .in-v2 .in-glass { background:var(--v-card); border:1px solid var(--v-line); border-radius:12px; box-shadow:none; padding:16px 18px; }
main .in-v2 .in-card, main .in-v2 .in-hdr { transition:transform .18s ease, box-shadow .18s ease; }
main .in-v2 .in-card:hover, main .in-v2 .in-hdr:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(11,42,74,.06); }
@media (prefers-reduced-motion: reduce) { main .in-v2 .in-card, main .in-v2 .in-hdr { transition:none; } main .in-v2 .in-card:hover, main .in-v2 .in-hdr:hover { transform:none; } }
main .in-v2 h1 { font-size:24px; letter-spacing:-.01em; color:var(--v-ink); }
main .in-v2 h2 { font-size:15px; color:var(--v-ink); }
main .in-v2 .sub { color:var(--v-mute); }
/* the status pills (6px corners, 22px high): New blue, Needs review amber, Ready green, Returning violet */
main .in-v2 .in-pill { border-radius:6px; min-height:22px; padding:0 8px; font-weight:600; box-sizing:border-box; }

/* the tabs with counts (the chips, restyled; same buttons, same views) */
main .in-v2 .in-chips { gap:4px; padding:4px 0 6px; border-bottom:1px solid var(--v-line); }
main .in-v2 .in-chip { min-height:36px; padding:0 12px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--v-ink); font-weight:500; font-size:14px; }
main .in-v2 .in-chip b { color:var(--v-mute); font-weight:600; margin-left:6px; }
main .in-v2 .in-chip:hover { background:var(--v-hover); }
main .in-v2 .in-chip[aria-pressed="true"] { background:var(--v-tint); border-color:var(--v-accent); color:var(--v-navy); font-weight:600; }
main .in-v2 .in-chip[aria-pressed="true"] b { color:var(--v-accent); }
/* the filters */
main .in-filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
main .in-filters input[type=search] { flex:1 1 240px; max-width:340px; min-height:40px; padding:6px 12px; border:1px solid var(--v-line); border-radius:8px; font:inherit; background:var(--v-card); color:var(--v-ink); }
main .in-sel { display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 4px 0 10px; border:1px solid var(--v-line); border-radius:8px; background:var(--v-card); font-size:13px; color:var(--v-mute); }
main .in-sel select { min-height:36px; border:0; background:transparent; font:inherit; color:var(--v-ink); font-weight:600; }
main .in-fchip { min-height:40px; padding:0 12px; border-radius:8px; border:1px dashed var(--v-line); background:var(--v-card); color:var(--v-ink); font:inherit; font-size:13px; cursor:pointer; }
main .in-fchip[aria-pressed="true"] { border:1px solid var(--v-accent); background:var(--v-tint); color:var(--v-navy); font-weight:600; }
main .in-fchip[aria-pressed="true"]::after { content:' ✕'; }
main .in-sort { margin-left:auto; font-size:12px; }
main .in-shown { margin:-4px 0 0; } main .in-shown:empty { display:none; }

/* the queue table: status + time | patient + source | flags | coordinator + why | next action + Open */
main .in-v2 .in-scroll { overflow-x:auto; border-radius:12px; }
main .in-v2 .in-table { padding:0; min-width:920px; overflow:visible; }
main .in-v2 .in-row { grid-template-columns:112px minmax(220px, 1.6fr) minmax(190px, 1.2fr) 150px minmax(200px, 1.2fr); gap:14px; padding:12px 18px; border-top:1px solid var(--v-line); color:var(--v-ink); }
main .in-v2 .in-item { cursor:pointer; transition:background .12s ease; }
main .in-v2 .in-item:hover { background:var(--v-hover); }
main .in-v2 .in-item:focus-within { background:var(--v-hover); }
main .in-v2 .in-th { color:var(--v-mute); font-size:12px; letter-spacing:.04em; padding-top:10px; padding-bottom:10px; background:var(--v-tint2); border-radius:12px 12px 0 0; }
main .in-v2 .in-dayh { display:flex; gap:8px; align-items:baseline; padding:14px 18px 8px; background:transparent; color:var(--v-mute); border-bottom:0; }
main .in-v2 .in-dayh b { color:var(--v-ink); font-size:13px; }
main .in-v2 .in-c-st { gap:6px; }
main .in-v2 .in-c-s { gap:4px !important; }
main .in-v2 .in-c-t { font-size:12px; color:var(--v-mute); font-variant-numeric:tabular-nums; }
main .in-v2 .in-c-p > b { font-size:14px; }
main .in-v2 .in-c-from { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; color:var(--v-mute); }
main .in-v2 .in-c-from .in-pill { min-height:20px; }
main .in-v2 .in-c-f { flex-direction:row !important; flex-wrap:wrap; gap:4px !important; }
main .in-v2 .in-c-a { flex-direction:row !important; align-items:center !important; gap:8px !important; }
main .in-v2 .in-c-a > span { display:flex; flex-direction:column; min-width:0; }
main .in-v2 .in-c-n { gap:3px; }
main .in-v2 .in-c-n .in-act { margin:0; }
main .in-open { margin-top:4px; display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:6px; border:1px solid var(--v-line); color:var(--v-accent); font-weight:600; font-size:12px; background:var(--v-card); }
main .in-item:hover .in-open { border-color:var(--v-accent); }
main .in-ini { flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--v-tint); color:var(--v-navy); font-style:normal; font-weight:700; font-size:11px; }

/* flags and state tags: missing = dashed, white, "—"; check = amber, "?"; ok = green, "✓"; suggested = dotted blue, "◇" */
main .in-flag, main .in-tag { display:inline-flex; align-items:center; gap:4px; min-height:22px; padding:0 8px; border-radius:6px; font-size:12px; font-weight:500; white-space:nowrap; box-sizing:border-box; border:1px solid transparent; }
main .in-fl-missing, main .in-t-missing { background:var(--v-card); color:var(--v-miss); border:1px dashed var(--v-miss-line); }
main .in-fl-check, main .in-t-unconfirmed { background:var(--v-q-bg); color:var(--v-q); border-color:var(--v-q-line); }
main .in-fl-ok, main .in-t-verified { background:var(--v-ok-bg); color:var(--v-ok); border-color:var(--v-ok-line); }
main .in-t-suggested { background:var(--v-tint2); color:var(--v-sug); border:1px dotted var(--v-sug-line); }

/* the case page */
main .in-case { gap:16px; }
main .in-crumb { display:flex; flex-wrap:wrap; align-items:center; gap:2px; font-size:13px; color:var(--v-mute); }
main .in-crumb .in-back { min-height:32px; }
main .in-hdr { display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(260px, 1fr); gap:18px; align-items:start; }
main .in-hdr .in-fh { justify-content:flex-start; gap:8px; margin:0 0 6px; }
main .in-hdr .in-h1 { margin:0 6px 0 0; }
main .in-hdr > .in-hdr-main > .sub { margin:0 0 10px; }
main .in-misschips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 12px; }
main .in-hdl { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin:0; }
main .in-hdl dt { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--v-mute); font-weight:700; margin-bottom:4px; }
main .in-hdl dd { margin:0; display:flex; gap:8px; align-items:flex-start; font-size:13px; }
main .in-v2 .in-coord { background:transparent; border:0; padding:0; color:var(--v-ink); }
main .in-v2 .in-coord b { font-weight:600; } main .in-v2 .in-coord > span { color:var(--v-mute); font-size:12px; }
main .in-v2 .in-coord select { min-height:36px; border:1px solid var(--v-line); border-radius:8px; background:var(--v-card); color:var(--v-ink); font:inherit; }
main .in-next { background:var(--v-tint2); border:1px solid var(--v-tline); border-radius:12px; padding:14px 16px; }
main .in-next-l { display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--v-sug); margin-bottom:4px; }
main .in-next p.in-act { background:transparent; padding:0; margin:0 0 8px; font-size:15px; color:var(--v-navy); }
main .in-next .in-reasons { margin:8px 0 0; }
main .in-next .in-acts { margin-top:10px; }
main .in-cards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; align-items:start; }
main .in-v2 .in-card h2 { margin:0 0 10px; }
main .in-v2 .in-kindbox { background:transparent; padding:0; margin:0; }
main .in-v2 .in-kindbox .in-fh { justify-content:flex-start; }
main .in-pvline { margin:0 0 6px; font-weight:600; }
main .in-only { margin:0 0 8px; display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border-radius:6px; background:var(--v-tint2); color:var(--v-sug); border:1px solid var(--v-tline); font-size:12px; font-weight:600; }
main .in-prevd { margin-top:8px; }
main .in-prevd > summary, main .in-v2 .in-drynote > summary { cursor:pointer; min-height:36px; display:flex; align-items:center; color:var(--v-accent); font-weight:600; font-size:13px; }
main .in-v2 .in-prevd .in-preview { border:0; padding:6px 0 0; margin:0; background:transparent; }
main .in-v2 .in-prevd .in-preview h2 { font-size:13px; color:var(--v-mute); }
main .in-v2 .in-hhaenter h3 { margin:12px 0 4px; font-size:14px; }
main .in-ck { list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:6px; font-size:13px; }
main .in-ck li { display:flex; gap:8px; align-items:baseline; }
main .in-ck li > span { flex:none; width:16px; font-weight:700; text-align:center; }
main .in-ck-ok > span { color:var(--v-ok); } main .in-ck-q > span { color:var(--v-q); } main .in-ck-no > span { color:var(--v-miss); }
main .in-v2 .in-boxes { grid-template-columns:1fr; margin-top:0; }
main .in-v2 .in-two { grid-template-columns:minmax(0, 1.6fr) minmax(300px, 1fr); gap:16px; }
main .in-col { display:flex; flex-direction:column; gap:16px; min-width:0; }
main .in-side { position:sticky; top:12px; min-width:0; }
/* the details: grouped, label | value | state tag (+ its button) */
main .in-v2 .in-fields > .sub { margin:0 0 6px; }
main .in-fgroup { margin-top:10px; }
main .in-fgroup h3 { margin:6px 0 2px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--v-mute); }
main .in-v2 .in-f { grid-template-columns:150px minmax(0, 1fr) auto; gap:10px; padding:8px 6px; border-top:1px solid var(--v-line); border-radius:6px; }
main .in-v2 .in-f:hover { background:var(--v-hover); }
main .in-v2 .in-fgroup h3 + .in-f { border-top:0; }
main .in-v2 .in-f label { color:var(--v-mute); font-weight:500; }
main .in-fv { display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-width:0; }
main .in-fv input { flex:1 1 180px; }
main .in-fv small { flex-basis:100%; font-size:12px; }
main .in-fs { display:inline-flex; gap:6px; align-items:center; justify-self:end; }
main .in-fact { min-height:30px; padding:0 10px; border-radius:6px; border:1px solid var(--v-line); background:var(--v-card); color:var(--v-accent); font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
main .in-fact:hover { border-color:var(--v-accent); }
main .in-v2 .in-f input { min-height:36px; border-color:var(--v-line); background:var(--v-card); color:var(--v-ink); }
main .in-v2 .in-s-missing .in-v, main .in-v2 .in-s-missing input::placeholder { color:var(--v-miss); font-style:italic; }
main .in-v2 .in-s-suggested .in-v { text-decoration:underline dotted var(--v-sug-line); text-underline-offset:4px; }
main .in-v2 .in-f.is-low input, main .in-v2 .in-f.is-low .in-v { outline:1px solid var(--v-q-line); outline-offset:1px; }
main .in-confall { min-height:36px; }
/* the activity */
main .in-alist { list-style:none; margin:0; padding:0; }
main .in-alist li { display:grid; grid-template-columns:14px minmax(0, 1fr) auto; gap:10px; align-items:baseline; padding:8px 0; border-top:1px solid var(--v-line); font-size:13px; }
main .in-alist li:first-child { border-top:0; }
main .in-alist time { color:var(--v-mute); font-size:12px; white-space:nowrap; }
main .in-adot { width:8px; height:8px; border-radius:50%; background:var(--v-accent); display:inline-block; }
main .in-a-person .in-adot { background:var(--v-ok); } main .in-a-mail .in-adot { background:#9AA8BA; }
/* the original message */
main .in-origd { padding:0; }
main .in-origd > summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:48px; padding:12px 18px; border-bottom:1px solid var(--v-line); }
main .in-origd > summary::-webkit-details-marker { display:none; }
main .in-origd:not([open]) > summary { border-bottom:0; }
main .in-osum { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
main .in-show::before { content:'Hide'; color:var(--v-accent); font-weight:600; font-size:13px; }
main .in-origd:not([open]) .in-show::before { content:'Show'; }
main .in-v2 .in-orig { padding:14px 18px 16px; }
main .in-mailh { display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:4px 12px; margin:6px 0 10px; font-size:13px; }
main .in-mailh dt { color:var(--v-mute); } main .in-mailh dd { margin:0; overflow-wrap:anywhere; }
main .in-v2 .in-text { background:var(--v-bg); border:1px solid var(--v-line); }
main .in-docs { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
main .in-docs li { display:flex; gap:8px; align-items:center; padding:8px 10px; border:1px solid var(--v-line); border-radius:8px; font-size:13px; }
main .in-docs svg { width:16px; height:16px; flex:none; color:var(--v-accent); }
main .in-conv-c { padding:12px 18px 16px; border-top:1px solid var(--v-line); }
html.dark main .in-v2 .in-text { background:rgba(255,255,255,.03); }

@media (max-width: 1100px) {
  main .in-cards { grid-template-columns:1fr 1fr; }
  main .in-v2 .in-two { grid-template-columns:1fr; }
  main .in-side { position:static; }
}
/* a phone (390 px): one column; the queue rows become cards; the case in the mockup's order: header, next action, details,
   the original email (folded), HHA preview, the rest; 44 px buttons */
@media (max-width: 760px) {
  main .in-v2 .in-table { min-width:0; }
  main .in-v2 .in-th { display:none; }
  main .in-v2 .in-row { grid-template-columns:minmax(0, 1fr); gap:8px; padding:14px 16px; }
  main .in-v2 .in-c-st { flex-direction:row !important; flex-wrap:wrap; justify-content:space-between; align-items:center !important; width:100%; }
  main .in-v2 .in-c-s { flex-direction:row !important; flex-wrap:wrap; }
  main .in-v2 .in-c-p, main .in-v2 .in-c-from, main .in-v2 .in-c-s, main .in-v2 .in-c-t, main .in-v2 .in-c-f, main .in-v2 .in-c-a, main .in-v2 .in-c-n { grid-column:1; grid-row:auto; }
  main .in-v2 .in-c-a { display:flex !important; }
  main .in-open { min-height:44px; padding:0 14px; align-self:flex-start; }
  main .in-sort { margin-left:0; flex-basis:100%; }
  main .in-filters input[type=search] { max-width:none; flex-basis:100%; }
  main .in-v2 .in-chips { flex-wrap:nowrap; overflow-x:auto; }
  main .in-v2 .in-chip { flex:none; min-height:44px; }
  main .in-fchip, main .in-sel { min-height:44px; }
  main .in-hdr { grid-template-columns:1fr; }
  main .in-hdl { grid-template-columns:1fr; }
  main .in-case .in-cards, main .in-case .in-two, main .in-case .in-col { display:contents; }
  main .in-case > .in-crumb { order:0; } main .in-case .in-hdr { order:1; } main .in-case .in-fields { order:2; } main .in-case .in-side { order:3; }
  main .in-case .in-hhac { order:4; } main .in-case .in-checks { order:5; } main .in-case .in-sum { order:6; } main .in-case .in-actv { order:7; }
  main .in-v2 .in-f { grid-template-columns:minmax(0, 1fr) auto; }
  main .in-v2 .in-f label { grid-column:1; grid-row:1; }
  main .in-v2 .in-f .in-fs { grid-column:2; grid-row:1; }
  main .in-v2 .in-f .in-fv { grid-column:1 / -1; }
  main .in-v2 .in-f .in-v { font-size:15px; }
  main .in-fact { min-height:44px; padding:0 14px; }
  main .in-v2 .in-acts .btn, main .in-v2 .in-acts .linkbtn { min-height:44px; }
  main .in-v2 .in-glass { padding:14px; }
  main .in-origd > summary { padding:12px 14px; min-height:52px; }
  main .in-v2 .in-orig { padding:12px 14px 14px; }
  main .in-alist li { grid-template-columns:14px minmax(0, 1fr); } main .in-alist time { grid-column:2; }
}
/* the live list (owner, Nov 4): a new case on top, "Just in" for 2 minutes; it slides in only when the device allows motion */
main .in-v2 .in-item.in-justin { background:var(--v-tint2); box-shadow:inset 3px 0 0 var(--v-accent); }
main .in-justtag { display:inline-flex; align-items:center; min-height:20px; padding:0 7px; border-radius:6px; background:var(--v-tint); color:var(--v-sug); border:1px solid var(--v-tline); font-size:11px; font-weight:700; width:fit-content; }
@keyframes inSlide { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: no-preference) { main .in-v2 .in-item.in-slide { animation:inSlide .35s ease-out; } }
main .in-live:empty { display:none; } main .in-live { margin:-4px 0 0; }
main .in-livebtn { min-height:36px; padding:0 14px; border-radius:999px; border:1px solid var(--v-accent); background:var(--v-tint); color:var(--v-navy); font:inherit; font-weight:600; cursor:pointer; }
@media (max-width: 760px) { main .in-livebtn { min-height:44px; } }
main .in-pics:empty { display:none; }
/* the row is a div (owner, Nov 4: one-click training on every row); the name and "Open" are the links */
main .in-v2 .in-name { color:inherit; text-decoration:none; }
main .in-v2 .in-name:hover b, main .in-v2 .in-name:focus-visible b { color:var(--v-accent); text-decoration:underline; text-underline-offset:3px; }
main .in-v2 a.in-open { text-decoration:none; }
main .in-v2 .in-table.has-train { min-width:1060px; }
main .in-v2 .has-train .in-row { grid-template-columns:112px minmax(220px, 1.6fr) minmax(190px, 1.2fr) 150px minmax(200px, 1.2fr) 128px; }
main .in-train { display:flex; flex-direction:column; gap:4px; }
main .in-tbtn { min-height:28px; padding:0 8px; border-radius:6px; border:1px solid var(--v-line); background:var(--v-card); color:var(--v-ink); font:inherit; font-size:12px; font-weight:500; cursor:pointer; white-space:nowrap; text-align:left; }
main .in-tbtn:hover { border-color:var(--v-accent); }
main .in-tb-yes[aria-pressed="true"] { background:var(--v-ok-bg); color:var(--v-ok); border-color:var(--v-ok-line); font-weight:600; }
main .in-tb-no[aria-pressed="true"] { background:var(--v-card); color:var(--v-miss); border:1px dashed var(--v-miss-line); font-weight:600; }
main .in-trainbox { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; }
main .in-trainbox .in-train { flex-direction:row; }
@media (max-width: 760px) {
  main .in-v2 .in-table.has-train { min-width:0; }
  main .in-v2 .has-train .in-row { grid-template-columns:minmax(0, 1fr); }
  main .in-v2 .in-c-x { grid-column:1; }
  main .in-train { flex-direction:row; flex-wrap:wrap; }
  main .in-tbtn { min-height:44px; padding:0 12px; }
}
main .in-att-open { display:block; } main .in-att-open:hover img { border-color:var(--v-accent, #1D5FD6); }
main .in-att-gone { padding:12px; border:1px dashed var(--v-line, #E4E9F0); border-radius:10px; color:var(--v-mute, #5B6B80); font-size:13px; }
/* Accuracy › Maybe missed, and Find an email on the queue (chat 2's routes, Nov 4) */
main .in-mmlist { list-style:none; margin:0; padding:0; }
main .in-mmlist li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--v-line); font-size:13px; }
main .in-mmlist li:first-child { border-top:0; }
main .in-mmlist li > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
main .in-mmlist li > div a { color:inherit; text-decoration:none; } main .in-mmlist li > div a:hover b { color:var(--v-accent); text-decoration:underline; }
main .in-mmlist small { color:var(--v-mute); overflow-wrap:anywhere; }
main .in-mm .in-train { flex-direction:row; }
main .in-days th { text-align:left; font-size:12px; color:var(--v-mute); padding:6px 4px; white-space:nowrap; }
main .in-days td { font-variant-numeric:tabular-nums; }
main .in-find { padding:0; }
main .in-find > summary { cursor:pointer; min-height:44px; display:flex; align-items:center; gap:8px; padding:0 16px; }
main .in-findf { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; padding:4px 16px 12px; }
main .in-findf label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--v-mute); flex:1 1 160px; }
main .in-findf input { min-height:40px; padding:6px 10px; border:1px solid var(--v-line); border-radius:8px; font:inherit; background:var(--v-card); color:var(--v-ink); }
main .in-findf .btn { min-height:40px; }
main #inFindRes { padding:0 16px 12px; } main #inFindRes:empty { display:none; }
@media (max-width: 760px) { main .in-mmlist li { flex-direction:column; align-items:flex-start; } main .in-findf .btn, main .in-findf input { min-height:44px; } }

/* Who gets which case (owner, Nov 5): a fieldset per case type, a checkbox per coordinator; learned picks; the case type line */
main .in-type { border:1px solid var(--th-line); border-radius:10px; padding:8px 12px; margin:0 0 10px; }
main .in-type legend { padding:0 4px; }
main .in-chk { display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-right:14px; }
main .in-learned { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:6px 0; font-size:13px; }
main .in-tagx { display:inline-flex; align-items:center; gap:4px; margin:0 8px 6px 0; }
main .in-ctype { display:block; margin-top:4px; font-size:13px; }
/* workload (owner, Nov 5): the overload warning, a symbol and words (never colour alone); the "why" chips under a new pick */
main .in-over { margin:6px 0 0; padding:4px 8px; border-radius:6px; background:var(--v-q-bg, #FFF8EC); color:var(--v-q, #8A4B00); border:1px solid var(--v-q-line, #F2D3A2); font-size:12px; font-weight:600; width:fit-content; }
html.dark main .in-over { background:#3D2E0E; color:#F6CD7A; border-color:#5E4718; }
main .in-whyrow { margin-top:8px; display:flex; flex-direction:column; gap:6px; }
main .in-whyrow > .sub span { font-weight:400; }
main .in-whychips { display:flex; flex-wrap:wrap; gap:6px; }
main .in-whychip { min-height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--v-line, #E4E9F0); background:var(--v-card, #fff); color:var(--v-ink, #0F1B2D); font:inherit; font-size:13px; cursor:pointer; }
main .in-whychip:hover, main .in-whychip[aria-pressed="true"] { border-color:var(--v-accent, #1D5FD6); background:var(--v-tint, #EAF1FD); color:var(--v-navy, #0B2A4A); }
main .in-whynote { display:flex; gap:6px; flex-wrap:wrap; } main .in-whynote[hidden] { display:none; }
main .in-whynote input { flex:1 1 180px; min-height:36px; padding:4px 10px; border:1px solid var(--v-line, #E4E9F0); border-radius:8px; font:inherit; }
main .in-chk .sub { margin-left:4px; font-size:12px; }
@media (max-width: 760px) { main .in-whychip, main .in-whynote input, main .in-whynote .btn { min-height:44px; } }
/* "What I learned" this week (owner, Nov 5): three cards; one column on a phone */
main .in-week > h2 { font-size:17px; margin:0 0 10px; } main .in-week > h2 .sub { font-weight:400; font-size:13px; margin-left:6px; }
main .in-weekcards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; align-items:start; }
main .in-weekcards h3 { margin:0 0 10px; font-size:15px; color:var(--v-ink); }
main .in-wklist { list-style:none; margin:0; padding:0; }
main .in-wklist li { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:8px 0; border-top:1px solid var(--v-line); font-size:13px; }
main .in-wklist li:first-child { border-top:0; }
main .in-wklist li > div { display:flex; flex-direction:column; gap:2px; min-width:0; overflow-wrap:anywhere; }
main .in-wkn { flex:none; min-width:28px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; color:var(--v-navy); }
main .in-wksum { margin:0 0 6px; font-size:13px; } main .in-wksum b { font-size:20px; color:var(--v-navy); margin-right:2px; }
main .in-prop { flex-direction:column; align-items:stretch !important; }
main .in-propb { display:flex; gap:6px; flex-wrap:wrap; } main .in-propb .btn { min-height:36px; }
main .in-allh { font-size:15px; margin:6px 0 0; }
@media (max-width: 1100px) { main .in-weekcards { grid-template-columns:1fr 1fr; } }
@media (max-width: 760px) { main .in-weekcards { grid-template-columns:1fr; } main .in-propb .btn { min-height:44px; } }
/* Learning (owner, Nov 5): four tabs, managers only; one column and cards on a phone */
main .in-v2 { --v-chart:#1D5FD6; }
html.dark main .in-v2 { --v-chart:#528AE8; }
main .in-subtabs { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 14px; }
main .in-subtabs a { display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border-radius:999px; border:1px solid var(--v-line); color:var(--v-ink); text-decoration:none; font-size:14px; background:var(--v-card); }
main .in-subtabs a:hover { background:var(--v-hover); }
main .in-subtabs a[aria-current="page"] { background:var(--v-tint); border-color:var(--v-accent); color:var(--v-navy); font-weight:600; }
main .in-chfilters { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:10px; }
main .in-chfilters label { display:inline-flex; align-items:center; gap:6px; font-size:13px; }
main .in-chfilters select, main .in-chfilters input { min-height:36px; padding:4px 10px; border:1px solid var(--v-line); border-radius:8px; font:inherit; background:var(--v-card); color:var(--v-ink); }
main .in-chfilters input { width:130px; }
main .in-seg { display:inline-flex; gap:0; } main .in-seg .btn { min-height:36px; border-radius:0; } main .in-seg .btn:first-child { border-radius:8px 0 0 8px; } main .in-seg .btn:last-child { border-radius:0 8px 8px 0; margin-left:-1px; }
main .in-seg .btn[aria-pressed="true"] { background:var(--v-tint); border-color:var(--v-accent); color:var(--v-navy); font-weight:600; }
main .in-chtable { width:100%; border-collapse:collapse; font-size:13px; }
main .in-chtable th { text-align:left; font-weight:600; color:var(--v-mute); padding:6px 8px; border-bottom:1px solid var(--v-line); }
main .in-chtable td { padding:8px; border-bottom:1px solid var(--v-line); vertical-align:top; overflow-wrap:anywhere; }
main .in-gcr { font-variant-numeric:tabular-nums; white-space:nowrap; }
main .in-lwhy { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; margin-top:2px; font-size:13px; }
main .in-lmeta { display:block; font-size:12px; }
main .in-lpills { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
main .in-lbtns { display:flex; flex-wrap:wrap; gap:4px 10px; }
main .in-alarm { margin:0 0 14px; padding:10px 14px; border-radius:10px; background:var(--v-q-bg); color:var(--v-q); border:1px solid var(--v-q-line); font-size:14px; display:flex; flex-wrap:wrap; gap:4px 10px; }
main .in-scores { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
main .in-score h3 { margin:0 0 8px; font-size:15px; color:var(--v-ink); }
main .in-scnums { display:flex; gap:28px; margin-bottom:8px; } main .in-scnums > div { display:flex; flex-direction:column; }
main .in-scnums b { font-size:26px; color:var(--v-navy); font-variant-numeric:tabular-nums; line-height:1.15; }
main .in-trend { position:relative; margin:0; } main .in-trend svg { max-width:100%; height:auto; display:block; overflow:visible; }
main .in-tline { fill:none; stroke:var(--v-chart); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
main .in-tdot { fill:var(--v-chart); stroke:var(--v-card); stroke-width:2; }
main .in-tgrid { stroke:var(--v-line); stroke-width:1; } main .in-tx { stroke:var(--v-mute); stroke-width:1; stroke-dasharray:3 3; }
main .in-tax { fill:var(--v-mute); font-size:11px; font-variant-numeric:tabular-nums; }
main .in-thit { fill:transparent; cursor:crosshair; }
main .in-ttip { position:absolute; top:0; width:180px; padding:6px 8px; border-radius:8px; background:var(--v-card); color:var(--v-ink); border:1px solid var(--v-line); box-shadow:0 4px 14px rgba(15,27,45,.12); font-size:12px; pointer-events:none; } main .in-ttip[hidden] { display:none; }
main .in-tdays { margin-top:6px; font-size:13px; } main .in-tdays summary { cursor:pointer; color:var(--v-accent); min-height:28px; display:flex; align-items:center; }
main .in-tdays table { border-collapse:collapse; margin-top:6px; } main .in-tdays td, main .in-tdays th { padding:3px 10px 3px 0; text-align:left; font-variant-numeric:tabular-nums; }
main .in-how { margin:8px 0 0; font-size:12px; } main .in-how b { font-weight:600; }
@media (max-width: 900px) { main .in-scores { grid-template-columns:1fr; } }
@media (max-width: 760px) {
  main .in-subtabs a, main .in-seg .btn, main .in-chfilters select, main .in-chfilters input, main .in-lbtns .linkbtn, main .in-tdays summary { min-height:44px; }
  main .in-chfilters label { flex:1 1 100%; } main .in-chfilters input, main .in-chfilters select { flex:1; width:auto; }
  main .in-chtable thead { display:none; } main .in-chtable, main .in-chtable tbody, main .in-chtable tr, main .in-chtable td { display:block; width:100%; }
  main .in-chtable tr { border-bottom:1px solid var(--v-line); padding:6px 0; } main .in-chtable td { border:0; padding:2px 0; }
  main .in-chtable td::before { content:attr(data-l) ': '; color:var(--v-mute); font-size:12px; }
}
/* the portal confidence score (owner, Nov 5): the big number, Ready for auto-entry?, the parts */
main .in-conf { margin-bottom:16px; }
main .in-confhead { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
main .in-confhead h2 { margin:0 0 4px; font-size:17px; color:var(--v-ink); }
main .in-confbig { display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
main .in-confbig > b { font-size:48px; line-height:1; color:var(--v-navy); font-variant-numeric:tabular-nums; }
main .in-partial { color:var(--v-q); font-weight:600; }
main .in-confchg { font-size:13px; color:var(--v-mute); margin-top:4px; }
main .in-ready { margin:10px 0; padding:8px 12px; border-radius:8px; border:1px solid var(--v-line); background:var(--v-tint2); font-size:14px; }
main .in-ready.is-yes { background:var(--v-ok-bg); border-color:var(--v-ok-line); color:var(--v-ok); }
main .in-cparts { list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 24px; }
main .in-cpart { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--v-line); font-size:13px; }
main .in-cpart > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
main .in-cpv { display:flex; flex-direction:column; align-items:flex-end; text-align:right; flex:none; }
main .in-cpv b { font-size:18px; color:var(--v-navy); font-variant-numeric:tabular-nums; }
@media (max-width: 760px) { main .in-cparts { grid-template-columns:1fr; } main .in-confbig { align-items:flex-start; text-align:left; } }
/* one-click "Enter in HHA" (Nov 5): the result, big and plain; the progress line; "Entered today by me" */
main .in-result { margin:10px 0; padding:14px 16px; border-radius:14px; border:1px solid var(--th-line); font-size:14px; }
main .in-result.in-good { background:#EEF9F2; border-color:#BFE6CC; color:#17663A; }
main .in-result.in-amber { background:#FFF6E5; border-color:#F2D49B; color:#7A4B00; }
main .in-result-h { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
main .in-result-h b { font-size:20px; }
main .in-result a { color:inherit; text-decoration:underline; }
main .in-result ul { margin:4px 0 0 18px; }
main .in-progress { min-height:1.4em; margin:6px 0 0; font-weight:600; }
main .in-who { margin-top:4px; }
main .in-mine { margin:8px 0; padding:8px 12px; }
main .in-mine ul { margin:6px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; }
html.dark main .in-result.in-good { background:#123A27; color:#9BE3B6; border-color:#1E5A3C; }
html.dark main .in-result.in-amber { background:#3A2A0E; color:#FFD58A; border-color:#5C4314; }

/* "Sign in live" (Nov 6): the server's browser, as a picture that updates, in a panel over the page */
.in-live-ov { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:16px; background:rgba(8,16,36,.62); }
.in-live-box { width:min(1320px, 100%); max-height:100%; overflow:auto; padding:16px; border-radius:16px; background:var(--card, #fff); color:var(--ink, #111); box-shadow:0 24px 60px rgba(0,0,0,.35); }
.in-live-h { display:flex; align-items:center; gap:12px; margin-bottom:8px; } .in-live-h b { font-size:18px; } .in-live-h .btn { margin-left:auto; }
.in-live-note { min-height:24px; margin:0 0 8px; font-size:14px; }
.in-live-screen { position:relative; } .in-live-screen img { display:block; width:100%; height:auto; border:1px solid rgba(0,0,0,.15); border-radius:8px; cursor:crosshair; background:#f3f4f6; }
.in-live-screen textarea { position:absolute; left:0; bottom:0; width:1px; height:1px; opacity:0; border:0; padding:0; resize:none; }
.in-livebox .in-acts { margin-top:6px; }

/* a live sign-in that ended without signing in: the reason stays on the panel (live bug, Nov 6) */
.in-live-ended .in-live-screen img { opacity:.35; filter:grayscale(1); }
.in-live-ended .in-live-note { color:var(--bad, #B3122E); font-size:16px; }

/* New referrals, Nov 10: a reply today on an older item, and a later email linked by subject alone (a person checks) */
main .in-upd { display:inline-block; margin:2px 6px 0 0; padding:1px 8px; border-radius:999px; font-size:12px; font-weight:600; background:#E6EEFB; color:#1B4A8F; }
html.dark main .in-upd { background:#18304F; color:#BFD6F7; }
main .in-loose { display:inline-block; margin:2px 6px 0 0; padding:1px 8px; border-radius:999px; font-size:12px; border:1px dashed currentColor; color:#8A5300; }
html.dark main .in-loose { color:#F6CD7A; }
main .in-mail { margin-top:4px; font-size:14px; }
main .in-mail .linkbtn { font-size:14px; }

/* Report › Plans: a plan's last 4 weeks (web/js/report.js planTrend) */
.pt { display:inline-flex; align-items:flex-end; gap:3px; height:24px; vertical-align:middle; margin-right:8px; }
.pt i { display:block; width:7px; border-radius:2px; background:var(--orange, var(--th-accent)); }
.pt i.z { background:var(--line, var(--th-line)); }
.pt-r { font-size:12.5px; color:var(--muted, #5d6670); white-space:nowrap; }

/* The goal score (owner approved, Oct 29; "Goal score v1" design board): the score on the top 3 Top performers cards, the dialog
   with the parts and By status, and the Report column (web/js/goal.js, web/js/meet.js, web/js/report.js). Only opacity and transform
   move; reduced motion: nothing moves. */
.gs-ov { --gs-ink:var(--th-ink); --gs-text:var(--th-mute); --gs-mute:var(--th-mute); --gs-line:var(--th-line); --gs-card:#FFFFFF; --gs-soft:var(--th-soft); --gs-eb:var(--th-accent2); --gs-or:var(--th-accent); --gs-peach:var(--th-peach);
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; box-sizing:border-box; background:rgba(var(--th-panel4-rgb), .55);
  opacity:0; transition:opacity 300ms cubic-bezier(.2,.8,.2,1); font-family:'Plus Jakarta Sans', system-ui, sans-serif; color:var(--gs-ink); }
.gs-ov.is-in { opacity:1; }
.gs-box { position:relative; width:min(1000px, 100%); max-height:calc(100vh - 40px); overflow:auto; box-sizing:border-box; background:var(--gs-card); border-radius:24px; padding:26px;
  box-shadow:0 30px 80px rgba(var(--th-panel4-rgb), .35); transform:translateY(16px) scale(.98); transition:transform 400ms cubic-bezier(.2,.8,.2,1); outline:none; }
.gs-ov.is-in .gs-box { transform:none; }
.gs-x { position:absolute; top:12px; right:12px; width:44px; height:44px; border:0; border-radius:12px; background:var(--gs-soft); color:var(--gs-ink); font-size:24px; line-height:1; cursor:pointer; }
.gs-x:focus-visible, .gs-box :focus-visible { outline:2px solid var(--gs-eb); outline-offset:2px; }
.gs-grid { display:grid; grid-template-columns:300px minmax(0, 1fr); gap:24px; }
.gs-eb { font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--gs-eb); }
.gs-eb2 { margin-top:26px; }
.gs-name { margin:8px 48px 0 0; font-size:24px; font-weight:800; letter-spacing:-.01em; line-height:1.15; }
.gs-focus { font-size:13px; color:var(--gs-text); margin-top:2px; }
.gs-big { display:flex; align-items:baseline; gap:8px; margin-top:18px; } .gs-big b { font-family:Anton, Impact, sans-serif; font-weight:400; font-size:64px; line-height:1; } .gs-big span { font-size:16px; color:var(--gs-mute); }
.gs-wait { margin:16px 0 0; padding:10px 12px; border-radius:12px; background:var(--gs-soft); font-size:13px; font-weight:600; color:var(--gs-text); }
.gs-line { margin-top:14px; background:var(--gs-soft); border-radius:14px; padding:12px 14px; font-size:13px; line-height:1.5; } .gs-line b { color:var(--gs-eb); }
.gs-how { margin:16px 0 0; font-size:12px; line-height:1.5; color:var(--gs-mute); }
.gs-right { min-width:0; padding-top:2px; }
.gs-parts { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.gs-part { display:grid; grid-template-columns:30px minmax(0, 1fr) minmax(90px, 200px); gap:14px; align-items:center; }
.gs-dot { display:inline-flex; width:30px; height:30px; border-radius:50%; align-items:center; justify-content:center; font-family:Anton, Impact, sans-serif; font-size:15px; color:var(--th-ink); }
.gs-d5 { background:var(--th-accent); } .gs-d4 { background:var(--th-peach); } .gs-d3 { background:var(--th-line); } .gs-d1 { background:#F3D6CF; }
.gs-pt b { display:block; font-size:14.5px; font-weight:700; } .gs-pt span { display:block; font-size:12.5px; line-height:1.45; color:var(--gs-text); }
.gs-bar { display:block; height:8px; border-radius:8px; background:var(--gs-line); overflow:hidden; } .gs-bar > i { display:block; height:100%; border-radius:8px; background:linear-gradient(90deg, var(--th-accent), var(--th-peach)); }
.gs-t { width:100%; margin-top:10px; border-collapse:separate; border-spacing:0; border:1px solid var(--gs-line); border-radius:14px; overflow:hidden; font-size:13px; }
.gs-t th, .gs-t td { text-align:left; padding:10px 14px; border-top:1px solid var(--gs-line); vertical-align:top; }
.gs-t thead th { border-top:0; background:var(--gs-soft); font-size:11.5px; font-weight:700; color:var(--gs-text); }
.gs-t th { text-transform:none; letter-spacing:0; } .gs-t tbody th { font-weight:700; font-size:13px; color:var(--gs-ink); } .gs-t td:nth-child(2) { color:var(--gs-text); }
.gs-usual { color:var(--gs-mute); font-weight:500; }

/* the top 3 Top performers cards: the score at the top right (a button: opens the dialog) */
.tp-gs { position:absolute; right:12px; top:10px; z-index:3; display:flex; flex-direction:column; align-items:flex-end; min-width:44px; min-height:44px; padding:2px 4px; border:0; border-radius:10px;
  background:none; color:#fff; font:inherit; cursor:pointer; text-align:right; }
.tp-gs b { font-family:Anton, Impact, sans-serif; font-weight:400; font-size:30px; line-height:1; } .tp-gs small { font-size:11px; color:rgba(255,255,255,.7); }
.tp-gs:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.tp-goalnote { position:relative; margin:-4px 0 10px; font-size:12px; font-weight:600; color:rgba(255,255,255,.72); }   /* while the old ranking is in use */
.tp-gs-wait { position:absolute; right:12px; top:14px; z-index:3; max-width:46%; font-size:10.5px; line-height:1.3; text-align:right; color:rgba(255,255,255,.75); }

/* Report › Coordinators: the Goal score column */
.rp-gs { min-width:44px; min-height:36px; padding:0 10px; border:1px solid var(--line, var(--th-line)); border-radius:10px; background:transparent; color:inherit; font:inherit; font-weight:800; cursor:pointer; }
.rp-gs:focus-visible { outline:2px solid var(--v6-ring, var(--th-accent2)); outline-offset:2px; }
.rp-gs-w { font-size:11px; color:var(--muted, var(--th-mute)); }

/* a phone: the dialog is a full sheet; the parts and the table stack */
@media (max-width: 600px) {
  .gs-ov { padding:0; align-items:stretch; }
  .gs-box { width:100%; max-height:none; height:100%; border-radius:0; padding:20px 16px 28px; }
  .gs-grid { grid-template-columns:minmax(0, 1fr); gap:18px; }
  .gs-part { grid-template-columns:30px minmax(0, 1fr); } .gs-part .gs-bar { grid-column:2; }
  .gs-t, .gs-t tbody, .gs-t tr, .gs-t th, .gs-t td { display:block; } .gs-t thead { display:none; }
  .gs-t tr { border-top:1px solid var(--gs-line); padding:8px 0; } .gs-t tr:first-child { border-top:0; }
  .gs-t th, .gs-t td { border-top:0; padding:3px 14px; }
  .gs-t td::before { content:attr(data-l) ': '; font-weight:700; color:var(--gs-text); }
  .rp-ct .rp-gs-w { font-size:10px; }
}
@media (prefers-reduced-motion: reduce) {
  .gs-ov, .gs-box { transition:none !important; } .gs-box { transform:none !important; }
}
html.dark .gs-ov { --gs-ink:var(--th-dtext); --gs-text:var(--th-dmute); --gs-mute:var(--th-dmute); --gs-line:rgba(255,255,255,.12); --gs-card:var(--th-dcard); --gs-soft:var(--th-dsoft); --gs-eb:var(--th-daccent); background:rgba(0,0,0,.6); }
html.dark .gs-d3 { background:var(--th-dsoft); color:var(--th-dtext); } html.dark .gs-d1 { background:#5A3A32; color:var(--th-dtext); }
/* a part not counted because it can only help (moved forward, owner Oct 30): a grey dot and bar, the chip (score-why.css) */
.gs-dg { background:var(--th-soft2); color:var(--th-mute); box-shadow:inset 0 0 0 1px var(--th-line2); }
.gs-nc .gs-pt b { color:var(--gs-text); } .gs-nc .gs-pt > span { color:var(--gs-mute); }
.gs-pt b .sw-chip { display:inline-block; margin-left:8px; font-size:11px; font-weight:600; }   /* not the full-width line under the name */
.gs-nc .gs-bar > i { background:var(--th-line2); }
html.dark .gs-dg { background:var(--th-dsoft); color:var(--th-dmute); box-shadow:inset 0 0 0 1px var(--th-dline); } html.dark .gs-nc .gs-bar > i { background:var(--th-dline); }

/* Kate calls (web/js/kate.js). Cottage navy #1c3461 is Kate's colour (her mark, the start button, her side of the transcript);
   orange #e57824 means "look at this" (the live pill's pulse, Needs checking, the current step). Everything else reuses the
   portal: the cards, initials avatars, grey ID chips and the type. Desktop: a panel on the right. Phone: a full-screen sheet
   whose Start button stays at the bottom. */
:root { --kt-navy:#1c3461; --kt-navy2:#27467f; --kt-orange:#e57824; --kt-oink:#8f4208; --kt-osoft:#fdf1e6; --kt-line:#dce6f2; --kt-soft:#f3f6fb;
  --kt-mute:#55657c; --kt-ink:#16233a; --kt-paper:#fff; --kt-green:#1d6a3c; --kt-gsoft:#e5f3ea; --kt-red:#9f2a20; --kt-rsoft:#fbeae8; --kt-blue:#1f4f99; --kt-bsoft:#e8effb; }
html.dark { --kt-line:#2a3e5f; --kt-soft:#16263f; --kt-mute:#a9b8ce; --kt-ink:#e6eef9; --kt-paper:#12223a; --kt-osoft:#3a2615; --kt-oink:#ffc48f; --kt-gsoft:#173826; --kt-green:#9be0b4;
  --kt-rsoft:#3b1d1a; --kt-red:#ffb4a9; --kt-bsoft:#1c3a66; --kt-blue:#b9d3ff; }

.kt-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.kt-av { display:inline-grid; place-items:center; width:var(--s); height:var(--s); flex:none; border-radius:50%; }
.kt-av svg { display:block; }
.kt-av.live { box-shadow:0 0 0 0 rgba(229,120,36,.55); animation:kt-pulse 1.8s ease-out infinite; }
@keyframes kt-pulse { 0% { box-shadow:0 0 0 0 rgba(229,120,36,.55); } 70% { box-shadow:0 0 0 7px rgba(229,120,36,0); } 100% { box-shadow:0 0 0 0 rgba(229,120,36,0); } }
/* call guides, recert due, the patient's identity check (Nov 9) */
.kt-settings textarea, .kt-gform textarea, .kt-gform select, .kt-sit input { width:100%; box-sizing:border-box; padding:8px 10px; border:1px solid var(--kt-line); border-radius:10px; font:inherit; font-size:14px; color:var(--kt-ink); background:var(--kt-paper); }
.kt-settings .kt-voice .btn { justify-self:start; align-self:flex-start; }
.kt-guides, .kt-recert { margin:14px 0; padding:16px 18px; border-radius:16px; background:var(--kt-paper); border:1px solid var(--kt-line); color:var(--kt-ink); }
.kt-gh { display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.kt-gh h3 { margin:0; font-size:15px; }
.kt-glist { display:flex; flex-direction:column; gap:6px; }
.kt-grow2 { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; min-height:44px; padding:8px 12px; text-align:left; border:1px solid var(--kt-line); border-radius:12px; background:transparent; font:inherit; color:inherit; cursor:pointer; }
.kt-grow2:hover, .kt-grow2:focus-visible { border-color:var(--kt-navy); }
.kt-gl { font-weight:600; flex:1 1 220px; }
.kt-gst { margin-top:10px; } .kt-gst summary { cursor:pointer; font-weight:600; min-height:32px; }
.kt-gform { display:flex; flex-direction:column; gap:12px; }
.kt-gform label { display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; }
.kt-sits { display:flex; flex-direction:column; gap:6px; } .kt-sits .btn { align-self:flex-start; }
.kt-sit { display:grid; grid-template-columns:1fr 1fr 36px; gap:6px; align-items:center; }
.kt-gprev pre { white-space:pre-wrap; word-break:break-word; max-height:320px; overflow:auto; padding:10px; border-radius:10px; border:1px solid var(--kt-line); font-size:12.5px; }
.kt-rlist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.kt-rrow { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:8px 12px; border:1px solid var(--kt-line); border-radius:12px; }
.kt-rm { font-weight:600; font-size:13px; min-width:190px; } .kt-rm.now { color:#b3541e; }
.kt-rc { display:flex; flex-direction:column; flex:1 1 220px; min-width:0; }
.kt-idchk { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; } .kt-idchk .kt-note { grid-column:1 / -1; margin:0; }
.kt-cg { margin:10px 0; } .kt-cg summary { cursor:pointer; font-weight:600; display:flex; gap:6px; align-items:center; min-height:32px; }
.kt-cgl { margin:6px 0; padding-left:18px; font-size:13.5px; }
@media (max-width: 640px) { .kt-sit { grid-template-columns:1fr 36px; } .kt-sit [data-sa] { grid-column:1; } .kt-idchk { grid-template-columns:1fr; } .kt-rm { min-width:0; } }
@media (prefers-reduced-motion: reduce) { .kt-av.live { animation:none; box-shadow:0 0 0 2px var(--kt-orange); } }
.kt-grow { flex:1; }

/* chips: state (how the call went on the line) and outcome (what the family member said) */
.kt-chip { display:inline-flex; align-items:center; gap:5px; padding:2px 9px 2px 8px; border-radius:999px; font-size:12px; font-weight:600; line-height:20px; white-space:nowrap; border:1px solid transparent; background:var(--kt-soft); color:var(--kt-mute); }
.kt-chip svg { flex:none; }
.kt-chip.st-prep { background:var(--kt-bsoft); color:var(--kt-blue); }
.kt-chip.st-ring { background:var(--kt-osoft); color:var(--kt-oink); }
.kt-chip.st-live { background:var(--kt-navy); color:#fff; }
.kt-chip.st-end { background:var(--kt-soft); color:var(--kt-ink); border-color:var(--kt-line); }
.kt-chip.st-fail { background:var(--kt-rsoft); color:var(--kt-red); }
.kt-chip.st-check { background:var(--kt-orange); color:#1f1306; }
.kt-chip.o-good { background:var(--kt-gsoft); color:var(--kt-green); }
.kt-chip.o-mid { background:var(--kt-bsoft); color:var(--kt-blue); }
.kt-chip.o-staff { background:var(--kt-osoft); color:var(--kt-oink); border-color:rgba(229,120,36,.45); }
.kt-chip.o-quiet { background:var(--kt-soft); color:var(--kt-mute); border-color:var(--kt-line); }
.kt-chip.o-bad { background:var(--kt-rsoft); color:var(--kt-red); }
.kt-chip.later { background:transparent; color:var(--kt-mute); border-color:var(--kt-line); }

/* 1. on My day cards */
.kt-cardbits { display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; margin-left:4px; }
.kt-callbtn { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:2px 10px 2px 4px; border-radius:999px; border:1px solid var(--kt-navy); background:var(--kt-paper); color:var(--kt-navy); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
html.dark .kt-callbtn { color:#dbe7ff; border-color:#6f8fc9; }
.kt-callbtn:hover { background:var(--kt-navy); color:#fff; }
.kt-callbtn:focus-visible, .kt-sheet :focus-visible, .kt-live:focus-visible, .kt-tr:focus-visible { outline:3px solid var(--th-focus, #1F5FC7); outline-offset:2px; }
.kt-callbtn.is-off { border-style:dashed; border-color:var(--kt-line); color:var(--kt-mute); background:transparent; cursor:not-allowed; }
.kt-callbtn.is-off .kt-av { filter:grayscale(1); opacity:.6; }
.kt-cardnote { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:0 0 6px; padding:6px 10px; border-radius:10px; background:var(--kt-soft); border-left:3px solid var(--kt-navy); color:var(--kt-ink); font-size:13px; line-height:1.4; }
.kt-cardnote > span:not(.sub) { flex:1 1 200px; min-width:0; }
.kt-cardnote .sub { margin-left:auto; font-size:12px; color:var(--kt-mute); }

/* the top-bar pill */
.kt-live { display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:3px 12px 3px 4px; border-radius:999px; border:0; background:var(--kt-navy); color:#fff; font:inherit; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.kt-live b { font-variant-numeric:tabular-nums; color:#ffd3ad; font-weight:700; }
.kt-live.check { background:var(--kt-orange); color:#1f1306; }

/* the sheet */
.kt-scrim { position:fixed; inset:0; z-index:40; background:rgba(16,30,58,.45); display:flex; justify-content:flex-end; }
.kt-scrim[hidden] { display:none; }
.kt-sheet { width:min(620px, 100vw); height:100%; display:flex; flex-direction:column; background:var(--kt-paper); color:var(--kt-ink); box-shadow:-24px 0 60px rgba(16,30,58,.25); outline:none; }
.kt-head { display:flex; align-items:center; gap:12px; padding:18px 22px 12px; }
.kt-ht { flex:1; min-width:0; }
.kt-ht h2 { margin:0; font-size:20px; line-height:1.2; font-weight:800; letter-spacing:-.01em; color:var(--kt-ink); }
.kt-hs { margin-top:2px; font-size:13.5px; color:var(--kt-mute); }
.kt-rid { margin:0 0 0 4px; }
.kt-mode { padding:3px 10px; border-radius:999px; background:var(--kt-osoft); color:var(--kt-oink); font-size:12px; font-weight:700; white-space:nowrap; }
.kt-x { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--kt-line); background:transparent; color:var(--kt-ink); cursor:pointer; }
.kt-steps { display:flex; gap:4px; margin:0; padding:0 22px 12px; list-style:none; border-bottom:1px solid var(--kt-line); counter-reset:none; }
.kt-steps li { flex:1; display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--kt-mute); padding-top:8px; border-top:3px solid var(--kt-line); }
.kt-steps li span { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--kt-soft); font-size:11px; }
.kt-steps li.done { border-top-color:var(--kt-navy); color:var(--kt-ink); }
.kt-steps li.done span { background:var(--kt-navy); color:#fff; }
.kt-steps li.on { border-top-color:var(--kt-orange); color:var(--kt-ink); }
.kt-steps li.on span { background:var(--kt-orange); color:#1f1306; }
.kt-body { flex:1; overflow:auto; padding:6px 22px 22px; overscroll-behavior:contain; }
.kt-foot { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 22px; border-top:1px solid var(--kt-line); background:var(--kt-paper); }
.kt-foot .btn.primary, .kt-go { background:var(--kt-navy); border-color:var(--kt-navy); color:#fff; }
.kt-foot .btn.primary:disabled { opacity:.45; cursor:not-allowed; }
.kt-stop { background:var(--kt-red) !important; border-color:var(--kt-red) !important; color:#fff !important; }
html.dark .kt-stop { background:#c2412f !important; border-color:#c2412f !important; }
.kt-h { margin:20px 0 8px; font-size:14px; font-weight:800; color:var(--kt-ink); letter-spacing:0; }
.kt-note, .kt-proof { display:flex; gap:8px; align-items:flex-start; margin:14px 0 0; font-size:13px; color:var(--kt-mute); }
.kt-proof { padding:10px 12px; border-radius:10px; background:var(--kt-soft); color:var(--kt-ink); }
.kt-err { display:flex; gap:8px; align-items:flex-start; margin-top:10px; padding:10px 12px; border-radius:10px; background:var(--kt-rsoft); color:var(--kt-red); font-size:13.5px; }
.kt-banner { display:flex; gap:10px; align-items:flex-start; margin:14px 0 4px; padding:12px 14px; border-radius:12px; font-size:13.5px; line-height:1.45; border:1px solid; }
.kt-banner.warn { background:var(--kt-osoft); border-color:var(--kt-orange); color:var(--kt-ink); }
.kt-banner.warn > svg { color:var(--kt-orange); }
.kt-banner.bad { background:var(--kt-rsoft); border-color:rgba(159,42,32,.35); color:var(--kt-ink); }
.kt-banner.bad > svg { color:var(--kt-red); }
.kt-banner svg { flex:none; margin-top:1px; }
.kt-bb { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }

/* 2. prepare */
.kt-people { display:grid; gap:8px; }
.kt-person { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--kt-line); border-radius:14px; cursor:pointer; background:var(--kt-paper); }
.kt-person input { margin-top:5px; accent-color:var(--kt-navy); }
.kt-person.on { border-color:var(--kt-navy); box-shadow:inset 0 0 0 1px var(--kt-navy); }
.kt-person.blocked { cursor:not-allowed; background:var(--kt-soft); }
.kt-person .av { width:34px; height:34px; font-size:12px; }
.kt-pm { display:flex; flex-direction:column; gap:2px; min-width:0; }
.kt-pm b { font-size:15px; }
.kt-ph { font-variant-numeric:tabular-nums; font-weight:600; }
.kt-ver { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--kt-green); font-weight:600; }
.kt-empty { padding:14px; border:1px dashed var(--kt-line); border-radius:12px; color:var(--kt-mute); font-size:13.5px; }
.kt-add { margin-top:10px; border:1px solid var(--kt-line); border-radius:14px; }
.kt-add summary { display:flex; align-items:center; gap:8px; padding:11px 14px; cursor:pointer; font-weight:700; font-size:14px; color:var(--kt-navy); }
html.dark .kt-add summary { color:#c9dbff; }
.kt-form { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; padding:2px 14px 14px; }
.kt-form label { display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color:var(--kt-mute); }
.kt-form input:not([type=checkbox]), .kt-form select, .kt-f select, .kt-f input[type=date] { min-height:40px; padding:8px 10px; border:1px solid var(--kt-line); border-radius:10px; font:inherit; font-size:14px; color:var(--kt-ink); background:var(--kt-paper); }
.kt-form .kt-check, .kt-form .kt-sugg, .kt-form #ktSaveErr { grid-column:1 / -1; }
.kt-form .btn { justify-self:start; }
.kt-sugg { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.kt-pill { padding:4px 10px; border-radius:999px; border:1px solid var(--kt-line); background:var(--kt-soft); font:inherit; font-size:12.5px; font-weight:600; color:var(--kt-ink); cursor:pointer; }
.kt-check { display:flex !important; flex-direction:row !important; gap:10px; align-items:flex-start; font-size:13.5px !important; font-weight:500 !important; color:var(--kt-ink) !important; cursor:pointer; }
.kt-check input { width:18px; height:18px; margin-top:1px; flex:none; accent-color:var(--kt-navy); }
.kt-seg { display:inline-flex; padding:3px; border-radius:12px; background:var(--kt-soft); border:1px solid var(--kt-line); gap:2px; flex-wrap:wrap; }
.kt-seg label { position:relative; }
.kt-seg input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.kt-seg span { display:block; padding:7px 16px; border-radius:9px; font-size:13.5px; font-weight:700; color:var(--kt-mute); }
.kt-seg input:checked + span { background:var(--kt-navy); color:#fff; }
.kt-seg input:focus-visible + span { outline:3px solid var(--th-focus, #1F5FC7); outline-offset:1px; }
.kt-items { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; }
.kt-item { display:flex; gap:9px; align-items:center; padding:9px 12px; border:1px solid var(--kt-line); border-radius:11px; font-size:13.5px; cursor:pointer; }
.kt-item input { width:17px; height:17px; flex:none; accent-color:var(--kt-navy); }
.kt-item:has(input:checked) { border-color:var(--kt-navy); background:var(--kt-bsoft); }

/* 3. preview */
.kt-recip { display:flex; gap:14px; align-items:flex-start; margin-top:14px; padding:16px; border-radius:16px; background:var(--kt-soft); border:1px solid var(--kt-line); }
.kt-recip .av { width:44px; height:44px; font-size:15px; }
.kt-rn { font-size:18px; font-weight:800; }
.kt-rp { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:3px 0; font-size:14.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.kt-ask { margin:0; padding:0; list-style:none; display:grid; gap:4px; }
.kt-ask li { display:flex; gap:8px; align-items:center; font-size:14px; }
.kt-ask svg { color:var(--kt-green); flex:none; }
.kt-open { display:flex; gap:10px; align-items:flex-start; margin:0; padding:12px 14px; border-radius:4px 14px 14px 14px; background:var(--kt-navy); color:#fff; font-size:14.5px; line-height:1.45; }
.kt-guide { margin:10px 0 0; padding-left:22px; display:grid; gap:4px; font-size:13.5px; color:var(--kt-ink); }
.kt-sms { margin-top:16px; }
.kt-sms.off { opacity:.75; cursor:not-allowed; }
.kt-review { margin-top:12px; padding:12px 14px; border-radius:12px; border:2px solid var(--kt-navy); background:var(--kt-paper); }
.kt-why { display:flex; gap:6px; align-items:center; margin:10px 0 0; color:var(--kt-oink); font-weight:600; font-size:13px; }

/* 4. live */
.kt-track { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:16px 0 0; padding:0; list-style:none; }
.kt-track li { display:flex; align-items:center; gap:4px; }
.kt-track li + li::before { content:''; width:16px; height:2px; background:var(--kt-line); }
.kt-track li.done + li::before, .kt-track li.on::before { background:var(--kt-navy); }
.kt-track li.on .kt-chip { box-shadow:0 0 0 2px var(--kt-orange); }
.kt-livebar { display:flex; align-items:center; gap:12px; margin-top:16px; padding:14px 16px; border-radius:16px; background:var(--kt-navy); color:#fff; }
.kt-livebar > div { flex:1; display:flex; flex-direction:column; min-width:0; }
.kt-livebar .sub { color:#c4d3ee; font-size:13px; }
.kt-to { font-size:16px; font-weight:800; }
.kt-timer { font-size:30px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.02em; color:#ffd3ad; }
.kt-reason { margin:10px 2px 0; font-size:13px; color:var(--kt-mute); }
.kt-chat { display:flex; flex-direction:column; gap:10px; margin-top:12px; padding:14px; border-radius:16px; background:var(--kt-soft); min-height:180px; max-height:min(46vh, 460px); overflow:auto; }
.kt-chat.flat { max-height:none; min-height:0; }
.kt-b { display:flex; gap:8px; align-items:flex-end; max-width:86%; }
.kt-b p { margin:2px 0 0; padding:9px 12px; font-size:14px; line-height:1.45; }
.kt-bw { font-size:11.5px; font-weight:700; color:var(--kt-mute); padding:0 4px; }
.kt-b.k p { background:var(--kt-paper); border:1px solid var(--kt-line); border-left:3px solid var(--kt-navy); border-radius:4px 14px 14px 14px; }
.kt-b.f { align-self:flex-end; flex-direction:row-reverse; text-align:right; }
.kt-b.f p { background:var(--kt-bsoft); color:var(--kt-ink); border-radius:14px 4px 14px 14px; text-align:left; }
.kt-b .av { width:26px; height:26px; font-size:10px; }
.kt-wait { margin:auto; color:var(--kt-mute); font-size:13.5px; }

/* 5. result */
.kt-res { margin-top:14px; padding:16px; border-radius:16px; border:1px solid var(--kt-line); }
.kt-resline { display:flex; flex-wrap:wrap; gap:6px; }
.kt-big { margin:10px 0 4px; font-size:20px; line-height:1.3; font-weight:800; }
.kt-follow { display:flex; gap:6px; align-items:center; margin:0; font-size:14px; color:var(--kt-ink); }
.kt-meta { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin:14px 0 0; padding-top:12px; border-top:1px solid var(--kt-line); }
.kt-meta dt { font-size:12px; font-weight:700; color:var(--kt-mute); }
.kt-meta dd { margin:2px 0 0; font-size:13.5px; }
.kt-items-res { margin:0; padding:0; list-style:none; border:1px solid var(--kt-line); border-radius:12px; }
.kt-items-res li { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:10px 12px; font-size:14px; }
.kt-items-res li + li { border-top:1px solid var(--kt-line); }
.kt-trans { margin-top:14px; border:1px solid var(--kt-line); border-radius:12px; }
.kt-trans summary { padding:11px 14px; cursor:pointer; font-weight:700; font-size:14px; }
.kt-trans .kt-chat { margin:0 10px 10px; }

/* the case panel and history rows */
.kt-panel { margin:16px 0 4px; padding:14px 16px; border-radius:16px; border:1px solid var(--kt-line); background:var(--kt-paper); color:var(--kt-ink); }
.kt-ph2 { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.kt-ph2 h4 { margin:0; font-size:15px; font-weight:800; }
.kt-hist { margin:10px 0 0; padding:0; list-style:none; display:grid; gap:6px; }
.kt-rowbtn { width:100%; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; padding:10px 12px; border:1px solid var(--kt-line); border-radius:12px; background:var(--kt-paper); color:var(--kt-ink); font:inherit; text-align:left; cursor:pointer; }
.kt-rowbtn:hover, .kt-tr[data-open]:hover { background:var(--kt-soft); }
.kt-when { font-size:12.5px; font-weight:700; color:var(--kt-mute); white-space:nowrap; display:flex; flex-direction:column; }
.kt-rwho { font-weight:700; font-size:14px; }
.kt-rchips { display:flex; flex-wrap:wrap; gap:4px; }
.kt-rsum { grid-column:1 / -1; font-size:13px; color:var(--kt-mute); }

/* 6. the Calls page */
.kt-pagehead { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.kt-pt { display:flex; gap:14px; align-items:center; }
.kt-pt h1 { margin:0; }
.kt-settings { margin:14px 0; padding:16px 18px; border-radius:16px; background:var(--kt-paper); border:1px solid var(--kt-line); display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; color:var(--kt-ink); }
.kt-settings h3 { grid-column:1 / -1; margin:0; font-size:15px; }
.kt-tog { display:flex; gap:10px; align-items:flex-start; cursor:pointer; }
.kt-tog input { width:20px; height:20px; flex:none; margin-top:2px; accent-color:var(--kt-navy); }
.kt-tog > span { display:flex; flex-direction:column; gap:2px; font-size:14px; }
.kt-tog.off { opacity:.8; cursor:not-allowed; }
.kt-voice { display:flex; flex-direction:column; gap:8px; font-size:14px; }
.kt-voice > span { display:flex; flex-direction:column; gap:2px; }
.kt-voice select { min-height:40px; max-width:320px; padding:8px 10px; border:1px solid var(--kt-line); border-radius:10px; font:inherit; font-size:14px; color:var(--kt-ink); background:var(--kt-paper); }
.kt-filters { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; margin:6px 0 14px; }
.kt-f { display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color:var(--kt-mute); }
.kt-fc { flex-direction:row; align-items:center; gap:7px; min-height:40px; color:var(--kt-ink); font-size:13.5px; }
.kt-fc input { width:17px; height:17px; accent-color:var(--kt-navy); }
.kt-table { border:1px solid var(--kt-line); border-radius:16px; background:var(--kt-paper); overflow:hidden; color:var(--kt-ink); }
.kt-tr { width:100%; display:grid; grid-template-columns:150px minmax(160px, 1.1fr) minmax(150px, 1fr) minmax(170px, 1.1fr) minmax(200px, 1.6fr); gap:12px; align-items:start; padding:12px 16px; border:0; border-top:1px solid var(--kt-line); background:transparent; font:inherit; font-size:13.5px; color:inherit; text-align:left; }
.kt-tr[data-open] { cursor:pointer; }
.kt-tr > span { min-width:0; display:flex; flex-direction:column; gap:2px; }
.kt-tr .kt-rchips { flex-direction:row; }
.kt-tr .kt-rsum { grid-column:auto; }
.kt-th { border-top:0; background:var(--kt-soft); font-size:12px; font-weight:700; color:var(--kt-mute); padding-top:9px; padding-bottom:9px; }
.kt-emptybig { display:flex; flex-direction:column; align-items:center; gap:8px; padding:40px 20px; text-align:center; border:1px dashed var(--kt-line); border-radius:16px; }
.kt-emptybig b { font-size:16px; }

@media (max-width: 900px) {
  .kt-tr { grid-template-columns:1fr 1fr; }
  .kt-th { display:none; }
  .kt-tr .kt-rsum { grid-column:1 / -1; }
  .kt-settings { grid-template-columns:1fr; }
}
/* phone: a full-screen sheet, the main button always in reach */
@media (max-width: 640px) {
  .kt-sheet { width:100vw; box-shadow:none; }
  .kt-head { padding:12px 16px 10px; }
  .kt-ht h2 { font-size:18px; }
  .kt-steps { padding:0 16px 10px; }
  .kt-steps li { font-size:0; gap:0; }
  .kt-steps li span { font-size:11px; }
  .kt-steps li.on { font-size:12px; gap:6px; }
  .kt-body { padding:4px 16px 16px; }
  .kt-foot { position:sticky; bottom:0; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -8px 20px rgba(16,30,58,.08); }
  .kt-foot .kt-go, .kt-foot .btn.primary, .kt-foot .kt-stop { flex:1 1 100%; order:-1; min-height:48px; justify-content:center; font-size:15px; }
  .kt-foot .kt-grow { display:none; }
  .kt-form, .kt-items { grid-template-columns:1fr; }
  .kt-meta { grid-template-columns:1fr 1fr; }
  .kt-timer { font-size:24px; }
  .kt-tr { grid-template-columns:1fr; gap:6px; }
  .kt-live span { display:none; }
  .kt-cardnote .sub { margin-left:0; }
}
html.kt-open { overflow:hidden; }
/* inside a My day card the row's own layout rules must not reach Kate's line */
.row.dnr .kt-cardnote { display:grid !important; grid-template-columns:16px minmax(0, 1fr); align-items:start; justify-items:start; column-gap:8px; row-gap:2px; width:100%; box-sizing:border-box; text-align:left; }
.row.dnr .kt-cardnote > .kt-av { margin-top:2px; }
.row.dnr .kt-cardnote > span:not(.sub):not(.kt-av) { grid-column:2; }
.row.dnr .kt-cardnote > .sub { grid-column:2; margin:0; }
/* the sheet never grows past the screen because of a long word or the chips row (flex items keep their content width) */
.kt-sheet { min-width:0; max-width:100vw; }
.kt-body, .kt-chat, .kt-livebar > div { min-width:0; }
.kt-chat { overflow-x:hidden; }
.kt-b p { overflow-wrap:anywhere; }
/* phone: the "Kate is on a call" pill floats above the page (the top bar has no room for it) */
@media (max-width: 640px) {
  .kt-live { position:fixed; right:16px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:30; padding:4px 14px 4px 4px; box-shadow:0 10px 28px rgba(16,30,58,.3); }
  .kt-live span { display:inline; }
}

/* Tap size on a phone (owner's overnight plan, Oct 26; scripts/tap-contrast-check.js): at 600px and under every button, tab,
   select and link is at least 44px tall, or has 44px of tap room. Buttons and tabs grow to 44px; small links inside lines of
   text (a GCR number, a phone number, a name, "More") get a 44px tap area with the same padding and negative margin, so the
   line itself does not grow. Loaded last; phones only, the desk and half a screen are unchanged. */
@media (max-width: 600px) {
  html.bento :is(button, .btn, a.btn, [role=tab], select, .linkbtn):not(.m-pill):not([hidden]) { min-height:44px; }
  html.bento :is(.linkbtn, button.linkbtn) { display:inline-flex; align-items:center; }
  html.bento .topbar :is(.btn, .bell, button) { min-width:44px; min-height:44px; }
  html.bento .tb-right #bellSlot > button, html.bento .tb-right .bell, html.bento .tb-right > .btn { width:44px; height:44px; min-height:44px; }   /* bento-phone.css made them 40 */
  /* tab groups: the tabs themselves 44px, the group a little taller */
  html.bento :is([role=tablist], .seg, .hp-seg, .hp-tabs, .bmt-seg, .tabs, .tv-tabs, .hx-filters) > :is(button, a) { min-height:44px; }
  html.bento :is(.bmt-seg, .hp-seg) > button { display:inline-flex; align-items:center; }
  /* expandable lines ("More", the last note, "Ready to close") */
  html.bento summary { min-height:44px; display:flex; align-items:center; gap:6px; }
  /* links inside text: a 44px tap area without a taller line */
  html.bento :is(a.ridlink, a.rid, a.tel, a.pb-name, .row[data-id] .who > span[role=button]) { display:inline-flex; align-items:center; padding-block:14px; margin-block:-14px; }
  /* small chips that are buttons */
  html.bento :is(.dp-chip, .hp-x, .su-hide, .fl-more, .rp-n) { min-height:44px; min-width:44px; }
  /* a checkbox: its label is the target */
  html.bento label:has(> input[type=checkbox]), html.bento label:has(> input[type=radio]) { min-height:44px; display:inline-flex; align-items:center; gap:8px; }
  html.bento input.tick { width:24px; height:24px; margin:10px; }
}

/* Contrast AA (owner's overnight plan, Oct 26; design lead's decision; scripts/tap-contrast-check.js). Loaded last.
   1. The orange hero tiles keep white text on orange (the v6 look): the gradient a little darker (#E5732A → #C2561A) so the big
      white text reaches 3:1 (AA large), and every small white text sits on a darker band (rgba(70,25,0,.30), white at 100%)
      reaching 4.5:1. No white at 85% on the hero.
   2. Small orange buttons: white on a solid darker orange (#B8541A, 4.9:1).
   3. Dark mode: the orange chosen pill has dark text (#1F1B16).
   4. Green with white text: #1E7F47. */
html.bento, html.bento.dark { --b-hero:var(--th-hero); --b-hero-ink:#FFFFFF; --b-hero-sub:#FFFFFF; --aa-band:rgba(var(--th-panel4-rgb), .30); }
/* This month's wins (bento-wins.css has its own gradient) */
html.bento .tw-big { background:var(--b-hero); }

/* the other orange tiles with their own gradient: the Overview's Late now, the shout-outs tiles */
:root, html.dark { --v4-o1:var(--th-accent2); --v4-o2:var(--th-accent3); }
html.bento .v4-hot { background:var(--th-hero) !important; }
.mt-orange, .m2-feed { background:var(--th-hero); }

/* the hero tiles: every heading and big line bold (AA large at 3:1); every small line white at 100%. The darker band behind it
   (from the orange tiles, Oct 26) is gone since the tiles are deep blue (owner, Nov 7: "coloured backgrounds behind text that
   don't match the card"): white on #1F5FC7 is 5.97:1 and on #174A9C 8.41:1, above 4.5:1 for small text without it. */
:is(html.bento .b-hero, .tw-big, html.bento .b-case .dn-donext, .v4-hot, .mt-orange, .m2-feed) :is(h2, h3, .nowtext, .dna-h) { font-weight:700; color:#fff; }
:is(html.bento .b-hero, .tw-big, html.bento .b-case .dn-donext, .v4-hot, .mt-orange, .m2-feed) :is(.sub, small, .muted, .dn-label, .nowwhy, .whyline, .kpi-label, .kpi-sub, .rp-kl, .tw-eb, .tw-l, .tw-foot, .v4-l, .mt-eb, .m2-empty, .bmd-hl > span, .hp-kpis span) {
  color:#fff !important; background:none; padding:0; }
/* a list of steps (Set up HHA one-click): white on the tile, no band */
html.bento .b-hero :is(ol, ul) { background:none; padding:0 0 0 20px; color:#fff; }
html.bento .b-hero :is(ol, ul) :is(li, b) { color:#fff; background:none; }
/* the "First:" box on Start calling: the darker band instead of a lighter one */
html.bento .bmd-first, html.bento.dark .bmd-first { background:var(--aa-band); }
html.bento .bmd-first :is(b, .sub, span) { color:#fff !important; background:none; padding:0; }

/* 2. small orange buttons: white on a solid darker orange */
html body :is(.su-card .btn.su-go, .pf-edit .btn.pf-save, main.dnp-meet .mt-head .btn.m2-primary, .m2-foot .btn.m2-send),
main.dnp-forms .fl-up, .pf-edit .pf-save, main.dnp-forms .fl-row.sel .fl-n { background:var(--th-accent2); border-color:var(--th-accent2); color:#fff; }

/* 3. dark mode: the orange chosen pill has dark text */
html.dark .tv-tabs button[aria-selected=true] { color:var(--th-dpage); }

/* 4. green with white text */
html.bento .bmd-chip.g, html.bento .gm-of { background:#1E7F47; color:#fff; }

/* more hero tiles: the Report's first number, the Helper's first number, Insights' expected revenue */
:is(.rp-k.hero, .dna-helper .hp-kpis > div:first-child, :is(#insOut, #rpInsights) .tile.in-rev) :is(.rp-kl, span, .sub, .in-foot, .in-zero) { color:#fff !important; opacity:1 !important; background:var(--aa-band); border-radius:8px; padding:2px 8px; width:fit-content; max-width:100%; box-sizing:border-box; }
:is(.rp-k.hero, .dna-helper .hp-kpis > div:first-child, :is(#insOut, #rpInsights) .tile.in-rev) :is(h3, b) { font-weight:700; }
.dna-helper .hp-kpis > div:first-child b span { background:none; padding:0; }
:root { --in-or1:var(--th-accent); --in-or2:var(--th-accent2); }   /* light only: dark mode keeps its own darker orange */
/* My day's "late" bubble: white on the darker orange */
html.bento .bmd-bub.h { background:var(--th-accent2); }

/* one-offs found by the check */
/* the count in a chosen tab follows the tab's own text colour (it was grey on the dark or light pill) */
:is([role=tablist], .seg, .tabs) > :is([aria-selected=true], [aria-pressed=true], .on) :is(.sub, .tab-n, .n) { color:inherit !important; opacity:1; }
/* Save signature: the main button (another rule made it light grey under white text) */
html.bento main .gm-btns .btn.gm-main:not(#_aa) { background:var(--th-accent2); color:#fff; }
html.bento.dark main .gm-btns .btn.gm-main:not(#_aa) { background:var(--th-daccent); color:var(--th-dpage); }
/* the page kicker (date, eyebrow) a step darker on the warm glow; light enough in dark */
html.bento main :is(.eyebrow, .ov-eyebrow, .yw-eye):not(#_aa) { color:var(--th-mute); }
html.bento.dark main :is(.eyebrow, .ov-eyebrow, .yw-eye):not(#_aa) { color:var(--th-dmute); }
/* dark mode */
html.bento.dark main .fl-stats span { color:var(--ink2, var(--th-dmute)); }
html.bento.dark .hc-red:not(#_aa) { color:#FF8A7A; }
html.bento.dark .tag:not(#_aa) { background:rgba(255, 255, 255, .08); }
html.bento.dark .in-call b { color:var(--th-daccent); }
/* Users › Names in HHA notes, the dark warning rows: chat 4's rule (fix/dark-mine) */
/* the HHA robot is the page's dark tile: its field names in light ink too */
html.bento #robot > .panel .field :is(span, abbr, label) { color:var(--bt-dark-ink, var(--th-soft2)); }
/* the warning tags are white with !important in app.css: in dark mode a dark red tint instead of a white chip */
html.bento.dark :is(.tag.t-cut, .tag.t-trouble, .tag.t-decide, .tag.t-sent.stale, .tag.pb-tag.r-trouble, .tag.pb-tag.r-hr, .tag.pb-tag.r-overdue, .tag.pb-tag.r-cutoff, .tag.pb-tag.r-medicaid, .tag.pb-tag.r-hha, .tag.pb-tag.r-stuck, .tag.pb-tag.r-cfeec):not(#_aa) { background:rgba(255, 138, 122, .12) !important; }
/* the light theme's quiet grey (page kickers, eyebrows) one step darker: AA on the warm glow */
html.bento:not(.dark) { --text-tertiary:var(--th-mute); --bt-muted:var(--th-mute); }
/* Insights' expected revenue: its week rows and number boxes on the darker band (they were a lighter white veil) */
:is(#insOut, #rpInsights) .in-rev :is(.in-rb, .in-rv > div, .in-priced) { background:var(--aa-band) !important; }
:is(#insOut, #rpInsights) .in-rev :is(.in-rb, .in-rv > div, .in-priced) :is(b, span, .in-n) { color:#fff; background:none; padding:0; }
html.bento:not(.dark) .in-call b { color:var(--th-accent2); }
:is(#insOut, #rpInsights) .in-rev .in-n { background:var(--aa-band); border-radius:6px; padding:0 4px; }
/* Insights' funnel bars carry their number in white: a solid darker orange behind it (light; dark keeps its darker orange) */
html.bento:not(.dark) .in-fbar i:not(.ok) { background:var(--th-accent2); }
/* the "First" label on Start calling: plain white on the band (no chip inside the band) */
html.bento .bmd-first :is(b, .sub, span, small):not(#_aa) { background:none; padding:0; border-radius:0; color:#fff !important; }
/* Team › People shout-outs (checked from Oct 27, Meet the team): the items were a white veil over the orange (white text 2.6:1);
   the same dark band as the hero rows, and the time at full strength */
.m2-feed .m2-fi { background:var(--aa-band, rgba(var(--th-panel4-rgb), .30)); }
.m2-feed .m2-fi i { opacity:1; color:#fff; }
/* a selected tab's count: its words are white on the navy tab (above), so the chip is a white veil, not the pale tint (Users: the
   count was white on pale blue, 1.2:1; blue theme pass, Oct 29) */
html.dn.bento main.dna .tabs button[aria-selected=true] .tab-n { background:rgba(255, 255, 255, .2); }
/* the focus ring on the navy panels and the deep blue tiles: white (the blue ring on white elsewhere; blue theme, Oct 29) */
:is(.tp-panel, .pf-wall, .b-hero, .v4-hot, .mt-orange, .m2-feed, .ld-stage, .tw-big, .dn-donext, #robot > .panel) { --v6-ring:#fff; --th-focus:#fff; }

/* Frosted glass (owner's boss, Oct 29, through the design lead: "modern and glassy, still blue and white"). The page is a pale
   blue canvas with three big soft blue blobs, fixed behind everything and painted once (no animation). Only the top-level
   surfaces are glass: the top bar, the left rail, the page cards and panels, dialogs and sheets, dropdowns and the search box;
   never rows, list items or chips. A glass surface is see-through white with a blur, a thin white edge and a light top line.
   No blur support: nearly solid white. "Reduce transparency": solid, no blobs. Dark mode: see-through navy, the blobs dimmer.
   The navy feature panels (Top performers, Leadership, Intake team) keep their gradient and get a thin glass sheen on top.
   Loaded last. Each list is a :where() (no weight of its own) with :not(#_g), so every glass rule weighs one id: above the
   pages' own rules (html.bento main.x .y), and the later rules here (the bar, the phone, glass inside glass) win by order. */
html.bento {
  --gl-bg:rgba(255,255,255,.62); --gl-solid:rgba(255,255,255,.96); --gl-edge:rgba(255,255,255,.7); --gl-hi:rgba(255,255,255,.95);
  --gl-blur:blur(18px) saturate(140%); --gl-shadow:0 10px 30px rgba(var(--th-ink-rgb), .08);
  --gl-bar:rgba(255,255,255,.84); --gl-dlg:rgba(255,255,255,.8); --gl-app:rgba(255,255,255,.4);   /* text right on the app card stays AA over the strongest blob */
  --gl-blobs:radial-gradient(42vmax 38vmax at 8% 6%, rgba(var(--th-accent-rgb), .18) 0%, rgba(var(--th-accent-rgb), 0) 70%),
    radial-gradient(46vmax 40vmax at 96% 34%, rgba(127, 178, 255, .22) 0%, rgba(127, 178, 255, 0) 70%),
    radial-gradient(40vmax 34vmax at 30% 104%, rgba(150, 214, 255, .2) 0%, rgba(150, 214, 255, 0) 70%);
  --gl-sheen:inset 0 1px 0 rgba(255,255,255,.22), inset 0 22px 26px -22px rgba(255,255,255,.18);
  --b-bg:var(--th-page); --b-app:var(--gl-app); --b-glow1:transparent; --b-glow2:transparent;
}
html.bento.dark {
  --gl-bg:rgba(var(--th-dcard-rgb), .55); --gl-solid:rgba(var(--th-dcard-rgb), .97); --gl-edge:rgba(255,255,255,.08); --gl-hi:rgba(255,255,255,.1);
  --gl-shadow:0 10px 30px rgba(0,0,0,.35); --gl-bar:rgba(var(--th-dcard-rgb), .86); --gl-dlg:rgba(var(--th-dcard-rgb), .8); --gl-app:rgba(var(--th-dpage2-rgb), .4);
  --gl-blobs:radial-gradient(42vmax 38vmax at 8% 6%, rgba(var(--th-accent-rgb), .12) 0%, rgba(var(--th-accent-rgb), 0) 70%),
    radial-gradient(46vmax 40vmax at 96% 34%, rgba(127, 178, 255, .07) 0%, rgba(127, 178, 255, 0) 70%),
    radial-gradient(40vmax 34vmax at 30% 104%, rgba(90, 160, 230, .07) 0%, rgba(90, 160, 230, 0) 70%);
  --b-bg:var(--th-dpage2);
}

/* the canvas: the blobs on a fixed layer behind the app (painted once; scrolling only moves the page over it) */
html.bento body { background:var(--b-bg); }
html.bento body::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:var(--gl-blobs); }
/* the app card: a faint pane, no blur (a blur here would stop the cards inside from seeing the blobs) */
html.bento .shell { background-image:none; box-shadow:inset 0 0 0 1px var(--gl-edge), 0 30px 80px rgba(var(--th-panel4-rgb), .08); }
html.bento.dark .shell { box-shadow:inset 0 0 0 1px var(--gl-edge), 0 30px 80px rgba(0,0,0,.45); }

/* the glass surfaces: the see-through white, the thin white edge, the light top line and the soft shadow */
html.bento body :where(#bpills, .b-pills, .tb-search, .tb-right > .btn, .tb-right .bell, .tb-right #bellSlot > button, .topbar .b-menu, .side.b-rail2,
  main .tile, main .b-tile, main .ov-card, main details.dn-fold > summary, main .b-ov-kpis .kpi, main .rp-card, main .rp-k, main .rp-tabs,
  main .fl-card, main .fl-how, main .tw-card, main .m2-tile, main .howto, main .empty.big, main section.pd.pf,
  .dhead, .hx-head, section.jn, .b-case-main, .dn-log-h,
  .sheet > .box, .fl-sheet-box, .gs-box, .rs-sheet, .gm-sheet, .qf, .pk-card, .nc-pop,
  .smenu-pop, .tb-drop, .fl-menu, .mtm-menu):not(#_g, .b-dark, .b-hero, .hero, .dark) {
  background-color:var(--gl-bg); box-shadow:inset 0 0 0 1px var(--gl-edge), inset 0 1px 0 var(--gl-hi), var(--gl-shadow);
}
/* the blur only on what opens over a still page: dialogs, sheets, dropdowns, popups. Measured (headless Chromium, CPU 4x slower,
   300 made-up cases, scrolling My day): a blur on every card took a frame from 17 ms to 83 ms; even on the sticky top bar and
   rail alone it cost about one frame in ten. So the cards (on the still, already soft blobs a blur looks the same) and the top
   bar and rail have none; those two are a little more solid instead, so what scrolls under them stays quiet */
html.bento body :where(.sheet > .box, .fl-sheet-box, .gs-box, .rs-sheet, .gm-sheet, .qf, .pk-card, .nc-pop, .smenu-pop, .tb-drop, .fl-menu, .mtm-menu):not(#_g) {
  -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur);
}
/* a dialog sits on a dark veil: at .62 its glass reads grey, so it is whiter */
html.bento body :where(.sheet > .box, .fl-sheet-box, .gs-box, .rs-sheet, .gm-sheet, .qf):not(#_g, .b-dark) { background-color:var(--gl-dlg); }
html.bento body :where(#bpills, .b-pills, .tb-search, .tb-right > .btn, .tb-right .bell, .tb-right #bellSlot > button, .topbar .b-menu, .side.b-rail2):not(#_g, .b-dark) { background-color:var(--gl-bar); }
/* glass inside glass: the see-through colour and the edge only */
html.bento body :where(#bpills, main .tile, main .b-tile, main .ov-card, main .rp-card, main .fl-card, main section.pd.pf, .b-case-main, .sheet > .box, .fl-sheet-box, .gs-box, .rs-sheet, .gm-sheet, .qf)
  :where(#bpills, .tile, .b-tile, .ov-card, .rp-card, .rp-k, .fl-card, .fl-how, .tw-card, .m2-tile, .howto, .empty, .dhead, .hx-head, section.jn, .dn-log-h, .b-case-main):not(#_g, .b-dark, .b-hero, .hero, .dark) {
  -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:inset 0 0 0 1px var(--gl-edge);
}
html.bento body .tb-search:focus-within:not(#_g) { box-shadow:0 0 0 3px rgba(var(--th-accent-rgb), .25), inset 0 0 0 1px var(--gl-edge); }
/* the dialogs' and sheets' backdrop: a light veil, so the glass box reads as glass */
html.bento :is(.gs-ov, .qf-ov) { -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }

/* the navy feature panels and the bright tiles: their colours stay (white text on them is AA); a thin light sheen along the top edge */
html.bento :is(.tp-c, .ld-stage, .tc-front) { box-shadow:var(--gl-sheen), var(--th-panel-shadow); }
html.bento main :is(.b-dark, .b-hero, .rp-k.hero, .rp-k.dark) { box-shadow:var(--gl-sheen), var(--gl-shadow); }
/* the Intake team card's back: navy glass (the card's own navy shows through, lighter at the top, with the glass edge) */
html.bento .tc-back { background:linear-gradient(160deg, rgba(var(--th-panel1-rgb), .5) 0%, rgba(var(--th-panel2-rgb), .72) 45%, rgba(var(--th-ink-rgb), .92) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), var(--gl-sheen); }

/* a phone: the bottom tab bar stays navy (its light words are AA on it), as navy glass */
@media (max-width: 600px) {
  html.bento body #bpills.b-pills { background-color:rgba(var(--th-ink-rgb), .9); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), var(--gl-sheen), 0 12px 30px rgba(var(--th-ink-rgb), .28); }
  html.bento.dark body #bpills.b-pills { background-color:rgba(var(--th-dcard-rgb), .92); box-shadow:inset 0 0 0 1px var(--gl-edge), 0 12px 30px rgba(0,0,0,.5); }
}
/* no blur in this browser: nearly solid */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  html.bento body :where(#bpills, .b-pills, .tb-search, .tb-right > .btn, .tb-right .bell, .tb-right #bellSlot > button, .topbar .b-menu, .side.b-rail2,
    main .tile, main .b-tile, main .ov-card, main details.dn-fold > summary, main .b-ov-kpis .kpi, main .rp-card, main .rp-k, main .rp-tabs,
    main .fl-card, main .fl-how, main .tw-card, main .m2-tile, main .howto, main .empty.big, main section.pd.pf,
    .dhead, .hx-head, section.jn, .b-case-main, .dn-log-h,
    .sheet > .box, .fl-sheet-box, .gs-box, .rs-sheet, .gm-sheet, .qf, .pk-card, .nc-pop,
    .smenu-pop, .tb-drop, .fl-menu, .mtm-menu):not(#_g, .b-dark, .b-hero, .hero, .dark) { background-color:var(--gl-solid); }
}
/* "Reduce transparency": solid surfaces, no blobs, no blur */
@media (prefers-reduced-transparency: reduce) {
  html.bento { --gl-bg:#FFFFFF; --gl-bar:#FFFFFF; --gl-dlg:#FFFFFF; --gl-app:var(--th-tint); --gl-blobs:none; }
  html.bento.dark { --gl-bg:var(--th-dcard); --gl-bar:var(--th-dcard); --gl-dlg:var(--th-dcard); --gl-app:var(--th-dpage2); }
  html.bento body *, html.bento body::before { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}