/** * MDT Central — global stylesheet * Extends Bootstrap 5.3 * * Token architecture (UI_STANDARDS.md §4): * 1. Brand constants --mdt-* — raw palette; never consumed by components. * 2. Semantic tokens --ctl-* — the ONLY layer components consume. * :root carries Operator Light (the no-attribute default, so standalone * pages that load this file with no theming logic get it free). Five * override blocks build the other sheets, keyed on . Block ORDER is load-bearing: the single-attribute * blocks come first, the style+scheme combos after, so a later block * always refines an earlier one at equal-or-higher specificity. * 3. Bootstrap bridge — --ctl-* mapped onto Bootstrap 5.3's --bs-* variables * so native components (tooltips, popovers, offcanvas, toasts, modals, * dropdowns) theme correctly with zero per-component dark overrides. * * Fonts arrive from /css/fonts.css (Oswald variable 200-700, Lato 300/400/700/900). */ /* ═══ Layer 1 — Brand constants (components never reference these) ═══ */ :root { --mdt-black: #000000; --mdt-white: #ffffff; /* Grey ramp */ --mdt-grey-050: #f8f8f8; --mdt-grey-100: #f5f5f5; --mdt-grey-200: #dcdcdc; --mdt-grey-300: #c4c4c4; --mdt-grey-400: #a0a0a0; --mdt-grey-500: #858585; --mdt-grey-600: #5c5c5c; --mdt-grey-700: #3a3a3a; --mdt-grey-800: #2a2a2a; --mdt-grey-900: #161616; /* MDT green ramp (brand accent) */ --mdt-green-100: #e7ecd3; --mdt-green-400: #9fbc50; --mdt-green-500: #86a33d; --mdt-green-600: #6d8730; --mdt-green-700: #5a7028; /* Refined Blue ramp */ --mdt-blue-200: #93b8ff; --mdt-blue-300: #78a5ff; /* Refined dark link/accent-text: 4.99:1 on that sheet bg-hover. #6a9bff missed by 0.02. */ --mdt-blue-400: #4b86ff; --mdt-blue-500: #2f6fed; --mdt-blue-600: #2258c9; --mdt-blue-700: #1b46a0; /* Status */ --mdt-red-100: #fbebe9; --mdt-red-400: #e05a55; --mdt-red-500: #b4231f; --mdt-red-900: #381411; /* wash dark enough for red-400 text at 4.5:1 */ --mdt-amber-100: #fbf3e0; --mdt-amber-500: #c98a1a; --mdt-amber-600: #8a5f0d; /* warning-text on light. Was #93650f, which cleared 4.5:1 on the page surfaces but only managed 4.31:1 on a HOVERED row — the darkest light surface any text actually lands on. */ --mdt-amber-900: #332508; } /* ═══ Layer 2 — Semantic tokens: sheet 1/6, Operator Light (default) ═══ */ :root { /* Surfaces (Operator: warm-tinted neutrals) */ --ctl-bg: #f6f6f4; --ctl-bg-alt: var(--mdt-white); --ctl-bg-elevated: var(--mdt-white); --ctl-bg-inset: var(--mdt-white); --ctl-bg-inverse: #141414; /* The ink certified against bg-inverse. In every one of the six sheets --ctl-bg-inverse IS the opposite scheme's ground (the light sheets state the dark ground, the dark sheets state the light one), so the ink that belongs on it is this sheet's own ground turned over — the very colour our text is already read against, now doing the reading. Declared once as an alias for the same reason --ctl-row-settled-bg is: the step is one every sheet already owns, so re-tuning a ground re-tunes this with it, and no sheet needs an override. The pair measures 16.9:1 or better in all six sheets, which CssTokenContractTest measures rather than trusts. Consumed through the .ctl-bg-inverse utility below the bridge — never a bare `background: var(--ctl-bg-inverse)`, because the ground without this ink is an unreadable slab. */ --ctl-fg-inverse: var(--ctl-bg); /* The hover surface, and its triplet. bg-hover is the only neutral that steps AWAY from the card in both schemes (darker on the light sheets, lighter on the dark ones), which is why it grounds the app's quiet chips — `.bg-secondary-subtle` since #1879 and, since #1926, `.bg-secondary` itself, whose Bootstrap utility composes `rgba(var(--bs-secondary-rgb), …)` and therefore needs the value as a TRIPLET. The triplet sits beside the hex rather than in the "RGB triplets" group below on purpose: the two are one value in two notations, and every sheet states its own hover colour, so keeping them adjacent is what stops a re-tune from moving one and leaving the other. CssTokenContractTest measures that they agree in all six sheets rather than trusting it. */ --ctl-bg-hover: #ecece7; --ctl-bg-hover-rgb: 236, 236, 231; /* A settled list row (a closed/terminal ticket) sinks back to the PAGE GROUND: the row stops reading as card material and rejoins the surface the card is lifted off. That is why this is an alias rather than a new colour — the step is one the sheet already owns, so it lands in the sheet's own temperature and re-tuning the ground re-tunes this with it. Only Industrial Light overrides it, because that preset grounds on pure white by identity and would have nothing to sink TO. */ --ctl-row-settled-bg: var(--ctl-bg); /* ── Navigation chrome — the left rail and the layers that ride on it ──── THE RAIL IS DARK IN ALL SIX SHEETS. It is the one component in the app that does not follow the page's scheme, and that is a deliberate, reviewed decision rather than the pre-token accident it replaced. History, because the shape of this block only makes sense with it. The rail originally shipped three hardcoded greys (#212529 rail, #1a1e21 header + second panel, #2a2f34 admin sheet) over rgba(255,255,255,…) washes — one slab of Bootstrap blue-grey in every sheet, ignoring both the chosen style and the scheme. The first fix (#1705) made it follow the sheet outright: bg-alt for the surface, --ctl-fg for the ink, so a light scheme got a light rail. Live review rejected that on two counts, and both are now requirements: · a light rail lost the app's persistent left-edge anchor. The rail is navigation, not content, and the classic dark-rail-on-light-app split is what makes it read as chrome at a glance. · in the dark sheets the rail sat only 1.06:1 off the page — technically a step, visually nothing. So the model is: the rail is a DARK chrome surface everywhere, tinted to the active style's own temperature, wearing its own light ink ramp. What changes between schemes is where it sits relative to the page: · LIGHT sheets — the rail is the style's own DARK-scheme elevated surface (Industrial #212121, Operator #222220, Refined #1a2c42). Those are the same darkness class as the retired #212529, which is what the stakeholder asked to get back, and each is already certified as that style's temperature: pure neutral, warm, navy. · DARK sheets — the rail lifts ABOVE the page instead (~1.3:1, roughly four times the old step), so it reads as an elevated surface floating over the content rather than a slightly different black. It is deliberately the brightest surface in those sheets — chrome on top. Everything else is derived off --ctl-nav-bg and --ctl-nav-fg, so a style only ever declares the rail tone and its ink: nav-raised-bg the layers ON the rail — brand band, the Settings sheet that slides up, the second panel. Mixed toward the ink, i.e. always LIGHTER than the rail, which is what "raised" means on a dark ground. nav-hover-bg hover / open-group / active. Translucent ink so one wash reads on the rail AND on the raised sheet; an opaque surface can only be right on one of them. Hover and active share it on purpose — the accent left-bar is the "you are here" marker. nav-border the rail's internal hairlines, in the rail's own family. --ctl-border is a PAGE value and is invisible here. nav-accent the "you are here" left-bar and the Settings sheet's rule. Aliases --ctl-accent, which clears 3:1 (WCAG 1.4.11, non-text) on the green rails at 4.9–5.6:1 — but Refined's #2f6fed lands at 2.88:1 on its own navy rail, so that style alone steps the INDICATOR up a rung. The button fill stays --ctl-accent; this token only ever paints marks drawn ON the rail. nav-scrim / both scheme-invariant, for the same reason the ink is: nav-shadow the surface they fall on is dark in every sheet. The ink ramp is sized against the WORST nav surface (a hovered raised layer), not the rail — CssTokenContractTest composites and measures it. -subtle is certified on the RESTING surfaces only, so nothing hoverable may use it. */ --ctl-nav-bg: #222220; /* Operator: warm dark */ --ctl-nav-fg: #e8e8e0; --ctl-nav-fg-muted: #b5b4a9; --ctl-nav-fg-subtle: #a3a196; --ctl-nav-fg-rgb: 232, 232, 224; --ctl-nav-raised-bg: color-mix(in srgb, var(--ctl-nav-bg) 94%, var(--ctl-nav-fg)); --ctl-nav-hover-bg: rgba(var(--ctl-nav-fg-rgb), 0.08); --ctl-nav-border: color-mix(in srgb, var(--ctl-nav-bg) 90%, var(--ctl-nav-fg)); --ctl-nav-accent: var(--ctl-accent); --ctl-nav-scrim: rgba(0, 0, 0, 0.45); --ctl-nav-shadow: rgba(0, 0, 0, 0.45); /* Text */ --ctl-fg: #141414; --ctl-fg-muted: var(--mdt-grey-600); --ctl-fg-subtle: #686868; /* 4.70:1 on this sheet bg-hover, the darkest light surface it lands on */ --ctl-fg-faint: #a8a8a3; /* decorative/disabled ONLY — not AA */ /* Borders */ --ctl-border: #d8d8d2; --ctl-border-strong: #c8c8c2; /* The quiet end of the same hairline: --ctl-border thinned toward whatever surface it is drawn on, for chrome that should be FOUND rather than read (the dashboard's edit-mode grip/eye boxes). DERIVED, not a seventh hex per sheet — the substitution happens on , where every sheet declares its own --ctl-border, so all six get their own subtle step for free and re-tuning a sheet's border re-tunes this with it (the --ctl-chart-grid / --ctl-row-settled-bg precedent). Alpha rather than a lighter colour because "lighter" is backwards in the dark schemes: a thinned border sinks toward its own background whichever way that background runs, so one declaration is correct in all six. */ --ctl-border-subtle: color-mix(in srgb, var(--ctl-border) 55%, transparent); /* Accent (MDT green; accent-fg per §4.5: black on green in green styles) */ --ctl-accent: var(--mdt-green-500); --ctl-accent-hover: var(--mdt-green-600); --ctl-accent-press: var(--mdt-green-700); --ctl-accent-fg: #000000; --ctl-accent-text: var(--mdt-green-700); --ctl-accent-rgb: 134, 163, 61; --ctl-link: var(--mdt-green-700); --ctl-link-rgb: 90, 112, 40; --ctl-link-hover: #47591f; --ctl-link-hover-rgb: 71, 89, 31; /* RGB triplets of scheme surfaces/text (for rgba() composition + bridge) */ --ctl-fg-rgb: 20, 20, 20; --ctl-bg-rgb: 246, 246, 244; --ctl-bg-alt-rgb: 255, 255, 255; --ctl-fg-muted-rgb: 92, 92, 92; /* Status (§4.3) — base / contrast-safe text / background wash */ --ctl-danger: var(--mdt-red-500); --ctl-danger-text: var(--mdt-red-500); --ctl-danger-bg: var(--mdt-red-100); --ctl-danger-rgb: 180, 35, 31; --ctl-warning: var(--mdt-amber-500); --ctl-warning-text: var(--mdt-amber-600); --ctl-warning-bg: var(--mdt-amber-100); --ctl-warning-rgb: 201, 138, 26; --ctl-success: var(--mdt-green-600); --ctl-success-text: var(--mdt-green-700); --ctl-success-bg: var(--mdt-green-100); --ctl-success-rgb: 109, 135, 48; /* info is the one status family whose "base" is not a hue at all: it is the muted INK, identically valued to --ctl-fg-muted in five of the six sheets. That is coherent — an informational note is quiet text, not a coloured slab — and it is why --ctl-info-rgb may never serve a `bg-` position (#2003). The informational GROUND is the wash below, and its triplet is declared beside the hex for the same reason --ctl-bg-hover-rgb is (#1926): two notations of one colour drift the moment one is re-tuned, and CssTokenContractTest measures that they agree in all six sheets rather than trusting it. */ --ctl-info: var(--mdt-grey-600); --ctl-info-text: var(--mdt-grey-600); --ctl-info-bg: #f1f1f1; --ctl-info-bg-rgb: 241, 241, 241; --ctl-info-rgb: 92, 92, 92; /* Shadows (dark schemes raise opacity, never geometry) */ --ctl-shadow: rgba(0, 0, 0, 0.075); --ctl-shadow-hover: rgba(0, 0, 0, 0.1); /* Card chrome. This pair used to be the compensation for a SQUARE card: the sharp presets bought back the missing corner cue with a crisper hairline (border-strong) and one step more shadow, and Refined Blue — the only preset that shipped a real card radius — overrode both back down. Cards are rounded in every preset now (--ctl-radius-card), so the compensation has nothing left to compensate for, and carrying it would leave every card in the app heavier than the four surfaces that rounded themselves early. Each of those four ALSO flipped to this soft pair as part of the same move, with the same one-line reason — so the soft pair is simply what a rounded card wears here, and it now says so once. The other consumers of --ctl-card-shadow (the portal's attention rows, combobox and chip menu; .record-card) all sit inside scopes that already re-declare this token, so in practice this value reaches .card alone. */ --ctl-card-border: var(--ctl-border); /* Two-layer diffusion (§4.4 card anatomy): a tight contact shadow plus a wide ambient one, both off the scheme's own --ctl-shadow so light and dark track without a fork. Promoted from the portal layer at the 2026-07-31 pivot — the lift reads as diffusion, not a hard drop. */ --ctl-card-shadow: 0 1px 3px var(--ctl-shadow), 0 6px 18px var(--ctl-shadow); /* ── Priority = a SEVERITY RAMP, never a brand hue ────────────────────── Priority and workflow status sit in ADJACENT list columns, so they must never share a hue. Priority owns grey → amber → orange → red, in that order, in every one of the six sheets: severity is universal, not brand, so these values do NOT vary by style — only by scheme. This replaces the defect the design review measured: MEDIUM was #0264f4 and ASSIGNED was #006adb, i.e. two different meanings rendered in the same Bootstrap blue one column apart. Blue is now absent from the priority ramp in all three styles. LOW deliberately has no token — .text-risk-low reads --ctl-fg-muted, the "nothing to see here" grey, so the ramp starts from the page's own quiet tone rather than a competing colour. CRITICAL reads --ctl-danger-text for the same reason: escalation should look exactly like every other danger signal in the app. Ratios vs the darkest LIGHT surface any of them lands on (#ecece7, Operator bg-hover): medium 4.90:1, high 4.88:1, critical 5.54:1. */ --ctl-risk-medium: #7d6200; /* amber */ --ctl-risk-high: #9e5100; /* orange */ /* ── Workflow status hues — brand-adjacent, per preset ─────────────────── Sheet 1 (Operator Light) and Industrial Light share this set: both are MDT-green styles, so their status vocabulary is the brand's own olive/slate/teal rather than the retired Bootstrap blue. Refined Blue overrides all three in its own sheet — blue IS its identity, and there the job is to keep status distinguishable from links, not to remove it. Each hue is disjoint from the priority ramp above (no amber, orange, red or grey here), which is the whole point of the separation. Ratios on #ecece7: new 4.75:1, assigned 4.93:1, in-progress 5.21:1. */ --ctl-status-new: #46701c; /* olive — brand green, darkened */ --ctl-status-assigned: #456a7a; /* slate — the #55808f family */ --ctl-status-in-progress: #0e6b7a; /* teal — was orange, which read as priority HIGH one column over */ /* ── Chart ramp (Support\SvgChart) ────────────────────────────────────── The reports charts shipped the Okabe–Ito palette — a fine general-purpose set, but its first hue is a library blue that belongs to no preset, so every chart on /reports read as a foreign object dropped into the app. The ramp is now derived from the ACTIVE preset: slot 1 is the preset's own accent family and the rest are the semantic hues this stylesheet has already contrast-tuned, ordered for maximum hue+lightness separation between neighbours. Refined Blue and both dark schemes override the whole ramp in their own sheets. SvgChart emits these as `style="fill:var(--ctl-chart-N)"` rather than a fill="" presentation attribute, because var() substitution is only reliable in a real style declaration. shortcut: hand-ordered for separation rather than algorithmically CVD-verified — the previous palette was formally colourblind-safe and this one trades that for brand fit. Every chart still labels its series in text (legend + on-mark values), so colour is never the only channel; revisit with a proper CVD simulation if a chart ever loses its labels. */ --ctl-chart-1: var(--mdt-green-600); /* accent family */ --ctl-chart-2: #9e5100; /* orange */ --ctl-chart-3: #0e6b7a; /* teal */ --ctl-chart-4: var(--mdt-red-500); /* red */ --ctl-chart-5: #456a7a; /* slate */ --ctl-chart-6: #7d6200; /* amber */ --ctl-chart-grid: var(--ctl-border); --ctl-chart-label: var(--ctl-fg-muted); --ctl-chart-value: var(--ctl-fg); --ctl-chart-empty: var(--ctl-fg-faint); /* ── Structure scales (§4.4) — style/scheme-invariant, radius included ── */ --ctl-radius: 8px; /* Controls — buttons, inputs, chips, alerts, the rich editor. Style-INVARIANT since the 2026-07-31 portal-first pivot: radius left the style system (UI_STANDARDS §3/§4.4), and the 8px/12px pair the portal proved became the baseline every sheet shares. px-suffixed so Bootstrap's calc() compositions of --bs-border-radius stay valid arithmetic. */ --ctl-radius-lg: 12px; /* Overlay containers — modals, toasts, dropdown and popover shells, floating menus. */ --ctl-radius-full: 999px; /* Cards. Preset-INVARIANT, like -full and -tile below, and for the same reason: a card is the same object whatever style sheet is loaded (developer call, "round the corners on all cards"). Why a token of its own rather than lifting --ctl-radius or -lg off zero. Those two carry other passengers. --ctl-radius drives CONTROLS — buttons, inputs, chips, alerts, the rich editor, the SLA meter tracks — and -lg drives modals, toasts, .ctl-widget and Bootstrap's .rounded-lg/-xl bridge. The ask was the cards, so the card gets the knob and nothing else moves; the sharp presets stay genuinely sharp everywhere a control is. 12px is not a new number. It is what all four surfaces that had already rounded their own cards one at a time were using — the portal (#1465), the ticket detail body, the record-section cards, and, at the launcher tile's 10px, the dashboard home. Those scopes keep their local overrides (higher specificity, still authoritative); this token is what every card that never got a bespoke rule finally reads. Ultimately descended from .login-split-card's 14px, which is where the app first broke the sharp preset on purpose. */ --ctl-radius-card: 12px; /* Launcher tiles (dashboard Shortcuts). The only rounded geometry in the sharp styles, and a deliberate exception: shortcuts are an ambient/hero affordance on the dashboard (§3 "chrome motifs … login, empty states, dashboards"), not a data surface, and the browser-homepage shape they borrow reads as rounded. One value across all three styles — a shortcut card is the same object whatever the style sheet (stakeholder call). */ --ctl-radius-tile: 10px; /* Spacing — 8pt ramp */ --ctl-sp-1: 4px; --ctl-sp-2: 8px; --ctl-sp-3: 12px; --ctl-sp-4: 16px; --ctl-sp-5: 24px; --ctl-sp-6: 32px; --ctl-sp-7: 48px; --ctl-sp-8: 64px; --ctl-sp-9: 96px; --ctl-sp-10: 128px; /* Z-index scale — no literal z-index elsewhere (existing literals migrate in Phase B component rebuilds) */ --ctl-z-sticky: 100; --ctl-z-sidebar: 200; --ctl-z-panel: 300; --ctl-z-dropdown: 500; --ctl-z-modal-backdrop: 900; --ctl-z-modal: 1000; --ctl-z-toast: 1100; --ctl-z-tooltip: 1200; /* Motion */ --ctl-dur-fast: 120ms; --ctl-dur: 180ms; --ctl-dur-slow: 300ms; /* Focus ring — accent at 35% alpha, box-shadow form (§4.4) */ --ctl-focus-ring: 0 0 0 3px rgba(var(--ctl-accent-rgb), 0.35); /* Layout */ --ctl-sidebar-width: 230px; /* Second nav panel (single-layer drilldown, UI_STANDARDS §7) */ --ctl-sidebar-panel-width: 260px; /* Content clamps — settings/form/reading pages; data surfaces run full width */ --ctl-content-max: 68rem; --ctl-content-max-narrow: 46rem; --ctl-content-max-wide: 100rem; --ctl-sidebar-collapsed: 52px; /* The chrome header band: the height every pane/panel header stands at, so adjacent panes read as one system rather than three screens stitched together. Already the shell's own rhythm — the nav rail header and the nav second-panel header both stood at this literal before it had a name. Headers consume it as a min-height and centre their contents in it; a header must never take its height from whichever control inside it happens to be tallest, which is precisely how /chat ended up drawing the same band at 58.2px, 52px and 41.8px across its three panes. */ --ctl-pane-head-h: 3.25rem; /* ── Typography (§2) ── */ --ctl-font-display: 'Oswald', 'Arial Narrow', sans-serif; /* Body face: system stack for UI/table legibility (stakeholder test 2026-07-20 — Lato read poorly at data densities). Oswald remains the display face; Lato stays available via --ctl-font-brand for brand-voice surfaces if wanted. */ --ctl-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --ctl-font-brand: 'Lato', 'Helvetica Neue', Arial, sans-serif; /* Mono face — the fourth font token (#2013). §2 named three and the app drew code FIVE ways: an undefined `var(--ctl-font-mono, …)` on the portal kbd (an author reached for this token before it existed and it silently rendered its fallback), a bare `monospace` on .api-method, Bootstrap's compiled --bs-font-monospace on .trace-path, a component-local --k-mono in the KB article system, and 'Courier New' / 'SF Mono' literals inline in three templates. Same content, different character shapes depending on which call site drew it. The stack is --k-mono's, the best-researched of the five: ui-monospace first, so each OS hands over its own system mono (SF Mono on Apple, Cascadia on Windows) instead of us guessing at its name; then the named modern faces for the developers who install them; then Menlo/Consolas as the pre-ui-monospace floor; then the generic. Quoting normalised to the single quotes its three sibling font tokens use. Reaching the whole app takes TWO declarations, not one: this token, and the --bs-font-monospace bridge in Layer 3. Bootstrap's reboot styles `code, kbd, pre, samp` and its `.font-monospace` utility from that variable, so the bridge is what carries the token to every in a rendered body (§6.5), to .thread-md-code / .thread-md-inline-code — a 
 and a , which is why neither needs a rule of its own — and to
       the ~40 templates that already say `class="… font-monospace"`. */
    --ctl-font-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    /* 7-step app type scale (§2.1). --ctl-fs-body is the density-varying base
       UI size (§5: 15px comfortable / 13.5px compact). */
    --ctl-fs-display-lg: 40px;
    --ctl-fs-display-md: 28px;
    --ctl-fs-display-sm: 22px;
    --ctl-fs-body-lg: 16px;
    --ctl-fs-body: 15px;
    --ctl-fs-body-sm: 12.5px;
    --ctl-fs-caption: 11px;
    --ctl-lh-tight: 1.02;
    --ctl-lh-snug: 1.15;
    --ctl-lh-normal: 1.5;
    --ctl-lh-relaxed: 1.7;

    /* ── Density (§5) — comfortable defaults; compact overrides below ── */
    --ctl-control-pad-y: 0.475rem;  /* ≈40px control at 15px/1.5 + 1px borders */
    --ctl-control-pad-x: 0.625rem;
    --ctl-fs-label: 13px;
    --ctl-table-cell-pad-y: 10px;
    --ctl-section-pad: var(--ctl-sp-5);
}

/* ═══ Sheet 2/6 — Operator Dark (keys on scheme alone so pages that set
       only data-bs-theme="dark" still theme correctly) ═══ */
html[data-bs-theme="dark"] {
    /* ── Dark re-grounding (Operator) ───────────────────────────────────────
       The old sheet grounded at #060606 with pure-white body text: cards lifted
       by 15 units of luminance (invisible), shadows had nothing to fall on, and
       #ffffff on near-black glared. Operator's documented temperature is
       "warm-tinted near-black" (UI_STANDARDS §3), so the whole ramp moves up
       into the #16–#22 class while STAYING warm — the green channel leads the
       blue in every surface value below, which is what keeps this sheet
       recognisably Operator and not Industrial.

       Elevation is now a real signal: bg #161613 → bg-alt #1c1c19 → elevated
       #222220. Body text steps off pure white to #e8e8e0 (12.94:1 on the
       lightest surface) and the muted/subtle labels are warm greys, not
       neutral ones. */
    --ctl-bg: #161613;
    --ctl-bg-alt: #1c1c19;
    --ctl-bg-elevated: #222220;
    --ctl-bg-inset: #121210;
    --ctl-bg-inverse: #f6f6f4;
    --ctl-bg-hover: #2a2a26;
    --ctl-bg-hover-rgb: 42, 42, 38;
    --ctl-fg: #e8e8e0;
    /* Ratios below are all measured against #222220, the LIGHTEST surface in
       this sheet and therefore the worst case for light-on-dark text. */
    --ctl-fg-muted: #a5a49b;  /* warm grey — 6.36:1 */
    --ctl-fg-subtle: #97958b; /* warm grey — 4.79:1 on a HOVERED row, the lightest surface here */
    --ctl-fg-faint: #6d6b63;  /* decorative/disabled only — not AA by design */
    --ctl-border: #34332d;
    --ctl-border-strong: #45443c;
    --ctl-accent-hover: var(--mdt-green-400);
    --ctl-accent-press: var(--mdt-green-600);
    --ctl-accent-text: var(--mdt-green-400);
    --ctl-link: var(--mdt-green-400);
    --ctl-link-rgb: 159, 188, 80;
    --ctl-link-hover: #b4cf6b;
    --ctl-link-hover-rgb: 180, 207, 107;
    --ctl-fg-rgb: 232, 232, 224;
    --ctl-bg-rgb: 22, 22, 19;
    --ctl-bg-alt-rgb: 28, 28, 25;
    --ctl-fg-muted-rgb: 165, 164, 155;
    /* Semantic colours re-tuned for the lifted ground. red-400 (#e05a55) was
       5.76:1 on #060606 but only 4.37:1 on #222220 — it had to brighten to stay
       compliant, not merely to look right. The amber brightens for the same
       reason (and because a dark-tuned amber is what makes MEDIUM priority read
       as caution rather than mud). The washes move up with the surfaces so a
       danger/warning callout still reads as a tinted panel, not a black hole. */
    --ctl-danger-text: #e8706b;  /* 5.28:1 on #222220 */
    --ctl-danger-bg: #3b1a17;
    --ctl-warning-text: #e0b64a; /* 8.32:1 */
    --ctl-warning-bg: #3a2c0d;
    --ctl-success-text: var(--mdt-green-400); /* 7.42:1 */
    --ctl-success-bg: #232d15;
    --ctl-info: #a5a49b;
    --ctl-info-text: #a5a49b;
    --ctl-info-bg: #26251f;
    --ctl-info-bg-rgb: 38, 37, 31;
    --ctl-info-rgb: 165, 164, 155;
    /* The rail lifts ABOVE the page in the dark sheets rather than sitting in
       it — the one thing that changes between an Operator light rail and an
       Operator dark one. The ink ramp is unchanged: the rail is dark either way,
       so it wears the same ink either way. */
    --ctl-nav-bg: #2c2c28;
    /* Shadows step up with the ground: a surface at #222220 needs a heavier
       shadow than one at #151515 for the same perceived lift. */
    --ctl-shadow: rgba(0, 0, 0, 0.5);
    --ctl-shadow-hover: rgba(0, 0, 0, 0.62);
    /* Priority ramp — same grey/amber/orange/red order as light, brightened for
       the dark ground. MEDIUM is amber here too: blue is gone from priority in
       every sheet. Ratios on #222220: medium 8.32:1, high 7.04:1. */
    --ctl-risk-medium: #e0b64a;
    --ctl-risk-high: #fb923c;
    /* Status — the same olive / slate / teal vocabulary as the light sheet,
       lifted for the dark ground and desaturated so the slate reads as slate
       rather than as a link. Ratios on #222220: 8.02 / 7.07 / 7.97:1. */
    --ctl-status-new: #b0c063;
    --ctl-status-assigned: #8fb2c2;
    --ctl-status-in-progress: #5cc6d6;
    /* Chart ramp lifted for the dark ground — same hue order as light. */
    --ctl-chart-1: var(--mdt-green-400);
    --ctl-chart-2: #fb923c;
    --ctl-chart-3: #5cc6d6;
    --ctl-chart-4: #e8706b;
    --ctl-chart-5: #8fb2c2;
    --ctl-chart-6: #e0b64a;
}

/* ═══ Sheet 3/6 — Refined Blue Light ═══ */
html[data-style="refined"] {
    --ctl-bg: #eef2f7;
    --ctl-bg-alt: var(--mdt-white);
    --ctl-bg-elevated: var(--mdt-white);
    --ctl-bg-inset: #f5f8fb;
    --ctl-bg-inverse: #0b1a2e;
    --ctl-bg-hover: #e2e9f2;
    --ctl-bg-hover-rgb: 226, 233, 242;
    --ctl-fg: #0b1a2e;
    --ctl-fg-muted: #55677c; /* 4.75:1 on this sheet bg-hover */
    --ctl-fg-subtle: #55677c; /* 4.70:1 on this sheet bg-hover, the darkest light surface it lands on */
    --ctl-fg-faint: #9fb0c2;
    --ctl-border: #dbe2ea;
    --ctl-border-strong: #d3dde8;
    --ctl-accent: var(--mdt-blue-500);
    --ctl-accent-hover: var(--mdt-blue-600);
    --ctl-accent-press: var(--mdt-blue-700);
    --ctl-accent-fg: #ffffff; /* §4.5: white-on-blue passes 4.55:1 */
    /* accent-text decoupled from the fill (same pattern as the green styles):
       blue-500 reads 4.05:1 on the tinted page bg — blue-600 clears 4.5 on
       every Refined Light surface (Phase F certification). */
    --ctl-accent-text: var(--mdt-blue-600);
    --ctl-accent-rgb: 47, 111, 237;
    --ctl-link: var(--mdt-blue-600);
    --ctl-link-rgb: 34, 88, 201;
    --ctl-link-hover: var(--mdt-blue-700);
    --ctl-link-hover-rgb: 27, 70, 160;
    --ctl-fg-rgb: 11, 26, 46;
    --ctl-bg-rgb: 238, 242, 247;
    --ctl-bg-alt-rgb: 255, 255, 255;
    --ctl-fg-muted-rgb: 90, 107, 128;
    /* --ctl-radius / --ctl-radius-lg used to be restated here (3px/6px) when
       radius was a style differentiator. The 2026-07-31 portal-first pivot
       made geometry style-invariant, so this sheet inherits the :root pair
       (8px/12px) like every other — one statement of the rule. */
    /* --ctl-card-border / --ctl-card-shadow used to be restated here, because
       Refined was the one preset with a real card radius and so the one preset
       that did not want the square-card compensation. Every preset has a real
       card radius now and the soft pair IS the :root default, so this sheet's
       copy was a verbatim duplicate and is gone — one statement of the rule.
       Both still resolve per-sheet: they are declared as var(--ctl-border) /
       var(--ctl-shadow), which cascade to Refined's own values here. */
    /* ── Status hues, Refined Blue ───────────────────────────────────────────
       Ryan's constraint outranks the mock here: blue IS this preset's identity,
       so its statuses stay in the blue family instead of adopting the green
       styles' olive/slate. What the separation rule still demands is that they
       be tellable apart from (a) the priority ramp — satisfied, that ramp is
       grey/amber/orange/red in every sheet — and (b) a plain link, which is
       --ctl-link #2258c9. Hence ASSIGNED is a much deeper steel blue and
       IN_PROGRESS moves to indigo: three distinct blues, none of which is the
       link's blue. Ratios on #eef2f7 (this sheet's page ground, the darkest
       light surface in the system): 5.18 / 7.09 / 6.28:1. */
    --ctl-status-new: #0d6f80;         /* teal   */
    --ctl-status-assigned: #00538f;    /* steel  */
    --ctl-status-in-progress: #4a4fa8; /* indigo */
    /* Nav rail — this style's own dark-scheme elevated surface, and its
       dark-scheme ink cooled to match. Refined's rail is navy in both schemes;
       that is the whole point of theming it rather than sharing one grey. */
    --ctl-nav-bg: #1a2c42;
    --ctl-nav-fg: #e6eef7;
    --ctl-nav-fg-muted: #aec4d9;
    --ctl-nav-fg-subtle: #9db4cb;
    --ctl-nav-fg-rgb: 230, 238, 247;
    /* blue-500 is 2.88:1 on this style's own navy rail — under the 3:1 that
       binds a non-text indicator. The active-page bar steps up one rung; the
       accent FILL everywhere else is untouched. */
    --ctl-nav-accent: var(--mdt-blue-400);
    /* Chart ramp leads with THIS preset's accent — blue, not green. */
    --ctl-chart-1: var(--mdt-blue-500);
    --ctl-chart-2: #9e5100;
    --ctl-chart-3: #0d6f80;
    --ctl-chart-4: var(--mdt-red-500);
    --ctl-chart-5: #4a4fa8;
    --ctl-chart-6: #7d6200;
}

/* ═══ Sheet 4/6 — Refined Blue Dark ═══ */
html[data-style="refined"][data-bs-theme="dark"] {
    /* Re-grounded like the other two dark sheets, but gently: Refined's cool
       navy already separated its surfaces better than the neutral styles did,
       so this is a lift (bg #0a1626 → #0e1c2f, elevated #0f2138 → #1a2c42), not
       a rebuild. The navy tint is preserved in every value — blue leads red in
       all of them — because "cool, navy-tinted neutrals" is this preset's
       documented temperature. Ratios vs #1a2c42, the lightest surface here. */
    --ctl-bg: #0e1c2f;
    --ctl-bg-alt: #12233a;
    --ctl-bg-elevated: #1a2c42;
    --ctl-bg-inset: #0c1a2b;
    --ctl-bg-inverse: #eef2f7;
    --ctl-bg-hover: #22374f;
    --ctl-bg-hover-rgb: 34, 55, 79;
    --ctl-fg: #e6eef7;        /* 12.10:1 */
    --ctl-fg-muted: #9fb8d2;  /* 6.92:1  */
    --ctl-fg-subtle: #8ba6c4; /* 5.63:1  */
    --ctl-fg-faint: #61809f;  /* decorative only */
    --ctl-border: #26405c;
    --ctl-border-strong: #32506f;
    --ctl-accent-hover: var(--mdt-blue-400);
    --ctl-accent-press: var(--mdt-blue-300);
    /* blue-400 was 4.15:1 on the lifted #1a2c42 — under the §4.5 rule. The
       interactive blue steps up one rung to blue-300 (5.22:1) and hover to
       blue-200. --ctl-accent (the FILL) is untouched at #2f6fed, so the accent
       still reads identically in both modes. */
    --ctl-accent-text: var(--mdt-blue-300);
    --ctl-link: var(--mdt-blue-300);
    --ctl-link-rgb: 120, 165, 255;
    --ctl-link-hover: var(--mdt-blue-200);
    --ctl-link-hover-rgb: 147, 184, 255;
    --ctl-fg-rgb: 230, 238, 247;
    --ctl-bg-rgb: 14, 28, 47;
    --ctl-bg-alt-rgb: 18, 35, 58;
    --ctl-fg-muted-rgb: 159, 184, 210;
    /* Washes re-tinted onto the navy ground (the warm-neutral ones inherited
       from the Operator dark sheet looked like dirt on this surface). */
    --ctl-danger-bg: #3a1a20;
    --ctl-warning-bg: #33290f;
    --ctl-success-bg: #1e2c1a;
    --ctl-info-bg: #1c2d40;
    --ctl-info-bg-rgb: 28, 45, 64;
    --ctl-info: #9fb8d2;
    --ctl-info-text: #9fb8d2;
    --ctl-info-rgb: 159, 184, 210;
    /* Status stays blue-family in dark too — teal / desaturated steel / violet.
       ASSIGNED is deliberately DESATURATED rather than a brighter blue: the
       obvious dark-mode choice (#6aa9ff) landed a hair from --ctl-link
       (#6a9bff), which is precisely the status-reads-as-a-link confusion this
       PR exists to remove. Ratios on #1a2c42: 6.82 / 6.51 / 5.49:1. */
    --ctl-status-new: #35c4d9;
    /* Refined dark re-checks danger + ASSIGNED against its own bg-hover
       (#22374f), which is lighter than bg-elevated and is the real worst case
       for a tinted row: the inherited #e8706b managed only 4.03:1 there.
       ASSIGNED stays a full step off --ctl-link (blue-300) while clearing 4.5. */
    --ctl-danger-text: #f08882; /* 4.95:1 on #22374f */
    --ctl-status-assigned: #6ea9e8; /* 4.92:1 */
    --ctl-status-in-progress: #a394f7;
    --ctl-chart-1: var(--mdt-blue-300);
    --ctl-chart-2: #fb923c;
    --ctl-chart-3: #35c4d9;
    --ctl-chart-4: #e8706b;
    --ctl-chart-5: #a394f7;
    --ctl-chart-6: #e0b64a;
    /* Rail lifts above this sheet's navy ground (see the :root block). */
    --ctl-nav-bg: #1f3247;
}

/* ═══ Sheet 5/6 — Industrial Light ═══ */
html[data-style="industrial"] {
    --ctl-bg: var(--mdt-white);
    --ctl-bg-alt: var(--mdt-grey-100);
    --ctl-bg-elevated: var(--mdt-white);
    --ctl-bg-inset: var(--mdt-grey-050);
    --ctl-bg-inverse: #111111;
    --ctl-bg-hover: #eeeeee;
    --ctl-bg-hover-rgb: 238, 238, 238;
    /* The one sheet where --ctl-bg IS --ctl-bg-elevated (Industrial Light
       grounds on pure white on purpose), so a settled row sinking to the ground
       would be no step at all. It takes the alt surface instead — the same
       quiet grey this sheet already uses for table headers and status bars.
       Industrial DARK inherits this alias and resolves it to its own #1a1a1a,
       which sits below its elevated #212121, so the step still recedes. */
    --ctl-row-settled-bg: var(--ctl-bg-alt);
    --ctl-fg: #111111;
    --ctl-fg-muted: var(--mdt-grey-600);
    --ctl-fg-subtle: #686868; /* 4.70:1 on this sheet bg-hover, the darkest light surface it lands on */
    --ctl-fg-faint: var(--mdt-grey-400);
    --ctl-border: var(--mdt-grey-200);
    --ctl-border-strong: var(--mdt-grey-300);
    --ctl-fg-rgb: 17, 17, 17;
    --ctl-bg-rgb: 255, 255, 255;
    --ctl-bg-alt-rgb: 245, 245, 245;
    /* Nav rail — this style's own dark-scheme elevated surface and ink, and
       PURE NEUTRAL like everything else Industrial owns (R=G=B), which is what
       tells an Industrial rail apart from an Operator one at the same
       lightness. */
    --ctl-nav-bg: #212121;
    --ctl-nav-fg: #e9e9e9;
    --ctl-nav-fg-muted: #b4b4b4;
    --ctl-nav-fg-subtle: #a2a2a2;
    --ctl-nav-fg-rgb: 233, 233, 233;
}

/* ═══ Sheet 6/6 — Industrial Dark ═══ */
html[data-style="industrial"][data-bs-theme="dark"] {
    /* Re-grounded like the other two, but in Industrial's own temperature.
       This sheet ground at absolute #000000 with pure-white text — the most
       extreme case of the problem: zero elevation headroom (a card could only
       ever be lighter, never read as lifted) and shadows that were literally
       invisible because nothing is darker than black.

       Industrial's documented differentiator is PURE NEUTRAL neutrals
       (UI_STANDARDS §3), so unlike Operator every value here has R=G=B. That,
       plus the sharp radius and the Oswald caps, is what carries the editorial
       identity — not the last twenty units of black. Ratios vs #212121, the
       lightest surface in this sheet. */
    --ctl-bg: #141414;
    --ctl-bg-alt: #1a1a1a;
    --ctl-bg-elevated: #212121;
    --ctl-bg-inset: #101010;
    --ctl-bg-inverse: var(--mdt-grey-100);
    --ctl-bg-hover: #292929;
    --ctl-bg-hover-rgb: 41, 41, 41;
    --ctl-fg: #e9e9e9;        /* 13.26:1 */
    --ctl-fg-muted: #a3a3a3;  /* 6.38:1  */
    --ctl-fg-subtle: #949494; /* 4.80:1 on a hovered row */
    --ctl-fg-faint: #6b6b6b;  /* decorative only */
    --ctl-border: #333333;
    --ctl-border-strong: #444444;
    /* accent-text no longer forks to green-500 here: on a lifted ground the
       green-400 the other dark sheets use reads better (7.42:1 vs 5.56:1) and
       one fewer divergence means the accent reads identically across modes. */
    --ctl-fg-rgb: 233, 233, 233;
    --ctl-bg-rgb: 20, 20, 20;
    --ctl-bg-alt-rgb: 26, 26, 26;
    /* Neutral washes — the Operator dark sheet's warm ones carry a green cast
       that is exactly what this preset must not have. */
    --ctl-danger-bg: #3a1614;
    --ctl-warning-bg: #33270a;
    --ctl-success-bg: #1f2a12;
    --ctl-info-bg: #242424;
    --ctl-info-bg-rgb: 36, 36, 36;
    --ctl-info: #a3a3a3;
    --ctl-info-text: #a3a3a3;
    --ctl-info-rgb: 163, 163, 163;
    /* Rail lifts above this sheet's ground (see the :root block). */
    --ctl-nav-bg: #2b2b2b;
    --ctl-fg-muted-rgb: 163, 163, 163;
}

/* ═══ Density — compact (§5). Comfortable defaults live in :root. ═══ */
html[data-density="compact"] {
    --ctl-fs-body: 13.5px;
    --ctl-control-pad-y: 0.25rem;   /* ≈30px control — today's ultra-compact */
    --ctl-control-pad-x: 0.5rem;
    --ctl-fs-label: 12px;
    --ctl-table-cell-pad-y: 4px;
    --ctl-section-pad: var(--ctl-sp-3);
}

/* ═══ Layer 3 — Bootstrap 5.3 bridge ═══
   One block, resolved per-element against the cascaded --ctl values, so all
   six sheets flow through automatically. The html[data-bs-theme="dark"]
   selector is included to out-rank Bootstrap's own [data-bs-theme=dark]
   variable block regardless of stylesheet order. */
:root,
html[data-bs-theme="dark"] {
    --bs-body-bg: var(--ctl-bg);
    --bs-body-bg-rgb: var(--ctl-bg-rgb);
    --bs-body-color: var(--ctl-fg);
    --bs-body-color-rgb: var(--ctl-fg-rgb);
    --bs-body-font-family: var(--ctl-font-body);
    /* The single highest-leverage line for the mono face (#2013): Bootstrap's
       reboot sets `code, kbd, pre, samp { font-family: var(--bs-font-monospace) }`
       and compiles `.font-monospace` from the same variable, so unbridged it was
       shipping SFMono-Regular/Menlo/Monaco/Consolas/"Liberation Mono"/"Courier New"
       to every  in the app AND to every .font-monospace call site. */
    --bs-font-monospace: var(--ctl-font-mono);
    --bs-body-font-size: var(--ctl-fs-body);
    --bs-emphasis-color: var(--ctl-fg);
    --bs-emphasis-color-rgb: var(--ctl-fg-rgb);
    --bs-heading-color: var(--ctl-fg);
    --bs-secondary-color: var(--ctl-fg-muted);
    --bs-secondary-bg: var(--ctl-bg-alt);
    --bs-tertiary-color: var(--ctl-fg-subtle);
    --bs-tertiary-bg: var(--ctl-bg-alt);
    --bs-border-color: var(--ctl-border);
    --bs-border-radius: var(--ctl-radius);
    --bs-border-radius-sm: var(--ctl-radius);
    --bs-border-radius-lg: var(--ctl-radius-lg);
    --bs-border-radius-xl: var(--ctl-radius-lg);
    --bs-link-color: var(--ctl-link);
    --bs-link-color-rgb: var(--ctl-link-rgb);
    --bs-link-hover-color: var(--ctl-link-hover);
    --bs-link-hover-color-rgb: var(--ctl-link-hover-rgb);
    --bs-code-color: var(--ctl-accent-text);
    --bs-focus-ring-color: rgba(var(--ctl-accent-rgb), 0.35);
    /* Theme colors + utility triplets (.bg-*, .text-*, rgba washes) */
    --bs-primary: var(--ctl-accent);
    --bs-primary-rgb: var(--ctl-accent-rgb);
    /* secondary — the third head of the same hydra as dark (#1878) and light
       (#1902), and the only one that was firing on real screens. This triplet
       was bridged to --ctl-fg-muted-rgb, an INK token, and Bootstrap's
       `.bg-secondary` composes it as a GROUND
       (`background-color: rgba(var(--bs-secondary-rgb), …)`). So all 51
       `.bg-secondary` badges plus the four `.text-bg-secondary` sites painted
       the sheet's muted TEXT colour as a chip, under Bootstrap's compiled
       `--bs-badge-color:#fff` / `.text-bg-secondary{color:#fff}`. In the light
       sheets muted ink is #5c5c5c-ish and white on it clears AA (5.5–6.7:1),
       which is exactly why it survived: the failure was dark-mode-only, where
       muted ink is a PALE grey (#a5a49b / #9fb8d2 / #a3a3a3) and white on it
       measured 2.50 / 2.05 / 2.52:1. It read as "that badge looks washed out",
       not as a theming bug.

       The family now means what those 55 call sites actually want: a quiet
       neutral CHIP. Its ground is --ctl-bg-hover, the same surface
       --bs-secondary-bg-subtle already uses (#1879) — the one neutral that
       steps away from the card in both directions, so the chip is visible on
       an elevated surface in every sheet — and its ink is the sheet's own
       --ctl-fg, certified against that surface by §4.2.1. Ground and ink ship
       together in the rule below the bridge, the way #1901's .ctl-bg-inverse
       does, because a bridged ground under Bootstrap's literal white ink is
       how this broke in the first place. Every call site is untouched; the
       badges go from a mid-grey slab to the app's quiet-chip idiom and from
       ~2.0–2.5:1 to 10.4–16.3:1.

       `.text-secondary` reads this same triplet as ink and is therefore now
       banned, exactly as `.text-light` is — the surface-as-ink half of the
       split. Bootstrap 5.3 ships the right utility for that intent already:
       `.text-body-secondary`, which reads --bs-secondary-color, bridged to
       --ctl-fg-muted three lines above. The four call sites moved onto it.

       Only the triplet is declared, as with dark and light: nothing in
       Bootstrap or in this file reads a bare var(--bs-secondary), and a
       leftover `--bs-secondary: ` beside a surface triplet is precisely
       the kind of half-bridged family this whole block exists to retire. */
    --bs-secondary-rgb: var(--ctl-bg-hover-rgb);
    --bs-success: var(--ctl-success);
    --bs-success-rgb: var(--ctl-success-rgb);
    --bs-danger: var(--ctl-danger);
    --bs-danger-rgb: var(--ctl-danger-rgb);
    --bs-warning: var(--ctl-warning);
    --bs-warning-rgb: var(--ctl-warning-rgb);
    /* info — the fourth head of the same hydra as dark (#1878), light (#1902)
       and secondary (#1926), and the one the position guard those PRs built
       could not see. --bs-info-rgb was bridged to --ctl-info-rgb, which LOOKS
       like a solid (it is named after a status family, beside success/danger/
       warning) and IS, by value, the sheet's muted ink: #5c5c5c in the three
       light sheets, #a5a49b / #9fb8d2 / #a3a3a3 in the three dark ones — the
       same numbers as --ctl-fg-muted. So the app's 16 `.bg-info` badges painted
       muted TEXT colour as a chip under Bootstrap's compiled
       `--bs-badge-color:#fff`, clearing AA in light (6.69:1) and failing in all
       three dark sheets at 2.50 / 2.05 / 2.52:1 — to two decimals, secondary's
       numbers again. Dark-mode-only, so it read as "washed out".

       The family now means the INFORMATIONAL WASH it always was everywhere
       else: --ctl-info-bg is the ground .bg-info-subtle, .alert-info,
       .ctl-widget-rag--info and .api-method-post have used since the token
       system landed, and --ctl-info-text is the ink already certified against
       it (5.92–6.85:1 in the six sheets). So `.bg-info` and `.bg-info-subtle`
       converge, which is the honest outcome: "info" in this system has never
       been a solid, and the 16 call sites — INFO log levels, RUNNING workflow
       states, "Delegated", "Custom", "Informational" — are all informational
       chips. Ground and ink ship together in the rule below the bridge, the way
       #1926's .bg-secondary pair does, because a bridged ground under
       Bootstrap's literal white ink is exactly how this broke. Not one of the
       16 is edited.

       `.text-info` reads the same triplet as ink and so flips to the invisible
       half, exactly as `.text-secondary` did: its 7 call sites move to
       Bootstrap's own `.text-info-emphasis`, which reads
       --bs-info-text-emphasis → --ctl-info-text — the identical value
       `.text-info` resolves to today, so that migration is a rename with no
       visual change at all. `.border-info` follows (2 sites, both the KB
       AI-answer card) onto .border-primary-subtle, the accent hairline
       ticket-copilot.js already uses for "this came from the assistant".

       Only the triplet is declared, as with dark, light and secondary: nothing
       in Bootstrap or in this file reads a bare var(--bs-info), and a leftover
       `--bs-info: ` beside a surface triplet is precisely the kind of
       half-bridged family this block exists to retire. */
    --bs-info-rgb: var(--ctl-info-bg-rgb);
    --bs-light-rgb: var(--ctl-bg-alt-rgb); /* .bg-light → bg-alt in every sheet */
    /* dark — the last family still on Bootstrap's compiled literal, and the one
       that cost the most. `.text-dark` reads THIS triplet (the utility is
       `color: rgba(var(--bs-dark-rgb), …)`), so all 61 call sites in the app
       resolved to Bootstrap's #212529 in every sheet. The common idiom is
       `.badge.bg-light.text-dark` — and .bg-light IS bridged, to --ctl-bg-alt —
       so in the three DARK sheets those badges painted near-black ink on a
       near-black ground and simply disappeared. It read as "a badge that isn't
       there" rather than as a theming bug, which is why it survived this long.
       The author's intent at every one of those sites is plainly "ink on the
       alt surface", i.e. --ctl-fg, so that is what the family now means.

       The same triplet also drives .bg-dark, which wants the opposite thing —
       which is exactly why the family was left alone until now. Resolved by
       making the intent explicit rather than by splitting the token: a
       deliberate dark slab is not "the dark colour", it is the INVERSE SURFACE,
       and that has its own token (--ctl-bg-inverse, layer 2) and its own
       utility below this block. The nine api/docs.php code blocks moved onto
       it, so nothing in the app asks .bg-dark for a ground any more, and
       CssTokenContractTest keeps it that way. Only the triplet is declared, as
       with light: Bootstrap's compiled utilities read --bs-*-rgb, and nothing
       in Bootstrap or in this file ever reads a bare var(--bs-dark). */
    --bs-dark-rgb: var(--ctl-fg-rgb);
    /* Subtle system (alerts, .text-bg-*, list-group variants) */
    --bs-success-bg-subtle: var(--ctl-success-bg);
    --bs-success-text-emphasis: var(--ctl-success-text);
    --bs-success-border-subtle: var(--ctl-success-bg);
    --bs-danger-bg-subtle: var(--ctl-danger-bg);
    --bs-danger-text-emphasis: var(--ctl-danger-text);
    --bs-danger-border-subtle: var(--ctl-danger-bg);
    --bs-warning-bg-subtle: var(--ctl-warning-bg);
    --bs-warning-text-emphasis: var(--ctl-warning-text);
    --bs-warning-border-subtle: var(--ctl-warning-bg);
    --bs-info-bg-subtle: var(--ctl-info-bg);
    --bs-info-text-emphasis: var(--ctl-info-text);
    --bs-info-border-subtle: var(--ctl-info-bg);
    /* The three NON-status subtle families. The block above bridged only the
       four status families, so every .bg-primary-subtle / .border-primary-subtle
       / .text-primary-emphasis, every .alert-light, and every
       .bg-secondary-subtle badge in the app kept Bootstrap's COMPILED defaults —
       stock blue #cfe2ff/#9ec5fe in light, #031633/#084298 in dark, the
       blue-grey slate #343a40 for alert-light in dark, #e2e3e5/#212529 for the
       secondary badges. Stock blue is not the accent in any of the six sheets
       (two of three presets are MDT green), and none of those literals move with
       the scheme, which is how the ticket Summarize panel — built entirely from
       three of these utilities — rendered as a foreign blue patch on every
       preset and a slate patch in dark. One bridge, every caller.

       primary: the accent's own soft wash, derived the way .composer-ai-seg
       derives its segment fill — color-mix INTO --ctl-bg-elevated rather than
       rgba() over whatever happens to be behind. Mixing toward the surface
       token yields an OPAQUE value that inverts on its own (pale on the three
       light sheets, dark on the three dark ones) from one declaration, so a
       primary-subtle wash reads identically on a card, a page ground or a
       hovered row — the same argument §6.3 makes for the bubble tint, and the
       reason there is no --ctl-accent-bg to alias (the *-bg washes exist only
       for the status families, and "success green" is not the accent in
       Refined Blue). Ink is the certified --ctl-accent-text (§4.5), never the
       raw accent.
       light: alerts in the "quiet notice" voice — bg-alt surface, plain border
       hairline, normal fg ink. All three are §4.2-certified pairs already.
       secondary: neutral chips and badges. Their ground is bg-HOVER, not
       bg-alt: bg-alt is #ffffff in three of the six sheets and these badges sit
       on cards, so an alt-surface chip would be an invisible chip. bg-hover is
       the one neutral that steps AWAY from the surface in both directions —
       darker on the light sheets, lighter on the dark ones — and §4.2.1 already
       certifies the text ramp against it as a text surface. */
    --bs-primary-bg-subtle: color-mix(in srgb, var(--ctl-accent) 12%, var(--ctl-bg-elevated));
    --bs-primary-text-emphasis: var(--ctl-accent-text);
    --bs-primary-border-subtle: color-mix(in srgb, var(--ctl-accent) 45%, var(--ctl-bg-elevated));
    --bs-light-bg-subtle: var(--ctl-bg-alt);
    --bs-light-text-emphasis: var(--ctl-fg);
    --bs-light-border-subtle: var(--ctl-border);
    --bs-secondary-bg-subtle: var(--ctl-bg-hover);
    --bs-secondary-text-emphasis: var(--ctl-fg);
    --bs-secondary-border-subtle: var(--ctl-border);
}

/* The inverse surface, as a utility (UI_STANDARDS §4.1 layer 2's
   --ctl-bg-inverse, which had defined itself in all six sheets since the token
   system landed and never had a single consumer). This is the sanctioned way
   to say "a slab that deliberately opposes the page" — the API-docs code
   blocks, and anything after them that wants the same voice.

   It sets BOTH halves, like Bootstrap's own .text-bg-* pairs do, because the
   ground alone is a trap: paint --ctl-bg-inverse and inherit the sheet's ink
   and you have written near-black on near-black. Ground and ink ship together
   or not at all. No !important — the Bootstrap utility it replaces needed one
   to beat component CSS; this sits on plain 
, and the rule that would
   otherwise reach the nested  (Bootstrap's `pre code{color:inherit}`)
   walks the pair down for us. */
.ctl-bg-inverse {
    background-color: var(--ctl-bg-inverse);
    color: var(--ctl-fg-inverse);
}

/* The ink half of the secondary chip (#1926). Re-pointing --bs-secondary-rgb
   at a surface is only half a fix: Bootstrap hard-codes the OTHER half as
   compiled literals — `.badge{--bs-badge-color:#fff}` and
   `.text-bg-secondary{color:#fff!important}` — so a bridged ground under an
   un-bridged white would have swapped an unreadable dark-mode chip for an
   unreadable light-mode one. Ground and ink ship together, the same rule
   .ctl-bg-inverse above follows.

   Two declarations rather than one, and deliberately narrow:
     · .bg-secondary overrides the BADGE VARIABLE, not `color`. A bare
       .bg-secondary element already inherits the sheet's --ctl-fg, which is
       the certified ink for this ground, so `color` there would be noise —
       and worse, a `color: … !important` on .bg-secondary would out-rank a
       deliberate .text-white / .text-dark sitting on the same element (equal
       specificity, and style.css loads after Bootstrap).
     · .text-bg-secondary is the pair utility, and its white is `!important`.
       Beating an !important needs an !important; this one is Bootstrap's
       fault, not ours.
   Both resolve to --ctl-fg, certified on --ctl-bg-hover in every sheet by
   §4.2.1 and measured on all six by CssTokenContractTest. */
.bg-secondary {
    --bs-badge-color: var(--ctl-fg);
}
.text-bg-secondary {
    color: var(--ctl-fg) !important;
}

/* The ink half of the info chip (#2003), same shape and same reasoning as the
   secondary pair above: a ground bridged onto a wash, under Bootstrap's
   compiled `--bs-badge-color:#fff`, would have swapped an unreadable dark-mode
   badge for an unreadable light-mode one.

   The ink is --ctl-info-text rather than --ctl-fg because the informational
   voice is the point — this family is a quiet tinted chip, not the neutral one
   — and --ctl-info-text is the ink §4.3 already certifies against
   --ctl-info-bg (5.92–6.85:1 across the six sheets). Eight of the sixteen call
   sites carry an explicit `.text-dark`; that utility sets `color` directly and
   out-ranks the badge variable, resolving to --ctl-fg on this ground at
   11.97–16.72:1, so those sites stay legible without being edited either.

   .text-bg-info gets the `!important` treatment for the same reason
   .text-bg-secondary does — Bootstrap compiles `color:#000!important` into it.
   No call site uses it today; arming it now means the trap fires on the first
   author who reaches for it rather than on a user's screen. */
.bg-info {
    --bs-badge-color: var(--ctl-info-text);
}
.text-bg-info {
    color: var(--ctl-info-text) !important;
}

/* A progress bar's fill is the one `.bg-*` position in the app that is neither
   a badge nor a chip — it is a data graphic, and Bootstrap composes its ink as
   a compiled literal on the TRACK (`.progress{--bs-progress-bar-color:#fff}`),
   which no bridge in the block above can reach. The reports page's category
   chart writes its count INSIDE the fill, so the pair has to be certified the
   way every other ground+ink pair here is: --ctl-accent-fg is exactly that ink
   (§4.5 — black on the green presets, white on Refined's blue), and it is
   already what every other accent-grounded surface in this file reads. */
.progress-bar.bg-primary {
    --bs-progress-bar-color: var(--ctl-accent-fg);
}

/* Bootstrap components whose compiled vars are literals (not global-var
   references) — re-pointed at semantic tokens once, valid for all six sheets.
   These replace the deleted body.theme-dark per-component patches. */
.dropdown-menu {
    --bs-dropdown-bg: var(--ctl-bg-elevated);
    --bs-dropdown-color: var(--ctl-fg);
    --bs-dropdown-border-color: var(--ctl-border);
    --bs-dropdown-link-color: var(--ctl-fg);
    --bs-dropdown-link-hover-color: var(--ctl-fg);
    --bs-dropdown-link-hover-bg: var(--ctl-bg-hover);
    --bs-dropdown-link-active-color: var(--ctl-accent-fg);
    --bs-dropdown-link-active-bg: var(--ctl-accent);
    --bs-dropdown-divider-bg: var(--ctl-border);
    --bs-dropdown-header-color: var(--ctl-fg-subtle);
}

.modal {
    --bs-modal-bg: var(--ctl-bg-elevated);
    --bs-modal-color: var(--ctl-fg);
    --bs-modal-border-color: var(--ctl-border);
    --bs-modal-header-border-color: var(--ctl-border);
    --bs-modal-footer-border-color: var(--ctl-border);
}

.list-group {
    --bs-list-group-bg: var(--ctl-bg-elevated);
    --bs-list-group-color: var(--ctl-fg);
    --bs-list-group-border-color: var(--ctl-border);
    --bs-list-group-action-color: var(--ctl-fg);
    --bs-list-group-action-hover-color: var(--ctl-fg);
    --bs-list-group-action-hover-bg: var(--ctl-bg-hover);
    --bs-list-group-action-active-color: var(--ctl-fg);
    --bs-list-group-action-active-bg: var(--ctl-bg-hover);
    --bs-list-group-active-bg: var(--ctl-accent);
    --bs-list-group-active-border-color: var(--ctl-accent);
    --bs-list-group-active-color: var(--ctl-accent-fg);
    --bs-list-group-disabled-color: var(--ctl-fg-faint);
    --bs-list-group-disabled-bg: var(--ctl-bg-elevated);
}

.pagination {
    --bs-pagination-bg: var(--ctl-bg-elevated);
    --bs-pagination-color: var(--ctl-fg);
    --bs-pagination-border-color: var(--ctl-border);
    --bs-pagination-hover-bg: var(--ctl-bg-hover);
    --bs-pagination-hover-color: var(--ctl-fg);
    --bs-pagination-hover-border-color: var(--ctl-border);
    --bs-pagination-focus-bg: var(--ctl-bg-hover);
    --bs-pagination-focus-color: var(--ctl-fg);
    --bs-pagination-focus-box-shadow: var(--ctl-focus-ring);
    --bs-pagination-active-bg: var(--ctl-accent);
    --bs-pagination-active-border-color: var(--ctl-accent);
    --bs-pagination-active-color: var(--ctl-accent-fg);
    --bs-pagination-disabled-bg: var(--ctl-bg-elevated);
    --bs-pagination-disabled-color: var(--ctl-fg-faint);
    --bs-pagination-disabled-border-color: var(--ctl-border);
}

.table {
    /* Transparent so card surfaces (and row-hover set on ) show through;
       sticky headers and pinned columns carry their own opaque backgrounds. */
    --bs-table-bg: transparent;
    --bs-table-color: var(--ctl-fg);
    --bs-table-border-color: var(--ctl-border);
    --bs-table-striped-bg: var(--ctl-bg-alt);
    --bs-table-striped-color: var(--ctl-fg);
    --bs-table-hover-bg: var(--ctl-bg-hover);
    --bs-table-hover-color: var(--ctl-fg);
}

.table-light {
    --bs-table-bg: var(--ctl-bg-alt);
    --bs-table-color: var(--ctl-fg);
    --bs-table-border-color: var(--ctl-border);
}

.nav-tabs {
    --bs-nav-link-color: var(--ctl-fg-muted);
    --bs-nav-link-hover-color: var(--ctl-fg);
    --bs-nav-tabs-border-color: var(--ctl-border);
    --bs-nav-tabs-link-active-color: var(--ctl-accent-text);
    --bs-nav-tabs-link-active-bg: var(--ctl-bg-elevated);
    --bs-nav-tabs-link-active-border-color: var(--ctl-border) var(--ctl-border) var(--ctl-bg-elevated);
    --bs-nav-tabs-link-hover-border-color: var(--ctl-bg-hover) var(--ctl-bg-hover) var(--ctl-border);
}

/* Primary button — accent fill with contrast-verified face (§4.5: black on
   brand green 7.32:1 in Industrial/Operator; white on blue 4.55:1 in Refined). */
.btn-primary {
    --bs-btn-color: var(--ctl-accent-fg);
    --bs-btn-bg: var(--ctl-accent);
    --bs-btn-border-color: var(--ctl-accent);
    --bs-btn-hover-color: var(--ctl-accent-fg);
    --bs-btn-hover-bg: var(--ctl-accent-hover);
    --bs-btn-hover-border-color: var(--ctl-accent-hover);
    --bs-btn-active-color: var(--ctl-accent-fg);
    --bs-btn-active-bg: var(--ctl-accent-press);
    --bs-btn-active-border-color: var(--ctl-accent-press);
    --bs-btn-disabled-color: var(--ctl-accent-fg);
    --bs-btn-disabled-bg: var(--ctl-accent);
    --bs-btn-disabled-border-color: var(--ctl-accent);
    --bs-btn-focus-shadow-rgb: var(--ctl-accent-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--ctl-accent-text);
    --bs-btn-border-color: var(--ctl-accent);
    --bs-btn-hover-color: var(--ctl-accent-fg);
    --bs-btn-hover-bg: var(--ctl-accent);
    --bs-btn-hover-border-color: var(--ctl-accent);
    --bs-btn-active-color: var(--ctl-accent-fg);
    --bs-btn-active-bg: var(--ctl-accent-press);
    --bs-btn-active-border-color: var(--ctl-accent-press);
    --bs-btn-disabled-color: var(--ctl-fg-faint);
    --bs-btn-disabled-border-color: var(--ctl-border-strong);
    --bs-btn-focus-shadow-rgb: var(--ctl-accent-rgb);
}

/* Secondary per §6: 1px border-strong outline, transparent fill */
.btn-outline-secondary {
    --bs-btn-color: var(--ctl-fg-muted);
    --bs-btn-border-color: var(--ctl-border-strong);
    --bs-btn-hover-color: var(--ctl-fg);
    --bs-btn-hover-bg: var(--ctl-bg-hover);
    --bs-btn-hover-border-color: var(--ctl-border-strong);
    --bs-btn-active-color: var(--ctl-fg);
    --bs-btn-active-bg: var(--ctl-bg-hover);
    --bs-btn-active-border-color: var(--ctl-border-strong);
    --bs-btn-disabled-color: var(--ctl-fg-faint);
    --bs-btn-disabled-border-color: var(--ctl-border);
}

.btn-outline-danger {
    --bs-btn-color: var(--ctl-danger-text);
    --bs-btn-border-color: var(--ctl-danger);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--ctl-danger);
    --bs-btn-hover-border-color: var(--ctl-danger);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--ctl-danger);
    --bs-btn-active-border-color: var(--ctl-danger);
    --bs-btn-disabled-color: var(--ctl-fg-faint);
    --bs-btn-disabled-border-color: var(--ctl-border-strong);
    --bs-btn-focus-shadow-rgb: var(--ctl-danger-rgb);
}

.btn-danger {
    --bs-btn-bg: var(--ctl-danger);
    --bs-btn-border-color: var(--ctl-danger);
    --bs-btn-hover-bg: color-mix(in srgb, var(--ctl-danger) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--ctl-danger) 85%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--ctl-danger) 75%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--ctl-danger) 75%, #000);
    --bs-btn-disabled-bg: var(--ctl-danger);
    --bs-btn-disabled-border-color: var(--ctl-danger);
    --bs-btn-focus-shadow-rgb: var(--ctl-danger-rgb);
}

.btn-warning {
    --bs-btn-color: #000000;
    --bs-btn-bg: var(--ctl-warning);
    --bs-btn-border-color: var(--ctl-warning);
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: color-mix(in srgb, var(--ctl-warning) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--ctl-warning) 85%, #000);
    --bs-btn-active-color: #000000;
    --bs-btn-active-bg: color-mix(in srgb, var(--ctl-warning) 75%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--ctl-warning) 75%, #000);
    --bs-btn-disabled-color: #000000;
    --bs-btn-disabled-bg: var(--ctl-warning);
    --bs-btn-disabled-border-color: var(--ctl-warning);
    --bs-btn-focus-shadow-rgb: var(--ctl-warning-rgb);
}

/* ═══ Typography base (§2) ═══ */
/* Display utilities — Oswald caps. Page headers adopt these in Phase B;
   h1-h6 are deliberately NOT restyled globally here. */
.ctl-display-lg,
.ctl-display-md,
.ctl-display-sm {
    font-family: var(--ctl-font-display);
    font-weight: 700;
    line-height: var(--ctl-lh-tight);
    text-transform: uppercase;
    letter-spacing: -0.025em;
}
.ctl-display-lg { font-size: var(--ctl-fs-display-lg); }
.ctl-display-md { font-size: var(--ctl-fs-display-md); }
.ctl-display-sm { font-size: var(--ctl-fs-display-sm); }

/* Caption scale — system-stack 700 uppercase labels (the face moved off Lato
   with the 2026-07-31 revision; UI_STANDARDS §2.1) */
.ctl-caption {
    font-family: var(--ctl-font-body);
    font-size: var(--ctl-fs-caption);
    font-weight: 700;
    line-height: var(--ctl-lh-snug);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Content width clamps (UI_STANDARDS §8.1). Data surfaces (lists,
   dashboards, canvases) run full width; settings/form/reading pages clamp
   so large monitors don't stretch them into unreadable sprawl. */
.ctl-page-clamp {
    max-width: var(--ctl-content-max, 68rem);
    /* width:100% for the same reason as the -wide variant below: in a
       flex-column parent (.content-wrapper detail pages), margin-inline:auto
       suppresses stretching and the clamped header wrapper collapses to its
       content width, breaking header/body alignment. Harmless in block flow. */
    width: 100%;
    margin-inline: auto;
}
.ctl-page-clamp-narrow {
    max-width: var(--ctl-content-max-narrow, 46rem);
    width: 100%;
    margin-inline: auto;
}
/* Wide variant — dense surfaces (the trash list, /reports, the analytics and
   wide-config screens) that carry more data than a single-column reading pane,
   but still clamp so ultrawide monitors don't stretch them into sprawl.
   NOT the agent ticket view: that page was the original example here and moved
   to the medium clamp above once its main column became a conversation — a
   thread across 100rem is exactly the sprawl this token exists to prevent. */
.ctl-page-clamp-wide {
    max-width: var(--ctl-content-max-wide, 100rem);
    /* width:100% so the clamp fills to its max in a flex-column parent
       (.content-wrapper). Without it, margin-inline:auto shrinks a flex child
       to its content — collapsing the narrow header wrapper while the wider
       body stayed put, so header + body no longer aligned (live-verified). */
    width: 100%;
    margin-inline: auto;
}

/* ═══ Focus visibility (§4.4 / §9) — always visible on :focus-visible ═══ */
:focus-visible {
    outline: 3px solid rgba(var(--ctl-accent-rgb), 0.35);
    outline-offset: 1px;
}

/* Controls that already render the ring as a box-shadow (accent border +
   --ctl-focus-ring) suppress the outline — replacement present, not removed. */
.form-control:focus-visible,
.form-select:focus-visible,
.ai-chat-input:focus-visible {
    outline: none;
}

/* ═══ Reduced motion (§4.4) — non-essential motion collapses to 0 ═══ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Lock viewport — all scrolling handled by inner flex containers */
html, body {
    height: 100%;
    overflow: hidden;
    margin: 0;
}

body {
    background-color: var(--ctl-bg);
    color: var(--ctl-fg);
    font-family: var(--ctl-font-body);
    font-size: var(--ctl-fs-body);
}

/* Email preview frame — always-light iframe inside dark cards */
.email-preview-frame {
    background: #ffffff;
    border: 1px solid var(--ctl-border);
    border-radius: 6px;
    overflow: hidden;
    max-height: 500px;
    overflow-y: auto;
}
/* shortcut: scheme-keyed override — the frame content is pinned light (email
   renders on white), so the dark schemes need a stronger seam than tokens can
   express; revisit if the preview ever themes. */
html[data-bs-theme="dark"] .email-preview-frame {
    border-color: var(--ctl-border-strong);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* "Logged in as" (Login As) banner — solid danger fill, white text (≥5.9:1 in
   every sheet). The banner sits in normal flow, so in-flow chrome shifts down
   under it on its own — but .sidebar is position:fixed at top:0 and would be
   overlapped. Fix: a deterministic banner height on body.has-loginas-banner
   (main.php sets the class) that the fixed sidebar and the 100%-height
   .wrapper subtract, so the logo drops below the banner and the page bottom
   isn't pushed off-viewport. */
body.has-loginas-banner {
    --loginas-banner-h: 1.8rem;
}
.impersonation-banner {
    background: var(--ctl-danger);
    color: #fff;
    text-align: center;
    height: var(--loginas-banner-h);
    line-height: var(--loginas-banner-h);
    padding: 0 1rem;
    font-size: 0.8rem;
    overflow: hidden;
    position: sticky;
    top: 0;
    z-index: 9999; /* z literal kept: security banner must top everything, incl. Bootstrap modals and the --ctl-z scale */
}
body.has-loginas-banner .sidebar {
    top: var(--loginas-banner-h);
    height: calc(100vh - var(--loginas-banner-h));
}
body.has-loginas-banner .wrapper {
    height: calc(100% - var(--loginas-banner-h));
}
.impersonation-banner form {
    display: inline;
}
.impersonation-banner a,
.impersonation-banner .btn-link {
    color: #fff;
    text-decoration: underline;
    font-size: inherit;
    line-height: inherit;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

/* ═══ Login — split "sign-in + product showcase" card (Direction 1 · MDT
   Industrial). The login page is ANONYMOUS, so bare.php emits no theme
   attributes and the --ctl-* semantic tokens stay pinned to Operator Light.
   We therefore theme this page with prefers-color-scheme (NOT data-bs-theme)
   and drive concrete colors from the always-defined --mdt-* brand constants.
   Local --lg-* tokens hold the light defaults; the dark media query overrides
   them. In dark, the card/form surface becomes the app nav-bar grey
   (--ctl-bg-elevated resolves to --mdt-grey-900 in the shipped dark sheets).
   The product tile stays LIGHT in both schemes (studio shots are on white). */
.login-shell {
    --lg-backdrop: #ecece7;              /* Operator off-white page backdrop */
    --lg-surface: var(--mdt-white);      /* form pane surface (light) */
    --lg-fg: #111111;
    --lg-fg-muted: var(--mdt-grey-600);
    --lg-fg-subtle: #6e6e6e;
    --lg-border: var(--mdt-grey-200);
    --lg-input-bg: var(--mdt-grey-050);
    --lg-green: var(--mdt-green-500);          /* fill / accent bar */
    --lg-green-text: var(--mdt-green-600);     /* text-safe green on light */
    /* Product tile — kept light in BOTH schemes so white-bg JPEGs blend in. */
    --lg-tile: linear-gradient(155deg, #fbfbfa 0%, #ededea 55%, #e3e3df 100%);
    --lg-tile-fg: #1a1a1a;
    --lg-tile-fg-muted: #6e6e6e;
    --lg-tile-border: rgba(0, 0, 0, 0.06);

    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--lg-backdrop);
    font-family: var(--ctl-font-body);
}

.login-split-card {
    display: flex;
    width: 100%;
    max-width: 1040px;
    max-height: min(640px, calc(100vh - 3rem));
    overflow: hidden;
    background: var(--lg-surface);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
    color: var(--lg-fg);
}

/* ── LEFT · form pane (exact 50%) ── */
.login-form-pane {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    padding: 36px 48px;
    background: var(--lg-surface);
    overflow: hidden;   /* spacing is tuned to always fit the card height — never scroll */
}

.login-brand {
    flex-shrink: 0;
}

.login-logo {
    height: 34px;
    width: auto;
}

/* Logo swap by OS scheme (anonymous page — no data-bs-theme to key on). */
.login-logo-dark { display: none; }
.login-logo-light { display: inline-block; }

.login-core-label {
    margin-top: 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5em;
    text-indent: 0.5em;  /* re-center: compensates the trailing letter-space */
    color: var(--lg-fg-muted);
}

.login-form-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px 0 0;
}

.login-eyebrow {
    margin: 0 0 0.4rem;
    font-family: var(--ctl-font-brand);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lg-green-text);
}

.login-heading {
    margin: 0;
    font-family: var(--ctl-font-display);
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    text-transform: uppercase;
    color: var(--lg-fg);
}

.login-accent-bar {
    display: block;
    width: 48px;
    height: 4px;
    margin: 12px 0 18px;
    background: var(--lg-green);
}

.login-field-label {
    font-family: var(--ctl-font-brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lg-fg-muted);
    margin-bottom: 0.35rem;
}

/* Input group — recolor to the local (scheme-aware) tokens, since --ctl-*
   is pinned light on this anonymous page. */
.login-input-group .input-group-text {
    background: var(--lg-input-bg);
    border-color: var(--lg-border);
    color: var(--lg-fg-muted);
}

.login-input-group .form-control {
    height: 48px;
    background: var(--lg-input-bg);
    border-color: var(--lg-border);
    color: var(--lg-fg);
}

.login-input-group .form-control::placeholder {
    color: var(--lg-fg-subtle);
    opacity: 0.7;
}

.login-input-group .form-control:focus {
    background: var(--lg-input-bg);
    border-color: var(--lg-green);
    box-shadow: 0 0 0 3px rgba(var(--ctl-accent-rgb), 0.3);
    color: var(--lg-fg);
}

.login-submit {
    height: 50px;
    font-family: var(--ctl-font-display);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.login-divider {
    display: flex;
    align-items: center;
    margin: 1rem 0;
    color: var(--lg-fg-muted);
    font-size: 0.85rem;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--lg-border);
}

.login-divider span {
    padding: 0 0.75rem;
}

/* SSO buttons — theme-aware outline (btn-outline-dark would be invisible on
   the dark card). */
.login-sso-btn {
    height: 48px;
    border: 1px solid var(--lg-border);
    background: transparent;
    color: var(--lg-fg);
    font-weight: 500;
}

.login-sso-btn:hover {
    background: var(--lg-input-bg);
    border-color: var(--lg-border);
    color: var(--lg-fg);
}

/* ── The same SSO offer, inside the re-auth modal ──────────────────────────
   session-monitor.js builds the "Sign back in" dialog on top of the app shell,
   where the two must look like one product: same height, same neutral outline,
   same Google mark, same server-supplied wording. The login classes above
   cannot simply be reused — their whole --lg-* palette is scoped to
   .login-shell and resolves to nothing out here — so this is that design
   restated on app-shell tokens. Change one, change the other. */
#ueeReauthModal .uee-sso-btn {
    height: 48px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: transparent;
    color: var(--bs-body-color, #212529);
    font-weight: 500;
}

#ueeReauthModal .uee-sso-btn:hover,
#ueeReauthModal .uee-sso-btn:focus-visible {
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, .04));
    border-color: var(--bs-border-color, #dee2e6);
    color: var(--bs-body-color, #212529);
}

#ueeReauthModal .uee-sso-divider {
    display: flex;
    align-items: center;
    margin: 1rem 0;
    color: var(--bs-secondary-color, #6c757d);
    font-size: var(--ctl-fs-body-sm);
}

#ueeReauthModal .uee-sso-divider::before,
#ueeReauthModal .uee-sso-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

#ueeReauthModal .uee-sso-divider span {
    padding: 0 0.75rem;
}

.login-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 16px;
    font-size: 0.78rem;
    color: var(--lg-fg-muted);
}

/* Environment badge (Dev / Staging / Live) — keyed off APP_ENV in the template.
   Bordered chip in the comp's style; border tracks the text colour. */
.login-env-badge {
    flex-shrink: 0;
    font-family: var(--ctl-font-brand);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    padding: 3px 8px;
    border: 1px solid currentColor;
    border-radius: 3px;
}
.login-env-dev     { color: #c98a1a; }
.login-env-staging { color: #c98a1a; }
.login-env-prod    { color: var(--lg-green-text); }

/* ── RIGHT · product showcase pane (exact 50%) ── */
.login-showcase-pane {
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 40px 44px;
    border-left: 4px solid var(--lg-green);
    background: var(--lg-tile);
    color: var(--lg-tile-fg);
    overflow: hidden;
}

/* Faint 42px grid texture over the tile (mirrors the comp). */
.login-showcase-pane::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.035) 1px, transparent 1px);
    background-size: 42px 42px;
    pointer-events: none;
}

.login-showcase-pane > * { position: relative; z-index: 1; }

.login-showcase-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    min-height: 24px;
}

.login-showcase-caption {
    font-family: var(--ctl-font-brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lg-tile-fg-muted);
    text-align: right;
}

.login-showcase-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--lg-tile-border);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--lg-tile-fg-muted);
    cursor: pointer;
    transition: color var(--ctl-dur, 180ms), border-color var(--ctl-dur, 180ms), transform var(--ctl-dur, 180ms);
}

.login-showcase-refresh:hover {
    color: var(--lg-green-text);
    border-color: var(--lg-green);
}

.login-showcase-refresh:focus-visible {
    outline: none;
    border-color: var(--lg-green);
    box-shadow: 0 0 0 3px rgba(var(--ctl-accent-rgb), 0.35);
    color: var(--lg-green-text);
}

.login-showcase-refresh:active { transform: rotate(90deg); }

.login-showcase-headline {
    /* Center the block between the topbar and the bottom-pinned image, then
       nudge it slightly above centre (relative offset — no reflow). */
    margin-top: auto;
    margin-bottom: auto;
    position: relative;
    top: -14px;
    max-width: 22em;
}

.login-showcase-eyebrow {
    margin: 0 0 0.5rem;
    font-family: var(--ctl-font-brand);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lg-green-text);
}

.login-showcase-title {
    margin: 0;
    font-family: var(--ctl-font-display);
    font-weight: 700;
    font-size: 42px;
    line-height: 1.02;
    text-transform: uppercase;
    color: var(--lg-tile-fg);
}

.login-showcase-copy {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--lg-tile-fg-muted);
}

/* Immovable image stage: a FIXED height so no product's size or aspect ratio
   can shift the caption/headline or change the card height. Pinned to the
   bottom of the pane (margin-top:auto). */
.login-showcase-figure {
    flex: 0 0 auto;
    height: 150px;
    /* Full-bleed to the card edges: negative side margins cancel the pane's
       44px horizontal padding. overflow:visible removes the top/bottom crop —
       the enlarged image may spill vertically; the pane's own overflow:hidden
       still crops the SIDES at the card edge. Negative margins don't move the
       text; the figure stays bottom-pinned via the headline's margin-bottom:auto. */
    margin: 0 -44px;
    overflow: visible;
}

.login-showcase-img {
    width: 100%;
    height: 100%;
    /* Transparent BiRefNet cutouts on the light tile. Scaled ~1.25x so the product
       bleeds off the sides and is cropped by the card edges (pane overflow).
       transform does NOT reflow, so nothing else on the screen shifts. */
    object-fit: contain;
    transform: scale(1.25);
    transition: opacity var(--ctl-dur, 180ms) ease;
}

/* Empty state — no seeded products: keep the headline, drop tile chrome. */
.login-showcase-pane[data-empty="true"] .login-showcase-headline { margin-top: 0; }

/* ── Dark scheme (OS preference; DEFAULT is light) ── */
@media (prefers-color-scheme: dark) {
    .login-shell {
        --lg-backdrop: #060606;
        --lg-surface: var(--mdt-grey-900);   /* app nav-bar grey */
        --lg-fg: var(--mdt-white);
        --lg-fg-muted: #9a9a9a;
        --lg-fg-subtle: #808080;
        --lg-border: var(--mdt-grey-800);
        --lg-input-bg: #0d0d0d;
        --lg-green-text: var(--mdt-green-400);
        /* Product tile now goes dark too — transparent cutouts read fine on it
           (the old light-tile constraint was for white-background JPEGs). The
           radial highlight sits low-centre, behind the bottom-pinned product,
           so even all-black chassis keep some separation from the background. */
        --lg-tile: radial-gradient(120% 85% at 60% 90%, #2a2a2a 0%, #161616 58%, #0d0d0d 100%);
        --lg-tile-fg: #f0f0f0;
        --lg-tile-fg-muted: #9a9a9a;
        --lg-tile-border: rgba(255, 255, 255, 0.12);
    }

    .login-logo-dark { display: inline-block; }
    .login-logo-light { display: none; }

    .login-split-card {
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
    }

    /* Grid texture: light lines on the dark tile (light mode uses black lines). */
    .login-showcase-pane::before {
        background-image:
            linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    }

    /* Refresh button: subtle light-on-dark instead of the light-mode white fill. */
    .login-showcase-refresh {
        background: rgba(255, 255, 255, 0.06);
    }
}

/* ── Responsive: below ~900px hide the showcase, form takes the card ── */
@media (max-width: 900px) {
    .login-split-card {
        max-width: 440px;
        max-height: none;
    }

    .login-form-pane {
        flex-basis: 100%;
        max-width: 100%;
        padding: 36px 32px;
    }

    .login-showcase-pane { display: none; }
}

@media (max-width: 480px) {
    .login-shell { padding: 0; }
    .login-split-card { border-radius: 0; min-height: 100vh; }
    .login-form-pane { justify-content: flex-start; }
}

/* ── Login flash — the app's shared .flash-container (fixed, top-right; see
   below) carries every sign-in message: "You have been logged out.", session
   expiry, SSO failures, bad credentials, account-locked. It floats OUTSIDE the
   card, so the form column never moves when a message is present — the pane is
   `overflow:hidden` and tuned to exactly fill the card height, so an inline
   alert used to push the sign-in fields down and clip the footer.

   The login page is ANONYMOUS: bare.php emits no data-bs-theme, so Bootstrap's
   dark alert variables never engage and a stock alert would paint light-mint /
   light-red over the dark card. Re-tint through Bootstrap's own --bs-alert-*
   API so the banner belongs to the card it floats over, with the semantic
   colour carried by the text + icon instead of the fill. ── */
@media (prefers-color-scheme: dark) {
    .login-body .flash-container .alert {
        --bs-alert-bg: var(--mdt-grey-900);
        --bs-alert-border-color: var(--mdt-grey-800);
        --bs-alert-color: #f0f0f0;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    }
    /* Variant tints come after the base rule — equal specificity, later wins. */
    .login-body .flash-container .alert-success { --bs-alert-color: var(--mdt-green-400); }
    .login-body .flash-container .alert-danger  { --bs-alert-color: #ef8b84; }
    .login-body .flash-container .border-danger { border-color: #ef8b84 !important; }
    .login-body .flash-container .btn-close     { filter: var(--bs-btn-close-white-filter); }
}

/* Respect reduced motion for the image cross-fade. */
@media (prefers-reduced-motion: reduce) {
    .login-showcase-img,
    .login-showcase-refresh { transition: none; }
}

/* Sidebar layout */
.wrapper {
    display: flex;
    width: 100%;
    height: 100%;
}

/* The rail. A dark chrome surface in every sheet, in the active style's own
   temperature (see --ctl-nav-bg). It carries no border against the content: in
   the light sheets it is already the strongest edge on the screen, and in the
   dark ones it is the lifted surface, so a hairline would only muddy the step. */
.sidebar {
    width: var(--ctl-sidebar-width);
    height: 100vh;
    background: var(--ctl-nav-bg);
    position: fixed;
    left: 0;
    top: 0;
    z-index: var(--ctl-z-sidebar);
    transition: width 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/* Sidebar header with toggle + brand */
.sidebar-header {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: var(--ctl-nav-raised-bg);
    border-bottom: 1px solid var(--ctl-nav-border);
    gap: 0.5rem;
    min-height: var(--ctl-pane-head-h);
}

.sidebar-toggle-btn {
    background: none;
    border: none;
    color: var(--ctl-nav-fg-muted);
    font-size: 1.25rem;
    padding: 0.25rem 0.4rem;
    cursor: pointer;
    border-radius: var(--ctl-radius);
    flex-shrink: 0;
    line-height: 1;
}

.sidebar-toggle-btn:hover {
    color: var(--ctl-nav-fg);
    background: var(--ctl-nav-hover-bg);
}

.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.2s;
    /* Now a real  (home button) — strip link chrome so the
       lockup looks identical to the old . */
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.sidebar-brand .brand-logo {
    height: 24px;
    width: auto;
    display: block;
}

/* Mark-only variant shown when the sidebar is collapsed */
.sidebar-brand .brand-mark {
    display: none;
}

/* No scheme fork on the lockup: mdt-logo-white.png / mdt-mark-white.png are
   pure-white-on-transparent artwork and the rail is dark in all six sheets, so
   the artwork is correct as authored everywhere. (#1705 briefly inverted it on
   the light schemes because the rail went light there; that rail is gone and so
   is the invert.) */

.sidebar-brand .brand-core {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.45em;
    color: var(--ctl-nav-fg-subtle);
    margin-top: 0.3rem;
    line-height: 1;
}

/* Sidebar search */
.sidebar-search {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--ctl-nav-border);
}

.sidebar-search-input {
    display: flex;
    align-items: center;
    background: var(--ctl-nav-hover-bg);
    border-radius: var(--ctl-radius);
    padding: 0.3rem 0.5rem;
    gap: 0.4rem;
}

.sidebar-search-input i {
    color: var(--ctl-nav-fg-subtle);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.sidebar-search-input input {
    background: none;
    border: none;
    /* no outline:none — the global :focus-visible ring is the focus indicator */
    color: var(--ctl-nav-fg);
    font-size: 0.8rem;
    width: 100%;
}

.sidebar-search-input input::placeholder {
    color: var(--ctl-nav-fg-subtle);
}

.sidebar-search-results {
    margin-top: 0.35rem;
    max-height: 250px;
    overflow-y: auto;
}

.sidebar-search-result {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    color: var(--ctl-nav-fg-muted);
    text-decoration: none;
    font-size: 0.8rem;
    border-radius: var(--ctl-radius);
}

.sidebar-search-result:hover,
.sidebar-search-result.active {
    color: var(--ctl-nav-fg);
    background: var(--ctl-nav-hover-bg);
}

.sidebar-search-result i {
    font-size: 0.85rem;
    width: 1.1rem;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.6;
}

/* nav-fg-MUTED, not -subtle: this line rides INSIDE a hoverable result row, so
   its worst surface is the hover wash rather than the rail, and the -subtle
   step is only certified on the resting surfaces. */
.sidebar-search-path {
    display: block;
    font-size: 0.65rem;
    color: var(--ctl-nav-fg-muted);
    margin-top: 0.1rem;
}

.sidebar-search-empty {
    padding: 0.5rem;
    color: var(--ctl-nav-fg-muted);
    font-size: 0.75rem;
    font-style: italic;
}

/* Hide search when sidebar collapsed */
.sidebar.collapsed .sidebar-search {
    display: none;
}

/* Sidebar menu area — the nav region that hosts the stacked rail layers.
   overflow:hidden so the admin layer is clipped while parked below and each
   rail owns its own vertical scroll. */
.sidebar-menu {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* Sidebar navigation rail — both rails are absolute layers filling the nav
   region. The main rail sits at rest; the admin rail slides UP from the bottom
   to cover it (main stays put underneath — 'on top of', never 'replacing'). */
.sidebar-nav {
    padding: 0.5rem 0;
    margin: 0;
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Admin rail: parked one full height below at rest, riding above the main rail
   when raised. Reads as a SHEET sliding over the main nav (stakeholder
   direction 2026-07-21: 'on top of, not replacing'): a step-lighter solid
   background and an upward shadow separate the two layers during and after the
   slide. The accent line lives on the .sidebar-nav-head (below the close
   toggle), not the sheet's top edge — so it separates the close action from the
   options rather than capping the sheet. */
.sidebar-nav[data-nav="admin"] {
    transform: translateY(100%);
    z-index: 2;
    background: var(--ctl-nav-raised-bg);
    box-shadow: 0 -8px 20px var(--ctl-nav-shadow);
    /* Own compositor layer so the slide is pure GPU transform and never
       repaints the main rail underneath (that repaint made the still-visible
       buttons shimmer as the sheet rose). */
    will-change: transform;
}
.sidebar[data-nav-mode="admin"] .sidebar-nav[data-nav="admin"] {
    transform: translateY(0);
}

/* The covered main rail dims while the admin sheet is up — sells the layering
   and keeps the underlying nav from visually competing with the sheet. The dim
   is a composited overlay (animating opacity), NOT filter: brightness() on the
   rail: filtering the text-heavy rail forced a per-frame re-raster of every
   label, so the still-visible buttons appeared to twitch the instant Settings
   was clicked. The overlay rides above the main rail (z-index 1) and below the
   admin sheet (z-index 2); --ctl-nav-scrim is rgba black at 0.45, matching the
   old brightness(0.55) darkening, and it is scheme-INVARIANT because the
   surface it falls on is dark in every sheet. */
.sidebar-menu::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--ctl-nav-scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ctl-dur) ease;
}
.sidebar[data-nav-mode="admin"] .sidebar-menu::after {
    opacity: 1;
}

/* Slide only on user toggles. .nav-anim is added by JS after first paint, so a
   direct admin-URL load renders with the layer already up and no animation.
   prefers-reduced-motion (global rule) zeroes the duration → jump-cut. */
.sidebar.nav-anim .sidebar-nav {
    transition: transform var(--ctl-dur) ease;
}

/* nav-group toggles are real