/* ── SnipeTrader neon-terminal theme — THE canonical .sniper-theme definition ─────────
   Every page loads this (right after style.css). snipe.css and trenches.css used to each
   carry their own byte-for-byte copy of this block, "kept in sync by hand" — a guaranteed
   drift point (and status.html had no copy at all, silently rendering in the old warm
   case-board palette). One source now; a wiring test asserts the copies stay gone.

   Load order matters: style.css declares the warm case-board defaults on :root; this file
   overrides them wherever <html>/<body> carry class="sniper-theme" (every page). */

.sniper-theme {
  --board: #070a08;
  --card: #0d1410;
  --card-edge: #1c2e22;
  --paper: #d8f5df;
  --ink: #a9c9b2;
  --ink-dim: #5f7a68;
  --pin: #ffb020;
  --danger: #ff3b3b;
  --safe: #39ff8a;
  --string: #ff3b3b;
  /* RGB triplets matching --pin/--danger/--safe above — every rgba(var(--pin-rgb), X)
     across style.css/trust.css/strategy-lab.css re-themes from this override instead of
     staying the case-file amber. --creator-rgb intentionally NOT overridden — the purple
     bundler-cluster accent reads fine unchanged against either theme. */
  --pin-rgb: 255,176,32;
  --danger-rgb: 255,59,59;
  --safe-rgb: 57,255,138;

  /* Shared depth system (panels): a slightly lifted surface, a light edge along the top,
     a real shadow beneath. Lived only in snipe.css before, while style.css consumed the
     variables on every page — pages without snipe.css silently fell back to hardcoded
     literals. */
  --surface: linear-gradient(180deg, #101a14 0%, #0b120e 100%);
  --surface-edge: #1f3527;
  --surface-lip: rgba(125, 255, 180, 0.09);
  --surface-shadow: 0 1px 0 var(--surface-lip) inset, 0 10px 30px -12px rgba(0, 0, 0, 0.9);
  --surface-shadow-lift: 0 1px 0 var(--surface-lip) inset,
                         0 0 0 1px rgba(var(--safe-rgb), 0.10),
                         0 18px 44px -16px rgba(0, 0, 0, 0.95);

  position: relative;
}

/* CRT scanline overlay — scoped to body ONLY. The old selector (bare .sniper-theme::before)
   matched BOTH <html> and <body> (every page sets the class on both), stacking two
   overlays on top of each other. */
body.sniper-theme::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(57, 255, 138, 0.018) 0px,
    rgba(57, 255, 138, 0.018) 1px,
    transparent 1px,
    transparent 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* Page floor: soft pools of light behind the content so panels have something to sit on
   instead of floating on flat black. Painted once, on body. */
/* ── Shared loading skeleton ─────────────────────────────────────────────────────────
   For panels that used to render the literal word "Loading…" while data fetched. Same
   shimmer language as the feed-card skeletons in snipe.css, usable on pages that don't
   load that file. */
.skeleton-bar {
  display: inline-block;
  height: 10px;
  width: 120px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(var(--safe-rgb), 0.06) 25%,
    rgba(var(--safe-rgb), 0.16) 50%,
    rgba(var(--safe-rgb), 0.06) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
.skeleton-bar--wide { width: 100%; max-width: 260px; }
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

html.sniper-theme { background: var(--board); }
body.sniper-theme {
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(var(--safe-rgb), 0.055), transparent 70%),
    radial-gradient(900px 500px at 85% 30%, rgba(var(--pin-rgb), 0.022), transparent 65%),
    var(--board);
}

/* ── Design tokens, second tier (Phase 12, 2026-09-24) ─────────────────────────────────
   Additive. The palette above stays the source of truth; these are the aliases, triples and
   scales page sheets were reaching for without a definition (docs/DESIGN-SYSTEM.md lists every
   token and its rule). Aliases resolve against whichever palette is active, so a page that says
   var(--muted) follows the theme instead of falling back to nothing. */
:root {
  /* aliases that pages already use */
  --muted: var(--ink-dim);            /* snipe.css: secondary text */
  --line: var(--card-edge);           /* positions.css / variants.css: hairlines */
  --ink-faint: #47604f;               /* one step dimmer than --ink-dim, for tertiary labels */
  --warn: var(--pin);                 /* amber warning — the pin colour IS the warning colour */
  --paper-rgb: 216, 245, 223;         /* rgba(var(--paper-rgb), a) — was falling back to a blue */
  --ink-rgb: 169, 201, 178;
  --board-rgb: 7, 10, 8;
  /* unknown-state text: UNKNOWN is a real answer and gets one consistent, dim, non-alarm colour */
  --unknown: var(--ink-dim);
  /* type — the three families every page loads; sizes are the steps the pages actually use */
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-ui: 'Space Grotesk', system-ui, sans-serif;
  --font-display: 'Rajdhani', 'Space Grotesk', sans-serif;
  --text-2xs: 9.5px;  --text-xs: 10.5px;  --text-sm: 11.5px;  --text-md: 12.5px;
  --text-base: 14px;  --text-lg: 17px;    --text-xl: 21px;    --text-2xl: 28px;
  /* space (4px grid) and radius */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --radius-s: 6px; --radius-m: 10px; --radius-l: 16px; --radius-pill: 999px;
  /* z layers — the page-level order every sheet should slot into (see the audit for the spread) */
  --z-raised: 2; --z-sticky: 30; --z-chrome: 100; --z-nav: 300; --z-drawer: 1200; --z-modal: 2500; --z-toast: 3000; --z-palette: 4600; --z-top: 9999;
  /* motion */
  --ease-out: cubic-bezier(.2,.8,.2,1); --dur-fast: 120ms; --dur-base: 200ms;
  /* tap targets */
  --tap-min: 40px;
}
/* One utility for the one state every surface shares. */
.is-unknown { color: var(--unknown); font-style: normal; }

/* ── Charcoal tokens (the Discover board's palette, 2026-10-06; shared 2026-10-10, GitHub #67/#68) ──
   Moved here unchanged from trenches.css so Discover, its Focus chart view and the Sniper Desk read the
   same values: a neutral charcoal surface set, Snipe green for actions and the brand, red / amber kept for
   risk, a normal sans-serif UI and a monospace face for addresses and numbers. Only the pages listed use
   them; every other page keeps the .sniper-theme palette above. Contrast-checked (4.5:1+ on --d-panel). */
body[data-page="trenches"], body[data-page="snipe"], body[data-page="positions"], body[data-page="stats"] {
  --d-canvas: #0B0F14; --d-panel: #111820; --d-panel-2: #16202A; --d-border: #26323E;
  --d-text: #E6EDF3; --d-text-2: #A8B4C2; --d-muted: #8E9BAA;
  --d-accent: #39FF8A; --d-accent-ink: #7CF2B0; --d-accent-soft: rgba(var(--safe-rgb), .10); --d-accent-line: rgba(var(--safe-rgb), .45);
  --d-danger-rgb: 255, 123, 123; --d-caution-rgb: 242, 184, 75;
  --d-danger: #FF7B7B; --d-danger-soft: rgba(var(--d-danger-rgb), .10); --d-caution: #F2B84B; --d-caution-soft: rgba(var(--d-caution-rgb), .10);
  --d-spark: #8AB4F8;
  --d-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --d-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Touch targets (Phase 12 responsive audit, 2026-09-24) ─────────────────────────────
   Measured on phone viewports with touch emulation: 4–13 controls per page were under the
   24×24 CSS px minimum (WCAG 2.5.8) — bare text links in footers and legal copy, the
   feed/positions back-links, the onboarding links, checkbox inputs, the Trenches timeframe
   buttons. On a coarse pointer the hit area grows; on a mouse nothing changes. Vertical
   padding on an inline link enlarges its hit box without moving the line it sits in. */
@media (pointer: coarse) {
  a:not([class]), a.feed-back-link, a.feed-preview-link, a.onboard-open-link, a.positions-ticker-link, a.stats-cta-link,
  a.nav-link, button.about-toggle { padding-block: 6px; }
  button, [role="button"], select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { min-height: 28px; }
  /* min-* beats a page rule's width/height whatever its specificity — a 16px toggle grows, a 24px one is untouched */
  input[type="checkbox"], input[type="radio"] { min-width: 24px; min-height: 24px; }
}