/* ============================================================================
   SPUQC TAS — design-system.css
   Derived 1:1 from tas/design-system.md (v1). Tokens defined ONCE in :root.
   RULE (enforced by ds-lint): no hardcoded hex/rgb outside :root.
   ========================================================================== */

/* ---- Fonts (vendored, offline) — DS §5.1 ---------------------------------- */
@font-face {
  font-family: 'Inter Variable';
  src: url('./fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/jetbrains-mono-variable.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ============================================================================
   DS §6 — The complete token export (:root). Copied verbatim; prototype-added
   tokens are marked [proto] and documented in _meta/traceability.md.
   ========================================================================== */
:root {
  /* ---- Secondary & Accent (brand identity; NOT default UI; NO hover/interactive variants) ---- */
  --color-secondary:    #025F1D;   /* Paulinian Green — identity/emphasis: logo, login, print, brand banners */
  --color-on-secondary: var(--neutral-0);  /* white text on a green fill (7.9:1) */
  --color-accent:       #F2CD00;   /* Paulinian Gold — decorative/print highlight ONLY; never text/link/status/CTA */

  /* ---- Neutral ramp ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F8F9FA;
  --neutral-100: #F1F3F4;
  --neutral-200: #E5E8EA;
  --neutral-300: #D2D6DA;
  --neutral-400: #9AA0A6;
  --neutral-500: #656B72;   /* muted text — 4.8:1 on the deepened canvas, 5.4:1 on white */
  --neutral-600: #585858;
  --neutral-700: #3F4448;
  --neutral-900: #1F1F1F;

  /* ---- Semantic: primary — Emerald 700 (interactive; decoupled from the brand green) ---- */
  --color-primary:          #047857;   /* white text 5.5:1 · links on white 5.5:1 */
  --color-primary-hover:    #036249;
  --color-primary-active:   #024C39;
  --color-primary-subtle:   #E7F4EF;   /* selected / active-nav bg */
  --color-primary-border:   #B4DFCE;
  --color-on-primary:       var(--neutral-0);

  /* ---- Semantic: success ---- */
  --color-success:          #0F6E33;
  --color-success-solid:    #15803D;
  --color-success-surface:  #E7F5EB;
  --color-success-border:   #B9E0C4;
  --color-on-success:       var(--neutral-0);

  /* ---- Semantic: warning (amber) — solid uses DARK text ---- */
  --color-warning:          #B45309;
  --color-warning-solid:    #F79009;
  --color-warning-surface:  #FEF6E7;
  --color-warning-border:   #F5D8A6;
  --color-on-warning-solid: var(--neutral-900);

  /* ---- Semantic: danger (red) ---- */
  --color-danger:           #B42318;
  --color-danger-solid:     #D92D20;
  --color-danger-surface:   #FEF0EF;
  --color-danger-border:    #F5C4C0;
  --color-on-danger:        var(--neutral-0);

  /* ---- Semantic: info (blue) ---- */
  --color-info:             #175CD3;
  --color-info-solid:       #1570EF;
  --color-info-surface:     #EFF5FF;
  --color-info-border:      #BBD3F7;
  --color-on-info:          var(--neutral-0);

  /* ---- Surfaces & text ---- */
  --color-bg:            var(--neutral-100);
  --color-surface:       var(--neutral-0);
  --color-surface-sunken:var(--neutral-200);
  --color-surface-hover: rgba(16,24,40,.04);
  --color-border:        var(--neutral-200);
  --color-border-strong: var(--neutral-300);

  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted:     var(--neutral-500);
  --text-disabled:  var(--neutral-400);
  --text-link:      var(--color-primary);

  /* ---- Focus (works on any background) ---- */
  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary);

  /* ---- Typography ---- */
  --font-sans: 'Inter Variable','Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono: 'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  --text-2xs:.6875rem; --text-xs:.75rem;  --text-sm:.8125rem; --text-base:.875rem;
  --text-md:1rem;      --text-lg:1.125rem; --text-xl:1.25rem;  --text-2xl:1.5rem;
  --text-3xl:1.75rem;  --text-4xl:2.25rem;
  --leading-none:1; --leading-tight:1.2; --leading-snug:1.35; --leading-normal:1.5; --leading-relaxed:1.6;

  /* ---- Spacing (4px base) ---- */
  --space-0:0; --space-0-5:.125rem; --space-1:.25rem; --space-2:.5rem; --space-3:.75rem;
  --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem;

  /* ---- Radius (v1.1: small=md, controls=lg, containers=xl) ---- */
  --radius-none:0; --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:12px; --radius-2xl:16px; --radius-full:9999px;

  /* ---- Elevation (soft & light) ---- */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 4px 10px -2px rgba(16,24,40,.05);
  --shadow-md:0 4px 12px -2px rgba(16,24,40,.07),0 2px 6px -2px rgba(16,24,40,.05);
  --shadow-lg:0 10px 24px -6px rgba(16,24,40,.10),0 4px 8px -4px rgba(16,24,40,.05);
  --shadow-xl:0 20px 40px -12px rgba(16,24,40,.14),0 8px 16px -8px rgba(16,24,40,.06);

  /* ---- Borders / opacity ---- */
  --border-width-1:1px; --border-width-2:2px; --border-width-4:4px;
  --opacity-hover:.04; --opacity-pressed:.08; --opacity-disabled:.4; --opacity-backdrop:.5;

  /* ---- Z-index ---- */
  --z-base:0; --z-raised:10; --z-sticky:20; --z-nav:100; --z-dropdown:1000;
  --z-tooltip:1100; --z-drawer:1200; --z-modal-backdrop:1300; --z-modal:1310; --z-toast:1400; --z-max:9999;

  /* ---- Motion ---- */
  --duration-fast:100ms; --duration-base:150ms; --duration-moderate:200ms; --duration-slow:300ms;
  --ease-standard:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(0,0,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --transition-colors: color var(--duration-base) var(--ease-standard),
                       background-color var(--duration-base) var(--ease-standard),
                       border-color var(--duration-base) var(--ease-standard);
  --transition-base:   color var(--duration-base) var(--ease-standard),
                       background-color var(--duration-base) var(--ease-standard),
                       border-color var(--duration-base) var(--ease-standard),
                       box-shadow var(--duration-base) var(--ease-standard),
                       transform var(--duration-base) var(--ease-standard);

  /* ---- Density (default; override via [data-density]) ---- */
  --row-h:40px; --control-h:36px; --cell-pad-x:12px; --cell-pad-y:8px;

  /* ---- [proto] tokens added per DS §12.1 change process ---- */
  --color-backdrop: rgba(0,0,0,.5);     /* modal scrim = black at --opacity-backdrop (DS §10.10) */
  --measure: 640px;                     /* form column cap (DS §7.3) */
  --icon-sm:16px; --icon-md:20px; --icon-lg:24px; --icon-xl:36px;  /* DS §7.5 */
  --topbar-h:56px; --nav-w:240px; --nav-w-collapsed:64px;          /* DS §9.1 */
}

[data-density="compact"]     { --row-h:32px; --control-h:32px; --cell-pad-x:8px;  --cell-pad-y:6px; }
[data-density="comfortable"] { --row-h:48px; --control-h:44px; --cell-pad-x:16px; --cell-pad-y:12px; }

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast:0ms; --duration-base:0ms; --duration-moderate:0ms; --duration-slow:0ms; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ============================================================================
   Base reset & element defaults — DS §7.7 base.css
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%;
  background: var(--color-bg);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { color: var(--text-primary); margin: 0; }
h1 { font-size: var(--text-2xl); line-height: var(--leading-tight); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
h2 { font-size: var(--text-xl); line-height: var(--leading-snug); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
h3 { font-size: var(--text-lg); line-height: var(--leading-snug); font-weight: var(--fw-semibold); }
h4 { font-size: var(--text-md); line-height: var(--leading-snug); font-weight: var(--fw-semibold); }
p { margin: 0; }
a { color: var(--text-link); text-decoration: none; transition: var(--transition-colors); }
a:hover { color: var(--color-primary-hover); text-decoration: underline; }
/* Inline links inside running text keep an underline — color alone cannot
   distinguish them from surrounding text (WCAG 1.4.1, DS §8.2 never-color-alone) */
p a, dd a, .banner a { text-decoration: underline; }
code, .mono { font-family: var(--font-mono); font-size: 0.925em; font-variant-numeric: tabular-nums; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; }
svg { flex-shrink: 0; }

/* Focus visibility — DS §8.3: every interactive element */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* Numeric alignment — DS §5.1 */
.tabular, .num { font-variant-numeric: tabular-nums; }

/* ---- A11y helpers ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: calc(-1 * var(--space-16));
  z-index: var(--z-max);
  background: var(--color-surface); color: var(--text-link);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); transition: top var(--duration-base) var(--ease-standard);
}
.skip-link:focus { top: var(--space-4); }

/* Eyebrow / section label — DS §5.2 */
.eyebrow {
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-primary);
}

/* ============================================================================
   Buttons — DS §10.1
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-h); padding-inline: var(--space-4);
  font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--fw-semibold); line-height: 1;
  border-radius: var(--radius-lg); border: var(--border-width-1) solid transparent;
  cursor: pointer; transition: var(--transition-base);
  text-decoration: none; white-space: nowrap; background: none;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { background: var(--neutral-100); color: var(--text-disabled); cursor: not-allowed; box-shadow: none; border-color: transparent; }
a.btn:hover { text-decoration: none; }

.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover:not(:disabled)  { background: var(--color-primary-hover); box-shadow: var(--shadow-sm); color: var(--color-on-primary); }
.btn--primary:active:not(:disabled) { background: var(--color-primary-active); }

.btn--secondary { background: var(--color-surface-sunken); color: var(--text-primary); }
.btn--secondary:hover:not(:disabled) { background: var(--neutral-300); color: var(--text-primary); }

.btn--ghost { background: transparent; color: var(--text-primary); }
.btn--ghost:hover:not(:disabled) { background: var(--color-surface-hover); color: var(--text-primary); }

.btn--danger { background: var(--color-danger-solid); color: var(--color-on-danger); }
.btn--danger:hover:not(:disabled) { background: var(--color-danger); box-shadow: var(--shadow-sm); color: var(--color-on-danger); }

.btn--link { background: transparent; color: var(--text-link); padding-inline: var(--space-1); height: auto; }
.btn--link:hover:not(:disabled) { color: var(--color-primary-hover); text-decoration: underline; }

.btn--sm { height: 32px; font-size: var(--text-sm); padding-inline: var(--space-3); }
.btn--lg { height: 44px; font-size: var(--text-md); padding-inline: var(--space-5); }
.btn--icon { width: var(--control-h); padding-inline: 0; }

.btn .spinner { width: var(--icon-sm); height: var(--icon-sm); }

/* ============================================================================
   Inputs — DS §10.2–10.7, §9.5
   ========================================================================== */
.input, .select, .textarea {
  height: var(--control-h);
  width: 100%;
  padding: var(--cell-pad-y) var(--space-3);
  font-size: var(--text-md);
  color: var(--text-primary);
  background: var(--color-surface);
  border: var(--border-width-1) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
}
.input::placeholder, .textarea::placeholder { color: var(--text-disabled); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring);
}
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--color-surface-sunken); color: var(--text-disabled); cursor: not-allowed;
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-danger); }
.textarea { height: auto; min-height: calc(var(--leading-normal) * var(--text-md) * 3 + var(--space-4)); resize: vertical; }
.select { appearance: none; padding-right: var(--space-8); background-image: none; }

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > .input { padding-left: var(--space-8); }
.input-wrap__icon {
  position: absolute; left: var(--space-3); color: var(--text-muted); pointer-events: none;
  display: inline-flex; width: var(--icon-sm); height: var(--icon-sm);
}
.select-wrap { position: relative; display: flex; align-items: center; }
.select-wrap__chevron { position: absolute; right: var(--space-3); color: var(--text-muted); pointer-events: none; display: inline-flex; }

/* FormField — label above, inline validation (DS §9.5) */
.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.field__label { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-primary); }
.field__required { color: var(--text-muted); font-weight: var(--fw-regular); }
.field__hint { font-size: var(--text-xs); color: var(--text-muted); }
.field__error { font-size: var(--text-xs); color: var(--color-danger); display: inline-flex; align-items: center; gap: var(--space-1); }

/* Checkbox — DS §10.5 */
.checkbox { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; padding: var(--space-1) 0; }
.checkbox input[type="checkbox"] {
  appearance: none; width: 16px; height: 16px; margin: 0;
  border: var(--border-width-1) solid var(--color-border-strong);
  border-radius: var(--radius-md); background: var(--color-surface);
  cursor: pointer; transition: var(--transition-base);
  display: inline-grid; place-content: center; flex-shrink: 0;
}
.checkbox input[type="checkbox"]:checked, .checkbox input[type="checkbox"]:indeterminate {
  background: var(--color-primary); border-color: var(--color-primary);
}
.checkbox input[type="checkbox"]:checked::before {
  content: ""; width: 9px; height: 9px;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background: var(--color-on-primary);
}
.checkbox input[type="checkbox"]:indeterminate::before {
  content: ""; width: 8px; height: 2px; background: var(--color-on-primary);
}
.checkbox input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.checkbox__label { font-size: var(--text-base); color: var(--text-primary); }

/* Radio — DS §10.6 */
.radio { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; padding: var(--space-1) 0; }
.radio input[type="radio"] {
  appearance: none; width: 16px; height: 16px; margin: 0;
  border: var(--border-width-1) solid var(--color-border-strong);
  border-radius: var(--radius-full); background: var(--color-surface);
  cursor: pointer; transition: var(--transition-base);
  display: inline-grid; place-content: center; flex-shrink: 0;
}
.radio input[type="radio"]:checked { border-color: var(--color-primary); border-width: var(--border-width-2); }
.radio input[type="radio"]:checked::before {
  content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-primary);
}
.radio input[type="radio"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-primary); margin-bottom: var(--space-2); }

/* Toggle / switch — DS §10.7 */
.switch { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.switch input[type="checkbox"] {
  appearance: none; width: 36px; height: 20px; margin: 0;
  border-radius: var(--radius-full); background: var(--neutral-300);
  position: relative; cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard);
  flex-shrink: 0;
}
.switch input[type="checkbox"]::before {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: var(--radius-full);
  background: var(--neutral-0); box-shadow: var(--shadow-xs);
  transition: transform var(--duration-base) var(--ease-standard);
}
.switch input[type="checkbox"]:checked { background: var(--color-primary); }
.switch input[type="checkbox"]:checked::before { transform: translateX(16px); }
.switch input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.switch__label { font-size: var(--text-base); color: var(--text-primary); }

/* ============================================================================
   Badges (status pills) — DS §10.18, §11.2. Tinted; NEVER solid deep fill.
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: var(--leading-normal);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.badge--tag { border-radius: var(--radius-md); }
.badge__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex-shrink: 0; }
.badge__icon { display: inline-flex; width: 12px; height: 12px; }

.badge--success { background: var(--color-success-surface); color: var(--color-success); }
.badge--danger  { background: var(--color-danger-surface);  color: var(--color-danger); }
.badge--warning { background: var(--color-warning-surface); color: var(--color-warning); }
.badge--info    { background: var(--color-info-surface);    color: var(--color-info); }
.badge--neutral { background: var(--neutral-100);           color: var(--text-secondary); }
.badge--primary { background: var(--color-primary-subtle);  color: var(--color-primary); }

/* REVOKE_PENDING subtle pulse — DS §11.2 */
@keyframes badge-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.badge--pulse .badge__icon, .badge--pulse .badge__dot { animation: badge-pulse 1.6s var(--ease-standard) infinite; }

/* Chips (filter) — DS §10.19 */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  background: var(--color-surface-sunken); color: var(--text-primary);
  font-size: var(--text-sm); border-radius: var(--radius-md);
  padding: var(--space-0-5) var(--space-2);
}
.chip__remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border: 0; background: transparent; color: var(--text-muted);
  border-radius: var(--radius-sm); cursor: pointer; padding: 0; transition: var(--transition-base);
}
.chip__remove:hover { background: var(--color-surface-hover); color: var(--text-primary); }

/* ============================================================================
   Cards & KPI tiles — DS §10.9, §11.4
   ========================================================================== */
.card {
  background: var(--color-surface); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); padding: var(--space-5);
}
.card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.card__title { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--text-primary); }
.card--interactive { cursor: pointer; transition: box-shadow var(--duration-moderate) var(--ease-standard), transform var(--duration-moderate) var(--ease-standard); }
.card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card--flush { padding: 0; }

.kpi {
  background: var(--color-surface); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-1);
  border: 0; text-align: left; font-family: inherit; width: 100%;
}
.kpi__eyebrow { font-size: var(--text-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.kpi__value { font-size: var(--text-3xl); font-weight: var(--fw-bold); color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: var(--leading-tight); }
.kpi__sub { font-size: var(--text-sm); color: var(--text-muted); display: flex; align-items: center; gap: var(--space-2); }
button.kpi, a.kpi { cursor: pointer; transition: box-shadow var(--duration-moderate) var(--ease-standard), transform var(--duration-moderate) var(--ease-standard); text-decoration: none; }
button.kpi:hover, a.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }

/* Breakdown bar — DS §11.4 / §10.29 (one semantic color per series meaning) */
.breakdown { display: flex; flex-direction: column; gap: var(--space-2); }
.breakdown__bar { display: flex; height: 8px; border-radius: var(--radius-full); overflow: hidden; background: var(--color-surface-sunken); }
.breakdown__seg { height: 100%; }
.breakdown__seg--a { background: var(--color-primary); }
.breakdown__seg--b { background: var(--color-primary-border); }
.breakdown__seg--c { background: var(--color-info-border); }
.breakdown__legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-xs); color: var(--text-muted); }
.breakdown__key { display: inline-flex; align-items: center; gap: var(--space-1); }
.breakdown__swatch { width: 8px; height: 8px; border-radius: var(--radius-sm); }

/* ============================================================================
   Data table — DS §10.8, §11.1
   ========================================================================== */
.table-wrap {
  background: var(--color-surface); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table caption { text-align: left; }
.table thead th {
  position: sticky; top: 0; z-index: var(--z-raised);
  background: var(--color-surface-sunken);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-align: left; padding: var(--cell-pad-y) var(--cell-pad-x);
  white-space: nowrap;
}
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody td {
  padding: var(--cell-pad-y) var(--cell-pad-x);
  border-top: var(--border-width-1) solid var(--color-border);
  color: var(--text-secondary); height: var(--row-h);
  vertical-align: middle;
}
.table tbody tr:first-child td { border-top: 0; }
.table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); }
.table tbody tr:hover { background: var(--color-surface-hover); }
.table tbody tr[aria-selected="true"] { background: var(--color-primary-subtle); }
.table tbody tr.row--clickable { cursor: pointer; }
.table .cell-primary { color: var(--text-primary); font-weight: var(--fw-medium); }
.table .cell-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); }
.th-sort {
  display: inline-flex; align-items: center; gap: var(--space-1);
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
  border-radius: var(--radius-sm); transition: var(--transition-colors);
}
.th-sort:hover { color: var(--text-primary); }
.th-sort .sort-icon { display: inline-flex; color: var(--text-muted); }
.table th[aria-sort="ascending"] .sort-icon, .table th[aria-sort="descending"] .sort-icon { color: var(--color-primary); }

/* Toolbar / FilterBar — DS §11.1 */
.toolbar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--color-surface);
}
.table-wrap .toolbar { border-bottom: var(--border-width-1) solid var(--color-border); }
.toolbar__spacer { flex: 1; }
.toolbar .input-wrap { width: 260px; }
.toolbar .select { width: auto; }
.chips-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-4); }

/* Pagination — DS §10.17 */
.pagination {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); color: var(--text-muted);
  border-top: var(--border-width-1) solid var(--color-border);
}

/* ============================================================================
   Tabs — DS §10.16
   ========================================================================== */
.tabs { display: flex; gap: var(--space-1); border-bottom: var(--border-width-1) solid var(--color-border); }
.tabs__tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--text-muted);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width-2) solid transparent;
  margin-bottom: calc(-1 * var(--border-width-1));
  transition: var(--transition-colors);
}
.tabs__tab:hover { color: var(--text-primary); }
.tabs__tab[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--color-primary); }

/* Breadcrumbs — DS §10.15 */
.breadcrumbs { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); list-style: none; }
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--text-link); }
.breadcrumbs__sep { color: var(--text-disabled); }
.breadcrumbs__current { color: var(--text-primary); }

/* ============================================================================
   Top bar — DS §10.14, §9.1
   ========================================================================== */
.topbar {
  grid-area: topbar;
  display: flex; align-items: center; gap: var(--space-4);
  height: var(--topbar-h); padding-inline: var(--space-4);
  background: var(--color-surface);
  position: sticky; top: 0; z-index: var(--z-nav);
  box-shadow: var(--shadow-xs);
}
.topbar__brand { display: flex; align-items: center; gap: var(--space-3); min-width: calc(var(--nav-w) - var(--space-4)); }
.topbar__logo {
  width: 32px; height: 32px; border-radius: var(--radius-full);
  background: var(--color-secondary); color: var(--color-on-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold); font-size: var(--text-xs); letter-spacing: 0.02em;
}
.topbar__product { font-weight: var(--fw-bold); color: var(--text-primary); font-size: var(--text-md); }
.topbar__title { font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--text-muted); }
.topbar__env {
  font-size: var(--text-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em;
  /* --text-secondary, not muted: DS §8.1 — muted is 4.4:1 on the sunken fill (below AA) */
  color: var(--text-secondary); background: var(--color-surface-sunken);
  padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-md);
}
.topbar__spacer { flex: 1; }
.topbar__search { width: 280px; }
.topbar__iconbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 0; background: transparent; color: var(--text-secondary);
  border-radius: var(--radius-lg); cursor: pointer; transition: var(--transition-base);
}
.topbar__iconbtn:hover { background: var(--color-surface-hover); color: var(--text-primary); }
.topbar__bell-count {
  position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding-inline: 3px;
  background: var(--color-danger-solid); color: var(--color-on-danger);
  font-size: var(--text-2xs); font-weight: var(--fw-semibold); line-height: 15px;
  border-radius: var(--radius-full); text-align: center;
}

/* ============================================================================
   Left nav — DS §10.13, §9.1
   ========================================================================== */
.leftnav {
  grid-area: nav; width: var(--nav-w);
  background: var(--color-surface);
  position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h));
  overflow-y: auto; padding: var(--space-4) var(--space-3);
  z-index: var(--z-nav);
}
.leftnav__group { margin-bottom: var(--space-5); }
.leftnav__group-label {
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted);
  padding: 0 var(--space-3); margin-bottom: var(--space-1); display: block;
}
.leftnav__item {
  display: flex; align-items: center; gap: var(--space-3);
  height: 40px; padding: 0 var(--space-3);
  font-size: var(--text-base); color: var(--text-secondary);
  border-radius: var(--radius-md);
  border-left: var(--border-width-4) solid transparent;
  transition: var(--transition-colors);
  text-decoration: none;
}
.leftnav__item:hover { background: var(--color-surface-hover); color: var(--text-primary); text-decoration: none; }
.leftnav__item[aria-current="page"] {
  background: var(--color-primary-subtle); color: var(--color-primary);
  border-left-color: var(--color-primary); font-weight: var(--fw-medium);
}
.leftnav__icon { display: inline-flex; width: var(--icon-md); height: var(--icon-md); }

/* ============================================================================
   Page header — DS §9.2
   ========================================================================== */
.page-header { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }
.page-header__row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.page-header__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.page-header__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.page-header__sub { font-size: var(--text-sm); color: var(--text-muted); max-width: var(--measure); }

/* ============================================================================
   Modal & confirm — DS §10.10, §10.11
   ========================================================================== */
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.modal-backdrop {
  position: fixed; inset: 0; background: var(--color-backdrop);
  z-index: var(--z-modal-backdrop);
  display: flex; align-items: center; justify-content: center; padding: var(--space-6);
  animation: backdrop-in var(--duration-slow) var(--ease-out);
}
.modal {
  background: var(--color-surface); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); z-index: var(--z-modal);
  width: 100%; max-width: 640px; max-height: calc(100vh - var(--space-12));
  display: flex; flex-direction: column;
  animation: modal-in var(--duration-slow) var(--ease-out);
}
.modal--confirm { max-width: 480px; }
.modal--wide { max-width: 800px; }
.modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-5) var(--space-3); }
.modal__title { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--text-primary); }
.modal__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 0; background: transparent; color: var(--text-muted);
  border-radius: var(--radius-lg); cursor: pointer; transition: var(--transition-base);
}
.modal__close:hover { background: var(--color-surface-hover); color: var(--text-primary); }
.modal__body { padding: var(--space-2) var(--space-5); overflow-y: auto; }
.modal__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-5); }
.modal__footer .btn--ghost { margin-right: auto; }
.confirm__lead { display: flex; gap: var(--space-3); align-items: flex-start; }
.confirm__icon { display: inline-flex; width: var(--icon-lg); height: var(--icon-lg); color: var(--color-danger); flex-shrink: 0; }
.confirm__icon--warning { color: var(--color-warning); }

/* Drawer — DS §10.12 */
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer-backdrop {
  position: fixed; inset: 0; background: var(--color-backdrop);
  z-index: var(--z-drawer); animation: backdrop-in var(--duration-slow) var(--ease-out);
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 92vw;
  background: var(--color-surface);
  border-top-left-radius: var(--radius-xl); border-bottom-left-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); z-index: var(--z-drawer);
  display: flex; flex-direction: column;
  animation: drawer-in var(--duration-slow) var(--ease-out);
}
.drawer__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-5) var(--space-3); }
.drawer__title { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--text-primary); }
.drawer__body { padding: var(--space-2) var(--space-5) var(--space-5); overflow-y: auto; flex: 1; }
.drawer__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-5); border-top: var(--border-width-1) solid var(--color-border); }

/* Toasts — DS §10.21 */
@keyframes toast-in { from { opacity: 0; transform: translateY(var(--space-4)); } to { opacity: 1; transform: translateY(0); } }
.toast-host {
  position: fixed; bottom: var(--space-6); right: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  z-index: var(--z-toast); max-width: 380px;
}
.toast {
  display: flex; align-items: flex-start; gap: var(--space-3);
  background: var(--color-surface); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); padding: var(--space-4);
  animation: toast-in var(--duration-slow) var(--ease-spring);
  font-size: var(--text-base); color: var(--text-primary);
}
.toast__icon { display: inline-flex; width: var(--icon-md); height: var(--icon-md); flex-shrink: 0; }
.toast--success .toast__icon { color: var(--color-success); }
.toast--danger .toast__icon { color: var(--color-danger); }
.toast--info .toast__icon { color: var(--color-info); }
.toast--warning .toast__icon { color: var(--color-warning); }
.toast__dismiss {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 0; background: transparent; color: var(--text-muted);
  border-radius: var(--radius-md); cursor: pointer; margin-left: auto; flex-shrink: 0;
}
.toast__dismiss:hover { background: var(--color-surface-hover); color: var(--text-primary); }

/* Tooltip — DS §10.22 */
.tooltip {
  position: fixed; z-index: var(--z-tooltip);
  background: var(--neutral-900); color: var(--neutral-0);
  font-size: var(--text-xs); padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  pointer-events: none; max-width: 240px;
}

/* Dropdown menu — DS §10.23 */
@keyframes menu-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.menu {
  position: absolute; min-width: 180px;
  background: var(--color-surface); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md); z-index: var(--z-dropdown);
  padding: var(--space-2); animation: menu-in var(--duration-moderate) var(--ease-out);
}
.menu__item {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  height: var(--row-h); padding: 0 var(--space-3);
  border: 0; background: transparent; text-align: left;
  font-size: var(--text-base); color: var(--text-primary);
  border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-colors);
  text-decoration: none;
}
.menu__item:hover { background: var(--color-surface-hover); text-decoration: none; color: var(--text-primary); }
.menu__item--danger { color: var(--color-danger); }
.menu__item--danger:hover { color: var(--color-danger); }

/* ============================================================================
   Alert banners — DS §10.20; CRITICAL banner — DS §11.5
   ========================================================================== */
.banner {
  display: flex; align-items: flex-start; gap: var(--space-3);
  border-radius: var(--radius-xl); padding: var(--space-4);
  border-left: var(--border-width-4) solid transparent;
  font-size: var(--text-base);
}
.banner__icon { display: inline-flex; width: var(--icon-md); height: var(--icon-md); flex-shrink: 0; }
.banner__title { font-weight: var(--fw-semibold); color: var(--text-primary); }
.banner__body { color: var(--text-secondary); font-size: var(--text-sm); }
.banner--info    { background: var(--color-info-surface);    border-left-color: var(--color-info-solid); }
.banner--info .banner__icon { color: var(--color-info); }
.banner--success { background: var(--color-success-surface); border-left-color: var(--color-success-solid); }
.banner--success .banner__icon { color: var(--color-success); }
.banner--warning { background: var(--color-warning-surface); border-left-color: var(--color-warning-solid); }
.banner--warning .banner__icon { color: var(--color-warning); }
.banner--danger  { background: var(--color-danger-surface);  border-left-color: var(--color-danger-solid); }
.banner--danger .banner__icon { color: var(--color-danger); }

.critical-banner {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-danger-surface);
  border-left: var(--border-width-4) solid var(--color-danger-solid);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base); color: var(--text-primary);
  position: sticky; top: var(--topbar-h); z-index: var(--z-sticky);
}
.critical-banner__icon { display: inline-flex; width: var(--icon-md); height: var(--icon-md); color: var(--color-danger); flex-shrink: 0; }
.critical-banner strong { color: var(--color-danger); }

/* As-of / staleness badge — DS §11.6 */
.as-of {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); font-weight: var(--fw-medium);
  color: var(--text-muted);
  background: var(--neutral-100); border-radius: var(--radius-full);
  padding: var(--space-0-5) var(--space-2);
  font-variant-numeric: tabular-nums;
}
.as-of__icon { display: inline-flex; width: 12px; height: 12px; }
.as-of--lagging { background: var(--color-warning-surface); color: var(--color-warning); }
.as-of--disconnected { background: var(--color-danger-surface); color: var(--color-danger); }
.as-of .mono { font-size: inherit; }

/* ============================================================================
   Empty / error / permission-denied states — DS §10.26, §11.9
   ========================================================================== */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--space-3);
  padding: var(--space-16) var(--space-6);
}
.empty-state__icon { display: inline-flex; width: 40px; height: 40px; color: var(--text-disabled); }
.empty-state__title { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--text-primary); }
.empty-state__body { font-size: var(--text-base); color: var(--text-muted); max-width: 420px; }
.empty-state .btn { margin-top: var(--space-2); }
.empty-state--denied .empty-state__icon { color: var(--color-warning); }
.empty-state--error .empty-state__icon { color: var(--color-danger); }

/* Skeletons — DS §10.27 */
@keyframes skeleton-shimmer { 0% { opacity: 1; } 50% { opacity: .55; } 100% { opacity: 1; } }
.skeleton {
  background: var(--color-surface-sunken); border-radius: var(--radius-md);
  animation: skeleton-shimmer 1.5s var(--ease-standard) infinite;
  min-height: var(--space-4);
}
.skeleton--text { height: var(--space-3); }
.skeleton--title { height: var(--space-5); width: 40%; }
.skeleton--row { height: var(--row-h); border-radius: var(--radius-none); }
.skeleton-stack { display: flex; flex-direction: column; gap: var(--space-3); }

/* Spinner & progress — DS §10.25 */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: var(--icon-md); height: var(--icon-md);
  border: var(--border-width-2) solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spin .8s linear infinite;
}
.progress { height: 8px; background: var(--color-surface-sunken); border-radius: var(--radius-full); overflow: hidden; }
.progress__fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-full); transition: width var(--duration-moderate) var(--ease-standard); }

/* ============================================================================
   Avatars — DS §10.24 (initials on a neutral tint; never a broken image)
   ========================================================================== */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-full);
  background: var(--color-surface-sunken); color: var(--text-secondary);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  overflow: hidden; flex-shrink: 0; position: relative;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 24px; height: 24px; font-size: var(--text-2xs); }
.avatar--lg { width: 40px; height: 40px; font-size: var(--text-sm); }
.avatar--xl { width: 64px; height: 64px; font-size: var(--text-lg); }
.avatar--photo-a { background: var(--color-primary-subtle); color: var(--color-primary); }
.avatar--photo-b { background: var(--color-info-surface); color: var(--color-info); }

/* ============================================================================
   File drop-zone — DS §10.30, §11.7
   ========================================================================== */
.dropzone {
  border: var(--border-width-2) dashed var(--color-border-strong);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  text-align: center; color: var(--text-muted);
  cursor: pointer; transition: var(--transition-base);
  background: var(--color-surface);
}
.dropzone:hover, .dropzone.is-dragover { background: var(--color-surface-sunken); border-color: var(--color-primary); }
.dropzone:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dropzone__icon { display: inline-flex; width: var(--icon-lg); height: var(--icon-lg); color: var(--text-disabled); }
.dropzone__title { font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--text-primary); }
.dropzone__hint { font-size: var(--text-xs); }

/* ============================================================================
   Live feed — DS §11.3 (the signature interaction; calm surface)
   ========================================================================== */
@keyframes feed-enter { from { opacity: 0; transform: translateY(calc(-1 * var(--space-2))); } to { opacity: 1; transform: translateY(0); } }
@keyframes denied-flash {
  0%, 100% { background-color: var(--color-danger-surface); }
  40% { background-color: transparent; }
}
.live-feed { display: flex; flex-direction: column; }
.live-feed__row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-top: var(--border-width-1) solid var(--color-border);
  font-size: var(--text-sm);
  transition: background-color var(--duration-fast) var(--ease-standard);
  min-height: var(--row-h);
}
.live-feed__row:first-child { border-top: 0; }
.live-feed__row:hover { background: var(--color-surface-hover); }
.live-feed__row.row--clickable { cursor: pointer; }
.live-feed__row.is-new { animation: feed-enter var(--duration-slow) var(--ease-out); }
.live-feed__row.is-denied {
  animation: denied-flash 1s var(--ease-standard) 2;
  border-left: var(--border-width-4) solid var(--color-danger-solid);
  padding-left: calc(var(--space-4) - var(--border-width-4));
}
@media (prefers-reduced-motion: reduce) {
  .live-feed__row.is-denied { animation: none; background: var(--color-danger-surface); }
}
.live-feed__name { color: var(--text-primary); font-weight: var(--fw-medium); }
.live-feed__meta { color: var(--text-muted); font-size: var(--text-xs); }
.live-feed__time { margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.live-feed__dir { display: inline-flex; align-items: center; gap: var(--space-0-5); color: var(--text-muted); font-size: var(--text-xs); }

/* ============================================================================
   Sync matrix — DS §11.8
   ========================================================================== */
.sync-matrix { overflow-x: auto; }
/* Offline columns are de-emphasized by their danger badge + last-seen note —
   the header TEXT stays AA (DS §4.6: never signal state via low-contrast text) */
.sync-matrix .table thead th.is-offline { font-weight: var(--fw-regular); }
.sync-matrix .table td { text-align: center; }
.sync-matrix .table td.sync-person { text-align: left; }
.sync-matrix__retry {
  border: 0; background: transparent; color: var(--text-link);
  font-size: var(--text-xs); cursor: pointer; padding: var(--space-0-5) var(--space-1);
  border-radius: var(--radius-sm); text-decoration: underline;
}
.sync-matrix__retry:hover { color: var(--color-primary-hover); }

/* ============================================================================
   Forms layout — DS §9.5
   ========================================================================== */
.form-col { max-width: var(--measure); }
.form-group { margin-bottom: var(--space-6); }
.form-group > h3 { margin-bottom: var(--space-4); }
.form-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
  padding: var(--space-4) 0;
  position: sticky; bottom: 0; background: var(--color-bg); z-index: var(--z-sticky);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 767px) { .form-row { grid-template-columns: 1fr; } }

/* ============================================================================
   Kiosk mode — DS §9.6, §11.10 (public /visit only)
   ========================================================================== */
.kiosk {
  min-height: 100vh; background: var(--color-bg);
  display: flex; flex-direction: column; align-items: center;
  padding: var(--space-10) var(--space-6);
}
.kiosk__brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-bottom: var(--space-8); text-align: center; }
.kiosk__seal {
  width: 64px; height: 64px; border-radius: var(--radius-full);
  background: var(--color-secondary); color: var(--color-on-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold); font-size: var(--text-md);
}
.kiosk__school { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--color-secondary); }
.kiosk__card {
  width: 100%; max-width: 560px;
  background: var(--color-surface); border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm); padding: var(--space-8);
}
.kiosk__headline { font-size: var(--text-4xl); line-height: var(--leading-tight); font-weight: var(--fw-bold); color: var(--text-primary); margin-bottom: var(--space-2); }
.kiosk__sub { font-size: var(--text-md); color: var(--text-muted); margin-bottom: var(--space-6); }
.kiosk .field__label { font-size: var(--text-md); }
.kiosk .input, .kiosk .select, .kiosk .textarea { height: 48px; font-size: var(--text-md); }
.kiosk .textarea { height: auto; }
.kiosk .btn { width: 100%; height: 52px; font-size: var(--text-md); }

/* Login (public, identity moment — Secondary green permitted as identity) */
.login {
  min-height: 100vh; background: var(--color-bg);
  display: flex; align-items: center; justify-content: center; padding: var(--space-6);
}
.login__card {
  width: 100%; max-width: 400px;
  background: var(--color-surface); border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm); padding: var(--space-8);
  display: flex; flex-direction: column;
}
.login__brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); text-align: center; }

/* ============================================================================
   Responsive reflow — DS §5.9, §9.3 (desktop-first; collapse down)
   ========================================================================== */
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6); }
.col-span-4 { grid-column: span 4; }
.col-span-8 { grid-column: span 8; }
.col-span-12 { grid-column: span 12; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); }
@media (max-width: 1023px) {
  .col-span-4, .col-span-8 { grid-column: span 12; }
  /* LeftNav is hidden below 1024 — the brand block no longer needs to align with it */
  .topbar__brand { min-width: 0; }
  .topbar__title { display: none; }
  .topbar__search { width: 180px; }
}
@media (max-width: 767px) {
  .toolbar .input-wrap { width: 100%; }
  .topbar__search { display: none; }
}

/* ============================================================================
   Print — DS §9.7 (Emergency Roster & exports). The ONE in-product place the
   brand gold appears is the printed roster header lockup.
   ========================================================================== */
.print-only { display: none; }
@media print {
  body { background: var(--neutral-0); color: var(--neutral-900); }
  .topbar, .leftnav, .toolbar, .no-print, .toast-host, .critical-banner, .skip-link { display: none !important; }
  .print-only { display: block; }
  .app-shell { display: block; }
  main { padding: 0 !important; }
  .card, .table-wrap { box-shadow: none; border-radius: 0; }
  .table thead { display: table-header-group; }
  .table thead th, .table tbody td { border: var(--border-width-1) solid var(--neutral-900); color: var(--neutral-900); }
  .roster-print-header {
    display: flex; align-items: center; gap: var(--space-4);
    background: var(--color-secondary); color: var(--color-on-secondary);
    border-bottom: var(--border-width-4) solid var(--color-accent);
    padding: var(--space-4); margin-bottom: var(--space-4);
  }
  .roster-print-header .roster-seal {
    width: 40px; height: 40px; border-radius: var(--radius-full);
    background: var(--color-accent); color: var(--color-secondary);
    display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-bold);
  }
}
.roster-print-header { display: none; }
@media print { .roster-print-header { display: flex; } }

/* Definition lists (detail side panels) */
.dl { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); margin: 0; }
.dl dt { color: var(--text-muted); }
.dl dd { margin: 0; color: var(--text-primary); }

/* Utility rows */
.row { display: flex; align-items: center; gap: var(--space-3); }
.row--between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--lg { gap: var(--space-6); }
.section-gap { margin-bottom: var(--space-8); }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }