/* ===========================================================================
   Swing Stock Picker — design system

   Tokens first. Light is the base; dark is redefined under both the OS media
   query and an explicit [data-theme] stamp so either can win. Dark is the
   design's home (near-black plane, cards raised by luminance) but light is a
   first-class theme, not a tint of the dark one.

   Every colour in the component layer below resolves through a --token. If you
   are about to type a hex value outside this block, add a token instead.
   =========================================================================== */

:root {
  color-scheme: light;

  /* Planes. surface-1 is the card, surface-2 the inset (table head, segmented
     track), surface-3 the interactive/hover step. */
  --page-plane: #f4f6f8;
  --surface-1: #ffffff;
  --surface-2: #eef1f5;
  --surface-3: #e2e7ee;
  --surface-sunken: #e9edf2;

  --text-primary: #0b0e12;
  --text-secondary: #46515e;
  --text-muted: #626d7a;
  --text-on-accent: #ffffff;

  --border: rgba(11, 14, 18, 0.10);
  --border-strong: rgba(11, 14, 18, 0.18);
  --gridline: rgba(11, 14, 18, 0.08);

  /* One saturated accent. Primary action, active nav, focus ring, the single
     probability number. Nothing else. */
  --accent: #1f6feb;
  --accent-strong: #1450a3;
  --accent-text: #1a5fcc;
  --accent-wash: rgba(31, 111, 235, 0.10);
  --accent-wash-strong: rgba(31, 111, 235, 0.18);

  /* Directional colour is semantic. Themed per plane: a red that reads on
     white does not read on black. */
  --gain: #0a7d45;
  --loss: #c02a2a;
  --gain-wash: rgba(10, 125, 69, 0.12);
  --loss-wash: rgba(192, 42, 42, 0.12);

  --status-good: #0a7d45;
  --status-warning: #9a6206;
  --status-critical: #c02a2a;
  --status-good-wash: rgba(10, 125, 69, 0.12);
  --status-warning-wash: rgba(154, 98, 6, 0.13);

  --status-critical-wash: rgba(192, 42, 42, 0.11);

  /* Buy-me-a-coffee. Its own hue rather than --accent: the accent marks the
     primary action for the task, and a tip jar is not that. */
  --coffee-text: #8a5a12;
  --coffee-bg: rgba(196, 130, 30, 0.11);
  --coffee-bg-hover: rgba(196, 130, 30, 0.19);
  --coffee-border: rgba(196, 130, 30, 0.34);
  --coffee-glow: rgba(196, 130, 30, 0.30);

  /* Chart surface tokens. frontend/chart.js draws against these so sparklines
     and detail charts re-theme with everything else. */
  --chart-line: #46515e;
  --chart-grid: rgba(11, 14, 18, 0.09);
  --chart-axis: #626d7a;
  --chart-up: #0a7d45;
  --chart-down: #c02a2a;
  --chart-fill-up: rgba(10, 125, 69, 0.14);
  --chart-fill-down: rgba(192, 42, 42, 0.12);
  --chart-target: #0a7d45;
  --chart-stop: #c02a2a;
  --chart-ref: #626d7a;
  --chart-volume: rgba(11, 14, 18, 0.14);

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 9px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(11, 14, 18, 0.05), 0 8px 20px -14px rgba(11, 14, 18, 0.22);
  --shadow-raised: 0 1px 2px rgba(11, 14, 18, 0.12);

  --header-h: 58px;
  --page-max: 1140px;
  --prose-max: 68ch;

  --dur: 160ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Dark palette — kept identical in both selectors below. Edit both. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;

    --page-plane: #08090b;
    --surface-1: #141619;
    --surface-2: #1c1f24;
    --surface-3: #262a30;
    --surface-sunken: #101215;

    --text-primary: #f4f6f9;
    --text-secondary: #aab3bf;
    --text-muted: #7d8792;
    --text-on-accent: #ffffff;

    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --gridline: rgba(255, 255, 255, 0.06);

    --accent: #4c8dff;
    --accent-strong: #6fa4ff;
    --accent-text: #7fb0ff;
    --accent-wash: rgba(76, 141, 255, 0.14);
    --accent-wash-strong: rgba(76, 141, 255, 0.24);

    --gain: #2fcf7a;
    --loss: #ff6b6b;
    --gain-wash: rgba(47, 207, 122, 0.14);
    --loss-wash: rgba(255, 107, 107, 0.14);

    --status-good: #2fcf7a;
    --status-warning: #f0b429;
    --status-critical: #ff6b6b;
    --status-good-wash: rgba(47, 207, 122, 0.14);
    --status-warning-wash: rgba(240, 180, 41, 0.16);

    --status-critical-wash: rgba(255, 107, 107, 0.14);

    /* Buy-me-a-coffee. Its own hue rather than --accent: the accent marks the
       primary action for the task, and a tip jar is not that. */
    --coffee-text: #f3c46a;
    --coffee-bg: rgba(240, 180, 41, 0.13);
    --coffee-bg-hover: rgba(240, 180, 41, 0.22);
    --coffee-border: rgba(240, 180, 41, 0.36);
    --coffee-glow: rgba(240, 180, 41, 0.28);

    --chart-line: #aab3bf;
    --chart-grid: rgba(255, 255, 255, 0.07);
    --chart-axis: #7d8792;
    --chart-up: #2fcf7a;
    --chart-down: #ff6b6b;
    --chart-fill-up: rgba(47, 207, 122, 0.16);
    --chart-fill-down: rgba(255, 107, 107, 0.14);
    --chart-target: #2fcf7a;
    --chart-stop: #ff6b6b;
    --chart-ref: #7d8792;
    --chart-volume: rgba(255, 255, 255, 0.14);

    /* Drop shadows do nothing on a near-black plane except muddy it; cards
       separate by luminance instead. */
    --shadow-card: none;
    --shadow-raised: none;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --page-plane: #08090b;
  --surface-1: #141619;
  --surface-2: #1c1f24;
  --surface-3: #262a30;
  --surface-sunken: #101215;

  --text-primary: #f4f6f9;
  --text-secondary: #aab3bf;
  --text-muted: #7d8792;
  --text-on-accent: #ffffff;

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --gridline: rgba(255, 255, 255, 0.06);

  --accent: #4c8dff;
  --accent-strong: #6fa4ff;
  --accent-text: #7fb0ff;
  --accent-wash: rgba(76, 141, 255, 0.14);
  --accent-wash-strong: rgba(76, 141, 255, 0.24);

  --gain: #2fcf7a;
  --loss: #ff6b6b;
  --gain-wash: rgba(47, 207, 122, 0.14);
  --loss-wash: rgba(255, 107, 107, 0.14);

  --status-good: #2fcf7a;
  --status-warning: #f0b429;
  --status-critical: #ff6b6b;
  --status-good-wash: rgba(47, 207, 122, 0.14);
  --status-warning-wash: rgba(240, 180, 41, 0.16);

  --status-critical-wash: rgba(255, 107, 107, 0.14);

  /* Buy-me-a-coffee. Its own hue rather than --accent: the accent marks the
     primary action for the task, and a tip jar is not that. */
  --coffee-text: #f3c46a;
  --coffee-bg: rgba(240, 180, 41, 0.13);
  --coffee-bg-hover: rgba(240, 180, 41, 0.22);
  --coffee-border: rgba(240, 180, 41, 0.36);
  --coffee-glow: rgba(240, 180, 41, 0.28);

  --chart-line: #aab3bf;
  --chart-grid: rgba(255, 255, 255, 0.07);
  --chart-axis: #7d8792;
  --chart-up: #2fcf7a;
  --chart-down: #ff6b6b;
  --chart-fill-up: rgba(47, 207, 122, 0.16);
  --chart-fill-down: rgba(255, 107, 107, 0.14);
  --chart-target: #2fcf7a;
  --chart-stop: #ff6b6b;
  --chart-ref: #7d8792;
  --chart-volume: rgba(255, 255, 255, 0.14);

  --shadow-card: none;
  --shadow-raised: none;
}

/* ===========================================================================
   Base
   =========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  background: var(--page-plane);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  /* Wide content scrolls inside its own container; the body never does. */
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -0.015em; }

a { color: var(--accent-text); }

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.num, .tabular { font-variant-numeric: tabular-nums; }

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

/* ===========================================================================
   Site chrome — header, disclaimer bar, footer (injected by nav.js)
   =========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 18px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  text-decoration: none;
  color: var(--text-primary);
}

.brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--accent);
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-on-accent);
}
.brand-mark svg { width: 14px; height: 14px; display: block; }

.brand-name {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand-name span { color: var(--text-muted); font-weight: 600; }

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  min-width: 0;
}

.nav-link {
  display: block;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-link:hover { color: var(--text-primary); background: var(--surface-2); }
.nav-link.is-active {
  color: var(--accent-text);
  background: var(--accent-wash);
}

/* Sits in the header so it is visible without scrolling, on every page. Warm
   amber rather than the site accent: the accent means "this is the primary
   action for the task at hand", and asking for a tip is not that. Distinct
   enough to find, quiet enough not to compete with the nav. */
.coffee-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--coffee-border);
  background: var(--coffee-bg);
  color: var(--coffee-text);
  font-size: 0.83rem;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.coffee-btn:hover {
  background: var(--coffee-bg-hover);
  border-color: var(--coffee-text);
}
.coffee-btn:active { transform: translateY(1px); }
.coffee-btn svg { width: 15px; height: 15px; display: block; flex: none; }

/* Fires once, well into a visit, and stops on its own. An indefinite loop in a
   fixed header is the kind of thing that makes people leave -- this is three
   pulses and then it is furniture again. */
@keyframes coffee-nudge {
  0%, 100% { transform: none; box-shadow: 0 0 0 0 var(--coffee-glow); }
  8%       { transform: translateY(-3px) rotate(-1.5deg); box-shadow: 0 0 0 5px var(--coffee-glow); }
  16%      { transform: translateY(0) rotate(1.5deg); }
  24%      { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 0 0 8px transparent; }
  32%      { transform: none; }
}
.coffee-btn.is-nudging { animation: coffee-nudge 2.6s var(--ease) 3; }

.theme-toggle {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.theme-toggle:hover { background: var(--surface-2); color: var(--text-primary); }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .theme-toggle .icon-sun { display: block; }
  :root:where(:not([data-theme="light"])) .theme-toggle .icon-moon { display: none; }
}

/* Non-dismissable, on every page, at readable size — not a 10px grey
   footnote. §6 of the build spec. */
.disclaimer-bar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.5;
}
.disclaimer-bar-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 9px 18px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.disclaimer-bar strong { color: var(--text-primary); font-weight: 700; }
.disclaimer-bar a { color: var(--accent-text); }

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-1);
  margin-top: 40px;
}

.footer-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 26px 18px 40px;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}

.footer-disclaimer {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: var(--prose-max);
  border-left: 3px solid var(--border-strong);
  padding-left: 14px;
}
.footer-disclaimer strong { color: var(--text-primary); }
.footer-disclaimer + .footer-disclaimer { margin-top: 12px; }

.footer-side { display: flex; flex-direction: column; gap: 14px; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.86rem;
}
.footer-links a { color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.footer-links a:hover { color: var(--text-primary); text-decoration: underline; }

.coffee-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--text-primary);
  text-decoration: none;
  background: var(--surface-2);
  transition: background var(--dur) var(--ease);
}
.coffee-link:hover { background: var(--surface-3); }

.footer-meta { font-size: 0.78rem; color: var(--text-muted); margin: 0; }

/* ===========================================================================
   Page shell
   =========================================================================== */

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 26px 18px 8px;
}

.page-head { margin-bottom: 20px; }

.page-title {
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.page-sub {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  max-width: var(--prose-max);
}

.eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 6px;
}

.notice {
  margin: 0 0 18px;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 13px 16px;
}
.notice strong { color: var(--text-primary); }
.notice.warning {
  border-left-color: var(--status-warning);
  background: var(--status-warning-wash);
}

/* ===========================================================================
   Card
   =========================================================================== */

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: 18px;
  overflow: hidden;
}

.card-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--gridline);
}

.card-head h2 {
  font-size: 0.95rem;
  font-weight: 700;
}

.card-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-left: auto;
  text-align: right;
}

.card-body { padding: 18px; }
.card-body.tight { padding: 14px 18px; }

.muted-note {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-muted);
  max-width: var(--prose-max);
}

/* ===========================================================================
   Stat tiles
   =========================================================================== */

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 38px;
}

.stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Display numbers keep proportional figures — tabular-nums is for columns that
   must align, and makes large values look loosely spaced. */
.stat-value {
  font-size: 1.7rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-primary);
}
.stat-value.gain { color: var(--gain); }
.stat-value.loss { color: var(--loss); }
.stat-value.accent { color: var(--accent-text); }

.stat-label {
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* A compact variant used for market context and model metrics. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 2px;
  background: var(--gridline);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
.stat-cell {
  background: var(--surface-1);
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.stat-cell .stat-label { order: 1; }
.stat-cell .stat-value { order: 2; font-size: 1.28rem; font-variant-numeric: tabular-nums; }
.stat-cell .stat-foot { order: 3; font-size: 0.72rem; color: var(--text-muted); }

/* ===========================================================================
   Controls
   =========================================================================== */

.controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 20px 26px;
  align-items: end;
}

.control-group > label,
.control-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 9px;
}

.control-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
  height: 20px;
}
input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.number-suffix {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 68px;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}

.number-suffix .unit {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted);
}

.number-suffix input[type="number"] {
  width: 58px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-primary);
  padding: 6px 8px;
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.segmented {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 3px;
}

.segment {
  flex: 1;
  padding: 7px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-weight: 650;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segment:hover:not(.active) { color: var(--text-primary); }
.segment.active {
  background: var(--surface-1);
  color: var(--accent-text);
  box-shadow: var(--shadow-raised);
}

.btn {
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font: inherit;
  font-weight: 650;
  font-size: 0.86rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:hover:not(:disabled) { background: var(--surface-3); }
.btn:disabled { opacity: 0.55; cursor: default; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
  padding: 11px 24px;
  font-size: 0.9rem;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }

.btn-sm { padding: 5px 11px; font-size: 0.78rem; }

/* An anchor styled as a button still lays out as inline text; these bring it
   back in line with the real <button> next to it. */
a.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}
a.btn.btn-primary { color: var(--text-on-accent); }
a.btn svg { flex: none; }

/* Route from the briefing to the screener. The briefing is one fixed set of
   parameters; this is the way to any other set, so it gets a real button rather
   than a line of body copy. */
.page-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 16px 0 0;
}
.page-cta-note {
  font-size: 0.84rem;
  color: var(--text-muted);
  max-width: 46ch;
}

/* The volatility control needs more room than a slider, so on the wide grid it
   takes every column except the one holding the scan button. */
.control-wide { grid-column: 1 / -2; }

.control-action { align-self: end; }

/* ===========================================================================
   Run status + progress
   =========================================================================== */

.run-status { margin: 0 2px 18px; }

.status-line {
  min-height: 20px;
  font-size: 0.84rem;
  color: var(--text-secondary);
}
.status-line.error { color: var(--status-critical); font-weight: 650; }

.progress-wrap { margin-top: 10px; }

.progress-bar {
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transition: width 0.3s var(--ease);
}

/* The bulk price download is one opaque blocking call with no observable
   sub-progress, so rather than fake a percentage the bar sweeps to show it is
   alive but unmeasured. */
.progress-bar.indeterminate .progress-bar-fill {
  width: 35%;
  transition: none;
  animation: progress-sweep 1.4s ease-in-out infinite;
}

@keyframes progress-sweep {
  0% { margin-left: -35%; }
  100% { margin-left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar.indeterminate .progress-bar-fill {
    animation: none;
    width: 100%;
    margin-left: 0;
    opacity: 0.45;
  }
}

.progress-label {
  margin-top: 7px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   Results table
   =========================================================================== */

.table-scroll {
  overflow-x: auto;
  /* Momentum scroll on iOS without the body ever moving. */
  -webkit-overflow-scrolling: touch;
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
  min-width: 760px;
}

/* Deliberately not sticky: WebKit does not support position:sticky on cells of
   a border-collapse table, and the nearest scrolling ancestor here only scrolls
   horizontally. With ten rows it earns nothing anyway. */
.results-table thead th {
  text-align: left;
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--gridline);
  padding: 10px 14px;
  white-space: nowrap;
}

.results-table th.num,
.results-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.results-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--gridline);
  vertical-align: middle;
}
.results-table tbody tr:last-child td { border-bottom: none; }

.result-row { cursor: pointer; transition: background var(--dur) var(--ease); }
.result-row:hover { background: var(--surface-2); }
.result-row.is-open { background: var(--surface-2); }
.result-row.is-open td { border-bottom-color: transparent; }

.col-rank { width: 42px; }
.results-table td.col-rank {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  font-weight: 650;
}

.ticker-cell { white-space: nowrap; min-width: 150px; }

.ticker-link {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.ticker-link:hover { color: var(--accent-text); text-decoration: underline; }

.company-name {
  display: block;
  font-weight: 500;
  font-size: 0.74rem;
  color: var(--text-muted);
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chart-forward: every row carries its own recent shape. chart.js sizes its own
   SVG from the host's width and the height it is passed, so the host fixes a
   width and lets height follow. */
.col-spark { width: 96px; }
.spark {
  display: block;
  width: 84px;
  min-height: 28px;
  line-height: 0;
}
.spark.is-empty { visibility: hidden; }

/* Direction is carried by an arrow glyph as well as hue, so meaning does not
   rest on colour alone. */
.value-gain { color: var(--gain); font-weight: 650; }
.value-loss { color: var(--loss); font-weight: 650; }
.value-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.dir { font-size: 0.68em; }

.price-cell { font-weight: 650; font-size: 0.95rem; }

/* Earnings inside the holding window is a hard risk flag, not a nuance: a gap
   opens past the stop rather than trading through it. */
.earnings-flag,
.shock-flag {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 5px;
  padding: 1px 6px;
  white-space: nowrap;
}
.earnings-flag { color: var(--status-warning); background: var(--status-warning-wash); }
.shock-flag { color: var(--accent-text); background: var(--accent-wash); }

.odds { font-weight: 700; }
.odds-good { color: var(--gain); }
.odds-bad { color: var(--loss); }

.prob-stop { color: var(--loss); font-weight: 650; }

/* The estimated probability replaces a vague badge: a number the calibration
   curve actually backs is more use than the word "High". */
.prob { display: flex; flex-direction: column; line-height: 1.2; }
.prob b {
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
  letter-spacing: -0.02em;
}
.prob-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.row-toggle {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.row-toggle:hover { background: var(--surface-3); color: var(--text-primary); }
.row-toggle svg {
  width: 14px; height: 14px; display: block;
  transition: transform var(--dur) var(--ease);
}
.row-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.col-toggle { width: 54px; }

.horizon-warning,
.concentration {
  margin: 0;
  padding: 12px 18px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--gridline);
  background: var(--status-warning-wash);
}
.horizon-warning.severe {
  color: var(--text-primary);
  background: var(--status-critical-wash);
  font-weight: 550;
}

.empty-row td {
  text-align: center;
  color: var(--text-muted);
  padding: 52px 14px;
  font-size: 0.88rem;
}

/* ===========================================================================
   Badges
   =========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.73rem;
  font-weight: 700;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.badge.no-dot::before { display: none; }

.badge-good { color: var(--status-good); background: var(--status-good-wash); }
.badge-warning { color: var(--status-warning); background: var(--status-warning-wash); }
.badge-critical { color: var(--status-critical); background: var(--status-critical-wash); }
.badge-muted { color: var(--text-muted); background: var(--surface-3); }
.badge-accent { color: var(--accent-text); background: var(--accent-wash); }
.badge-accent-dim { color: var(--accent-text); background: var(--accent-wash); opacity: 0.75; }

/* ===========================================================================
   Row detail panel
   =========================================================================== */

.detail-row > td {
  background: var(--surface-2);
  padding: 0 18px 18px;
}

.detail-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.detail-chart-wrap {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  min-width: 0;
}

.detail-chart {
  width: 100%;
  min-width: 0;
  min-height: 200px;
}

.chart-missing {
  display: grid;
  place-items: center;
  height: 240px;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  padding: 0 14px;
}

.signals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 0 22px;
  font-size: 0.8rem;
}
.signals-grid div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--gridline);
  padding: 6px 0;
}
.signals-grid span:first-child { color: var(--text-muted); }
.signals-grid span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  text-align: right;
}

.detail-side { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

.adv-chart-panel { margin-top: 12px; }
.adv-chart-host {
  height: 480px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
.adv-chart-note {
  margin: 8px 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ===========================================================================
   Briefings
   =========================================================================== */

.brief-hero {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px 20px 18px;
  margin-bottom: 18px;
}

.brief-hero-top {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.brief-date {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.brief-session {
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-wash);
  border-radius: var(--radius-pill);
  padding: 3px 11px;
}

.brief-generated {
  margin-left: auto;
  font-size: 0.76rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.tier {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: 18px;
  overflow: hidden;
}

.tier-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 15px 18px;
  border-bottom: 1px solid var(--gridline);
  background: var(--surface-2);
}

.tier-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.tier-params {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  text-align: right;
}

.tier-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: none;
}
.tier-low .tier-dot { background: var(--status-good); }
.tier-medium .tier-dot { background: var(--accent); }
.tier-high .tier-dot { background: var(--status-warning); }

/* A measured negative about a whole tier belongs above its picks, not in a
   footnote — but it is context, not an alarm, so it gets an edge rather than a
   full wash. */
.tier-caution {
  margin: 0;
  padding: 12px 18px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-secondary);
  background: var(--surface-1);
  border-left: 3px solid var(--status-warning);
  border-bottom: 1px solid var(--gridline);
}

.picks { display: grid; gap: 1px; background: var(--gridline); }

/* The wrapper exists so a pick and its expanded chart share one background and
   one border, and read as a single object rather than two stacked rows. */
.pick-wrap { background: var(--surface-1); }
.pick-wrap.is-open { background: var(--surface-2); }

.pick {
  background: transparent;
  padding: 15px 18px;
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) 104px repeat(4, minmax(84px, 1fr)) 32px;
  gap: 14px;
  align-items: center;
}

.pick-rank {
  display: inline-block;
  min-width: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.pick-id { min-width: 0; }
.pick-ticker {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-decoration: none;
}
.pick-ticker:hover { color: var(--accent-text); text-decoration: underline; }
.pick-company {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Secondary figures wrap rather than truncate — an ellipsis mid-number reads
   as a broken value. */
.pick-extra {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* The sparkline is the obvious thing to click for a bigger chart, so it is a
   real button rather than an image with a click handler -- it takes focus, it
   answers the keyboard, and it announces what it opens. */
.pick-spark {
  display: block;
  width: 100px;
  min-height: 34px;
  line-height: 0;
  padding: 3px;
  margin: -3px;
  background: none;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  color: inherit;
  transition: background-color 140ms ease;
}
.pick-spark:hover { background: var(--surface-3); }
.pick-spark.is-empty { cursor: default; }
.pick-spark.is-empty:hover { background: none; }

.pick-toggle {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.pick-toggle:hover { background: var(--surface-3); color: var(--text-primary); }
.pick-toggle svg { transition: transform 160ms ease; }
.pick-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.pick-detail {
  padding: 0 18px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(210px, 1fr);
  gap: 20px;
  align-items: start;
}
/* An author-level `display` beats the UA stylesheet's `[hidden] {display:none}`,
   so every collapsed panel would render open. The attribute is the state the
   JavaScript toggles, so it has to be the attribute that wins. */
.pick-detail[hidden] { display: none; }
.pick-detail-chart {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 10px 6px;
  background: var(--surface-1);
}
.pick-detail-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The chart draws the levels; this says which line is which, in the same
   colours, so the mapping needs no caption inside the plot. */
.level-key { display: flex; flex-direction: column; gap: 7px; }
.level-key-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.level-key-row em { font-style: normal; color: var(--text-muted); font-size: 0.78rem; }
.level-key .swatch {
  width: 14px;
  height: 0;
  flex: none;
  border-top: 2px dashed currentColor;
}
.level-key .swatch.gain { color: var(--gain); }
.level-key .swatch.loss { color: var(--loss); }
.level-key .swatch.accent { color: var(--accent); border-top-style: solid; }

.detail-note {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

/* Spans both columns of the detail grid: the cases are prose and read badly in
   a narrow rail beside the chart. */
.pick-research {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.research-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
/* Stated plainly and first. A reader should never have to work out which part
   of the page a model wrote. */
.research-tag {
  flex: none;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  background: var(--surface-3);
}
.research-meta { font-size: 0.78rem; color: var(--text-muted); }

.research-profile {
  margin: 0 0 12px;
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.case h4 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.case-bull h4 { color: var(--gain); }
.case-bear h4 { color: var(--loss); }
.case ul { margin: 0; padding-left: 18px; }
.case li {
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.case .muted-note { font-size: 0.83rem; margin: 0; }

/* Citations are links, not decoration -- the point is that any sentence can be
   checked against the headline it came from in one click. */
.cite {
  margin-left: 2px;
  text-decoration: none;
  color: var(--accent-text);
  font-weight: 700;
}
.cite sup { font-size: 0.62rem; }
a.cite:hover { text-decoration: underline; }

.research-sources { margin-top: 12px; }
.research-sources summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.research-sources ol {
  margin: 8px 0 0;
  padding-left: 22px;
  font-size: 0.82rem;
  line-height: 1.5;
}
.research-sources li { margin-bottom: 4px; color: var(--text-secondary); }
.src-date { color: var(--text-muted); font-size: 0.76rem; }

.adv-wrap { margin-top: 2px; }
.adv-host {
  height: 400px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .pick-toggle svg,
  .pick-spark { transition: none; }
}

.pick-metric { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pick-metric .m-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pick-metric .m-value {
  font-size: 1rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.pick-metric .m-sub {
  font-size: 0.71rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.m-value.gain { color: var(--gain); }
.m-value.loss { color: var(--loss); }
.m-value.accent { color: var(--accent-text); }

.pick-flags {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: -4px;
}
.pick-flags:empty { display: none; }

.flag {
  font-size: 0.73rem;
  line-height: 1.45;
  border-radius: 7px;
  padding: 5px 10px;
}
.flag-shock { color: var(--text-secondary); background: var(--accent-wash); }
.flag-shock b { color: var(--accent-text); }
.flag-earnings { color: var(--text-secondary); background: var(--status-warning-wash); }
.flag-earnings b { color: var(--status-warning); }

.tier-filtered { border-top: 1px solid var(--gridline); }
details.filtered {
  padding: 0;
}
details.filtered > summary {
  padding: 11px 18px;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
details.filtered > summary::-webkit-details-marker { display: none; }
details.filtered > summary::before {
  content: "▸";
  color: var(--text-muted);
  font-size: 0.8rem;
  transition: transform var(--dur) var(--ease);
}
details.filtered[open] > summary::before { transform: rotate(90deg); }
details.filtered > summary:hover { color: var(--text-primary); }

.filtered-list {
  margin: 0;
  padding: 0 18px 15px;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.filtered-list b {
  color: var(--text-primary);
  font-weight: 700;
  margin-right: 8px;
}

.brief-notes {
  margin: 0;
  padding-left: 20px;
  font-size: 0.86rem;
  color: var(--text-secondary);
  display: grid;
  gap: 7px;
  max-width: var(--prose-max);
}

.archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--gridline);
}
.archive-item {
  background: var(--surface-1);
}
.archive-link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 18px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background var(--dur) var(--ease);
}
.archive-link:hover { background: var(--surface-2); }
.archive-link.is-current { background: var(--accent-wash); }
.archive-date { font-weight: 650; font-variant-numeric: tabular-nums; }
.archive-session {
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.archive-count {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.support-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 18px;
}
.support-card p {
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  max-width: var(--prose-max);
}

.empty-state {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 42px 22px;
  text-align: center;
  margin-bottom: 18px;
}
.empty-state h2 { font-size: 1.1rem; margin-bottom: 8px; }
.empty-state p {
  margin: 0 auto;
  max-width: 52ch;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.skeleton {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  height: 96px;
  margin-bottom: 18px;
}

/* ===========================================================================
   Method prose
   =========================================================================== */

.prose { max-width: var(--prose-max); }
.prose p { margin: 0 0 14px; color: var(--text-secondary); }
.prose p strong { color: var(--text-primary); }
.prose ul { margin: 0 0 14px; padding-left: 20px; color: var(--text-secondary); }
.prose li { margin-bottom: 7px; }
.prose li strong { color: var(--text-primary); }
.prose h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 20px 0 8px;
  color: var(--text-primary);
}
.prose h3:first-child { margin-top: 0; }

.flag-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--status-warning-wash);
  border: 1px solid var(--border);
  border-left: 4px solid var(--status-warning);
  border-radius: var(--radius-md);
  padding: 15px 17px;
  margin-bottom: 18px;
}
.flag-banner-icon { color: var(--status-warning); flex: none; }
.flag-banner-icon svg { width: 20px; height: 20px; display: block; }
.flag-banner h2 { font-size: 0.95rem; margin-bottom: 5px; }
.flag-banner p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-secondary);
  max-width: var(--prose-max);
}
.flag-banner code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  background: var(--surface-3);
  border-radius: 4px;
  padding: 1px 5px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 460px;
}
.data-table th {
  text-align: left;
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--gridline);
  padding: 9px 14px;
  white-space: nowrap;
}
.data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--gridline);
  color: var(--text-secondary);
}
.data-table td:first-child { color: var(--text-primary); font-weight: 600; }
.data-table td.num, .data-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .row-negative td.num { color: var(--loss); font-weight: 650; }
.data-table .row-positive td.num { color: var(--gain); font-weight: 650; }

.kv-list {
  display: grid;
  gap: 0;
  font-size: 0.85rem;
}
.kv-list > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--gridline);
}
.kv-list > div:last-child { border-bottom: none; }
.kv-list dt, .kv-list .k { color: var(--text-muted); margin: 0; }
.kv-list dd, .kv-list .v {
  margin: 0;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ===========================================================================
   Responsive
   =========================================================================== */

@media (max-width: 1000px) {
  .detail-panel { grid-template-columns: 1fr; }
  .pick {
    grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(76px, 1fr)) 32px;
    gap: 12px 14px;
  }
  .pick-spark { grid-column: 1 / -1; width: 100%; order: 9; }
  .pick-flags { order: 10; }
  .pick-detail { grid-template-columns: 1fr; }
}

/* The results table keeps a minimum width and scrolls, so its cells are wider
   than the screen. The expanded panel must not inherit that: it is pinned to
   the width actually visible, which is where the table sits when a row is first
   opened. Without this the chart is drawn 900px wide behind the right edge. */
@media (max-width: 820px) {
  .detail-panel { max-width: calc(100vw - 52px); }
}

@media (max-width: 860px) {
  .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-wide { grid-column: 1 / -1; }
  .control-action { grid-column: 1 / -1; }
  .btn-primary { width: 100%; }
  .footer-inner { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .page { padding: 20px 14px 8px; }
  .header-inner { padding: 0 14px; gap: 8px; }
  /* The cup alone still reads as "tip jar" and the header has to fit three
     routes first. The full label returns in the footer, where there is room.
     Clipped rather than `display: none` on purpose -- display:none drops the
     text from the accessibility tree, which would leave an icon-only link that
     announces as unlabelled. This keeps the name and removes only the pixels. */
  .coffee-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .coffee-btn { padding: 8px; }
  .disclaimer-bar-inner { padding: 9px 14px; }
  .footer-inner { padding: 22px 14px 34px; }
  .controls { grid-template-columns: 1fr; }
  .card-hint { display: none; }
  .page-title { font-size: 1.5rem; }
  .stat-row { gap: 16px 26px; }
  .stat-value { font-size: 1.4rem; }
  .brand-name span { display: none; }
  .nav-link { padding: 7px 9px; font-size: 0.82rem; }
  .brief-generated { margin-left: 0; width: 100%; }
  .tier-params { margin-left: 0; width: 100%; text-align: left; }

  /* Picks stop being a row of columns and become a two-column block. */
  .pick {
    grid-template-columns: 1fr 1fr 32px;
    row-gap: 13px;
    padding: 15px 14px;
  }
  .pick-id { grid-column: 1 / span 2; }
  .pick-spark { grid-column: 1 / -1; width: 100%; }
  /* The chevron rides beside the ticker rather than trailing four metric
     columns, which on a phone would put it alone at the bottom of the block. */
  .pick-toggle { grid-column: 3; grid-row: 1; align-self: start; }
  .pick-detail { padding: 0 14px 16px; }
  .cases { grid-template-columns: 1fr; gap: 14px; }
  .adv-host { height: 320px; }
  .detail-row > td { padding: 0 12px 14px; }
}

/* Below this the three nav routes and the wordmark cannot both fit, and the
   routes are what the header is for. */
@media (max-width: 560px) {
  .brand-name { display: none; }
  .header-inner { gap: 10px; }
  .nav { margin-left: 0; }
  .theme-toggle { margin-left: auto; }
}

@media (max-width: 640px) {
  .chart-missing { height: 180px; }
  .adv-chart-host { height: 380px; }
}