/* ═══════════════════════════════════════════════════════════════════════════
   HELIX — Design System
   Load AFTER dark-theme.css on every page. It is the single source of truth for
   colour, type, depth and motion; page stylesheets read these tokens through
   their own aliases (--inc-*, --sys-*, --cs-*), which are remapped below.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts (self-hosted, no third-party requests) ───────────────────────────── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-latin-var.woff2') format('woff2-variations'),
         url('/fonts/inter-latin-var.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-latin-var.woff2') format('woff2-variations'),
         url('/fonts/jetbrains-mono-latin-var.woff2') format('woff2');
}

/* ── Tokens ─────────────────────────────────────────────────────────────────── */
:root {
    color-scheme: dark;

    /* Type */
    --hx-font:        'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --hx-mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

    /* Surfaces — layered from deepest (page) to highest (popover) */
    --hx-bg:          #080b12;    /* page canvas */
    --hx-surface:     #0d121c;    /* sidebars, nav */
    --hx-card:        #121927;    /* cards, panels */
    --hx-raised:      #172033;    /* hover, inputs, nested panels */
    --hx-overlay:     #1c2740;    /* popovers, menus */
    --hx-border:      rgba(148, 163, 184, 0.12);
    --hx-border-strong: rgba(148, 163, 184, 0.22);
    --hx-hairline:    rgba(255, 255, 255, 0.06);  /* top-edge highlight */

    /* Text hierarchy */
    --hx-text:        #eef2f7;    /* primary */
    --hx-text-2:      #b4bfd0;    /* secondary */
    --hx-muted:       #8391a7;    /* labels, metadata */
    --hx-faint:       #5b687d;    /* placeholders, disabled */

    /* Signature accent — amber. Only for things you can act on / the current selection. */
    --hx-active:      #f5a623;
    --hx-active-rgb:  245, 166, 35;
    --hx-active-2:    #ffcb6b;    /* gradient highlight */
    --hx-active-bg:   rgba(245, 166, 35, 0.10);
    --hx-on-active:   #1a1203;    /* text on a solid accent */

    /* Status — reserved for meaning, never decoration */
    --hx-red:         #f05d5e;    --hx-red-rgb:    240, 93, 94;
    --hx-amber:       #f0a731;    --hx-amber-rgb:  240, 167, 49;
    --hx-orange:      #f2803a;
    --hx-yellow:      #e9c24a;
    --hx-green:       #34c47c;    --hx-green-rgb:  52, 196, 124;
    --hx-blue:        #5b9cf2;    --hx-blue-rgb:   91, 156, 242;
    --hx-violet:      #a98bf5;
    --hx-teal:        #2dd4bf;

    /* Shape */
    --hx-r-sm:        6px;
    --hx-r-md:        10px;
    --hx-r-lg:        14px;
    --hx-r-xl:        20px;

    /* Depth */
    --hx-shadow-1:    0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.2);
    --hx-shadow-2:    0 4px 12px -2px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --hx-shadow-3:    0 18px 40px -12px rgba(0, 0, 0, 0.65), 0 6px 14px -6px rgba(0, 0, 0, 0.4);
    --hx-glow:        0 0 0 1px rgba(var(--hx-active-rgb), 0.35), 0 0 24px -4px rgba(var(--hx-active-rgb), 0.35);
    --hx-panel-grad:  linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 60%);
    --hx-focus:       0 0 0 2px var(--hx-bg), 0 0 0 4px rgba(var(--hx-active-rgb), 0.75);

    /* Motion — short and purposeful */
    --hx-ease:        cubic-bezier(0.22, 1, 0.36, 1);      /* ease-out-quint */
    --hx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --hx-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);   /* slight overshoot */
    --hx-t-fast:      140ms;
    --hx-t:           220ms;
    --hx-t-slow:      380ms;
}

/* ── Page-token aliases: every page now draws from the same system ─────────── */
:root {
    --inc-bg: var(--hx-bg);      --inc-sidebar: var(--hx-surface); --inc-panel: var(--hx-card);
    --inc-border: var(--hx-border); --inc-text: var(--hx-text);    --inc-muted: var(--hx-muted);
    --inc-red: var(--hx-red);    --inc-amber: var(--hx-amber);     --inc-blue: var(--hx-blue);
    --inc-green: var(--hx-green); --inc-font: var(--hx-font);      --inc-mono: var(--hx-mono);

    --sys-bg: var(--hx-bg);      --sys-sidebar: var(--hx-surface); --sys-panel: var(--hx-card);
    --sys-border: var(--hx-border); --sys-text: var(--hx-text);    --sys-muted: var(--hx-muted);
    --sys-red: var(--hx-red);    --sys-amber: var(--hx-amber);     --sys-green: var(--hx-green);
    --sys-font: var(--hx-font);  --sys-mono: var(--hx-mono);

    --cs-bg: var(--hx-bg);       --cs-sidebar: var(--hx-surface);  --cs-panel: var(--hx-card);
    --cs-border: var(--hx-border); --cs-text: var(--hx-text);      --cs-muted: var(--hx-muted);
    --cs-red: var(--hx-red);     --cs-amber: var(--hx-amber);      --cs-blue: var(--hx-blue);
    --cs-green: var(--hx-green); --cs-grey: var(--hx-muted);       --cs-font: var(--hx-font);
}

/* ── Base typography ─────────────────────────────────────────────────────────── */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body {
    font-family: var(--hx-font) !important;
    font-feature-settings: 'cv11', 'ss01', 'ss03';   /* Inter: straight 'l', open digits */
    letter-spacing: -0.006em;
    color: var(--hx-text);
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(var(--hx-active-rgb), 0.045), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(var(--hx-blue-rgb), 0.04), transparent 60%),
        var(--hx-bg) !important;
    background-attachment: fixed !important;
}
button, input, select, textarea { font-family: inherit; letter-spacing: inherit; }
h1, h2, h3, h4 { letter-spacing: -0.02em; font-weight: 650; }

/* Numbers that line up: tables, badges, stats, times */
table, td, th, time, .hx-num,
[class*="__count"], [class*="__value"], [class*="-count"], [class*="badge"], [class*="__time"], [class*="-ts"] {
    font-variant-numeric: tabular-nums;
}

/* Monospace for reference codes, IDs, coordinates */
code, kbd, samp, pre, .hx-mono,
[class*="__ref"], [class*="-ref"], [class*="sid-code"], [class*="__coord"] {
    font-family: var(--hx-mono) !important;
    font-feature-settings: 'zero' 0, 'calt' 1;
    letter-spacing: 0;
}

/* Eyebrow labels: small, uppercase, tracked */
.hx-eyebrow,
.sys-label, .sys-nav__title, .inc-card__head, [class*="stat-card__label"], [class*="__section-title"] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hx-muted);
}

::selection { background: rgba(var(--hx-active-rgb), 0.32); color: #fff; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.22) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.18); border-radius: 8px;
    border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: rgba(148, 163, 184, 0.32); }
*::-webkit-scrollbar-track { background: transparent; }

/* ── Interaction polish ──────────────────────────────────────────────────────── */

/* Visible, consistent keyboard focus — never on mouse click */
:focus { outline: none; }
:focus-visible {
    outline: none !important;
    box-shadow: var(--hx-focus) !important;
    border-radius: var(--hx-r-sm);
}

/* Buttons: smooth hover, tactile press */
button, [role="button"], .btn, a[class*="btn"] {
    transition:
        background-color var(--hx-t-fast) var(--hx-ease),
        border-color var(--hx-t-fast) var(--hx-ease),
        color var(--hx-t-fast) var(--hx-ease),
        box-shadow var(--hx-t) var(--hx-ease),
        transform var(--hx-t-fast) var(--hx-ease),
        opacity var(--hx-t-fast) var(--hx-ease);
}
button:not(:disabled):active, [role="button"]:active, .btn:active, a[class*="btn"]:active {
    transform: translateY(1px) scale(0.985);
}
button:disabled { cursor: not-allowed; opacity: 0.55; }

/* Inputs: calm surface, accent glow on focus */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select, textarea {
    transition: border-color var(--hx-t-fast) var(--hx-ease), box-shadow var(--hx-t) var(--hx-ease), background-color var(--hx-t-fast) var(--hx-ease);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
select:focus, textarea:focus {
    border-color: rgba(var(--hx-active-rgb), 0.6) !important;
    box-shadow: 0 0 0 3px rgba(var(--hx-active-rgb), 0.14) !important;
}
::placeholder { color: var(--hx-faint) !important; opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--hx-active); }

/* ── Surfaces: utility classes for pages to adopt ───────────────────────────── */

/* Panel: card surface with a soft top highlight and layered shadow */
.hx-panel {
    position: relative;
    background: var(--hx-panel-grad), var(--hx-card);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-r-lg);
    box-shadow: inset 0 1px 0 var(--hx-hairline), var(--hx-shadow-2);
}
.hx-panel--interactive { transition: border-color var(--hx-t) var(--hx-ease), box-shadow var(--hx-t) var(--hx-ease), transform var(--hx-t) var(--hx-ease); }
.hx-panel--interactive:hover {
    border-color: var(--hx-border-strong);
    box-shadow: inset 0 1px 0 var(--hx-hairline), var(--hx-shadow-3);
    transform: translateY(-1px);
}

/* Glass: for modals, popovers, floating toolbars over maps */
.hx-glass {
    background: rgba(18, 25, 39, 0.72);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--hx-border-strong);
    box-shadow: inset 0 1px 0 var(--hx-hairline), var(--hx-shadow-3);
}

/* Modal backdrops across the app get the frosted treatment */
.hx-backdrop,
[class*="modal-overlay"], [class*="-overlay"].is-open, .inc-lightbox__backdrop {
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
}

/* Accent button */
.hx-btn-primary {
    background: linear-gradient(180deg, var(--hx-active-2) -40%, var(--hx-active) 100%);
    color: var(--hx-on-active);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--hx-r-md);
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 16px -6px rgba(var(--hx-active-rgb), 0.55);
}
.hx-btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 22px -6px rgba(var(--hx-active-rgb), 0.7); }

/* Status pill */
.hx-pill {
    display: inline-flex; align-items: center; gap: 0.35em;
    padding: 0.15em 0.6em; border-radius: 999px;
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em;
    border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 30%, transparent);
    background: color-mix(in srgb, currentColor 12%, transparent);
}
.hx-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Tables: sticky header, row hover, calm dividers */
.hx-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.hx-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: rgba(13, 18, 28, 0.92);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--hx-muted); border-bottom: 1px solid var(--hx-border);
}
.hx-table tbody tr { transition: background-color var(--hx-t-fast) var(--hx-ease); }
.hx-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.hx-table tbody td { border-bottom: 1px solid var(--hx-hairline); }

/* Tabs with a sliding underline (position set by utils/ui.ts → initTabIndicator) */
.hx-tabs { position: relative; }
.hx-tabs__indicator {
    position: absolute; bottom: 0; left: 0; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--hx-active), var(--hx-active-2));
    box-shadow: 0 0 12px rgba(var(--hx-active-rgb), 0.6);
    transition: transform var(--hx-t) var(--hx-ease), width var(--hx-t) var(--hx-ease);
    pointer-events: none;
}

/* KPI tile */
.hx-kpi { padding: 1rem 1.1rem 0.9rem; overflow: hidden; }
.hx-kpi__label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hx-muted); }
.hx-kpi__value { font-size: 2rem; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; margin-top: 0.35rem; font-variant-numeric: tabular-nums; }
.hx-kpi__delta { font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.hx-kpi__delta--up   { color: var(--hx-red); }     /* more incidents = worse */
.hx-kpi__delta--down { color: var(--hx-green); }
.hx-kpi__delta--flat { color: var(--hx-muted); }
.hx-kpi__accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px 0 0 3px; }

/* Keyboard hint */
kbd, .hx-kbd {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em;
    padding: 0.05em 0.4em; font-size: 0.6875rem; color: var(--hx-text-2);
    background: var(--hx-raised); border: 1px solid var(--hx-border-strong);
    border-bottom-width: 2px; border-radius: 5px;
}