/* ═══════════════════════════════════════════════════════════════════════════════════════════════
 * SKIN B — "Swiss Freight" token layer (Ed 2026-09-26). SKIN ONLY and SAME DENSITY: this file changes
 * colours, typefaces, corners and rules — never a size, padding, gap, row or control height.
 * Spec: the .d2 / .d2.dim / .d2.dark blocks of the design-directions artifact (v3, today's density).
 *
 * One place for the whole palette. Every legacy and design-system token family is re-pointed here, with
 * selectors one step more specific than the existing blocks (html:root…), so load order never matters and
 * reverting the skin is removing this file. Three themes: light (:root), MEDIUM (data-theme="dim", #2B2B29
 * ground) and dark. Existing html[data-theme="dark"] rules also match dim (widened to :is(dark, dim)), so dim
 * inherits every dark-mode fix and only its neutrals are set below.
 *
 * Gold stays the user's accent (--accent, default #F5A623 — unchanged) and is used as a MARKER only.
 * Tinted "-dim" backgrounds keep their translucent values (coloured text sits on them); the solid B pill
 * fills live in the pill components, not in these tokens.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Self-hosted Archivo / Archivo Narrow (OFL; variable weight) with Inter's LINE METRICS ─────────────────────
 * ascent/descent/line-gap overrides give each new face the line box of the face it replaces — Archivo = Inter's
 * 1.21 em, Archivo Narrow = IBM Plex Mono's 1.31 em (measured in Chrome) — so every content-sized control, label
 * and header keeps its height: same density with no line-height declarations. Self-hosted (fonts/), so the dashboard needs no font CDN for it. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/archivo-latin.woff2) format('woff2');
  ascent-override: 96.875%; descent-override: 24.12%; line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/archivo-latin-ext.woff2) format('woff2');
  ascent-override: 96.875%; descent-override: 24.12%; line-gap-override: 0%;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* 'Archivo Control' = the same face with the line box of the browser's form-control font (Arial: ascent .905 /
 * descent .212 / gap .033), so buttons, inputs and selects switch to Archivo without growing (measured: with the page
 * face they gained ~1px and Billing lost a visible row). */
@font-face { font-family: 'Archivo Control'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/archivo-latin.woff2) format('woff2');
  ascent-override: 90.5%; descent-override: 21.2%; line-gap-override: 3.3%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo Control'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/archivo-latin-ext.woff2) format('woff2');
  ascent-override: 90.5%; descent-override: 21.2%; line-gap-override: 3.3%;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/archivo-narrow-latin.woff2) format('woff2');
  ascent-override: 102.5%; descent-override: 28.5%; line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/archivo-narrow-latin-ext.woff2) format('woff2');
  ascent-override: 102.5%; descent-override: 28.5%; line-gap-override: 0%;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ── Light ─────────────────────────────────────────────────────────────────────────────────────── */
html:root {
  /* type: Archivo for UI, Archivo Narrow (condensed, tabular) for numbers and IDs */
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Archivo Narrow', 'Archivo', system-ui, sans-serif;
  --emr-font-sans: var(--sans);
  --emr-font-mono: var(--mono);

  /* the heavy rule (app bar, table tops, panel tops) and the hairline */
  --rule: #111111;
  --rule-w: 2px;
  --hairline: #E4E4E0;

  /* legacy tokens (dashboard.html :root) */
  --bg: #FFFFFF;  --panel-bg: #FFFFFF;
  --bg1: #FAFAF8; --bg2: #F4F4F1; --bg3: #F4F4F1; --bg4: #E4E4E0; --bg5: #D8D8D3;
  --border: #E4E4E0; --border2: #D8D8D3; --border3: #9A9A94;
  --text: #0B0B0B; --text2: #383838; --text3: #5E5E5A; --text4: #6E6E6A;
  --blue: #0B0B0B; --blue-dim: #F4F4F1;
  --red: #D62B1F;
  --radius: 0;

  /* design-system tokens (emr-design-system.css) */
  --emr-charcoal: #0B0B0B;
  --emr-bg: #FFFFFF; --emr-bg-muted: #FAFAF8; --emr-bg-subtle: #F4F4F1; --emr-bg-elevated: #FFFFFF;
  --emr-card-bg: #FFFFFF; --emr-card-border: #E4E4E0;
  --emr-card-shadow: none; --emr-card-shadow-lg: 0 1px 0 #E4E4E0;
  --emr-sidebar-bg: #FFFFFF; --emr-sidebar-border: #E4E4E0; --emr-sidebar-text: #0B0B0B; --emr-sidebar-text-muted: #6E6E6A;
  --emr-sidebar-hover-bg: #FFF4D6; --emr-sidebar-hover-text: #0B0B0B;
  --emr-text: #0B0B0B; --emr-text-muted: #383838; --emr-text-subtle: #5E5E5A; --emr-text-faint: #6E6E6A;
  --emr-border: #D8D8D3; --emr-border-strong: #111111; --emr-divider: #E4E4E0;
  --emr-input-bg: #FFFFFF; --emr-input-border: #9A9A94; --emr-input-text: #0B0B0B; --emr-input-placeholder: #6E6E6A;
  --emr-status-red: #D62B1F;
  /* Status tokens (same values as styles/emr-design-system.css) — defined here too so STANDALONE pages that load
   * only skin-b.css resolve them (C4/C5); identical values, so the dashboard does not change. */
  --emr-status-red-bg: #FEE2E2;
  --emr-status-green: #16A34A;   --emr-status-green-bg: #DCFCE7;
  --emr-status-cyan: #0891B2;    --emr-status-cyan-bg: #CFFAFE;
  --emr-status-yellow: #D97706;  --emr-status-yellow-bg: #FEF3C7;
  --emr-status-purple: #7C3AED;  --emr-status-purple-bg: #EDE9FE;
  --emr-status-blue: #2563EB;    --emr-status-blue-bg: #DBEAFE;
  --emr-status-gold: #F5A800;    --emr-status-gold-bg: #FEF3C7;
  /* Map marker B (Ed 2026-09-27): the navigation arrow is filled by motion; white outline on top. */
  --emr-motion-moving: #1E8E4E; --emr-motion-idling: #D98E04; --emr-motion-parked: #8A8A83; --emr-motion-late: #D62B1F;
  --emr-modal-bg: #FFFFFF;

  /* corners: square everywhere; round only where a circle IS the shape (avatars, status dots, toggles) */
  --emr-radius-sm: 0; --emr-radius: 0; --emr-radius-lg: 0; --emr-radius-xl: 0; --emr-radius-pill: 0;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-pill: 0;
  --emr-radius-round: 50%;

  /* solid status fills (black text on top) — the pill components read these */
  --skin-fill-ok: #C9F0D6; --skin-fill-info: #D9E4FF; --skin-fill-warn: #FFE08A; --skin-fill-bad: #FFD9D5;
  --skin-fill-neutral: #E4E4E0; --skin-fill-violet: #E6DDFF; --skin-fill-gold: #FFF4D6;
  --skin-fill-ink: #0B0B0B;

  /* maps (visual-consistency.css) */
  --emr-map-bg: #FFFFFF; --emr-map-ink: #0B0B0B; --emr-map-border: #111111;

  /* the shared "office heading" band (frontend-hierarchy.css: Accounting, Fleet Admin, truck-board axis) → B's head,
     in every theme: page ground, ink labels, the rule as its divider, no surface shadow */
  --office-heading-bg: var(--bg); --office-heading-text: var(--text); --office-heading-divider: var(--rule);
  --office-surface-shadow: none;
  /* CONTRAST PROGRAMME (Ed 2026-09-28 "Contrast programme: rules A–G … lets do it") — one token per rule, every theme.
     --ink-*: status colour used AS TEXT (≥ 4.5:1 on every ground and on its own tint). --fill-*: a status FILL under
     --on-fill text. --on-gold: text on a gold button. --ink-helper: small grey helper text. */
  --ink-ok: #166534; --ink-bad: #B91C1C; --ink-gold: #8A5A00; --ink-teal: #0F766E; --ink-info: #1D4ED8; --ink-violet: #6D28D9;
  --ink-helper: var(--text3);
  --fill-ok: #15803D; --fill-warn: #B45309; --fill-bad: #B91C1C; --fill-orange: #C2410C; --on-fill: #FFFFFF; --on-gold: #0B0B0B;
}
/* ── Light family only (Light + High contrast; Medium light and colour-blind re-tune below) ── CONTRAST G3 / G3b.
 * These darkened inks must NOT live in the base html:root block: that block applies to every theme and outranks
 * tokens.css's [data-theme="dark"] selectors, so a Light value there leaks into the dark themes (09-30 crawl:
 * #14532D on dark grounds, 1.3–1.9:1). :not(dark):not(dim) also covers a page with no data-theme yet. */
html:root:not([data-theme="dark"]):not([data-theme="dim"]) {
  --red: #B91C1C; --emr-status-red: #B91C1C; --emr-status-green: #15803D; --emr-status-yellow: #B45309;
  /* CONTRAST G3 (Ed 2026-09-28 programme): the Light status hues are the artifact's approved fill values — each is ≥ 5:1
     under white AND ≥ 4.5:1 as text on white, the page grounds and its own -bg tint, so one token serves both sinks. */
  --green: #15803D; --yellow: #B45309;
  /* CONTRAST G3b: the operational --status-* inks (tokens.css) are TEXT on their own 14–18 % tints (status pills,
     accounting / settlement / order statuses). Light family only — each ≥ 4.5:1 on its tint over every Light and
     Medium-light ground; the dark themes keep tokens.css's light inks. */
  --status-planning: #1E40AF; --status-assigned: #1E40AF; --status-booked: #5B21B6; --status-tonu: #7C2D12;
  --status-moving: #78350F; --status-completed: #14532D; --status-cancelled: #52525B;
  --fin-positive: #166534; --fin-negative: #991B1B;   /* money / margin / expired text on their 12 % tints */
}


/* ── Dark ──────────────────────────────────────────────────────────────────────────────────────── */
html:root[data-theme="dark"] {
  --rule: #F2F2EE; --hairline: #262626;
  --bg: #0B0B0B;  --panel-bg: #121212;
  --bg1: #121212; --bg2: #121212; --bg3: #191919; --bg4: #262626; --bg5: #333333;
  --border: #262626; --border2: #333333; --border3: #5A5A55;
  --text: #F4F4F0; --text2: #C8C8C2; --text3: #A8A8A2; --text4: #8C8C86;
  /* --blue stays the dark theme's own: it is a primary FILL under hard-coded white text (active tabs). */
  --red: #FF6B5E;
  --emr-charcoal: #F4F4F0;
  --emr-bg: #0B0B0B; --emr-bg-muted: #121212; --emr-bg-subtle: #191919; --emr-bg-elevated: #121212;
  --emr-card-bg: #0B0B0B; --emr-card-border: #262626; --emr-card-shadow: none; --emr-card-shadow-lg: 0 1px 0 #262626;
  --emr-sidebar-bg: #0B0B0B; --emr-sidebar-border: #262626; --emr-sidebar-text: #F4F4F0; --emr-sidebar-text-muted: #8C8C86;
  --emr-sidebar-hover-bg: #2A2210; --emr-sidebar-hover-text: #F4F4F0;
  --emr-text: #F4F4F0; --emr-text-muted: #C8C8C2; --emr-text-subtle: #A8A8A2; --emr-text-faint: #8C8C86;
  --emr-border: #333333; --emr-border-strong: #F2F2EE; --emr-divider: #262626;
  --emr-input-bg: #191919; --emr-input-border: #5A5A55; --emr-input-text: #F4F4F0; --emr-input-placeholder: #8C8C86;
  --emr-status-red: #FF6B5E;
  /* Status tints for the dark grounds (same values as emr-design-system.css's dark block). */
  --emr-status-red-bg: rgba(220, 38, 38, 0.16);   --emr-status-green-bg: rgba(22, 163, 74, 0.16);
  --emr-status-cyan-bg: rgba(8, 145, 178, 0.18);  --emr-status-yellow-bg: rgba(217, 119, 6, 0.18);
  --emr-status-purple-bg: rgba(124, 58, 237, 0.18); --emr-status-blue-bg: rgba(37, 99, 235, 0.18);
  --emr-status-gold-bg: rgba(245, 168, 0, 0.16);
  --emr-motion-moving: #2BA863; --emr-motion-idling: #E8A21A; --emr-motion-parked: #9A9A93; --emr-motion-late: #E5483C;
  --emr-modal-bg: #121212;
  --skin-fill-ok: #7FE0A2; --skin-fill-info: #A9C1FF; --skin-fill-warn: #FFD25C; --skin-fill-bad: #FF9C94;
  --skin-fill-neutral: #C8C8C2; --skin-fill-violet: #C9B8FF; --skin-fill-gold: #FFD25C;
  --emr-map-bg: #0B0B0B; --emr-map-ink: #F4F4F0; --emr-map-border: #F2F2EE;
  --ink-ok: #4ADE80; --ink-bad: #FF8A80; --ink-gold: #F5A623; --ink-teal: #2DD4BF; --ink-info: #60A5FA; --ink-violet: #D8B4FE;
}

/* ── Medium (dim) — between light and dark, #2B2B29 ground. Declared after dark: same specificity, wins. ── */
html:root[data-theme="dim"] {
  color-scheme: dark;
  --rule: #EDEDE8; --hairline: #44443F;
  --bg: #2B2B29;  --panel-bg: #33332F;
  --bg1: #33332F; --bg2: #2F2F2C; --bg3: #363632; --bg4: #44443F; --bg5: #55554F;
  --border: #44443F; --border2: #55554F; --border3: #7A7A73;
  --text: #F4F4F0; --text2: #D3D3CC; --text3: #B4B4AD; --text4: #A6A69F;
  /* --blue stays the dark theme's own (primary fill under white text). */
  --red: #FF8177;
  --emr-charcoal: #F4F4F0;
  --emr-bg: #2B2B29; --emr-bg-muted: #2F2F2C; --emr-bg-subtle: #363632; --emr-bg-elevated: #33332F;
  --emr-card-bg: #2B2B29; --emr-card-border: #44443F; --emr-card-shadow: none; --emr-card-shadow-lg: 0 1px 0 #44443F;
  --emr-sidebar-bg: #2B2B29; --emr-sidebar-border: #44443F; --emr-sidebar-text: #F4F4F0; --emr-sidebar-text-muted: #A6A69F;
  --emr-sidebar-hover-bg: #3E3419; --emr-sidebar-hover-text: #F4F4F0;
  --emr-text: #F4F4F0; --emr-text-muted: #D3D3CC; --emr-text-subtle: #B4B4AD; --emr-text-faint: #A6A69F;
  --emr-border: #55554F; --emr-border-strong: #EDEDE8; --emr-divider: #44443F;
  --emr-input-bg: #363632; --emr-input-border: #7A7A73; --emr-input-text: #F4F4F0; --emr-input-placeholder: #A6A69F;
  --emr-status-red: #FF8177;
  /* Status tints for the dark grounds (same values as emr-design-system.css's dark block). */
  --emr-status-red-bg: rgba(220, 38, 38, 0.16);   --emr-status-green-bg: rgba(22, 163, 74, 0.16);
  --emr-status-cyan-bg: rgba(8, 145, 178, 0.18);  --emr-status-yellow-bg: rgba(217, 119, 6, 0.18);
  --emr-status-purple-bg: rgba(124, 58, 237, 0.18); --emr-status-blue-bg: rgba(37, 99, 235, 0.18);
  --emr-status-gold-bg: rgba(245, 168, 0, 0.16);
  --emr-motion-moving: #2BA863; --emr-motion-idling: #E8A21A; --emr-motion-parked: #9A9A93; --emr-motion-late: #E5483C;
  --emr-modal-bg: #33332F;
  --skin-fill-ok: #7FE0A2; --skin-fill-info: #A9C1FF; --skin-fill-warn: #FFD25C; --skin-fill-bad: #FF9C94;
  --skin-fill-neutral: #C8C8C2; --skin-fill-violet: #C9B8FF; --skin-fill-gold: #FFD25C;
  --emr-map-bg: #2B2B29; --emr-map-ink: #F4F4F0; --emr-map-border: #EDEDE8;
  --ink-ok: #4ADE80; --ink-bad: #FF8A80; --ink-gold: #F5A623; --ink-teal: #2DD4BF; --ink-info: #60A5FA; --ink-violet: #D8B4FE;
}

/* ═══ THEME VARIANTS (Ed 2026-09-27 "add all modes that work well") ═══
 * data-theme stays the FAMILY (light / dim / dark: every existing rule, map tile and chart palette keys off it);
 * html[data-variant] re-tunes the tokens on top. Light family: mlight (Medium light), hc (High contrast).
 * Dark family: blue (Navy), term (Black & Green), amber (Amber night). Colours only — same density.
 * Every ink ≥ 4.5:1 on every ground of its theme (worst: mlight placeholder 5.37). */
html:root[data-theme="light"][data-variant="mlight"] {
  --hairline: #CFCFC9;
  --bg: #E4E4DF;  --panel-bg: #F1F1EC;
  --bg1: #EBEBE6; --bg2: #DEDED8; --bg3: #DEDED8; --bg4: #CFCFC9; --bg5: #C2C2BC;
  --border: #CFCFC9; --border2: #BDBDB7; --border3: #8A8A84;
  --text: #0B0B0B; --text2: #333331; --text3: #4F4F4B; --text4: #575753;
  --blue-dim: #DEDED8;
  --emr-bg: #E4E4DF; --emr-bg-muted: #EBEBE6; --emr-bg-subtle: #DEDED8; --emr-bg-elevated: #F1F1EC;
  --emr-card-bg: #F1F1EC; --emr-card-border: #CFCFC9; --emr-card-shadow-lg: 0 1px 0 #CFCFC9;
  --emr-sidebar-bg: #F1F1EC; --emr-sidebar-border: #CFCFC9; --emr-sidebar-text-muted: #575753;
  --emr-sidebar-hover-bg: #DEDED8;
  --emr-text-muted: #333331; --emr-text-subtle: #4F4F4B; --emr-text-faint: #575753;
  --emr-border: #BDBDB7; --emr-divider: #CFCFC9;
  --emr-input-bg: #F7F7F3; --emr-input-border: #8A8A84; --emr-input-placeholder: #575753;
  --emr-modal-bg: #F1F1EC;
  --emr-map-bg: #E4E4DF;
  /* status inks darkened for the greyer grounds (contrast audit: ≥ 4.8:1 on every mlight ground) */
  --red: #A8221A; --emr-status-red: #A8221A; --danger: #A8221A;
  --green: #0E6B33; --emr-status-green: #0E6B33; --success: #0E6B33;
  --yellow: #7E4F00; --emr-status-yellow: #7E4F00; --amber: #7E4F00; --orange: #7E4F00;
  --ink-ok: #0E6B33; --ink-bad: #A8221A; --ink-gold: #7E4F00; --ink-teal: #0B5F58; --ink-info: #1E40AF; --ink-violet: #5B21B6;
  /* the finance neutral (margin 10–25%, Orders + Masterboard) inherited tokens.css #6B7280 = 3.87:1 here → the helper grey */
  --fin-neutral: var(--text3);
}
html:root[data-theme="light"][data-variant="hc"] {
  --rule: #000000; --rule-w: 3px; --hairline: #000000;
  --bg1: #FFFFFF; --bg2: #F4F4F1; --bg3: #F4F4F1; --bg4: #E4E4E0; --bg5: #D8D8D3;
  --border: #000000; --border2: #000000; --border3: #000000;
  --text: #000000; --text2: #000000; --text3: #1A1A1A; --text4: #262626;
  --blue: #000000;
  --emr-charcoal: #000000;
  --emr-card-border: #000000; --emr-card-shadow-lg: 0 1px 0 #000000;
  --emr-sidebar-border: #000000; --emr-sidebar-text: #000000; --emr-sidebar-text-muted: #262626;
  --emr-sidebar-hover-bg: #F4F4F1; --emr-sidebar-hover-text: #000000;
  --emr-text: #000000; --emr-text-muted: #000000; --emr-text-subtle: #1A1A1A; --emr-text-faint: #262626;
  --emr-border: #000000; --emr-border-strong: #000000; --emr-divider: #000000;
  --emr-input-border: #000000; --emr-input-text: #000000; --emr-input-placeholder: #262626;
  --emr-map-ink: #000000; --emr-map-border: #000000;
  --skin-fill-ink: #000000;
  --ink-ok: #0B5A2A; --ink-bad: #8F1A12; --ink-gold: #6B4400; --ink-teal: #0A544E; --ink-info: #1E3A8A; --ink-violet: #4C1D95;
}
/* High contrast: a 3px focus ring (outline takes no layout space). */
html:root[data-variant="hc"] :focus-visible { outline: 3px solid #000000; outline-offset: 1px; }
html:root[data-theme="dark"][data-variant="blue"] {
  --rule: #E6ECF5; --hairline: #243A5C;
  --bg: #0A1524;  --panel-bg: #12213A;
  --bg1: #12213A; --bg2: #0F1D31; --bg3: #172A45; --bg4: #243A5C; --bg5: #2E4870;
  --border: #243A5C; --border2: #2E4870; --border3: #5B7299;
  --text: #EEF2F8; --text2: #C9D3E3; --text3: #AEBBD0; --text4: #9DACC4;
  --emr-charcoal: #EEF2F8;
  --emr-bg: #0A1524; --emr-bg-muted: #0F1D31; --emr-bg-subtle: #172A45; --emr-bg-elevated: #12213A;
  --emr-card-bg: #0A1524; --emr-card-border: #243A5C; --emr-card-shadow-lg: 0 1px 0 #243A5C;
  --emr-sidebar-bg: #0A1524; --emr-sidebar-border: #243A5C; --emr-sidebar-text: #EEF2F8; --emr-sidebar-text-muted: #9DACC4;
  --emr-sidebar-hover-bg: #172A45; --emr-sidebar-hover-text: #EEF2F8;
  --emr-text: #EEF2F8; --emr-text-muted: #C9D3E3; --emr-text-subtle: #AEBBD0; --emr-text-faint: #9DACC4;
  --emr-border: #2E4870; --emr-border-strong: #E6ECF5; --emr-divider: #243A5C;
  --emr-input-bg: #0F1D31; --emr-input-border: #5B7299; --emr-input-text: #EEF2F8; --emr-input-placeholder: #9DACC4;
  --emr-modal-bg: #12213A;
  --emr-map-bg: #0A1524;
  /* brighter status inks for the navy grounds (contrast audit: ≥ 4.8:1) */
  --emr-status-green: #2FBF6A; --green: #2FBF6A; --success: #2FBF6A;
  --emr-status-red: #FF7A70; --red: #FF7A70; --danger: #FF7A70; --yellow: #E8A21A; --emr-status-yellow: #E8A21A; --emr-map-ink: #EEF2F8; --emr-map-border: #E6ECF5;
  --ink-ok: #4ADE80; --ink-bad: #FF8A80; --ink-gold: #F5A623; --ink-teal: #2DD4BF; --ink-info: #7DB4FF; --ink-violet: #D8B4FE;
}
html:root[data-theme="dark"][data-variant="term"] {
  --rule: #39FF6A; --hairline: #12361C;
  --bg: #000000;  --panel-bg: #0A0F0A;
  --bg1: #0A0F0A; --bg2: #050A05; --bg3: #0F1A10; --bg4: #12361C; --bg5: #1B4A28;
  --border: #12361C; --border2: #1B4A28; --border3: #2E7A43;
  --text: #39FF6A; --text2: #2FDB5A; --text3: #27C24C; --text4: #22A843;
  --emr-charcoal: #39FF6A;
  --emr-bg: #000000; --emr-bg-muted: #050A05; --emr-bg-subtle: #0F1A10; --emr-bg-elevated: #0A0F0A;
  --emr-card-bg: #000000; --emr-card-border: #12361C; --emr-card-shadow-lg: 0 1px 0 #12361C;
  --emr-sidebar-bg: #000000; --emr-sidebar-border: #12361C; --emr-sidebar-text: #39FF6A; --emr-sidebar-text-muted: #22A843;
  --emr-sidebar-hover-bg: #0F2414; --emr-sidebar-hover-text: #39FF6A;
  --emr-text: #39FF6A; --emr-text-muted: #2FDB5A; --emr-text-subtle: #27C24C; --emr-text-faint: #22A843;
  --emr-border: #1B4A28; --emr-border-strong: #39FF6A; --emr-divider: #12361C;
  --emr-input-bg: #050A05; --emr-input-border: #2E7A43; --emr-input-text: #39FF6A; --emr-input-placeholder: #22A843;
  --emr-motion-moving: #35E0FF;
  --emr-modal-bg: #0A0F0A;
  --emr-map-bg: #000000; --emr-map-ink: #39FF6A; --emr-map-border: #39FF6A;
  --ink-ok: #39FF6A; --ink-bad: #FF6B5E; --ink-gold: #FFD25C; --ink-teal: #35E0FF; --ink-info: #35E0FF; --ink-violet: #D8B4FE;
}
html:root[data-theme="dark"][data-variant="amber"] {
  --rule: #FFCF8A; --hairline: #3A2E1C;
  --bg: #14100A;  --panel-bg: #1E1810;
  --bg1: #1E1810; --bg2: #1A140C; --bg3: #261E14; --bg4: #3A2E1C; --bg5: #4A3B24;
  --border: #3A2E1C; --border2: #4A3B24; --border3: #7A6440;
  --text: #FFCF8A; --text2: #E0B879; --text3: #C9A26A; --text4: #B8935F;
  --blue: #C98A2E;
  --emr-charcoal: #FFCF8A;
  --emr-bg: #14100A; --emr-bg-muted: #1A140C; --emr-bg-subtle: #261E14; --emr-bg-elevated: #1E1810;
  --emr-card-bg: #14100A; --emr-card-border: #3A2E1C; --emr-card-shadow-lg: 0 1px 0 #3A2E1C;
  --emr-sidebar-bg: #14100A; --emr-sidebar-border: #3A2E1C; --emr-sidebar-text: #FFCF8A; --emr-sidebar-text-muted: #B8935F;
  --emr-sidebar-hover-bg: #2A2010; --emr-sidebar-hover-text: #FFCF8A;
  --emr-text: #FFCF8A; --emr-text-muted: #E0B879; --emr-text-subtle: #C9A26A; --emr-text-faint: #B8935F;
  --emr-border: #4A3B24; --emr-border-strong: #FFCF8A; --emr-divider: #3A2E1C;
  --emr-input-bg: #1A140C; --emr-input-border: #7A6440; --emr-input-text: #FFCF8A; --emr-input-placeholder: #B8935F;
  /* no blue in amber night: the info fill / status blue go warm */
  --emr-status-blue: #A36A22; --emr-status-blue-bg: rgba(224, 160, 80, 0.18);   /* a FILL under white text (4.52:1) */ --skin-fill-info: #F2C98A;
  --emr-modal-bg: #1E1810;
  --emr-map-bg: #14100A; --emr-map-ink: #FFCF8A; --emr-map-border: #FFCF8A;
  --ink-ok: #C8E07A; --ink-bad: #FF8A6A; --ink-gold: #FFB347; --ink-teal: #E8C27A; --ink-info: #F2C98A; --ink-violet: #E6B3A0;
}

/* ═══ COLOUR-BLIND SAFE (Ed 2026-09-27) — a per-user setting (html[data-cb="1"]), not a theme: works in every theme.
 * Okabe-Ito: ok / moving = blue, warn / idling = orange, bad / late = vermillion, parked stays grey. Solid fills keep
 * black ink (≥ 5:1); coloured text is darkened on the light family and brightened on the dark family (≥ 4.5:1 on
 * every ground, Medium light included). Placed after the variants at equal specificity, so it wins in every theme. */
html:root[data-theme="light"][data-cb="1"] {
  --green: #005F94; --success: #005F94; --ok: #005F94;
  --yellow: #7A4C00; --amber: #7A4C00; --orange: #7A4C00; --warn: #7A4C00; --warning: #7A4C00;
  --red: #963C00; --danger: #963C00;
  --green-dim: #D6EAF5; --red-dim: #F8DCCB;
  --emr-status-green: #005F94; --emr-status-yellow: #7A4C00; --emr-status-red: #963C00;
  --emr-status-green-bg: #D6EAF5; --emr-status-yellow-bg: #FBEBCB; --emr-status-red-bg: #F8DCCB;
  --skin-fill-ok: #56B4E9; --skin-fill-warn: #E69F00; --skin-fill-bad: #D55E00;
  --emr-motion-moving: #0072B2; --emr-motion-idling: #E69F00; --emr-motion-late: #D55E00; --emr-motion-parked: #8A8A83;
  --ink-ok: #005F94; --ink-gold: #7A4C00; --ink-bad: #963C00;
  --fill-ok: #0068A3; --fill-warn: #8F5500; --fill-bad: #A84300;
}
html:root[data-theme="dark"][data-cb="1"], html:root[data-theme="dim"][data-cb="1"] {
  --green: #56B4E9; --success: #56B4E9; --ok: #56B4E9;
  --yellow: #E69F00; --amber: #E69F00; --orange: #E69F00; --warn: #E69F00; --warning: #E69F00;
  --red: #F28A4B; --danger: #F28A4B;
  --green-dim: rgba(86, 180, 233, 0.18); --red-dim: rgba(213, 94, 0, 0.20);
  --emr-status-green: #56B4E9; --emr-status-yellow: #E69F00; --emr-status-red: #F28A4B;
  --emr-status-green-bg: rgba(86, 180, 233, 0.18); --emr-status-yellow-bg: rgba(230, 159, 0, 0.18); --emr-status-red-bg: rgba(213, 94, 0, 0.20);
  --skin-fill-ok: #56B4E9; --skin-fill-warn: #E69F00; --skin-fill-bad: #D55E00;
  --emr-motion-moving: #56B4E9; --emr-motion-idling: #E69F00; --emr-motion-late: #D55E00; --emr-motion-parked: #9A9A93;
  --ink-ok: #56B4E9; --ink-gold: #E69F00; --ink-bad: #F28A4B;
  --fill-ok: #0068A3; --fill-warn: #8F5500; --fill-bad: #A84300;
}

/* The page itself: only the typeface changes (13px size and every metric stay as they are). */
html:root body { font-family: var(--sans); }
/* Form controls do not inherit the page font by default — every sub-tab, sub-menu and toolbar button fell back to the
 * system font and read as the old look (coverage audit 2026-09-27: 287+ controls on 60 surfaces). They take Archivo at
 * the control font's line box ('Archivo Control' above) so nothing grows. :where() keeps this at zero specificity, so
 * any rule that deliberately sets a control's font (mono counters etc.) still wins. */
:where(button, input, select, textarea, optgroup) { font-family: 'Archivo Control', var(--sans); }

/* ═══ Base components (skin only: colour, corner, rule — every size, padding and height untouched) ═══════════ */

/* Corners: square. !important only for the radius, because thousands of inline 'border-radius:4px' strings
 * would otherwise win; circles that ARE the shape stay round (avatars, status dots, toggles, spinners, markers). */
html:root :is(button, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea,
  .btn, .emr-btn, .run-btn, .ctrl-btn, .import-btn, .emr-hbtn,
  .badge, .status-pill, .emr-badge, .emr-status-pill, .emr-orders-pill, .emr-pill-outline, .chip, .filter-chip, .emr-orders-chip,
  .card, .tile, .emr-card, .emr-metric-card, .kpi-card, .emr-modal, .emr-drawer, .emr-table, .panel, .section-hdr, .alert-dropdown, .emr-toast)
  :not([class*="avatar"]):not([class*="-dot"]):not(.dot):not(.emr-theme-toggle-track):not(.emr-truck-marker):not([class*="spinner"]):not([class*="leaflet-"]) {
  border-radius: 0 !important;
}

/* Buttons: B's quiet border; primary stays the gold fill with its readable ink. */
html:root :is(.btn, .emr-btn, .run-btn, .ctrl-btn, .import-btn, .emr-hbtn):not(.btn-primary):not(.emr-btn-primary) { border-color: var(--border2); }
html:root :is(.btn-primary, .emr-btn-primary) { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

/* Status pills / badges: SOLID fills with black text (pastel fills in Medium and dark, text stays black). */
html:root :is(.badge-success, .emr-badge-green, .emr-badge-success) { background: var(--skin-fill-ok); color: var(--skin-fill-ink); }
html:root :is(.badge-info, .emr-badge-blue, .emr-badge-cyan) { background: var(--skin-fill-info); color: var(--skin-fill-ink); }
html:root :is(.badge-warning, .emr-badge-yellow, .emr-badge-warning) { background: var(--skin-fill-warn); color: var(--skin-fill-ink); }
html:root :is(.badge-danger, .emr-badge-red) { background: var(--skin-fill-bad); color: var(--skin-fill-ink); }
html:root :is(.badge-muted, .emr-badge-gray) { background: var(--skin-fill-neutral); color: var(--skin-fill-ink); }
html:root .emr-badge-purple { background: var(--skin-fill-violet); color: var(--skin-fill-ink); }
html:root .emr-badge-gold { background: var(--skin-fill-gold); color: var(--skin-fill-ink); }

/* Heavy rules REPLACE borders visually without adding a pixel: drawn as inset shadows. */
html:root #main-app .topnav, html:root .topnav { box-shadow: inset 0 calc(-1 * var(--rule-w)) 0 var(--rule); }
html:root :is(.emr-table, .activity-table) thead th { box-shadow: inset 0 calc(-1 * var(--rule-w) / 2) 0 var(--rule); color: var(--text); }
html:root :is(.emr-card, .emr-metric-card, .kpi-card, .card) { box-shadow: inset 0 var(--rule-w) 0 var(--rule); border-color: var(--hairline); }
html:root :is(.emr-table, .activity-table) td { border-color: var(--hairline); }

/* Gold is a MARKER: the active tab's underline and a selected row's edge — never a fill for chrome. */
html:root :is(.nav-tab.active, .shell-page-tab.active) { border-bottom-color: var(--accent); }

/* ═══ Screen: Settlements + statement detail (skin B screen package, due 09-30) ═════════════════════════════
 * Colour, fill and inset rules only — every size, padding and row height stays (same density).
 * Inline colours (active entity tab, statement IDs, detail boxes) are swapped to B tokens at the source in
 * settlements.js / statementDetail.js (3b ruling: no [style*=] or !important over inline styles). */

/* Status boxes (list + detail): B's SOLID fills with BLACK text (pastel in Medium/dark), replacing PAY-POLISH's
 * white-on-saturated boxes. Same box metrics. */
html:root :is(#panel-settlements, #panel-statement-detail) :is(.status-pill.is-draft:not(.chip), .emr-status-pill[data-status="draft"])             { background: var(--skin-fill-neutral); color: var(--skin-fill-ink); border-color: transparent; }
html:root :is(#panel-settlements, #panel-statement-detail) :is(.status-pill.is-finalized:not(.chip), .emr-status-pill[data-status="finalized"])     { background: var(--skin-fill-info);    color: var(--skin-fill-ink); border-color: transparent; }
html:root :is(#panel-settlements, #panel-statement-detail) :is(.status-pill.is-sent:not(.chip), .emr-status-pill[data-status="sent"])               { background: var(--skin-fill-warn);    color: var(--skin-fill-ink); border-color: transparent; }
html:root :is(#panel-settlements, #panel-statement-detail) :is(.status-pill.is-paid:not(.chip), .emr-status-pill[data-status="paid"])               { background: var(--skin-fill-ok);      color: var(--skin-fill-ink); border-color: transparent; }
html:root :is(#panel-settlements, #panel-statement-detail) :is(.status-pill.is-hold:not(.chip), .emr-status-pill[data-status="hold"])               { background: var(--skin-fill-bad);     color: var(--skin-fill-ink); border-color: transparent; }
html:root :is(#panel-settlements, #panel-statement-detail) :is(.status-pill.is-rolled_over:not(.chip), .emr-status-pill[data-status="rolled_over"]) { background: var(--skin-fill-violet);  color: var(--skin-fill-ink); border-color: transparent; }
html:root :is(#panel-settlements, #panel-statement-detail) .emr-status-pill[data-status="void"]                                                     { background: var(--skin-fill-bad);     color: var(--skin-fill-ink); border-color: transparent; }

/* Status filter chips: outline when off; ON = the same solid fill with a heavy inset rule (no width change). */
html:root #panel-settlements .chip.status-pill:not(.active) { background: transparent; color: var(--text); border-color: var(--border2); }
html:root #panel-settlements .chip.status-pill.active { color: var(--skin-fill-ink); box-shadow: inset 0 0 0 2px var(--rule); border-color: transparent; }
html:root #panel-settlements .chip.status-pill.is-draft.active       { background: var(--skin-fill-neutral); }
html:root #panel-settlements .chip.status-pill.is-finalized.active   { background: var(--skin-fill-info); }
html:root #panel-settlements .chip.status-pill.is-sent.active        { background: var(--skin-fill-warn); }
html:root #panel-settlements .chip.status-pill.is-paid.active        { background: var(--skin-fill-ok); }
html:root #panel-settlements .chip.status-pill.is-hold.active        { background: var(--skin-fill-bad); }
html:root #panel-settlements .chip.status-pill.is-rolled_over.active { background: var(--skin-fill-violet); }

/* The grid head takes the heavy rule. */
html:root #settlements-table thead th { color: var(--text); box-shadow: inset 0 -1px 0 var(--rule); }

/* ═══ Screen: Orders (skin B screen package) ════════════════════════════════════════════════════════════════
 * Colour, fill and inset rules only; the one scrolling header row (#77) and every height stay as they are. */

/* Counter chips (Total / In transit / Del. today · Overdue / BOL / POD): B's counters at TODAY's 28px — no fill,
 * a 3px top bar drawn inset (neutral; gold = active view; red = an exception with a count), condensed bold digits. */
html:root #panel-orders .emr-orders-chip { background: transparent; border-color: transparent; color: var(--text3);
  box-shadow: inset 0 3px 0 var(--hairline); }
html:root #panel-orders .emr-orders-chip:hover { background: var(--bg2); color: var(--text); }
html:root #panel-orders .emr-orders-chip .emr-orders-chip-count { font-family: var(--mono); font-weight: 700; color: var(--text); }
html:root #panel-orders .emr-orders-chip.is-active { background: transparent; color: var(--text); box-shadow: inset 0 3px 0 var(--accent); }
html:root #panel-orders .emr-orders-chip.is-exception.has-count { background: transparent; color: var(--red); box-shadow: inset 0 3px 0 var(--red); }
html:root #panel-orders .emr-orders-chip.is-exception.has-count .emr-orders-chip-count { color: var(--red); }

/* The column head: B's white head with ink labels and the heavy rule under it (was a black band). */
html:root #panel-orders .emr-orders-thead { background: var(--bg) !important; color: var(--text) !important;
  box-shadow: inset 0 calc(-1 * var(--rule-w)) 0 var(--rule) !important; border-bottom-color: transparent !important; }
html:root #panel-orders .emr-orders-thead .emr-orders-th { color: var(--text) !important; }

/* Left summary cards: hairline box with the heavy rule on top. */
html:root #panel-orders .emr-orders-stat-card { border-color: var(--hairline); box-shadow: inset 0 var(--rule-w) 0 var(--rule); }

/* ═══ Screen: Masterboard / truck board (skin B screen package) ═════════════════════════════════════════════
 * Colour and inset rules only. Ribbon segment colours, the dispatcher flag colours and every height stay. */
html:root #panel-wboard #wb-table thead tr.wb-thead-dates th:not([data-today]):not([data-preview]) { background: var(--bg); color: var(--text); }  /* today/preview keep their marker tints */
html:root #panel-wboard #wb-table thead tr.wb-thead-axis th { background: var(--bg); color: var(--text3); border-bottom-color: transparent;
  box-shadow: inset 0 calc(-1 * var(--rule-w)) 0 var(--rule); }
html:root #panel-wboard #wb-table thead tr.wb-thead-axis th[data-axis] span { color: var(--text3); }

/* ═══ Screen: Manifests list (skin B screen package) ═════════════════════════════════════════════════════════
 * Ed's compact rows stay exactly as they are; the base skin already gives the white head, square pills and the
 * TAKE/COUNTER colours. Only the summary tiles change: hairline box with the heavy rule on top (inset), numbers
 * in the condensed face. Tile colours (green profit etc.) are inline and stay. */
html:root #panel-manifest .emr-mfl-kpi { border-color: var(--hairline); box-shadow: inset 0 var(--rule-w) 0 var(--rule); }
html:root #panel-manifest .emr-mfl-kpi-value { font-family: var(--mono); }

/* ═══ Screen: Home (skin B screen package) ═══════════════════════════════════════════════════════════════════
 * The metric cards already take the base card rule. The four inline-styled widgets (Shop Analytics, Expiring
 * Driver Documents, Orders With No Truck, Paperwork Stats) carry B's hairline + inset heavy rule at the source
 * (dashboard.html inline values; 3b ruling). Grounds, paddings and positions unchanged — nothing here. */

/* ═══ Screen: Masterboard — Brokerage → DAT load search (skin B screen package) ════════════════════════════
 * Both heads (saved-search strip, results grid) become B's head: page ground, ink labels, heavy rule under,
 * drawn inset over today's 1px line; the strip's 2px divider takes the rule colour. Column drag markers
 * (gold inset) keep their own shadow. The 3D "Refresh matches" button (operator 2026-08-18) is left as is. */
html:root #panel-brokerage .ds-host :is(table.ds-strip, table.ds-grid) thead th:not(.ds-th-drop-before):not(.ds-th-drop-after) {
  background: var(--bg); color: var(--text); box-shadow: inset 0 calc(-1 * var(--rule-w)) 0 var(--rule); }
html:root #panel-brokerage .ds-host .ds-strip-wrap { border-bottom-color: var(--rule); }

/* ═══ Screen: Brokerage sibling tabs (Trucks, Broker Loads, Portal Loads, Truck Matching, Market Net,
 * Strategies, Need Loads) — skin B screen package. The base skin already squares their chips and sets the
 * faces; every table head in the panel gets ink labels and the heavy rule drawn inset (grounds unchanged).
 * The DAT column-drag markers are the only head shadows in the panel and keep theirs. */
html:root #panel-brokerage thead th:not(.ds-th-drop-before):not(.ds-th-drop-after) {
  color: var(--text); box-shadow: inset 0 calc(-1 * var(--rule-w)) 0 var(--rule); }

/* ═══ Screen: Messages (skin B screen package) ═══════════════════════════════════════════════════════════════
 * Colour only. The "Send SMS" action is B's ink block at the source (dashboard.html inline values). The per-thread
 * delete × loses its grey tile: it asks for background:none inline, but another !important button ground wins;
 * this rule outranks that stylesheet rule (not an inline style).
 * Channel tags (SAFETY / RECRUITING), unread counts and NEEDS REVIEW keep their colours. */
html:root #panel-messages .msg-thread-delete-x { background: transparent !important; color: var(--text3); }
html:root #panel-messages .msg-thread-delete-x:hover { color: var(--red); }

/* ═══ Capacity board (Brokerage ▸ Trucks, and the standalone capacity-board.html) ═══════════════════════════════
 * Its sheet names its own faces ('Inter' / 'IBM Plex Mono', coverage audit 2026-09-27: 5k+ Inter text nodes) and
 * rounded radius tokens. Point them at B's faces — Archivo / Archivo Narrow carry exactly those faces' line boxes, so
 * nothing moves — and square the radii. Tokens only. */
html:root .cap-board-host { --cb-sans: var(--sans); --cb-mono: var(--mono); --cb-radius: 0; --cb-radius-md: 0; }

/* COLOUR-BLIND CUES (Ed 2026-09-27, themes gate c): with html[data-cb="1"] every ok / warn / bad status pill also
 * carries a glyph — ✓ ok, ! warn, ✕ bad — so meaning never rests on hue alone. (Late on the truck board is already a
 * hatched overrun tail in 025b-ribbon-live-labels.js, in every mode — no extra hatch here.)
 * Glyph + no-break space as content (no margin / padding: same density). */
html:root[data-cb="1"] :is(.badge-success, .emr-badge-green, .emr-badge-success, .status-pill.is-paid, .emr-status-pill[data-status="paid"])::before { content: "\2713\00a0"; }
html:root[data-cb="1"] :is(.badge-warning, .emr-badge-yellow, .emr-badge-warning, .status-pill.is-sent, .emr-status-pill[data-status="sent"])::before { content: "!\00a0"; font-weight: 800; }
html:root[data-cb="1"] :is(.badge-danger, .emr-badge-red, .status-pill.is-hold, .emr-status-pill[data-status="hold"], .emr-status-pill[data-status="void"])::before { content: "\2715\00a0"; }