/* Huddle's structure layer. Loaded on every page after its own <style>, huddle-tokens.css (the shared tokens, verbatim)
   and huddle-ui.css (the reading layer: type sizes, one red thing per row, grey chips). This file adds the parts of
   docs/HUDDLE-DESIGN-SYSTEM.md that are about structure rather than reading:
     - one page header on every screen: eyebrow · title · data badge · the page's actions, sticky, on a plain card
     - controls that look like one product: 8px corners on buttons, selects and inputs; pills only for chips
     - tables: sticky headings, 40px rows, right-aligned tabular numbers, an edge shadow where a wide table scrolls,
       a divider before the "your response" columns on the work queues
     - summary tiles and the to-do strip as one family of cards
     - a row's detail in a side panel that slides in from the right, where a modal was used before
     - folds, digests and the small print in one voice
   Nothing here changes data, routes or what a screen shows. docs/UX-REDESIGN.md says why each piece is here.
   Page families (the class on <html>): ui-shell (dashboard, central, upload), ui-pulse (staff, finance, openchair,
   curbappeal, calls-month), ui-calls (calls), ui-compliance (compliance). */

/* ═══════════════ 0. Token bridges: pages that used a shared name for a different job ═══════════════ */
/* Call Check and Call Check → This month use --warn as a colour, the shared tokens use it as a tint */
:root.ui-calls,:root.ui-month{--warn:var(--warn-ink);}
/* Compliance had its own grey palette and names; map them onto Huddle's so it matches the other Pulse pages */
:root.ui-compliance{--panel:var(--card);--ink-2:var(--muted);--ink-3:var(--faint);--line-2:var(--line);--ok:var(--good);--ok-soft:var(--good-bg);--warn:var(--warn-ink);--warn-soft:#fbefd6;--bad-soft:var(--bad-bg);--lift:none;--f:var(--sans);--fd:var(--display);}
@media (prefers-color-scheme:dark){:root.ui-compliance:not([data-theme="light"]){--warn-soft:rgba(250,178,25,.16);}}
:root.ui-compliance[data-theme="dark"]{--warn-soft:rgba(250,178,25,.16);}
/* The shell names the accent "teal" and the neutrals "text"/"border": keep those names, give them the shared values */
:root.ui-shell{--teal:var(--accent);--teal-light:var(--accent-soft);--teal-mid:#1f8fd6;--text:var(--ink);--text2:var(--muted);--text3:var(--faint);--border:var(--line);--border-strong:var(--line-strong);--gray:#edf3f8;
  --red:var(--bad);--redbg:var(--bad-bg);--green:var(--good);--greenbg:var(--good-bg);--amber:var(--warn-ink);--amberbg:var(--warn);
  --hero:var(--card);--hero-ink:var(--ink);--hero-muted:var(--muted);--hero-line:var(--line);--hero-fill:var(--bg);--hero-hover:var(--accent-soft);
  --shadow-card:0 1px 2px rgba(17,38,58,.04);--shadow-hover:0 2px 6px rgba(17,38,58,.08);}
@media (prefers-color-scheme:dark){:root.ui-shell:not([data-theme="light"]){--gray:#172735;--teal-mid:#74c2f2;--shadow-card:0 1px 2px rgba(0,0,0,.3);--shadow-hover:0 2px 8px rgba(0,0,0,.4);}}
:root.ui-shell[data-theme="dark"]{--gray:#172735;--teal-mid:#74c2f2;--shadow-card:0 1px 2px rgba(0,0,0,.3);--shadow-hover:0 2px 8px rgba(0,0,0,.4);}
/* The Pulse pages' own names for the same roles */
:root.ui-pulse{--blue:var(--accent);--blue-soft:var(--accent-soft);--blue-ink:var(--accent-ink);--warn-bg:#fbefd6;--gray-bg:#eaeff3;}
@media (prefers-color-scheme:dark){:root.ui-pulse:not([data-theme="light"]){--gray-bg:#1b2b38;--warn-bg:rgba(250,178,25,.16);}}
:root.ui-pulse[data-theme="dark"]{--gray-bg:#1b2b38;--warn-bg:rgba(250,178,25,.16);}
:root.ui-calls{--surface:var(--card);--surface-2:#edf3f8;--fg:var(--ink);--line-2:var(--line-strong);--crit:var(--bad);--accent-ink:var(--on-accent);--accent-text:#0a5d97;}
@media (prefers-color-scheme:dark){:root.ui-calls:not([data-theme="light"]){--accent-text:#8fd0f7;}}
:root.ui-calls[data-theme="dark"]{--accent-text:#8fd0f7;}
@media (prefers-color-scheme:dark){:root.ui-calls:not([data-theme="light"]){--surface-2:#172735;}}
:root.ui-calls[data-theme="dark"]{--surface-2:#172735;}

/* ═══════════════ 1. Base: one voice for headings, small print and links ═══════════════ */
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{font-size:var(--fs-body);line-height:1.5;}
h1{font-size:var(--fs-title);font-weight:600;letter-spacing:-.01em;line-height:1.2;}
h2,h3,.card>h3,.card>h4{font-size:var(--fs-card);font-weight:600;line-height:1.3;}
.card>h2,.card>h3,.card>h4,.card .co-head h3,.card .sel-head h3{margin:0 0 4px;}
.card>h2+.sub,.card>h3+.sub,.card>h4+.sub,.card>h3+p.sub{margin-top:0;}
h4{font-family:var(--display);font-weight:600;}
.sub,.hint,.note,.fine,.small,.k-sub,.t-sub,.kpi .ksub,.card .sub{color:var(--muted);}
.card .sub,.card>.sub,p.sub{font-size:13px;line-height:1.45;margin:0 0 16px;max-width:72ch;}
a{color:var(--accent-ink);text-decoration-thickness:1px;text-underline-offset:3px;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
::selection{background:var(--accent-soft);}
@media (max-width:640px){h1{font-size:22px;}h2,h3,.card>h3{font-size:16px;}}

/* ═══════════════ 2. Controls: one shape for buttons, selects and inputs; pills only for chips ═══════════════ */
.ui-shell button,.ui-shell .btn,.ui-pulse .btn,.ui-pulse button.btn,.ui-calls .btn,.ui-month .btn,.ui-compliance .btn,.ui-shell .seg button,.ui-pulse .bweeks button,.ui-pulse .bprac button{
  border-radius:var(--r-sm);font-size:13.5px;font-weight:600;line-height:1.2;min-height:36px;padding:7px 14px;}
.ui-shell button.sm,.ui-shell .btn.sm,.ui-pulse .btn.sm,.ui-calls .btn.sm{min-height:30px;padding:5px 11px;font-size:13px;}
.ui-shell button:hover{filter:none;background:var(--accent-ink);border-color:var(--accent-ink);}
.ui-shell button.sec,.ui-shell button.sw,.ui-shell .btn.sec,.ui-shell .btn.ghost,.ui-shell .analytics-toggle-btn{background:var(--card);color:var(--ink);border:1px solid var(--line-strong);box-shadow:0 1px 1px rgba(17,38,58,.04);}
.ui-shell button.sec:hover,.ui-shell button.sw:hover,.ui-shell .btn.sec:hover,.ui-shell .btn.ghost:hover{background:var(--accent-soft-2);color:var(--accent-ink);border-color:var(--accent);}
.ui-shell button.danger{background:var(--card);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line-strong));}
.ui-shell button.danger:hover{background:var(--bad-bg);}
.ui-shell button:disabled,.ui-shell .btn:disabled{opacity:.55;}
/* chips, pagers and date presets stay round: they are choices, not actions */
.ui-shell :is(.page-btn,.date-range-btn,.wk-tab,.wk-chip,.wk-btn,.pchip,.role-chip,.live-dot,.chip,.wk-n,.a2hs-x,#sync-badge span){border-radius:999px;min-height:0;}
.ui-shell .page-btn{padding:5px 11px;font-size:13px;}
.ui-shell .date-range-btn{padding:5px 12px;min-height:0;}
.ui-shell .analytics-close-btn{min-height:0;padding:4px;border-radius:999px;border:0;background:none;box-shadow:none;}
.ui-shell select,.ui-shell .filter-row input[type=text],.ui-shell input[type=date],.ui-shell .gate-card input,.ui-shell .modal-box textarea,.ui-shell .modal-box select,.ui-shell .wk-in,.ui-shell .wk-two textarea,.ui-shell #wiki-modal textarea,.ui-shell input.in{
  border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--card);font-size:13.5px;min-height:36px;padding:6px 12px;}
.ui-shell select{padding-right:30px;}
.ui-shell select:focus,.ui-shell input:focus,.ui-shell textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none;}
.ui-shell .modal-box textarea{min-height:96px;}
.ui-pulse select,.ui-pulse input[type=search],.ui-pulse details.ms>summary,.ui-calls select,.ui-calls input[type=date],.ui-calls .form input,.ui-calls .form select,.ui-calls .form textarea,.ui-month select,.ui-compliance select{
  border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--card);min-height:36px;padding:6px 10px;font-size:13.5px;font-weight:500;color:var(--ink);}
.ui-pulse select:focus-visible,.ui-pulse input:focus-visible,.ui-calls select:focus-visible,.ui-calls input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.ui-pulse .btn,.ui-calls .btn,.ui-month .btn{background:var(--card);border:1px solid var(--line-strong);color:var(--ink);cursor:pointer;}
.ui-pulse .btn:hover{background:var(--accent-soft-2);border-color:var(--accent);color:var(--accent-ink);}
.ui-calls .btn:hover{background:var(--accent-soft-2);border-color:var(--accent);color:var(--accent-text);}
.ui-calls .btn.primary,.ui-month .btn{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.ui-calls .btn.primary:hover{background:var(--accent-text);border-color:var(--accent-text);color:var(--on-accent);}
.ui-month .btn:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--on-accent);}
.ui-calls .btn.ghost{background:transparent;border-color:transparent;color:var(--muted);}
.ui-calls .band .btn,.ui-calls .band .chip,.ui-calls .band select,.ui-calls .band input[type=date]{background:var(--card);border-color:var(--line-strong);color:var(--ink);}
.ui-pulse .pchip,.ui-pulse .seg,.ui-pulse .bweeks button,.ui-pulse .bprac button{border-radius:999px;}
.ui-pulse .bweeks button,.ui-pulse .bprac button{min-height:32px;padding:5px 13px;font-size:13px;}
.ui-pulse .bweeks button.on,.ui-pulse .bprac button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.ui-pulse .seg{border-radius:var(--r-sm);}
.ui-pulse .seg-b{height:32px;font-size:12.5px;}

/* ═══════════════ 3. The page header: eyebrow · title · badge · actions, on a plain sticky card ═══════════════ */
/* Pulse pages (staff, finance, openchair, curbappeal, calls-month) */
.ui-pulse header.top{background:var(--card);border-bottom:1px solid var(--line);box-shadow:0 1px 2px rgba(17,38,58,.04);}
.ui-pulse .top-row{padding:14px 0 10px;gap:8px 14px;align-items:center;}
.ui-pulse .brand h1{font-size:var(--fs-title);font-weight:600;letter-spacing:-.01em;margin:0;}
.ui-pulse .brand p{font-size:13px;color:var(--muted);margin:2px 0 0;max-width:72ch;}
.ui-pulse .eyebrow{font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px;}
.ui-pulse .badge{border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;background:var(--warn);color:var(--warn-ink);}
.ui-pulse .top-row .small.muted,.ui-pulse #loaded,.ui-pulse #pulled{font-size:12.5px;color:var(--faint);}
.ui-pulse .filters{padding:4px 0 8px;gap:8px 14px;}
.ui-pulse .filters label,.ui-pulse .flabel,.ui-pulse label.f,.ui-pulse .dtf{font-size:12px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0;gap:4px;}
.ui-pulse .subnav{gap:0;margin-top:2px;border-top:1px solid var(--line);}
.ui-pulse .subnav button,.ui-pulse .tabs button{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--muted);padding:11px 14px 10px;border-bottom:2px solid transparent;margin-bottom:-1px;}
.ui-pulse .subnav button.on,.ui-pulse .tabs button.on{color:var(--accent-ink);border-bottom-color:var(--accent);}
.ui-pulse .subnav button:hover,.ui-pulse .tabs button:hover{color:var(--ink);}
.ui-pulse main{padding-top:24px;}
.ui-pulse .scope{margin:0 0 16px;font-size:13px;color:var(--muted);}
/* Call Check: the band is the same header, in the same chrome */
.ui-calls .band{background:var(--card);color:var(--ink);border-bottom:1px solid var(--line);box-shadow:0 1px 2px rgba(17,38,58,.04);}
.ui-calls .band-in{padding-top:14px;}
.ui-calls .brand{align-items:center;gap:10px;}
.ui-calls .brand h1{font-size:var(--fs-title);font-weight:600;}
.ui-calls .brand .sub{color:var(--muted);font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.06em;}
.ui-calls .ctl{color:var(--muted);font-size:12.5px;font-weight:600;}
.ui-calls .chip{background:var(--bg);border-color:var(--line);color:var(--ink);font-size:12px;}
.ui-calls .tabs{margin-top:8px;border-top:1px solid var(--line);gap:0;}
.ui-calls .tab{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--muted);padding:11px 14px 10px;border-bottom:2px solid transparent;margin-bottom:-1px;letter-spacing:0;}
.ui-calls .tab[aria-selected="true"]{color:var(--accent-text);border-bottom-color:var(--accent);}
.ui-calls .tab .cnt{font-size:12px;opacity:.7;}
.ui-calls main{padding-top:24px;}
.ui-calls .pagebar{margin:0 0 16px;}
/* Compliance */
.ui-compliance .top{background:var(--card);border-bottom:1px solid var(--line);padding:14px 24px 0;box-shadow:0 1px 2px rgba(17,38,58,.04);}
.ui-compliance .eyebrow{color:var(--muted);font-size:var(--fs-eyebrow);letter-spacing:.06em;}
.ui-compliance h1{font-size:var(--fs-title);font-weight:600;margin:2px 0 10px;}
.ui-compliance .tabs{border-top:1px solid var(--line);gap:0;}
.ui-compliance .tabs button{font-size:14px;font-weight:600;color:var(--muted);padding:11px 14px 10px;margin-bottom:-1px;}
.ui-compliance .tabs button[aria-pressed="true"]{color:var(--accent-ink);border-bottom-color:var(--accent);}
.ui-compliance .wrap{padding-top:24px;max-width:var(--content-max);}
.ui-compliance .meta{font-size:12.5px;}
.ui-compliance .badge{font-weight:600;}
/* The shell (dashboard): the app bar is a plain card, the brand on the left, the person and tools on the right */
.ui-shell .app-bar{background:var(--card);border-bottom:1px solid var(--line);padding-block:12px;box-shadow:0 1px 2px rgba(17,38,58,.04);}
.ui-shell .app-bar::after,.ui-shell .land-header::after{display:none;}
.ui-shell .lk-app .mark{width:36px;height:36px;border-radius:10px;}
.ui-shell .lk-app .mark svg{width:27px;height:27px;}
.ui-shell .lk-app .lock-name{font-size:1.65rem;}
.ui-shell .role-chip{background:var(--bg);border-color:var(--line);color:var(--ink);font-size:12.5px;padding:5px 11px;}
.ui-shell #global-search{border-radius:999px;background:var(--bg);border-color:var(--line);color:var(--ink);min-height:36px;}
.ui-shell #global-search::placeholder{color:var(--faint);}
.ui-shell #global-search:focus{background:var(--card);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.ui-shell .gsearch .ic{color:var(--faint);}
.ui-shell #sync-badge span{background:var(--bg);border-color:var(--line);color:var(--muted);font-size:12px;}
.ui-shell #sync-badge .s-sample{background:var(--warn);color:var(--warn-ink);border-color:transparent;}
.ui-shell #last-sync-time{color:var(--faint);}
.ui-shell button.sw{min-height:34px;padding:6px 12px;font-size:13px;}
.ui-shell .wrap{padding-block:24px 64px;max-width:1360px;}
/* The landing page */
.ui-shell .land-header{background:var(--card);border-bottom:1px solid var(--line);padding-block:28px 26px;margin-bottom:24px;}
.ui-shell .land-tag{font-size:1rem;font-weight:500;color:var(--muted);margin-top:10px;}
.ui-shell .live-dot{background:var(--bg);border-color:var(--line);color:var(--ink);font-size:12.5px;}
.ui-shell .section-label{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--muted);}
.ui-shell .clinic-card{box-shadow:none;}
.ui-shell .clinic-card:hover{border-color:var(--accent);box-shadow:var(--shadow-hover);transform:none;}
.ui-shell .cavatar{background:var(--accent-soft);color:var(--accent-ink);font-weight:700;}
.ui-shell .clinic-card .cbadge{font-family:var(--sans);font-weight:600;font-size:11.5px;}
.ui-shell .clinic-card .cstat .clabel{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);}
.ui-shell .clinic-card.all{background:var(--card);border-color:var(--accent);}
.ui-shell .clinic-card.all .cavatar{background:var(--accent);color:var(--on-accent);}
.ui-shell .gate-card{box-shadow:var(--shadow);}
.ui-shell .gate-preview button{min-height:40px;}
/* The sidebar: 224px, groups in small caps, one accent */
.ui-shell .app-body{grid-template-columns:var(--side-w) minmax(0,1fr);}
.ui-shell .tabbar{background:var(--side);border-right:1px solid var(--line);}
.ui-shell .scope-tabs{padding:14px 10px 24px;gap:1px;}
.ui-shell .scope-tab{font-size:13.5px;font-weight:600;padding:8px 10px 8px 9px;border-radius:0 8px 8px 0;color:var(--side-ink);min-height:0;}
.ui-shell .scope-tab:hover{background:var(--row-hover);color:var(--ink);}
.ui-shell .scope-tab.active[data-scope]{color:var(--side-ink-active);background:var(--side-active);border-left-color:var(--accent);}
.ui-shell .scope-tab[data-scope] .tab-ico{padding:3px;border-radius:6px;width:16px;height:16px;}
.ui-shell .nav-h{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--faint);padding:14px 12px 6px;}
.ui-shell .nav-ws,.ui-shell .nav-pulse{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em;}
.ui-shell .nav-sub{font-size:10.5px;letter-spacing:.06em;color:var(--faint);}
.ui-shell .pulse-badge{background:var(--accent);}
@media (max-width:900px){
  .ui-shell .app-body{grid-template-columns:minmax(0,1fr);}
  .ui-shell .tabbar{box-shadow:none;}
  .ui-shell .scope-tab{padding:12px 9px 10px;font-size:13px;border-radius:0;}
  .ui-shell .scope-tab.active[data-scope]{background:none;border-bottom-color:var(--accent);}
}
/* Section header cards inside the shell: a plain card with the title first */
.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(--line);background:var(--card);}
.ui-shell .calls-admin{box-shadow:none;}
.ui-shell .calls-admin-row>div:first-child b{font-family:var(--display);font-size:15px;font-weight:600;}
.ui-shell .calls-switch{margin:0 0 12px;}
.ui-shell .calls-frame{border-radius:var(--r);border-color:var(--line);}
.ui-shell .pulse-head h2{font-size:var(--fs-title);}
.ui-shell .purpose{background:var(--card);padding:20px 22px;}
.ui-shell .purpose-k{color:var(--accent-ink);}
.ui-shell .purpose p{font-size:14.5px;}
.ui-shell .wk-head{background:var(--card);}
.ui-shell .wk-head h2{font-weight:700;}
.ui-shell .wk-eyebrow{color:var(--accent-ink);}
.ui-shell .wk-tab.on{background:var(--accent);border-color:var(--accent);}
.ui-shell .wk-chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);}
.ui-shell .wk-search input{border-radius:999px;border-color:var(--line-strong);}

/* ═══════════════ 4. Cards, tiles and the to-do strip ═══════════════ */
.card,.ui-compliance .panel{border-radius:var(--r);border:1px solid var(--line);}
.ui-shell .card,.ui-pulse .card,.ui-calls .card,.ui-month .card,.ui-compliance .panel{padding:var(--pad-card) 22px;margin-bottom:16px;box-shadow:none;}
.ui-shell .card h3,.ui-pulse .card h3,.ui-calls .card h3,.ui-month .card h3,.ui-compliance .panel h2{font-size:var(--fs-card);font-weight:600;letter-spacing:-.005em;}
.ui-calls .card h3{padding-right:84px;}
.ui-compliance .panel h2{font-family:var(--display);}
@media (max-width:640px){.ui-shell .card,.ui-pulse .card,.ui-calls .card,.ui-month .card,.ui-compliance .panel{padding:16px;}.ui-shell .card h3,.ui-pulse .card h3,.ui-calls .card h3{font-size:16px;}}
/* KPI tiles: label 12/600 sentence case, the figure in the display face, one line of context */
.ui-shell .kpi,.ui-pulse .tile,.ui-pulse .kpi,.ui-calls .kpi,.ui-month .kpi,.ui-compliance .tile{background:var(--card);border:1px solid var(--line);border-top:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:none;min-width:0;}
.ui-shell .kpi .label,.ui-pulse .t-label,.ui-pulse .k-label,.ui-calls .kpi .l,.ui-month .k-label,.ui-compliance .tile .l{font-size:12px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0;line-height:1.3;}
.ui-shell .kpi .value,.ui-pulse .t-val,.ui-pulse .k-val,.ui-calls .kpi .v,.ui-month .k-val,.ui-compliance .tile .v{font-family:var(--display);font-size:var(--fs-figure);font-weight:700;letter-spacing:-.015em;line-height:1.1;margin:6px 0 2px;font-variant-numeric:tabular-nums;color:var(--ink);}
.ui-shell .kpi .ksub,.ui-pulse .t-sub,.ui-pulse .k-sub,.ui-calls .kpi .d,.ui-month .k-sub,.ui-compliance .tile .d{font-size:12px;color:var(--muted);line-height:1.35;}
.ui-pulse .k-delta,.ui-month .k-delta{font-size:12px;font-weight:600;margin-top:6px;}
/* KPI values stay in ink; a tile that is red carries a 3px stripe, nothing else is coloured (agreed across the apps) */
.ui-shell .kpi .value.red,.ui-shell .kpi .value.green,.ui-shell .kpi .value.amber,.ui-pulse .t-val.bad,.ui-pulse .t-val.good,.ui-pulse .k-val.bad,.ui-calls .kpi.crit .v,.ui-calls .kpi.good .v,.ui-calls .kpi.warn .v,.ui-compliance .tile.bad .v,.ui-compliance .tile.ok .v,.ui-compliance .tile.warn .v{color:var(--ink);}
.ui-shell .kpi:has(.value.red),.ui-pulse .tile:has(.t-val.bad),.ui-pulse .kpi:has(.k-val.bad),.ui-compliance .tile.bad{border-top:3px solid var(--bad);}
.ui-shell .kpi.tone-red,.ui-pulse .kpi.bad,.ui-pulse .tile.bad,.ui-calls .kpi.crit{border-top:3px solid var(--bad);box-shadow:none;}
.ui-shell .kpi.tone-amber,.ui-shell .kpi.tone-orange,.ui-pulse .kpi.good,.ui-pulse .tile.neutral,.ui-calls .kpi.warn,.ui-calls .kpi.good{border-top:1px solid var(--line);box-shadow:none;}
.ui-shell .kpi-row,.ui-pulse .tiles,.ui-pulse .kpis,.ui-calls .kpis,.ui-month .kpis,.ui-compliance .tiles{gap:12px;margin-bottom:20px;}
.ui-shell .analytics-panel .kpi{padding:12px 14px;}
.ui-shell .analytics-panel .kpi .value{font-size:22px;}
.ui-shell .pr-card{border-radius:var(--r-sm);}
.ui-shell .pr-card .pr-label{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;}
.ui-shell .pr-card .pr-value{font-size:22px;}
@media (max-width:640px){.ui-shell .kpi .value,.ui-pulse .t-val,.ui-pulse .k-val,.ui-calls .kpi .v,.ui-month .k-val{font-size:24px;}}
/* The to-do strip: the first thing in a queue, a summary card with the count and what to do */
.ui-shell .todo-strip{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);padding:16px 20px;margin-bottom:16px;gap:16px;}
.ui-shell .todo-strip .t-big{font-size:2.25rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);}
.ui-shell .todo-strip .t-what{font-size:15px;font-weight:600;}
.ui-shell .todo-strip .t-bits{font-size:13px;color:var(--muted);}
.ui-shell .todo-strip .t-bad{color:var(--bad);}
.ui-shell .todo-strip.clear{border-left-color:var(--good);}
.ui-shell .todo-strip.clear .t-big{color:var(--good);}
/* Digests on the Pulse pages: the headline sentence and its bullets */
.ui-pulse .digest,.ui-month .digest{border-left-width:4px;padding:18px 22px;margin-bottom:16px;}
.ui-pulse .digest h2,.ui-month .digest h2{font-size:20px;font-weight:600;line-height:1.3;margin:0 0 8px;}
.ui-pulse .digest ul,.ui-month .digest ul{font-size:14px;gap:5px;}
.ui-pulse .todo{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--warn-ink);color:var(--warn-ink);}
.ui-pulse .todo li b{color:var(--ink);}
.ui-pulse .todo h3{font-size:12px;letter-spacing:.06em;}
.ui-calls .ins{padding:14px 16px 14px 20px;}
.ui-calls .ins h3{font-size:16px;}
.ui-calls .ins p{font-size:13.5px;}
/* The today cards and the analytics rail */
.ui-shell .today-card{border-radius:var(--r-sm);}
.ui-shell .today-card .cathead{font-size:13px;}
.ui-shell .analytics-header .analytics-title{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--faint);}
.ui-shell .analytics-panel .card{padding:16px;}
.ui-shell .analytics-panel .card h3{font-size:15px;}
/* Folds: a card whose summary says what is inside and how much */
.ui-pulse details.fold,.ui-month details.fold{border-radius:var(--r);margin-bottom:16px;}
.ui-pulse details.fold>summary,.ui-month details.fold>summary{font-family:var(--display);font-size:15px;font-weight:600;padding:14px 22px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.ui-pulse details.fold>summary::-webkit-details-marker,.ui-month details.fold>summary::-webkit-details-marker{display:none;}
.ui-pulse details.fold>summary::after,.ui-month details.fold>summary::after{content:"Show";font:600 12.5px var(--sans);color:var(--accent-ink);}
.ui-pulse details.fold[open]>summary::after,.ui-month details.fold[open]>summary::after{content:"Hide";}
.ui-pulse details.fold>summary:hover,.ui-month details.fold>summary:hover{background:var(--row-hover);border-radius:var(--r);}
.ui-pulse .fold-body,.ui-month .fold-body{padding:0 22px 18px;}
.ui-pulse details.how,.ui-calls details.how,.ui-calls details.kmore{font-size:12.5px;}
.ui-pulse details.how>summary{color:var(--accent-ink);font-weight:600;}
.ui-calls details summary{color:var(--accent-text);font-weight:600;}
/* Banners, done and empty states */
.ui-shell .done-banner{border:1px solid color-mix(in srgb,var(--good) 30%,var(--line));background:var(--good-bg);border-radius:var(--r-sm);font-size:13.5px;}
.ui-shell .empty,.ui-calls .empty,.ui-month .empty{border:1px dashed var(--line-strong);border-radius:var(--r);color:var(--muted);font-size:13.5px;padding:28px;}
.ui-shell .xlink{background:var(--card);border-color:var(--line);border-left:3px solid var(--warn-ink);}
.ui-shell .soft-panel{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);}
.ui-pulse .banner,.ui-calls .banner,.ui-month .banner{border-radius:var(--r-sm);font-size:13.5px;}
.ui-shell .issue,.ui-shell .up-msg{border-radius:var(--r-sm);}

/* ═══════════════ 5. Tables: sticky headings, 40px rows, numbers on the right, an edge shadow when it scrolls ═══════════════ */
.ui-shell .tbl-wrap,.ui-pulse .tablewrap,.ui-calls .twrap,.ui-month .tablewrap,.ui-compliance .tblw,.ui-shell .tw{
  overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);max-width:100%;
  background-image:linear-gradient(to right,var(--card) 30%,transparent),linear-gradient(to left,var(--card) 30%,transparent),
    linear-gradient(to right,rgba(17,38,58,.14),transparent),linear-gradient(to left,rgba(17,38,58,.14),transparent);
  background-position:left,right,left,right;background-repeat:no-repeat;background-size:40px 100%,40px 100%,12px 100%,12px 100%;background-attachment:local,local,scroll,scroll;}
.ui-calls .twrap{border:0;border-radius:0;}
.ui-shell .tbl-wrap table,.ui-pulse .tablewrap table{background:transparent;}
.ui-shell thead th,.ui-pulse thead th,.ui-calls thead th,.ui-month thead th,.ui-compliance thead th{position:sticky;top:0;z-index:2;background:var(--card);box-shadow:inset 0 -1px 0 var(--line-strong);border-bottom:0;}
.ui-shell th,.ui-pulse th,.ui-pulse table.t th,.ui-pulse table.stmt th,.ui-calls th,.ui-month th,.ui-month table.t th,.ui-compliance .tbl th{font-size:var(--fs-head);font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0;padding:10px 12px;white-space:nowrap;}
.ui-shell td{padding:10px 12px;line-height:1.4;font-size:14px;}
.ui-pulse td,.ui-pulse table.t td,.ui-month td,.ui-month table.t td{padding:9px 12px;line-height:1.35;font-size:13.5px;}
.ui-pulse table.stmt td{padding:7px 10px;font-size:13px;height:36px;}
.ui-pulse table.stmt th{padding:9px 10px;}
.ui-pulse table.stmt.compact td,.ui-pulse table.stmt.compact th{padding:5px 8px;}
.ui-pulse table.stmt.compact td{height:30px;}
.ui-calls td{padding:9px 10px;font-size:13.5px;}
.ui-compliance .tbl td{padding:10px 12px;font-size:13.5px;}
.ui-shell tbody tr:hover td,.ui-pulse tbody tr:hover td,.ui-month tbody tr:hover td{background:var(--row-hover);}
.ui-shell .num,.ui-shell td.n,.ui-pulse td.n,.ui-pulse th.n,.ui-pulse td.num,.ui-pulse .num,.ui-calls td.n,.ui-calls th.n,.ui-month td.n,.ui-month th.n,.ui-compliance .mono{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.ui-shell .breakdown-tbl th,.ui-shell .breakdown-tbl td{font-size:13px;padding:8px 10px;}
.ui-shell .breakdown-tbl th:not(:first-child),.ui-shell .breakdown-tbl td:not(:first-child),.ui-shell #ocr-aging-tbody td:not(:first-child),.ui-shell #scope-ocr .scope-body .card:first-child th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;}
/* The work queues: a divider before the columns that are yours to fill in */
.ui-shell th.grp,.ui-shell :is(#hco-tbody,#pp-tbody,#ptar-tbody,#ocr-tbody) td:nth-child(7),.ui-shell #pred-tbody td:nth-child(8){border-left:1px solid var(--line-strong);}
.ui-shell th.grp{color:var(--ink);}
.ui-shell :is(#hco-tbody,#pp-tbody,#ptar-tbody,#ocr-tbody,#pred-tbody) td:nth-child(2){white-space:nowrap;color:var(--muted);}
.ui-shell :is(#hco-tbody,#pp-tbody,#ptar-tbody,#ocr-tbody,#pred-tbody) td:nth-child(3){font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
.ui-shell #ptar-tbody td:nth-child(5),.ui-shell #ocr-tbody td:nth-child(6){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;}
.ui-shell tr.row-resolved td{color:var(--muted);}
.ui-shell tr.row-overdue td:first-child,.ui-shell tr.row-urg-red td:first-child{box-shadow:inset 3px 0 0 var(--bad);}
.ui-shell tr.row-pending td:first-child,.ui-shell tr.row-urg-amber td:first-child{box-shadow:inset 3px 0 0 var(--warn-ink);}
/* Pills: one shape everywhere */
.ui-shell .badge,.ui-shell .st,.ui-shell .age-pill,.ui-shell .pace,.ui-pulse .chip,.ui-pulse .tag,.ui-pulse .pill,.ui-pulse .stage,.ui-calls .pill,.ui-calls .tier,.ui-month .badge,.ui-compliance .st{font-size:12px;font-weight:600;border-radius:999px;padding:2px 9px;line-height:1.5;}
.ui-shell .clinic-chip,.ui-pulse .bpractice>header .code{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.03em;padding:2px 7px;border-radius:5px;background:var(--bg);color:var(--muted);border:1px solid var(--line);}
.ui-shell .pager{gap:6px;margin-top:16px;}

/* ═══════════════ 6. Side panels: a row's detail slides in from the right; the list stays in view ═══════════════ */
@keyframes hd-slide{from{transform:translateX(24px);opacity:.6;}to{transform:none;opacity:1;}}
@keyframes hd-fade{from{opacity:0;}to{opacity:1;}}
.ui-shell .modal-bg{align-items:stretch;justify-content:flex-end;padding:0;background:rgba(7,19,27,.42);backdrop-filter:none;-webkit-backdrop-filter:none;animation:hd-fade .18s ease-out;}
.ui-shell .modal-box{width:min(var(--drawer-w),100%)!important;max-width:100%;height:100%;max-height:none;border-radius:0;border:0;border-left:1px solid var(--line);box-shadow:-16px 0 48px rgba(7,19,27,.22);padding:24px 28px 32px;animation:hd-slide .22s ease-out;display:flex;flex-direction:column;}
.ui-shell #wiki-modal .modal-box,.ui-shell #upload-modal .modal-box{width:min(760px,100%)!important;}
.ui-shell .modal-box h3{font-size:20px;font-weight:600;margin-bottom:4px;}
.ui-shell .modal-box>div:first-child{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid var(--line);}
.ui-shell .modal-row{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:12px;padding:9px 0;font-size:13.5px;border-bottom:1px solid var(--line);}
.ui-shell .modal-row .lbl{color:var(--muted);font-weight:500;}
.ui-shell .modal-row>span:last-child{max-width:none!important;text-align:left!important;overflow-wrap:anywhere;}
.ui-shell .action-head{font-size:15px;margin:18px 0 10px;}
.ui-shell .field-label{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);}
@media (max-width:640px){.ui-shell .modal-box{padding:18px 16px 28px;}.ui-shell .modal-row{grid-template-columns:1fr;gap:2px;}}
@media (prefers-reduced-motion:reduce){.ui-shell .modal-bg,.ui-shell .modal-box{animation:none;}}
/* The upload board's dialog becomes the same panel */
.ui-shell dialog#dlg{position:fixed;inset:0 0 0 auto;margin:0;height:100%;max-height:100vh;width:min(720px,100%);max-width:100%;border-radius:0;border-left:1px solid var(--line);box-shadow:-16px 0 48px rgba(7,19,27,.22);animation:hd-slide .22s ease-out;display:flex;flex-direction:column;}
.ui-shell dialog#dlg:not([open]){display:none;}
.ui-shell dialog .dh{padding:18px 24px 14px;}
.ui-shell dialog .dh h3{font-size:18px;}
.ui-shell dialog .db{padding:16px 24px 24px;overflow:auto;}
/* Call Check's drawers already slide in; same width and chrome */
.ui-calls .drawer{background:rgba(7,19,27,.42);}
.ui-calls .drawer .panel{width:min(var(--drawer-w),100%);border-left:1px solid var(--line);box-shadow:-16px 0 48px rgba(7,19,27,.22);padding-block:24px 32px;animation:hd-slide .22s ease-out;}

/* ═══════════════ 7. The upload board and the public upload page ═══════════════ */
.ui-shell .band{background:var(--card);color:var(--ink);border-bottom:1px solid var(--line);box-shadow:0 1px 2px rgba(17,38,58,.04);}
.ui-shell .band .inner{min-height:60px;}
.ui-shell .band .mark b{font-family:var(--wordmark);font-weight:800;}
.ui-shell .band .mark span{opacity:1;color:var(--muted);font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.06em;}
.ui-shell .band .btn.ghost{color:var(--ink);border-color:var(--line-strong);}
.ui-shell .band a{color:var(--accent-ink);}
.ui-shell .band .who{font-size:13.5px;}
.ui-shell .desk{margin:24px 0 20px;}
.ui-shell .desk h1{font-size:var(--fs-title);font-weight:600;}
.ui-shell .chip.prac{font-family:var(--sans);font-weight:600;font-size:12px;}
.ui-shell .pracs label{font-family:var(--sans);font-weight:600;font-size:12.5px;border-radius:999px;}
.ui-shell .seg button{min-height:34px;padding:6px 12px;}
.ui-shell .card h2{font-size:var(--fs-card);font-weight:600;}
.ui-shell .result .head b{font-family:var(--sans);font-weight:700;}
.ui-shell .preview .cap .tag{text-transform:none;letter-spacing:0;font-size:11.5px;}
.ui-shell .hero{background:var(--card);background-image:none;border-bottom:1px solid var(--line);}
.ui-shell .hero .inner{padding:14px 0 12px;}
.ui-shell .brand .word{font-size:1.5rem;}
.ui-shell .brand small{font-size:var(--fs-eyebrow);letter-spacing:.06em;}
.ui-shell .chip-who{background:var(--bg);border-color:var(--line);color:var(--ink);}
.ui-shell nav.tabs button{font-size:14px;padding:12px 12px 10px;}
.ui-shell nav.tabs button.on{color:var(--accent-ink);border-bottom-color:var(--accent);}
.ui-shell .step .n{background:var(--accent-soft);color:var(--accent-ink);}
.ui-shell .drop{border-radius:var(--r);}
.ui-shell .guide ol.big>li::before{background:var(--accent-soft);color:var(--accent-ink);}
.ui-shell .login .word{font-size:2rem;}

/* ═══════════════ 7b. The family lockup: the orange tile, then "Huddle" in Bricolage 800 (one logo across the apps) ═══════════════ */
.ui-shell .huddle-word{font-family:var(--display)!important;font-weight:800!important;letter-spacing:-.02em!important;text-transform:capitalize;color:var(--ink)!important;}
.ui-shell span.mark,.ui-shell .mark .sq{background:var(--mark-grad)!important;}
.ui-shell div.mark{background:none!important;}
.ui-shell .lk-land .lock-name{font-size:clamp(2rem,4.6vw,2.8rem);}
.ui-shell .lk-app .lock-name{font-size:1.35rem;}
.ui-shell .lk-gate .lock-name{font-size:1.5rem;}
.ui-shell .brand .word.huddle-word{font-size:1.35rem;}
.ui-shell .login .word.huddle-word{font-size:1.9rem;}

/* ═══════════════ 8. Spacing: sections 32px apart, cards 16px, nothing wider than the screen ═══════════════ */
.ui-pulse .grid2,.ui-calls .grid,.ui-month .grid2{gap:16px;margin-bottom:16px;}
.ui-pulse main>section>h2,.ui-pulse main h2.sec,.ui-calls h2.sec{margin-top:var(--gap-section);}
.ui-shell .scope-layout{gap:20px;}
.ui-shell .grid2{gap:16px;}
.ui-shell .site-foot{color:var(--faint);}
.ui-shell .a2hs{border-radius:var(--r);}
/* Charts sit in their own card; the legend reads like the small print */
.ui-pulse .chartbox,.ui-shell .chart-wrap{min-width:0;}
.ui-calls .legend,.ui-month .legend{font-size:12.5px;}
/* Print: the panels, bands and shadows go */
@media print{.ui-shell .tabbar,.ui-shell .app-bar .actions,.ui-shell .modal-bg{display:none!important;}.card{box-shadow:none;break-inside:avoid;}}