/* Cyber Academy — design tokens.
 *
 * The values are the visual contract's (`notes/design-rulebook.md`, surfaces, shape, colour semantics and
 * typography); this file transcribes them and decides none. Every contrast ratio in a comment was computed (WCAG 2.x
 * relative luminance over the exact hex pair), not estimated.
 *
 * TWO MODES OF ONE SYSTEM. The mode is chosen by `data-mode` on a shell root: `operator` (dark, the superadmin
 * outside a customer), `customer` (light, branded, the customer area for every role) and `neutral` (light, unbranded:
 * pre-authentication and the unassigned-administrator landing). Everything that does not differ between modes —
 * type, spacing, radius, controls, motion, layers, focus — is declared once on `:root`.
 *
 * A MODE TOKEN IS RESOLVED WHERE `data-mode` IS DECLARED. `--accent: var(--brand-primary, …)` is computed on the
 * element carrying `data-mode="customer"`, so the brand properties (`client.ui.branding/branding-style`) must be set
 * on that same element or above it — set on a descendant, they would change nothing.
 */

:root {
  /* Type families */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale: size / line-height (weights are set by role classes in base.css) */
  --text-12: 12px;  --lh-12: 16px;   /* caption: table headers, tile labels, tags, legends */
  --text-13: 13px;  --lh-13: 18px;   /* small: meta, help, secondary cell line */
  --text-14: 14px;  --lh-14: 20px;   /* body: default UI text, cells, inputs (fine pointer) */
  --text-16: 16px;  --lh-16: 24px;   /* body-lg + title-3 */
  --text-18: 18px;  --lh-18: 26px;   /* title-2 */
  --text-24: 24px;  --lh-24: 32px;   /* title-1 (page title) */
  --text-28: 28px;  --lh-28: 36px;   /* figure (stat tile) */

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Spacing (4 px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;

  /* Page gutters and widths */
  --gutter: 16px;                 /* phone; overridden at 640 / 1024 */
  --content-max: 1280px;          /* dashboards, tables */
  --form-max: 720px;              /* forms, Settings, Profile */
  --reading-max: 680px;           /* long text */
  --field-max: 400px;             /* single text field width inside a form */

  /* Radius; the lesson mirror is guarded by server.css-mirror-test. */
  --radius-xs: 4px;    /* tags, checkbox, progress bars, chart bar tops */
  --radius-sm: 6px;    /* buttons, inputs, selects, segmented thumb, course label, icon button */
  --radius-md: 8px;    /* logo/monogram tiles, segmented track, notices, drop zone, menu items */
  --radius-lg: 12px;   /* cards, stat tiles, menus, popovers, dialogs, pre-auth card */
  --radius-xl: 16px;   /* the shell's content card floating over the sidebar's chrome */
  --radius-full: 9999px; /* avatars, pace badge, radio, switch */

  /* Controls */
  --control-h: 36px;
  --control-h-sm: 32px;
  --control-h-lg: 40px;           /* pre-auth forms on fine pointers */
  --row-h: 44px;
  --row-h-2line: 52px;
  --icon-button: 32px;

  /* Motion — durations. Only `transform`, `opacity`, `background-color`, `color` and `box-shadow` animate, plus the
   * two sanctioned geometry changes (the sidebar width and the inline-create rows), so no state shifts layout. */
  --dur-instant: 60ms;            /* press in */
  --dur-fast: 120ms;              /* hover, focus, colour, press release */
  --dur-base: 200ms;              /* overlay enter, fades, label fades, segmented thumb, logo↔icon morph */
  --dur-exit: 150ms;              /* overlay and notice exit: leaving is quicker than arriving */
  --dur-slow: 300ms;              /* sidebar width, drawer, inline-create height */
  --dur-feedback: 2000ms;         /* the just-created highlight fading out */
  --dur-pulse: 1200ms;            /* one skeleton pulse */
  --dur-spin: 800ms;              /* one busy-spinner turn */
  /* Motion — delays */
  --delay-tooltip: 500ms;         /* a hover pause before a tooltip; keyboard focus shows it at once */
  --delay-skeleton: 300ms;        /* a load shorter than this never flashes a skeleton */
  --delay-rail-logo: 100ms;       /* the rail logo's return starts late enough to end with the width (300 − 200 ms) */
  --delay-label-in: 100ms;        /* expanded labels fade in once the width has made room */
  /* Motion — easings */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* in-place changes */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);        /* enter and expand; the reference sidebar's ease-out, one-to-one */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);         /* exit */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);   /* a cross-fade between two states, even enough to be seen */
  --ease-linear: linear;                          /* spin and pulse */
  /* Motion — distance, scale, sequencing */
  --move-xs: 2px;
  --move-sm: 4px;                 /* an overlay travels this far toward its anchor as it enters */
  --move-md: 8px;                 /* content rising in on load */
  --scale-enter: 0.98;            /* an overlay or dialog grows from this to 1 */
  --scale-icon: 0.6;              /* the logo↔icon morph */
  --stagger: 30ms;                /* tiles and cards on content load only, at most 4 steps; never rows or menu items */

  /* Z-index */
  --z-sticky: 10;        /* sticky table header, sticky toolbar */
  --z-sidebar: 20;
  --z-topbar: 30;
  --z-backdrop: 40;      /* phone drawer backdrop */
  --z-drawer: 50;
  --z-overlay: 60;       /* everything portaled into the overlay root, stacked by open order */
  --z-dialog-backdrop: 70; /* retiring: as above */
  --z-dialog: 80;          /* retiring: as above */
  --z-tooltip: 100;

  /* Focus — the keyboard focus treatment is a lift, a surface shift, a restrained glow and the focus dash; never a
   * ring, an outline or a border (`notes/design-rulebook.md`, components). The dash is the measured 3:1 cue: a
   * detached 2 px pill, never as long as a side of the control. */
  --focus-dash-h: 2px;
  --focus-dash-w: 16px;
  --focus-dash-w-sm: 12px;          /* icon-only controls and checkboxes */
  --focus-dash-gap: 3px;            /* between a checkbox and the dash under it */
  --focus-width: 2px;               /* retiring: read only by the forced-colours outline and un-migrated rules */
  --focus-offset: 2px;              /* retiring: as above */

  /* Scrollbars: a 10 px gutter, the thumb drawn at 6 px inside it. Colours are per mode. */
  --scrollbar-size: 8px;
  --header-axis: 36px;  /* the sidebar header's centre line (8 px inset + half its 56 px row); every floating header control centres on it */

  /* Count badge */
  --badge-h: 20px;

  /* The operator console's own colours, named once. The operator mode reads them as its surface, pressed fill, ink
   * and accent; the console action on a customer's light sidebar reads them directly, because a nested
   * `data-mode="operator"` would repaint the document's ground (`notes/design-rulebook.md` §4). */
  --console-surface: #171B22;
  --console-surface-hover: #272D37;  /* the console's pressed and selected fill */
  --console-ink: #E8EBF0;            /* 14.45:1 on the console surface */
  --console-accent: #D3FD22;         /* BOIT lime: 14.67:1 on the console surface */

  /* Chart (mode-independent parts) */
  --chart-series-2: #D55181;      /* validated with series-1 in both modes */
}

@media (min-width: 640px)  { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }
@media (pointer: coarse)   { :root { --control-h: 44px; --control-h-sm: 40px; --control-h-lg: 44px;
                                     --icon-button: 44px; } }
/* Under reduced motion every duration and delay is zero; the state changes still happen. The stagger goes too, so no
 * content waits for a sequence nobody will see. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-exit: 0ms; --dur-slow: 0ms;
    --dur-feedback: 0ms; --dur-pulse: 0ms; --dur-spin: 0ms;
    --delay-tooltip: 0ms; --delay-skeleton: 0ms; --delay-rail-logo: 0ms; --delay-label-in: 0ms;
    --stagger: 0ms; --move-xs: 0px; --move-sm: 0px; --move-md: 0px; --scale-enter: 1; --scale-icon: 1;
  }
}

/* == Operator mode (dark) == */
[data-mode="operator"] {
  color-scheme: dark;
  --bg: #101319;            /* level 1: perceptually separated from the sidebar's ground */
  --surface: var(--console-surface);        /* #171B22: cards, tables, the sidebar */
  --surface-2: #1E232B;     /* hover row, input fill, segmented track, skeleton */
  --surface-3: var(--console-surface-hover); /* #272D37: pressed, selected segmented thumb */
  --chrome: #08090B;        /* the sidebar's ground, one step below the content card's bg */
  --chrome-hover: var(--surface); /* an item's hover fill on the chrome */
  --border: #262B34;        /* retiring: framing strokes are gone; read only by un-migrated rules */
  --border-strong: #363D49; /* retiring: as above */
  --border-input: #6B7382;  /* retiring: read only by un-migrated rules */

  --text-1: var(--console-ink); /* #E8EBF0: 15.56:1 on bg, 14.45:1 on surface */
  --text-hover: #FFFFFF;    /* text-only controls: colour only, never a hover underline */
  --text-2: #AEB5C2;        /* 8.38:1 on surface, 7.66:1 on surface-2 */
  --text-3: #969FAE;        /* 6.97:1 on bg, 6.47:1 on surface, 4.55:1 on modal hover */
  --text-disabled: #5E6776; /* 2.76:1 on surface-2 — disabled only (WCAG-exempt) */

  --accent: var(--console-accent); /* #D3FD22, BOIT lime: 15.80:1 on bg, 14.67:1 on surface */
  --accent-ink: #0C0E12;    /* 16.41:1 on lime */
  --accent-hover: #C2EC12;  /* ink 14.07:1 */
  --accent-pressed: color-mix(in srgb, var(--accent) 80%, #000000);
  --accent-tint: color-mix(in srgb, var(--accent) 10%, var(--surface)); /* selected nav bg ≈ #2A3222 */
  --focus-color: var(--accent);
  --focused-label-ink: var(--focus-color);
  --link: var(--text-1);    /* underlined; no cyan */

  --destructive: #FF8A82;   /* fill; ink below 8.47:1 */
  --destructive-ink: #0C0E12;
  --destructive-hover: #FF6F66;
  --destructive-pressed: color-mix(in srgb, var(--destructive) 85%, #000000);
  --destructive-fg: #FF8A82; /* destructive text on surface 7.57:1 */

  /* Elevation ladder (dark): black shadows, dx 0, blur larger than offset, no spread, no ring. On a dark ground the
   * surface also carries height: an overlay and a modal are a step lighter than a card. */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
  --elev-2: 0 2px 4px rgba(0, 0, 0, 0.50), 0 6px 18px rgba(0, 0, 0, 0.35);
  --elev-3: 0 6px 12px rgba(0, 0, 0, 0.50), 0 16px 40px rgba(0, 0, 0, 0.50);
  --elev-4: 0 10px 20px rgba(0, 0, 0, 0.55), 0 28px 72px rgba(0, 0, 0, 0.60);
  --elev-1-fill: var(--elev-1);   /* a filled button's own shadow; black on a dark ground */
  --elev-2-fill: var(--elev-2);
  --elev-1-destructive: var(--elev-1);
  --elev-2-destructive: var(--elev-2);
  --surface-overlay: #1F242D;       /* menus, popovers, tooltips, the bulk bar */
  --surface-modal: #252B36;         /* dialogs */
  --surface-overlay-hover: #2B313B; /* hover and focus inside an overlay: 1.19:1 on it */
  --surface-modal-hover: #303641;   /* hover and focus inside a dialog: 1.17:1 on it */

  /* Surface shift (dark): state changes a fill, never a stroke. Rest, hover and pressed are measured apart. */
  --surface-hover: #1E232B;         /* 1.09:1 on surface */
  --surface-pressed: #272D37;       /* 1.25:1 on surface, 1.14:1 on surface-hover */
  --control-fill: var(--surface);   /* a raised control at rest: level 1, as a card is */
  --control-fill-hover: var(--surface); /* hover and focus lift it to level 2; the fill stays */
  --control-fill-pressed: #20252D;  /* 1.12:1 on rest, 1.03:1 on hover */
  --badge-fill: #272D37;            /* count badge; text-2 on it 6.72:1 */

  /* Holders (dark). `--holder` is the fill of the nearest surface and `--holder-below` the surface one elevation
   * beneath it; every surface that holds fields declares both (components.css, layout.css). The page ground has no
   * surface beneath it: a field on it keeps the ground's colour on focus and the deeper inset carries the state (the
   * operator's decision). Inputs are RECESSED into their holder (components.css, the input rule). */
  --holder: var(--bg);
  --holder-below: var(--bg);
  --overlay-below: var(--surface);  /* an overlay's fields recede to the card level */
  --modal-below: var(--surface-overlay);
  --hover-region-below: var(--surface);
  /* The recess: an inset shadow only — never an external shadow, a border or a ring. Rest is subtle; hover a little
   * deeper; focus and active deeper still. */
  /* On a dark ground a shadow alone barely reads, so the recess also catches a faint light along its lower inside
   * edge — a soft inset highlight, blurred, never a line. */
  --inset-rest: inset 0 1px 3px rgba(0, 0, 0, 0.60), inset 0 -1px 2px rgba(255, 255, 255, 0.07);
  --inset-hover: inset 0 1px 4px rgba(0, 0, 0, 0.70), inset 0 -1px 2px rgba(255, 255, 255, 0.09);
  --inset-focus: inset 0 2px 5px rgba(0, 0, 0, 0.78), inset 0 -1px 3px rgba(255, 255, 255, 0.22),
                 inset 0 0 6px rgba(255, 255, 255, 0.08);
  --inset-disabled: inset 0 1px 3px rgba(0, 0, 0, 0.30), inset 0 -1px 2px rgba(255, 255, 255, 0.035);
  /* Check wells: a checkbox or radio keeps the filled well, ≥ 3:1 against its holder (components.css). */
  --well-toward: #FFFFFF;
  --well-mix: 64%;
  --well-mix-hover: 63%;
  --well-mix-disabled: 88%;

  /* Focus (dark) */
  --focus-glow: 0 0 14px color-mix(in srgb, var(--focus-color) 20%, transparent);
  --focus-tint: color-mix(in srgb, var(--focus-color) 14%, transparent);

  --shadow-float: var(--elev-3);    /* retiring alias: read only by un-migrated rules */
  --backdrop: rgba(0, 0, 0, 0.56);

  --chart-series-1: #3987E5;
  --chart-neutral: #6B7382;
  --chart-grid: #262B34;            /* data ink, not framing: gridlines stay (`notes/design-rulebook.md`, charts) */
  --chart-baseline: #363D49;
  --chart-axis: var(--text-3);
}

/* == Customer mode (light) == */
[data-mode="customer"], [data-mode="neutral"] {
  color-scheme: light;
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --surface-2: #F0F2F5;
  --surface-3: #E6E9EE;
  --chrome: var(--surface-2); /* the sidebar's ground, one step below the content card's bg */
  --chrome-hover: var(--surface-3); /* an item's hover fill on the chrome */
  --border: #E3E6EB;        /* retiring: as in the operator mode */
  --border-strong: #CDD2DA; /* retiring */
  --border-input: #7C8595;  /* retiring */

  --text-1: #14171C;        /* 17.96:1 on surface, 16.76:1 on bg */
  --text-hover: #000000;    /* a small final step beyond text-1; mirrored in employee.css */
  --text-2: #4A5363;        /* 7.75:1 on surface, 6.91:1 on surface-2 */
  --text-3: #626B7A;        /* 5.38:1 on surface, 5.02:1 on bg, 4.80:1 on surface-2 */
  --text-disabled: #9AA1AD; /* 2.32:1 on surface-2 — disabled only */

  /* Brand-driven roles: set from --brand-* (client.ui.branding/branding-style), with the unbranded default */
  --accent: var(--brand-primary, #5E1DB2);          /* default 9.15:1 on white, 8.54:1 on bg */
  --accent-ink: var(--brand-primary-ink, #FFFFFF);
  --accent-hover: color-mix(in srgb, var(--accent) 88%, #000000);
  --accent-pressed: color-mix(in srgb, var(--accent) 80%, #000000);
  --accent-tint: color-mix(in srgb, var(--accent) 10%, #FFFFFF);
  --focus-color: var(--accent);                      /* ≥ 4.5:1 on white by validation ⇒ ≥ 3:1 ring */
  --focused-label-ink: color-mix(in srgb, var(--accent) 85%, #000);
  --link: var(--brand-secondary, var(--accent));

  --destructive: #C4291D;   /* white ink 5.70:1 */
  --destructive-ink: #FFFFFF;
  --destructive-hover: #A8221A; /* white 7.22:1 */
  --destructive-pressed: color-mix(in srgb, var(--destructive) 85%, #000000);
  --destructive-fg: #A3201A;    /* destructive text on surface 7.56:1 */

  /* Elevation ladder (light): shadows tinted rgb(16, 24, 40), dx 0, blur larger than offset, no spread, no ring.
   * The lesson mirror is guarded by server.css-mirror-test. */
  --elev-1: 0 1px 2px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.05);
  --elev-2: 0 2px 4px rgba(16, 24, 40, 0.08), 0 6px 16px rgba(16, 24, 40, 0.08);
  --elev-3: 0 4px 8px rgba(16, 24, 40, 0.08), 0 12px 32px rgba(16, 24, 40, 0.14);
  --elev-4: 0 8px 16px rgba(16, 24, 40, 0.10), 0 24px 56px rgba(16, 24, 40, 0.20);
  /* A filled button's shadow takes its own fill, so a coloured control does not cast a grey shadow. */
  --elev-1-fill: 0 1px 2px color-mix(in srgb, var(--accent) 30%, transparent),
                 0 2px 8px color-mix(in srgb, var(--accent) 16%, transparent);
  --elev-2-fill: 0 2px 4px color-mix(in srgb, var(--accent) 30%, transparent),
                 0 6px 16px color-mix(in srgb, var(--accent) 22%, transparent);
  --elev-1-destructive: 0 1px 2px color-mix(in srgb, var(--destructive) 30%, transparent),
                        0 2px 8px color-mix(in srgb, var(--destructive) 16%, transparent);
  --elev-2-destructive: 0 2px 4px color-mix(in srgb, var(--destructive) 30%, transparent),
                        0 6px 16px color-mix(in srgb, var(--destructive) 22%, transparent);
  --surface-overlay: #FFFFFF;
  --surface-modal: #FFFFFF;
  --surface-overlay-hover: #F0F2F5;
  --surface-modal-hover: #F0F2F5;

  /* Surface shift (light) */
  --surface-hover: #F0F2F5;         /* 1.12:1 on surface */
  --surface-pressed: #E6E9EE;       /* 1.22:1 on surface, 1.09:1 on surface-hover */
  --control-fill: var(--surface);   /* a raised control at rest: level 1, as a card is */
  --control-fill-hover: var(--surface); /* hover and focus lift it to level 2; the fill stays */
  --control-fill-pressed: #E6E9EE;  /* below rest: 1.07:1 on rest, 1.13:1 on hover */
  --badge-fill: #E6E9EE;            /* count badge; text-2 on it 6.37:1 */

  /* Holders (light): see the operator mode above. In light mode a lower elevation is darker: a card's fields recede
   * to the page ground; the page ground's keep its colour and deepen their inset. An overlay and a dialog share the
   * card's white, so their fields recede to the page ground as well. */
  --holder: var(--bg);
  --holder-below: var(--bg);
  --overlay-below: var(--bg);
  --modal-below: var(--bg);
  --hover-region-below: #EAECF0;
  --inset-rest: inset 0 1px 2px rgba(16, 24, 40, 0.10), inset 0 0 2px rgba(16, 24, 40, 0.10);
  --inset-hover: inset 0 1px 3px rgba(16, 24, 40, 0.14), inset 0 0 3px rgba(16, 24, 40, 0.12);
  --inset-focus: inset 0 2px 5px rgba(16, 24, 40, 0.15), inset 0 0 4px rgba(16, 24, 40, 0.10);
  --inset-disabled: inset 0 1px 2px rgba(16, 24, 40, 0.05), inset 0 0 2px rgba(16, 24, 40, 0.05);
  --well-toward: #14171C;
  --well-mix: 52%;
  --well-mix-hover: 50%;
  --well-mix-disabled: 88%;

  /* Focus (light) */
  --focus-glow: 0 0 16px color-mix(in srgb, var(--focus-color) 24%, transparent);
  --focus-tint: color-mix(in srgb, var(--focus-color) 12%, transparent);

  --shadow-float: var(--elev-3);    /* retiring alias: read only by un-migrated rules */
  --backdrop: rgba(12, 14, 18, 0.40);

  --chart-series-1: #2A78D6;  /* 4.42:1 on white */
  --chart-neutral: #8A93A3;   /* 3.10:1 on white */
  --chart-grid: #E3E6EB;      /* data ink, not framing */
  --chart-baseline: #CDD2DA;
  --chart-axis: var(--text-3);
}

/* Pre-authentication and the unassigned-administrator landing: customer tokens, no brand. */
[data-mode="neutral"] {   /* after the shared block: overrides the brand-driven roles only */
  --accent: #14171C;        /* dark ink primary button, white ink 17.96:1 */
  --accent-ink: #FFFFFF;
  --accent-hover: #2A2F37;
  --accent-tint: #F0F2F5;
  --focus-color: #14171C;
  --link: #14171C;
}

/* The document background follows the mode, so overscroll never shows the other mode; so does the document
 * scrollbar, which belongs to the root element and cannot read the tokens a mode root declares below it. */
:root:has([data-mode="operator"]) {
  background: #101319; color-scheme: dark;
  /* the thumb ≥ 3:1 at rest on every surface a scroller sits on: 4.30:1 on bg, 4.00:1 on surface, 3.65:1 on
   * surface-2, 3.60:1 on surface-overlay, 3.29:1 on surface-modal */
  --scrollbar-thumb: #727A89; --scrollbar-thumb-hover: #8A93A3; --scrollbar-thumb-active: #AEB5C2;
}
:root:has([data-mode="customer"]), :root:has([data-mode="neutral"]) {
  background: #F6F7F9; color-scheme: light;
  /* the thumb ≥ 3:1 at rest on every surface a scroller sits on: 3.72:1 on white (surface, overlay, modal),
   * 3.47:1 on bg, 3.32:1 on surface-2 */
  --scrollbar-thumb: #7C8595; --scrollbar-thumb-hover: #6B7382; --scrollbar-thumb-active: #4A5363;
}

/* == Status tokens (fixed; never brand) ==
 * fg = text and icon colour (on surface, tint and fill); tint = label base background; fill = the progress-fill
 * layer of the course label; solid = non-text marks (2 px progress bar, chart segments, dots), ≥ 3:1 on surface
 * and on tint. Notice tones reuse the hue families: success → on-track, warning → behind, error → serious,
 * info → info. */
[data-mode="customer"], [data-mode="neutral"] {
  --status-on-track-fg: #146C36;   /* 6.51 surface · 5.73 tint · 4.74 fill */
  --status-on-track-tint: #E6F4EB;
  --status-on-track-fill: #BFE5CC;
  --status-on-track-solid: #1F8445; /* 4.72 surface · 4.16 tint · 3.44 fill */

  --status-behind-fg: #8F4300;     /* 7.07 surface · 6.25 tint · 5.01 fill */
  --status-behind-tint: #FDEFDD;
  --status-behind-fill: #F9D3A6;
  --status-behind-solid: #B85A00;  /* 4.67 surface · 4.13 tint */

  --status-serious-fg: #A3201A;    /* 7.56 surface · 6.43 tint · 4.79 fill */
  --status-serious-tint: #FDE8E6;
  --status-serious-fill: #F7C1BC;
  --status-serious-solid: #C42A1E; /* 5.68 surface · 4.83 tint */

  --status-paused-fg: #4E5664;     /* 6.48 tint · 5.16 fill */
  --status-paused-tint: #EEF0F3;
  --status-paused-fill: #D3D8DF;
  --status-paused-solid: #737C8B;  /* 4.21 surface · 3.69 tint */

  --status-neutral-fg: var(--text-3);   /* not-completed: 4.80 on surface-2 */
  --status-neutral-tint: var(--surface-2);

  --info-fg: #1F56B8;              /* 6.81 surface · 5.94 tint */
  --info-tint: #E8F0FD;
  --info-solid: #3B7BEA;
}

[data-mode="operator"] {
  --status-on-track-fg: #6FDC98;   /* 10.17 surface · 9.09 tint · 5.97 fill */
  --status-on-track-tint: #13291B;
  --status-on-track-fill: #1D4A2E;
  --status-on-track-solid: #2EB35F; /* 6.35 surface · 5.68 tint */

  --status-behind-fg: #FFB866;     /* 10.11 surface · 9.25 tint · 6.41 fill */
  --status-behind-tint: #2E2010;
  --status-behind-fill: #54361A;
  --status-behind-solid: #F08A1C;  /* 6.87 surface · 6.28 tint */

  --status-serious-fg: #FF8A82;    /* 7.57 surface · 7.28 tint · 5.33 fill */
  --status-serious-tint: #331614;
  --status-serious-fill: #5C2420;
  --status-serious-solid: #EF4B40; /* 4.73 surface · 4.54 tint */

  --status-paused-fg: #B4BBC7;     /* 8.94 surface · 8.16 tint · 5.83 fill */
  --status-paused-tint: #1F232A;
  --status-paused-fill: #353B46;
  --status-paused-solid: #8A93A3;  /* 5.58 surface · 5.09 tint */

  --status-neutral-fg: var(--text-3);   /* 5.91 on surface-2 */
  --status-neutral-tint: var(--surface-2);

  --info-fg: #8DB8FF;              /* 8.58 surface · 7.82 tint */
  --info-tint: #15233A;
  --info-solid: #3B7BEA;
}

/* == Sticky bars: what the document must keep clear when it scrolls a focused control into view ==
 * `--sticky-top` is the height of the sticky bar at the top of the page — the phone's top bar, the only one; from a
 * tablet up the sidebar is at the side, not on top — and `--sticky-bottom` the room the sticky bars docked at the
 * bottom take. base.css turns them into the document's scroll padding, so keyboard focus is never hidden under a
 * sticky bar (WCAG 2.4.11). */
:root { --sticky-top: 0px; --sticky-bottom: 0px; }
@media (max-width: 831px) { :root:has(.mobile-topbar) { --sticky-top: 56px; } }
:root:has(.wizard-actions) { --sticky-bottom: 72px; }   /* a 36 px action row in 12 px of padding, and a gap */
:root:has(.bulk-bar) { --sticky-bottom: 88px; }         /* a 56 px bar floating 16 px up, and a gap */