/* ==========================================================================
   Science Markets — design system
   Paper-first canvas, one accent, tabular numerals. Values shown are simulated.

   The palette is one set of semantic tokens defined twice: once on paper (the
   default, because most readers want a document they can read in daylight) and
   once on ink. Nothing below this block hardcodes a color, so the whole site
   flips by changing one attribute on <html>.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Surfaces — paper */
  --ink-900: #f6f7fb;   /* page canvas */
  --ink-850: #eff1f7;   /* recessed wells, gradient ends */
  --ink-800: #e9ecf4;   /* inputs, code */
  --surface: #ffffff;   /* cards */
  --surface-2: #f3f5fa;
  --surface-3: #e6e9f2;

  /* Lines */
  --line: rgba(17, 20, 28, 0.09);
  --line-strong: rgba(17, 20, 28, 0.16);
  --line-bright: rgba(17, 20, 28, 0.28);

  /* Text */
  --text: #10131a;
  --text-soft: #3d4557;
  --muted: #5f6776;
  --faint: #616978;

  /* Semantics. These read as ink on paper, so each one has to clear 4.5:1 on
     the lightest surfaces it lands on — white, the paper canvas, the recessed
     `--surface-3`, and its own tinted tag chip. The earlier values (--up
     #0e8f5b at 4.12:1, --warn #a0680c at 4.69:1, --faint #6c7483 at 4.70:1)
     were fine for large text but not for the 11–15px labels they are used on. */
  --up: #087247;
  --up-soft: rgba(8, 114, 71, 0.09);
  --up-line: rgba(8, 114, 71, 0.3);
  --up-soft-hover: rgba(8, 114, 71, 0.17);
  --down: #b62b2b;
  --down-soft: rgba(182, 43, 43, 0.09);
  --down-line: rgba(182, 43, 43, 0.3);
  --down-soft-hover: rgba(182, 43, 43, 0.17);
  --brand: #4053d6;
  --brand-soft: rgba(64, 83, 214, 0.09);
  --brand-line: rgba(64, 83, 214, 0.28);
  --warn: #8a5506;
  --warn-soft: rgba(138, 85, 6, 0.09);
  --warn-line: rgba(138, 85, 6, 0.28);
  --warn-bg: #fdf4e0;
  --warn-text: #7c4f06;
  --warn-text-strong: #5f3c04;

  /* Per-provider hues, used only on the panel dots */
  --p-openai: #0f9d6b;
  --p-anthropic: #7b53e0;
  --p-xai: #1c7fc9;

  /* Chart furniture. Kept separate from the UI tokens above so the ink pass can
     retune the plot without touching the chrome. */
  --brand-band: rgba(64, 83, 214, 0.16);
  --brand-fill: rgba(64, 83, 214, 0.09);
  --brand-halo: rgba(64, 83, 214, 0.15);
  --whisk: rgba(64, 83, 214, 0.55);
  --whisk-cap: rgba(64, 83, 214, 0.75);
  --plot-now-a: rgba(17, 20, 28, 0.14);
  --plot-now-b: rgba(17, 20, 28, 0.03);
  --halo: rgba(17, 20, 28, 0.07);
  --dot-shadow: 0 1px 3px rgba(17, 20, 28, 0.18);
  --hero-glow: rgba(64, 83, 214, 0.10);
  --topbar-bg: rgba(255, 255, 255, 0.82);

  /* Buttons need their own inks; a light UI cannot invert by swapping --text. */
  --btn-bg: #171a23;
  --btn-bg-hover: #2b3040;
  --btn-fg: #ffffff;
  --on-text: #ffffff;

  /* Geometry */
  --r-sm: 9px;
  --r: 13px;
  --r-lg: 18px;
  --r-xl: 26px;
  --shadow: 0 1px 2px rgba(17, 20, 28, 0.05), 0 14px 34px -22px rgba(17, 20, 28, 0.22);
  --shadow-lift: 0 2px 6px rgba(17, 20, 28, 0.07), 0 28px 56px -30px rgba(17, 20, 28, 0.28);
  --glow: 0 0 0 1px rgba(64, 83, 214, 0.12), 0 20px 60px -30px rgba(64, 83, 214, 0.28);

  /* The mark's own colors, shared by the inline SVG and the favicon pipeline. */
  --mark-line: #4d61e0;
  --mark-read: #10131a;
  --mark-chip: #ffffff;

  --maxw: 1200px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SF Mono", ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
.market-price-pair { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:24px 0 12px; }
.market-price-pair > div { display:flex; flex-direction:column; gap:8px; min-width:0; }
.market-price-pair strong { font-size:clamp(20px, 3vw, 32px); font-weight:650; letter-spacing:-.035em; line-height:1.2; }
.history-toggles { display:flex; gap:16px; flex-wrap:wrap; font-size:13px; }
.history-toggles label { display:flex; align-items:center; gap:5px; cursor:pointer; }
.price-history-chart svg { width:100%; height:auto; min-height:220px; display:block; }
.history-empty { padding:20px; background:var(--surface-2); border-radius:var(--r); color:var(--muted); }
/* The model scores under "This week's AI estimate", always visible — the
   heading is text, not a control, so the details it names live beside it. */
.panel-at-a-glance { margin-top: 10px; padding: 10px 14px; border: 1px dashed var(--line); border-radius: var(--r); }
.panel-at-a-glance .glance-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.panel-glance-score { font-weight: 600; font-variant-numeric: tabular-nums; }
.short-facts { margin: 12px 0 0; padding: 0 0 0 18px; display: grid; gap: 8px; font-size: 13.5px; color: var(--text-soft); }
.short-facts strong { color: var(--text); font-weight: 600; }
.prose-page { max-width:860px; }
/* Top padding lives in a later rule: `.wrap`'s `padding: 0 24px` shorthand
   comes after this line in source order and would reset padding-top to 0
   (same specificity), which is why the page headers hugged the topbar. */
.prose-page > .card { margin:20px 0; padding:28px; }
.prose-page p { color:var(--text-soft); line-height:1.75; }
.model-prose { line-height:1.65; font-size:14px; color:var(--text-soft); overflow-wrap:anywhere; }
.model-prose p { margin:12px 0; }
.model-prose a { color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.model-prose ul, .model-prose ol { padding-left:22px; }
.model-prose pre { white-space:pre-wrap; }
.model-full summary { color:var(--brand); }
.provider-note { overflow-wrap:anywhere; }
.cite { overflow-wrap:anywhere; }
.provider-body h4 { font-size:13px; margin:18px 0 6px; }
.market-tile .q { margin:16px 0; }
@media (max-width:600px) { .market-price-pair { gap:14px; } .chart-toolbar { align-items:flex-start; gap:16px; flex-direction:column; } .price-history-chart { overflow-x:auto; } .price-history-chart svg { min-width:580px; } }

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

/* ----------------------------------------------------------------- ink pass */
/* Same tokens, inverted. Every surface, line, text and chart color is defined
   here so no rule below needs a theme branch. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --ink-900: #07080c;
  --ink-850: #0a0c11;
  --ink-800: #0f1218;
  --surface: #12151c;
  --surface-2: #171b24;
  --surface-3: #1e2330;

  --line: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.12);
  --line-bright: rgba(255, 255, 255, 0.2);

  --text: #f2f4f9;
  --text-soft: #bcc2d0;
  --muted: #8b92a4;
  --faint: #7b8394;

  --up: #34d399;
  --up-soft: rgba(52, 211, 153, 0.12);
  --up-line: rgba(52, 211, 153, 0.32);
  --up-soft-hover: rgba(52, 211, 153, 0.2);
  --down: #f87171;
  --down-soft: rgba(248, 113, 113, 0.12);
  --down-line: rgba(248, 113, 113, 0.32);
  --down-soft-hover: rgba(248, 113, 113, 0.2);
  --brand: #9db0ff;
  --brand-soft: rgba(157, 176, 255, 0.12);
  --brand-line: rgba(157, 176, 255, 0.3);
  --warn: #f0b95c;
  --warn-soft: rgba(240, 185, 92, 0.12);
  --warn-line: rgba(240, 185, 92, 0.3);
  --warn-bg: rgba(240, 185, 92, 0.1);
  --warn-text: #e9c37f;
  --warn-text-strong: #f5d79b;

  --p-openai: #6ee7b7;
  --p-anthropic: #c4b5fd;
  --p-xai: #7dd3fc;

  --brand-band: rgba(157, 176, 255, 0.22);
  --brand-fill: rgba(163, 177, 255, 0.22);
  --brand-halo: rgba(157, 176, 255, 0.16);
  --whisk: rgba(163, 177, 255, 0.75);
  --whisk-cap: rgba(163, 177, 255, 0.85);
  --plot-now-a: rgba(255, 255, 255, 0.14);
  --plot-now-b: rgba(255, 255, 255, 0.04);
  --halo: rgba(255, 255, 255, 0.08);
  --dot-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  --hero-glow: rgba(124, 140, 255, 0.16);
  --topbar-bg: rgba(8, 9, 13, 0.82);

  --btn-bg: #1e2330;
  --btn-bg-hover: #262c3a;
  --btn-fg: #f2f4f9;
  --on-text: #0b0d13;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 16px 40px -24px rgba(0, 0, 0, 0.8);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.5), 0 32px 64px -32px rgba(0, 0, 0, 0.9);
  --glow: 0 0 0 1px rgba(157, 176, 255, 0.14), 0 20px 60px -30px rgba(157, 176, 255, 0.4);

  /* The mark's line and caps take these two colors. The static logo.svg and
     favicon.svg hardcode their own light/dark pairs via prefers-color-scheme;
     the point in the inline mark is a gradient styled near the end of this file. */
  --mark-line: #a3b1ff;
  --mark-read: #f2f4f9;
  --mark-chip: #12151c;
}

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.18; }
.h-sm { font-size: 17px; letter-spacing: -0.02em; }

.num, .mono, table td.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ------------------------------------------------------------------ header */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--topbar-bg);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 62px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.028em;
  white-space: nowrap;
}
.brand-mark { flex: none; }
.definition-equations { padding: 4px 16px 16px; margin: 18px 0; border-left: 2px solid var(--brand); }
.definition-equations math { font-size: 1.25rem; margin: 16px 0; overflow-x: auto; }
/* A visible, continuous drift, confined to the header. Only transform changes:
   no animated blur, layout work, or hover transition fighting the loop. The
   endpoints match with zero velocity, so there is no jump on repeat. */
@keyframes mark-drift {
  0%, 100% { transform: translateX(-10px); }
  50% { transform: translateX(2px); }
}
@media (prefers-reduced-motion: no-preference) {
  .topbar .brand-mark .mark-point { animation: mark-drift 4.8s ease-in-out infinite; }
}
/* A tagline under the wordmark forced the logo to two lines and made the bar
   twice as tall as it needed to be. The bar is a name, a nav and an action. */
.brand-word { line-height: 1.1; }

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.nav-links a {
  padding: 7px 11px;
  border-radius: var(--r-sm);
  color: var(--text-soft);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-links a.is-active { color: var(--text); background: var(--surface-2); }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-right form { display: inline-flex; }

.wallet-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--surface-2);
  font-size: 13px;
  color: var(--text-soft);
  white-space: nowrap;
}
.wallet-chip strong { color: var(--text); font-variant-numeric: tabular-nums; }
.wallet-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); flex: none; }

/* Theme toggle. Two-state, no menu: the icon shows what a click gives you. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  color: var(--muted);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.theme-toggle:hover { color: var(--text); background: var(--surface-2); border-color: var(--line-strong); }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .to-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .to-dark { display: block; }
:root[data-theme="dark"] .theme-toggle .to-light { display: none; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 14px;
  font-weight: 500;
  transition: transform 0.08s, background 0.15s, border-color 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.btn:hover { background: var(--btn-bg-hover); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--text); color: var(--on-text); }
.btn-primary:hover { background: var(--text); opacity: 0.88; }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--text-soft); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-up { background: var(--up-soft); border-color: var(--up-line); color: var(--up); }
.btn-up:hover { background: var(--up-soft-hover); }
.btn-down { background: var(--down-soft); border-color: var(--down-line); color: var(--down); }
.btn-down:hover { background: var(--down-soft-hover); }
.btn-lg { padding: 14px 22px; font-size: 15px; }
.btn-sm { padding: 6px 11px; font-size: 13px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: 0.45; pointer-events: none; }

/* One focus ring for every keyboard-reachable control, including the <summary>
   folds, which are focusable but had no visible state. Mouse clicks do not
   trigger :focus-visible, so the ring only appears for keyboard users. The
   outline follows each element's own radius, so pills stay pills. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ layout */
main { min-height: 60vh; padding-bottom: 96px; }
/* Content pages start below the 62px topbar with real air, not flush. This
   rule must stay after `.wrap`'s padding shorthand (line ~230) or the
   shorthand resets padding-top to 0 — that collision is what squeezed every
   page header against the nav bar. */
.wrap.prose-page,
main > .wrap:first-child { padding-top: 44px; }

.section { margin: 72px 0; }
/* The sections below the hero are `<section class="wrap section">`, so the
   `.section { margin: 72px 0 }` shorthand overwrites `.wrap { margin: 0 auto }`
   (same specificity, later in the file). The horizontal auto margin goes to 0
   and every one of those sections pins to the left edge while the hero, whose
   `.wrap` is a child of a `.section`-less `<section>`, stays centred. Keep the
   section's vertical rhythm and give the horizontal centring back. */
.section.wrap { margin-left: auto; margin-right: auto; }
.section-head { margin-bottom: 22px; }
.section-head h2 { font-size: 24px; }
.section-head p { margin: 6px 0 0; color: var(--muted); font-size: 15px; max-width: 62ch; }

.grid { display: grid; gap: 16px; }
.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-auto { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.95fr); gap: 28px; align-items: start; }

.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.between { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wrap-flex { flex-wrap: wrap; }

/* ------------------------------------------------------------------ cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
}
.card-pad-sm { padding: 16px; }
.card-flush { padding: 0; overflow: hidden; }
.card-link { display: block; transition: border-color 0.18s, transform 0.18s, background 0.18s; }
.card-link:hover { border-color: var(--line-strong); background: var(--surface-2); transform: translateY(-1px); }

.market-tile { display: flex; flex-direction: column; gap: 14px; }
.market-tile .q { font-size: 16px; font-weight: 560; letter-spacing: -0.015em; }
.market-tile .meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: 0.01em;
}
.tag-brand { border-color: var(--brand-soft); background: var(--brand-soft); color: var(--brand); }
.tag-up { border-color: var(--up-line); background: var(--up-soft); color: var(--up); }
.tag-down { border-color: var(--down-line); background: var(--down-soft); color: var(--down); }
.tag-warn { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.detail-lifetime { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 12px 0 0; }

/* Frozen-proposition marker. The claim text and the resolution rule are fixed at
   listing, so the wording never drifts and only the probability moves. The lock
   glyph is the whole visual claim, on the shared tokens, so it flips with the
   theme like everything else. */
.tag-locked { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand); }
.tag-locked::before {
  content: "\1F512";
  font-size: 10px;
  line-height: 1;
  transform: translateY(-0.5px);
}
.prop-fixed {
  max-width: 68ch;
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--brand);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-soft);
}
.prop-fixed .locked-mark {
  display: inline;
  margin-right: 8px;
  color: var(--brand);
  font-weight: 550;
  white-space: nowrap;
}
.prop-fixed a { color: var(--brand); }

/* ------------------------------------------------------------------ price bits */
.prob { font-size: 34px; font-weight: 620; letter-spacing: -0.035em; line-height: 1; display: flex; align-items: baseline; gap: 8px; }
.prob-sm { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; }
.prob-pct { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: -0.01em; }
.delta { font-size: 13px; font-weight: 550; font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--muted); }

.quote-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quote {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px;
  background: var(--surface-2);
}
.quote .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.quote .value { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.quote.is-up { border-color: var(--up-line); background: var(--up-soft); }
.quote.is-up .value { color: var(--up); }
.quote.is-down { border-color: var(--down-line); background: var(--down-soft); }
.quote.is-down .value { color: var(--down); }

/* ------------------------------------------------------------------ meters */
.meter { height: 6px; border-radius: 100px; background: var(--surface-3); overflow: hidden; }
.meter-fill { height: 100%; background: var(--brand); border-radius: 100px; }
.meter-lg { height: 10px; }

.score-track {
  position: relative;
  height: 10px;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--down-soft), var(--surface-3) 50%, var(--up-soft));
  overflow: hidden;
  border: 1px solid var(--line);
}
.score-band { position: absolute; top: 0; bottom: 0; background: var(--brand-band); }
.score-pin { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-halo); }
.score-pin.alt { background: var(--text-soft); box-shadow: none; }

/* ------------------------------------------------------------------ tables */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  font-weight: 500;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.table td { padding: 13px 14px; border-bottom: 1px solid var(--line); }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-2); }
.table .right { text-align: right; }

/* ------------------------------------------------------------------ forms */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label { font-size: 13px; font-weight: 500; color: var(--text-soft); }
.hint { font-size: 12.5px; color: var(--muted); }
.errorlist { list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--down); }

.input, input[type="text"], input[type="password"], input[type="number"], select, textarea {
  width: 100%;
  padding: 11px 13px;
  background: var(--ink-800);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.input-num { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 13px; }

.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--ink-800);
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 550;
}
.seg label small { font-size: 11px; color: var(--muted); font-weight: 500; }
.seg input:checked + label.up-choice { border-color: var(--up); background: var(--up-soft); color: var(--up); }
.seg input:checked + label.up-choice small { color: var(--up); }
.seg input:checked + label.down-choice { border-color: var(--down); background: var(--down-soft); color: var(--down); }
.seg input:checked + label.down-choice small { color: var(--down); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-amts { display: flex; gap: 8px; }
.chip-amts button {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--ink-800);
  border-radius: var(--r-sm);
  color: var(--text-soft);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.chip-amts button:hover { border-color: var(--line-strong); color: var(--text); }

/* ------------------------------------------------------------------ rows / defs */
.def { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.def:last-child { border-bottom: none; }
.def dt { color: var(--muted); font-size: 13.5px; }
.def dd { margin: 0; font-weight: 550; font-variant-numeric: tabular-nums; font-size: 14px; }
.def.big dd { font-size: 17px; }
.def.hi dd { color: var(--up); }
.def.lo dd { color: var(--down); }

/* ------------------------------------------------------------------ misc */
.kicker { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 550; }
.lead { font-size: 17px; color: var(--text-soft); line-height: 1.6; }
.muted { color: var(--muted); }
.soft { color: var(--text-soft); }
.tiny { font-size: 12px; }
.small { font-size: 13px; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.divider { height: 1px; background: var(--line); margin: 20px 0; }
.dot-sep::before { content: "·"; margin: 0 7px; color: var(--faint); }

.notice {
  border: 1px solid var(--line);
  border-left: 2px solid var(--brand);
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--text-soft);
}
.notice-warn { border-left-color: var(--warn); }
.notice-up { border-left-color: var(--up); }
.notice strong { color: var(--text); }

.banner-proto {
  background: var(--warn-bg);
  border-bottom: 1px solid var(--warn-line);
  color: var(--warn-text);
  font-size: 12.5px;
  text-align: center;
  padding: 7px 16px;
}
.banner-proto strong { color: var(--warn-text-strong); }

.messages { position: fixed; bottom: 22px; right: 22px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: 400px; }
.flash {
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 13px 16px;
  font-size: 13.5px;
  box-shadow: var(--shadow-lift);
  animation: slidein 0.25s ease;
}
.flash.success { border-left: 2px solid var(--up); }
.flash.error { border-left: 2px solid var(--down); }
@keyframes slidein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ hero */
.hero { padding: 104px 0 72px; position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  top: -320px;
  left: 50%;
  transform: translateX(-50%);
  width: 1180px;
  height: 700px;
  background: radial-gradient(closest-side, var(--hero-glow), transparent 68%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.85fr);
  gap: 48px;
  align-items: center;
}
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 34px; } }
.hero h1 {
  font-family: var(--display);
  font-size: clamp(38px, 5.4vw, 66px);
  font-weight: 640;
  letter-spacing: -0.05em;
  line-height: 1.02;
  max-width: 18ch;
  margin-top: 22px;
}

/* The live reading beside the headline. A visitor who reads nothing else should
   leave knowing one number, where it came from, and how far the models spread. */
.hero-card {
  padding: 22px 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.hero-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero-card-q {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.4;
  color: var(--text-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-card-score { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; }
.hero-card-score .hc-num {
  font-size: 46px;
  font-weight: 640;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero-card-score .hc-dec { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hero-card-meter {
  position: relative;
  height: 10px;
  margin-top: 18px;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--down-soft), var(--surface-3) 50%, var(--up-soft));
  border: 1px solid var(--line);
  overflow: visible;
}
.hero-card-meter i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 100px;
  background: var(--brand-band);
}
.hero-card-meter u {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--text);
}
.hero-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted);
}
.hero-card-foot .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 3px;
  vertical-align: middle;
}
.hero-card-foot .dot.p-openai { background: var(--p-openai); }
.hero-card-foot .dot.p-anthropic { background: var(--p-anthropic); }
.hero-card-foot .dot.p-xai { background: var(--p-xai); }
/* The whole card is a link, so hover is the only affordance the footer needs:
   swap the panel key for the actual invitation. */
.hc-swap { position: relative; display: inline-block; }
.hc-live { display: none; }
.card-link:hover .hc-fixed { display: none; }
.card-link:hover .hc-live { display: inline; color: var(--brand); font-weight: 550; }
.hero-card:hover .hero-card-q { color: var(--text); }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero .lede { font-size: 18.5px; color: var(--text-soft); max-width: 58ch; margin: 22px 0 0; }
.hero-actions { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-note { margin-top: 20px; font-size: 13.5px; color: var(--faint); }

.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-top: 52px; }
.stat { background: var(--surface); padding: 20px 22px; }
.stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.stat .v { font-size: 25px; font-weight: 600; letter-spacing: -0.03em; margin-top: 6px; font-variant-numeric: tabular-nums; }

.steps { counter-reset: step; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.step { background: var(--surface); padding: 28px 26px; display: grid; grid-template-columns: 40px 1fr; gap: 18px; }
.step-n {
  counter-increment: step;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600; color: var(--text-soft);
}
.step-n::before { content: counter(step); }
.step h3 { font-size: 16px; margin-bottom: 5px; }
.step p { margin: 0; color: var(--muted); font-size: 14px; }

/* ------------------------------------------------------------------ detail */
.detail-wrap { max-width: 1140px; }
.detail-head { padding: 40px 0 26px; }
.detail-lifetime + .detail-status-card { margin-top: 14px; }
.detail-status-card + #prices { margin-top: 0; }
/* Separate the rounded cards: touching borders form a doubled, scalloped seam
   between the chart and the AI estimate / wallet panel. */
.detail-wrap > * + * { margin-top: 14px; }
.detail-head h1 { font-size: 33px; letter-spacing: -0.035em; max-width: 34ch; line-height: 1.15; }
/* The frozen claim, right under the question. It is the thing being priced, so
   it belongs next to the title rather than three screens down. */
.detail-claim {
  margin: 16px 0 0;
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
.claim-text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-soft); }
.crumb { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.crumb a:hover { color: var(--text); }
.crumb-sep { color: var(--faint); margin: 0 4px; }

.prose-lead { font-size: 19px; line-height: 1.6; color: var(--text-soft); max-width: 62ch; }

/* ------------------------------------------------------- probability chart */
.plot { padding-top: 6px; }
.plot-body {
  position: relative;
  height: 260px;
  margin-left: 46px;
}
.plot-grid { position: absolute; inset: 0; }
.plot-grid span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}
.plot-grid span::before {
  content: attr(data-label);
  position: absolute;
  left: -46px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.plot-now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: linear-gradient(to bottom, var(--plot-now-a), var(--plot-now-b));
  pointer-events: none;
}
.plot-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* The panel's range, drawn as an error bar on the final reading rather than a
   filled block. Block was read as a scrollbar; a whisker reads as uncertainty. */
.plot-whisker {
  position: absolute;
  width: 2px;
  margin-left: -1px;
  background: var(--whisk);
  border-radius: 2px;
  pointer-events: none;
}
.plot-whisker::before,
.plot-whisker::after {
  content: "";
  position: absolute;
  left: -4px;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--whisk-cap);
}
.plot-whisker::before { top: -1px; }
.plot-whisker::after { bottom: -1px; }
.plot-line { filter: drop-shadow(0 8px 18px var(--brand-halo)); }
.plot-dot {
  position: absolute;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
}
.plot-dot.up { background: var(--up); box-shadow: 0 0 0 4px var(--up-soft); }
.plot-dot.down { background: var(--down); box-shadow: 0 0 0 4px var(--down-soft); }
.plot-tag {
  position: absolute;
  transform: translate(-100%, -50%);
  padding: 3px 8px;
  margin-left: -14px;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  background: var(--surface-3);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

/* The reading block. Same card as the chart, a level quieter, so the estimate
   and the record read as one object rather than two competing ones. */
.read-zone { margin-top: 14px; padding: 26px 30px 28px; }
.read-cols { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 34px; }
@media (max-width: 900px) { .read-cols { grid-template-columns: 1fr; gap: 26px; } }
.read-block + .read-block { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.read-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); font-weight: 600; margin: 0 0 16px; }

/* ---------------------------------------------------------------- timeline */
.tl { display: flex; flex-direction: column; }
.tl-row { display: flex; gap: 18px; }
.tl-gutter { flex: none; width: 74px; text-align: right; padding-top: 3px; }
.tl-round { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-date { font-size: 11px; color: var(--faint); }
.tl-spine { flex: none; width: 1px; background: var(--line); position: relative; }
.tl-spine::before {
  content: "";
  position: absolute;
  top: 7px;
  left: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}
.tl-main { padding-bottom: 20px; }
.tl-score {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 9px;
  border-radius: 100px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12px;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.tl-score .from { color: var(--faint); }
.tl-note { font-size: 13.5px; color: var(--text-soft); margin: 0; max-width: 68ch; }
.tl-disclose summary { cursor: pointer; list-style: none; }
.tl-disclose summary::-webkit-details-marker { display: none; }
.tl-disclose summary .tl-note { position: relative; padding-right: 18px; }
.tl-disclose summary .tl-note::after {
  content: "⌄";
  position: absolute;
  right: 0;
  top: -2px;
  color: var(--faint);
  font-size: 13px;
}
.tl-disclose[open] summary .tl-note::after { content: "⌃"; }
.tl-disclose summary:hover .tl-note { color: var(--text); }
.tl-disclose summary:hover .tl-note::after { color: var(--brand); }
.tl-full { margin-top: 8px; color: var(--muted); }
.plot-x {
  position: relative;
  height: 16px;
  margin: 10px 0 0 46px;
}
.plot-x span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.plot-foot { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; font-size: 12px; color: var(--faint); }

/* ---------------------------------------------------------- score head */
.score-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.score-num { display: flex; align-items: baseline; gap: 14px; margin-top: 8px; }
.score-num .big { font-size: 76px; font-weight: 620; letter-spacing: -0.055em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.score-num .pct { font-size: 21px; font-weight: 550; color: var(--muted); font-variant-numeric: tabular-nums; }
.score-move { margin-top: 14px; font-size: 15px; color: var(--text-soft); }
.score-move strong { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- panel dot plot */
/* Each model's estimate as a dot on a shared 0–1 axis. Replaces the density
   hump, which read as one shape rather than as three separate answers. */
.panel-plot {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--ink-850), var(--surface));
  padding: 16px 18px 16px;
}
.panel-axis { position: relative; height: 16px; margin-bottom: 4px; }
.panel-tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.panel-track {
  position: relative;
  height: 44px;
  border-radius: 9px;
  background: linear-gradient(90deg, var(--down-soft), var(--surface-2) 50%, var(--up-soft));
  border: 1px solid var(--line);
}
.panel-track::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line-strong);
}
.panel-span {
  position: absolute;
  top: 13px;
  height: 18px;
  border-radius: 100px;
  background: var(--brand-fill);
  border: 1px solid var(--brand-band);
}
.panel-dot {
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: var(--dot-shadow);
}
.panel-dot.p-openai { background: var(--p-openai); }
.panel-dot.p-anthropic { background: var(--p-anthropic); }
.panel-dot.p-xai { background: var(--p-xai); }
.panel-mean {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--text);
  box-shadow: 0 0 0 3px var(--halo);
}
.panel-labels { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 13px; }
.panel-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.panel-label .n { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.curve-caption { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }
.tile-curve { height: 38px; }
.tile-curve svg { width: 100%; height: 38px; display: block; }
.chart-hero { padding: 30px 30px 22px; background: linear-gradient(180deg, var(--surface) 0%, var(--ink-850) 100%); box-shadow: var(--shadow); }
.chart-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.big-score { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
.prob-huge { font-size: 68px; font-weight: 620; letter-spacing: -0.055em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.score-as-pct { font-size: 20px; font-weight: 550; color: var(--muted); font-variant-numeric: tabular-nums; }
.score-sub { margin-top: 12px; font-size: 14.5px; display: flex; gap: 7px; align-items: baseline; }

.hero-quotes { display: flex; gap: 10px; }
.quote-btn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 116px;
  padding: 13px 16px;
  border-radius: var(--r);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  transition: transform 0.12s, border-color 0.15s, background 0.15s;
}
.quote-btn:hover { transform: translateY(-1px); }
.quote-btn .qb-label { font-size: 12px; font-weight: 550; letter-spacing: 0.02em; }
.quote-btn .qb-price { font-size: 24px; font-weight: 620; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.quote-btn.is-up { border-color: var(--up-line); background: var(--up-soft); color: var(--up); }
.quote-btn.is-up:hover { background: var(--up-soft-hover); }
.quote-btn.is-down { border-color: var(--down-line); background: var(--down-soft); color: var(--down); }
.quote-btn.is-down:hover { background: var(--down-soft-hover); }
/* Close-only markets have no opening quote. Keep the two sides readable (and
   still summing to 100%) but mark them plainly as not tradable rather than
   leaving a bare em dash where the price should be. */
.quote-btn.is-closed { opacity: 0.62; cursor: default; }
.quote-btn.is-closed:hover { transform: none; }
.quote-btn.is-closed .qb-price { font-size: 15px; font-weight: 600; }

.chart-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 26px 0 14px; }
.chips-sm { gap: 4px; }
.chip {
  padding: 6px 13px;
  border-radius: 100px;
  border: 1px solid transparent;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--muted);
  transition: color 0.15s, background 0.15s;
}
.chip:hover { color: var(--text); background: var(--surface-2); }
.chip.is-on { color: var(--text); background: var(--surface-3); border-color: var(--line-strong); }
.chart-legend { display: flex; gap: 18px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 7px; }
.legend-swatch { display: inline-block; border-radius: 3px; }
.legend-swatch.line { width: 16px; height: 2px; background: var(--brand); }
.legend-swatch.band { width: 16px; height: 8px; background: var(--brand-halo); }
.legend-swatch.whisk { position: relative; width: 3px; height: 12px; background: var(--whisk); border-radius: 2px; }
.legend-swatch.whisk::before,
.legend-swatch.whisk::after {
  content: "";
  position: absolute;
  left: -4px;
  width: 11px;
  height: 2px;
  background: var(--whisk-cap);
}
.legend-swatch.whisk::before { top: 0; }
.legend-swatch.whisk::after { bottom: 0; }

.chart-canvas { position: relative; padding-left: 0; }
.chart-svg { width: 100%; height: 250px; display: block; overflow: visible; }
.chart-line { filter: drop-shadow(0 6px 14px var(--up-soft)); }
.chart-y {
  position: absolute;
  top: 0; left: 0;
  height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  padding: 14px 0 34px;
  pointer-events: none;
}
.chart-x {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--faint);
  padding: 8px 18px 0 46px;
  font-variant-numeric: tabular-nums;
}
.chart-empty { padding: 34px 4px 26px; border-top: 1px dashed var(--line); margin-top: 24px; }
.chart-empty p { margin: 0; color: var(--muted); font-size: 15px; max-width: 62ch; }
.chart-empty strong { color: var(--text); }

/* ---------------------------------------------------------- tile */
.market-tile { gap: 14px; }
.tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.market-tile .q { font-size: 16px; font-weight: 560; letter-spacing: -0.018em; line-height: 1.35; }
.tile-read {
  flex: none;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.tile-read .prob { font-size: 30px; font-weight: 620; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.tile-read .prob-pct { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.tile-read .delta { font-size: 12px; }
.tile-meter {
  position: relative;
  height: 4px;
  border-radius: 100px;
  background: var(--surface-3);
  overflow: visible;
}
.tile-meter i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--brand-soft), var(--brand));
}
.tile-meter u {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--text);
}
.tile-curve { margin: 0 -2px; }
.tile-foot { padding-top: 12px; border-top: 1px solid var(--line); }
.tile-mark { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--muted); }
.tile-mark .n { color: var(--text-soft); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- worked example */
.worked { padding: 28px 30px; }
.worked-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.worked-q { font-size: 22px; font-weight: 580; letter-spacing: -0.025em; line-height: 1.3; margin-top: 12px; max-width: 30ch; }
.worked-read { text-align: right; flex: none; }
.worked-plot { position: relative; margin: 26px 0 0; height: 150px; padding-left: 46px; }
.worked-svg { position: absolute; inset: 0 0 0 46px; width: calc(100% - 46px); height: 100%; overflow: visible; }
.worked-grid { position: absolute; inset: 0 0 0 46px; }
.worked-grid span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}
.worked-grid span::before {
  content: attr(data-label);
  position: absolute;
  left: -46px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.worked-x { position: relative; height: 14px; margin: 8px 0 0 46px; }
.worked-x span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.worked-start,
.worked-end {
  position: absolute;
  transform: translate(-50%, -130%);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 6px;
  border: 1px solid var(--line);
  pointer-events: none;
  white-space: nowrap;
  line-height: 1.4;
}
.worked-end { color: var(--text); border-color: var(--line-strong); }
.worked-now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: var(--plot-now-a);
  pointer-events: none;
}
.worked-whisker {
  position: absolute;
  width: 2px;
  margin-left: -1px;
  background: var(--whisk);
  border-radius: 2px;
  pointer-events: none;
}
.worked-whisker::before,
.worked-whisker::after {
  content: "";
  position: absolute;
  left: -3px;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--whisk-cap);
}
.worked-whisker::before { top: -1px; }
.worked-whisker::after { bottom: -1px; }
.worked-foot {
  display: flex;
  gap: 28px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.worked-fact strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 5px; }
.worked-cta { margin-left: auto; color: var(--brand); font-weight: 550; }

/* ------------------------------------------------------------ empty state */
.empty-state {
  padding: 26px 4px 10px;
  border-top: 1px dashed var(--line);
  margin-top: 18px;
}
.empty-state p { max-width: 62ch; font-size: 14.5px; }

/* ---------------------------------------------------------- council panel */
.council-card { padding: 24px 26px; }
.panel-key { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.pk { display: inline-flex; align-items: center; gap: 7px; }
.pk .num { color: var(--text-soft); margin-left: 2px; }
.pk-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pk-dot.p-openai { background: var(--p-openai); }
.pk-dot.p-anthropic { background: var(--p-anthropic); }
.pk-dot.p-xai { background: var(--p-xai); }

.provider-list { margin-top: 12px; }
details.provider-row { border-bottom: 1px solid var(--line); }
details.provider-row:last-child { border-bottom: none; }
.provider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
}
.provider-head::-webkit-details-marker { display: none; }
.provider-sum { display: flex; align-items: center; gap: 12px; }
.provider-chev { width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform 0.15s; }
details[open] .provider-chev { transform: rotate(-135deg); }
.provider-body { padding: 0 0 18px; }
.provider-score {
  font-size: 22px;
  font-weight: 620;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
details.provider-row:hover .provider-head { color: var(--text); }
.provider-note { font-size: 13.5px; color: var(--muted); margin: 8px 0 0; max-width: 74ch; }
.provider-meta { font-size: 11.5px; color: var(--faint); margin-top: 8px; }
.cite-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.cite {
  font-size: 12px;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.cite:hover { color: var(--brand); }
.conf-low { color: var(--warn); }
.conf-medium { color: var(--text-soft); }
.conf-high { color: var(--up); }

/* ---------------------------------------------------------- disclosure */
/* One fold component for the whole site. Every <summary> — the FAQ questions,
   the content-page section headings (faq-lg), the small inline disclosures on a
   market page — keeps the label on the left and one +/− glyph on the right.
   `align-items: baseline` pins that glyph to the first line of the label, so a
   two-line summary (a label plus a .fold-note scan line) holds the glyph on the
   first line instead of stretching it to the box top. */
.mini-disclose { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.mini-disclose > summary {
  cursor: pointer;
  padding: 15px 20px;
  font-size: 14.5px;
  font-weight: 550;
  color: var(--text-soft);
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  transition: color 0.12s;
}
.mini-disclose > summary::-webkit-details-marker { display: none; }
.mini-disclose > summary:hover { color: var(--text); }
.mini-disclose > summary::after {
  content: "+";
  color: var(--muted);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  flex: none;
  transition: color 0.12s;
}
.mini-disclose > summary:hover::after { color: var(--brand); }
.mini-disclose[open] > summary::after { content: "−"; }
.mini-disclose[open] > summary { border-bottom: 1px solid var(--line); }
.mini-disclose > *:not(summary) { padding: 0 20px 18px; }
.mini-disclose > .stack, .mini-disclose > .table-scroll { padding-top: 0; }
.mini-disclose > p { margin: 14px 0 0; color: var(--muted); font-size: 14px; max-width: 72ch; }

.read-link { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--text-soft); }
.read-link:hover { color: var(--text); }
.read-link span { color: var(--faint); }

/* Keep every column available, including financial amounts and operator actions. */
.table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; }
.table-scroll > .table { min-width: 560px; }
.table-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (max-width: 680px) {
  .table-scroll::before {
    content: "Scroll horizontally to see all columns.";
    display: block;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--muted);
  }
}
.band-track { position: relative; height: 4px; border-radius: 100px; background: var(--surface-3); }
.band-fill { position: absolute; top: 0; bottom: 0; background: var(--whisk); border-radius: 100px; }

.evidence-item { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; background: var(--surface-2); }
.evidence-item h4 { font-size: 14px; margin-bottom: 5px; }
.evidence-item p { margin: 0; font-size: 13.5px; color: var(--muted); }
.evidence-kind { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
.k-supporting { color: var(--up); }
.k-contrary { color: var(--down); }
.k-method { color: var(--brand); }
.k-retraction { color: var(--warn); }
.k-context { color: var(--muted); }

.timeline { display: flex; flex-direction: column; gap: 0; }
.tl-item { display: grid; grid-template-columns: 74px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.tl-item:last-child { border-bottom: none; }
.tl-round { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.card-pad { padding: 20px 22px; }

/* Sticky side rail. The cap matters: a sticky element taller than the
   viewport can never stick — it just scrolls away behind the topbar. Capping
   the rail to the visible area keeps it pinned, and its own content scrolls
   inside when the page's cards overflow.
   The grid column itself needs `stretch` (the default), not `start`: a rail
   inside a column sized to its own content has no scroll range to stick
   across. Pages that rely on the old `align-items: start` carry an explicit
   `style="align-self:start"` on non-sticky columns instead. */
.sticky { position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow-y: auto; }
.split:has(.sticky) { align-items: stretch; }

/* ------------------------------------------------------------------ position */
.pos-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.side-badge {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px; letter-spacing: 0.03em;
  flex: none;
}
.side-badge.up { background: var(--up-soft); color: var(--up); border: 1px solid var(--up-line); }
.side-badge.down { background: var(--down-soft); color: var(--down); border: 1px solid var(--down-line); }

.pnl-big { font-size: 28px; font-weight: 620; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

.exit-card { border: 1px solid var(--line); border-radius: var(--r); padding: 18px; background: var(--surface-2); }
.exit-card h3 { font-size: 15px; margin-bottom: 4px; }

/* ------------------------------------------------------------------ footer */
footer { border-top: 1px solid var(--line); margin-top: 80px; padding: 44px 0 60px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 28px; }
.foot-grid h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 12px; }
.foot-grid a { display: block; padding: 5px 0; color: var(--text-soft); font-size: 13.5px; }
.foot-grid a:hover { color: var(--text); }
.foot-note { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); max-width: 78ch; line-height: 1.7; }

/* ------------------------------------------------------------------ prose */
.prose { max-width: 68ch; }
.prose h2 { font-size: 22px; margin: 44px 0 14px; }
.prose h3 { font-size: 17px; margin: 30px 0 10px; }
.prose p { margin: 0 0 16px; color: var(--text-soft); }
.prose ul, .prose ol { color: var(--text-soft); padding-left: 22px; margin: 0 0 16px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose code { font-family: var(--mono); font-size: 13px; background: var(--surface-2); padding: 2px 6px; border-radius: 5px; }
/* Links get brand ink and an underline, but a `.btn` inside prose is a control,
   not a link in a sentence. Without the `:not(.btn)` the underline and the brand
   color were painted over the button's own fill — a light button on a light
   page, and in ink a brand-on-brand button at 1.9:1. */
.prose a:not(.btn) { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.prose a.btn { text-decoration: none; }

.formula {
  font-family: var(--mono);
  font-size: 14px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
  overflow-x: auto;
  color: var(--text);
}

/* Verbatim, quotable text: the prompts the panel actually sends. Monospace and
   pre-wrapped with no soft-wrapping, so the published string cannot look like
   styled prose and stays character-for-character what the provider receives.
   Horizontal scroll keeps a long line from breaking the page on a phone. */
.prompt-block {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 16px 18px;
  margin: 14px 0 0;
  /* The characters are unchanged; `pre-wrap` only lets a phone fold a long
     line instead of forcing a sideways scroll through a 60-line prompt.
     Newlines in the source are preserved, so a quote stays exact. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  tab-size: 2;
}

/* ------------------------------------------------------------------ faq */
.faq-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.faq-toc a {
  font-size: 12.5px; padding: 6px 12px; border: 1px solid var(--line);
  border-radius: 999px; color: var(--text-soft); background: var(--surface);
}
.faq-toc a:hover { border-color: var(--brand); color: var(--text); }

.faq-group {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); font-weight: 650;
  margin: 44px 0 0; padding-bottom: 11px; border-bottom: 1px solid var(--line-strong);
}
.faq-group:first-of-type { margin-top: 4px; }

details.faq { border-bottom: 1px solid var(--line); }
details.faq summary {
  cursor: pointer;
  padding: 16px 0;
  font-weight: 550;
  font-size: 15.5px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  transition: color 0.12s;
}
details.faq summary:hover { color: var(--brand); }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+";
  color: var(--muted);
  font-weight: 400;
  font-size: 19px;
  line-height: 1;
  flex: none;
  transition: color 0.12s;
}
details.faq summary:hover::after { color: var(--brand); }
details.faq[open] summary::after { content: "−"; }
details.faq[open] summary { color: var(--text); }
/* The label and its scan line live in a plain <span> wrapper; the wrapper is the
   flex child, so the flex row cannot break the label away from the note. */
details.faq summary > span { min-width: 0; }
details.faq .faq-body { padding: 0 0 20px; color: var(--text-soft); font-size: 14.5px; max-width: 74ch; line-height: 1.72; }
details.faq .faq-body p { margin: 0 0 12px; }
details.faq .faq-body p:last-child { margin-bottom: 0; }
/* Same rule as `.prose a`: a `.btn` in a fold body is a control, so it keeps
   the button's own ink and fill instead of the link color and underline. */
details.faq .faq-body a:not(.btn) { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
details.faq .faq-body a.btn { text-decoration: none; }

/* Content-page folds. The FAQ sizes a summary for a question; a page whose
   section headings are now the folds themselves needs that summary to read as
   the heading. One modifier, no new component. */
details.faq-lg summary { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; padding: 18px 0; }
details.faq-lg .faq-body { font-size: 15px; max-width: 74ch; }

/* A fold's scan line: the one sentence under the toggle that says what is
   behind it. It rides inside the summary, which is a control, so nothing here
   may look like a link: no underline, no brand color, no hover shift. Its color
   is stated explicitly (not inherited) so it stays muted even if the summary
   itself is tinted or the note is reused inside an anchor. */
.fold-note {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
  letter-spacing: 0;
  text-decoration: none;
}
details.faq summary:hover .fold-note { color: var(--muted); }

/* A link into a fold should land on the paragraph, not under the sticky bar.
   The TOC anchors on the terms, legal, and listing pages all point at <details>
   now, so they need the offset the old <h2> anchors got from the heading flow.
   Section headings that are still anchor targets (the FAQ groups, the listing
   policy table) need the same offset so the sticky bar does not cover them. */
details[id], h2[id], h3[id] { scroll-margin-top: 86px; }

/* The frozen-proposition note, moved into a fold so the header breathes.
   The lock glyph rides with it. */
.prop-note { margin-top: 16px; max-width: 68ch; }
.prop-sum .locked-mark { margin-right: 7px; color: var(--brand); }

/* Key facts under the reading. Same tiles as the landing stat strip, tightened
   so they read as a caption row rather than a second headline row. */
.fact-tiles { margin-top: 22px; }
.fact-tiles .stat { padding: 14px 18px; }
.fact-tiles .stat .v { font-size: 20px; margin-top: 4px; }

/* ------------------------------------------------------------------ windows */
.windows {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.window { background: var(--surface); padding: 10px 12px; text-align: center; }
.window .k {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 550;
}
.window .v { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 3px; }
.window .v.faint { color: var(--faint); font-weight: 500; }

.tile-prob { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.tile-delta { text-align: right; }

/* ------------------------------------------------------------------ feed */
/* The research feed. Two surfaces share it: the landing page teaser and
   /updates/. The eye lands on the market, then the move (0.42 -> 0.47), and
   only then the ticker, round, and time as small print. The round note is
   clamped to one line so a long feed stays scannable; the full text lives on
   the market page. */
.feed { display: flex; flex-direction: column; gap: 0; }
.feed-day {
  display: flex; align-items: center; gap: 12px;
  margin: 26px 0 2px;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
}
.feed-day:first-child { margin-top: 0; }
.feed-day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.feed-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s;
}
.feed-item:hover { background: var(--surface-2); }
.feed-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
  margin-top: 7px;
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.feed-body { min-width: 0; }
.feed-head { display: flex; align-items: baseline; gap: 10px; }
.feed-title {
  min-width: 0;
  font-size: 15px; font-weight: 550; letter-spacing: -0.012em;
  line-height: 1.35; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-move {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-top: 7px;
  font-variant-numeric: tabular-nums;
}
.feed-from { font-size: 17px; color: var(--faint); font-weight: 550; }
.feed-arrow { font-size: 13px; color: var(--faint); }
.feed-to { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }
.feed-move .delta { font-size: 12px; margin-left: 1px; }
.feed-disclose { margin-top: 7px; font-size: 13px; color: var(--muted); }
.feed-disclose summary { cursor: pointer; line-height: 1.5; }
.feed-disclose summary .soft { margin-left: 6px; white-space: nowrap; }
.feed-disclose[open] > div { margin: 10px 0; }
.feed-head { flex-wrap: wrap; }
.feed-note {
  margin: 7px 0 0;
  font-size: 13px; color: var(--muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  margin-top: 7px;
  font-size: 12px; color: var(--faint);
}

/* ------------------------------------------------------------------ discussion */
.thread-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.thread-row:last-child { border-bottom: none; }
.thread-title { font-weight: 550; font-size: 15px; }
.thread-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Inline discussion feed on the market page. The market's own threads sit in
   the main column under the record, so the conversation lives on the same page
   as the number it argues about instead of on a detached one. */
.disc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.disc-item { padding-top: 6px; }
.disc-item + .disc-item { border-top: 1px solid var(--line); }
.disc-item .thread-row { border-bottom: none; }
.disc-replies { margin: 0 0 14px; padding-left: 2px; border-left: 2px solid var(--line); }
.disc-replies .post { padding: 10px 0 10px 12px; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 650; text-transform: uppercase;
  background: var(--surface-3); color: var(--text-soft); flex: none;
}
.post {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.post:last-child { border-bottom: none; }
.post-body { font-size: 14.5px; color: var(--text-soft); white-space: pre-wrap; }
.post-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 5px; }

/* ------------------------------------------------------------------ legal */
/* A sticky TOC works in two layouts. Standalone (terms, legal, listing
   policy): it pins at 80px itself. Inside a sticky rail (wallet guide): the
   rail does the pinning and a nested sticky would fight the rail's own
   scroll, so there it stays a plain block. */
.legal-toc { position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow-y: auto; }
.sticky > .legal-toc { position: static; max-height: none; overflow-y: visible; }
.legal-toc a { display: block; padding: 5px 0; font-size: 13px; color: var(--muted); }
.legal-toc a:hover { color: var(--text); }

/* A quoted contractual statement sits in its own block so a reader can tell the
   operative words from our commentary around them. Left rule on the brand ink,
   no fill, so it reads as a document quote rather than a callout. */
.disclosure {
  margin: 18px 0 22px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--brand);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.disclosure-label {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--brand);
  font-weight: 650;
  margin-bottom: 8px;
}
.disclosure p { margin: 0; color: var(--text); font-size: 14.5px; line-height: 1.65; }

/* The exclusions list, where each refusal carries equal weight. The marker is a
   plain rule rather than a bullet, so it reads as policy, not prose. */
.policy-list { list-style: none; padding-left: 0; }
.policy-list > li {
  position: relative;
  padding: 13px 0 13px 20px;
  border-top: 1px solid var(--line);
  margin-bottom: 0;
}
.policy-list > li:first-child { border-top: none; }
.policy-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 21px;
  width: 9px;
  height: 2px;
  background: var(--down);
  border-radius: 2px;
}
.policy-table td:first-child { color: var(--text-soft); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .nav-links { gap: 0; margin-left: 4px; }
  .nav-links a { padding: 7px 9px; font-size: 13px; }
  .topbar-inner { gap: 14px; }
}

@media (max-width: 980px) {
  /* minmax(0,1fr), not 1fr: a grid track sized `1fr` still has an automatic
     minimum, so a wide child (a long <code> line, a code block) pushes the
     whole track past the viewport instead of scrolling inside itself. */
  .split { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 40px; }
}

@media (max-width: 860px) {
  .topbar { position: relative; }
  .topbar-inner { flex-wrap: wrap; height: auto !important; padding-top: 12px; padding-bottom: 8px; }
  .nav-links { display: flex; order: 3; flex: 1 1 100%; margin: 0; overflow-x: auto; padding: 4px 0; }
  .nav-links a { flex: none; min-height: 44px; display: flex; align-items: center; }
}

html { scroll-padding-top: 78px; }
main a, main summary, main button, main input, main textarea { scroll-margin-top: 78px; }
.prose-page .mini-disclose + .mini-disclose { margin-top: 12px; }
.prose-page .section-head { margin-bottom: 24px; }
.nav-links a:focus, .mini-disclose > summary:focus { outline: 2px solid var(--brand); outline-offset: 3px; }

@media (max-width: 680px) {
  .wrap { padding: 0 16px; }
  .topbar-inner { gap: 10px; height: 56px; }
  .brand { font-size: 14.5px; gap: 7px; }
  .brand-mark { width: 24px; height: 24px; }
  .theme-toggle { width: 30px; height: 30px; }
  .theme-toggle svg { width: 15px; height: 15px; }
  .nav-right { gap: 7px; }
  .nav-right .btn-sm { padding: 6px 10px; font-size: 12.5px; }
  /* The header holds one action on a phone. "Sign in" lives on the signup page
     and in the footer, so it does not need to compete here. */
  .nav-right .nav-right-secondary { display: none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  /* A card that puts a line of text next to a row of buttons stops fitting on a
     phone. Let the two stack rather than run off the side. */
  .row-between { flex-wrap: wrap; align-items: flex-start; }
  .hero { padding: 52px 0 36px; }
  .hero h1 { font-size: 32px; }
  .hero .lede { font-size: 16px; }
  .plot-body { height: 200px; margin-left: 38px; }
  .plot-grid span::before { left: -38px; }
  .plot-x { margin-left: 38px; }
  .score-num .big { font-size: 54px; }
  .foot-grid { grid-template-columns: 1fr; }
  .prob { font-size: 28px; }
  .detail-head h1 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Leader-parity pass. Scoped additions inspired by how Polymarket and Kalshi
   present a market: a browse bar with search and sort, a card that leads with
   one number, a chart toolbar with real time windows, a two-outcome order
   panel, and a spread readout on the reading. Every value uses the tokens
   above, so the light and dark themes both hold.
   ========================================================================== */

/* ------------------------------------------------------------ browse bar */
.browse-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.browse-status { flex: none; }
.browse-fields { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; flex-wrap: wrap; }
.browse-field {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--ink-800);
  color: var(--muted);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.browse-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.browse-search { flex: 1 1 220px; min-width: 200px; }
.browse-field svg { flex: none; color: var(--faint); }
.browse-field input,
.browse-field select {
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13.5px;
  outline: none;
}
.browse-field select { padding-right: 4px; cursor: pointer; color: var(--text-soft); }
.browse-field input::placeholder { color: var(--faint); }
.browse-go { flex: none; }
.browse-summary { margin-bottom: 18px; }

/* -------------------------------------------------------- card read cap */
.tile-read-cap {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--faint);
  font-weight: 550;
}

/* ---------------------------------------------------- reading additions */
.score-spread {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}
.score-spread .ss-k { color: var(--faint); }
.score-spread .ss-v { color: var(--text-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.qb-hint { font-size: 10.5px; color: var(--muted); margin-top: 1px; }

/* --------------------------------------------------------- order preview */
.op-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.op-side { display: flex; align-items: center; gap: 9px; min-width: 0; }
.op-side-tag {
  flex: none;
  padding: 3px 9px;
  border-radius: 100px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--text-soft);
}
.op-side-word { font-size: 13px; color: var(--muted); }
.op-score { text-align: right; flex: none; }
.op-score-v { font-size: 22px; font-weight: 620; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.op-score-k { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--faint); }

.op-pay { display: grid; gap: 8px; margin: 14px 0; }
.op-pay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.op-pay-row .kicker { font-size: 11px; }
.op-pay-note { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.op-pay-val { font-size: 20px; font-weight: 620; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; flex: none; }
.op-pay-win { border-color: var(--up-line); background: var(--up-soft); }
.op-pay-win .op-pay-val { color: var(--up); }
.op-pay-lose { border-color: var(--down-line); background: var(--down-soft); }
.op-pay-lose .op-pay-val { color: var(--down); }

/* --------------------------------------------------------- portfolio row */
.pos-row-metrics { display: flex; align-items: center; gap: 26px; text-align: right; flex-wrap: wrap; }
.pos-metric .kicker { font-size: 10.5px; }
.pos-metric .num { font-size: 15px; }
@media (max-width: 680px) {
  .browse-bar { gap: 8px; }
  .browse-fields { flex: 1 1 100%; }
  .browse-search { flex: 1 1 100%; min-width: 0; }
  .browse-go { flex: 1 1 100%; }
  .pos-row-metrics { gap: 16px; justify-content: flex-start; }
}

/* ==========================================================================
   Staff dashboard. One operator surface at /console/. Uses only the semantic
   tokens above, so it holds in light and dark like the rest of the site.
   ========================================================================== */
.staff { max-width: 1180px; }

.staff-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 22px 0 26px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
}
.staff-tab {
  padding: 9px 14px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.staff-tab:hover { color: var(--text); background: var(--surface-2); }
.staff-tab.is-on { color: var(--text); border-bottom-color: var(--brand); }

.staff-flags {
  border: 1px solid var(--warn-line);
  background: var(--warn-soft);
  border-radius: var(--r);
  padding: 14px 18px 16px;
  margin-bottom: 26px;
}
.staff-flags-h { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--warn-text-strong); font-weight: 650; }
.staff-flag-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.staff-flag { font-size: 13.5px; color: var(--text-soft); padding-left: 14px; position: relative; }
.staff-flag::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.staff-flag.sev-down::before { background: var(--down); }
.staff-flag.sev-down { color: var(--down); }
.staff-flag a { text-decoration: underline; text-underline-offset: 2px; }
.staff-flag a:hover { color: var(--text); }

.staff-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.staff-tile { background: var(--surface); padding: 18px 20px; }
.staff-tile .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.staff-tile .v { font-size: 26px; font-weight: 620; letter-spacing: -0.03em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.staff-tile .s { font-size: 12px; color: var(--muted); margin-top: 4px; }
.staff-tile .s .up { color: var(--up); }
.staff-tile .s .down { color: var(--down); }
/* A tile that links to its own detail section is a control, so it carries no
   link underline and lifts on hover instead. */
a.staff-tile-link { display: block; color: inherit; text-decoration: none; transition: background 0.15s; }
a.staff-tile-link:hover { background: var(--surface-2); }
a.staff-tile-link:hover .k { color: var(--text); }

/* Section anchors for the long operator page. Sticky so the nav stays reachable
   while scrolling; it scrolls sideways on a narrow screen rather than wrapping
   into rows that push the page down. It sits below the 62px topbar — the same
   offset the other sticky rails use — and carries the page canvas as its
   background so a row scrolling underneath passes behind it, not through it. */
.staff-nav {
  position: sticky;
  top: 80px;
  z-index: 5;
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-top: 18px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  background: var(--ink-900);
  scrollbar-width: none;
}
.staff-nav::-webkit-scrollbar { display: none; }
.staff-nav a {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.staff-nav a:hover { color: var(--text); background: var(--surface-2); }
/* Offset an anchored section so the sticky nav and the topbar above it do not
   cover its heading: 80px nav top + its 47px height + a little air. */
.staff-block[id], .staff-card[id] { scroll-margin-top: 140px; }

.staff-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.staff-card { padding: 20px 22px; }
.staff-h3 { font-size: 15px; margin-bottom: 8px; }
.staff-h2 { font-size: 20px; }
.staff-block { margin: 40px 0; }
.warn-text { color: var(--warn); }

.staff-filter { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

.staff-table td { vertical-align: top; }
.staff-actions-row td { background: var(--surface-2); border-top: none; padding-top: 0; padding-bottom: 14px; }
.staff-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.staff-actions form { display: flex; }
.staff-disclose summary { list-style: none; cursor: pointer; }
.staff-disclose summary::-webkit-details-marker { display: none; }
.staff-disclose[open] { flex: 1 1 100%; }

.staff-models { display: flex; gap: 10px; flex-wrap: wrap; }
.staff-model { display: inline-flex; align-items: baseline; gap: 5px; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.pager-btns { display: flex; gap: 8px; }

@media (max-width: 680px) {
  .staff-tile .v { font-size: 22px; }
  .staff-actions { gap: 10px; }
  .staff-actions form { width: 100%; }
  .staff-actions form .input { flex: 1 1 auto; min-width: 0; }
  .staff-filter { align-items: stretch; }
  /* Operator tables need more room for identifiers and actions. */
  .staff-table { min-width: 720px; }
}


/* ==========================================================================
   Shared-system polish. Additive only: it tightens values the site already
   uses — control states, touch targets, the typeset scale — and invents no
   color, font, or component. Everything above stays as it was.
   ========================================================================== */

/* Disabled form fields read as disabled, not merely read-only. The buttons
   already had a disabled state; the fields did not. */
.input[disabled], input[disabled], select[disabled], textarea[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* A quiet link inside a card is the same affordance everywhere: the list rows,
   the reading links, and the footer columns all lift to full text on hover. */
.read-link, .foot-grid a { transition: color 0.15s; }

/* The phone header and the smallest controls went below a comfortable touch
   target (6px of padding on a 13px button). Lift the small sizes on a narrow
   screen only; desktop density is unchanged. */
@media (max-width: 680px) {
  .btn-sm { padding: 8px 12px; }
  .chip { padding: 8px 14px; }
  .mini-disclose > summary { padding: 16px 18px; }
  .faq-toc a { padding: 8px 14px; }
}

/* An in-sentence link that must look like one. The site strips underline from
   bare <a> for a card-like feel, which left body links reading as plain text. */
.text-link { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.text-link:hover { text-decoration-thickness: 2px; }

/* The inline logo's gradient point: brand indigo into up-green. SVG
   presentation attributes cannot read CSS variables, so the gradient stops are
   classes styled here, and they follow the light/dark theme for free. */
.sm-mark-stop-a { stop-color: var(--brand); }
.sm-mark-stop-b { stop-color: var(--up); }