/* Plainflow Design System — canonical tokens (imported from the
   claude.ai/design "Plainflow Design System", 2026-07-19).
   Dark only. Color = direction (green up / red down / amber observed);
   periwinkle ice = brand/interactive. Borders removed as a structural
   device — separation comes from surface elevation + blur.
   Back-compat aliases below keep the existing var() names resolving. */
:root {
  /* ── Base surfaces (near-black, layered) ───────────────── */
  --bg: #08090D;
  --bg-secondary: #1A1D26;       /* raised inputs / hover / inset cards */
  --surface-card: #111219;       /* cards, panels, nav */
  --surface-chart: var(--bg);

  /* ── Foreground / text ─────────────────────────────────── */
  --fg: #FFFFFF;
  --fg-secondary: rgba(255,255,255,0.7);
  --fg-muted: rgba(255,255,255,0.4);

  /* ── Brand / interactive (periwinkle ice) ──────────────── */
  --primary: #AFD8FF;
  --primary-hover: #C8E5FF;
  --voltage: var(--primary);
  --voltage-hover: var(--primary-hover);
  --ink: #0A0C08;                /* near-black text on primary fills */

  /* ── Semantic — DIRECTION ONLY (product law) ───────────── */
  --success: #10B981;
  --danger:  #EF4444;
  --warning: #F59E0B;
  --cyan:    #06B6D4;
  --orange:  #F97316;
  --neutral: #6B7280;
  --neutral-light: #9CA3AF;
  --indigo-light: var(--primary);   /* indigo retired -> periwinkle */

  /* ── Borders — near-none; elevation separates ──────────── */
  --border: transparent;
  --border-strong: rgba(255,255,255,0.12);
  /* a whisper hairline for DENSE data dividers (weather rows, tables) —
     spacing separates elsewhere */
  --border-subtle: rgba(255,255,255,0.06);
  /* Interactive OUTLINE (secondary buttons, selects, fields) — distinct
     from the transparent card border. Material: a VISIBLE resting outline;
     hover adds a state-layer fill (outline strengthens); focus/selected use
     --primary + a tinted fill. Reuse these, never --card-border, on controls. */
  --outline: rgba(255,255,255,0.16);
  --outline-hover: rgba(255,255,255,0.28);

  /* ── Tinted fills / borders ────────────────────────────── */
  --primary-bg: rgba(175,216,255,0.08);
  --primary-bg-hover: rgba(175,216,255,0.15);
  --success-bg: rgba(16,185,129,0.08);
  --success-bg-hover: rgba(16,185,129,0.15);
  --danger-bg: rgba(239,68,68,0.08);
  --danger-bg-hover: rgba(239,68,68,0.15);
  --warning-bg: rgba(245,158,11,0.08);
  --warning-bg-hover: rgba(245,158,11,0.15);
  --primary-border: rgba(175,216,255,0.25);
  --success-border: rgba(16,185,129,0.15);
  --danger-border: rgba(239,68,68,0.15);
  --warning-border: rgba(245,158,11,0.15);
  --voltage-bg: var(--primary-bg);
  --voltage-border: var(--primary-border);

  /* ── Glass / chart ─────────────────────────────────────── */
  --glass-bg: rgba(255,255,255,0.03);
  --glass-bg-hover: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.06);
  --chart-grid: rgba(255,255,255,0.05);
  --crosshair: rgba(255,255,255,0.35);
  --chart-background: var(--bg);

  /* ── Back-compat aliases (existing code uses these names) ── */
  --foreground: var(--fg);
  --foreground-secondary: var(--fg-secondary);
  --foreground-muted: var(--fg-muted);
  --card: var(--surface-card);
  --card-border: transparent;    /* borderless cards (design intent) */
  --background: var(--bg);
  --background-secondary: var(--bg-secondary);

  /* ── Typography ────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: 'Inter', ui-monospace, monospace;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --fw-bold: 700; --fw-heavy: 800;
  --fs-micro: 10px; --fs-caption: 11px; --fs-small: 12px;
  --fs-body-sm: 13px; --fs-body: 14px; --fs-md: 15px; --fs-lg: 17px;
  --fs-xl: 20px; --fs-2xl: 22px; --fs-3xl: 28px; --fs-display: 40px;
  --fs-hero: 72px;
  --fs-statement: clamp(40px, 7vw, 104px);
  --fs-mega: clamp(64px, 15vw, 220px);
  --lh-tight: 1.1; --lh-snug: 1.35; --lh-normal: 1.6; --lh-relaxed: 1.7;
  --ls-tight: -1px; --ls-snug: -0.5px; --ls-normal: 0;
  --ls-label: 0.5px; --ls-wide: 1.5px;

  /* ── Spacing (loose 4-based) ───────────────────────────── */
  --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px;
  --space-5: 10px; --space-6: 12px; --space-7: 14px; --space-8: 16px;
  --space-10: 20px; --space-12: 24px; --space-14: 28px; --space-16: 32px;
  --space-20: 40px; --space-24: 48px;

  /* ── Radii ─────────────────────────────────────────────── */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px;
  --radius-xl: 12px; --radius-2xl: 16px; --radius-pill: 20px; --radius-full: 999px;

  /* ── Elevation ─────────────────────────────────────────── */
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(175,216,255,0.10);   /* periwinkle hover glow */
  --shadow-sheet: 0 -8px 30px rgba(0,0,0,0.35);
  --shadow-glow-success: 0 0 12px rgba(16,185,129,0.3);

  /* ── Motion (ease-out, no bounce) ──────────────────────── */
  --ease-global: cubic-bezier(0.6, 0, 0.15, 1);
  --ease-enter: cubic-bezier(0, 0, 0.15, 1);
  --ease-exit: cubic-bezier(0.6, 0, 1, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: cubic-bezier(0.6, 0, 0.15, 1);
  --dur-fast: 100ms; --dur: 200ms; --dur-slow: 300ms;
  --press-scale: 0.98;

  /* ── Layout dims ───────────────────────────────────────── */
  --nav-height: 64px;
  --icon-bar-width: 60px;
  --panel-width: 400px;
  --blur: 12px;
}

/* ── Mobile guard ──────────────────────────────────────────
   No page may scroll horizontally on a phone. Scoped to ≤768px, where the
   only position:sticky surface (signal-lab detail panel) has already been
   switched to static — so this cannot break sticky on desktop. Genuinely
   wide widgets (tables, monospace output) still get their own
   overflow-x:auto container so they scroll inside their box, not clipped. */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; max-width: 100%; }
}

/* ── Numerals (design research 2026-07-26) ─────────────────────────────
   Proportional digits have per-glyph widths, so a LIVE-UPDATING number
   shifts horizontally as its digits change — the price readout visibly
   jitters, which reads as instability in exactly the product category
   where that is most damaging. Tabular figures give every digit the same
   advance width; lining figures keep them cap-height (some faces default
   to old-style digits that dip below the baseline — fine in prose,
   unreadable in a column).

   Scoped to number-dense surfaces rather than set globally: proportional
   digits genuinely read better in body copy. Apply .pf-num to any
   container whose job is numbers. */
.pf-num,
.pf-num input,
#weatherCard,
#pfSizerSheet,
#weatherLines {
  font-variant-numeric: tabular-nums lining-nums;
  /* older engines / webfont pipelines that drop font-variant-numeric */
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ── Scrollbars (owner 2026-07-26) ─────────────────────────────────────
   macOS-style overlay scrollbar: a rounded pill floating in a gutter,
   with no visible track and no arrows.

   The inset comes from a TRANSPARENT BORDER plus background-clip:
   padding-box — the thumb paints only inside its padding box, so the
   border becomes breathing room without needing a second element. That is
   the whole trick; a bare `width` cannot produce it, which is why the old
   6px thumb sat flush against the panel edge.

   Track is transparent rather than a colour: this way one rule works on
   every surface (black chrome, raised panel, bottom sheet) instead of
   needing a variant per background.

   FIREFOX FALLBACK IS FENCED BEHIND @supports, and that fence is load-
   bearing: from Chrome 121, specifying `scrollbar-width` or
   `scrollbar-color` on an element makes Chrome IGNORE its
   ::-webkit-scrollbar pseudo-elements entirely. Declaring them globally
   for Firefox's benefit therefore silently deletes the pill everywhere
   else — which is exactly what the first version of this block did.
   `@supports not selector(::-webkit-scrollbar)` is true only on engines
   without the pseudo-elements, i.e. Firefox. */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
  }
}
::-webkit-scrollbar { width: 15px; height: 15px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  border: 4px solid transparent;   /* the gutter */
  background-clip: padding-box;
  min-height: 44px;                /* never a dot on a very long page */
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.38); }
::-webkit-scrollbar-thumb:active { background-color: rgba(255, 255, 255, 0.5); }
/* Ours everywhere, including touch (owner 2026-07-26: "just override with
   our own scrollbar"). Styling ::-webkit-scrollbar also takes the bar out
   of the platform's fade-on-idle overlay behaviour, so it stays put and
   stays ours rather than changing character per device. */