/*
 * TID Group OS — Shared Design System (authoritative, single source of truth)
 * Location: /static/_shared/tidos.css
 *
 * Every portal MUST link this file via:
 *   <link rel="stylesheet" href="/static/_shared/tidos.css">
 *
 * Portal-local overrides (e.g. exec.css, agent_portal.css) layer on top
 * and may only ADD; they must not redefine tokens or primitives.
 *
 * Design tokens, primitives, and component classes for:
 *   - R-amount cells (with drill, confidence, BLOCKED)
 *   - Truck / driver / counterparty / source / atom pills
 *   - Confidence pills + review-state badges
 *   - BLOCKED banner + BLOCKED amount + quantitative gate-pill
 *   - Drill panel (right-slide)
 *   - Evidence trace timeline
 *   - Layout templates (sidebar + main, hero, card grid, dense table)
 *   - Bank-card section groups (active/dormant)
 *   - Compliance stoplight cells with permanent labels
 *   - Refresh pill, pending/stale/ok badges
 *
 * Boardroom unification 2026-05-22 — see PORTAL_UNIFICATION_2026-05-22.md
 *
 * Constraints (Section 12 + WS-F):
 *   - System fonts only (no Google Fonts)
 *   - No external CDN dependencies
 *   - No build step required
 *   - Designed for Tailscale 20kB/s ceiling
 */

/* =====================================================================
 * 1. DESIGN TOKENS
 * =================================================================== */
:root {
    /* Primary palette — calm precision, financial trust */
    --c-primary:        #0a3d62;
    --c-primary-light:  #1e5a8e;
    --c-primary-dark:   #051f33;
    --c-primary-tint:   #e8f0f7;

    /* Surfaces — warm off-white, easy on long admin sessions */
    --c-bg:             #fafafa;
    --c-surface:        #ffffff;
    --c-surface-alt:    #f4f4f5;
    --c-surface-sunken: #ececef;

    /* Borders */
    --c-border:         #e4e4e7;
    --c-border-strong:  #d4d4d8;
    --c-border-focus:   #0a3d62;

    /* Text */
    --c-text-1:         #18181b;   /* primary */
    --c-text-2:         #52525b;   /* secondary */
    --c-text-3:         #a1a1aa;   /* tertiary / placeholder */
    --c-text-inv:       #ffffff;   /* inverted on dark */

    /* Semantic — confidence bands & review states */
    --c-success:        #1a7f37;
    --c-success-bg:     #dafbe1;
    --c-warn:           #f59e0b;
    --c-warn-bg:        #fff8e1;
    --c-danger:         #cf222e;
    --c-danger-bg:      #fdebec;
    --c-info:           #0969da;
    --c-info-bg:        #e3edfd;

    /* BLOCKED — the most important state in the OS */
    --c-blocked:        #ff9800;
    --c-blocked-text:   #b00020;
    --c-blocked-bg:     #fff8e1;
    --c-blocked-stripe: rgba(255, 152, 0, 0.18);

    /* Entity scopes (visual differentiation per brief 10.6) */
    --c-scope-ft:       #6f42c1;   /* FT — purple */
    --c-scope-tid:      #0a3d62;   /* TID — primary */
    --c-scope-ash:      #c05621;   /* Ash — copper */
    --c-scope-shared:   #52525b;   /* shared / personal */

    /* Typography — system stack, no Google Fonts */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
                 Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
                 "Liberation Mono", Menlo, monospace;

    --fs-xs:  11px;
    --fs-sm:  13px;     /* compact tables */
    --fs-md:  15px;     /* body default */
    --fs-lg:  18px;     /* h3 */
    --fs-xl:  22px;     /* h2 */
    --fs-xxl: 28px;     /* h1 */
    --fs-num: 17px;     /* R-amount default */
    --fs-num-hero: 32px;

    /* Spacing — 4px base */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;

    --radius-sm: 4px;
    --radius:    6px;
    --radius-lg: 10px;
    --radius-xl: 16px;

    /* Shadows — restrained */
    --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04),
                0 1px 1px rgba(15, 23, 42, 0.06);
    --shadow-2: 0 4px 8px rgba(15, 23, 42, 0.06),
                0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-3: 0 12px 24px rgba(15, 23, 42, 0.08),
                0 4px 8px rgba(15, 23, 42, 0.06);

    --header-h: 56px;
    --sidebar-w: 240px;
    --sidebar-w-collapsed: 56px;
    --drill-w: 460px;
}

/* Dark mode — system preference only per brief 10.3 */
@media (prefers-color-scheme: dark) {
    :root {
        --c-bg:             #0e1116;
        --c-surface:        #161b22;
        --c-surface-alt:    #1c222b;
        --c-surface-sunken: #0a0d13;
        --c-border:         #2c333d;
        --c-border-strong:  #444c56;
        --c-text-1:         #e6edf3;
        --c-text-2:         #adbac7;
        --c-text-3:         #7a8290;
        --c-primary-tint:   rgba(30, 90, 142, 0.18);
        --c-blocked-bg:     #3d2c00;
        --c-warn-bg:        #3d2c00;
        --c-success-bg:     #093314;
        --c-danger-bg:      #3d0d11;
        --c-info-bg:        #0e2c52;
    }
}

/* =====================================================================
 * 2. RESET + BASE
 * =================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    line-height: 1.45;
    color: var(--c-text-1);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-xxl); line-height: 1.15; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p { margin: 0; }
button { font: inherit; cursor: pointer; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, .mono { font-family: var(--font-mono); font-size: 90%; }

/* Numbers use tabular figures everywhere */
.num, td.num, .amount {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* =====================================================================
 * 3. APP CHROME
 * =================================================================== */
.app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: var(--header-h) 1fr;
    grid-template-areas:
        "side  header"
        "side  main";
    height: 100vh;
    overflow: hidden;
}
.app__header {
    grid-area: header;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    padding: 0 var(--s-5);
    gap: var(--s-4);
    z-index: 10;
}
.app__side {
    grid-area: side;
    background: var(--c-primary-dark);
    color: var(--c-text-inv);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.app__main {
    grid-area: main;
    overflow-y: auto;
    padding: var(--s-6) var(--s-8);
}

/* Header pieces */
.brand {
    display: flex; align-items: center; gap: var(--s-2);
    font-weight: 700; font-size: var(--fs-md);
    color: var(--c-text-1);
}
.brand__mark {
    width: 28px; height: 28px;
    background: var(--c-primary); border-radius: var(--radius-sm);
    display: grid; place-items: center;
    color: white; font-weight: 700; font-size: 12px;
    letter-spacing: -0.5px;
}
.crumbs {
    display: flex; align-items: center; gap: var(--s-2);
    color: var(--c-text-2); font-size: var(--fs-sm);
}
.crumbs__sep { color: var(--c-text-3); }
.crumbs a { color: var(--c-text-2); }
.spacer { flex: 1; }

/* Scope switcher */
.scope-switch {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: 4px 10px;
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    font-size: var(--fs-sm); font-weight: 500;
    color: var(--c-text-1);
}
.scope-switch__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-scope-ft); }
.scope-switch[data-scope="TID"] .scope-switch__dot { background: var(--c-scope-tid); }
.scope-switch[data-scope="ASH"] .scope-switch__dot { background: var(--c-scope-ash); }
.scope-switch[data-scope="SHARED"] .scope-switch__dot { background: var(--c-scope-shared); }

/* As-of timestamp */
.asof {
    color: var(--c-text-2); font-size: var(--fs-sm);
    display: inline-flex; align-items: center; gap: 6px;
}
.asof__pulse {
    width: 6px; height: 6px; border-radius: 50%; background: var(--c-success);
    box-shadow: 0 0 0 0 rgba(26, 127, 55, 0.5);
    animation: pulse 2.5s infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(26, 127, 55, 0.5); }
    70%  { box-shadow: 0 0 0 7px rgba(26, 127, 55, 0); }
    100% { box-shadow: 0 0 0 0 rgba(26, 127, 55, 0); }
}

/* Gate pill */
.gate-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: var(--fs-sm); font-weight: 600;
}
.gate-pill--blocked {
    background: var(--c-blocked-bg);
    color: var(--c-blocked-text);
    border: 1px solid var(--c-blocked);
}
.gate-pill--open {
    background: var(--c-success-bg);
    color: var(--c-success);
    border: 1px solid var(--c-success);
}
.gate-pill__icon { width: 12px; height: 12px; }

/* User */
.user-chip {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: 4px var(--s-2);
    border-radius: var(--radius);
    font-size: var(--fs-sm); color: var(--c-text-2);
}
.user-chip__avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--c-primary-light); color: white;
    display: grid; place-items: center;
    font-weight: 600; font-size: 11px;
}

/* =====================================================================
 * 4. SIDEBAR NAV
 * =================================================================== */
.side__brand {
    padding: 0 var(--s-5);
    height: var(--header-h);
    display: flex; align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: white;
    font-weight: 700;
    letter-spacing: -0.01em;
    gap: var(--s-2);
}
.side__brand-mark {
    width: 26px; height: 26px;
    background: var(--c-primary-light); border-radius: 5px;
    display: grid; place-items: center;
    font-size: 11px;
}
.side__persona {
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.side__persona-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
    color: rgba(255,255,255,0.5);
}
.side__persona-name {
    font-weight: 600; margin-top: 2px;
    display: flex; align-items: center; gap: var(--s-2);
}
.side__nav { padding: var(--s-3) 0; flex: 1; }
.side__nav-group { padding: var(--s-2) var(--s-5) 0; }
.side__nav-title {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
    color: rgba(255,255,255,0.4); padding: var(--s-2) 0;
}
.side__nav-link {
    display: flex; align-items: center; gap: var(--s-3);
    padding: 8px var(--s-5); margin: 0 var(--s-3);
    color: rgba(255,255,255,0.78);
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    text-decoration: none;
}
.side__nav-link:hover {
    background: rgba(255,255,255,0.06);
    color: white; text-decoration: none;
}
.side__nav-link.is-active {
    background: var(--c-primary-light);
    color: white;
}
.side__nav-link svg { flex-shrink: 0; opacity: 0.8; }
.side__nav-link .badge {
    margin-left: auto;
    background: rgba(255,255,255,0.15);
    color: white;
    padding: 1px 6px; border-radius: 999px;
    font-size: 10px; font-weight: 600;
}
.side__footer {
    padding: var(--s-4) var(--s-5);
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    display: flex; flex-direction: column; gap: 4px;
}

/* =====================================================================
 * 5. BLOCKED BANNER + BLOCKED AMOUNT
 * =================================================================== */
.blocked-banner {
    background: var(--c-blocked-bg);
    border: 1px solid var(--c-blocked);
    border-left: 6px solid var(--c-blocked);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--radius-lg);
    margin-bottom: var(--s-5);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--s-4);
    align-items: start;
}
.blocked-banner__icon {
    width: 32px; height: 32px;
    background: var(--c-blocked); border-radius: 8px;
    color: white;
    display: grid; place-items: center;
    font-weight: 700; font-size: 18px;
}
.blocked-banner__title {
    font-size: var(--fs-md); font-weight: 600;
    color: var(--c-blocked-text);
    margin-bottom: 4px;
}
.blocked-banner__body { font-size: var(--fs-sm); color: var(--c-text-1); }
.blocked-banner__body code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 3px; }
.blocked-banner__actions {
    display: flex; gap: var(--s-2);
    align-self: center;
}

/* The actual BLOCKED-state R amount cell */
.amount--blocked {
    display: inline-flex; align-items: center; gap: var(--s-2);
    background:
        repeating-linear-gradient(
            -45deg,
            var(--c-blocked-bg),
            var(--c-blocked-bg) 8px,
            var(--c-blocked-stripe) 8px,
            var(--c-blocked-stripe) 14px
        );
    border: 1px dashed var(--c-blocked);
    color: var(--c-blocked-text);
    padding: 4px 10px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.amount--blocked::before {
    content: ""; width: 10px; height: 10px;
    background: var(--c-blocked); border-radius: 50%;
}
.amount--blocked-hero {
    font-size: var(--fs-num-hero);
    padding: var(--s-3) var(--s-5);
    text-transform: none;
    letter-spacing: 0;
    border-radius: var(--radius-lg);
    border-width: 2px;
}

/* =====================================================================
 * 6. R-AMOUNT CELL + DRILL AFFORDANCE
 * =================================================================== */
.amount {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-weight: 500;
    color: var(--c-text-1);
}
.amount--lg  { font-size: 20px; font-weight: 600; }
.amount--xl  { font-size: var(--fs-num-hero); font-weight: 600; letter-spacing: -0.01em; }
.amount--neg { color: var(--c-danger); }
.amount--pos { color: var(--c-success); }
.amount--muted { color: var(--c-text-2); }

.drillable {
    cursor: pointer;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.12s ease;
    display: inline-flex; align-items: center; gap: 4px;
}
.drillable:hover { border-color: var(--c-primary); }
.drillable::after {
    content: "";
    width: 10px; height: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2352525b' stroke-width='2'><path d='M6 4l4 4-4 4'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
}
.drillable:hover::after { opacity: 1; }

/* =====================================================================
 * 7. PILLS — truck / driver / counterparty / source / atom / event
 * =================================================================== */
.pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px 2px 6px;
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--c-text-1);
    font-weight: 500;
    white-space: nowrap;
}
.pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-text-3); }

/* Truck pill */
.pill--truck { background: var(--c-primary-tint); border-color: rgba(10, 61, 98, 0.2); color: var(--c-primary); }
.pill--truck[data-scope="FT"]  .pill__dot { background: var(--c-scope-ft); }
.pill--truck[data-scope="TID"] .pill__dot { background: var(--c-scope-tid); }
.pill--truck[data-scope="ASH"] .pill__dot { background: var(--c-scope-ash); }
.pill--truck[data-scope="FT"]  { background: rgba(111, 66, 193, 0.08); border-color: rgba(111, 66, 193, 0.25); color: var(--c-scope-ft); }

/* Driver pill */
.pill--driver { background: #fef6e7; border-color: #f5d792; color: #714b04; }
.pill--driver .pill__dot { background: #b8860b; }

/* Counterparty pill */
.pill--cp { background: var(--c-surface); border-color: var(--c-border-strong); }
.pill--cp .role-badge {
    margin-left: 4px;
    padding: 1px 5px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--c-info-bg);
    color: var(--c-info);
    border-radius: 3px;
    font-weight: 700;
}
.pill--cp .role-badge[data-role="supplier"]   { background: var(--c-danger-bg); color: var(--c-danger); }
.pill--cp .role-badge[data-role="correction"] { background: var(--c-warn-bg);   color: #b45309; }
.pill--cp .role-badge[data-role="loan"]       { background: #ede9fe; color: #6b21a8; }

/* Source-file chip */
.chip-source {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 8px;
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--c-text-2);
    font-family: var(--font-mono);
}
.chip-source__type {
    background: var(--c-primary-dark); color: white;
    padding: 0 4px; border-radius: 2px;
    font-size: 9px; font-weight: 700;
    letter-spacing: 0.04em;
}
.chip-source__type[data-t="PDF"]  { background: #cf222e; }
.chip-source__type[data-t="IMG"]  { background: #1a7f37; }
.chip-source__type[data-t="XLSX"] { background: #1a662d; }
.chip-source__type[data-t="CSV"]  { background: #b45309; }
.chip-source__type[data-t="EML"]  { background: #0969da; }
.chip-source__type[data-t="WA"]   { background: #25d366; color: #075e54; }

/* Atom chip */
.chip-atom {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 7px;
    background: var(--c-info-bg);
    border: 1px solid rgba(9, 105, 218, 0.2);
    color: var(--c-info);
    border-radius: var(--radius-sm);
    font-size: 11px; font-family: var(--font-mono);
}
.chip-atom__id { font-weight: 600; }
.chip-event {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 7px;
    background: var(--c-primary-tint);
    border: 1px solid rgba(10, 61, 98, 0.2);
    color: var(--c-primary);
    border-radius: var(--radius-sm);
    font-size: 11px; font-family: var(--font-mono);
}

/* =====================================================================
 * 8. CONFIDENCE PILLS + REVIEW STATE
 * =================================================================== */
.conf {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
    vertical-align: middle;
}
.conf[data-band="solid-dark"] {
    background: var(--c-primary-dark); color: white;
}
.conf[data-band="solid-green"] {
    background: var(--c-success); color: white;
}
.conf[data-band="outline-green"] {
    background: transparent; color: var(--c-success); border-color: var(--c-success);
}
.conf[data-band="outline-amber"] {
    background: transparent; color: #b45309; border-color: var(--c-warn);
}
.conf[data-band="solid-amber"] {
    background: var(--c-warn); color: #18181b;
}
.conf[data-band="outline-red"] {
    background: transparent; color: var(--c-danger); border-color: var(--c-danger);
}

/* Review state badges */
.rs {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 7px;
    border-radius: var(--radius-sm);
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.rs[data-state="auto"]            { background: var(--c-surface-alt); color: var(--c-text-2); }
.rs[data-state="needs_review"]    { background: var(--c-warn-bg); color: #b45309; }
.rs[data-state="provisional"]     { background: var(--c-info-bg); color: var(--c-info); }
.rs[data-state="james_confirmed"] { background: var(--c-success-bg); color: var(--c-success); }
.rs[data-state="disputed"]        { background: var(--c-danger-bg); color: var(--c-danger); }
.rs[data-state="superseded"]      { background: var(--c-surface-sunken); color: var(--c-text-3); text-decoration: line-through; }

/* =====================================================================
 * 9. CARDS, PANELS, HEROES
 * =================================================================== */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.card__head {
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--c-border);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3);
}
.card__title { font-weight: 600; font-size: var(--fs-md); }
.card__sub { font-size: var(--fs-sm); color: var(--c-text-2); margin-top: 2px; }
.card__body { padding: var(--s-4) var(--s-5); }
.card__foot {
    padding: var(--s-3) var(--s-5);
    border-top: 1px solid var(--c-border);
    background: var(--c-surface-alt);
    font-size: var(--fs-sm);
    color: var(--c-text-2);
}

.hero {
    background: linear-gradient(135deg, var(--c-primary-dark) 0%, var(--c-primary) 60%, var(--c-primary-light) 100%);
    color: white;
    border-radius: var(--radius-xl);
    padding: var(--s-6) var(--s-8);
    margin-bottom: var(--s-6);
    position: relative;
    overflow: hidden;
}
.hero::after {
    content: "";
    position: absolute; top: 0; right: 0; bottom: 0; width: 40%;
    background: radial-gradient(ellipse at top right, rgba(255,255,255,0.06), transparent 70%);
    pointer-events: none;
}
.hero__title {
    font-size: 14px; font-weight: 500;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.hero__period { color: rgba(255,255,255,0.5); font-size: 13px; }
.hero__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-5);
    margin-top: var(--s-5);
}
.hero__stat-label {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.hero__stat-value {
    font-size: 24px; font-weight: 600;
    color: white;
    font-variant-numeric: tabular-nums;
}
.hero__stat-value .drillable::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffffaa' stroke-width='2'><path d='M6 4l4 4-4 4'/></svg>");
}
.hero__stat-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    margin-top: 2px;
}

/* =====================================================================
 * 10. TRUCK CARD (the FT portfolio centrepiece)
 * =================================================================== */
.truck-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--s-5);
    margin-bottom: var(--s-6);
}
.truck-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    cursor: pointer;
    display: flex; flex-direction: column;
}
.truck-card:hover {
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
}
.truck-card__head {
    padding: var(--s-4) var(--s-5);
    background: var(--c-primary-dark);
    color: white;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3);
}
.truck-card__id-row {
    display: flex; align-items: baseline; gap: var(--s-2);
    flex-wrap: wrap;
}
.truck-card__id { font-weight: 700; font-size: var(--fs-lg); letter-spacing: 0.02em; }
.truck-card__reg { font-family: var(--font-mono); font-size: var(--fs-sm); color: rgba(255,255,255,0.75); }
.truck-card__model { font-size: 12px; color: rgba(255,255,255,0.6); }
.truck-card__status {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,0.12);
    padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.truck-card__status[data-s="loading"]    { background: rgba(245, 158, 11, 0.3); color: #fde68a; }
.truck-card__status[data-s="in-transit"] { background: rgba(26, 127, 55, 0.3); color: #b3e4c1; }
.truck-card__status[data-s="offload"]    { background: rgba(9, 105, 218, 0.3); color: #aacff9; }
.truck-card__status[data-s="idle"]       { background: rgba(160, 160, 160, 0.3); color: #ccc; }
.truck-card__status[data-s="offline"]    { background: rgba(207, 34, 46, 0.3); color: #f9b4b9; }
.truck-card__status .dot {
    width: 6px; height: 6px; border-radius: 50%; background: currentColor;
    animation: pulse-truck 1.8s infinite;
}
@keyframes pulse-truck {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

.truck-card__driver {
    padding: var(--s-3) var(--s-5);
    border-bottom: 1px solid var(--c-border);
    display: flex; align-items: center; gap: var(--s-3);
    background: var(--c-surface-alt);
}
.truck-card__driver-pic {
    width: 36px; height: 36px;
    background: var(--c-primary-light); color: white;
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 600;
}
.truck-card__driver-name { font-weight: 600; font-size: var(--fs-sm); }
.truck-card__driver-sub { font-size: 11px; color: var(--c-text-2); }

.truck-card__location {
    padding: 8px var(--s-5);
    border-bottom: 1px solid var(--c-border);
    font-size: 12px; color: var(--c-text-2);
    display: flex; align-items: center; gap: 6px;
}
.truck-card__metrics {
    padding: var(--s-4) var(--s-5);
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--s-3) var(--s-4);
    flex: 1;
}
.truck-card__metric-label {
    font-size: 11px; color: var(--c-text-2);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.truck-card__metric-value {
    font-size: var(--fs-md); font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}
.truck-card__cta {
    padding: var(--s-3) var(--s-5);
    background: var(--c-surface-alt);
    border-top: 1px solid var(--c-border);
    display: flex; align-items: center; justify-content: space-between;
    font-size: var(--fs-sm); font-weight: 500;
    color: var(--c-primary);
}
.truck-card__cta svg { transition: transform 0.15s ease; }
.truck-card:hover .truck-card__cta svg { transform: translateX(2px); }

/* =====================================================================
 * 11. STRIP CARDS — AR / float / current-account / assets
 * =================================================================== */
.strip-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s-5);
    margin-bottom: var(--s-6);
}
.strip {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--s-4) var(--s-5);
}
.strip__title {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--c-text-2); font-weight: 600;
    display: flex; align-items: center; justify-content: space-between;
}
.strip__title a { font-size: 11px; font-weight: 500; }
.strip__big {
    font-size: 28px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin: 6px 0 2px;
}
.strip__sub { font-size: 12px; color: var(--c-text-2); }

/* AR aging mini-bars */
.bars-mini {
    display: flex; align-items: flex-end; gap: 5px;
    height: 38px; margin-top: var(--s-3);
}
.bars-mini__col { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; }
.bars-mini__bar {
    width: 100%;
    background: var(--c-primary-light);
    border-radius: 2px 2px 0 0;
    min-height: 4px;
}
.bars-mini__bar[data-band="120"] { background: var(--c-danger); }
.bars-mini__bar[data-band="90"]  { background: #e15759; }
.bars-mini__bar[data-band="60"]  { background: var(--c-warn); }
.bars-mini__bar[data-band="30"]  { background: #4f9bff; }
.bars-mini__bar[data-band="cur"] { background: var(--c-success); }
.bars-mini__lbl { font-size: 9px; color: var(--c-text-3); }

/* =====================================================================
 * 12. DENSE TABLES
 * =================================================================== */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-sm);
}
.table th {
    text-align: left;
    font-weight: 600;
    color: var(--c-text-2);
    background: var(--c-surface-alt);
    padding: 8px 10px;
    border-bottom: 1px solid var(--c-border-strong);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    position: sticky; top: 0; z-index: 1;
}
.table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--c-border);
    vertical-align: middle;
}
.table tbody tr:hover { background: var(--c-surface-alt); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .pill { font-size: 11px; }
.table--zebra tbody tr:nth-child(even) { background: rgba(0,0,0,0.015); }
.table--zebra tbody tr:nth-child(even):hover { background: var(--c-surface-alt); }
.table caption {
    text-align: left;
    padding: var(--s-3) var(--s-4);
    font-weight: 600;
    color: var(--c-text-1);
    background: var(--c-surface-alt);
    border-bottom: 1px solid var(--c-border-strong);
    font-size: var(--fs-sm);
}

/* paid status */
.status-dot { display: inline-flex; align-items: center; gap: 4px; }
.status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-dot[data-s="paid"]    { color: var(--c-success); }
.status-dot[data-s="partial"] { color: var(--c-warn); }
.status-dot[data-s="unpaid"]  { color: var(--c-danger); }
.status-dot[data-s="overdue"] { color: var(--c-danger); }

/* =====================================================================
 * 13. TABS
 * =================================================================== */
.tabs {
    display: flex; gap: 2px;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--s-5);
    overflow-x: auto;
}
.tab {
    padding: var(--s-3) var(--s-4);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text-2);
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
}
.tab:hover { color: var(--c-text-1); }
.tab.is-active {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
    font-weight: 600;
}
.tab .count {
    background: var(--c-surface-alt);
    color: var(--c-text-2);
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
}
.tab.is-active .count { background: var(--c-primary-tint); color: var(--c-primary); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* =====================================================================
 * 14. DRILL PANEL (slide-in right)
 * =================================================================== */
.drill-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    z-index: 100;
    opacity: 0; visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}
.drill-overlay.is-open { opacity: 1; visibility: visible; }

.drill {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: var(--drill-w);
    max-width: 96vw;
    background: var(--c-surface);
    box-shadow: var(--shadow-3);
    border-left: 1px solid var(--c-border);
    z-index: 101;
    transform: translateX(100%);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column;
}
.drill.is-open { transform: translateX(0); }
.drill__head {
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface-alt);
    display: flex; align-items: center; gap: var(--s-3);
}
.drill__title { font-weight: 600; font-size: var(--fs-md); flex: 1; }
.drill__body { flex: 1; overflow-y: auto; padding: var(--s-5); }
.drill__close {
    border: none; background: transparent;
    width: 32px; height: 32px;
    border-radius: var(--radius);
    display: grid; place-items: center;
    color: var(--c-text-2);
}
.drill__close:hover { background: var(--c-surface-sunken); color: var(--c-text-1); }

/* Drill layers (cube → atoms → source) */
.drill__layer {
    padding: var(--s-3) 0;
    border-bottom: 1px dashed var(--c-border);
}
.drill__layer:last-child { border-bottom: none; }
.drill__layer-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px;
    color: var(--c-text-2);
    text-transform: uppercase; letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: var(--s-2);
}
.drill__layer-label .step-no {
    width: 18px; height: 18px;
    background: var(--c-primary); color: white;
    border-radius: 50%;
    display: inline-grid; place-items: center;
    font-size: 10px; font-weight: 700;
}

/* Evidence trace timeline */
.evidence-trace {
    display: flex; flex-direction: column; gap: var(--s-2);
    position: relative;
}
.evidence-trace::before {
    content: ""; position: absolute;
    left: 11px; top: 4px; bottom: 4px;
    width: 2px;
    background: var(--c-border);
}
.evidence-item {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: var(--s-3);
    padding: var(--s-2) 0;
    position: relative;
}
.evidence-item__dot {
    width: 14px; height: 14px;
    background: var(--c-primary);
    border: 3px solid var(--c-surface);
    border-radius: 50%;
    margin: 4px auto 0;
    position: relative; z-index: 1;
}
.evidence-item__ts {
    font-size: 10px; color: var(--c-text-3);
    font-family: var(--font-mono);
}
.evidence-item__body {
    font-size: var(--fs-sm);
    color: var(--c-text-1);
}
.evidence-item__src {
    margin-top: 4px;
    display: flex; flex-wrap: wrap; gap: 4px;
}

/* =====================================================================
 * 15. BUTTONS
 * =================================================================== */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    font-size: var(--fs-sm); font-weight: 500;
    border-radius: var(--radius);
    border: 1px solid var(--c-border-strong);
    background: var(--c-surface);
    color: var(--c-text-1);
    line-height: 1.4;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.btn:hover { background: var(--c-surface-alt); border-color: var(--c-text-3); }
.btn--primary {
    background: var(--c-primary); color: white; border-color: var(--c-primary);
}
.btn--primary:hover { background: var(--c-primary-light); border-color: var(--c-primary-light); }
.btn--danger {
    background: var(--c-danger); color: white; border-color: var(--c-danger);
}
.btn--ghost { background: transparent; border-color: transparent; color: var(--c-text-2); }
.btn--ghost:hover { background: var(--c-surface-alt); color: var(--c-text-1); }
.btn--sm { padding: 3px 8px; font-size: 12px; }
.btn--lg { padding: 9px 16px; font-size: 15px; }

/* =====================================================================
 * 16. RESPONSIVE
 * =================================================================== */
@media (max-width: 900px) {
    .app {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main";
    }
    .app__side {
        position: fixed; top: var(--header-h); bottom: 0; left: 0; width: 80%;
        max-width: 320px;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 50;
    }
    .app__side.is-open { transform: translateX(0); }
    .app__main { padding: var(--s-4); }
    .hero { padding: var(--s-4) var(--s-5); }
    .hero__stat-value { font-size: 20px; }
    .truck-grid { grid-template-columns: 1fr; }
    .strip-grid { grid-template-columns: 1fr; }
    h1 { font-size: 22px; }
    .menu-toggle { display: inline-grid; }
}
.menu-toggle {
    display: none;
    width: 36px; height: 36px;
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    place-items: center;
}

@media (max-width: 600px) {
    .app__main { padding: var(--s-3); }
    .truck-card__metrics { grid-template-columns: 1fr; }
    .hero__grid { grid-template-columns: 1fr 1fr; }
    .drill { width: 100%; }
    .table { font-size: 12px; }
    .table th, .table td { padding: 6px 6px; }
}

/* =====================================================================
 * 17. UTILITIES (sparing — Tailwind-style atoms)
 * =================================================================== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; } .mb-6 { margin-bottom: 24px; }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-md { font-size: var(--fs-md); }
.text-muted { color: var(--c-text-2); }
.text-mute { color: var(--c-text-3); }
.font-mono { font-family: var(--font-mono); }
.tabular { font-variant-numeric: tabular-nums; }
.uppercase { text-transform: uppercase; letter-spacing: 0.05em; }
.w-full { width: 100%; }
.hidden { display: none; }

/* Section header with anchor + meta */
.section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
    flex-wrap: wrap;
}
.section-head h2 { font-size: 20px; }
.section-head .meta { color: var(--c-text-2); font-size: var(--fs-sm); }

/* Sparkline + bar svg */
.sparkline { display: block; }
.spark-grid line { stroke: var(--c-border); stroke-dasharray: 2 3; }
.spark-axis text { fill: var(--c-text-3); font-size: 9px; }
.spark-bar { fill: var(--c-primary-light); }
.spark-line { fill: none; stroke: var(--c-primary); stroke-width: 2; }
.spark-area { fill: rgba(10, 61, 98, 0.08); }

/* Loading skeleton */
.skel {
    background: linear-gradient(90deg, var(--c-surface-alt) 0%, var(--c-surface-sunken) 50%, var(--c-surface-alt) 100%);
    background-size: 200% 100%;
    animation: skel 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
    display: inline-block;
}
@keyframes skel {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Print */
@media print {
    .app__side, .app__header, .drill, .drill-overlay { display: none; }
    .app { display: block; }
    .app__main { padding: 0; }
    .card, .strip, .truck-card { break-inside: avoid; }
}

/* --- NaTIS deadline banner (LANE 5) --- */
.deadline-banner {
  background: #fee2e2; color: #991b1b; border-bottom: 2px solid #dc2626;
  padding: 8px 16px; font-size: 13px; font-weight: 600;
  display: flex; gap: 12px; align-items: center; justify-content: center;
  position: sticky; top: 0; z-index: 100;
}
.deadline-banner.amber { background: #fef3c7; color: #92400e; border-bottom-color: #f59e0b; }
.deadline-banner__chip { background: rgba(220,38,38,0.12); padding: 2px 8px; border-radius: 4px; font-weight: 700; }
.deadline-banner.amber .deadline-banner__chip { background: rgba(245,158,11,0.18); color: #92400e; }

/* =====================================================================
 * R14 §3 — Ex-VAT primary display (R-B'' 2026-05-21)
 * Steph dashboard renders ex-VAT amounts as primary; VAT shown subscript.
 * Legacy paid-only revenue is tagged "incl VAT (paid)" until that column
 * is retired in favour of revenue_billed_excl.
 * =================================================================== */
.ex-vat-badge {
  display: inline-block;
  background: var(--c-primary-tint);
  color: var(--c-primary);
  border: 1px solid var(--c-primary-light);
  padding: 3px 10px;
  border-radius: var(--radius);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.vat-sub {
  color: var(--c-text-2);
  font-size: 80%;
  font-weight: 400;
  margin-left: 4px;
  white-space: nowrap;
}
.vat-legacy {
  color: var(--c-text-3);
  font-size: 75%;
  font-weight: 400;
  margin-left: 6px;
  font-style: italic;
}

/* =====================================================================
 * 18. BOARDROOM UNIFICATION 2026-05-22 — additions
 *
 * These primitives are required by the BOARDROOM_CRITIQUE 2026-05-22
 * (14 visual defects). Existing classes were kept; these add quantitative
 * gate-pills, active/dormant bank sections, labelled stoplight cells,
 * pending/stale/ok badges, a quiet refresh-pill, and a nowrap helper for
 * disclaimer banners.
 * =================================================================== */

/* --- Quantitative gate pill (replaces cartoon striped BLOCKED graphic) */
.gate-pill-q {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: 4px 10px 4px 8px;
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border-strong);
    border-radius: 999px;
    font-size: var(--fs-sm); font-weight: 600;
    color: var(--c-text-1);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.gate-pill-q__label { color: var(--c-text-2); font-weight: 500; }
.gate-pill-q__bar {
    width: 70px; height: 6px;
    background: var(--c-surface-sunken);
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
    margin: 0 4px;
}
.gate-pill-q__bar-fill {
    display: block; height: 100%;
    background: var(--c-text-2);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.gate-pill-q[data-state="open"]    { background: var(--c-success-bg); border-color: var(--c-success); color: var(--c-success); }
.gate-pill-q[data-state="open"]    .gate-pill-q__bar-fill { background: var(--c-success); }
.gate-pill-q[data-state="blocked"] { background: var(--c-warn-bg); border-color: var(--c-warn); color: #92400e; }
.gate-pill-q[data-state="blocked"] .gate-pill-q__bar-fill { background: var(--c-warn); }
.gate-pill-q[data-state="critical"]{ background: var(--c-danger-bg); border-color: var(--c-danger); color: var(--c-danger); }
.gate-pill-q[data-state="critical"].gate-pill-q__bar-fill { background: var(--c-danger); }
.gate-pill-q__pct { font-weight: 700; min-width: 32px; text-align: right; }

/* --- Quiet refresh pill (replaces engineer "UPDATED OVERNIGHT" banner) */
.refresh-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    font-size: var(--fs-xs);
    color: var(--c-text-2);
    font-weight: 500;
    white-space: nowrap;
}
.refresh-pill::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--c-success);
}
.refresh-pill[data-stale="true"]::before { background: var(--c-warn); }

/* --- Status badges: ok / pending / stale / blocked / suspense */
.badge-tid {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    vertical-align: middle;
    border: 1px solid transparent;
}
.badge-ok       { background: var(--c-success-bg); color: var(--c-success); border-color: rgba(26,127,55,0.25); }
.badge-pending  { background: var(--c-surface-alt); color: var(--c-text-2); border-color: var(--c-border-strong); }
.badge-stale    { background: var(--c-warn-bg); color: #92400e; border-color: rgba(245,158,11,0.35); }
.badge-blocked  { background: var(--c-blocked-bg); color: var(--c-blocked-text); border-color: var(--c-blocked); }
.badge-suspense { background: #ede9fe; color: #6b21a8; border-color: rgba(107,33,168,0.25); }

/* --- Disclaimer nowrap (Empire) */
.disclaimer-nowrap { white-space: nowrap; }
.disclaimer-flow code { white-space: nowrap; word-break: keep-all; }

/* --- Bank account card groups (Treasury active/dormant separation) */
.bank-section { margin-bottom: var(--s-6); }
.bank-section__head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: var(--s-3);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--c-border);
}
.bank-section__title {
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--c-text-1);
}
.bank-section__count {
    font-size: 11px; color: var(--c-text-2); font-weight: 500;
}
.bank-section__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s-3);
}
.bank-section--dormant .bank-card {
    opacity: 0.72;
    background: var(--c-surface-alt);
}
.bank-card__title {
    font-size: var(--fs-sm); font-weight: 600;
    color: var(--c-text-1);
    line-height: 1.3;
}
.bank-card__sub {
    font-size: 11px; color: var(--c-text-2);
    font-family: var(--font-mono);
    margin-top: 2px;
}

/* --- Compliance stoplight: cells always have a label (no floating numbers) */
.stoplight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--s-2);
}
.stoplight-cell {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--s-2) var(--s-3);
    text-align: left;
    min-height: 48px;
}
.stoplight-cell__label {
    font-size: 10px;
    color: var(--c-text-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 2px;
}
.stoplight-cell__value {
    font-size: var(--fs-md);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: inline-flex; align-items: center; gap: 5px;
}
.stoplight-cell__value::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--c-text-3);
}
.stoplight-cell[data-light="red"]   .stoplight-cell__value::before { background: var(--c-danger); }
.stoplight-cell[data-light="amber"] .stoplight-cell__value::before { background: var(--c-warn); }
.stoplight-cell[data-light="green"] .stoplight-cell__value::before { background: var(--c-success); }
.stoplight-cell[data-light="red"]   { background: #fff5f5; border-color: #fbcaca; }
.stoplight-cell[data-light="amber"] { background: #fffaf0; border-color: #fcd34d; }
.stoplight-cell[data-light="green"] { background: #f5fff7; border-color: #bbf7d0; }

/* =====================================================================
 * WS-N 2026-05-22 — Rules-book UI primitives
 * R14 §7 routing matrix · §10 float-failure narrative · §11 truck-purchase
 *  · §12 driver cash · §15 9-line P&L · §16 profit-share · §20 Agricoal
 *  · §22 fuel hierarchy · §24 5-state chips · §29 orientation banner
 * =================================================================== */

/* §22 Fuel-cost source hierarchy badge (TFN invoice → supplier → slip → pump → manual) */
.badge-fuel-source {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px; font-weight: 600;
    font-family: var(--font-mono);
    text-transform: uppercase; letter-spacing: 0.04em;
    vertical-align: middle;
    border: 1px solid transparent;
    white-space: nowrap;
}
.badge-fuel-source::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.badge-fuel-source[data-src="tfn_invoice"]   { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.badge-fuel-source[data-src="supplier_stmt"] { background: #dcfce7; color: #166534; border-color: #86efac; }
.badge-fuel-source[data-src="fuel_slip"]     { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.badge-fuel-source[data-src="pump_estimate"] { background: #fed7aa; color: #9a3412; border-color: #fdba74; }
.badge-fuel-source[data-src="manual"]        { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.badge-fuel-source[data-src="unknown"]       { background: var(--c-surface-alt); color: var(--c-text-2); border-color: var(--c-border-strong); }

/* §24 5-state confidence chips — extend the existing 3-state legend.
   Use existing badge-* base + add badge-confirmed/excluded. */
.badge-confirmed  { background: var(--c-success-bg); color: var(--c-success); border-color: rgba(26,127,55,0.30); }
.badge-provisional{ background: #e3edfd; color: #0969da; border-color: rgba(9,105,218,0.25); }
.badge-excluded   { background: var(--c-surface-sunken); color: var(--c-text-3); border-color: var(--c-border-strong); text-decoration: line-through; }
/* badge-blocked and badge-suspense already defined above */

.chip-legend-5 {
    display: inline-flex; gap: 6px; flex-wrap: wrap;
    font-size: 11px;
    align-items: center;
}
.chip-legend-5__label {
    color: var(--c-text-2);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* §29 Orientation banner — one-line, dismissible */
.orientation-banner {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 8px 14px;
    margin-bottom: var(--s-4);
    background: linear-gradient(90deg, rgba(111,66,193,0.10), rgba(10,61,98,0.10));
    border-left: 4px solid var(--c-scope-ft);
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.4;
    color: var(--c-text-1);
}
.orientation-banner__icon {
    flex-shrink: 0;
    width: 18px; height: 18px;
    display: grid; place-items: center;
    color: var(--c-scope-ft);
}
.orientation-banner__body { flex: 1; }
.orientation-banner__body strong { color: var(--c-scope-ft); }
.orientation-banner__dismiss {
    background: none; border: none;
    color: var(--c-text-2);
    font-size: 18px; line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}
.orientation-banner__dismiss:hover { background: var(--c-surface-alt); color: var(--c-text-1); }

/* 2026-05-23 DEFECT-22 — skeleton + api-error states.
 * Replaces blank-screen hang with visible shimmer / explicit error. */
.skeleton {
    display: inline-block;
    width: 100px; height: 1em;
    vertical-align: middle;
    background: linear-gradient(90deg,
        var(--c-surface-alt) 0%,
        var(--c-surface) 50%,
        var(--c-surface-alt) 100%);
    background-size: 200% 100%;
    animation: tidos-skeleton 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm, 4px);
    opacity: .8;
}
@keyframes tidos-skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.api-error {
    display: inline-block;
    font-size: 12px;
    padding: 2px 8px;
    background: var(--c-danger-tint, #fee);
    color: var(--c-danger, #c0392b);
    border: 1px solid var(--c-danger-light, #f5c6cb);
    border-radius: var(--radius-sm, 4px);
}
.api-error a { color: inherit; text-decoration: underline; }

/* §7 fuel routing matrix — canonical card form (light theme).
   The original ft_diesel_breakdown.html used dark-theme ad-hoc colours;
   keep those but expose canonical light-theme variants too. */
.routing-matrix {
    display: grid;
    grid-template-columns: 220px repeat(3, 1fr);
    gap: 4px;
    font-size: 12px;
}
.routing-matrix__cell {
    padding: 10px 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
}
.routing-matrix__cell--head {
    background: var(--c-surface-alt);
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
    color: var(--c-text-2);
}
.routing-matrix__cell--row {
    background: var(--c-surface-alt);
    font-weight: 600;
    color: var(--c-text-1);
}
.routing-matrix__cell--good    { background: #f0fdf4; border-color: #bbf7d0; }
.routing-matrix__cell--sus     { background: #fef3c7; border-color: #fcd34d; }
.routing-matrix__cell--blocked { background: #fee2e2; border-color: #fca5a5; }
.routing-matrix__cell .rm-count {
    font-size: 16px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.routing-matrix__cell .rm-sub {
    font-size: 11px; color: var(--c-text-2);
    margin-top: 3px;
}

/* §11 truck-purchase 7-bucket panel */
.bucket-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-3);
}
.bucket-tile {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-border-strong);
    border-radius: var(--radius);
    padding: var(--s-3) var(--s-3);
}
.bucket-tile[data-bucket="truck_purchase"]    { border-left-color: var(--c-primary); }
.bucket-tile[data-bucket="trailer_purchase"]  { border-left-color: var(--c-primary-light); }
.bucket-tile[data-bucket="true_float"]        { border-left-color: var(--c-success); }
.bucket-tile[data-bucket="reimbursement"]     { border-left-color: var(--c-info); }
.bucket-tile[data-bucket="profit_settlement"] { border-left-color: var(--c-scope-ash); }
.bucket-tile[data-bucket="accounting_invoice"]{ border-left-color: var(--c-text-2); }
.bucket-tile[data-bucket="suspense"]          { border-left-color: var(--c-warn); }
.bucket-tile__label {
    font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--c-text-2);
    font-weight: 600;
}
.bucket-tile__value {
    font-size: 20px; font-weight: 700;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.bucket-tile__sub {
    font-size: 11px; color: var(--c-text-2);
    margin-top: 3px;
}

/* §10 float-failure timeline (vertical narrative) */
.float-narrative {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.float-narrative__row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: var(--s-3);
    align-items: start;
    padding: var(--s-2) var(--s-3);
    border-left: 3px solid var(--c-border-strong);
    background: var(--c-surface);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.float-narrative__row[data-state="critical"] { border-left-color: var(--c-danger); background: #fff5f5; }
.float-narrative__row[data-state="warn"]     { border-left-color: var(--c-warn); background: #fffaf0; }
.float-narrative__row[data-state="ok"]       { border-left-color: var(--c-success); }
.float-narrative__period {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 12px;
    color: var(--c-text-2);
}
.float-narrative__causal {
    font-size: 13px;
    line-height: 1.5;
}
.float-narrative__causal .amt {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* §16 profit-share waterfall card */
.profit-waterfall {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-2);
}
.pw-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: var(--s-3);
    align-items: center;
    padding: var(--s-2) var(--s-3);
    background: var(--c-surface-alt);
    border-radius: var(--radius-sm);
}
.pw-row__step {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--c-primary);
    color: var(--c-text-inv);
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700;
}
.pw-row__label { font-size: 13px; }
.pw-row__amt {
    font-size: 15px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pw-row--branch {
    background: var(--c-info-bg);
    border-left: 3px solid var(--c-info);
}
.pw-branch-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--c-info-bg);
    color: var(--c-info);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pw-branch-pill[data-branch="no_profit"]      { background: var(--c-surface-sunken); color: var(--c-text-2); }
.pw-branch-pill[data-branch="under_threshold"]{ background: #fef3c7; color: #92400e; }
.pw-branch-pill[data-branch="at_threshold"]   { background: var(--c-info-bg); color: var(--c-info); }
.pw-branch-pill[data-branch="split_above"]    { background: var(--c-success-bg); color: var(--c-success); }

/* §20 Agricoal 4-line decomposition */
.agricoal-decomp {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px var(--s-4);
    font-size: 13px;
}
.agricoal-decomp__label { color: var(--c-text-2); padding: 6px 0; }
.agricoal-decomp__amt {
    text-align: right; padding: 6px 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.agricoal-decomp__row--minus .agricoal-decomp__amt { color: var(--c-danger); }
.agricoal-decomp__row--total { border-top: 2px solid var(--c-border-strong); margin-top: 4px; }
.agricoal-decomp__row--total .agricoal-decomp__label,
.agricoal-decomp__row--total .agricoal-decomp__amt {
    font-weight: 700;
    color: var(--c-text-1);
    font-size: 15px;
    padding-top: 8px;
}

/* Mobile: stretch grids to one column on narrow viewports */
@media (max-width: 768px) {
    .routing-matrix { grid-template-columns: 1fr; }
    .routing-matrix__cell--head { display: none; }
    .bucket-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .float-narrative__row { grid-template-columns: 1fr; }
    .pw-row { grid-template-columns: 24px 1fr; }
    .pw-row__amt { grid-column: 2; text-align: right; }
}
@media (max-width: 360px) {
    .bucket-grid { grid-template-columns: 1fr; }
}

/* --- Mobile breakpoint refinement per brief (≤720, ≤400) */
@media (max-width: 720px) {
    .app__main { padding: var(--s-4) var(--s-4); }
    .truck-card__metrics { grid-template-columns: 1fr 1fr; }
    .bank-section__grid { grid-template-columns: 1fr 1fr; }
    .stoplight-grid     { grid-template-columns: 1fr 1fr; }
    .hero { padding: var(--s-4); }
}
@media (max-width: 400px) {
    .app__main { padding: var(--s-3); }
    .bank-section__grid { grid-template-columns: 1fr; }
    .stoplight-grid     { grid-template-columns: 1fr; }
    .truck-card__metrics { grid-template-columns: 1fr; }
    .hero__grid { grid-template-columns: 1fr; }
    .crumbs { display: none; }
}

/* =====================================================================
 * 19. WS-L PORTAL INTERACTIONS 2026-05-22
 *   - Skeleton placeholders for chrome-first render <200ms
 *   - "still loading · refresh to retry" pill (8s timeout fallback)
 *   - "service temporarily unavailable" failure card
 *   - Loadbook active-sort visual state + "Sorted by X desc" pill
 *   - Inter-truck navigation (prev/next + left-rail mini-list)
 *   - Sidebar dead-end "pending"/"empty" badges
 * =================================================================== */

/* --- Skeleton placeholders (R-amount cells, table rows, etc.) */
.skel-bar {
    display: inline-block;
    height: 0.9em;
    width: 6em;
    background: linear-gradient(90deg, var(--c-surface-alt) 0%, var(--c-surface-sunken) 50%, var(--c-surface-alt) 100%);
    background-size: 200% 100%;
    animation: skel 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
    vertical-align: middle;
}
.skel-bar--wide  { width: 10em; }
.skel-bar--narrow { width: 3.5em; }
.skel-row td { padding: 10px 8px; }
.skel-row .skel-bar { width: 100%; max-width: 12em; }

/* --- Calm "request timed out / still loading" pill */
.fetch-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 9px;
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border-strong);
    border-radius: 999px;
    font-size: var(--fs-xs);
    color: var(--c-text-2);
    font-weight: 500;
    white-space: nowrap;
    vertical-align: middle;
}
.fetch-pill[data-state="timeout"] { background: var(--c-warn-bg); color: #92400e; border-color: rgba(245,158,11,0.35); }
.fetch-pill[data-state="error"]   { background: var(--c-danger-bg); color: var(--c-danger); border-color: rgba(220,38,38,0.35); }
.fetch-pill::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--c-text-3);
}
.fetch-pill[data-state="timeout"]::before { background: var(--c-warn); }
.fetch-pill[data-state="error"]::before   { background: var(--c-danger); }

/* --- Service unavailable failure card (page-level) */
.fetch-failure {
    background: var(--c-surface);
    border: 1px solid var(--c-warn);
    border-left: 4px solid var(--c-warn);
    border-radius: var(--radius);
    padding: var(--s-4) var(--s-5);
    margin: var(--s-3) 0;
    display: flex; gap: 14px; align-items: center;
}
.fetch-failure__icon {
    font-size: 22px; color: var(--c-warn);
    flex: 0 0 auto;
}
.fetch-failure__title { font-weight: 600; color: var(--c-text-1); margin-bottom: 2px; }
.fetch-failure__body  { font-size: var(--fs-sm); color: var(--c-text-2); }
.fetch-failure__retry {
    margin-left: auto;
    padding: 6px 14px;
    border: 1px solid var(--c-border-strong);
    background: var(--c-surface-alt);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 500;
}
.fetch-failure__retry:hover { background: var(--c-surface); border-color: var(--c-primary); color: var(--c-primary); }

/* --- Loadbook / sortable-table active sort state */
.lb-table th { cursor: pointer; user-select: none; position: relative; }
.lb-table th[data-sort]:hover { color: var(--c-primary); }
.lb-table th .lb-arrow {
    font-size: 10px;
    margin-left: 4px;
    color: var(--c-text-3);
    transition: color 0.15s ease;
}
.lb-table th.lb-sort-active {
    background: var(--c-primary-tint);
    color: var(--c-primary);
}
.lb-table th.lb-sort-active .lb-arrow {
    color: var(--c-primary);
    font-weight: 700;
}
.sort-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px;
    background: var(--c-primary-tint);
    border: 1px solid var(--c-primary-light);
    color: var(--c-primary);
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.sort-pill:hover { background: var(--c-surface); }
.sort-pill__arrow { font-size: 9px; }

/* --- Per-truck inter-truck navigation */
.truck-nav {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: var(--s-4);
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    flex-wrap: wrap;
}
.truck-nav__btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 11px;
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius);
    color: var(--c-text-1);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--fs-sm);
}
.truck-nav__btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.truck-nav__btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.truck-nav__list {
    display: inline-flex; gap: 2px;
    padding: 2px;
    background: var(--c-surface-alt);
    border-radius: var(--radius);
}
.truck-nav__list a {
    padding: 3px 9px;
    border-radius: 4px;
    text-decoration: none;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    color: var(--c-text-2);
    font-weight: 600;
}
.truck-nav__list a.is-current {
    background: var(--c-primary);
    color: white;
}
.truck-nav__hint { font-size: 11px; color: var(--c-text-3); margin-left: auto; }
.truck-nav__hint kbd {
    display: inline-block;
    padding: 1px 5px;
    border: 1px solid var(--c-border-strong);
    border-bottom-width: 2px;
    border-radius: 3px;
    background: var(--c-surface);
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    line-height: 1;
}

/* Side-rail mini truck list (per-truck page only) */
.truck-mini-list {
    display: flex; flex-direction: column; gap: 4px;
    font-size: var(--fs-sm);
}
.truck-mini-list__row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    background: var(--c-surface-alt);
    border: 1px solid transparent;
    color: var(--c-text-1);
    text-decoration: none;
}
.truck-mini-list__row:hover { background: var(--c-surface); border-color: var(--c-primary); }
.truck-mini-list__row.is-current {
    background: var(--c-primary);
    color: white;
    border-color: var(--c-primary-dark);
}
.truck-mini-list__row.is-current .truck-mini-list__reg { color: rgba(255,255,255,0.75); }
.truck-mini-list__id { font-weight: 700; font-family: var(--font-mono, monospace); }
.truck-mini-list__reg { font-family: var(--font-mono, monospace); color: var(--c-text-2); font-size: 11px; }

/* --- Sidebar dead-end badges */
.side__nav-link .nav-badge {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-2);
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border-strong);
    line-height: 1.4;
}
.side__nav-link .nav-badge[data-state="pending"] {
    background: rgba(245,158,11,0.12); color: #92400e; border-color: rgba(245,158,11,0.4);
}
.side__nav-link .nav-badge[data-state="empty"] {
    background: var(--c-surface-sunken); color: var(--c-text-3); border-color: var(--c-border-strong);
}
.side__nav-link .nav-badge[data-state="count"] {
    background: var(--c-primary-tint); color: var(--c-primary); border-color: var(--c-primary-light);
}