/*
 * ============================================================================
 * COMMAND DECK — the platform's visual system
 * ============================================================================
 *
 * Loaded after styles.css and terminal.css. Those established the layout
 * skeleton and the first-generation component set; this file replaces
 * the visual language on top of them. It is the ONE place the product's
 * appearance is defined — there is no second system and no per-page
 * override sheet.
 *
 * WHY THIS LOOKS THE WAY IT DOES
 * ------------------------------
 * The previous iteration was a dark dashboard: flat panels, a border, a
 * tint. Flat panels on a flat ground cannot read as an instrument no
 * matter how the palette is tuned, because nothing in the image tells
 * the eye that one surface sits above another. Depth here is built from
 * four mechanics, applied consistently:
 *
 *   1. LIGHT CATCH. Every raised surface carries a 1px inset highlight
 *      along its top edge and a 1px inset shadow along its bottom. That
 *      single pair is what makes a rectangle read as a physical panel
 *      rather than a coloured div.
 *
 *   2. RECESSED WELLS. Data areas — the chart canvas, table bodies,
 *      feed lists — are sunk BELOW their panel with an inner shadow.
 *      Raised chrome around sunken data is the visual grammar of a
 *      hardware instrument, and it is why this reads as a workstation.
 *
 *   3. EDGE ILLUMINATION. A hairline of accent light runs across the top
 *      edge of a module, brightest at the centre and fading out. It is
 *      drawn ON the border, never behind content, so nothing blooms
 *      across a number.
 *
 *   4. ATMOSPHERE. One fixed, static field behind everything: low-alpha
 *      colour pools and a fine technical grid, masked so it fades below
 *      the fold. Static — it never animates, because a moving background
 *      on a trading screen is a distraction and an accessibility problem.
 *
 * WHAT IT REFUSES TO DO
 * ---------------------
 * No outward neon. Every glow is inset or sits on a border. No animated
 * background. No decorative "AI" ornament that encodes nothing. Colour
 * keeps fixed meanings — cyan is observed market data, violet is model
 * reasoning, green/red/amber remain profit/loss/attention — so a
 * coloured pixel always means something. Risk information outranks
 * decoration everywhere.
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* Surfaces, void upward. Wide enough that elevation is legible, narrow
     enough that the screen still reads as one object. */
  --void: #02040a;
  --surface-0: #0a1120;
  --surface-1: #121b2e;
  --surface-2: #18243c;
  --surface-3: #1f2c49;
  --well: #050912;
  --hover: #1a2540;
  --active: #21304f;

  /* Hairlines are light at low alpha, not grey. Grey on blue-black reads
     as dirt; blue-white reads as an edge. */
  --line-faint: #8ab4ff1a;
  --line: #8ab4ff30;
  --line-strong: #8ab4ff4d;

  --ink: #eef3fc;
  --ink-2: #9fb0cd;
  --ink-3: #6a7c9c;
  --ink-4: #47566f;

  /* Semantic. Fixed meanings — see the header. */
  --cyan: #22d3ee;      /* observed market data, live feeds */
  --blue: #4d8dff;      /* primary action */
  --violet: #8b5cf6;    /* AI and model reasoning */
  --magenta: #e879f9;   /* attention. used sparingly, never decoratively */
  --up: #10d98a;
  --down: #ff4d6a;
  --warn: #fbbf24;

  --cyan-dim: #22d3ee1a;
  --blue-dim: #4d8dff1a;
  --violet-dim: #8b5cf61a;
  --up-dim: #10d98a1a;
  --down-dim: #ff4d6a1a;
  --warn-dim: #fbbf241a;
  --magenta-dim: #e879f916;

  --cyan-line: #22d3ee3d;
  --blue-line: #4d8dff3d;
  --violet-line: #8b5cf63d;
  --up-line: #10d98a3d;
  --down-line: #ff4d6a3d;
  --warn-line: #fbbf243d;

  --on-cyan: #a5f0fb;
  --on-blue: #b9d2ff;
  --on-violet: #d3c4ff;
  --on-up: #7df3c4;
  --on-down: #ffa9b9;
  --on-warn: #fde199;

  /* ---- FIVE EXPLICIT DEPTHS ----------------------------------------
     L0 the room behind everything
     L1 the workspace housing -- recessed, modules sit INSIDE it
     L2 an instrument module's outer housing (the bezel face)
     L3 the module's screen -- sunken, where data lives
     L4 focused/active/critical state
     Every surface in the product picks one. Nothing is "just dark". */
  --l0: #02040a;
  --l1: #070b14;
  --l2: #16203a;
  --l2-top: #1e2a4a;
  --l3: #060b15;
  --l4: #22304e;

  /* The bezel: a lit rim around a sunken face. This pair is what makes a
     rectangle read as an instrument rather than a coloured div. */
  --bezel-rim: inset 0 1px 0 #ffffff26, inset 0 -1px 0 #000000b3;
  --bezel-line: #8ab4ff2e;
  --screen-inset: inset 0 0 0 1px #00000080, inset 0 3px 12px #00000099;

  /* Mechanic 1: the light catch. Every raised surface carries it. */
  --catch: inset 0 1px 0 #ffffff1f, inset 0 -1px 0 #00000099;
  /* Mechanic 2: the recessed well. */
  --sunken: inset 0 3px 10px #000000b3, inset 0 0 0 1px #00000073;

  --cast-1: 0 2px 8px -3px #000000cc, 0 16px 34px -18px #000000f2;
  --cast-2: 0 6px 18px -5px #000000e6, 0 34px 70px -26px #000000ff;
  --cast-3: 0 10px 26px -8px #000000d9, 0 44px 88px -34px #000000ff;

  --glass: #0b1120c4;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 18px;

  --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", ui-monospace, Consolas, monospace;

  --t-fast: 110ms;
  --t: 190ms;
  --t-slow: 360ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 22px; --s6: 30px; --s7: 42px;

  --rail: 236px;
  --rail-collapsed: 66px;

  /* Compatibility aliases. Roughly a hundred existing call sites use the
     first-generation names; pointing them here means every older screen
     adopts this system instead of rendering in the previous palette. */
  --bg-base: var(--void);
  --bg-sunken: var(--surface-0);
  --bg-surface: var(--surface-1);
  --bg-raised: var(--surface-2);
  --bg-overlay: var(--surface-3);
  --bg-hover: var(--hover);
  --bg-active: var(--active);
  --border-subtle: var(--line-faint);
  --border-default: var(--line);
  --border-strong: var(--line-strong);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --text-faint: var(--ink-4);
  --text-dim: var(--ink-3);
  --text: var(--ink);
  --bg: var(--void);
  --surface: var(--surface-1);
  --border: var(--line);
  --accent: var(--blue);
  --accent-hover: #6fa4ff;
  --accent-soft: var(--blue-dim);
  --accent-line: var(--blue-line);
  --on-accent-soft: var(--on-blue);
  --on-accent-solid: #04101f;
  --danger: var(--down);
  --up-soft: var(--up-dim);
  --down-soft: var(--down-dim);
  --warn-soft: var(--warn-dim);
  --neutral: var(--ink-3);
  --neutral-soft: #6a7c9c1f;
  --on-up-soft: var(--on-up);
  --on-down-soft: var(--on-down);
  --on-warn-soft: var(--on-warn);
  --on-neutral-soft: var(--ink-2);
  --intel: var(--cyan);
  --intel-soft: var(--cyan-dim);
  --intel-line: var(--cyan-line);
  --on-intel-soft: var(--on-cyan);
  --ai: var(--violet);
  --ai-soft: var(--violet-dim);
  --ai-line: var(--violet-line);
  --on-ai-soft: var(--on-violet);
  --radius-xs: 4px; --radius-sm: var(--r-sm); --radius: var(--r); --radius-lg: var(--r-lg);
  --shadow-panel: var(--cast-1);
  --sidebar-w: var(--rail);
  --sidebar-w-collapsed: var(--rail-collapsed);
  --space-1: var(--s1); --space-2: var(--s2); --space-3: var(--s3);
  --space-4: var(--s4); --space-5: var(--s5); --space-6: var(--s6);
  --chart-grid: #8ab4ff1f;
  --edge: var(--catch);
  --lift-1: var(--cast-1); --lift-2: var(--cast-2); --lift-3: var(--cast-3);
  --t-base: var(--t);
}

/* `--surface-2` is both a new token and a legacy alias name. Declared
   once above as the new value; the legacy consumers resolve to it. */

/* Light theme. The depth mechanics invert: a light catch becomes a
   shadow catch, wells stay recessed, and the atmosphere is removed —
   an interior glow on a white surface reads as a smudge. */
:root[data-theme="light"] {
  --void: #eef1f6;
  --surface-0: #e6eaf2;
  --surface-1: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #ffffff;
  --well: #eef1f6;
  --hover: #eff3f9;
  --active: #e3eaf5;

  --line-faint: #0f172a12;
  --line: #0f172a1f;
  --line-strong: #0f172a33;

  --ink: #0d1424;
  --ink-2: #465671;
  --ink-3: #6b7a95;
  --ink-4: #94a1b8;

  --cyan: #0891a8; --blue: #2563eb; --violet: #6d28d9; --magenta: #a21caf;
  --up: #059669; --down: #dc2626; --warn: #b45309;
  --on-cyan: #075a68; --on-blue: #1d4ed8; --on-violet: #5b21b6;
  --on-up: #047857; --on-down: #b91c1c; --on-warn: #92400e;

  --catch: inset 0 1px 0 #ffffff, inset 0 -1px 0 #0f172a0d;
  --sunken: inset 0 2px 5px #0f172a14, inset 0 0 0 1px #0f172a0d;
  --cast-1: 0 1px 2px #0f172a14, 0 6px 16px -12px #0f172a2e;
  --cast-2: 0 2px 6px #0f172a17, 0 14px 30px -16px #0f172a33;
  --cast-3: 0 8px 22px -6px #0f172a1f, 0 30px 60px -28px #0f172a38;
  --glass: #ffffffe8;
}

/* ==========================================================================
   2. ATMOSPHERE
   --------------------------------------------------------------------------
   Mechanic 4. One fixed layer behind everything, static and
   pointer-transparent — it can never scroll, animate, or take a click.
   ========================================================================== */

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1100px 620px at 8% -12%, #22d3ee1f, transparent 60%),
    radial-gradient(900px 540px at 96% -6%, #8b5cf61f, transparent 56%),
    radial-gradient(1300px 760px at 50% 114%, #4d8dff14, transparent 60%);
}

/* The grid. 1px lines at ~3% — texture, never pattern. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(#8ab4ff0f 1px, transparent 1px),
    linear-gradient(90deg, #8ab4ff0f 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000, transparent 78%);
}

:root[data-theme="light"] body::before,
:root[data-theme="light"] body::after { display: none; }

.app-shell { position: relative; z-index: 1; background: transparent; min-height: 100vh; }
.main-content { position: relative; }

/* ==========================================================================
   3. TYPOGRAPHY
   --------------------------------------------------------------------------
   Every figure is monospace with tabular numerals, so columns align and a
   changing price never reflows its neighbours. Labels are small, upper
   case and widely tracked — the register of instrument legends.
   ========================================================================== */

.num, .mono, td.num, th.num, .metric-value, .price, .kpi-value,
.tile-value, .tele-value, .stat-value, .chart-price .last {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -0.01em;
}

.label, .tile-label, .tele-label, .stat-label, .panel-title, .card-title,
.metric-label, .kpi-label, thead th, .nav-group-label, .deck-title {
  font: 620 9.5px/1.25 var(--font-sans);
  letter-spacing: 0.135em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.muted { color: var(--ink-3); }
.small { font-size: 11.5px; }
.strong { font-weight: 640; }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--ink-2); }
.row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.spacer { flex: 1 1 auto; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.divider { height: 1px; background: var(--line-faint); margin: var(--s3) 0; }

/* ==========================================================================
   4. PANELS
   --------------------------------------------------------------------------
   Mechanics 1 and 3. One component, accent variants, used everywhere.
   ========================================================================== */

/* Every module is a display: a housing that catches light, with its
   face sunk below the rim. `.screen-face` (the ::after ring) is the
   inner edge -- it is drawn over the content box but is
   pointer-transparent and low-alpha, so it reads as the bezel's inner
   shadow without touching legibility. */
.card, .panel, .deck {
  position: relative;
  background:
    linear-gradient(180deg, #ffffff0d, #ffffff00 86px),
    linear-gradient(180deg, var(--l2-top), var(--l2) 55%, var(--l1));
  border: 1px solid var(--bezel-line);
  border-radius: var(--r-lg);
  box-shadow: var(--bezel-rim), var(--cast-1);
  padding: var(--s4);
  margin-bottom: var(--s4);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.card::after, .panel::after, .deck::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: calc(var(--r-lg) - 3px);
  box-shadow: inset 0 0 0 1px #00000059, inset 0 2px 10px -4px #0000008c;
  pointer-events: none;
}

.grid .card, .stack .card, .grid .panel, .stack .panel,
.grid .deck, .stack .deck { margin-bottom: 0; }

/* Mechanic 3: accent light along the top edge, brightest at centre. */
.deck::before,
.panel-accent::before, .panel-intel::before, .panel-ai::before,
.panel-critical::before, .panel-warn::before, .panel-up::before {
  content: "";
  position: absolute;
  top: -1px; left: 14%; right: 14%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  filter: blur(0.4px);
  opacity: 1;
}
.deck-intel::before,  .panel-intel::before  { background: linear-gradient(90deg, transparent, var(--cyan), transparent); }
.deck-ai::before,     .panel-ai::before     { background: linear-gradient(90deg, transparent, var(--violet), transparent); }
.deck-up::before,     .panel-up::before     { background: linear-gradient(90deg, transparent, var(--up), transparent); }
.deck-warn::before,   .panel-warn::before   { background: linear-gradient(90deg, transparent, var(--warn), transparent); }
.deck-danger::before, .panel-critical::before { background: linear-gradient(90deg, transparent, var(--down), transparent); }

.panel-intel, .deck-intel { border-color: var(--cyan-line); }
.panel-ai, .deck-ai { border-color: var(--violet-line); }
.panel-accent { border-color: var(--blue-line); }
.panel-warn, .deck-warn { border-color: var(--warn-line); }

/* Risk state is the loudest treatment in the system: never translucent,
   never animated, never placed under anything. */
.panel-critical, .deck-danger {
  border-color: var(--down-line);
  background:
    linear-gradient(180deg, #ff4d6a1f, transparent 88px),
    linear-gradient(180deg, var(--surface-1), var(--surface-0));
  box-shadow: var(--catch), var(--cast-2), 0 0 0 1px #ff4d6a1a;
}

.panel-head, .card-head, .deck-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line-faint);
  min-width: 0;
}

.panel-title, .card-title, .deck-title {
  display: flex; align-items: center; gap: 7px; min-width: 0;
}
.panel-title svg, .deck-title svg { width: 13px; height: 13px; opacity: .8; flex: none; }
.panel-intel .panel-title svg, .deck-intel .deck-title svg { color: var(--cyan); opacity: 1; }
.panel-ai .panel-title svg, .deck-ai .deck-title svg { color: var(--violet); opacity: 1; }

.panel-note { font: 400 11px/1.5 var(--font-sans); color: var(--ink-3); margin: 0 0 var(--s3); }

/* Mechanic 2: the recessed well. Data sits below its chrome. */
.well {
  background: var(--well);
  border-radius: var(--r);
  box-shadow: var(--sunken);
  overflow: hidden;
}

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line);
}

/* ==========================================================================
   4a. CHANNEL PLATES
   --------------------------------------------------------------------------
   A display's label belongs on its bezel, not floating in the content
   area. Every panel heading is pulled out to the housing edge and
   engraved across the top of it: micro-type, wide tracking, a lit top
   rim and a hard line where the plate meets the screen below. This is
   also what gives each module a definite top edge -- the single
   strongest cue that a rectangle is an instrument face rather than a
   card. Direct children only, so headings inside a panel's content are
   left alone.
   ========================================================================== */

.card > h2, .panel > h2, .deck > h2 {
  margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s4);
  padding: 10px var(--s4) 9px;
  background: linear-gradient(180deg, #ffffff12, #ffffff03);
  border-bottom: 1px solid var(--bezel-line);
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
  box-shadow: inset 0 1px 0 #ffffff26, 0 1px 0 #00000073;
  font: 650 9.5px/1.35 var(--font-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-shadow: 0 1px 0 #00000099;
  position: relative;
  z-index: 1;
}

/* Qualifiers inside a heading ("(last 30 days)") are legend, not label:
   they keep the plate readable by staying quieter than it. */
.card > h2 span, .panel > h2 span, .deck > h2 span {
  letter-spacing: .06em;
  color: var(--ink-4);
}

/* Readouts are instrument figures: columns of numbers must not shuffle
   sideways as digits change. */
.status-row, .metric-block, .tile, .kpi, table {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   4b. THE CONSOLE HOUSING
   --------------------------------------------------------------------------
   L1. The workspace the displays are mounted in. Recessed relative to
   the room, with its own faint interior light, so modules read as
   CONTAINED rather than floating on a page. This is the single biggest
   reason the screen reads as one instrument instead of a document.
   ========================================================================== */

.console {
  position: relative;
  padding: var(--s4);
  border-radius: var(--r-xl);
  background:
    radial-gradient(1200px 420px at 50% -6%, #22d3ee0d, transparent 62%),
    linear-gradient(180deg, var(--l1), var(--l0));
  box-shadow:
    inset 0 0 0 1px #8ab4ff17,
    inset 0 2px 18px -6px #000000cc,
    0 1px 0 #ffffff0a;
  margin-bottom: var(--s4);
}

/* A channel label on a module's bezel. Names what the display shows --
   the register of an instrument legend, never decoration. */
/* Channel labels were tried here and removed: every one repeated the
   module header a few pixels away, which is noise rather than
   information. The bezel itself carries the "instrument" reading. */
.chan { display: none; }

/* ==========================================================================
   5. COMMAND BAR — live system telemetry
   --------------------------------------------------------------------------
   Not badges. One segmented readout strip, each cell a labelled
   instrument channel. This is the first thing on the flagship screen and
   it is what makes it read as a system rather than a web page.
   ========================================================================== */

.commandbar {
  position: relative;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, #ffffff08, #ffffff00 60%),
    linear-gradient(90deg, var(--surface-1), var(--surface-0) 55%, var(--surface-1));
  box-shadow: var(--catch), var(--cast-2);
  overflow: hidden;
  min-width: 0;
}
.commandbar::before {
  content: "";
  position: absolute; top: 0; left: 6%; right: 6%; height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--cyan) 22%, var(--violet) 78%, transparent);
  box-shadow: 0 0 14px -2px var(--cyan);
  z-index: 2;
}
/* A static scan of light across the strip, so the bar reads as a
   powered surface rather than a painted one. */
.commandbar::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, #8ab4ff0a 48%, transparent 62%);
  pointer-events: none;
}

.tele {
  display: flex; flex-direction: column; gap: 3px; justify-content: center;
  padding: 13px 20px;
  border-right: 1px solid var(--line);
  min-width: 0; flex: 0 1 auto;
}
.tele:last-child { border-right: none; }
.tele-label { display: flex; align-items: center; gap: 5px; }
.tele-value {
  font: 620 15px/1.15 var(--font-mono);
  letter-spacing: -.015em;
  color: var(--ink);
  white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
}
.tele-sub { font: 400 10px/1.3 var(--font-sans); color: var(--ink-4); }

.tele-ok    .tele-value { color: var(--up); }
.tele-warn  .tele-value { color: var(--warn); }
.tele-alert .tele-value { color: var(--down); }
.tele-live  .tele-value { color: var(--cyan); }
.tele-ai    .tele-value { color: var(--violet); }

.tele-brand { background: linear-gradient(90deg, var(--cyan-dim), transparent); border-right-color: var(--line); }
.commandbar .spacer { flex: 1 1 auto; border-right: 1px solid var(--line-faint); }

/* ==========================================================================
   6. INSTRUMENT HEADER
   ========================================================================== */

.instrument {
  display: flex;
  align-items: flex-end;
  gap: var(--s5);
  flex-wrap: wrap;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line-faint);
  min-width: 0;
}

.inst-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.inst-venue { font: 620 9.5px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.inst-symbol {
  font: 680 30px/1 var(--font-sans);
  letter-spacing: -.028em;
  color: var(--ink);
}

.inst-price { display: flex; align-items: baseline; gap: var(--s3); min-width: 0; }
.inst-last {
  font: 600 46px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  color: var(--ink);
  text-shadow: 0 0 30px #22d3ee33;
}
.inst-change { font: 620 15px/1 var(--font-mono); }
.inst-change.up { color: var(--up); }
.inst-change.down { color: var(--down); }

/* A tick flashes colour in place. No movement: a number that jumps is a
   number you cannot read. */
@keyframes tickUp   { from { color: var(--up); }   to { color: var(--ink); } }
@keyframes tickDown { from { color: var(--down); } to { color: var(--ink); } }
.tick-up   { animation: tickUp var(--t-slow) var(--ease) both; }
.tick-down { animation: tickDown var(--t-slow) var(--ease) both; }

.inst-stats { display: flex; gap: var(--s5); flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stat-value { font: 600 13px/1.2 var(--font-mono); color: var(--ink-2); }

/* ==========================================================================
   7. CHART WORKSTATION
   ========================================================================== */

/* THE PRIMARY DISPLAY. Deliberately the heaviest housing in the
   product: a thicker bezel, a deeper cast and a brighter rim, so the
   chart reads as the main instrument and every surrounding module as
   subordinate to it. */
.workstation {
  position: relative;
  border: 1px solid var(--bezel-line);
  border-radius: var(--r-xl);
  background:
    linear-gradient(180deg, #ffffff12, #ffffff00 150px),
    linear-gradient(180deg, var(--l2-top), var(--l2) 40%, var(--l1));
  box-shadow:
    inset 0 1px 0 #ffffff33,
    inset 0 -1px 0 #000000cc,
    var(--cast-3);
  overflow: hidden;
  min-width: 0;
}
.workstation::before {
  content: "";
  position: absolute; top: 0; left: 8%; right: 8%; height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 16px -2px var(--cyan);
  z-index: 3;
}
/* The instrument header carries a lit wash — the cue that a surface is
   lit from somewhere, which separates material from coloured box. */
.workstation > .instrument {
  position: relative;
  padding: var(--s5) var(--s5) var(--s4);
  background:
    linear-gradient(115deg, #22d3ee12, transparent 46%),
    linear-gradient(180deg, #ffffff10, transparent 70%);
  border-bottom: 1px solid var(--bezel-line);
  box-shadow: inset 0 -1px 0 #00000099;
}

/* The control rail: a distinct darker band, inset, between header and
   canvas. Separating chrome from data is the point. */
.chart-rail {
  display: flex; align-items: center; gap: var(--s2);
  flex-wrap: wrap;
  padding: 9px var(--s4);
  background: linear-gradient(180deg, var(--surface-0), var(--void));
  border-top: 1px solid var(--line-faint);
  border-bottom: 1px solid var(--line-faint);
  box-shadow: inset 0 1px 3px #00000073;
  min-width: 0;
}

.rail-group {
  display: flex; align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  box-shadow: var(--catch);
  overflow: hidden;
}
.rail-group button {
  background: transparent; border: none;
  color: var(--ink-3);
  font: 600 11px/1 var(--font-sans);
  padding: 7px 11px; min-height: 30px;
  cursor: pointer;
  border-right: 1px solid var(--line-faint);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.rail-group button:last-child { border-right: none; }
.rail-group button:hover { background: var(--hover); color: var(--ink); }
.rail-group button[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--cyan-dim), transparent);
  color: var(--on-cyan);
  box-shadow: inset 0 -2px 0 var(--cyan);
}

.rail-label {
  font: 620 9px/1 var(--font-sans);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4);
  margin-right: 2px;
}

/* The canvas well — mechanic 2 at its most important. The chart is sunk
   into the workstation, which is what stops it reading as an image
   pasted onto a card. */
/* L3: the screen face. Sunk into the housing, with a cool wash from
   the top edge the way a lit display looks, and a hard inner edge where
   the bezel meets the glass. */
.chart-well {
  position: relative;
  margin: var(--s3);
  border-radius: var(--r);
  background:
    radial-gradient(120% 60% at 50% -14%, #22d3ee0a, transparent 55%),
    linear-gradient(180deg, #060c17, var(--l3) 45%, #04080f);
  box-shadow: var(--screen-inset), inset 0 0 0 1px #8ab4ff14;
  overflow: hidden;
}
/* A soft vignette at the bottom of the display, so the well has a
   floor rather than fading into the panel. */
.chart-well::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 90px;
  background: linear-gradient(180deg, transparent, #00000059);
  pointer-events: none; z-index: 1;
}
.chart-well canvas { display: block; width: 100%; position: relative; z-index: 1; }

/* Bracket the primary display. 1px, on the frame, never over a series. */
.chart-well::before {
  content: "";
  position: absolute; inset: 6px;
  pointer-events: none; z-index: 2;
  border-radius: 6px;
  background:
    linear-gradient(var(--cyan-line), var(--cyan-line)) 0 0 / 16px 1px no-repeat,
    linear-gradient(var(--cyan-line), var(--cyan-line)) 0 0 / 1px 16px no-repeat,
    linear-gradient(var(--cyan-line), var(--cyan-line)) 100% 0 / 16px 1px no-repeat,
    linear-gradient(var(--cyan-line), var(--cyan-line)) 100% 0 / 1px 16px no-repeat,
    linear-gradient(var(--cyan-line), var(--cyan-line)) 0 100% / 16px 1px no-repeat,
    linear-gradient(var(--cyan-line), var(--cyan-line)) 0 100% / 1px 16px no-repeat,
    linear-gradient(var(--cyan-line), var(--cyan-line)) 100% 100% / 16px 1px no-repeat,
    linear-gradient(var(--cyan-line), var(--cyan-line)) 100% 100% / 1px 16px no-repeat;
  opacity: .75;
}

.chart-hud {
  position: absolute; top: 10px; left: 12px;
  display: flex; gap: var(--s2); flex-wrap: wrap;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  font: 500 10.5px/1.4 var(--font-mono);
  color: var(--ink-2);
  pointer-events: none;
  z-index: 2;
}
.chart-hud b { color: var(--ink); font-weight: 620; }

.chart-legend {
  display: flex; gap: var(--s4); flex-wrap: wrap;
  padding: 9px var(--s4) var(--s4);
  font: 500 10.5px/1.4 var(--font-mono);
  color: var(--ink-3);
  border-top: 1px solid var(--line-faint);
}
.chart-legend .swatch {
  display: inline-block; width: 14px; height: 2px; border-radius: 1px;
  margin-right: 6px; vertical-align: middle;
}
.chart-note { padding: 0 var(--s4) var(--s3); font: 400 11px/1.5 var(--font-sans); color: var(--ink-4); }

/* ==========================================================================
   8. INTELLIGENCE RAIL
   --------------------------------------------------------------------------
   The compact stack beside the chart: peripheral vision, read at a
   glance while the chart holds attention. Denser than page panels.
   ========================================================================== */

.intel-rail { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }

/* Secondary displays. Same bezel language as the primary, one step
   lighter, so the rail reads as a bank of smaller instruments beside
   the main screen. */
.intel-mod {
  position: relative;
  border: 1px solid var(--bezel-line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--l2-top), var(--l2) 60%, var(--l1));
  box-shadow: var(--bezel-rim), var(--cast-1);
  overflow: hidden;
  min-width: 0;
}
.intel-mod .body { background: linear-gradient(180deg, #070d18, #05090f); box-shadow: var(--screen-inset); }
.intel-mod > header {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(180deg, var(--surface-2), transparent);
  border-bottom: 1px solid var(--line);
  font: 620 9.5px/1.25 var(--font-sans);
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-2);
}
.intel-mod > header svg { width: 12px; height: 12px; flex: none; opacity: .85; }
.intel-mod .body { padding: 10px 12px; min-width: 0; }
.intel-mod .body.flush { padding: 0; }

.intel-cyan   > header { color: var(--on-cyan); background: linear-gradient(180deg, var(--cyan-dim), transparent); }
.intel-cyan   > header svg { color: var(--cyan); }
.intel-violet > header { color: var(--on-violet); background: linear-gradient(180deg, var(--violet-dim), transparent); }
.intel-violet > header svg { color: var(--violet); }
.intel-danger { border-color: var(--down-line); }
.intel-danger > header { color: var(--on-down); background: linear-gradient(180deg, var(--down-dim), transparent); }

/* Label ↔ value line, the rail's workhorse. */
.line {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  padding: 6px 0;
  border-bottom: 1px solid var(--line-faint);
  font: 400 11.5px/1.4 var(--font-sans);
  color: var(--ink-3);
  min-width: 0;
}
.line:last-child { border-bottom: none; }
.line > .v { font: 620 11.5px/1.4 var(--font-mono); color: var(--ink); text-align: right; min-width: 0; }
.line > .v.up { color: var(--up); }
.line > .v.down { color: var(--down); }
.line > .v.warn { color: var(--warn); }
.line > .v.muted { color: var(--ink-4); font-weight: 500; }

/* ==========================================================================
   9. METRIC BLOCKS
   ========================================================================== */

.metrics, .tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.metric-block, .tile, .kpi, .metric-tile {
  position: relative;
  overflow: hidden;
  padding: 13px 15px;
  border: 1px solid var(--bezel-line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--l2-top), var(--l2) 62%, var(--l1));
  box-shadow: var(--bezel-rim), var(--cast-1);
  min-width: 0;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease-out),
              box-shadow var(--t) var(--ease);
}
.metric-block:hover, .tile:hover, .kpi:hover {
  box-shadow: var(--bezel-rim), var(--cast-2);
}
.metric-block:hover, .tile:hover, .kpi:hover { border-color: var(--line-strong); transform: translateY(-1px); }

/* A metric's state is a lit bar down its left edge — readable in a scan
   without reading a single number. */
.metric-block::after, .tile::after, .kpi::after {
  content: "";
  position: absolute; left: 0; top: 10%; bottom: 10%;
  width: 2px; border-radius: 0 2px 2px 0;
  background: var(--line-strong);
}
.tile-up::after,   .metric-up::after,   .kpi-up::after   { background: var(--up);   box-shadow: 0 0 12px -2px var(--up); }
.tile-down::after, .metric-down::after, .kpi-down::after { background: var(--down); box-shadow: 0 0 12px -2px var(--down); }
.tile-warn::after, .metric-warn::after { background: var(--warn); box-shadow: 0 0 12px -2px var(--warn); }
.tile-critical::after { background: var(--down); box-shadow: 0 0 16px -1px var(--down); }
.metric-live::after { background: var(--cyan); box-shadow: 0 0 12px -2px var(--cyan); }
.metric-ai::after { background: var(--violet); box-shadow: 0 0 12px -2px var(--violet); }

.tile-label, .metric-label, .kpi-label { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; }
.tile-value, .metric-value, .kpi-value {
  font: 600 21px/1.15 var(--font-mono);
  letter-spacing: -.028em; color: var(--ink);
}
.tile-sub, .metric-sub, .kpi-sub { margin-top: 5px; font: 400 10.5px/1.45 var(--font-sans); color: var(--ink-4); }
.tile-up .tile-value, .metric-up .metric-value { color: var(--up); }
.tile-down .tile-value, .metric-down .metric-value { color: var(--down); }
.tile-warn .tile-value, .metric-warn .metric-value { color: var(--warn); }
.tile-critical {
  border-color: var(--down-line);
  background: linear-gradient(180deg, var(--down-dim), transparent 70%), var(--surface-1);
}
.tile-critical .tile-value { color: var(--down); }

@keyframes flashUp   { from { background: #10d98a26; } to { background: transparent; } }
@keyframes flashDown { from { background: #ff4d6a26; } to { background: transparent; } }
.flash-up   { animation: flashUp var(--t-slow) var(--ease) both; border-radius: 4px; }
.flash-down { animation: flashDown var(--t-slow) var(--ease) both; border-radius: 4px; }

/* ==========================================================================
   10. STATUS LANGUAGE
   --------------------------------------------------------------------------
   Every state carries a glyph or a word beside its colour, so the screen
   still works in greyscale and for a colour-blind operator.
   ========================================================================== */

.chip, .badge, .trading-mode-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  font: 620 9.5px/1.5 var(--font-sans);
  letter-spacing: .09em; text-transform: uppercase;
  white-space: nowrap;
}
.chip-up, .badge-up         { background: var(--up-dim);      color: var(--on-up);     border-color: var(--up-line); }
.chip-down, .badge-down     { background: var(--down-dim);    color: var(--on-down);   border-color: var(--down-line); }
.chip-warn, .badge-warn     { background: var(--warn-dim);    color: var(--on-warn);   border-color: var(--warn-line); }
.chip-intel                 { background: var(--cyan-dim);    color: var(--on-cyan);   border-color: var(--cyan-line); }
.chip-ai                    { background: var(--violet-dim);  color: var(--on-violet); border-color: var(--violet-line); }
.chip-accent, .badge-accent { background: var(--blue-dim);    color: var(--on-blue);   border-color: var(--blue-line); }
.chip-muted, .badge-neutral { background: transparent;        color: var(--ink-3); }
.badge-locked               { background: var(--down-dim);    color: var(--on-down);   border-color: var(--down-line); }
.trading-mode-badge         { color: #fff; border-color: transparent; }

.side, .side-long, .side-short {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-sm);
  font: 700 10px/1.6 var(--font-sans); letter-spacing: .08em;
  border: 1px solid var(--line);
}
.side-long  { background: var(--up-dim);   color: var(--on-up);   border-color: var(--up-line); }
.side-short { background: var(--down-dim); color: var(--on-down); border-color: var(--down-line); }

/* The one looping animation. It encodes a real fact — a connected,
   receiving feed — so an operator can tell a live screen from a frozen
   one without reading a timestamp. */
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 5px transparent; opacity: .65; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}
.live-dot, .dot-live {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; color: var(--up); flex: none;
  animation: livePulse 2.6s var(--ease) infinite;
}
.live-dot.is-idle  { color: var(--ink-3); animation: none; }
.live-dot.is-stale { color: var(--warn);  animation: none; }
.live-dot.is-down  { color: var(--down);  animation: none; }
.live-label {
  display: inline-flex; align-items: center; gap: 6px;
  font: 620 9.5px/1 var(--font-sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2);
}

.state-dot, .status-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  display: inline-block; background: var(--ink-3);
}
.state-ok, .status-dot.ok { background: var(--up); box-shadow: 0 0 9px -1px var(--up); }
.state-failing, .status-dot.bad { background: var(--down); box-shadow: 0 0 9px -1px var(--down); }
.state-stale { background: var(--warn); }
.state-awaiting { background: var(--blue); }
.state-never { background: var(--ink-4); }

/* ==========================================================================
   11. DECISION FLOW
   --------------------------------------------------------------------------
   MARKET → SIGNAL → RISK → EXPOSURE → EXECUTION. Four states, each
   carried by a glyph AND a colour, never colour alone. A stage with no
   persisted evidence renders `pending` — never `ok`, because an
   unrecorded stage is not a passed stage.
   ========================================================================== */

.flow-rail {
  display: flex; align-items: stretch; gap: 0;
  overflow-x: auto; padding: 2px 2px 8px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}

.flow-stage {
  position: relative;
  flex: 1 1 0; min-width: 108px;
  padding: 10px 12px;
  background: linear-gradient(180deg, var(--surface-1), var(--surface-0));
  border: 1px solid var(--line);
  border-right-width: 0;
  transition: background var(--t) var(--ease);
}
.flow-stage:first-child { border-radius: var(--r) 0 0 var(--r); }
.flow-stage:last-child  { border-radius: 0 var(--r) var(--r) 0; border-right-width: 1px; }

/* The connector: a chevron notch between stages, so the rail reads as a
   directed pipeline rather than a row of boxes. */
.flow-stage + .flow-stage::before {
  content: "";
  position: absolute; left: -6px; top: 50%;
  width: 10px; height: 10px;
  transform: translateY(-50%) rotate(45deg);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--surface-1);
  z-index: 2;
}

.flow-stage-name {
  display: flex; align-items: center; gap: 5px;
  font: 620 9px/1.25 var(--font-sans);
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 6px;
}
.flow-stage-value { font: 560 11.5px/1.4 var(--font-sans); color: var(--ink-2); }
.flow-mark { font: 700 11px/1 var(--font-mono); flex: none; }

.flow-ok { background: linear-gradient(180deg, var(--up-dim), transparent 70%), var(--surface-1); }
.flow-ok .flow-stage-name, .flow-ok .flow-mark { color: var(--up); }
.flow-blocked { background: linear-gradient(180deg, var(--down-dim), transparent 70%), var(--surface-1); border-color: var(--down-line); }
.flow-blocked .flow-stage-name, .flow-blocked .flow-mark { color: var(--down); }
.flow-skipped { background: repeating-linear-gradient(135deg, #8ab4ff05 0 6px, transparent 6px 12px), var(--surface-0); }
.flow-skipped .flow-stage-value { color: var(--ink-4); }
.flow-pending .flow-stage-value { color: var(--ink-4); }
.flow-intel .flow-stage-name { color: var(--cyan); }
.flow-ai .flow-stage-name { color: var(--violet); }

/* ==========================================================================
   12. EVIDENCE
   ========================================================================== */

.evidence-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s3); }
.evidence-col { min-width: 0; }
.evidence-head {
  display: flex; align-items: center; gap: 7px;
  font: 620 9.5px/1.25 var(--font-sans);
  letter-spacing: .13em; text-transform: uppercase; margin-bottom: var(--s2);
}
.evidence-head .count {
  font-family: var(--font-mono); font-size: 10px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-2);
}
.evidence-for .evidence-head { color: var(--up); }
.evidence-against .evidence-head { color: var(--down); }

.evidence-item {
  position: relative;
  padding: 8px 12px 8px 27px;
  margin-bottom: 5px;
  background: linear-gradient(180deg, var(--surface-1), var(--surface-0));
  border: 1px solid var(--line-faint);
  border-left: 2px solid var(--line);
  border-radius: var(--r-sm);
  font: 400 11.5px/1.55 var(--font-sans);
  color: var(--ink-2);
}
.evidence-item::before { position: absolute; left: 10px; top: 8px; font: 700 11px/1.5 var(--font-mono); }
.evidence-for .evidence-item { border-left-color: var(--up-line); }
.evidence-for .evidence-item::before { content: "+"; color: var(--up); }
.evidence-against .evidence-item { border-left-color: var(--down-line); }
.evidence-against .evidence-item::before { content: "−"; color: var(--down); }

.evidence-item .src {
  display: inline-block; margin-right: 6px; padding: 0 6px;
  border-radius: 3px; background: var(--surface-3); color: var(--ink-3);
  font: 620 9px/1.7 var(--font-sans); letter-spacing: .08em;
  text-transform: uppercase; vertical-align: 1px;
}
.evidence-item .src-ai   { background: var(--violet-dim); color: var(--on-violet); }
.evidence-item .src-news { background: var(--cyan-dim);   color: var(--on-cyan); }

.verdict {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r);
  margin-bottom: var(--s3);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-1), var(--surface-0));
  box-shadow: var(--catch);
}
.verdict-icon { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; font: 700 15px/1 var(--font-mono); }
.verdict-title { font: 640 14px/1.3 var(--font-sans); margin-bottom: 3px; }
.verdict-body { font: 400 12px/1.6 var(--font-sans); color: var(--ink-2); }
.verdict-trade { border-color: var(--up-line); background: linear-gradient(180deg, var(--up-dim), transparent 76%), var(--surface-1); }
.verdict-trade .verdict-icon { background: var(--up-dim); color: var(--up); box-shadow: inset 0 0 0 1px var(--up-line); }
.verdict-trade .verdict-title { color: var(--up); }
.verdict-notrade { border-color: var(--down-line); background: linear-gradient(180deg, var(--down-dim), transparent 76%), var(--surface-1); }
.verdict-notrade .verdict-icon { background: var(--down-dim); color: var(--down); box-shadow: inset 0 0 0 1px var(--down-line); }
.verdict-notrade .verdict-title { color: var(--down); }
.verdict-unknown .verdict-icon { background: var(--surface-3); color: var(--ink-3); }

/* ==========================================================================
   13. NEWS INTELLIGENCE
   ========================================================================== */

.news-list { display: flex; flex-direction: column; gap: var(--s2); }

.news-item {
  display: grid; grid-template-columns: 3px 1fr;
  border: 1px solid var(--line-faint);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface-1), var(--surface-0));
  box-shadow: var(--catch);
  overflow: hidden;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.news-item:hover { border-color: var(--line-strong); transform: translateX(2px); }

.news-spine { background: var(--ink-4); }
.news-positive .news-spine { background: linear-gradient(180deg, var(--up), #10d98a55); }
.news-negative .news-spine { background: linear-gradient(180deg, var(--down), #ff4d6a55); }
.news-neutral  .news-spine { background: var(--ink-3); }
/* Unclassified is a broken spine, not a colour: "we could not classify
   this" must never read as a quiet neutral verdict. */
.news-uncertain .news-spine { background: repeating-linear-gradient(180deg, var(--ink-4) 0 4px, transparent 4px 9px); }

.news-body { padding: 11px 14px; min-width: 0; }
.news-meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font: 500 10px/1.35 var(--font-sans); color: var(--ink-4); margin-bottom: 5px;
}
.news-meta strong { color: var(--ink-2); font-weight: 620; }
.news-meta .sep { opacity: .35; }
.news-title { font: 560 13px/1.45 var(--font-sans); color: var(--ink); margin-bottom: 5px; }
.news-title a { color: inherit; text-decoration: none; }
.news-title a:hover { color: var(--cyan); text-decoration: underline; }
.news-summary {
  font: 400 11.5px/1.55 var(--font-sans); color: var(--ink-4);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-tags { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 8px; }

/* An important event earns a lit left edge — the one place news is
   allowed to be loud, because a hack or a delisting is operationally
   relevant to an open position. */
.news-item.is-important { border-color: var(--down-line); box-shadow: var(--catch), inset 3px 0 12px -6px var(--down); }

.gauge {
  display: flex; height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--well); box-shadow: var(--sunken); margin: 8px 0 5px;
}
.gauge span { display: block; height: 100%; transition: width var(--t-slow) var(--ease-out); }
.gauge .g-neg { background: linear-gradient(180deg, var(--down), #ff4d6acc); }
.gauge .g-neu { background: var(--ink-4); }
.gauge .g-pos { background: linear-gradient(180deg, var(--up), #10d98acc); }
.gauge .g-unc { background: repeating-linear-gradient(90deg, var(--ink-4) 0 3px, transparent 3px 7px); }

.sentiment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: var(--s3); }

.provider-row {
  display: grid; grid-template-areas: "head" "desc" "cred"; gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line-faint);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface-1), var(--surface-0));
  box-shadow: var(--catch);
  margin-bottom: var(--s2);
  min-width: 0;
}
.provider-head { grid-area: head; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; min-width: 0; }
.provider-row .name { font: 620 12.5px/1.3 var(--font-sans); color: var(--ink); }
.provider-row .desc { grid-area: desc; font: 400 11px/1.55 var(--font-sans); color: var(--ink-4); min-width: 0; }
.provider-cred { grid-area: cred; display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.provider-cred input { flex: 1 1 200px; min-width: 0; }
.provider-actions { display: flex; gap: 6px; margin-left: auto; }

/* ==========================================================================
   14. RISK
   ========================================================================== */

.meter {
  position: relative; height: 8px; border-radius: 4px;
  background: var(--well); box-shadow: var(--sunken);
  overflow: hidden; margin: 8px 0 4px;
}
.meter-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #4d8dffcc, var(--blue));
  transition: width var(--t-slow) var(--ease-out), background var(--t) var(--ease);
}
.meter-ok .meter-fill       { background: linear-gradient(90deg, #10d98a99, var(--up)); }
.meter-warn .meter-fill     { background: linear-gradient(90deg, #fbbf2499, var(--warn)); }
.meter-critical .meter-fill { background: linear-gradient(90deg, #ff4d6a99, var(--down)); }
.meter-limit { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); opacity: .6; }
.meter-legend {
  display: flex; justify-content: space-between; gap: var(--s2);
  font: 500 9.5px/1.35 var(--font-mono); color: var(--ink-4);
}
.liq-meter .meter-fill { background: linear-gradient(90deg, #10d98a99, var(--up)); }
.liq-meter.is-warn .meter-fill { background: linear-gradient(90deg, #fbbf2499, var(--warn)); }
.liq-meter.is-near .meter-fill { background: linear-gradient(90deg, #ff4d6a99, var(--down)); }

.emergency-btn {
  width: 100%; padding: 13px;
  border-radius: var(--r);
  border: 1px solid var(--down-line);
  background: linear-gradient(180deg, #ff4d6a26, #ff4d6a0d);
  color: var(--down);
  font: 700 11.5px/1 var(--font-sans);
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  box-shadow: var(--catch);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.emergency-btn:hover { background: var(--down); color: #fff; }

/* ==========================================================================
   15. TABLES
   --------------------------------------------------------------------------
   Table bodies are wells: the header rail is chrome, the rows are data.
   ========================================================================== */

.table-wrap {
  border: 1px solid var(--line-faint);
  border-radius: var(--r);
  overflow: auto;
  background: var(--well);
  box-shadow: var(--sunken);
  -webkit-overflow-scrolling: touch;
}

table { width: 100%; border-collapse: collapse; font-size: 12px; }

thead th {
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 1px 0 #ffffff0d;
  padding: 9px 13px; text-align: left; white-space: nowrap;
}

tbody td { padding: 10px 13px; border-bottom: 1px solid var(--line-faint); color: var(--ink-2); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--t-fast) var(--ease); }
tbody tr:hover td { background: #8ab4ff0a; }
td.num, th.num, .num { text-align: right; white-space: nowrap; }

/* A position row states its direction with a lit left edge. */
tbody tr.row-up td:first-child   { box-shadow: inset 2px 0 0 var(--up); }
tbody tr.row-down td:first-child { box-shadow: inset 2px 0 0 var(--down); }

.empty-state { padding: var(--s6) var(--s4); text-align: center; color: var(--ink-3); }
.empty-state .empty-icon { font-size: 24px; opacity: .3; margin-bottom: 9px; }
.empty-state .empty-title { font: 620 12.5px/1.4 var(--font-sans); color: var(--ink-2); margin-bottom: 4px; display: block; }
.empty-state .empty-body { font: 400 11.5px/1.6 var(--font-sans); max-width: 46ch; margin: 0 auto; }

.error-state {
  padding: var(--s4);
  border: 1px solid var(--down-line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--down-dim), transparent), var(--surface-0);
  box-shadow: var(--catch);
  color: var(--on-down);
  font: 400 12px/1.6 var(--font-sans);
}
.error-state .error-title { font-weight: 640; margin-bottom: 4px; display: block; color: var(--down); }

/* ==========================================================================
   16. CONTROLS
   ========================================================================== */

.btn, .btn-sm, button.primary, .action-row button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  box-shadow: var(--catch);
  color: var(--ink-2);
  font: 600 11.5px/1 var(--font-sans);
  padding: 8px 15px; min-height: 34px;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  width: auto;
}
.btn:hover, button.primary:hover, .action-row button:hover {
  background: linear-gradient(180deg, var(--hover), var(--surface-2));
  color: var(--ink); border-color: var(--line-strong);
}
.btn:active, button.primary:active { transform: translateY(1px); }
.btn:disabled, button:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-sm { padding: 6px 11px; min-height: 30px; font-size: 11px; }

.btn-primary, button.primary {
  background: linear-gradient(180deg, #5c9bff, #2f6fe0);
  border-color: #5c9bff66; color: #fff; font-weight: 640;
  box-shadow: var(--catch), 0 4px 16px -8px var(--blue);
}
.btn-primary:hover, button.primary:hover { background: linear-gradient(180deg, #74acff, #3d7cf0); color: #fff; }
.btn-intel { background: linear-gradient(180deg, var(--cyan-dim), transparent); border-color: var(--cyan-line); color: var(--on-cyan); }
.btn-intel:hover { background: var(--cyan); color: #04101f; border-color: var(--cyan); }
.btn-danger { background: linear-gradient(180deg, var(--down-dim), transparent); border-color: var(--down-line); color: var(--on-down); }
.btn-ghost { background: transparent; box-shadow: none; }
.action-row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }

.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  box-shadow: var(--catch);
  overflow: hidden;
}
.seg button {
  background: transparent; border: none; border-right: 1px solid var(--line-faint);
  color: var(--ink-3); font: 600 11px/1 var(--font-sans);
  padding: 7px 12px; min-height: 30px; cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.seg button:last-child { border-right: none; }
.seg button:hover { background: var(--hover); color: var(--ink); }
.seg button[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--cyan-dim), transparent);
  color: var(--on-cyan); box-shadow: inset 0 -2px 0 var(--cyan);
}

input, select, textarea {
  background: var(--well);
  border: 1px solid var(--line);
  box-shadow: var(--sunken);
  border-radius: var(--r-sm);
  color: var(--ink);
  padding: 8px 11px;
  font: 400 12.5px/1.4 var(--font-sans);
  width: 100%;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: var(--sunken), 0 0 0 3px var(--cyan-dim);
}
input::placeholder, textarea::placeholder { color: var(--ink-4); }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }

/* ==========================================================================
   17. NAVIGATION
   ========================================================================== */

/* THE RACK. Everything to the right of this is a display mounted in
   a housing; until now the rail itself was still painted with the
   pre-console tokens, so the element framing the whole product was the
   only one that still looked like a web page. It is now the deepest
   surface on screen -- the chassis the instruments are set into -- with
   a lit inner edge where the rack meets the workspace. */
.sidebar-nav {
  width: var(--rail);
  background:
    linear-gradient(180deg, #22d3ee0a, transparent 210px),
    linear-gradient(180deg, var(--l1), var(--l0) 62%);
  border-right: 1px solid var(--bezel-line);
  box-shadow:
    inset -1px 0 0 #00000099,
    inset 1px 0 0 #ffffff0d,
    var(--cast-2);
  padding: var(--s3) 0 var(--s4);
  position: relative;
  z-index: 2;
}

.sidebar-nav .brand-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--s4) 13px;
  margin: calc(var(--s3) * -1) 0 var(--s3);
  background: linear-gradient(180deg, #ffffff0d, #ffffff00);
  border-bottom: 1px solid var(--bezel-line);
  box-shadow: inset 0 1px 0 #ffffff1f, 0 1px 0 #00000080;
}
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  color: #04101f;
  box-shadow: 0 0 20px -6px var(--cyan), var(--catch);
}
.brand-mark svg { width: 16px; height: 16px; display: block; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.brand-name { font: 660 13px/1.2 var(--font-sans); letter-spacing: -.01em; color: var(--ink); }
.brand-env { font: 620 8.5px/1.3 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }

/* Etched section labels: micro-type with a hairline running out to
   the rack edge, so the groups read as engraved divisions of one
   chassis rather than headings in a list. */
.nav-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--s4) var(--s4) 6px;
  font: 640 8.5px/1 var(--font-sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-4);
  text-shadow: 0 1px 0 #00000099;
}
.nav-group-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--bezel-line), transparent);
}
.nav-group-sep { display: none; }

.sidebar-nav a {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  margin: 1px var(--s2);
  padding: 8px 11px;
  min-height: 36px;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font: 550 12.5px/1.2 var(--font-sans);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.sidebar-nav a .nav-icon { width: 16px; height: 16px; flex: none; opacity: .65; transition: opacity var(--t-fast) var(--ease); }
.sidebar-nav a .nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Keys, not links. Hover raises the face out of the rack; active is a
   lit key -- brighter face, bezel rim, and a cyan glow that reads as
   backlight rather than a highlight colour. */
.sidebar-nav a:hover {
  background: linear-gradient(180deg, var(--l2-top), var(--l2));
  box-shadow: var(--bezel-rim);
  color: var(--ink);
}
.sidebar-nav a:hover .nav-icon { opacity: 1; }

.sidebar-nav a.active {
  background:
    linear-gradient(90deg, #22d3ee1f, transparent 82%),
    linear-gradient(180deg, var(--l4), #16233f);
  color: var(--ink);
  box-shadow:
    var(--bezel-rim),
    inset 0 0 0 1px var(--cyan-line),
    0 0 22px -10px var(--cyan);
}
.sidebar-nav a.active .nav-icon { opacity: 1; color: var(--cyan); }
.sidebar-nav a.active::before {
  content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px;
  width: 2px; border-radius: 0 2px 2px 0;
  background: var(--cyan); box-shadow: 0 0 12px -1px var(--cyan);
}

.nav-footer {
  margin: var(--s4) var(--s2) 0;
  padding: var(--s3);
  border: 1px solid var(--line-faint);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface-1), transparent);
  box-shadow: var(--catch);
}
.nav-footer-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 4px 0;
  font: 500 10.5px/1.4 var(--font-sans); color: var(--ink-4);
}
.nav-footer-row .v { font: 620 10.5px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--ink-2); }
.nav-footer-row .v.down { color: var(--down); }
.nav-footer-row .v.up { color: var(--up); }

.theme-toggle {
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--ink-2);
  width: 28px; height: 28px; min-height: 28px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
}
.theme-toggle svg { width: 14px; height: 14px; }
.nav-collapse-btn {
  background: transparent; border: none; color: var(--ink-4);
  cursor: pointer; padding: 4px; margin-left: auto; border-radius: 5px;
}
.nav-collapse-btn:hover { color: var(--ink); background: var(--hover); }

/* ==========================================================================
   18. PAGE HEADER
   ========================================================================== */

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  margin-bottom: var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line-faint);
}
.page-head h1, .page-head h2 {
  margin: 0; font: 660 24px/1.15 var(--font-sans);
  letter-spacing: -.03em; color: var(--ink);
}
.page-head .sub { margin: 6px 0 0; font: 400 12.5px/1.55 var(--font-sans); color: var(--ink-3); max-width: 80ch; }
.page-head .eyebrow {
  display: block; margin-bottom: 7px;
  font: 620 9.5px/1 var(--font-sans);
  letter-spacing: .18em; text-transform: uppercase; color: var(--cyan);
}
.page-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

/* ==========================================================================
   19. FEEDS, BANNERS, SKELETONS
   ========================================================================== */

.feed, #activity-feed { display: flex; flex-direction: column; max-height: 288px; overflow-y: auto; }

/* Feed rows are the workstation's ticker: monospace time, wrapped text,
   and a lit left edge carrying the event class. */
.feed-row {
  display: flex; align-items: baseline; gap: 9px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line-faint);
  border-left: 2px solid transparent;
  font: 400 11px/1.45 var(--font-sans);
  color: var(--ink-2);
  min-width: 0;
}
.feed-row:last-child { border-bottom: none; }
.feed-time { font: 500 10px/1.5 var(--font-mono); color: var(--ink-4); flex: none; }
.feed-text { min-width: 0; overflow-wrap: anywhere; }
.ev-fill    { border-left-color: var(--up); }
.ev-fill .feed-text { color: var(--on-up); }
.ev-reject  { border-left-color: var(--warn); }
.ev-venue{ border-left-color: var(--down); }
.ev-venue .feed-text { color: var(--on-down); }
.ev-order   { border-left-color: var(--cyan); }

.feed-item {
  display: flex; align-items: center; gap: var(--s2);
  padding: 7px 12px;
  border-bottom: 1px solid var(--line-faint);
  font: 500 11px/1.4 var(--font-sans); color: var(--ink-2);
}
.feed-item:last-child { border-bottom: none; }
.feed-item time { margin-left: auto; font: 500 10px/1 var(--font-mono); color: var(--ink-4); }

.emergency-stop-banner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  background: linear-gradient(90deg, var(--down), #c9203c);
  color: #fff; font-weight: 640; font-size: .85rem;
  padding: 10px var(--s4); position: sticky; top: 0; z-index: 850;
}
.emergency-stop-banner[hidden] { display: none; }
.emergency-stop-reset-btn {
  background: #fff; color: var(--down); border: none; border-radius: var(--r-sm);
  min-height: 34px; padding: 6px 14px; font-weight: 700; cursor: pointer; flex-shrink: 0;
}
.offline-banner { background: #7a5b00; color: #fff; text-align: center; font-size: .8rem; padding: 6px 12px; }

@keyframes shimmer { from { background-position: -240px 0; } to { background-position: 240px 0; } }
.skeleton {
  background: linear-gradient(90deg, var(--surface-1) 0, var(--surface-2) 46%, var(--surface-1) 92%);
  background-size: 480px 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: 4px; color: transparent;
}
.skeleton-line { height: 11px; margin-bottom: 8px; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-40 { width: 40%; }

@keyframes arrive { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.arrive { animation: arrive var(--t-slow) var(--ease-out) both; }
.fade-in { animation: arrive var(--t) var(--ease-out) both; }

.code-block {
  background: var(--well); box-shadow: var(--sunken);
  border: 1px solid var(--line-faint); border-radius: var(--r-sm);
  padding: 11px; overflow-x: auto; max-height: 340px;
  font: 400 11px/1.55 var(--font-mono); color: var(--ink-2);
}

/* ==========================================================================
   20. LAYOUT
   ========================================================================== */

.grid { display: grid; gap: var(--s3); align-items: start; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* The flagship split: chart takes the room, rail is fixed-width. */
.grid-terminal { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); }

.main-content { padding: var(--s5); width: 100%; max-width: 2100px; margin-inline: auto; }

/* ==========================================================================
   21. LONG-VALUE CONTAINMENT
   --------------------------------------------------------------------------
   A value with no spaces — a path, a URL, an instrument id — cannot wrap
   at a space and will push its container past the viewport. Proven at
   900px: a database path rendered 1310px wide inside a 900px column.
   `white-space: normal` is required alongside overflow-wrap, because
   overflow-wrap cannot break a line that is not allowed to wrap at all.
   ========================================================================== */

.masked-field,
.status-row > span:last-child,
.line > .v, .prov-line .v,
.tile-value, .tile-sub, .metric-value,
.news-title, .evidence-item, .flow-stage-value {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.masked-field { display: inline-block; max-width: 100%; font: 400 11.5px/1.5 var(--font-mono); color: var(--ink-3); }
.status-row, .row, .provider-row, .metrics, .metric-block, .tile, .tiles { min-width: 0; }
.status-row > span { min-width: 0; }

.status-row, .prov-line {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 7px 0; border-bottom: 1px solid var(--line-faint);
  font: 400 11.5px/1.45 var(--font-sans); color: var(--ink-3);
}
.status-row:last-child, .prov-line:last-child { border-bottom: none; }
.status-row > span:last-child, .prov-line > .v {
  font: 620 11.5px/1.45 var(--font-mono); color: var(--ink); text-align: right;
}

/* ==========================================================================
   22. RESPONSIVE
   --------------------------------------------------------------------------
   Three real layouts, not one scaled.
     desktop  >= 1180   full workstation, rail beside the chart
     tablet   768-1179  rail folds under the chart, nav collapses to icons
     phone    < 768     single column, bottom tab bar, touch-sized controls
   ========================================================================== */

@media (max-width: 1179px) {
  .grid-terminal, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: minmax(0, 1fr); }
  .metrics, .tiles { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); }
  .main-content { padding: var(--s4); }
  .inst-last { font-size: 32px; }
  .inst-symbol { font-size: 22px; }

  /* Tablet keeps the rail as icons — the hierarchy survives and the
     width goes to the chart. Not the desktop layout shrunk. */
  .sidebar-nav { width: var(--rail-collapsed); }
  .sidebar-nav .nav-label, .sidebar-nav .brand-text, .sidebar-nav .nav-group-label { display: none; }
  .sidebar-nav a { justify-content: center; padding: 8px; margin: 1px 8px; }
  .sidebar-nav .brand-row { justify-content: center; padding: 6px 0 var(--s3); }
  .nav-collapse-btn { display: none; }
  .nav-footer { display: none; }
  .intel-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s3); }
}

@media (max-width: 767px) {
  .main-content { padding: var(--s3) var(--s3) 84px; }
  .page-head h1, .page-head h2 { font-size: 20px; }
  .card, .panel, .deck { padding: var(--s3); border-radius: var(--r); }
  .metrics, .tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s2); }
  .tile-value, .metric-value { font-size: 18px; }

  /* Mobile priority: status, chart, positions, then the rest. Set with
     `order` so the DOM stays in reading order for a screen reader while
     the visual order follows operational urgency. */
  .commandbar { order: 1; overflow-x: auto; flex-wrap: nowrap; }
  .tele { flex: 0 0 auto; padding: 9px 14px; }
  .workstation { order: 2; }
  .m-positions { order: 3; }
  .intel-rail { order: 4; display: flex; flex-direction: column; }

  .instrument { padding: var(--s3); gap: var(--s3); }
  .inst-last { font-size: 28px; }
  .inst-symbol { font-size: 19px; }
  /* The rail's group labels are desktop affordances. On a phone they
     push the chart a full row further down for no information the
     controls do not already carry. */
  .chart-rail { padding: 8px var(--s3); gap: 6px; }
  .chart-rail .rail-label { display: none; }
  .chart-rail select { flex: 1 1 120px; }
  .chart-well { margin: var(--s2); }

  /* Touch targets. 44px is the floor for anything pressed while the
     market is moving. */
  .btn, button.primary, .btn-sm, .seg button, .rail-group button { min-height: 44px; padding: 11px 15px; font-size: 12.5px; }
  input, select, textarea { min-height: 44px; font-size: 16px; } /* 16px stops iOS zooming the field */

  .flow-rail { padding-bottom: 12px; }
  .flow-stage { min-width: 132px; }
  .evidence-columns { grid-template-columns: 1fr; }

  /* A wide table is unreadable on a phone, so each row becomes its own
     labelled block. The renderer supplies data-label per cell. */
  table.stack-mobile thead { display: none; }
  table.stack-mobile tbody tr {
    display: block; margin-bottom: var(--s2);
    border: 1px solid var(--line-faint); border-radius: var(--r-sm);
    background: var(--surface-1);
  }
  table.stack-mobile tbody td {
    display: flex; justify-content: space-between; gap: var(--s3);
    padding: 7px 12px; text-align: right;
    border-bottom: 1px solid var(--line-faint);
  }
  table.stack-mobile tbody td:last-child { border-bottom: none; }
  table.stack-mobile tbody td::before {
    content: attr(data-label);
    font: 620 9px/1.7 var(--font-sans); letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-4); text-align: left; flex: none;
  }
  table.stack-mobile tbody tr.row-up td:first-child,
  table.stack-mobile tbody tr.row-down td:first-child { box-shadow: none; }
  table.stack-mobile tbody tr.row-up { border-left: 2px solid var(--up); }
  table.stack-mobile tbody tr.row-down { border-left: 2px solid var(--down); }

  .bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; display: flex;
    background: var(--glass);
    -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px -12px #000000e6;
    overflow-x: auto; scrollbar-width: none; z-index: 800;
  }
  .bottom-nav::-webkit-scrollbar { display: none; }
  .bottom-nav a {
    flex: 0 0 auto; min-width: 68px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
    color: var(--ink-3); text-decoration: none;
    font: 600 9px/1.2 var(--font-sans); letter-spacing: .04em;
  }
  .bottom-nav a .nav-icon { width: 17px; height: 17px; }
  .bottom-nav a.active { color: var(--cyan); }
  .bottom-nav a.active .nav-icon { color: var(--cyan); }

  .topbar {
    display: flex; align-items: center; gap: var(--s2);
    padding: 10px var(--s3);
    background: var(--glass);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
  }
  .topbar .brand { font: 660 13px/1.2 var(--font-sans); }
  .topbar .brand-mark { width: 24px; height: 24px; border-radius: 7px; }
  .topbar .brand-mark svg { width: 13px; height: 13px; }
}

@media (min-width: 768px) {
  .app-shell { display: flex; flex-direction: row; }
  .sidebar-nav { display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto; max-height: 100vh; position: sticky; top: 0; }
  .bottom-nav { display: none; }
  .topbar { display: none; }
}

/* ==========================================================================
   23. ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* The live dot stops pulsing but must still be distinguishable from an
     idle one, so it keeps a static ring. */
  .live-dot, .dot-live { box-shadow: 0 0 0 3px var(--up-dim); }
}

/* More contrast: real borders return and the atmosphere steps aside. */
@media (prefers-contrast: more) {
  :root {
    --line-faint: #8ab4ff4d;
    --line: #8ab4ff73;
    --line-strong: #8ab4ffa6;
    --ink-3: #a9b8d1;
    --ink-4: #8d9cb6;
  }
  body::before, body::after { display: none; }
  .card, .panel, .deck, .tile, .metric-block, .workstation, .commandbar { box-shadow: none; }
}

.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;
}

.skip-link {
  position: absolute; top: -100px; left: 8px; z-index: 1000;
  background: var(--cyan); color: #04101f;
  padding: 10px 16px; border-radius: var(--r-sm);
  text-decoration: none; font: 620 12px/1 var(--font-sans);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 8px; }