/* Staff portal stylesheet. The staff listener serves only /assets/{admin.css,admin.js,brand.svg,icons.svg}, so the shared
   theme is embedded here instead of imported. The three GENERATED blocks below are verbatim copies and are checked by
   workspace_sync/test_theme.mjs; regenerate after editing a source with:
   python3 -c "import re;p='staff_portal/static/admin.css';s=open(p).read();[s:=re.sub(r'(/\* GENERATED from %s \*/\n).*?(\n/\* END GENERATED \*/)'%re.escape(f),lambda m:m.group(1)+open(f).read().replace(\"@import url('/app/tokens.css');\\n@import url('/app/controls.css');\\n\",'')+m.group(2),s,flags=re.S) for f in ('workspace_sync/web/tokens.css','workspace_sync/web/controls.css','customer_portal/static/base.css')];open(p,'w').write(s)" */
/* GENERATED from workspace_sync/web/tokens.css */
@font-face { font-family: 'IBM Plex Mono'; src: url('/app/plex-mono.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --text-label: 11px;
  --text-meta: 12px;
  --text-secondary: 13px;
  --text-ui: 14px;
  --text-note: 15px;
  --text-patient: 16px;
  --text-card: 17px;
  --text-appbar: 20px;
  --text-phone-heading: 22px;
  --text-clock: 24px;
  --text-settings-heading: 26px;
  --text-recorded-heading: 28px;
  --text-visit-heading: 30px;
  --text-page-heading: 32px;
  --text-phone-clock: 64px;
  --accent: #315fe5;
  --accent-hover: #244dc1;
  --accent-tint: #edf2fa;
  --accent-tint-hover: #e3ebf8;
  --accent-surface: #dbe4f5;
  --accent-text: var(--accent);
  --accent-text-hover: var(--accent-hover);
  --accent-strong: #1f47b3;
  --row-highlight: #f4f7fc;
  --level: #7a97c5;
  --recorder: #0f1626;
  --recorder-text: #ced9ec;
  --recorder-muted: #b7c5de;
  --recorder-danger: #ffc0bb;
  --on-accent: #fff;
  --on-accent-muted: #eaf0fd;
  --ink: #26344d;
  --body: #34435c;
  --secondary: #415779;
  --muted: #59677b;
  --hint: #626c7c;
  --disabled: #b3bfd0;
  --app-bg: #f7f9fc;
  --sidebar-bg: #fbfcfe;
  --card: #fff;
  --popover: var(--card);
  --sunken: var(--app-bg);
  --input-bg: var(--card);
  --border: #dfe6f2;
  --table-border: #e4eaf3;
  --row-border: #edf0f6;
  --input-border: #dfe6f2;
  --review-bg: #fdf3e2;
  --review-text: #7d5c13;
  --review-dot: #c98a1e;
  --highlight: #fbeec6;
  --highlight-hover: #f6e4ab;
  --highlight-border: #d8a72c;
  --signed-bg: #edf4ef;
  --signed-text: #2f6b45;
  --signed-dot: #3f8a5b;
  --signed-accent: #87ac9f;
  --recording-bg: #eef1f7;
  --recording-text: #3d5478;
  --recording-dot: #5b77a8;
  --danger: #a5423a;
  --danger-fill: var(--danger);
  --danger-bg: #fff0f0;
  --danger-border: #f4dddd;
  --recording-red: #ff5f57;
  --on-recording-red: var(--on-accent);
  --focus-outline: #90aaff;
  --focus-ring: #315fe52b;
  --backdrop: #26344d66;
  --swatch-light: #f7f9fc;
  --swatch-dark: #07090e;
  --blue: var(--accent);
  --line: var(--border);
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-panel: 14px;
  --radius-dialog: 14px;
  --shadow-popover: 0 8px 30px #273e7010;
  --shadow-primary: 0 4px 10px #315fe51a;
  --shadow-dialog: 0 25px 90px #273e7030;
  --shadow-chip: 0 1px 3px #273e7014;
  --weight-brand: 650;
  --weight-heading: 600;
  --weight-control: 550;
  --track-h1: -0.04em;
  --track-h2: -0.026em;
  --ease: cubic-bezier(.2,.7,.2,1);
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --control-height: 40px;
  --control-compact: 32px;
  --control-large: 48px;
  --control-record: 56px;
  --control-line-height: 20px;
  --control-padding-x: 12px;
  --panel-padding: 24px;
  --section-gap: 24px;
  --field-gap: 20px;
  --page-padding-x: 40px;
}
/* Dark theme: theme.js sets data-theme from the saved preference (System follows the OS). Values derive from the
   design's dark file flattened over #07090e; fills keep the #315fe5 accent with white text. */
@media not print { :root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #315fe5;
  --accent-hover: #4a76f0;
  --accent-tint: #13192b;
  --accent-tint-hover: #1b233e;
  --accent-surface: #2a3762;
  --accent-text: #6c8cff;
  --accent-text-hover: #8aa2ff;
  --accent-strong: #b3c2ff;
  --row-highlight: #111318;
  --level: #6c8cff;
  --recorder: #0b1222;
  --recorder-text: #ced9ec;
  --recorder-muted: #a9b4c7;
  --recorder-danger: #ffc0bb;
  --on-accent: #fff;
  --on-accent-muted: #eaf0fd;
  --ink: #e8ecf4;
  --body: #dbe2ee;
  --secondary: #c3ccdd;
  --muted: #98a2b3;
  --hint: #7f8ba0;
  --disabled: #4f5869;
  --app-bg: #07090e;
  --sidebar-bg: #090c12;
  --card: #0d0f14;
  --popover: #141925;
  --sunken: #0a0c11;
  --input-bg: #0a0c11;
  --border: #1b1d21;
  --table-border: #1b1d21;
  --row-border: #16181c;
  --input-border: #25272b;
  --review-bg: #211d17;
  --review-text: #f0d49b;
  --review-dot: #e0b355;
  --highlight: #3d321a;
  --highlight-hover: #4a3d20;
  --highlight-border: #e0b355;
  --signed-bg: #0e2222;
  --signed-text: #8ee6ce;
  --signed-dot: #45d6b4;
  --signed-accent: #2e6f60;
  --recording-bg: #16181c;
  --recording-text: #a9b4c7;
  --recording-dot: #7f8ba0;
  --danger: #efa3a3;
  --danger-fill: #c2503f;
  --danger-bg: #181116;
  --danger-border: #48272b;
  --recording-red: #e08a6f;
  --on-recording-red: #07090e;
  --focus-outline: #8aa2ff;
  --focus-ring: #6c8cff40;
  --backdrop: #04060ab8;
  --swatch-light: #f7f9fc;
  --swatch-dark: #07090e;
  --shadow-popover: 0 8px 30px #00000080;
  --shadow-primary: 0 4px 14px #315fe540;
  --shadow-dialog: 0 25px 90px #000000a6;
  --shadow-chip: 0 1px 3px #0000004d;
} }
/* Printing always uses the light palette; the print styles force black on white. */
@media print { :root { color-scheme: light; } }
@media (max-width: 1250px) { :root { --page-padding-x: 24px; } }
@media (max-width: 760px) {
  :root { --control-height: 44px; --control-compact: 36px; --panel-padding: 20px; --page-padding-x: 20px; }
}

/* END GENERATED */
/* GENERATED from workspace_sync/web/controls.css */
/* Shared control geometry for the clinical app and account settings. */
button, input, select, textarea { box-sizing: border-box; font-family: var(--font-sans); }
button, input, select {
  font-size: var(--text-ui);
  line-height: var(--control-line-height);
}
button {
  min-height: var(--control-size, var(--control-height));
  padding: calc((var(--control-size, var(--control-height)) - var(--control-line-height) - 2px) / 2) var(--control-padding-x);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  font-weight: var(--weight-control);
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.primary { box-shadow: var(--shadow-primary); }
.primary:disabled, .primary.is-processing { box-shadow: none; }
button:focus-visible, a:focus-visible, summary:focus-visible, [role=tab]:focus-visible { outline: 3px solid var(--focus-outline); outline-offset: 4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
/* Website eyebrow motif: small caps label above a heading, optional green dot. */
.eyebrow { font-size: 10px; font-weight: 650; letter-spacing: 1.8px; text-transform: uppercase; color: var(--hint); line-height: 1.7; }
.eyebrow:empty { display: none; }
.eyebrow > span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signed-accent); margin-right: 8px; vertical-align: middle; }
input, select {
  height: var(--control-size, var(--control-height));
  padding: 0 var(--control-padding-x);
  border-radius: var(--radius-control);
  font-weight: 400;
}
textarea { font-size: var(--text-ui); line-height: 1.65; border-radius: var(--radius-control); padding: 12px; }
input:is([type=checkbox], [type=radio]) { width: 18px; height: 18px; min-height: 0; padding: 0; flex: 0 0 18px; }
label { font-size: var(--text-ui); line-height: 1.5; font-weight: 500; }
.quiet, .back-link, .settings-back { font-weight: 500; }
.primary, .auth-card > .primary, .record-visit { font-weight: var(--weight-control); }
.back-link, .settings-back { --control-size: var(--control-compact); padding-block: 5px; }
.pagination, .filter-chips, .tabs, .settings-tabs, .settings-navigation, .suggestions { --control-size: var(--control-compact); }
.filter-chips button, .suggestions button { font-size: var(--text-secondary); }
.auth-card, .login-form { --control-size: var(--control-large); }
.auth-card input, .auth-card > button { min-height: var(--control-large); }
.capture > button.primary, .capture > .stop { --control-size: var(--control-record); font-size: var(--text-card); }
.record-visit, .phone-next .primary { --control-size: var(--control-large); }
.icon-button { width: var(--control-height); padding: 0; }
.detail-check { min-height: 0; }
@media (max-width: 760px) {
  input:not([type=checkbox], [type=radio]), select, textarea { font-size: var(--text-patient); }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } }
/* theme.js sets this for one frame while the theme changes so colours switch at once instead of animating. */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; }

/* END GENERATED */
/* GENERATED from customer_portal/static/base.css */
:root{font-family:var(--font-sans);color:var(--ink);background:var(--app-bg);font-size:14px;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,a,input,select{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible{outline:3px solid var(--focus-outline);outline-offset:4px}input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}[hidden]{display:none!important}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}h1{font-size:32px;letter-spacing:var(--track-h1);font-weight:var(--weight-heading);line-height:1.22}h2{font-size:18px;letter-spacing:var(--track-h2);font-weight:var(--weight-heading)}h3{font-size:15px;font-weight:var(--weight-heading)}.muted{color:var(--muted);line-height:1.65}.eyebrow{margin-bottom:13px}.wordmark{display:flex;align-items:center;gap:10px;font-weight:var(--weight-brand);font-size:27px;letter-spacing:-1px;color:var(--ink)}.wordmark img{display:block}.wordmark span{font-size:9px;letter-spacing:1.3px;color:var(--hint);margin:3px 0 0 2px}.primary,.secondary,.quiet,.danger{white-space:nowrap}.primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-primary)}.primary:hover{background:var(--accent-hover)}.secondary{background:var(--card);border:1px solid var(--border);color:var(--secondary)}.secondary:hover{background:var(--accent-tint)}.quiet{background:transparent;border-color:transparent;color:var(--accent-text)}.quiet:hover{background:var(--accent-tint);color:var(--accent-text-hover)}.danger{background:var(--danger-bg);color:var(--danger)}.wide{width:100%;display:flex;justify-content:space-between;align-items:center}.fineprint{font-size:12px;line-height:1.65;color:var(--hint)}.error{color:var(--danger);font-size:13px;line-height:1.5;min-height:5px;margin:12px 0}label{display:block;margin-bottom:8px}input,select{width:100%;border:1px solid var(--input-border);background:var(--input-bg);color:var(--body)}input::placeholder{color:var(--hint)}select{appearance:auto}input[type=search]::-webkit-search-cancel-button{cursor:pointer}
.entry{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;background:var(--card)}.entry-brand{padding:52px 64px;background:linear-gradient(145deg,var(--row-highlight),var(--accent-tint));display:flex;flex-direction:column;justify-content:space-between;min-height:100vh}.entry-message{padding:64px 0}.entry-message h1{font-size:clamp(36px,4vw,56px);letter-spacing:var(--track-h1);font-weight:var(--weight-heading);line-height:1.14}.entry-message>p:last-child{font-size:16px;line-height:1.85;color:var(--muted);margin-top:25px}.entry-message .eyebrow{margin-bottom:22px}.entry-foot{font-size:12px;color:var(--hint)}.entry-form{display:grid;place-items:center;padding:48px}.login-form{width:100%;max-width:360px}.login-form h2{font-size:28px;letter-spacing:-.9px;margin:20px 0 9px}.login-form>.muted{margin-bottom:31px}.login-form input{margin-bottom:21px}.login-form .fineprint{margin-top:26px}.login-form .primary{margin-top:3px}.access-tag{font-size:10px;letter-spacing:1.8px;font-weight:650;color:var(--hint);display:flex;gap:8px;align-items:center}.access-tag span,.private-label span{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}
.shell{display:grid;grid-template-columns:226px minmax(0,1fr);min-height:100vh}.sidebar{padding:32px 24px 25px;border-right:1px solid var(--line);background:var(--sidebar-bg);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.sidebar .wordmark{font-size:25px;gap:9px}.workspace-label{margin:55px 10px 13px;font-size:9px;font-weight:650;letter-spacing:1.8px;text-transform:uppercase;color:var(--hint)}nav{display:flex;flex-direction:column;gap:7px}nav button{display:flex;align-items:center;gap:12px;border:0;background:transparent;color:var(--secondary);text-align:left;font-weight:500}nav button>span{width:18px;font-size:19px;line-height:18px}nav button:hover{background:var(--accent-tint)}nav button.selected{color:var(--accent-strong);background:var(--accent-tint);font-weight:600}.sidebar-bottom{margin-top:auto;padding:26px 8px 0}.private-label{font-size:10px;font-weight:550;color:var(--secondary);display:flex;gap:6px;align-items:center}.private-label span{background:var(--signed-dot)}.sidebar-bottom p{font-size:11px;color:var(--hint);line-height:1.65;margin:11px 0 23px}#staff-email{font-size:11px;overflow-wrap:anywhere;color:var(--muted);border-top:1px solid var(--border);padding-top:18px}.sidebar-bottom .quiet{margin-top:4px}.main{min-width:0}.topbar{height:74px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 44px;color:var(--hint);font-size:11px;background:var(--card)}.topbar b{font-weight:500;color:var(--secondary);margin-left:9px}.staff-pill{border:1px solid var(--border);padding:6px 10px;border-radius:5px;color:var(--muted);font-size:10px}.content{padding:41px 44px 22px;max-width:1580px;margin:auto}.page-heading{display:flex;gap:25px;justify-content:space-between;align-items:center;margin-bottom:35px}.page-heading .muted{margin-top:10px;font-size:13px}.page-heading .eyebrow{margin-bottom:10px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:38px}.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);padding:21px 23px}.stat p{color:var(--muted);font-size:12px}.stat strong{display:block;font-size:32px;letter-spacing:-1px;font-weight:550;margin:13px 0 5px}.stat small{font-size:11px;color:var(--hint)}.stat.pending{background:var(--review-bg);border-color:var(--highlight-border)}.stat.pending strong{color:var(--review-text)}.section-heading{display:flex;gap:20px;justify-content:space-between;align-items:center;margin-bottom:19px}.section-heading .muted{font-size:12px;margin-top:7px}.list-tools{display:flex;gap:10px;align-items:center}.search{position:relative;margin:0;font-weight:400}.search>span{position:absolute;top:9px;left:13px;font-size:20px;color:var(--hint)}.search input{width:220px;padding-left:36px;background:var(--input-bg)}.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--card)}table{border-collapse:collapse;width:100%;text-align:left;white-space:nowrap}th{font-size:10px;font-weight:550;color:var(--hint);letter-spacing:.5px;padding:16px 20px;background:var(--sidebar-bg);border-bottom:1px solid var(--line)}td{padding:20px;border-bottom:1px solid var(--row-border);font-size:12px;color:var(--muted)}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:var(--row-highlight)}.cell-title{font-weight:550;color:var(--ink);font-size:13px;margin-bottom:5px}.cell-subtitle{font-size:11px;color:var(--hint)}.table-action{color:var(--accent-text);background:transparent;border-color:transparent}.table-action:hover{background:var(--accent-tint)}.badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:550;padding:5px 8px;border-radius:5px;background:var(--accent-tint);color:var(--muted)}.badge.active,.badge.paid,.badge.recorded{background:var(--signed-bg);color:var(--signed-text)}.badge.pending{background:var(--review-bg);color:var(--review-text)}.badge.suspended,.badge.failed{background:var(--danger-bg);color:var(--danger)}.empty{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);text-align:center;padding:66px 24px}.empty-mark{width:48px;height:48px;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent-text);font-size:27px;border-radius:var(--radius-card);margin:0 auto 19px}.empty h3{margin-bottom:9px}.empty p{max-width:380px;font-size:13px;line-height:1.8;color:var(--muted);margin:auto}.empty button{margin-top:22px}.info-note{background:var(--accent-tint);color:var(--secondary);line-height:1.7;font-size:12px;padding:15px 18px;border-radius:var(--radius-control);margin-top:23px}.content-footer{font-size:10px;color:var(--hint);margin-top:48px;border-top:1px solid var(--border);padding-top:20px;display:flex;justify-content:space-between;gap:20px}#list-note{margin-top:14px}#notice{border:1px solid var(--accent-surface);border-radius:var(--radius-control);background:var(--accent-tint);padding:12px 16px;margin-bottom:20px;color:var(--accent-text);font-size:13px;line-height:1.5}#notice.problem{color:var(--danger);background:var(--danger-bg);border-color:var(--danger-border)}
dialog{border:1px solid var(--border);border-radius:var(--radius-dialog);padding:29px 32px;color:inherit;width:min(620px,calc(100vw - 32px));max-height:90vh;background:var(--popover);box-shadow:var(--shadow-dialog)}dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(3px)}.dialog-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:25px}.dialog-heading h2{font-size:23px}.dialog-heading .eyebrow{margin-bottom:9px}.icon-button{font-size:25px;color:var(--muted);background:var(--row-highlight);border-color:transparent}.form-field{margin-bottom:19px}.form-field .fineprint{margin-top:6px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:17px}.dialog-actions{display:flex;justify-content:flex-end;gap:11px;border-top:1px solid var(--line);padding-top:20px;margin-top:23px}.dialog-description{color:var(--muted);font-size:13px;line-height:1.7;margin-bottom:22px}.detail-strip{display:flex;justify-content:space-between;gap:12px;background:var(--sunken);border-radius:var(--radius-control);padding:15px;margin-bottom:23px;font-size:12px;color:var(--muted)}.detail-strip strong{display:block;font-size:14px;color:var(--secondary);margin-top:6px}.dialog-subsection{border-top:1px solid var(--line);margin-top:23px;padding-top:21px}.dialog-subsection h3{margin-bottom:14px}.member-line{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--row-border);gap:10px;font-size:12px}.member-line:last-child{border-bottom:0}.member-list{max-height:175px;overflow:auto}.inline-actions{display:flex;flex-wrap:wrap;gap:15px;margin-top:14px}.invitation-link{font-family:var(--font-mono),ui-monospace,monospace;font-size:12px;overflow-wrap:anywhere;padding:16px;background:var(--row-highlight);border-radius:var(--radius-control);line-height:1.7;margin:20px 0}.audit-detail{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.7 ui-monospace,monospace;background:var(--row-highlight);padding:17px;border-radius:var(--radius-control)}.activity-description{max-width:260px;overflow:hidden;text-overflow:ellipsis}.loading{padding:60px;text-align:center;color:var(--hint);font-size:13px}
@media(min-width:1500px){.content{padding:49px 64px}.topbar{padding:0 64px}}
@media(max-width:1100px){.sidebar{padding:28px 16px}.shell{grid-template-columns:200px minmax(0,1fr)}.content{padding:30px 27px}.topbar{padding:0 27px}.stat{padding:18px 16px}.search input{width:180px}th,td{padding-left:15px;padding-right:15px}.entry-brand{padding:40px}}
@media(max-width:800px){.shell{grid-template-columns:1fr}.sidebar{height:auto;position:static;padding:18px 22px;gap:19px;border-right:0;border-bottom:1px solid var(--line)}.sidebar .wordmark{font-size:22px}.sidebar .wordmark img{width:29px;height:29px}.workspace-label,.sidebar-bottom{display:none}nav{flex-direction:row;overflow:auto;gap:3px}nav button{white-space:nowrap}nav button>span{display:none}.topbar{height:48px;padding:0 23px}.content{padding:28px 23px}.stats{gap:10px}.stat{padding:15px 12px}.stat p{font-size:11px}.stat strong{font-size:27px}.stat small{font-size:10px}.page-heading h1{font-size:27px}.entry-brand{padding:34px}.entry-form{padding:34px}.entry-message h1{font-size:38px}}
@media(max-width:550px){.entry{grid-template-columns:1fr}.entry-brand{min-height:0;padding:26px}.entry-message,.entry-foot{display:none}.entry-form{padding:45px 28px;align-items:start}.login-form h2{font-size:26px}.page-heading{align-items:flex-start;flex-direction:column;gap:19px}.stats{grid-template-columns:1fr 1fr;margin-bottom:28px}.section-heading{align-items:flex-start;flex-direction:column}.list-tools{width:100%}.search{flex:1}.search input{width:100%}.content-footer{flex-direction:column;gap:7px}.form-row{grid-template-columns:1fr;gap:0}dialog{padding:24px}.detail-strip{flex-wrap:wrap;line-height:1.6}.dialog-actions{flex-wrap:wrap}.page-heading .eyebrow{font-size:9px}.sidebar{padding:17px}.content{padding:26px 18px}.topbar{padding:0 18px}}
/* Keep narrow screens contained while tables scroll inside their own viewport. */
.sidebar,nav{min-width:0}.mobile-signout{display:none}.topbar-actions{display:flex;align-items:center;gap:16px}nav svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}th{font-size:11px;color:var(--hint)}.badge{font-size:11px}.cell-subtitle{color:var(--hint)}.stat p{color:var(--hint)}
@media(max-width:800px){.shell{grid-template-columns:minmax(0,1fr)}nav{max-width:100%}nav svg{display:none}.mobile-signout{display:block;font-size:11px}.topbar .staff-pill{display:none}}
@media(max-width:550px){nav{gap:0}}

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

/* END GENERATED */
/* ==== Staff portal (design "DocVoc Staff Portal", 15 Sept 2026) ============================================================
   Colours come only from the tokens above: the design's navy sidebar is --recorder, its chips are the status tokens.
   Type: Archivo and IBM Plex Mono from Google Fonts (index.html), with the system stack as fallback. */
:root { --staff-sans: 'Archivo', var(--font-sans); --staff-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --staff-bg: var(--app-bg); --staff-line: var(--border); --staff-soft: var(--row-border); --staff-navy: var(--recorder);
  --staff-on-navy: var(--on-accent); --staff-navy-text: var(--recorder-muted); --pill: 100px; }
html, body { font-family: var(--staff-sans); background: var(--staff-bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
:root { font-family: var(--staff-sans); }
button, input, select, textarea { font-family: var(--staff-sans); }
.mono, code, kbd, pre { font-family: var(--staff-mono); }
.mono { font-size: 10.5px; color: var(--hint); letter-spacing: 0; }
a { color: var(--accent-text); }
.error { margin: 8px 0 0; min-height: 0; }
.error:empty { display: none; }

/* ---- sign-in ---- */
.login { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); min-height: 100vh; background: var(--staff-bg); }
.login-brand { background: var(--staff-navy); padding: 34px 34px 28px; display: flex; flex-direction: column; gap: 26px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 32px; height: 32px; border-radius: 10px; display: block; flex: none; }
.brand-name { font-size: 17px; font-weight: 700; color: var(--staff-on-navy); letter-spacing: -0.01em; }
.brand-tag { font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; color: var(--staff-navy-text); opacity: .8; padding-top: 3px; }
.login-message { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 180px; max-width: 460px; }
.login-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--staff-navy-text); opacity: .85; }
.login-message h1 { font-size: 27px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--staff-on-navy); }
.login-message p:last-child { font-size: 13px; line-height: 1.55; color: var(--staff-navy-text); max-width: 340px; }
.login-foot { font-size: 11px; color: var(--staff-navy-text); opacity: .75; }
.login-panel { display: flex; align-items: center; justify-content: center; padding: 40px 28px; }
.login-form { width: 100%; max-width: 372px; display: flex; flex-direction: column; }
.login-form h2 { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.login-lead { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 22px; }
.login-form label { font-size: 12px; font-weight: 500; color: var(--secondary); margin: 0 0 6px; }
.login-form input { height: 44px; border-radius: 11px; border-color: var(--input-border); margin-bottom: 13px; font-size: 13.5px; }
.password-field { position: relative; }
.password-field input { padding-right: 64px; }
.show-password { position: absolute; right: 6px; top: 6px; min-height: 0; height: 32px; padding: 0 10px; border: 0; background: transparent; color: var(--accent-text); font-size: 11.5px; font-weight: 600; }
.btn-block { width: 100%; height: 46px; border-radius: 12px; border: 0; font-size: 14.5px; font-weight: 600; margin-top: 6px; }
.login-warning { display: flex; gap: 11px; padding: 13px 14px; border-radius: 12px; background: var(--review-bg); margin-top: 20px; }
.login-warning > span { width: 7px; height: 7px; flex: none; margin-top: 5px; border-radius: 50%; background: var(--review-dot); }
.login-warning p { font-size: 11.5px; line-height: 1.5; color: var(--review-text); }
.login-warning b { font-weight: 600; }
.login-form .fineprint { margin-top: 16px; font-size: 11px; color: var(--hint); }
.login-session { font-size: 11px; color: var(--hint); margin-top: 4px !important; }
/* Sign-in by address (staff_portal/api.py stamps data-sign-in): Google on the public address, password on the private one. */
.login[data-sign-in="google"] .password-only, .login[data-sign-in="unavailable"] .password-only { display: none; }
.login:not([data-sign-in="google"]):not([data-sign-in="unavailable"]) .google-only { display: none; }
.login:not([data-sign-in="unavailable"]) .unavailable-only { display: none; }
.google-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 46px; border-radius: 12px; border: 1px solid var(--input-border); background: var(--card); color: var(--ink); font-size: 14.5px; font-weight: 600; margin-top: 6px; }
.google-button:hover:not(:disabled) { background: var(--row-highlight); border-color: var(--accent-surface); }
.google-button:disabled { cursor: not-allowed; }
.google-g { flex: none; }
#sso-error { margin: 0 0 12px; }

/* ---- the frame: navy sidebar, sticky top bar ---- */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; background: linear-gradient(to right, var(--staff-navy) 236px, var(--staff-bg) 236px); }
.side { background: var(--staff-navy); display: flex; flex-direction: column; padding: 20px 14px 18px; position: sticky; top: 0; height: 100vh; min-width: 0; }
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 22px; }
.side .brand-mark { width: 30px; height: 30px; border-radius: 9px; }
.side .brand-name { font-size: 16px; }
.menu-toggle { display: none; }
.side-nav.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav button { display: flex; align-items: center; gap: 11px; padding: 9px 10px; min-height: 0; border: 0; border-radius: 9px; background: transparent; color: var(--staff-navy-text); font-size: 13.5px; font-weight: 500; text-align: left; width: 100%; }
.side-nav button::before { content: ''; width: 2px; height: 14px; border-radius: 2px; background: color-mix(in srgb, var(--staff-navy-text) 40%, transparent); flex: none; }
.side-nav button:hover { background: color-mix(in srgb, var(--staff-on-navy) 7%, transparent); }
.side-nav button.selected { background: color-mix(in srgb, var(--staff-on-navy) 12%, transparent); color: var(--staff-on-navy); font-weight: 500; }
.side-nav button.selected::before { background: var(--accent-text); }
.nav-badge { margin-left: auto; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px; background: var(--highlight-border); color: var(--staff-navy); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.side-privacy { margin-top: auto; padding: 14px 10px; border-radius: 12px; background: color-mix(in srgb, var(--staff-on-navy) 5%, transparent); display: flex; flex-direction: column; gap: 7px; }
.privacy-title { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: color-mix(in srgb, var(--signed-dot) 45%, var(--staff-on-navy)); }
.privacy-title span { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--signed-dot) 70%, var(--staff-on-navy)); }
.side-privacy p:last-child { font-size: 11.5px; line-height: 1.5; color: var(--staff-navy-text); }
.side-operator { padding: 14px 10px 0; display: flex; align-items: center; gap: 10px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; }
.operator-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#staff-email { font-size: 12px; color: var(--recorder-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; padding: 0; }
.operator-text small { font-size: 10.5px; color: var(--staff-navy-text); opacity: .8; }
.link-button { min-height: 0; padding: 4px 2px; border: 0; background: transparent; color: var(--accent-text); font-size: 12px; font-weight: 600; }
.side .link-button { color: var(--level); font-weight: 500; font-size: 11px; }
.side .link-button:hover { color: var(--staff-on-navy); }
.main { min-width: 0; display: flex; flex-direction: column; background: var(--staff-bg); }
.top { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--staff-bg) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--staff-line); padding: 14px 28px; display: flex; align-items: center; gap: 14px; }
.crumb { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-search { position: relative; flex: none; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 9px; background: var(--card); border: 1px solid var(--staff-line); width: 250px; }
.search-ring { width: 12px; height: 12px; border-radius: 50%; border: 1.6px solid var(--disabled); flex: none; }
.global-search input { border: 0; height: 30px; padding: 0; background: transparent; font-size: 12.5px; box-shadow: none !important; min-width: 0; }
.global-search kbd { font-size: 10.5px; color: var(--disabled); }
.search-results { position: absolute; top: 40px; right: 0; width: min(420px, 90vw); max-height: 70vh; overflow: auto; background: var(--popover); border: 1px solid var(--staff-line); border-radius: 12px; box-shadow: var(--shadow-dialog); padding: 8px; z-index: 20; }
.search-group { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--hint); padding: 8px 10px 4px; }
.search-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; color: var(--ink); }
.search-item:hover, .search-item:focus { background: var(--accent-tint); outline: none; }
.search-label { font-size: 13px; font-weight: 500; }
.search-sub { font-size: 11.5px; color: var(--muted); }
.search-empty { font-size: 12.5px; color: var(--muted); padding: 10px; }
.live { flex: none; min-height: 0; height: 34px; padding: 0 13px; border-radius: 9px; background: var(--card); border: 1px solid var(--staff-line); display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--secondary); white-space: nowrap; }
.live:disabled { cursor: progress; opacity: 1; }
.live:disabled .live-dot { animation: pulse 1s var(--ease) infinite alternate; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signed-dot); flex: none; display: inline-block; }
.live-dot.blue { background: var(--accent); }
@keyframes pulse { to { opacity: .3; } }
.mobile-signout { display: none; }
.page { flex: 1; min-width: 0; padding: 26px 28px 40px; }
.page-inner { display: flex; flex-direction: column; gap: 18px; max-width: 1180px; }
.page-footer { border-top: 1px solid var(--staff-line); padding: 16px 28px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; font-size: 12px; color: var(--muted); }
#notice { max-width: 1180px; margin: 0 0 16px; border: 1px solid var(--accent-surface); border-radius: 12px; background: var(--accent-tint); padding: 11px 15px; color: var(--accent-strong); font-size: 13px; line-height: 1.5; }
#notice.problem { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); }
.loading { padding: 60px; text-align: center; color: var(--hint); font-size: 13px; }
.loading.small { padding: 10px; text-align: left; }

/* ---- page parts ---- */
.page-head { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.page-head-text { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 5px; }
.page-head h1, .detail-title h1 { margin: 0; font-size: 25px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; }
.page-head h1:focus, .detail-title h1:focus { outline: none; }
.page-head p, #page-description { font-size: 13.5px; color: var(--muted); }
.page-kicker { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--hint); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.back-link { font-size: 12.5px; color: var(--accent-text); align-self: flex-start; }
.back-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.card { background: var(--card); border: 1px solid var(--staff-line); border-radius: 14px; overflow: hidden; min-width: 0; }
.card-head { padding: 15px 18px 13px; border-bottom: 1px solid var(--staff-soft); display: flex; align-items: center; gap: 10px; }
.card-head.wrap { flex-wrap: wrap; row-gap: 10px; }
.card-title { flex: 1; font-size: 14.5px; font-weight: 600; letter-spacing: 0; }
.card-head.wrap .card-title { flex: 0 0 auto; margin-right: 6px; }
.card-head.wrap .card-note { margin-left: auto; }
.card-note { font-size: 11.5px; color: var(--muted); }
.card-foot { padding: 11px 18px 12px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.card-empty { padding: 16px 18px; font-size: 12.5px; color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.info-card { background: var(--accent-tint); border: 1px solid var(--accent-surface); border-radius: 14px; padding: 15px 18px; display: flex; flex-direction: column; gap: 6px; }
.info-title { font-size: 13px; font-weight: 600; color: var(--accent-strong); }
.info-card p:last-child { font-size: 12px; line-height: 1.5; color: var(--secondary); }
.eyebrow-label { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.fineprint { font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.list-note { font-size: 12px; color: var(--muted); }
.dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--disabled); display: inline-block; flex: none; }
.empty { background: var(--card); border: 1px solid var(--staff-line); border-radius: 14px; text-align: center; padding: 46px 24px; }
.card .empty { border: 0; border-radius: 0; }
.empty-mark { width: 44px; height: 44px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-text); font-size: 22px; border-radius: 12px; margin: 0 auto 14px; }
.empty h3 { font-size: 15px; margin-bottom: 6px; }
.empty p { max-width: 380px; font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0 auto; }
.empty button { margin-top: 16px; }

/* ---- chips, tones, bars, accents ---- */
.chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--pill); font-size: 10.5px; font-weight: 600; white-space: nowrap; line-height: 1.6; }
.chip.ok { background: var(--signed-bg); color: var(--signed-text); }
.chip.warn { background: var(--review-bg); color: var(--review-text); }
.chip.bad { background: var(--danger-bg); color: var(--danger); }
.chip.flat { background: var(--recording-bg); color: var(--recording-text); }
.chip.info { background: var(--accent-tint); color: var(--accent-strong); }
.chip.tiny { font-size: 10px; padding: 1px 7px; }
.tone-ok { color: var(--signed-text); } .tone-warn, .tone-amber { color: var(--review-text); } .tone-bad, .tone-red { color: var(--danger); }
.tone-blue { color: var(--muted); } .tone-flat { color: var(--recording-text); } .tone-ink { color: var(--ink); }
.tone-bg-red { background: var(--danger-bg); color: var(--danger); } .tone-bg-amber { background: var(--review-bg); color: var(--review-text); } .tone-bg-blue { background: var(--accent-tint); color: var(--accent-strong); }
.bar { height: 6px; border-radius: 4px; background: var(--recording-bg); overflow: hidden; display: block; }
.bar.thin { height: 5px; } .bar.thick { height: 8px; border-radius: 5px; }
.bar .fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--motion-slow) var(--ease); }
.bar .fill.amber { background: var(--review-dot); } .bar .fill.red { background: var(--danger); }
.accent { width: 3px; align-self: stretch; border-radius: 2px; flex: none; background: var(--disabled); }
.accent.red { background: var(--danger); } .accent.amber { background: var(--review-dot); } .accent.blue { background: var(--accent); } .accent.grey { background: var(--disabled); }

/* ---- buttons (pills) ---- */
.btn { --control-size: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; min-height: 0; padding: 0 16px; border-radius: var(--pill); font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; border: 1px solid transparent; cursor: pointer; line-height: 1; }
.btn.small { height: 30px; padding: 0 13px; font-size: 12px; }
.btn.block { width: 100%; }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: none; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.outline { background: var(--card); color: var(--accent-text); border-color: var(--accent-surface); }
.btn.outline:hover { background: var(--accent-tint); }
.btn.neutral { background: var(--card); color: var(--secondary); border-color: var(--accent-surface); }
.btn.neutral:hover { background: var(--staff-bg); }
.btn.danger { background: var(--card); color: var(--danger); border-color: var(--danger-border); }
.btn.danger:hover { background: var(--danger-bg); }
.btn.danger-fill { background: var(--danger-fill); color: var(--on-accent); border-color: var(--danger-fill); }
.btn.success { background: var(--signed-text); color: var(--on-accent); border-color: var(--signed-text); }
.btn.success-outline { background: var(--card); color: var(--signed-text); border-color: color-mix(in srgb, var(--signed-dot) 40%, transparent); }
.btn:disabled { opacity: .55; cursor: wait; }
.pair { display: flex; gap: 8px; } .pair > * { flex: 1; }
.q-link, .open-link { font-size: 12px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }

/* ---- KPIs ---- */
.kpis { background: var(--card); border: 1px solid var(--staff-line); border-radius: 14px; display: flex; flex-wrap: wrap; overflow: hidden; }
.kpis.inset { border: 0; border-radius: 0; border-bottom: 1px solid var(--staff-soft); }
.kpis.inset .kpi { flex: 1 1 30%; }
.kpi { flex: 1 1 150px; min-width: 140px; padding: 15px 18px; border-left: 1px solid var(--staff-soft); margin-left: -1px; display: flex; flex-direction: column; gap: 3px; background: transparent; border-radius: 0; border-top: 0; border-right: 0; border-bottom: 0; }
.kpi-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kpi-value { display: flex; align-items: baseline; gap: 7px; }
.kpi-value strong { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.kpi-value strong.tone-warn { color: var(--review-text); } .kpi-value strong.tone-bad { color: var(--danger); }
.kpi-tag { font-size: 11px; font-weight: 600; }
.kpi-sub { font-size: 11.5px; color: var(--muted); }
.stat.pending { background: transparent; border-color: var(--staff-soft); }
.cell > .chip { align-self: flex-start; }

/* ---- overview ---- */
.overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.qitem, .ticket-row { padding: 13px 18px; border-bottom: 1px solid var(--staff-soft); display: flex; gap: 13px; align-items: flex-start; }
.q-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.q-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.q-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
a.q-name:hover { color: var(--accent-text); }
.q-detail { font-size: 12px; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.q-detail.quote { color: var(--secondary); }
.q-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 11.5px; color: var(--secondary); }
.q-actions { flex: none; display: flex; flex-direction: column; gap: 6px; width: 124px; }
.q-actions .btn { width: 100%; }
.q-pair { display: flex; gap: 6px; } .q-pair .btn { flex: 1; padding: 0 6px; height: 28px; font-size: 11.5px; }
.q-actions .q-link { text-align: center; padding-top: 2px; }
.usage-list { display: flex; flex-direction: column; }
.usage-row { padding: 12px 18px; border-bottom: 1px solid var(--staff-soft); display: flex; flex-direction: column; gap: 7px; color: var(--ink); }
.usage-row:last-child { border-bottom: 0; }
a.usage-row:hover { background: var(--row-highlight); }
.usage-row.static { padding: 0; border: 0; }
.usage-top { display: flex; align-items: baseline; gap: 10px; }
.usage-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-top .mono { font-size: 11.5px; white-space: nowrap; }
.usage-note { font-size: 11.5px; color: var(--muted); }
.status-list { padding: 6px 18px 10px; display: flex; flex-direction: column; }
.status-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.status-label { flex: 1; }
.status-state { font-size: 12px; font-weight: 500; }
.status-state.operational { color: var(--signed-text); } .status-state.degraded { color: var(--review-text); } .status-state.down { color: var(--danger); } .status-state.unknown { color: var(--hint); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--disabled); display: inline-block; }
.status-dot.operational, .status-dot.green { background: var(--signed-dot); } .status-dot.degraded, .status-dot.amber { background: var(--review-dot); } .status-dot.down, .status-dot.red { background: var(--danger); } .status-dot.info, .status-dot.blue { background: var(--accent); } .status-dot.grey { background: var(--disabled); }

/* ---- toolbars, filters, search ---- */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar-count { margin-left: auto; font-size: 12px; color: var(--muted); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter { min-height: 0; height: auto; padding: 7px 13px; border-radius: var(--pill); background: var(--card); border: 1px solid var(--staff-line); color: var(--secondary); font-size: 12.5px; font-weight: 500; }
.filter:hover { border-color: var(--accent-surface); }
.filter.on { background: var(--staff-navy); border-color: var(--staff-navy); color: var(--staff-on-navy); }
.search-field { position: relative; display: flex; align-items: center; margin: 0; font-weight: 400; }
.search-field .search-ring { position: absolute; left: 13px; }
.search-field input { width: 230px; height: 36px; padding-left: 34px; border-radius: 10px; border-color: var(--staff-line); font-size: 13px; }
.people-tools { align-items: stretch; }
.big-search { flex: 1 1 420px; display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--staff-line); border-radius: 12px; padding: 0 14px 0 4px; min-width: 0; }
.big-search .search-field { flex: 1; }
.big-search .search-field input { width: 100%; border: 0; height: 40px; box-shadow: none !important; font-size: 13.5px; }
.big-search .toolbar-count { margin: 0; white-space: nowrap; font-size: 11px; }

/* ---- tables (cards on phones) ---- */
.table-wrap { background: var(--card); border: 1px solid var(--staff-line); border-radius: 14px; overflow-x: auto; }
.card .table-wrap, .tab-panel .table-wrap { border: 0; border-radius: 0; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; white-space: normal; }
.data-table th { padding: 11px 18px; background: var(--sidebar-bg); border-bottom: 1px solid var(--staff-line); font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.data-table td { padding: 14px 18px; border-bottom: 1px solid var(--staff-soft); font-size: 12.5px; color: var(--secondary); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--row-highlight); }
.data-table tr.clickable { cursor: pointer; }
.data-table tr.at-limit { background: color-mix(in srgb, var(--danger-bg) 55%, var(--card)); }
.cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cell-title { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; margin: 0; }
.cell-title.small { font-size: 12.5px; font-weight: 500; }
.cell-subtitle { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.cell-flag { font-size: 11px; font-weight: 600; color: var(--accent-strong); }
.organization-link, .person-link, .plain-link { color: var(--ink); }
.organization-link:hover, .person-link:hover, .plain-link:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.plan-cell { gap: 5px; min-width: 200px; }
.plan-cell .mono { font-size: 11px; }
.flag { font-size: 11px; font-weight: 600; line-height: 1.35; }
.flag.tone-blue { color: var(--accent-strong); }
.workspaces-table td:last-child { text-align: right; width: 90px; }
.devices-cell { display: inline-flex; align-items: center; gap: 6px; }
.devices-cell .mono { font-size: 11.5px; }
.people-table td:last-child { text-align: right; white-space: nowrap; }
.amount { font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.reference { font-size: 11.5px; color: var(--secondary); }

/* ---- workspace detail ---- */
.detail-head { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.avatar-tile { width: 46px; height: 46px; border-radius: 13px; background: var(--accent-tint); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex: none; }
.detail-title { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 6px; }
.detail-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(260px, .85fr); gap: 16px; align-items: start; }
.state-strip { display: flex; flex-wrap: wrap; }
.state { flex: 1 1 160px; min-width: 150px; padding: 15px 18px; border-left: 1px solid var(--staff-soft); margin-left: -1px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.state .chip { font-size: 12px; padding: 3px 10px; }
.state-sub { font-size: 11.5px; }
.plan-block { border-top: 1px solid var(--staff-soft); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.plan-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.plan-top .plan-name { flex: 1; min-width: 120px; font-size: 14px; font-weight: 600; }
.plan-top .mono { font-size: 12px; }
.plan-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.plan-flag { padding: 9px 12px; border-radius: 10px; font-size: 12px; font-weight: 500; }
.tabs.tabs { display: flex; flex-direction: row; gap: 4px; padding: 10px 12px 0; border-bottom: 1px solid var(--staff-soft); flex-wrap: wrap; }
.tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 11px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.tab:hover { color: var(--accent-text); }
.tab.on { color: var(--accent-text); box-shadow: inset 0 -2.5px 0 var(--accent); }
.tab-count { font-size: 12.5px; font-weight: 600; }
.tab-panel { min-width: 0; }
.panel-section { padding: 16px 18px; border-bottom: 1px solid var(--staff-soft); display: flex; flex-direction: column; gap: 12px; }
.panel-section > .btn { align-self: flex-start; }
.panel-section.row { flex-direction: row; align-items: center; flex-wrap: wrap; }
.panel-section.row .fineprint { flex: 1; min-width: 210px; }
.panel-foot { padding: 13px 18px; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.panel-foot.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.panel-foot.row > span { flex: 1; min-width: 200px; }
.next-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 11px; }
.next-title { font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.next-body { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.next-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.next-state { font-size: 10.5px; overflow-wrap: anywhere; }
.facts { margin: 0; }
.fact { display: flex; gap: 12px; padding: 9px 18px; border-top: 1px solid var(--staff-soft); align-items: baseline; }
.card-head + .facts .fact:first-child { border-top: 0; }
.fact dt { flex: 1; font-size: 12px; color: var(--muted); }
.fact dd { margin: 0; font-size: 12px; font-weight: 500; text-align: right; overflow-wrap: anywhere; max-width: 65%; }
.fact dd .chip { margin-left: 4px; }
.access-check { padding: 12px 18px 16px; display: flex; flex-direction: column; gap: 6px; }
.organization-detail-note { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.people-head, .person-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1.2fr) 124px; gap: 12px; align-items: center; }
.people-head { padding: 11px 18px; background: var(--sidebar-bg); border-bottom: 1px solid var(--staff-soft); font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.people-head span:last-child { text-align: right; }
.person { border-bottom: 1px solid var(--staff-soft); }
.person-row { width: 100%; min-height: 0; padding: 13px 18px; border: 0; border-radius: 0; background: transparent; text-align: left; font-weight: 400; color: var(--ink); }
.person-row:hover, .person.open .person-row { background: var(--row-highlight); }
.person-row > span:nth-child(3) { display: flex; gap: 6px; flex-wrap: wrap; }
.person-role { font-size: 12.5px; color: var(--muted); }
.person-devices { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.person-devices .mono { font-size: 11.5px; white-space: nowrap; }
.caret { width: 7px; height: 7px; border-right: 1.8px solid var(--muted); border-bottom: 1.8px solid var(--muted); transform: rotate(45deg); margin-top: -3px; transition: transform var(--motion-fast) var(--ease); }
.person.open .caret { transform: rotate(-135deg); margin-top: 3px; }
.device-panel { padding: 4px 18px 14px; background: var(--row-highlight); display: flex; flex-direction: column; gap: 8px; }
.limit-warning { padding: 9px 12px; border-radius: 10px; background: var(--danger-bg); color: var(--danger); font-size: 11.5px; line-height: 1.45; }
.device { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--staff-line); background: var(--card); }
.device .cell { flex: 1; }
.device .cell-title { font-size: 12.5px; }
.device-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--disabled); flex: none; }
.device-dot.on { background: var(--signed-dot); }
.device-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
.device-foot .fineprint { flex: 1; min-width: 190px; font-size: 11px; }
.bill-rows { display: flex; flex-direction: column; }
.bill-row { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--staff-soft); }
.bill-row .cell { flex: 1; }
.bill-row .cell-title { font-size: 13px; font-weight: 500; }
.bill-row .mono { font-size: 12.5px; color: var(--ink); }
.activity-list { display: flex; flex-direction: column; }
.activity-row { width: 100%; min-height: 0; display: flex; gap: 14px; padding: 13px 18px; border: 0; border-bottom: 1px solid var(--staff-soft); border-radius: 0; background: transparent; text-align: left; align-items: flex-start; color: var(--ink); font-weight: 400; }
.activity-row:hover { background: var(--row-highlight); }
.activity-row .cell { flex: 1; }
.activity-row .status-dot { margin-top: 5px; }
.mono.action { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.mono.when { font-size: 11px; white-space: nowrap; }
.activity-by { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 12px; color: var(--muted); }
.activity-days { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.day-label { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.day-label::after { content: ''; flex: 1; height: 1px; background: var(--staff-line); }
.danger-row { flex-direction: row; align-items: center; flex-wrap: wrap; border-bottom: 0; }
.danger-row > div { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 3px; }
.danger-title { font-size: 12.5px; font-weight: 600; color: var(--danger); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.form-field { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.form-field label { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 12px; color: var(--secondary); font-weight: 500; }
.form-field .hint { font-size: 11px; color: var(--hint); font-weight: 400; }
.form-field input, .form-field select, .form-field textarea, .modal textarea, .composer textarea { width: 100%; border: 1px solid var(--input-border); border-radius: 10px; background: var(--input-bg); color: var(--ink); font-size: 13px; }
.form-field input, .form-field select { height: 38px; }
.form-field input[readonly] { background: var(--staff-bg); color: var(--muted); font-family: var(--staff-mono); font-size: 12px; }
.form-field textarea, .modal textarea, .composer textarea { padding: 11px 13px; line-height: 1.5; resize: vertical; min-height: 68px; }
.form-field.span-all { grid-column: 1 / -1; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
#organization-settings-form .form-field, #workspace-access-form .form-field { margin: 0; }
.model-policy { display: flex; flex-direction: column; }
.model-policy > .form-field, .model-policy > .error, .model-policy > .form-actions, .model-policy > .panel-note { margin: 0 18px 12px; }
.model-policy > .form-field:first-of-type { margin-top: 14px; }
.pair-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; background: var(--staff-bg); font-size: 11.5px; color: var(--secondary); }
.capability { border: 0; margin: 0; padding: 0; min-width: 0; }
.capability-head { width: 100%; padding: 13px 18px 10px; background: var(--sidebar-bg); border-bottom: 1px solid var(--staff-soft); border-top: 1px solid var(--staff-soft); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; float: left; }
.capability-head + * { clear: both; }
.capability-title { font-size: 12.5px; font-weight: 700; }
.model-row { display: flex; align-items: flex-start; gap: 13px; padding: 12px 18px; border-bottom: 1px solid var(--staff-soft); clear: both; }
.model-row.blocked { opacity: .55; }
.model-row .cell { flex: 1; }
.model-row .cell-title { font-size: 13px; }
.model-default, .model-allow { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 11.5px; color: var(--muted); font-weight: 500; flex: none; cursor: pointer; }
.model-default input, .model-allow input { accent-color: var(--accent); margin: 0; }
.impact { font-size: 11.5px; font-weight: 500; color: var(--accent-strong); }
.model-lines { display: flex; flex-direction: column; }
.model-line { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) auto; gap: 16px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--staff-soft); }
.model-line:last-child { border-bottom: 0; }
.model-state { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.state-label { font-size: 12.5px; font-weight: 500; }
.switch { width: 44px; height: 24px; min-height: 0; padding: 0; border-radius: 12px; border: 0; background: var(--disabled); position: relative; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-chip); transition: transform var(--motion-fast) var(--ease); }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.switch:disabled { cursor: not-allowed; opacity: .7; }

/* ---- support ---- */
.ticket-list { display: flex; flex-direction: column; }
.ticket-row:last-child { border-bottom: 0; }
.ticket-actions { flex: none; display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 118px; }
.ticket-actions.compact { min-width: 0; align-items: flex-end; }
.quiet-row { opacity: .9; }
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.runbook-item { padding: 13px 18px; border-bottom: 1px solid var(--staff-soft); display: flex; flex-direction: column; gap: 5px; }
.runbook-item:last-child { border-bottom: 0; }
.runbook-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.runbook-top .cell-title { font-size: 13px; }
.runbook-steps { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.runbook-caution { font-size: 12px; color: var(--review-text); }
.escalation { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--staff-soft); }
.escalation:last-child { border-bottom: 0; }
.escalation > .status-dot { margin-top: 5px; }
.escalation .cell { flex: 1; }
.escalation .cell-title { font-size: 13px; font-weight: 500; }
.esc-head { display: inline-flex; align-items: center; gap: 10px; }
.esc-line { font-size: 12px; line-height: 1.5; color: var(--secondary); overflow-wrap: anywhere; }
.cell-subtitle + .esc-line, .cell-title + .esc-line { margin-top: 3px; }
.esc-line b { font-weight: 600; color: var(--ink); }
.esc-line.then { color: var(--muted); }
.esc-line a { color: var(--accent-text); font-weight: 500; }
.esc-line a:hover { text-decoration: underline; text-underline-offset: 2px; }
.esc-note { color: var(--hint); }
.esc-line a[href^="tel:"], .esc-item .nowrap { white-space: nowrap; }
.esc-actions { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.esc-actions .link-button { color: var(--secondary); font-weight: 500; }
.esc-actions .link-button:hover { color: var(--accent-text); }
/* the Edit contacts dialog */
.esc-dialog, .esc-main { display: flex; flex-direction: column; gap: 14px; }
.esc-dialog > .error { margin: 0; }
.esc-status { font-size: 12px; color: var(--signed-text); background: var(--signed-bg); padding: 7px 10px; border-radius: 8px; }
.esc-status:empty { display: none; }
.esc-heading { font-size: 12px; font-weight: 600; color: var(--secondary); }
.esc-empty { font-size: 12.5px; color: var(--muted); padding: 12px 14px; border: 1px dashed var(--staff-line); border-radius: 12px; }
.esc-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--staff-soft); border-radius: 12px; }
.esc-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border-bottom: 1px solid var(--staff-soft); }
.esc-item:last-child { border-bottom: 0; }
.esc-item.editing { background: var(--accent-tint); }
.esc-item-main { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.esc-item-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.esc-item-top .cell-title { font-size: 13px; }
.esc-item-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.btn.icon { width: 30px; padding: 0; font-size: 14px; }
.btn.icon:disabled { cursor: not-allowed; opacity: .4; }
.esc-remove { flex-basis: 100%; display: flex; flex-direction: column; gap: 7px; padding: 11px 12px; border-radius: 10px; background: var(--danger-bg); border: 1px solid var(--danger-border); }
.esc-remove > .error, .esc-form > .error, .esc-area > .error { margin: 0; }
.esc-form, .esc-area { display: flex; flex-direction: column; gap: 12px; }
.esc-form { border-top: 1px solid var(--staff-soft); padding-top: 14px; }
.esc-area { padding-bottom: 14px; border-bottom: 1px solid var(--staff-soft); }
.esc-buttons { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.esc-foot { flex: 1 1 220px; align-self: center; }
.canned-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid var(--staff-soft); font-size: 13px; }
.canned-row:last-child { border-bottom: 0; }
.thread { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 86%; padding: 11px 14px; border-radius: 14px; background: var(--staff-bg); border: 1px solid var(--staff-soft); align-self: flex-start; }
.msg.staff { align-self: flex-end; background: var(--accent-tint); border-color: var(--accent-surface); }
.msg.system { align-self: center; background: transparent; border-style: dashed; }
.msg-meta { font-size: 11px; color: var(--hint); margin-bottom: 5px; }
.msg-body { font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.composer { border-top: 1px solid var(--staff-soft); padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 9px; }
.field-label { font-size: 12px; font-weight: 500; color: var(--secondary); margin: 0; }
.field-label.row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.counter, .hint { font-size: 11px; color: var(--hint); font-weight: 400; }
.hint.required { color: var(--danger); }
.canned-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.reply-warning { font-size: 11.5px; color: var(--review-text); background: var(--review-bg); padding: 7px 10px; border-radius: 8px; }
.composer-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.history { display: flex; flex-direction: column; }
.history-row { display: flex; flex-direction: column; gap: 2px; padding: 9px 18px; border-bottom: 1px solid var(--staff-soft); }
.history-row:last-child { border-bottom: 0; }
.history-row .mono.action { font-size: 11.5px; }

/* ---- dialogs (design modal) ---- */
dialog.modal { width: min(486px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 0; border: 0; border-radius: 16px; background: var(--popover); box-shadow: var(--shadow-dialog); color: var(--ink); overflow: auto; }
dialog.modal::backdrop { background: color-mix(in srgb, var(--staff-navy) 45%, transparent); backdrop-filter: none; }
.modal-head { padding: 20px 22px 16px; display: flex; align-items: flex-start; gap: 14px; border-bottom: 1px solid var(--staff-soft); }
.modal-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.modal-eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.modal-eyebrow:empty { display: none; }
.modal-head h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.modal-close { width: 30px; height: 30px; min-height: 0; padding: 0; flex: none; border-radius: 9px; border: 0; background: var(--staff-bg); color: var(--muted); font-size: 13px; }
.modal-close:hover { background: var(--accent-tint); }
.modal-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 16px; }
.modal-form > .error { margin: 0 22px 10px; }
.modal-text { font-size: 13px; line-height: 1.55; color: var(--secondary); overflow-wrap: anywhere; }
.modal-foot { padding: 14px 22px 18px; border-top: 1px solid var(--staff-soft); display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap; }
.preview { border-radius: 12px; border: 1px solid var(--staff-soft); background: var(--sidebar-bg); padding: 13px 14px; display: flex; flex-direction: column; gap: 9px; }
.preview-title { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.preview-row { display: flex; align-items: baseline; gap: 10px; font-size: 12px; flex-wrap: wrap; }
.preview-label { flex: 1; min-width: 110px; color: var(--muted); }
.preview-from { color: var(--hint); }
.preview-arrow { font-size: 11px; color: var(--hint); }
.preview-to { font-weight: 600; }
.preview-same { font-weight: 500; color: var(--secondary); }
.preview-note { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.causes { display: flex; gap: 7px; flex-wrap: wrap; }
.cause { min-height: 0; height: auto; padding: 7px 12px; border-radius: var(--pill); border: 1px solid var(--accent-surface); background: var(--card); color: var(--secondary); font-size: 12px; font-weight: 500; text-align: left; }
.cause:hover { border-color: var(--accent); }
.cause[aria-pressed="true"] { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-strong); }
.field { display: flex; flex-direction: column; gap: 7px; }
.plan-picker { display: flex; flex-direction: column; gap: 10px; }
.plan-option { display: flex; align-items: flex-start; gap: 12px; padding: 11px 13px; min-height: 0; border-radius: 12px; border: 1.5px solid var(--staff-soft); background: var(--card); text-align: left; font-weight: 400; color: var(--ink); }
.plan-option[aria-checked="true"] { border-color: var(--accent); background: var(--accent-tint); }
.plan-option > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.plan-name { font-size: 13px; font-weight: 600; }
.plan-hours { font-size: 11.5px; color: var(--muted); }
.radio { width: 16px; height: 16px; flex: none; margin-top: 2px; border-radius: 50%; border: 2px solid var(--disabled); display: inline-flex; align-items: center; justify-content: center; }
[aria-checked="true"] > .radio { border-color: var(--accent); }
[aria-checked="true"] > .radio::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.plan-picker select { height: 38px; border-radius: 10px; }
.inline-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.invitation-link { font-family: var(--staff-mono); font-size: 12px; overflow-wrap: anywhere; padding: 14px; background: var(--row-highlight); border-radius: 10px; line-height: 1.6; }
.audit-detail { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; background: var(--row-highlight); padding: 14px; border-radius: 10px; margin: 0; }

/* ---- narrower screens ---- */
@media (max-width: 1100px) { .detail-grid { grid-template-columns: minmax(0, 1fr); } .global-search { width: 200px; } }
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); background: var(--staff-bg); }
  .side { position: sticky; top: 0; z-index: 10; height: auto; padding: 12px 16px; }
  .side-top { padding: 0; }
  .menu-toggle { display: inline-flex; align-items: center; min-height: 0; height: 32px; padding: 0 12px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--staff-on-navy) 20%, transparent); background: transparent; color: var(--staff-on-navy); font-size: 12.5px; font-weight: 600; }
  .side-nav.side-nav, .side-privacy, .side-operator { display: none; }
  .side.open .side-nav { display: flex; padding-top: 12px; }
  .side.open .side-operator { display: flex; padding: 12px 10px 4px; }
  .top { position: static; flex-wrap: wrap; padding: 12px 16px; gap: 10px; }
  .crumb { flex-basis: 100%; }
  .global-search { flex: 1; width: auto; }
  .page { padding: 20px 16px 32px; }
  .page-footer { padding: 14px 16px; }
}
@media (max-width: 650px) {
  .page-head h1, .detail-title h1 { font-size: 22px; }
  .page-head .page-actions { width: 100%; }
  .kpi { flex-basis: 45%; min-width: 0; padding: 12px 14px; }
  .kpi-value strong { font-size: 22px; }
  .qitem, .ticket-row { flex-wrap: wrap; }
  .q-actions, .ticket-actions { width: 100%; flex-direction: row; flex-wrap: wrap; padding-left: 16px; }
  .q-actions .btn, .ticket-actions .btn { width: auto; flex: 1 1 auto; }
  .q-actions .q-pair { flex: 2 1 160px; }
  .toolbar-count { margin-left: 0; width: 100%; }
  .search-field, .search-field input { width: 100%; }
  .toolbar > .search-field { flex: 1 1 100%; }
  .big-search { flex-wrap: wrap; padding: 4px 10px 6px 4px; }
  .table-wrap { background: transparent; border: 0; overflow: visible; }
  .card .table-wrap, .tab-panel .table-wrap { padding: 10px; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table thead { display: none; }
  .data-table tr { border: 1px solid var(--staff-line); border-radius: 12px; background: var(--card); padding: 8px 14px; margin-bottom: 10px; }
  .data-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border: 0; text-align: right; }
  .data-table td::before { content: attr(data-label); flex-shrink: 0; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--hint); text-align: left; }
  .data-table td:first-child { display: block; text-align: left; }
  .data-table td:first-child::before, .data-table td[data-label=""]::before { content: none; }
  .data-table td > .cell { align-items: flex-end; text-align: right; }
  .data-table td:first-child > .cell { align-items: flex-start; text-align: left; }
  .workspaces-table td:last-child, .people-table td:last-child { width: 100%; }
  .plan-cell { min-width: 0; width: 70%; }
  .data-table td > .cell.plan-cell > .bar { align-self: stretch; }
  .people-head { display: none; }
  .person-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .person-row > span:nth-child(2) { grid-row: 2; }
  .person-row > span:nth-child(3) { grid-row: 2; justify-content: flex-end; }
  .person-devices { grid-row: 1; grid-column: 2; }
  .device { flex-wrap: wrap; }
  .model-line { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .model-state { justify-content: flex-start; }
  .model-row { flex-wrap: wrap; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .msg { max-width: 100%; }
  .composer-actions .btn { flex: 1 1 auto; }
  .escalation { flex-wrap: wrap; row-gap: 6px; }
  .esc-actions { width: 100%; flex-direction: row; justify-content: space-between; align-items: baseline; padding-left: 20px; }
  .fact dd { max-width: 60%; }
  .activity-row { flex-wrap: wrap; }
  .activity-by { flex-direction: row; gap: 8px; width: 100%; padding-left: 22px; align-items: baseline; }
  .login-brand { padding: 26px 20px; gap: 18px; }
  .login-message { min-height: 0; }
  .login-message h1 { font-size: 22px; }
  .login-panel { padding: 28px 20px 40px; }
}
@media (prefers-reduced-motion: reduce) { .live:disabled .live-dot { animation: none; } }