/* ============================================================================
 * Helios Playground — design system (single source of truth)
 * Canonical design language v2 (SeaBee 2026-06-12). Dark data-terminal:
 * pure-black base, lifted ink, 1px hairlines, small radii on controls.
 * Accent = Helios brand gold sampled directly from the logo (#f0c044).
 * tokens.css is integrated here — this file is the only stylesheet to load.
 * ============================================================================ */

:root {
  /* Dark-mode-only product — tells the browser to render form controls
     (select option lists, date pickers, search clear-X, scrollbars) with
     dark defaults instead of OS-light. Without this Chrome / Firefox
     show white dropdown menus with white-on-white text on some platforms.
     Jamie 2026-06-20. */
  color-scheme: dark;
  /* ---- Surfaces (dark mode is the only mode) ----------------------------- */
  --surface-0:    #000000;          /* page background — pure black */
  --surface-1:    #020203;          /* raised panel base */
  --surface-2:    #050507;          /* button-bar inactive pills */
  /* KPI tile background (SeaBee 2026-06-12). Added as a first-class token
     so every holder on the site can share the editorial gradient look.
     --panel-kpi is the flat top stop (shown in the /ui § 16 swatch grid).
     --panel-kpi-grad is the actual gradient applied to holders. */
  --panel-kpi:      #0a0a0d;
  --panel-kpi-grad: linear-gradient(180deg, var(--panel-kpi) 0%, #060608 100%);

  /* Panel-3 — canonical holder bg. NOW the KPI gradient so every .card /
     .tile / .stat / .chart-card / .table-wrap / .toolbar etc. shares the
     same surface as the KPI tile. */
  --panel-3:      var(--panel-kpi-grad);
  --panel-3-flat: var(--panel-kpi);     /* flat fallback for contexts that need a single colour */
  --surface-3:    var(--panel-3);       /* legacy alias follows panel-3 */
  --surface-glass: rgba(30,30,30,0.60);

  /* Canonical table-header background — mid-range grey (Jamie 2026-06-20).
     panel-3 resolves to a near-black gradient which made retrofitted table
     headers look like a black bar. This is a SOLID mid-grey that contrasts
     clearly against the pure-black page bg AND lets white #f5f5f5 text pop.
     Spec at feedback_table_canonical_vaf_style.md. */
  --table-header-bg: #2e2e36;
  --table-header-fg: #f5f5f5;

  /* ---- Ink / text -------------------------------------------------------- */
  /* [A11Y 2026-06-16] All text lifted to high-contrast white per Jamie request.
     Target: 7:1+ contrast ratio against dark bg (#000 / #0a0a0d).
     --ink-strong / --ink: #ffffff (#f5f5f5 min).
     --ink-muted: lifted from #a1a1aa → #c9d1d9 (≈9:1 on black).
     --ink-faint: lifted from #727c8f → #9ca3af (≈6:1 on black). */
  --ink-strong:   #ffffff;          /* headings, prices — pure white */
  --ink:          #f0f0f0;          /* [A11Y] body — near-white */
  --ink-muted:    #c9d1d9;          /* secondary labels — was #a1a1aa */
  --ink-faint:    #9ca3af;          /* captions — was #727c8f */

  /* ---- Hairlines (more distinct than baseline DL) ------------------------ */
  --line:         rgba(255,255,255,0.18);  /* card / panel borders */
  --line-faint:   rgba(255,255,255,0.09);  /* table rows, dividers */
  --line-solid:   #3a3a3e;
  --hairline:     1px;

  /* ---- Market + accent --------------------------------------------------- */
  /* [A11Y 2026-06-16] Brighter, more saturated signal colours per Jamie request.
     Green: #17c089 → #00e5a0 (vivid teal-green, clearer on black).
     Red:   #ff6363 → #ff3b3b (brighter saturated red). */
  --pos:          #00e5a0;          /* bullish / positive — was #17c089 */
  --pos-strong:   #00ff95;          /* strong bullish — was #06b535 */
  --neg:          #ff3b3b;          /* bearish / negative — was #ff6363 */
  --neg-strong:   #ff0000;          /* strong bearish — was #f21313 */
  /* Accent = Helios brand gold (sampled from app/static/img/logo.png — most
     frequent chromatic pixel #f0c044). Replaces the prior BTC orange (#f0c044)
     placeholder. */
  --accent:       #f0c044;          /* primary brand gold */
  --accent-hi:    #f7d267;          /* gradient top, hover */
  --accent-dim:   #c89b30;          /* gradient bottom */
  --info:         #33ccff;
  --teal:         #29abb5;

  /* ---- Typography -------------------------------------------------------- */
  --font-sans: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-num:  "Inter", "IBM Plex Sans", ui-monospace, monospace;

  --fs-display: 40px;               /* hero price */
  --fs-h1:      24px;
  --fs-h2:      19px;
  --fs-body:    15px;               /* [A11Y] base */
  --fs-label:   13px;
  --fs-control: 12px;
  --fs-body-rem: 0.9375rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --lh-tight:   1.2;
  --lh-body:    1.5;
  --tracking-tight: -0.01em;

  /* ---- Radii (small + sharp on controls) -------------------------------- */
  --r-xs:  2px;                     /* chart range buttons */
  --r-sm:  4px;                     /* inputs (compact) */
  --r-md:  6px;                     /* search field */
  --r-lg:  12px;                    /* dropdown items */
  --r-xl:  16px;                    /* legacy alias — do not use on holders */
  /* Canonical holder radius — every holder/container div uses THIS. */
  --r-holder: 12px;

  /* ---- Spacing scale (4px base) ----------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;  --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ---- Elevation -------------------------------------------------------- */
  /* Subtle white outer halo + black drop + faint inset top-edge highlight.
     Halo + inset are dialled BACK (0.04→0.04 outer kept; inset dropped from
     0.10→0.04) so holders read as deep dark, matching /charts/prices.  */
  --shadow-card: 0 0 0 1px rgba(255,255,255,0.04),
                 0 6px 18px rgba(0,0,0,0.45),
                 0 1px 3px rgba(255,255,255,0.04),
                 inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-pop:  0 0 0 1px rgba(255,255,255,0.06),
                 0 16px 36px rgba(0,0,0,0.55),
                 0 2px 6px rgba(255,255,255,0.04);
  --shadow-side: 4px 0 24px 0 rgba(0,0,0,0.50);
  --blur-glass:  blur(20px);

  /* ---- Motion ----------------------------------------------------------- */
  --t-fast: 0.15s ease;
  --t-base: 0.20s ease;

  /* ---- Aliases (legacy var names → new tokens) -------------------------- */
  --bg:           var(--surface-0);
  --panel:        var(--surface-3);
  --panel-2:      var(--surface-2);
  --panel-1:      var(--surface-1);
  --border:       var(--line);
  --border-soft:  var(--line-faint);
  --text:         var(--ink-strong);
  --muted:        var(--ink);
  --muted-2:      var(--ink-muted);
  --faint:        var(--ink-faint);
  --accent-light: var(--accent-hi);
  --accent-dark:  var(--accent-dim);
  --accent-2:     #a78bfa;
  --success:      var(--pos);
  --error:        var(--neg);
  --warning:      #fbbf24;

  /* Tints (warm gold) */
  --hover:      rgba(240, 192, 68, 0.06);
  --active:     rgba(240, 192, 68, 0.12);
  --focus-ring: 0 0 0 3px rgba(240, 192, 68, 0.18);

  /* Shape aliases. Legacy --radius now tracks --r-holder so any inline
     'border-radius: var(--radius)' on a holder div stays unified. */
  --radius:        var(--r-holder);
  --radius-sm:     var(--r-md);
  --radius-xs:     var(--r-sm);
  --radius-control: var(--r-xs);

  /* Sidebar dims */
  --side-w:           280px;
  --side-w-collapsed: 72px;
  --header-h:         76px;
}

* { box-sizing: border-box; }

/* Invisible scrollbars — keep scroll behaviour, hide chrome (newhedge-style). */
html, body, .page-content, .sidebar-nav, .table-wrap, .modal-body,
.dropdown, .toolbar, .chips, [class*="-scroll"], [class*="overflow"] {
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;          /* IE/Edge legacy */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.page-content::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.dropdown::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);                   /* DL: body ink lifted to #d4d4d4 */
  font-size: 15px;                     /* DL [A11Y] base */
  line-height: var(--lh-body);         /* 1.5 */
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1, "cv11" 1;  /* tabular figures by default */
  letter-spacing: 0;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--ink-strong);
}
h1 { font-size: var(--fs-h1); }                                      /* 24px */
h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); }     /* 19px */
h3 { font-size: 17px; font-weight: var(--fw-semibold); }
h4 { font-size: 16px; font-weight: var(--fw-semibold); }
h5 { font-size: 15px; font-weight: var(--fw-semibold); }
h6 { font-size: 14px; font-weight: var(--fw-semibold); }

.display, .hero-price {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}

p { margin: 0 0 1em; }
.muted { color: var(--muted); }

/* ---------- App shell layout ---------- */

.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */

.sidebar {
  width: var(--side-w);
  flex: 0 0 var(--side-w);
  background: var(--surface-0);          /* page chrome — pure black */
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow-side);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
  transition: width var(--t-base, 0.20s) ease,
              flex-basis var(--t-base, 0.20s) ease;
}

/* Collapsed sidebar (Jamie 2026-06-22): icons-only rail at 72px. Toggled
   by body.sidebar-collapsed; persisted in localStorage. Keyboard: '['. */
body.sidebar-collapsed .sidebar {
  width: var(--side-w-collapsed);
  flex: 0 0 var(--side-w-collapsed);
}
body.sidebar-collapsed .sidebar .label,
body.sidebar-collapsed .sidebar .nav-chip,
body.sidebar-collapsed .sidebar .nav-section-head,
body.sidebar-collapsed .sidebar .sidebar-header .brand,
body.sidebar-collapsed .sidebar .sidebar-footer .version,
body.sidebar-collapsed .sidebar .nav-parent .arrow.chev,
body.sidebar-collapsed .sidebar .nav-sub,
body.sidebar-collapsed .sidebar .brand-wordmark,
body.sidebar-collapsed .sidebar .sidebar-search,
body.sidebar-collapsed .sidebar .nav-pinned-empty {
  display: none !important;
}
body.sidebar-collapsed .sidebar .nav-item {
  justify-content: center;
  padding: 8px 0;
}
body.sidebar-collapsed .sidebar .sidebar-header {
  justify-content: center;
  padding: 0;
}
body.sidebar-collapsed .sidebar-collapse-btn {
  transform: rotate(180deg);
}

/* Collapse button — always visible (Jamie 2026-06-22): position
   absolute on the right edge of the sidebar so it stays clickable
   in both expanded and collapsed states. Centred vertically inside
   the header row. */
.sidebar { position: sticky; }  /* establishes containing block */
.sidebar-collapse-btn {
  position: absolute;
  top: 18px; right: -14px;   /* straddles the sidebar's right border */
  z-index: 50;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--accent, #f0c044);
  border-radius: 50%;
  background: var(--surface-0, #000000);
  color: var(--accent, #f0c044);
  cursor: pointer;
  font-size: 16px; font-weight: 700; line-height: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,0.6);
  transition: transform var(--t-fast, 0.12s) ease,
              background var(--t-fast) ease,
              color var(--t-fast) ease;
}
.sidebar-collapse-btn:hover {
  background: var(--accent, #f0c044);
  color: #000000;
}
/* When sidebar is collapsed, anchor the button to the collapsed-rail's
   right edge so it's still half-inside, half-outside (consistent
   affordance). */
body.sidebar-collapsed .sidebar-collapse-btn {
  right: -14px;
}
@media (max-width: 900px) {
  /* Mobile keeps its drawer behaviour; collapse toggle does nothing. */
  body.sidebar-collapsed .sidebar { width: var(--side-w); flex-basis: var(--side-w); }
  .sidebar-collapse-btn { display: none; }
}

/* Sidebar-header MUST share its height with .page-header so the brand row
   lines up horizontally with the page title row across the whole top band.
   Both use --header-h. See DL §0 L13. */
.sidebar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-h);                /* shared with .page-header */
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-0);           /* page chrome — pure black */
  box-sizing: border-box;
}

.sidebar-header img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.sidebar-header .brand {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
}

.sidebar-nav details {
  margin: 0;
}

.sidebar-nav summary {
  list-style: none;
}
.sidebar-nav summary::-webkit-details-marker { display: none; }

.nav-item {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 8px 16px 8px 24px;
  margin: 0 0 2px 0;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  font-size: var(--fs-body-rem);
  font-weight: var(--fw-regular);
  transition: background-color var(--t-fast), color var(--t-fast);
  user-select: none;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-strong);
}

.nav-item.active {
  background: rgba(240, 192, 68, 0.10);
  color: var(--accent-hi);
  font-weight: var(--fw-semibold);
}

/* No accent strip on active nav-item — bg colour + text colour communicate
   selection. Accent strips were a 2008-era convention; clean nav drops them. */

/* Arrow indicator (Jamie 2026-06-20) — replaces Material Symbol icons.
   Single chevron char ›. For parents with children, the chevron is also
   the toggle (.chev), rotates 90° on expand. */
.nav-item .icon {
  /* Legacy slot — hidden, kept for templates that still pass icon=... */
  display: none;
}
.nav-item .arrow {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-faint, #6b7280);
  width: 14px; flex: 0 0 14px;
  margin-right: 10px; text-align: center;
  line-height: 1;
  transition: transform 0.15s ease, color 0.12s ease;
  user-select: none;
}
.nav-item:hover .arrow { color: var(--ink-strong, #f5f5f5); }
.nav-item.active .arrow { color: var(--accent, #f0c044); }

.nav-item .label {
  flex: 1;
}

/* Parent w/ children — chev toggles, children hide unless .open */
.nav-parent .chev {
  cursor: pointer;
  font-size: 14px; font-weight: 700;
}
.nav-parent.open > .nav-item-parent > .chev {
  transform: rotate(90deg);
  color: var(--accent, #f0c044);
}
.nav-children { display: none; }
.nav-parent.open > .nav-children { display: block; }

details[open] > summary .chev {
  transform: rotate(180deg);
}

.nav-sub {
  padding: 2px 0 4px 0;
}

.nav-sub .nav-item {
  padding-left: 56px;
  font-size: 0.9375rem;
}

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 8px 0;
}

.sidebar-footer .version {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.9375rem;
  color: rgba(161, 161, 170, 0.5);
  letter-spacing: 0.05em;
  padding: 4px 24px;
}

.sidebar-footer .nav-item.logout {
  color: var(--error);
}

.sidebar-footer .nav-item.logout:hover {
  background: rgba(255, 99, 99, 0.08);
}

/* ---------- Main content ---------- */

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* Page-header MUST share its height with .sidebar-header (DL §0 L13).
   Use flex column so the h1 + subtitle pair vertically centres inside the
   --header-h band. */
/* Legacy .page-header rules removed 2026-06-20 — superseded by the Option A
   sticky banner defined inline in base.html. .page-header now uses the
   canonical full / compact classes; height is auto. */

.page-content {
  flex: 1;
  padding: 24px;
  overflow: auto;
}

.page-content-inner {
  max-width: 1600px;
  margin: 0 auto;
}

/* ---------- Reusable cards / panels ---------- */

/* Cards & panels — DL §4.5. surface-3, 1px line, inset top hairline highlight. */
.card {
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: var(--r-holder);
  padding: var(--sp-5);                       /* 20px — unified */
  box-shadow: var(--shadow-card);
}

.tile {
  display: block;
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: var(--r-holder);
  padding: var(--sp-5);                       /* 20px — unified */
  text-decoration: none;
  color: var(--ink-strong);
  transition: border-color var(--t-base), transform var(--t-base), background-color var(--t-base);
  box-shadow: var(--shadow-card);
}
.tile:hover {
  border-color: rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.02);
}
.tile h3 { margin: 0 0 6px; font-size: 16px; font-weight: var(--fw-semibold); color: var(--ink-strong); }
.tile p { margin: 0; color: var(--ink); font-size: var(--fs-body-rem); }
.tile.placeholder { opacity: 0.5; pointer-events: none; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

/* ---------- Buttons ---------- */

/* =====================================================================
 * Buttons — modern, flat, no gradient (REDONE 2026-06-12).
 * Solid fills, clean borders, instant colour-only hover. No translateY
 * lift, no box-shadow glow, no brightness filter, no glass blur on default.
 * DL §4.3.
 * ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 8px 14px;
  border: none;
  border-radius: var(--r-md);                 /* 6px */
  font-family: inherit;
  font-size: var(--fs-body-rem);              /* 15px */
  font-weight: var(--fw-semibold);            /* 600 */
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  background: var(--accent);                  /* solid brand gold */
  color: #0a0a0a;
}
.btn:hover    { background: var(--accent-hi); }
.btn:active   { background: var(--accent-dim); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.btn--secondary {
  background: var(--surface-2);
  color: var(--ink-strong);
  border: 1px solid var(--line);
}
.btn--secondary:hover  { background: #1a1a1e; border-color: rgba(255,255,255,0.24); }
.btn--secondary:active { background: #0e0e10; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: none;
}
.btn--ghost:hover  { background: rgba(255,255,255,0.06); color: var(--ink-strong); }
.btn--ghost:active { background: rgba(255,255,255,0.10); }

.btn--danger {
  background: var(--neg);
  color: #0a0a0a;
}
.btn--danger:hover  { background: #ff8585; }
.btn--danger:active { background: var(--neg-strong); }

.btn--icon {
  padding: 0;
  width: 32px;
  height: 32px;
  min-height: 32px;
}

.btn--sm {
  padding: 5px 10px;
  font-size: var(--fs-control);   /* 12px */
  font-weight: var(--fw-medium);
  min-height: 26px;
  border-radius: var(--r-sm);     /* 4px */
}

.btn--lg {
  padding: 11px 18px;
  font-size: 16px;
  min-height: 40px;
  border-radius: var(--r-md);
}

/* ---------- Inputs ---------- */

/* Inputs — DL §4.4. 32px min height, 6px radius, warm focus ring. */
.input, .select, .textarea {
  display: block;
  width: 100%;
  min-height: 32px;
  padding: 6px 12px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink-strong);
  font-family: inherit;
  font-size: var(--fs-body-rem);
  line-height: 1.4;
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.input:hover, .select:hover, .textarea:hover { border-color: rgba(255, 255, 255, 0.18); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-1);
  box-shadow: var(--focus-ring);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); opacity: 1; }
.textarea { resize: vertical; min-height: 80px; }
.input--sm, .select--sm { padding: 6px 8px; font-size: 0.9375rem; width: auto; }
.select option, .select optgroup {
  background: #000;
  color: #f3f4f6;
}

/* Fleet-wide canonical (Jamie 2026-06-20): every <select> on the playground
   gets the dark dropdown treatment so the open option list isn't white-on-
   white. The native popup is painted by the browser; setting bg + color
   directly on option / optgroup is the only reliable way to dark-mode it
   on Chromium. color-scheme: dark on :root catches Firefox + Safari. */
select, select option, select optgroup {
  background-color: #1a1a1a;
  color: #e8e8e8;
}
select option:checked,
select option:hover {
  background-color: #2e2e36;   /* canonical table-header grey */
  color: #ffffff;
}

/* Same problem hits native date / time / search clear-X widgets — color-scheme
   above mostly fixes them, but force explicit dark colours as a safety net. */
input[type=date], input[type=time], input[type=datetime-local],
input[type=month], input[type=week], input[type=search] {
  color-scheme: dark;
  background-color: var(--surface-1, #020203);
  color: var(--ink-strong, #e8e8e8);
}

.field { display: block; margin-bottom: 16px; }
.field-label {
  display: block;
  font-size: 0.9375rem;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 500;
}
.field-help { font-size: 0.9375rem; color: var(--muted); margin-top: 4px; }

.field-row { display: flex; gap: 12px; align-items: flex-end; }
.field-row .field { flex: 1; margin-bottom: 0; }

/* Toggle switch */
.toggle { position: relative; display: inline-block; width: 40px; height: 22px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 22px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.toggle-slider::before {
  content: ""; position: absolute;
  height: 16px; width: 16px;
  left: 2px; top: 2px;
  background: var(--muted);
  border-radius: 50%;
  transition: transform 0.2s, background-color 0.2s;
}
.toggle input:checked + .toggle-slider { background: rgba(240, 192, 68, 0.2); border-color: var(--accent); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); background: var(--accent); }

/* Checkbox */
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
.check span { font-size: 0.9375rem; }

/* ---------- Stat card ---------- */

/* Canonical KPI tile (V1 — SeaBee 2026-06-12). Tinted-dark gradient bg
   (J variant) + live-dot before label (A's structure) + 90-day full-width
   sparkline below the delta row. Exception to L1 holder radius — KPI
   tiles use 4px radius + 14/16 padding so the tile reads as a glanceable
   data chip with a chart, not a full card. */
.stat {
  position: relative;
  overflow: hidden;
  background: var(--panel-3);          /* gradient — matches every holder */
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px 16px 12px;
  min-width: 240px;
}
.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: var(--fw-semibold);
  padding-left: 14px;                /* room for live-dot */
  position: relative;
  margin: 0;
  line-height: 1.2;
}
.stat-label::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--pos);
  box-shadow: 0 0 8px var(--pos);
  transform: translateY(-50%);
}
.stat-label.down::before { background: var(--neg); box-shadow: 0 0 8px var(--neg); }
.stat-label.flat::before { background: var(--ink-faint); box-shadow: none; }
.stat-value {
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin: 4px 0 0;
  line-height: 1.2;
}
.stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}
.stat-delta.up { color: var(--pos); }
.stat-delta.down { color: var(--neg); }
.stat-delta::before { font-size: 9px; line-height: 1; }
.stat-delta.up::before   { content: "▲ "; }
.stat-delta.down::before { content: "▼ "; }
/* Inline 24H / 30D label-value pairs (V1 row). */
.stat-row {
  display: flex;
  gap: 10px;
  margin-top: 3px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.stat-row .k { color: var(--ink-faint); }
.stat-row .pos { color: var(--pos); font-weight: 600; }
.stat-row .neg { color: var(--neg); font-weight: 600; }
/* 90-day sparkline at the bottom (V1 placement). */
.stat-spark,
.stat .sparkline {
  display: block;
  width: 100%;
  height: 28px;
  margin-top: 10px;
}
.stat-spark svg,
.stat .sparkline svg { display: block; width: 100%; height: 100%; overflow: visible; }
.stat-spark path,
.stat-spark polyline,
.stat .sparkline path,
.stat .sparkline polyline {
  fill: none;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.stat-spark.up path,    .stat-spark.up polyline,
.stat .sparkline.up path, .stat .sparkline.up polyline { stroke: var(--pos); }
.stat-spark.down path,  .stat-spark.down polyline,
.stat .sparkline.down path, .stat .sparkline.down polyline { stroke: var(--neg); }
.stat-spark.flat path,  .stat-spark.flat polyline,
.stat .sparkline.flat path, .stat .sparkline.flat polyline { stroke: var(--ink-muted); }

/* ---------- Badges / chips ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-xs);              /* 2px — DL: sharp badges */
  font-size: 12px;
  font-weight: var(--fw-semibold);
  background: var(--surface-2);
  color: var(--ink-strong);
  border: 1px solid var(--line);
  line-height: 1.4;
}
.badge.success { background: rgba(23, 192, 137, 0.12); color: var(--pos); border-color: rgba(23, 192, 137, 0.30); }
.badge.warning { background: rgba(251, 191, 36, 0.10); color: var(--warning); border-color: rgba(251, 191, 36, 0.30); }
.badge.error   { background: rgba(255, 99, 99, 0.10); color: var(--neg); border-color: rgba(255, 99, 99, 0.30); }
.badge.info    { background: rgba(51, 204, 255, 0.10); color: var(--info); border-color: rgba(51, 204, 255, 0.30); }
.badge.accent  { background: rgba(240, 192, 68, 0.12); color: var(--accent); border-color: rgba(240, 192, 68, 0.32); }

/* ---------- Alerts ---------- */

.alert {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-holder);          /* canonical holder radius */
  border: 1px solid;
  font-size: var(--fs-body-rem);
  line-height: var(--lh-body);
  align-items: flex-start;
}
.alert .icon { font-family: 'Material Symbols Outlined'; flex: 0 0 auto; line-height: 1.2; }
.alert.info    { background: rgba(51, 204, 255, 0.08); border-color: rgba(51, 204, 255, 0.30); color: #9ee7ff; }
.alert.success { background: rgba(23, 192, 137, 0.10); border-color: rgba(23, 192, 137, 0.30); color: #4be3aa; }
.alert.warning { background: rgba(251, 191, 36, 0.10); border-color: rgba(251, 191, 36, 0.30); color: #fde68a; }
.alert.error   { background: rgba(255, 99, 99, 0.10); border-color: rgba(255, 99, 99, 0.30); color: #ffa5a5; }

/* ---------- Tables ---------- */

/* Tables — DL §4.6. Horizontal hairlines only, no vertical rules.
   Header 600/13px ink-strong with bottom line, body 13–15px ink-muted,
   row hover #282828 30%. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-holder);
  background: var(--panel-3);
  box-shadow: var(--shadow-card);
}
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-body-rem);
  color: var(--ink);
}
/* Canonical fleet-wide %Δ colour classes — Jamie 2026-06-26.
   Bright green for positive, bright red for negative, bold + tabular nums
   so dense columns stay aligned. Apply on every cell rendering a
   percentage CHANGE (NOT on raw prices, counts, ratios). */
.pct-pos { color: var(--pos); font-weight: 700; font-variant-numeric: tabular-nums; }
.pct-neg { color: var(--neg); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Canonical fleet-wide ticker / symbol class — Jamie 2026-06-26 Sweep 4.
   Mirrors the VAF .va-sym spec — gold accent + weight 800 — so every
   table ticker reads identically across the site. Pages with a page-local
   ticker style (.va-sym, .tc-table .sym, etc.) keep those; this is the
   fallback when nothing local exists. */
.sym { color: var(--accent); font-weight: 800; letter-spacing: 0.02em; }

.table th {
  background: var(--table-header-bg);        /* VAF canonical mid-grey #2e2e36 — was --panel-3 near-black (Jamie 2026-06-26 audit) */
  font-size: var(--fs-body-rem, 0.875rem);  /* VAF canonical — body size, not smaller */
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--table-header-fg);             /* VAF canonical — high-contrast white on grey */
  text-align: left;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  cursor: pointer;
  user-select: none;
}
.table th:hover { color: var(--accent); }
.table th.sort-active { color: var(--accent); }
.table th.sort-asc::after  { content: " ▲"; opacity: 0.85; color: var(--accent); }
.table th.sort-desc::after { content: " ▼"; opacity: 0.85; color: var(--accent); }
.table td {
  padding: 6px 14px;
  border-bottom: 1px solid var(--line-faint);
  color: #e8e8e8;                           /* VAF canonical body cell colour */
  font-size: var(--fs-body-rem);
  font-variant-numeric: tabular-nums;
}
.table td.muted, .table td.muted-cell { color: var(--ink-muted); }
.table td.strong, .table td.value { color: var(--ink-strong); font-weight: var(--fw-semibold); }
.table tbody tr { transition: background-color var(--t-fast); }
.table tbody tr:hover { background: rgba(40, 40, 40, 0.30); }
.table tbody tr:last-child td { border-bottom: none; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Tabs ---------- */

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-6);
}
.tab {
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-family: inherit;
  font-size: var(--fs-body-rem);
  font-weight: var(--fw-medium);
  cursor: pointer;
  position: relative;
  transition: color var(--t-fast);
  min-height: 32px;
}
.tab:hover { color: var(--ink-strong); }
.tab.active { color: var(--accent-hi); }
.tab.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* ---------- Skeleton / loading ---------- */

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.05) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skeleton-line { height: 12px; margin-bottom: 8px; }
.skeleton-line:last-child { margin-bottom: 0; width: 60%; }
.skeleton-block { height: 80px; }

.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Breadcrumbs ---------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.9375rem;
  color: var(--muted);
  margin-bottom: 16px;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep::before { content: "/"; padding: 0 4px; opacity: 0.5; }
.crumbs .current { color: var(--text); font-weight: 500; }

/* ---------- Modal ---------- */

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.modal {
  width: 90%;
  max-width: 480px;
  background: var(--surface-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border: 1px solid var(--line);
  border-radius: var(--r-holder);          /* canonical holder radius */
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: center; }
.modal-title { font-size: 1.125rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.modal-body { padding: 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border-soft); display: flex; gap: 8px; justify-content: flex-end; }

/* ---------- Section header ---------- */

.section-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin: 32px 0 20px;
}
.section-h h2 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.section-h .hint { font-size: 0.9375rem; color: var(--muted); }

/* ---------- Misc ---------- */

.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.col { display: flex; flex-direction: column; gap: 12px; }
.spacer { flex: 1; }
.divider { height: 1px; background: var(--border); margin: 24px 0; }
hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

/* utility */
.mono { font-family: ui-monospace, Consolas, monospace; }
.text-muted { color: var(--muted); }
.text-success { color: var(--success); }
.text-error { color: var(--error); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }
.text-accent { color: var(--accent); }

/* ---------- Login page ---------- */

.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: var(--r-holder);
  padding: 36px;
  box-shadow: var(--shadow-card);
}
.login-card h1 { margin: 0 0 24px; text-align: center; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
.login-card label { display: block; margin-bottom: 16px; }
.login-card label span { display: block; font-size: 0.9375rem; color: var(--muted); margin-bottom: 6px; }
.login-card input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9375rem;
}
.login-card input:focus {
  outline: none;
  border-color: var(--accent);
}
.login-card button {
  width: 100%;
  margin-top: 8px;
}
.login-card .error {
  color: var(--error);
  font-size: 0.9375rem;
  margin-top: 12px;
  text-align: center;
}

/* ---------- Empty state ---------- */

.empty-state {
  margin-top: 80px;
  text-align: center;
}

/* ---------- Footer (page footer when needed) ---------- */

.page-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ---------- Chips (filter / preset / asset) ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;                  /* pill */
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-strong);
  font-size: var(--fs-body-rem);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  user-select: none;
}
.chip:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}
.chip.active {
  background: rgba(240, 192, 68, 0.16);
  border-color: var(--accent);
  color: var(--accent-hi);
}
.chip.active:hover {
  background: rgba(240, 192, 68, 0.22);
  border-color: var(--accent-hi);
}
.chip--removable {
  padding-right: 6px;
}
/* × glyph in chips: replace any text node with a centred ::before so it
   doesn't sit a pixel low. Markup may pass either "×" or "x" — we ignore it. */
.chip--removable .chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 0;                    /* hide literal text node */
  line-height: 1;
}
.chip--removable .chip-x::before {
  content: "×";
  display: block;
  font-size: 13px;
  line-height: 1;
  font-weight: var(--fw-bold);
  font-family: var(--font-sans);
  transform: translateY(-1px);     /* optical centring nudge */
}
.chip--removable .chip-x:hover {
  background: rgba(0, 0, 0, 0.5);
}
.chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--muted);
}

/* ---------- Date range picker ---------- */

.date-range {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}
.date-range .field {
  min-width: 150px;
}
.date-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* ---------- Toolbar (filter rows above charts/tables) ---------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) 14px;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);          /* unified holder padding */
  background: var(--panel-3);              /* unified holder background */
  border: 1px solid var(--line);
  border-radius: var(--r-holder);
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-card);
}
.toolbar-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.toolbar-group .toolbar-label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.toolbar-divider {
  width: 1px;
  height: 22px;
  background: var(--border);
  flex-shrink: 0;
}
.toolbar-spacer {
  margin-left: auto;
}
.toolbar form.toolbar-group {
  display: inline-flex;
  margin: 0;
}
.toolbar .chip {
  padding: 4px 10px;
  font-size: var(--fs-control);
  min-height: 28px;
}
.toolbar .input--sm {
  padding: 4px 8px;
  font-size: var(--fs-control);
  line-height: 1;
  min-width: 0;
  width: 118px;
  min-height: 28px;
}
.toolbar .btn--sm {
  padding: 5px 12px;
  font-size: var(--fs-control);
  min-height: 28px;
}
.toolbar .segmented button {
  padding: 5px 12px;
  font-size: var(--fs-control);
  min-height: 28px;
}

/* ---------- Charts: multi-series controls ---------- */

.charts-form {
  display: block;
  margin-bottom: 12px;
}
.series-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.series-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: var(--sp-3) var(--sp-4);         /* 12 / 16 — unified */
  background: var(--panel-3);             /* unified holder background */
  border: 1px solid var(--line);
  border-radius: var(--r-holder);
  box-shadow: var(--shadow-card);
}
.series-row .select--sm {
  height: 28px;
  padding: 4px 8px;
  font-size: 0.9375rem;
}
.series-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 700;
  flex-shrink: 0;
}
.series-color {
  width: 32px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  cursor: pointer;
}
.series-color::-webkit-color-swatch-wrapper { padding: 2px; }
.series-color::-webkit-color-swatch { border: none; border-radius: 3px; }
.series-color::-moz-color-swatch { border: none; border-radius: 3px; }
.series-remove {
  margin-left: auto;
  padding: 2px 8px;
  height: 28px;
  font-size: 0.9375rem;
  line-height: 1;
}

/* ---------- Sparklines (inline mini-charts) ---------- */

/* Sparklines fill their container fully (DL §4.7 — no fixed pixel widths
   that leave 20% of the box empty). Container chooses width; SVG must use
   preserveAspectRatio="none" + width="100%" + viewBox to scale. */
.sparkline {
  display: block;
  width: 100%;
  height: 28px;
  vertical-align: middle;
}
.sparkline svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.sparkline path {
  fill: none;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.sparkline.up path { stroke: var(--pos); }
.sparkline.down path { stroke: var(--neg); }
.sparkline.flat path { stroke: var(--ink-muted); }
.sparkline-fill { opacity: 0.18; }

/* ---------- Regime badges (BCRS / market regime) ---------- */

.regime {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.regime-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.regime.risk-on  { background: rgba(23, 192, 137, 0.16); color: var(--pos); }
.regime.risk-on  .regime-dot { background: var(--pos); }
.regime.neutral  { background: rgba(161, 161, 170, 0.16); color: var(--ink); }
.regime.neutral  .regime-dot { background: var(--ink-muted); }
.regime.elevated { background: rgba(251, 191, 36, 0.16); color: var(--warning); }
.regime.elevated .regime-dot { background: var(--warning); }
.regime.stress   { background: rgba(255, 99, 99, 0.16); color: var(--neg); }
.regime.stress   .regime-dot { background: var(--neg); }

/* ---------- Chart container ---------- */

.chart-card {
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: var(--r-holder);
  padding: var(--sp-5);                       /* 20px — unified */
  box-shadow: var(--shadow-card);
}
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 8px;
}
.chart-title {
  font-size: 16px;
  font-weight: var(--fw-semibold);
  color: var(--ink-strong);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}
.chart-subtitle {
  font-size: var(--fs-body-rem);
  color: var(--ink-muted);
  margin: 2px 0 0;
}
.chart-actions {
  display: flex;
  gap: 6px;
}
.chart-canvas {
  width: 100%;
  height: 320px;
}
.chart-canvas--tall { height: 420px; }
.chart-canvas--short { height: 200px; }
/* Canonical macro-panel size — bumped from 200px → 360px so each card is
   actually readable. Use this for any grid-of-panels layout (Jamie 2026-06-23). */
.chart-canvas--panel { height: 360px; }
.chart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
  color: var(--muted);
}
.chart-footer { position: relative; }
.chart-footer .source { letter-spacing: 0.02em; color: var(--ink-muted); font-style: italic; }
/* Watermark sits at TRUE 50% of the parent div, not between siblings. */
.chart-footer .watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 5px));   /* +5 accounts for padding-top: 10px */
  font-weight: var(--fw-bold);
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}
.chart-footer .author {
  font-weight: var(--fw-semibold);
  color: var(--ink-strong);
}

/* ---------- Stat card with sparkline ---------- */

/* Legacy .stat--with-spark layout — kept for backwards-compatible markup
   that pre-dates the V1 canonical (spark sits below value, not in a side
   column). The modifier is a no-op now; the spark child renders below. */
.stat--with-spark .spark-col {
  display: block;
  width: 100%;
}
.stat--with-spark .spark-col .text-muted {
  font-size: 10px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}

/* ---------- Segmented control (log/linear, 1d/7d/30d) ---------- */

/* =====================================================================
 * .button-bar — newhedge-style period selector (L14 updated 2026-06-12).
 * Container is transparent and borderless — blends with the page bg.
 * Inactive children are transparent (black bg via parent), no dividers.
 * Only the ACTIVE child gets a subtle gray pill background. The bar
 * reads as a single quiet row until you spot the one selected item.
 * ===================================================================== */
.button-bar {
  display: inline-flex;
  align-items: stretch;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  font-size: 0;                          /* eat inline-block whitespace */
  gap: 0;
}
.button-bar > button,
.button-bar > .chip,
.button-bar > span,
.button-bar > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #151517;                   /* grey — 50% darker than prior #2a2a2e */
  border: none;
  border-radius: 0;                      /* sharp internal joins */
  color: var(--ink-strong);              /* white text */
  font-family: var(--font-sans);
  font-size: var(--fs-control);          /* 12px */
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  padding: 6px 14px;
  min-height: 28px;
  cursor: pointer;
  user-select: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color var(--t-base), color var(--t-base);
}
/* Round only the outer ends of the bar — first child's left, last child's
   right. Middle children keep sharp joins so the bar reads as one pill. */
.button-bar > *:first-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.button-bar > *:last-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}
.button-bar > *:hover {
  background: #1f1f23;                   /* a step up from the darker base */
  color: var(--ink-strong);
}
.button-bar > .active,
.button-bar > [aria-pressed="true"] {
  background: var(--surface-0);          /* pure black — blends with page bg */
  color: var(--ink-strong);
}
.button-bar > *:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  position: relative;
  z-index: 1;
}

/* Period / range / segmented control — DL §4.1. The crisp look:
   surface-2 base, sharp 2px radius, 12px medium, transparent border. */
.segmented {
  display: inline-flex;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  padding: 0;
  gap: var(--sp-2);
}
.segmented button {
  background: var(--surface-2);
  border: 1px solid transparent;
  color: #ffffff;
  font-size: var(--fs-control);            /* 12px DL */
  font-weight: var(--fw-medium);
  padding: 5px 12px;
  border-radius: var(--r-xs);              /* 2px sharp */
  cursor: pointer;
  letter-spacing: 0;
  line-height: 1;
  transition: background-color var(--t-base), color var(--t-base);
}
.segmented button:hover { background: #333333; color: var(--ink-strong); }
.segmented button.active {
  background: #404040;
  color: var(--accent);
  border-color: rgba(240, 192, 68, 0.3);
}
.segmented button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Sortable table extras ---------- */

.table th.sortable {
  cursor: pointer;
  user-select: none;
}
.table th.sortable:hover { color: var(--accent); }
.table th .sort-icon {
  font-size: 0.9375rem;
  opacity: 0.5;
  margin-left: 4px;
}
.table th.sort-asc  .sort-icon::before { content: "▲"; opacity: 1; color: var(--accent); }
.table th.sort-desc .sort-icon::before { content: "▼"; opacity: 1; color: var(--accent); }
.table th .sort-icon:not(:has(*))::before {
  content: "↕";
}

.table td.spark-cell {
  width: 100px;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* ---------- Pagination ---------- */

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px 0;
  font-size: 0.9375rem;
  color: var(--muted);
}
.pagination .pager {
  display: flex;
  gap: 4px;
}
.pagination .pager button {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 0.9375rem;
}
.pagination .pager button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #0d0d0d;
}
.pagination .pager button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- KPI dashboard grid (denser than .grid) ---------- */

/* KPI grid — tuned so 1080p (1920w) displays 5 cards per row.
   Content width at 1920p with the 280px sidebar + 24px padding = ~1592.
   minmax(260,1fr) + 10px gap → 5 cards fit at (1592-40)/5 ≈ 310 each.
   Below ~1432 wide the grid drops to 4 / 3 / 2 / 1 columns automatically. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

/* ---------- Section divider ---------- */

.divider {
  height: 1px;
  background: var(--border);
  margin: 32px 0;
}
.page-footer .version { font-family: ui-monospace, Consolas, monospace; }

/* ============================================================================
 * Helios chart canonical footers (EN 2026-05-28, items 14-15).
 * DOM-level overlay for non-ECharts containers (tables, custom viz). ECharts
 * charts use graphic-element text inside the canvas via HeliosChart.decorate().
 * ============================================================================ */
.helios-chart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  padding: 4px 8px 0;
  font-size: var(--fs-body-rem);
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}
.helios-chart-footer .helios-src,
.helios-chart-footer .helios-byline {
  white-space: nowrap;
}
/* Canonical §7 — source line is ITALIC. */
.helios-chart-footer .helios-src { font-style: italic; font-weight: var(--fw-semibold); }
/* Canonical §6 — byline is BOLD. */
.helios-chart-footer .helios-byline { font-weight: var(--fw-bold); text-align: right; color: var(--ink-strong); }

/* ============================================================================
 * Glass dropdown / menu — DL §4.2.
 * Container + items + dividers + selected state.
 * ============================================================================ */
.dropdown {
  background: var(--surface-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border: 1px solid var(--line);
  border-radius: var(--r-holder);          /* canonical holder radius */
  box-shadow: var(--shadow-pop);
  padding: var(--sp-1) 0;
  min-width: 200px;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin: 4px 8px;
  border-radius: var(--r-lg);
  color: var(--ink-strong);
  font-size: var(--fs-body-rem);
  cursor: pointer;
  transition: background-color var(--t-base);
  min-height: 32px;
}
.dropdown-item:hover { background: rgba(255, 255, 255, 0.10); }
.dropdown-item.selected {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.dropdown-divider { height: 1px; background: var(--line); margin: 6px 0; }

/* ============================================================================
 * Surface helpers
 * ============================================================================ */
.surface-1 { background: var(--surface-1); }
.surface-2 { background: var(--surface-2); }
.surface-3 { background: var(--panel-3); }
.surface-glass {
  background: var(--surface-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
}
.hairline-top { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); }
.text-strong   { color: var(--ink-strong); }
.text-ink      { color: var(--ink); }
.text-muted    { color: var(--ink-muted); }
.text-faint    { color: var(--ink-faint); }
.text-pos      { color: var(--pos); }
.text-neg      { color: var(--neg); }
.tabular       { font-variant-numeric: tabular-nums; }

/* Respect reduced-motion (DL §5) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}