/* CYFOR Secure portal: the design system. One stylesheet for both apps.

   RULES (tests/census/test_design_tokens.py enforces every one):
   1. Colours live ONLY in the two theme blocks below, and both blocks define exactly the same
      tokens. Everywhere else a colour is var(--token), currentColor, transparent, inherit or a
      forced-colors system colour. So a new component is themed in both modes or it fails.
   2. The theme blocks are keyed on [data-theme], not on <html> alone, so any element can carry
      data-theme and re-theme its subtree (the style guide shows every component in both themes
      side by side this way). The dark block also matches a root with no data-theme at all.
   3. Custom properties defined outside the three token blocks are component-private and start
      with --_ (for example the --_tone-* trio a .tone-* class sets for badges, alerts and cards).
   4. No token is defined in terms of itself, and every var() names a token that exists.
   5. Text and control tokens meet WCAG AA in both themes; the pairs are listed and computed in the
      census test. Adding a text colour means adding its pairs there.
   6. The brand accent (teal, hue ~176) is NEVER the success colour. --brand* is identity and
      chrome; --success* means "this is fine". They are separate tokens with separate hues.
   Templates carry no style= and no <style> (templates census), so layout needs a class here. */

/* ---- Montserrat, self-hosted (SIL Open Font License 1.1: fonts/OFL.txt) ------------------------
   Headings, the organisation name and stat values only; body text is the system UI face, which
   reads better at small sizes. One variable file per subset covers weights 100-900. */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/montserrat-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ==== 1. Theme-independent tokens. No colours here. ========================================== */
:root{
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --radius-sm:7px;
  --radius:11px;
  --radius-lg:15px;
  --radius-pill:999px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --container:1120px;
  --staff-nav-width:244px;
  --focus-width:3px;
}

/* ==== 2. Dark theme: the default ============================================================== */
:root:not([data-theme="light"]),[data-theme="dark"]{
  color-scheme:dark;
  --bg:#07110f;
  --surface:#0d1b19;
  --surface-2:#132523;
  --inset:#091614;
  --header-bg:#0a1614;
  --control-bg:#091614;
  --border:#1e3330;
  --border-strong:#2f4b47;
  --control-border:#5d7e7a;
  --text:#e8f1f0;
  --text-muted:#a3bab7;
  --text-subtle:#8aa39f;
  --text-placeholder:#86a09c;
  --link:#46d3c8;
  --link-hover:#86e6de;
  --brand:#19c3b7;
  --brand-strong:#3fd8cd;
  --on-brand:#04201d;
  --brand-text:#6fe0d7;
  --brand-tint:#0e2d2a;
  --brand-line:#1f5c56;
  --focus:#7de9e1;
  --nav-active-bg:#123c38;
  --nav-active-text:#e6fffc;
  --success-text:#56d08f;
  --success-tint:#0f2a1d;
  --success-line:#25603f;
  --warning-text:#f0b54f;
  --warning-tint:#2c2310;
  --warning-line:#6a5220;
  --danger-text:#ff8c82;
  --danger-tint:#351719;
  --danger-line:#74302c;
  --danger-fill:#c0392b;
  --danger-fill-strong:#a8302a;
  --on-danger:#ffffff;
  --info-text:#86bdfb;
  --info-tint:#10233a;
  --info-line:#2d5580;
  --neutral-text:#aebfbd;
  --neutral-tint:#1b2c2a;
  --neutral-line:#3a524f;
  --critical-text:#ff9a9a;
  --critical-tint:#3d1418;
  --critical-line:#7a2c31;
  --high-text:#ffa27a;
  --high-tint:#36190f;
  --high-line:#7a3d22;
  --shadow-lg:rgba(0,0,0,.5);
  --scrim:rgba(1,8,7,.66);
  /* display values: elements drawn for one theme only (the two logo lockups, toggle icons) */
  --show-in-dark:block;
  --show-in-light:none;
  /* the QR code (c.qr): the same in both themes, because a phone camera needs black on white */
  --qr-ink:#000000;
  --qr-paper:#ffffff;
}

/* ==== 3. Light theme ========================================================================== */
[data-theme="light"]{
  color-scheme:light;
  --bg:#f2f6f5;
  --surface:#ffffff;
  --surface-2:#edf3f2;
  --inset:#f8fbfa;
  --header-bg:#ffffff;
  --control-bg:#ffffff;
  --border:#d8e3e1;
  --border-strong:#b9cbc8;
  --control-border:#6d8683;
  --text:#10201e;
  --text-muted:#43605c;
  --text-subtle:#52706b;
  --text-placeholder:#56736f;
  --link:#066a63;
  --link-hover:#04524d;
  --brand:#0b776f;
  --brand-strong:#075f59;
  --on-brand:#ffffff;
  --brand-text:#075f59;
  --brand-tint:#e1f3f1;
  --brand-line:#9fd2cd;
  --focus:#0a6a63;
  --nav-active-bg:#d8efec;
  --nav-active-text:#053f3b;
  --success-text:#16703f;
  --success-tint:#e2f3e9;
  --success-line:#a8d5b9;
  --warning-text:#875500;
  --warning-tint:#faf0d8;
  --warning-line:#e3c98a;
  --danger-text:#b3261e;
  --danger-tint:#fbe4e2;
  --danger-line:#e6aaa5;
  --danger-fill:#b3261e;
  --danger-fill-strong:#971d17;
  --on-danger:#ffffff;
  --info-text:#1d5ea6;
  --info-tint:#e4edf8;
  --info-line:#a9c4e6;
  --neutral-text:#4c625f;
  --neutral-tint:#e8efee;
  --neutral-line:#bccbc9;
  --critical-text:#9c1b1b;
  --critical-tint:#f9dfdf;
  --critical-line:#e0a3a3;
  --high-text:#a13e0c;
  --high-tint:#fbe7dc;
  --high-line:#e8b597;
  --shadow-lg:rgba(16,32,30,.16);
  --scrim:rgba(16,32,30,.45);
  --show-in-dark:none;
  --show-in-light:block;
  --qr-ink:#000000;
  --qr-paper:#ffffff;
}

/* ==== Base ==================================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;padding:0}
/* Anything carrying data-theme paints its own ground, so a themed subtree reads as that theme. */
[data-theme]{background:var(--bg);color:var(--text)}
body{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);
  font-family:var(--font-sans);font-size:.9375rem;line-height:1.55}
[hidden]{display:none !important}
img,svg,video{max-width:100%}
img{height:auto}
p{margin:0 0 var(--space-3)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:650;line-height:1.25;letter-spacing:-.01em;
  margin:0 0 var(--space-3);color:var(--text)}
h1{font-size:1.625rem}
h2{font-size:1.25rem}
h3{font-size:1.0625rem}
h4{font-size:.9375rem}
/* Links are underlined in running text: colour alone must not be what marks them (WCAG 1.4.1).
   Navigation, tabs and buttons drop the underline because their shape already says "control". */
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--link-hover);text-decoration-thickness:2px}
strong{font-weight:650}
code,kbd,samp,.mono{font-family:var(--font-mono);font-size:.84em}
hr{border:0;border-top:1px solid var(--border);margin:var(--space-5) 0}
::selection{background:var(--brand);color:var(--on-brand)}

/* Focus is always visible for keyboard users, in both themes (--focus clears 3:1 on every ground). */
:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:2px}
[tabindex="-1"]:focus{outline:none}

.skip-link{position:absolute;left:var(--space-3);top:-120px;z-index:100;padding:10px 16px;
  background:var(--surface);color:var(--text);border:var(--focus-width) solid var(--focus);
  border-radius:var(--radius-sm);font-weight:650;text-decoration:none}
.skip-link:focus{top:var(--space-3)}

.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ==== Shell: header, organisation heading, tabs, footer ======================================= */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--space-5)}

.site-header{background:var(--header-bg);border-bottom:1px solid var(--border)}
.bar-inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);
  min-height:62px;padding-block:var(--space-2)}
.brand{display:inline-flex;align-items:center;gap:var(--space-3);color:var(--text);
  text-decoration:none}
.brand:hover{color:var(--text)}
.logo{height:28px;width:auto}
.logo-on-dark{display:var(--show-in-dark)}
.logo-on-light{display:var(--show-in-light)}
.brand-tag{font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-muted);padding-left:var(--space-3);border-left:1px solid var(--border-strong)}
.header-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);
  margin-left:auto}
.signed-in{font-size:.8125rem;color:var(--text-muted)}
.signed-in strong{color:var(--text)}
.header-link{font-size:.875rem;color:var(--text-muted);text-decoration:none}
.header-link:hover{color:var(--text);text-decoration:underline}

.page-head{padding-block:var(--space-5) var(--space-2)}
.org-name{font-size:1.75rem;font-weight:750;margin:0;overflow-wrap:anywhere}

.tabs{margin-top:var(--space-2)}
.tab-list{display:flex;flex-wrap:wrap;gap:0 var(--space-1);list-style:none;margin:0;padding:0}
.tab{display:flex;align-items:center;gap:8px;padding:12px 14px 11px;color:var(--text-muted);
  font-weight:550;text-decoration:none;border-bottom:3px solid transparent}
.tab:hover{color:var(--text);text-decoration:none}
.tab[aria-current="page"]{color:var(--text);font-weight:650;border-bottom-color:var(--brand)}
.tab-count{font-size:.75rem;font-weight:650;line-height:1;padding:3px 7px;border-radius:var(--radius-pill);
  background:var(--brand-tint);color:var(--brand-text);border:1px solid var(--brand-line)}

.preview-banner{background:var(--warning-tint);border-bottom:1px solid var(--warning-line);
  color:var(--text)}
.preview-banner .container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);
  padding-block:10px;font-size:.875rem}
.preview-banner strong{color:var(--warning-text)}

.page{flex:1;padding-block:var(--space-6) var(--space-7)}

.site-footer{border-top:1px solid var(--border);background:var(--header-bg);color:var(--text-muted);
  font-size:.8125rem}
.footer-inner{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);justify-content:space-between;
  padding-block:var(--space-5)}
.site-footer a{color:var(--text-muted)}

/* Account menu: a <details> disclosure, so it opens with the keyboard and with JS off.
   portal.js only adds "close on outside click / Escape". */
.menu{position:relative}
.menu>summary{display:inline-flex;align-items:center;gap:8px;list-style:none;cursor:pointer;
  padding:6px 12px;border:1px solid var(--control-border);border-radius:var(--radius-pill);
  background:var(--surface-2);color:var(--text);font-size:.875rem;font-weight:550;max-width:100%}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{content:"";flex:none;width:7px;height:7px;margin:0 2px 3px 2px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.menu[open]>summary::after{transform:rotate(-135deg);margin-bottom:-3px}
.menu-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch}
.menu-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:210px;
  max-width:calc(100vw - 2 * var(--space-4));padding:6px;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);
  box-shadow:0 14px 36px var(--shadow-lg)}
.menu-panel ul{list-style:none;margin:0;padding:0}
.menu-panel form{margin:0}
.menu-item{display:block;width:100%;padding:9px 12px;border:0;border-radius:var(--radius-sm);
  background:none;color:var(--text);font:inherit;font-size:.875rem;text-align:left;
  text-decoration:none;cursor:pointer}
.menu-item:hover{background:var(--surface-2);color:var(--text);text-decoration:none}

/* Theme switch. Label stays "Dark theme"; aria-pressed carries the state (ARIA toggle-button). */
.theme-toggle{display:inline-flex;align-items:center;gap:8px;padding:5px 10px 5px 6px;
  border:1px solid var(--control-border);border-radius:var(--radius-pill);background:transparent;
  color:var(--text-muted);font:inherit;font-size:.8125rem;cursor:pointer}
.theme-toggle:hover{color:var(--text)}
.switch{position:relative;flex:none;width:30px;height:18px;border-radius:var(--radius-pill);
  background:var(--inset);border:1px solid var(--control-border)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;
  background:var(--text-muted);transition:transform .15s ease}
.theme-toggle[aria-pressed="true"] .switch{background:var(--brand);border-color:var(--brand)}
.theme-toggle[aria-pressed="true"] .switch::after{transform:translateX(12px);background:var(--on-brand)}

/* ==== Staff shell: left navigation ============================================================ */
.staff-frame{flex:1;display:grid;grid-template-columns:var(--staff-nav-width) minmax(0,1fr)}
.staff-nav{background:var(--surface);border-right:1px solid var(--border);padding:var(--space-4) var(--space-3)}
.staff-nav ul{list-style:none;margin:0;padding:0}
.staff-nav li+li{margin-top:2px}
.nav-link{display:block;padding:8px 12px;border-radius:var(--radius-sm);color:var(--text-muted);
  font-weight:550;text-decoration:none}
.nav-link:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.nav-link[aria-current="page"]{background:var(--nav-active-bg);color:var(--nav-active-text);font-weight:650}
.nav-group.contains-current>.nav-link{color:var(--text)}
.nav-sub{margin:2px 0 4px}
.nav-sub .nav-link{padding:6px 12px 6px 26px;font-size:.875rem}
.staff-bar,.staff-foot{padding-inline:var(--space-5)}
.staff-main{min-width:0;padding:var(--space-6) var(--space-6) var(--space-7)}
.staff-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--space-3) var(--space-4);margin-bottom:var(--space-5)}
.staff-head h1{margin:0;font-size:1.5rem}
.staff-lead{margin:6px 0 0;color:var(--text-muted);max-width:72ch}

/* ==== Components ============================================================================== */

/* Tone: one class sets the private trio every toned component reads. */
.tone-neutral{--_tone-text:var(--neutral-text);--_tone-tint:var(--neutral-tint);--_tone-line:var(--neutral-line)}
.tone-brand{--_tone-text:var(--brand-text);--_tone-tint:var(--brand-tint);--_tone-line:var(--brand-line)}
.tone-success{--_tone-text:var(--success-text);--_tone-tint:var(--success-tint);--_tone-line:var(--success-line)}
.tone-warning{--_tone-text:var(--warning-text);--_tone-tint:var(--warning-tint);--_tone-line:var(--warning-line)}
.tone-danger{--_tone-text:var(--danger-text);--_tone-tint:var(--danger-tint);--_tone-line:var(--danger-line)}
.tone-info{--_tone-text:var(--info-text);--_tone-tint:var(--info-tint);--_tone-line:var(--info-line)}
.tone-critical{--_tone-text:var(--critical-text);--_tone-tint:var(--critical-tint);--_tone-line:var(--critical-line)}
.tone-high{--_tone-text:var(--high-text);--_tone-tint:var(--high-tint);--_tone-line:var(--high-line)}

/* Icons draw in currentColor. They opt out of the global svg max-width: a percentage max-width
   makes a replaced element contribute nothing to a table cell's min-content width, so the cell
   came out narrower than its icon-plus-text and overflowed. */
.icon{display:inline-block;flex:none;max-width:none;vertical-align:-.15em}
a>.icon:first-child{margin-right:.3em}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;max-width:100%;
  padding:8px 16px;border:1px solid transparent;border-radius:var(--radius-sm);
  font:inherit;font-size:.875rem;font-weight:650;line-height:1.2;text-align:center;text-decoration:none;
  cursor:pointer}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn-primary:hover{background:var(--brand-strong);border-color:var(--brand-strong);color:var(--on-brand)}
.btn-secondary{background:var(--surface-2);border-color:var(--control-border);color:var(--text)}
.btn-secondary:hover{background:var(--inset);color:var(--text)}
.btn-ghost{background:transparent;color:var(--link)}
.btn-ghost:hover{background:var(--surface-2);color:var(--link-hover)}
.btn-danger{background:var(--danger-fill);border-color:var(--danger-fill);color:var(--on-danger)}
.btn-danger:hover{background:var(--danger-fill-strong);border-color:var(--danger-fill-strong);color:var(--on-danger)}
.btn-sm{min-height:32px;padding:5px 11px;font-size:.8125rem}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.btn-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}

/* Page header (customer pages: the h2 under the organisation name) */
.page-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--space-3) var(--space-4);margin-bottom:var(--space-5)}
.page-title{margin:0;font-size:1.3125rem}
.page-lead{margin:4px 0 0;color:var(--text-muted);max-width:72ch}

/* Card */
.card{min-width:0;padding:var(--space-5);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius)}
.card.has-tone{border-left:4px solid var(--_tone-line)}
.card-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--space-2) var(--space-4);margin-bottom:var(--space-3)}
.card-title{margin:0;font-size:1.0625rem}
.card-subtitle{margin:2px 0 0;color:var(--text-muted);font-size:.875rem}
.card-link{font-size:.875rem;font-weight:600}
.card>:last-child{margin-bottom:0}

/* Stat tiles */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:var(--space-3)}
.stat{display:block;min-width:0;padding:14px 16px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text);text-decoration:none}
a.stat:hover{border-color:var(--control-border);color:var(--text);text-decoration:none}
.stat-label{display:block;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted)}
.stat-value{display:block;margin-top:6px;font-family:var(--font-display);font-size:1.625rem;font-weight:700;
  line-height:1.2;overflow-wrap:anywhere}
.stat.has-tone .stat-value{color:var(--_tone-text)}
.stat-hint{display:block;margin-top:4px;font-size:.8125rem;color:var(--text-muted)}

/* Tables scroll inside their own box on a narrow screen; the page itself never does. The box is
   positioned so a visually-hidden (absolute) header label is clipped by it, not by the page. */
.table-wrap{position:relative;overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.table{width:100%;border-collapse:collapse;font-size:.875rem}
.table caption{padding:12px 14px 4px;text-align:left;font-weight:650;color:var(--text)}
.table th{padding:10px 14px;text-align:left;vertical-align:bottom;white-space:nowrap;
  font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);
  background:var(--surface-2);border-bottom:1px solid var(--border-strong)}
.table td{padding:11px 14px;vertical-align:top;border-bottom:1px solid var(--border)}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:var(--surface-2)}
.table tr[data-href]{cursor:pointer}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.table .nowrap{white-space:nowrap}
.table .shrink{width:1px;white-space:nowrap}
.table td.empty-cell{padding:0}
.table tbody tr:hover td.empty-cell{background:none}

/* Empty state */
.empty{padding:36px 20px;text-align:center;color:var(--text-muted)}
.empty-title{margin:0 0 6px;font-size:1rem;font-weight:650;color:var(--text)}
.empty-body{max-width:58ch;margin:0 auto}
.empty .btn{margin-top:var(--space-4)}

/* Badges and pills (status, severity) */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;white-space:nowrap;
  font-size:.75rem;font-weight:650;line-height:1.5;border-radius:var(--radius-pill);
  color:var(--_tone-text);background:var(--_tone-tint);border:1px solid var(--_tone-line)}
.badge-dot{width:7px;height:7px;border-radius:50%;background:currentColor}

/* Alerts and notices */
.alert{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;color:var(--text);
  background:var(--_tone-tint);border:1px solid var(--_tone-line);border-left-width:4px;
  border-radius:var(--radius)}
.alert-icon{flex:none;margin-top:2px;color:var(--_tone-text)}
.alert-content{flex:1;min-width:0}
.alert-title{margin:0 0 2px;font-weight:700;color:var(--_tone-text)}
.alert-body{margin:0}
.alert-body>:last-child{margin-bottom:0}
.alert-dismiss{flex:none;margin:-4px -8px 0 0;padding:4px 8px;border:0;border-radius:var(--radius-sm);
  background:none;color:var(--text-muted);font:inherit;font-size:1.25rem;line-height:1;cursor:pointer}
.alert-dismiss:hover{color:var(--text)}

/* Forms */
.form>:last-child{margin-bottom:0}
.field{margin-bottom:var(--space-4);min-width:0}
.field-label,.fieldset-legend{display:block;margin-bottom:6px;font-size:.875rem;font-weight:650;color:var(--text)}
.field-required{margin-left:3px;color:var(--danger-text)}
.field-help{display:block;margin:-2px 0 6px;font-size:.8125rem;color:var(--text-muted)}
.field-error{display:flex;align-items:flex-start;gap:6px;margin:0 0 6px;font-size:.8125rem;font-weight:650;
  color:var(--danger-text)}
.input,.select,.textarea{display:block;width:100%;max-width:100%;min-height:42px;padding:9px 12px;
  background:var(--control-bg);color:var(--text);border:1px solid var(--control-border);
  border-radius:var(--radius-sm);font:inherit;font-size:.9375rem}
.input::placeholder,.textarea::placeholder{color:var(--text-placeholder);opacity:1}
.textarea{min-height:112px;resize:vertical}
.input-narrow{max-width:22ch}
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{border:2px solid var(--danger-text)}
.fieldset{min-width:0;margin:0 0 var(--space-4);padding:0;border:0}
.fieldset-legend{padding:0}
.check{display:flex;align-items:flex-start;gap:10px;margin:6px 0}
.check input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--brand)}
.check label{font-size:.9375rem;color:var(--text)}
.check .field-help{margin:2px 0 0}
.file-input{display:block;width:100%;max-width:100%;padding:8px;background:var(--control-bg);color:var(--text);
  border:1px dashed var(--control-border);border-radius:var(--radius-sm);font:inherit;font-size:.875rem}
.file-input::file-selector-button{margin-right:12px;padding:6px 12px;border:1px solid var(--control-border);
  border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);font:inherit;font-weight:600;cursor:pointer}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-5)}

.error-summary{margin-bottom:var(--space-5);padding:16px 18px;background:var(--danger-tint);
  border:2px solid var(--danger-text);border-radius:var(--radius)}
.error-summary-title{margin:0 0 8px;font-size:1rem;color:var(--danger-text)}
.error-summary ul{margin:0;padding-left:20px}
.error-summary a{color:var(--danger-text);font-weight:650}

/* Secondary tabs (link-based: each is a real URL, so they work without JS) */
.subtabs{margin-bottom:var(--space-4)}
.subtabs ul{display:flex;flex-wrap:wrap;gap:4px;width:fit-content;max-width:100%;margin:0;padding:4px;
  list-style:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.subtab{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--radius-sm);
  color:var(--text-muted);font-size:.875rem;font-weight:550;text-decoration:none}
.subtab:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.subtab[aria-current="page"]{background:var(--nav-active-bg);color:var(--nav-active-text);font-weight:650}
.subtab-count{font-size:.75rem;color:inherit;opacity:.85}

/* Collapsible sections */
.collapsible{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.collapsible+.collapsible{margin-top:var(--space-3)}
.collapsible>summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:14px 18px;
  list-style:none;cursor:pointer;font-weight:650;border-radius:var(--radius)}
.collapsible>summary::-webkit-details-marker{display:none}
.collapsible>summary::before{content:"";flex:none;width:8px;height:8px;margin-right:2px;
  border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);
  transform:rotate(-45deg);transition:transform .15s ease}
.collapsible[open]>summary::before{transform:rotate(45deg)}
.collapsible[open]>summary{border-bottom:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0}
.collapsible-meta{margin-left:auto;font-size:.8125rem;font-weight:400;color:var(--text-muted)}
.collapsible-body{padding:16px 18px}
.collapsible-body>:last-child{margin-bottom:0}

/* Pagination */
.pagination ul{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:var(--space-5) 0 0;
  padding:0;list-style:none}
.page-link{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;
  padding:0 10px;border:1px solid var(--control-border);border-radius:var(--radius-sm);
  color:var(--text);font-size:.875rem;text-decoration:none}
a.page-link:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.page-link[aria-current="page"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:700}
.page-link.is-disabled{color:var(--text-subtle);border-color:var(--border-strong);cursor:default}
.page-gap{align-self:center;padding:0 2px;color:var(--text-muted)}

/* Breadcrumbs */
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0 0 var(--space-3);padding:0;list-style:none;
  font-size:.8125rem;color:var(--text-muted)}
.breadcrumbs li+li::before{content:"/";margin-right:8px;color:var(--text-subtle)}
.breadcrumbs a{color:var(--text-muted)}
.breadcrumbs [aria-current="page"]{color:var(--text)}

/* Dialog (native <dialog>; opened by data-open-dialog, and the shared confirm prompt) */
.dialog{width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;
  color:var(--text);background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);box-shadow:0 24px 64px var(--shadow-lg)}
.dialog::backdrop{background:var(--scrim)}
.dialog-inner{padding:22px 24px}
.dialog-title{margin:0 0 8px;font-size:1.125rem}
.dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2);margin-top:20px}
.dialog-inner form{margin:0}

/* Definition list: key/value facts ("who to ring", record fields) */
.kv{display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr);gap:8px 22px;margin:0}
.kv dt{font-size:.8125rem;font-weight:650;color:var(--text-muted)}
.kv dd{margin:0;overflow-wrap:anywhere}

/* Progress: a real <progress> with a text label beside it */
.meter{display:flex;align-items:center;gap:10px;min-width:0}
.meter progress{flex:1;min-width:60px;height:8px;border:0;border-radius:var(--radius-pill);overflow:hidden;
  -webkit-appearance:none;appearance:none;background:var(--inset);color:var(--_tone-text)}
.meter progress::-webkit-progress-bar{background:var(--inset);border-radius:var(--radius-pill)}
.meter progress::-webkit-progress-value{background:var(--_tone-text);border-radius:var(--radius-pill)}
.meter progress::-moz-progress-bar{background:var(--_tone-text);border-radius:var(--radius-pill)}
.meter-label{font-size:.8125rem;color:var(--text-muted);white-space:nowrap}

/* Service tiles */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:var(--space-4)}
.tile{display:flex;flex-direction:column;gap:10px;min-width:0;padding:18px 20px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius)}
.tile.is-locked{background:var(--surface-2)}
.tile-head{display:flex;align-items:center;gap:12px;min-width:0}
.tile-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:var(--brand-tint);color:var(--brand-text)}
.tile.is-locked .tile-icon{background:var(--inset);color:var(--text-muted)}
.tile-title{margin:0;font-size:1rem}
.tile-eyebrow{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-subtle)}
.tile-body{margin:0;font-size:.875rem;color:var(--text-muted)}
.tile-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto;padding-top:6px}
.tile-foot .push{margin-left:auto}

/* QR code (c.qr): black modules on a white card in BOTH themes, so phone cameras read it. The
   12px padding is the quiet zone. 5px modules: a 29-module code is 145px, a 33-module one 165px. */
.qr{display:inline-block;padding:12px;background:var(--qr-paper);line-height:0;border-radius:var(--radius-sm)}
.qr-r{display:flex}
.qr-c{display:block;flex:none;width:5px;height:5px}
.qr-d{background:var(--qr-ink)}

/* ==== Utilities =============================================================================== */
.stack>*+*{margin-top:var(--space-4)}
.stack-sm>*+*{margin-top:var(--space-2)}
.stack-lg>*+*{margin-top:var(--space-6)}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.split{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2) var(--space-4)}
.grid-2,.grid-3{display:grid;gap:var(--space-4)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.muted{color:var(--text-muted)}
.subtle{color:var(--text-subtle)}
.small{font-size:.8125rem}
.break{overflow-wrap:anywhere}
.nowrap{white-space:nowrap}
.measure{max-width:70ch}
.mt-0{margin-top:0}
.mt-4{margin-top:var(--space-4)}
.mt-6{margin-top:var(--space-6)}
.mb-0{margin-bottom:0}
.mb-4{margin-bottom:var(--space-4)}

/* ==== Style guide only ======================================================================== */
.sg-section{padding:var(--space-5);border:1px solid var(--border);border-radius:var(--radius-lg)}
.sg-section+.sg-section{margin-top:var(--space-6)}
.sg-heading{margin:0 0 var(--space-1);font-size:1.125rem}
.sg-block+.sg-block{margin-top:var(--space-6)}
.sg-block>h3,.sg-block>h4{margin-bottom:var(--space-3);color:var(--text-muted);font-size:.8125rem;
  font-family:var(--font-sans);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:var(--space-2);
  margin:0;padding:0;list-style:none}
.sg-swatch{display:flex;align-items:center;gap:10px;font-size:.8125rem}
.sg-chip{flex:none;width:28px;height:28px;border-radius:var(--radius-sm);border:1px solid var(--border-strong)}
.sg-chip-bg{background:var(--bg)}
.sg-chip-surface{background:var(--surface)}
.sg-chip-surface-2{background:var(--surface-2)}
.sg-chip-text{background:var(--text)}
.sg-chip-text-muted{background:var(--text-muted)}
.sg-chip-brand{background:var(--brand)}
.sg-chip-focus{background:var(--focus)}
.sg-chip-success{background:var(--success-text)}
.sg-chip-warning{background:var(--warning-text)}
.sg-chip-danger{background:var(--danger-text)}
.sg-chip-info{background:var(--info-text)}
.sg-chip-critical{background:var(--critical-text)}
.sg-chip-high{background:var(--high-text)}

/* ==== Responsive ============================================================================== */
@media (max-width:860px){
  .staff-frame{grid-template-columns:minmax(0,1fr)}
  .staff-nav{border-right:0;border-bottom:1px solid var(--border);padding:var(--space-3)}
  .staff-nav>ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:2px 8px}
  .staff-nav li+li{margin-top:0}
  .staff-nav .nav-group{grid-column:1/-1}
  .nav-sub{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:2px 8px}
  .staff-main{padding:var(--space-5) var(--space-4) var(--space-7)}
  .staff-bar,.staff-foot{padding-inline:var(--space-4)}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .container{padding-inline:var(--space-4)}
  .org-name{font-size:1.4375rem}
  .tab{padding:10px 10px 9px}
  .page{padding-block:var(--space-5) var(--space-6)}
  .card{padding:var(--space-4)}
  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
  .kv{grid-template-columns:minmax(0,1fr);gap:2px}
  .kv dd{margin-bottom:10px}
  .sg-section{padding:var(--space-4)}
}

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

/* Windows high-contrast: keep controls and the current tab visible when colours are forced. */
@media (forced-colors:active){
  .btn,.badge,.menu>summary,.theme-toggle,.page-link{border:1px solid ButtonText}
  .tab[aria-current="page"],.subtab[aria-current="page"],.nav-link[aria-current="page"]{
    outline:2px solid Highlight;outline-offset:-2px}
}

@media print{
  .skip-link,.header-tools,.tabs,.staff-nav,.theme-toggle,.btn,.alert-dismiss{display:none !important}
  .page,.staff-main{padding:0}
}