/* Huddle's reading layer. Every page loads this after its own <style>, so it changes how things look and never what
   they do: 14px type in tables, column headings in sentence case, one red thing per row instead of three, a sidebar
   in one colour, practice codes in grey, the same tiles and figures on every screen.
   Each page family keeps its own colour tokens, so dark mode follows:
     html.ui-shell  dashboard.html            (--text / --border / --teal)
     html.ui-pulse  staff, finance, openchair (--ink / --line / --accent)
     html.ui-calls  calls.html                (--fg / --line / --band)
   docs/DESIGN.md says why each rule is here. */

/* ═══════════════════════ 1. The shell: dashboard.html ═══════════════════════ */

/* Type: 14px in tables; headings that read as words, not labels */
.ui-shell body{font-size:14px;}
.ui-shell table{font-size:14px;}
.ui-shell th{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text2);padding:10px 12px;background:var(--card);border-bottom:1px solid var(--border-strong);}
.ui-shell td{padding:11px 12px;line-height:1.4;}
.ui-shell td a,.ui-shell td u{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--teal) 35%,transparent);}
.ui-shell td a:hover,.ui-shell td u:hover{text-decoration-color:currentColor;}
.ui-shell .cat-cell{gap:2px;min-width:160px;max-width:240px;}
.ui-shell .cat-g{font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text3);}
.ui-shell .cat-g.fd{color:var(--amber-ink);}
.ui-shell .fnd-cell{font-size:13.5px;min-width:220px;}

/* Row state: the stripe on the leading edge says overdue; the row itself stays white, so a queue is not a wall of pink */
.ui-shell tr.row-urg-red td,.ui-shell tr.row-urg-amber td{background:transparent;}
.ui-shell tbody tr:hover td,.ui-shell tr.row-urg-red:hover td,.ui-shell tr.row-urg-amber:hover td{background:var(--row-hover);}

/* Pills: red only where something is late. "Open" is a state, not an alarm. */
.ui-shell .badge{font-size:12px;font-weight:600;padding:3px 10px;}
.ui-shell .badge.open{background:var(--gray);color:var(--text2);}
.ui-shell .badge.overdue{background:var(--redbg);color:var(--red-ink);}
.ui-shell .badge.pending{background:var(--amberbg);color:var(--amber-ink);}
.ui-shell .badge.resolved{background:var(--greenbg);color:var(--green);}

/* Practice codes: one grey chip, not thirteen colours */
.ui-shell .clinic-chip{--c:var(--text2);font-family:var(--f-body);font-size:11.5px;font-weight:700;letter-spacing:.03em;padding:2px 7px;border-radius:5px;
  background:var(--gray);color:var(--text2);border:1px solid var(--border);}

/* Cards, the figures at the top of a queue, and the tiles */
.ui-shell .card{padding:20px 22px;}
.ui-shell .card h3{font-size:1.2rem;}
.ui-shell .card .sub{font-size:.9rem;margin-bottom:16px;}
.ui-shell .todo-strip{padding:14px 18px;background:var(--card);border:1px solid var(--border);border-left:4px solid var(--sec,var(--teal));}
.ui-shell .todo-strip .t-big{font-size:2.2rem;color:var(--text);}
.ui-shell .todo-strip .t-what{font-size:1rem;}
.ui-shell .todo-strip .t-bits{font-size:.86rem;}
.ui-shell .todo-strip.clear{background:var(--card);border-left-color:var(--green);}
.ui-shell .todo-strip.clear .t-big{color:var(--green);}
.ui-shell .kpi{padding:14px 16px;}
.ui-shell .kpi .label{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text2);}
.ui-shell .kpi .value{font-size:1.7rem;margin-top:6px;}
.ui-shell .kpi .ksub{font-size:.8rem;}
.ui-shell .kpi.tone-amber,.ui-shell .kpi.tone-orange{box-shadow:var(--shadow-card);}   /* a colour bar on a tile only when it is red */
.ui-shell #scope-sunbit .kpi{border-top:1px solid var(--border);}

/* Filters: one quiet row, labels in sentence case, no grey box around it */
.ui-shell .filter-row{background:transparent;padding:0;margin-bottom:14px;gap:8px 12px;}
.ui-shell .filter-row label,.ui-shell .date-range-row>span{font-size:12px!important;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text2);}
.ui-shell select,.ui-shell .filter-row input[type=text],.ui-shell input[type=date]{font-size:.9rem;}
.ui-shell .date-range-btn{font-size:.84rem;}
.ui-shell .scope-panel .date-range-btn.active{background:var(--teal-light);color:var(--teal);border-color:var(--teal);}

/* The sidebar: one colour for the icons, the accent for the open section; a section's header card is a plain card */
.ui-shell .scope-tab{font-size:.92rem;}
.ui-shell .scope-tab[data-scope] .tab-ico{color:var(--text2);background:var(--gray);}
.ui-shell .scope-tab.active[data-scope]{color:var(--teal);background:var(--teal-light);border-left-color:var(--teal);}
.ui-shell .scope-tab.active[data-scope] .tab-ico{background:var(--teal);color:var(--on-accent);}
.ui-shell .scope-tab.locked .tab-ico{color:var(--text3);background:var(--gray);}
.ui-shell .nav-h{font-size:11px;letter-spacing:.06em;}
.ui-shell .nav-ws{font-size:1.02rem;letter-spacing:-.01em;}
.ui-shell .nav-pulse{font-size:1rem;letter-spacing:-.01em;}
.ui-shell .scope-panel .scope-body>.card:first-child,.ui-shell .scope-panel>.card:first-child,.ui-shell #scope-calls>.calls-admin,.ui-shell #scope-insights>.purpose{border-top:1px solid var(--border);background:var(--card);}
.ui-shell .scope-panel .scope-body>.card:first-child>h3,.ui-shell .scope-panel>.card:first-child>h3{color:var(--text);}
.ui-shell :is(#scope-hco,#scope-pp,#scope-ptar,#scope-ocr,#scope-pred) thead th{border-bottom:1px solid var(--border-strong);}
@media (max-width:900px){.ui-shell .scope-tab.active[data-scope]{background:none;border-bottom-color:var(--teal);}}

/* The app bar: the sync time in the same type as everything else */
.ui-shell #last-sync-time,.ui-shell .app-bar .sub{font-family:var(--f-body);font-size:.78rem;}
.ui-shell .app-bar h1.app-word{font-size:1.5rem;}

/* Field labels and the small print */
.ui-shell .field-label,.ui-shell .purpose-k,.ui-shell .clinic-card .cstat .clabel,.ui-shell .section-label{font-size:12px;letter-spacing:0;text-transform:none;font-weight:600;}
.ui-shell .age-pill,.ui-shell .pace,.ui-shell .st{font-size:12px;}
.ui-shell .pager{margin-top:16px;}
.ui-shell .page-btn{font-size:.84rem;}
.ui-shell .empty{font-size:.92rem;}
@media (max-width:640px){.ui-shell td{padding:9px 10px;}.ui-shell .card{padding:16px;}}

/* ═══════════════════════ 2. Workspace and Pulse pages: staff, finance, openchair ═══════════════════════ */

.ui-pulse table.t,.ui-pulse table.stmt,.ui-pulse table{font-size:13.5px;}
.ui-pulse th,.ui-pulse table.t th,.ui-pulse table.stmt th{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;padding:9px 10px;}
.ui-pulse table.t td{padding:8px 10px;}
.ui-pulse td{padding:8px 10px;}
.ui-pulse table.stmt td{padding:7px 8px;}
.ui-pulse table.stmt tr.head td{font-size:12px;letter-spacing:0;text-transform:none;font-weight:700;color:var(--ink);padding-top:16px;}
.ui-pulse table.stmt tr.pct td{font-size:12px;}
.ui-pulse .tablewrap table.stmt td.lbl:first-child,.ui-pulse .tablewrap table.stmt th.lbl:first-child{min-width:200px;}
.ui-pulse .tablewrap table.stmt.compact td.lbl:first-child,.ui-pulse .tablewrap table.stmt.compact th.lbl:first-child{min-width:128px;}
.ui-pulse .tablewrap table.stmt.detail td.lbl:first-child,.ui-pulse .tablewrap table.stmt.detail th.lbl:first-child,.ui-pulse .tablewrap table.stmt.plain td.lbl:first-child{min-width:0;}
.ui-pulse table.stmt td.total,.ui-pulse table.stmt th.total{box-shadow:-6px 0 8px -6px rgba(17,38,58,.22);}   /* the total column casts a shadow when it covers a month */
.ui-pulse table.cl-grid th{letter-spacing:0;text-transform:none;font-size:12px;}

.ui-pulse .filters label,.ui-pulse .flabel,.ui-pulse label.f,.ui-pulse .dtf{font-size:12px;letter-spacing:0;text-transform:none;font-weight:600;}
.ui-pulse .t-label,.ui-pulse .bsub{font-size:12px;letter-spacing:0;text-transform:none;font-weight:600;white-space:normal;}
.ui-pulse .tile,.ui-pulse .tile.neutral{border-top:1px solid var(--line);}
.ui-pulse .t-val{font-size:24px;}
.ui-pulse .k-label{font-size:12.5px;}
.ui-pulse .kpi{border-top:1px solid var(--line);}
.ui-pulse .kpi.bad{border-top:3px solid var(--bad);}
.ui-pulse .kpi.good{border-top:1px solid var(--line);}   /* good news needs no stripe */
.ui-pulse .card .sub{font-size:13px;}
.ui-pulse .chip,.ui-pulse .tag{font-size:11.5px;font-weight:600;}
.ui-pulse .wcard{border-left-width:3px;}
.ui-pulse .digest ul{font-size:14px;}
.ui-pulse .eyebrow{font-size:11.5px;letter-spacing:.06em;}
.ui-pulse .bpractice>header .code{letter-spacing:.03em;}
.ui-pulse .todo h3{letter-spacing:.06em;}

/* Open Chair: call results as words, not shouting */
.ui-pulse .tag{text-transform:capitalize;letter-spacing:0;}
.ui-pulse td.sum{color:var(--ink);}

/* ═══════════════════════ 3. Call Check: the same light chrome as the rest of Huddle ═══════════════════════ */

html.ui-calls{--band:#ffffff;--band-fg:#11263a;--band-muted:#55697b;--band-line:#dce6ee;}
.ui-calls body{font-size:14px;}
.ui-calls .band{box-shadow:0 1px 2px rgba(17,38,58,.05);}
.ui-calls .band select,.ui-calls .band input[type=date],.ui-calls .band .btn,.ui-calls .band .chip{background:var(--surface-2);border-color:var(--line);color:var(--fg);}
.ui-calls .band input[type=date],.ui-calls main input[type=date]{font-family:var(--ui);}
.ui-calls .brand .sub{letter-spacing:.06em;font-size:11.5px;}
.ui-calls .tab{font-size:15px;}
.ui-calls .tab .cnt{font-family:var(--ui);font-size:12px;}
.ui-calls td.n,.ui-calls th.n,.ui-calls .rate,.ui-calls .bar-row .v,.ui-calls .dotrow .v,.ui-calls .dotaxis,.ui-calls .ax,.ui-calls .kpi .delta,.ui-calls .delta,
.ui-calls .score,.ui-calls .board .v,.ui-calls .yn,.ui-calls .evt .d,.ui-calls .progress,.ui-calls .fstage .b,.ui-calls .scale{font-family:var(--ui);font-variant-numeric:tabular-nums;}
.ui-calls th{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;}
.ui-calls th.sort[data-tmetric]{text-decoration:none;}
.ui-calls th.sort[data-tmetric]:hover{text-decoration:underline;text-underline-offset:3px;}
.ui-calls .kpi .l{font-size:12px;letter-spacing:0;text-transform:none;}
.ui-calls .kpi .v{font-size:30px;}
.ui-calls .card h3{font-size:17px;}
.ui-calls h2.sec,.ui-calls .board .tiername,.ui-calls .yns .tiername{letter-spacing:.04em;font-size:12px;}
.ui-calls .tag{letter-spacing:0;text-transform:none;}
.ui-calls details summary{font-size:13px;}