/* ==========================================================================
   VISION Canada — design system
   --------------------------------------------------------------------------
   Tokens, element defaults, and the component primitives every page shares.
   Load this before a page's own <style> block so page rules can still win.

   Naming: tokens are `--vs-*`, shared component classes are `.vs-*`.
   Bare element selectors (select, input, button, table, ::-webkit-scrollbar)
   are styled here on purpose so pages inherit the look without extra classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Surfaces — a five-step dark ramp. Panels sit on --vs-bg; controls and
       hover states step up so depth never depends on borders alone. */
    --vs-bg: #080b10;
    --vs-bg-alt: #0b0f16;
    --vs-surface: #0e131b;
    --vs-surface-2: #151c26;
    --vs-surface-3: #1e2734;
    --vs-border: #212b39;
    --vs-border-2: #2e3a4b;

    /* Text */
    --vs-text: #e8eef5;
    --vs-text-2: #9aa9bb;
    --vs-text-3: #64748b;
    --vs-text-inverse: #04211c;

    /* Brand */
    --vs-accent: #00d4aa;
    --vs-accent-2: #00a88a;
    --vs-accent-soft: rgba(0, 212, 170, 0.12);
    --vs-accent-line: rgba(0, 212, 170, 0.32);
    --vs-gold: #c9b482;

    /* Semantic — reserved for state, never for decoration. */
    --vs-good: #22c55e;
    --vs-info: #38bdf8;
    --vs-warn: #eab308;
    --vs-alert: #f97316;
    --vs-crit: #dc2626;
    --vs-neutral: #7d8590;

    /* Domain hues — one per platform section. Used for the nav indicator,
       card accent rules, and section eyebrows. Kept desaturated so several
       can share a screen without competing. */
    --vs-dom-story: #c9b482;
    --vs-dom-population: #38bdf8;
    --vs-dom-housing: #f59e0b;
    --vs-dom-water: #22d3ee;
    --vs-dom-climate: #fb7185;
    --vs-dom-roads: #a78bfa;
    --vs-dom-integrated: #f43f5e;
    --vs-dom-nia: #00d4aa;

    /* Scenario colours — the same five SSP hues on every page and chart. */
    --vs-ssp1: #22c55e;
    --vs-ssp2: #38bdf8;
    --vs-ssp3: #f97316;
    --vs-ssp4: #a855f7;
    --vs-ssp5: #ef4444;

    /* Type */
    --vs-font: 'DM Sans', 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --vs-font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Consolas, monospace;
    --vs-fs-2xs: 10px;
    --vs-fs-xs: 11px;
    --vs-fs-sm: 12px;
    --vs-fs-base: 13px;
    --vs-fs-md: 14px;
    --vs-fs-lg: 16px;
    --vs-fs-xl: 19px;
    --vs-fs-2xl: 23px;
    --vs-fs-3xl: 30px;
    --vs-fs-4xl: 40px;
    --vs-fs-5xl: 54px;

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

    /* Radius */
    --vs-r-sm: 6px;
    --vs-r: 10px;
    --vs-r-lg: 14px;
    --vs-r-xl: 20px;
    --vs-r-pill: 999px;

    /* Elevation */
    --vs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --vs-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    --vs-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5);
    --vs-glow: 0 0 0 1px var(--vs-accent-line), 0 8px 28px rgba(0, 212, 170, 0.14);

    /* Layout */
    --vs-nav-h: 56px;
    --vs-rail-w: 336px;
    --vs-insight-w: 372px;

    --vs-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --vs-t: 160ms var(--vs-ease);

    /* Legacy aliases. The v1 dashboards declared their own palettes under a
       dozen different names; mapping them here means their existing rules
       adopt the shared colours without every declaration being rewritten. */
    --bg: var(--vs-bg);
    --bg-primary: var(--vs-bg);
    --bg-secondary: var(--vs-surface);
    --bg-tertiary: var(--vs-surface-2);
    --surface: var(--vs-surface);
    --surface2: var(--vs-surface-2);
    --surface-2: var(--vs-surface-2);
    --panel: var(--vs-surface);
    --border: var(--vs-border);
    --accent: var(--vs-accent);
    --accent-dim: var(--vs-accent-2);
    --accent-soft: var(--vs-accent-soft);
    --text: var(--vs-text);
    --text-primary: var(--vs-text);
    --text-secondary: var(--vs-text-2);
    --text-muted: var(--vs-text-3);
    --muted: var(--vs-text-2);
    --muted2: var(--vs-text-3);
    --ubc-gold: var(--vs-gold);
    --up: var(--vs-accent);
    --down: #ff7b72;
    --flat: var(--vs-neutral);
    --warn: var(--vs-warn);
}

/* --------------------------------------------------------------------------
   2. Reset & element defaults
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--vs-bg);
    color: var(--vs-text);
    font-family: var(--vs-font);
    font-size: var(--vs-fs-base);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--vs-text);
}

p { margin: 0 0 var(--vs-3); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--vs-accent);
    text-decoration: none;
    transition: color var(--vs-t);
}
a:hover { color: var(--vs-text); }

code, kbd, pre, .mono, .vs-mono {
    font-family: var(--vs-font-mono);
    font-variant-numeric: tabular-nums;
}

::selection {
    background: var(--vs-accent);
    color: var(--vs-text-inverse);
}

:focus-visible {
    outline: 2px solid var(--vs-accent);
    outline-offset: 2px;
}

/* Scrollbars — the v1 pages each rolled their own; one definition here keeps
   every scrolling panel identical. */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--vs-border-2);
    border-radius: var(--vs-r-pill);
}
::-webkit-scrollbar-thumb:hover { background: #3d4a5c; }
* { scrollbar-width: thin; scrollbar-color: var(--vs-border-2) transparent; }

/* Form controls. Bare-element styling so the eight dashboards' existing
   <select>/<input> markup picks up one appearance with no class changes. */
select,
input[type="text"],
input[type="search"],
input[type="number"] {
    width: 100%;
    padding: 8px 10px;
    background: var(--vs-surface-2);
    color: var(--vs-text);
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-r-sm);
    font-family: var(--vs-font);
    font-size: var(--vs-fs-base);
    transition: border-color var(--vs-t), background var(--vs-t);
}

select {
    appearance: none;
    padding-right: 28px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239aa9bb' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
}

select:hover,
input[type="text"]:hover,
input[type="search"]:hover,
input[type="number"]:hover { border-color: var(--vs-border-2); }

select:focus,
input:focus {
    outline: none;
    border-color: var(--vs-accent);
    background: var(--vs-surface-3);
}

select option { background: var(--vs-surface-2); color: var(--vs-text); }

input[type="range"] {
    width: 100%;
    height: 4px;
    appearance: none;
    background: var(--vs-surface-3);
    border-radius: var(--vs-r-pill);
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--vs-accent);
    border: 2px solid var(--vs-bg);
    box-shadow: 0 0 0 1px var(--vs-accent-line);
    cursor: pointer;
    transition: transform var(--vs-t);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--vs-accent);
    border: 2px solid var(--vs-bg);
    cursor: pointer;
}

input[type="checkbox"] {
    accent-color: var(--vs-accent);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

label { font-size: var(--vs-fs-sm); color: var(--vs-text-2); }

/* --------------------------------------------------------------------------
   3. Top navigation — mounted by VisionUI.mountChrome() on every page
   -------------------------------------------------------------------------- */
.vs-nav {
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: var(--vs-4);
    height: var(--vs-nav-h);
    padding: 0 var(--vs-4);
    background: rgba(8, 11, 16, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--vs-border);
    flex: 0 0 auto;
}

.vs-nav__brand {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    color: var(--vs-text);
    white-space: nowrap;
}
.vs-nav__brand:hover { color: var(--vs-text); }
.vs-nav__mark {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--vs-accent), #0ea5a0);
    display: grid;
    place-items: center;
    font: 700 12px/1 var(--vs-font);
    color: var(--vs-text-inverse);
    letter-spacing: -0.03em;
}
.vs-nav__wordmark { display: flex; flex-direction: column; line-height: 1.1; }
.vs-nav__wordmark b { font-size: var(--vs-fs-md); font-weight: 700; letter-spacing: -0.02em; }
.vs-nav__wordmark span {
    font-size: var(--vs-fs-2xs);
    color: var(--vs-text-3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.vs-nav__links {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.vs-nav__links::-webkit-scrollbar { display: none; }

.vs-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: var(--vs-r-sm);
    font-size: var(--vs-fs-base);
    font-weight: 500;
    color: var(--vs-text-2);
    white-space: nowrap;
    transition: background var(--vs-t), color var(--vs-t);
}
.vs-nav__link:hover { background: var(--vs-surface-2); color: var(--vs-text); }
.vs-nav__link .vs-nav__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vs-dom, var(--vs-accent));
    opacity: 0.45;
    transition: opacity var(--vs-t), transform var(--vs-t);
}
.vs-nav__link:hover .vs-nav__dot { opacity: 0.9; }
.vs-nav__link.is-active {
    background: var(--vs-surface-2);
    color: var(--vs-text);
    font-weight: 600;
}
.vs-nav__link.is-active .vs-nav__dot { opacity: 1; transform: scale(1.25); }
.vs-nav__link.is-active::after {
    content: '';
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--vs-dom, var(--vs-accent));
}

.vs-nav__end {
    display: flex;
    align-items: center;
    gap: var(--vs-2);
    flex: 0 0 auto;
}
.vs-nav__meta {
    font-family: var(--vs-font-mono);
    font-size: var(--vs-fs-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vs-text-3);
    white-space: nowrap;
}

@media (max-width: 1180px) {
    .vs-nav__wordmark span { display: none; }
    .vs-nav__meta { display: none; }
}
@media (max-width: 860px) {
    .vs-nav { gap: var(--vs-2); padding: 0 var(--vs-3); }
    .vs-nav__link { padding: 7px 8px; }
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.vs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--vs-border-2);
    border-radius: var(--vs-r-sm);
    background: var(--vs-surface-2);
    color: var(--vs-text);
    font-family: var(--vs-font);
    font-size: var(--vs-fs-base);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--vs-t), border-color var(--vs-t), color var(--vs-t), transform var(--vs-t);
}
.vs-btn:hover { background: var(--vs-surface-3); border-color: #3d4a5c; color: var(--vs-text); }
.vs-btn:active { transform: translateY(1px); }
.vs-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.vs-btn--primary {
    background: var(--vs-accent);
    border-color: var(--vs-accent);
    color: var(--vs-text-inverse);
    font-weight: 600;
}
.vs-btn--primary:hover { background: #16e6bd; border-color: #16e6bd; color: var(--vs-text-inverse); }

.vs-btn--ghost { background: transparent; border-color: var(--vs-border); color: var(--vs-text-2); }
.vs-btn--ghost:hover { background: var(--vs-surface-2); color: var(--vs-text); }

.vs-btn--sm { padding: 5px 10px; font-size: var(--vs-fs-sm); }
.vs-btn--lg { padding: 11px 20px; font-size: var(--vs-fs-md); }

/* Segmented control — the shared replacement for the many one-off
   `.tab-btn` / `.mode-btn` / `.view-tab` groups in the v1 pages. */
.vs-seg {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--vs-surface-2);
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-r-sm);
}
.vs-seg--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); }
.vs-seg > button {
    flex: 1;
    padding: 6px 9px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--vs-text-2);
    font-family: var(--vs-font);
    font-size: var(--vs-fs-sm);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--vs-t), color var(--vs-t);
}
.vs-seg > button:hover { background: var(--vs-surface-3); color: var(--vs-text); }
.vs-seg > button.active,
.vs-seg > button[aria-selected="true"] {
    background: var(--vs-accent);
    color: var(--vs-text-inverse);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. Cards & panels
   -------------------------------------------------------------------------- */
.vs-card {
    background: var(--vs-surface);
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-r-lg);
    padding: var(--vs-5);
}

.vs-panel {
    background: var(--vs-surface);
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-r);
    overflow: hidden;
}

/* Small uppercase label that opens a control group or a section. */
.vs-eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--vs-fs-2xs);
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--vs-text-3);
}
.vs-eyebrow::before {
    content: '';
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--vs-dom, var(--vs-accent));
}
.vs-eyebrow--plain::before { display: none; }

/* --------------------------------------------------------------------------
   6. KPI cards
   -------------------------------------------------------------------------- */
.vs-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--vs-3);
}

.vs-kpi {
    position: relative;
    padding: var(--vs-4);
    background: var(--vs-surface);
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-r);
    overflow: hidden;
}
.vs-kpi::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: var(--vs-dom, var(--vs-accent));
    opacity: 0.7;
}
.vs-kpi__label {
    font-size: var(--vs-fs-2xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vs-text-3);
}
.vs-kpi__value {
    margin-top: 5px;
    font-family: var(--vs-font-mono);
    font-size: var(--vs-fs-2xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--vs-text);
    line-height: 1.1;
}
.vs-kpi__value small { font-size: 0.5em; color: var(--vs-text-2); font-weight: 500; margin-left: 3px; }
.vs-kpi__note { margin-top: 5px; font-size: var(--vs-fs-xs); color: var(--vs-text-2); line-height: 1.4; }
.vs-kpi__delta { font-weight: 600; }
.vs-kpi__delta--up { color: var(--vs-good); }
.vs-kpi__delta--down { color: #ff7b72; }
.vs-kpi__delta--warn { color: var(--vs-warn); }

/* --------------------------------------------------------------------------
   7. Story block — the narrative frame every dashboard carries
   --------------------------------------------------------------------------
   Answers the five questions the platform asks of each page: what is
   happening, why, where, why planners should care, and what to do about it.
   -------------------------------------------------------------------------- */
.vs-story {
    background: linear-gradient(180deg, var(--vs-surface) 0%, var(--vs-bg-alt) 100%);
    border: 1px solid var(--vs-border);
    border-left: 2px solid var(--vs-dom, var(--vs-accent));
    border-radius: var(--vs-r);
    padding: var(--vs-4);
}
.vs-story__lede {
    font-size: var(--vs-fs-md);
    line-height: 1.5;
    color: var(--vs-text);
    margin-bottom: var(--vs-3);
}
.vs-story__lede strong { color: var(--vs-dom, var(--vs-accent)); font-weight: 600; }

.vs-story__grid {
    display: grid;
    gap: var(--vs-3);
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.vs-story__item { min-width: 0; }
.vs-story__q {
    font-size: var(--vs-fs-2xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vs-text-3);
    margin-bottom: 3px;
}
.vs-story__a { font-size: var(--vs-fs-sm); color: var(--vs-text-2); line-height: 1.5; }
.vs-story__a strong { color: var(--vs-text); font-weight: 600; }

.vs-story__action {
    margin-top: var(--vs-3);
    padding: var(--vs-3);
    border-radius: var(--vs-r-sm);
    background: var(--vs-accent-soft);
    border: 1px solid var(--vs-accent-line);
    font-size: var(--vs-fs-sm);
    line-height: 1.5;
    color: var(--vs-text);
}
.vs-story__action b {
    display: block;
    font-size: var(--vs-fs-2xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vs-accent);
    margin-bottom: 3px;
}

/* Collapsible variant used where vertical space is tight (map workspaces). */
.vs-story--collapsible > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vs-3);
}
.vs-story--collapsible > summary::-webkit-details-marker { display: none; }
.vs-story--collapsible > summary::after {
    content: '▾';
    color: var(--vs-text-3);
    font-size: 11px;
    transition: transform var(--vs-t);
}
.vs-story--collapsible[open] > summary::after { transform: rotate(180deg); }
.vs-story--collapsible[open] > summary { margin-bottom: var(--vs-3); }

/* --------------------------------------------------------------------------
   8. Badges, chips, notes
   -------------------------------------------------------------------------- */
.vs-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--vs-r-pill);
    background: var(--vs-surface-2);
    border: 1px solid var(--vs-border);
    font-size: var(--vs-fs-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vs-text-2);
}
.vs-badge--accent { background: var(--vs-accent-soft); border-color: var(--vs-accent-line); color: var(--vs-accent); }
.vs-badge--good { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.3); color: var(--vs-good); }
.vs-badge--warn { background: rgba(234, 179, 8, 0.12); border-color: rgba(234, 179, 8, 0.3); color: var(--vs-warn); }
.vs-badge--crit { background: rgba(220, 38, 38, 0.14); border-color: rgba(220, 38, 38, 0.32); color: #f87171; }

.vs-note {
    padding: var(--vs-3);
    border-radius: var(--vs-r-sm);
    background: var(--vs-bg-alt);
    border: 1px solid var(--vs-border);
    font-size: var(--vs-fs-xs);
    line-height: 1.55;
    color: var(--vs-text-2);
}
.vs-note strong { color: var(--vs-text); }
.vs-note--warn { border-color: rgba(234, 179, 8, 0.28); background: rgba(234, 179, 8, 0.06); }

.vs-hint { font-size: var(--vs-fs-xs); line-height: 1.5; color: var(--vs-text-3); }

/* --------------------------------------------------------------------------
   9. Legends
   -------------------------------------------------------------------------- */
.vs-legend { display: flex; flex-direction: column; gap: var(--vs-2); }
.vs-legend__scale { height: 8px; border-radius: var(--vs-r-pill); border: 1px solid var(--vs-border); }
.vs-legend__ends {
    display: flex;
    justify-content: space-between;
    font-family: var(--vs-font-mono);
    font-size: var(--vs-fs-2xs);
    color: var(--vs-text-3);
}
.vs-legend__items { display: flex; flex-direction: column; gap: 5px; }
.vs-legend__item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--vs-fs-xs);
    color: var(--vs-text-2);
}
.vs-legend__swatch {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.vs-legend__line { width: 16px; height: 3px; flex: 0 0 auto; border-radius: 2px; }

/* --------------------------------------------------------------------------
   10. Tables
   -------------------------------------------------------------------------- */
.vs-table { width: 100%; border-collapse: collapse; font-size: var(--vs-fs-sm); }
.vs-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    text-align: left;
    background: var(--vs-bg-alt);
    border-bottom: 1px solid var(--vs-border-2);
    font-size: var(--vs-fs-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vs-text-3);
    white-space: nowrap;
}
.vs-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--vs-border);
    color: var(--vs-text-2);
}
.vs-table tbody tr:hover td { background: var(--vs-surface-2); color: var(--vs-text); }
.vs-table .num { text-align: right; font-family: var(--vs-font-mono); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   11. Tooltip / hover card
   -------------------------------------------------------------------------- */
.vs-tooltip {
    position: fixed;
    z-index: 950;
    max-width: 300px;
    padding: 10px 12px;
    background: rgba(14, 19, 27, 0.97);
    border: 1px solid var(--vs-border-2);
    border-radius: var(--vs-r-sm);
    box-shadow: var(--vs-shadow-lg);
    font-size: var(--vs-fs-xs);
    line-height: 1.5;
    color: var(--vs-text-2);
    pointer-events: none;
}
/* --------------------------------------------------------------------------
   12. Loading
   -------------------------------------------------------------------------- */
.vs-spinner {
    width: 26px;
    height: 26px;
    border: 2px solid var(--vs-border-2);
    border-top-color: var(--vs-accent);
    border-radius: 50%;
    animation: vs-spin 0.8s linear infinite;
}
@keyframes vs-spin { to { transform: rotate(360deg); } }

.vs-loading {
    position: absolute;
    inset: 0;
    z-index: 500;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--vs-3);
    background: rgba(8, 11, 16, 0.78);
    backdrop-filter: blur(3px);
    font-size: var(--vs-fs-sm);
    color: var(--vs-text-2);
}
.vs-loading.is-on { display: flex; }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.vs-footer {
    padding: var(--vs-5) var(--vs-6);
    border-top: 1px solid var(--vs-border);
    background: var(--vs-bg-alt);
    font-size: var(--vs-fs-xs);
    color: var(--vs-text-3);
    line-height: 1.7;
}
.vs-footer__inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--vs-4);
}
.vs-footer a { color: var(--vs-text-2); }
.vs-footer a:hover { color: var(--vs-accent); }
.vs-footer__links { display: flex; flex-wrap: wrap; gap: var(--vs-4); }

/* --------------------------------------------------------------------------
   14. Utilities
   -------------------------------------------------------------------------- */
.vs-stack { display: flex; flex-direction: column; gap: var(--vs-3); }
.vs-stack--sm { gap: var(--vs-2); }
.vs-row { display: flex; align-items: center; gap: var(--vs-2); }
.vs-row--between { justify-content: space-between; }
.vs-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.vs-num { font-family: var(--vs-font-mono); font-variant-numeric: tabular-nums; }
.vs-dim { color: var(--vs-text-3); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}