/* ─── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Type ─────────────────────────────────────────────────────────
   Satoshi carries the voice, JetBrains Mono carries every number on the
   page. Both self-hosted and variable-weight: Satoshi from Fontshare
   (ITF Free Font License), JetBrains Mono under SIL OFL 1.1.

   Satoshi ships unsubsetted, so no unicode-range is declared for it; the
   Google-served JetBrains Mono file is already a latin subset and keeps
   the matching range so the browser can skip it for non-latin text.
   ──────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Satoshi";
  src: url("fonts/satoshi-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── Tokens ───────────────────────────────────────────────────────
   One theme: a dark trading-desk surface built on hairlines rather than
   card elevation. Every visible colour, the corner radius and the type
   stack is a custom property, and the hand-rolled SVG charts read these
   same vars through their CSS classes, so the palette is the single
   source of truth for the whole page (no chart re-render needed).

   Token contract (app.js and the charts depend on these names):
     --cream       page background
     --paper       raised surface
     --paper-warm  alternate-section / inset surface
     --ink         primary text
     --slate       secondary text
     --slate-soft  tertiary text / labels
     --sage        positive fill (win bars, chips, bar-fill)
     --sage-deep   positive text / emphasis
     --sage-soft   positive soft surface (yes-chip bg)
     --blush       negative fill
     --blush-deep  negative text
     --blush-soft  negative soft surface (no-chip bg)
     --rule        hairline border
     --rule-strong emphasis border
     --amber       warning text (stale / halt states only)
     --amber-soft  warning surface
     --accent      links / focus / cumulative line / active control
     --on-accent   text that sits on an --accent fill
     --nav-bg      translucent nav background
     --shadow-card card elevation (kept as a token, now effectively flat)
     --font-ui     body / control font
     --font-display headings font
     --shimmer     skeleton sweep colour
     --track       neutral track (bars, chip code bg)
     --chip-bg     family-chip background
     --row-hover   table-row / button hover wash
     --grid        chart gridline stroke
     --radius / --radius-sm  corner radius
   ──────────────────────────────────────────────────────────────── */

:root {
  --cream:        #0B0F14;
  --paper:        #131A22;
  --paper-warm:   #0F151C;
  --ink:          #E9EDF2;
  --slate:        #A3AEBC;
  --slate-soft:   #7C8797;
  --sage:         #3FB27F;
  --sage-deep:    #5FD3A0;
  --sage-soft:    #123027;
  --blush:        #CE6068;
  --blush-deep:   #F08A90;
  --blush-soft:   #33191D;
  --rule:         rgba(233, 237, 242, 0.09);
  --rule-strong:  rgba(233, 237, 242, 0.20);
  --amber:        #E5B45C;
  --amber-soft:   #2C2312;
  --accent:       #5EA8E5;
  --on-accent:    #06090D;
  --nav-bg:       rgba(11, 15, 20, 0.78);
  --shadow-card:  none;
  --shimmer:      rgba(233, 237, 242, 0.06);
  --track:        rgba(233, 237, 242, 0.09);
  --chip-bg:      rgba(233, 237, 242, 0.07);
  --row-hover:    rgba(94, 168, 229, 0.09);
  --grid:         rgba(233, 237, 242, 0.08);

  /* Shape lock: 8px on containers, 6px on controls. Nothing else. */
  --radius:       8px;
  --radius-sm:    6px;
  --max:          1060px;
  --max-narrow:   720px;

  --sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --font-ui:      var(--sans);
  --font-display: var(--sans);
}

html { scroll-behavior: smooth; color-scheme: dark; }

/* Screen-reader-only: keeps a heading in the a11y tree when the visual
   design carries the same meaning through data labels instead. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body {
  font-family: var(--font-ui);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

img, picture { display: block; max-width: 100%; height: auto; }

/* ─── Layout ───────────────────────────────────────────────────── */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}
.container-narrow { max-width: var(--max-narrow); }

/* ─── Banners ──────────────────────────────────────────────────── */
.halt-banner,
.error-banner {
  width: 100%;
  padding: 10px 24px;
  font-size: 0.92rem;
  text-align: center;
  letter-spacing: 0.01em;
}
.halt-banner {
  background: color-mix(in srgb, var(--blush) 22%, var(--paper));
  color: var(--blush-deep);
  font-weight: 600;
  border-bottom: 1px solid var(--rule-strong);
}
.error-banner {
  background: var(--amber-soft);
  color: var(--amber);
  border-bottom: 1px solid var(--rule-strong);
}
.error-banner strong { color: var(--amber); }

/* ─── Nav ──────────────────────────────────────────────────────── */
nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 15px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  white-space: nowrap;   /* brand never wraps — keeps nav height predictable */
}
.nav-mark {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 0.92rem;
  color: var(--slate);
}
.nav-links a { text-decoration: none; transition: color 160ms ease; }
.nav-links a:hover { color: var(--ink); }
.nav-ext { color: var(--slate); font-weight: 500; }
.nav-ext:hover { color: var(--accent); }

/* ─── Hero ─────────────────────────────────────────────────────────
   Asymmetric split: the value prop holds the left column, Vic's portrait
   anchors the right at a size the painting can actually carry. The live
   stat masthead is fused to the bottom edge (see .masthead) so the first
   viewport ends on real numbers rather than on marketing copy. */
.hero {
  padding: 56px 0 0;
  background:
    radial-gradient(ellipse 60% 50% at 78% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%),
    var(--cream);
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding-bottom: 44px;
}
.hero-text { min-width: 0; }
.hero-text h1 {
  font-size: clamp(2.6rem, 6vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 1;
  font-weight: 600;
  font-family: var(--font-display);
}
.hero-sub {
  margin-top: 18px;
  color: var(--slate);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.45;
  max-width: 34ch;
  text-wrap: balance;
}
.hero-meta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hero-portrait {
  width: clamp(150px, 21vw, 248px);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.hero-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 18%;
}

@media (max-width: 760px) {
  .hero { padding-top: 34px; }
  .hero-inner { gap: 20px; padding-bottom: 30px; }
  .hero-sub { margin-top: 14px; }
  .hero-meta { margin-top: 18px; }
  .hero-portrait { width: clamp(104px, 30vw, 150px); }
}

/* ─── Stat masthead ────────────────────────────────────────────────
   The live bankroll numbers, sitting on the hero's bottom edge as one
   ruled band rather than four floating cards. app.js renders the same
   .kpi-card markup here as elsewhere; the card chrome is stripped and
   replaced with vertical hairlines so the four figures read as a set. */
.masthead {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 55%, transparent);
}
.masthead .kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.masthead .kpi-card {
  background: none;
  border: 0;
  border-left: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  padding: 22px 24px;
  gap: 7px;
}
.masthead .kpi-card:first-child { border-left: 0; padding-left: 0; }
.masthead .kpi-card:last-child { padding-right: 0; }
.masthead .kpi-card:hover { transform: none; border-color: var(--rule); }
.masthead .kpi-label {
  font-size: 0.7rem;
  letter-spacing: 0.11em;
}
.masthead .kpi-value { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.masthead .kpi-sub { font-size: 0.76rem; color: var(--slate-soft); }
.masthead .kpi-spark { height: 22px; margin: 2px 0; }
.masthead .kpi-bar { margin-top: 4px; }

@media (max-width: 860px) {
  .masthead .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .masthead .kpi-card { padding: 18px 20px; }
  /* 2x2: reset the left rule on each row start, add a rule between rows. */
  .masthead .kpi-card:nth-child(odd) { border-left: 0; padding-left: 0; }
  .masthead .kpi-card:nth-child(even) { padding-right: 0; }
  .masthead .kpi-card:nth-child(n + 3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 460px) {
  .masthead .kpi-grid { grid-template-columns: minmax(0, 1fr); }
  .masthead .kpi-card { padding: 16px 0; border-left: 0; }
  .masthead .kpi-card + .kpi-card { border-top: 1px solid var(--rule); }
}

/* ─── Pills & Chips ────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 500;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--slate);
}
.pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 3px var(--track);
}
.pill-live { color: var(--sage-deep); }
.pill-stale { color: var(--amber); }
.pill-stale .dot { background: var(--amber); }
.pill-error { color: var(--blush-deep); }
.pill-error .dot { background: var(--blush-deep); }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--chip-bg);
  color: var(--sage-deep);
  border: 1px solid var(--rule);
  font-family: var(--mono);
}
.chip-muted {
  background: var(--paper);
  color: var(--slate);
  border-color: var(--rule);
}
.family-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
  font-family: var(--mono);
  background: var(--chip-bg);
  color: var(--slate);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.side-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.side-chip-yes { background: var(--sage-soft); color: var(--sage-deep); }
.side-chip-no  { background: var(--blush-soft); color: var(--blush-deep); }

/* Part 1b — live-account + honest "no live quote" affordances */
.no-quote {
  color: var(--slate);
  opacity: 0.6;
  font-style: italic;
  font-size: 0.82rem;
}
.track-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  font-size: 0.68rem;
  font-family: var(--mono);
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.track-yes { background: var(--sage-soft); color: var(--sage-deep); }
.track-no  { background: var(--chip-bg); color: var(--slate); }
/* "Manual Trade" note + family chip for direct-on-Kalshi manual bets */
.manual-note {
  color: var(--blush-deep);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.02em;
}
.family-manual { background: var(--blush-soft); color: var(--blush-deep); }
.live-dot {
  color: var(--blush-deep);
  font-size: 0.7em;
  vertical-align: middle;
  animation: live-pulse 2.4s ease-in-out infinite;
}
@keyframes live-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.section-note {
  font-size: 0.86rem;
  color: var(--slate);
  margin: 0 0 16px;
  max-width: 70ch;
  line-height: 1.5;
}

/* ─── Sections ─────────────────────────────────────────────────── */
.section {
  padding: 52px 0;
  border-bottom: 1px solid var(--rule);
}
.section-alt { background: var(--paper-warm); }
.section-prose { padding: 60px 0 72px; }
.section-head {
  display: flex;
  align-items: baseline;
  gap: 8px 18px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.section-title {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  font-family: var(--font-display);
  transition: color 180ms ease;
}
/* The sub sits on the headline's baseline as a caption, not as a floating
   right-hand explainer paragraph. It wraps under on narrow viewports. */
.section-sub {
  color: var(--slate-soft);
  font-size: 0.88rem;
  line-height: 1.45;
  max-width: 62ch;
}

.section-prose p {
  margin-top: 14px;
  color: var(--ink);
  font-size: 1.04rem;
  line-height: 1.7;
}
.section-prose p:first-of-type { margin-top: 22px; }
.section-prose strong { color: var(--sage-deep); font-weight: 600; }
.prose-cta {
  margin-top: 28px !important;
  font-weight: 500;
}

/* ─── Collapsible sections ─────────────────────────────────────── */
.section-collapse { margin: 0; }
.section-collapse > summary {
  cursor: pointer;
  list-style: none;
  outline: none;
  position: relative;
  border-radius: var(--radius-sm);
  padding: 10px 44px 10px 12px;   /* right gutter reserves the chevron column */
  margin: -10px -12px -10px -12px;
  transition: background-color 200ms ease;
}
.section-collapse > summary::-webkit-details-marker { display: none; }
.section-collapse > summary::marker { content: ''; }

.section-collapse > summary:hover {
  background-color: color-mix(in srgb, var(--accent) 7%, transparent);
}
.section-collapse > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.section-collapse > summary:hover .section-title,
.section-collapse > summary:focus-visible .section-title {
  color: var(--accent);
}

/* Toggle chevron — a masked glyph tinted from a token. Absolutely placed
   so a wrapping headline + caption can never push it onto its own row. */
.section-head-toggle { user-select: none; }
.section-head-toggle::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 12px;
  width: 26px;
  height: 26px;
  background-color: var(--slate-soft);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / 17px;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / 17px;
  transform: rotate(0deg);
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 200ms ease;
}
.section-collapse[open] > .section-head-toggle::after {
  transform: rotate(180deg);
  background-color: var(--accent);
}
.section-collapse > summary:hover .section-head-toggle::after { background-color: var(--accent); }
.section-collapse:not([open]) > .section-head-toggle { margin-bottom: 0; }

@media (max-width: 559px) {
  .section-head-toggle::after { width: 24px; height: 24px; -webkit-mask-size: 15px; mask-size: 15px; }
  .section-collapse > summary { padding: 10px 36px 10px 10px; margin: -10px -10px -10px -10px; }
}

.details-body {
  margin-top: 14px;
  animation: section-fade-in 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes section-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.section-collapse-prose .details-body p:first-of-type { margin-top: 22px; }

@media (prefers-reduced-motion: reduce) {
  .section-collapse,
  .section-collapse > summary,
  .section-head-toggle::after,
  .details-body { transition: none; animation: none; }
}

/* ─── API & LLM Usage & Costs ──────────────────────────────────── */
/* Six cost panels, grouped two-up on a shared hairline lattice instead of
   six free-floating cards. The dense accounting notes stay, dialled down
   in weight so the figures lead and the caveats follow. */
.usage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 4px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.usage-card {
  background: var(--paper);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.usage-card .usage-label {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
}
@media (max-width: 720px) {
  .usage-grid { grid-template-columns: minmax(0, 1fr); }
}
.usage-card .usage-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.94rem;
  padding: 2px 0;
}
.usage-card .usage-row > span:first-child { color: var(--slate); }
.usage-card .usage-row .num {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 500;
}
.usage-card .usage-note {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--slate-soft);
  line-height: 1.4;
}
.usage-card .usage-note code {
  font-size: 0.85em;
  background: var(--track);
  padding: 1px 4px;
  border-radius: 3px;
}
.usage-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.usage-history-table th {
  font-weight: 500;
  color: var(--slate);
  text-align: left;
  padding: 4px 8px 4px 0;
  border-bottom: 1px solid var(--rule);
}
.usage-history-table td {
  padding: 4px 8px 4px 0;
  font-variant-numeric: tabular-nums;
}
.usage-history-table tr + tr td { border-top: 1px solid var(--rule); }
.usage-footnote {
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--slate-soft);
  font-style: italic;
}

/* ─── KPI strip ────────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.kpi-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 108px;
  box-shadow: var(--shadow-card);
  transition: border-color 180ms ease;
}
.kpi-card:hover { border-color: var(--rule-strong); }
.kpi-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate-soft);
}
.kpi-value {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.1;
}

/* ─── Risk guardrails: gauge band ──────────────────────────────────
   A different shape from the masthead on purpose. Each cap is a gauge
   row with a state rule down its left edge, laid out two-up so four
   limits read as a compact block rather than four more big tiles. */
#risk-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
#risk-grid .kpi-card {
  border: 0;
  border-radius: 0;
  background: var(--paper);
  min-height: 0;
  padding: 16px 18px 16px 20px;
  gap: 5px;
}
#risk-grid .kpi-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--sage);
}
/* app.js flags a cap that is being approached with .kpi-negative. */
#risk-grid .kpi-card.kpi-negative::before { background: var(--blush); }
#risk-grid .kpi-card:hover { background: color-mix(in srgb, var(--accent) 5%, var(--paper)); }
#risk-grid .kpi-value { font-size: 1.1rem; letter-spacing: -0.015em; }
#risk-grid .kpi-sub { font-size: 0.78rem; color: var(--slate-soft); }
@media (max-width: 620px) {
  #risk-grid { grid-template-columns: minmax(0, 1fr); }
}
.kpi-sub {
  font-family: var(--mono);
  font-size: 0.84rem;
  color: var(--slate);
}
/* "bot" tag on the All-time P&L card (Part A: headline = Vic's bot edge) */
.kpi-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  vertical-align: middle;
  background: var(--chip-bg);
  color: var(--slate);
  text-transform: none;
}
.kpi-sub.manual-note { font-size: 0.78rem; margin-top: 2px; }
.kpi-positive .kpi-value, .num-positive { color: var(--sage-deep); }
.kpi-negative .kpi-value, .num-negative { color: var(--blush-deep); }

.kpi-bar {
  margin-top: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
}
/* No width transition here: renderKPIs inserts this element via innerHTML with
   its final width already applied, so there is no prior value to animate from
   and the tween never fired. Animating width would thrash layout regardless;
   if a live-updating bar is ever wanted, drive it with transform: scaleX(). */
.kpi-bar-fill {
  height: 100%;
  background: var(--sage);
  border-radius: 999px;
}
.kpi-bar-fill.over { background: var(--blush); }

.halt-active .kpi-card { opacity: 0.55; filter: grayscale(0.4); }

/* ─── Tables ───────────────────────────────────────────────────────
   Every table scrolls inside its own wrapper rather than widening the
   page. This matters between 601px and roughly 700px: the card collapse
   below has ended but a seven-column table still does not fit, and
   without containment those columns push the whole document sideways.

   The wrapper bleeds 12px past the container on each side and pays it
   back as padding, which gives the win/loss row markers a gutter to sit
   in (they are positioned at left: -12px on the first cell). Without the
   padding, that gutter would be negative overflow and get clipped. */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-inline: -12px;
  padding-inline: 12px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.data-table thead th {
  text-align: left;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--slate-soft);
  padding: 0 14px 9px;
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}
.data-table thead th:first-child { padding-left: 0; }
.data-table thead th:last-child { padding-right: 0; }
.data-table tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.data-table tbody td:first-child { padding-left: 0; }
.data-table tbody td:last-child { padding-right: 0; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background-color 140ms ease; }
.data-table tbody tr:hover { background: var(--row-hover); }
.data-table th.num,
.data-table td.num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.data-table .market-cell { min-width: 0; }
.data-table .market-cell .market-title {
  display: block;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 3px;
}
.data-table .market-cell .market-ticker {
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--slate-soft);
}
.data-table .market-cell .market-rationale {
  display: block;
  font-size: 0.84rem;
  color: var(--slate);
  margin-top: 6px;
  font-style: italic;
}

/* Win/loss is marked on the row's leading edge rather than by washing the
   whole row, which would fight the coloured P&L figure in the last cell.
   The marker bleeds into the container gutter so the first column stays
   flush with the section headline above it.

   Table-layout only: below 600px these rows become stacked cards and the
   same ::before slot carries each cell's data-label, so the marker is
   confined to the breakpoint where a real table exists. */
@media (min-width: 601px) {
  .row-win  td:first-child,
  .row-loss td:first-child { position: relative; }
  .row-win  td:first-child::before,
  .row-loss td:first-child::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 3px;
    bottom: 3px;
    width: 2px;
    border-radius: 1px;
  }
  .row-win  td:first-child::before { background: var(--sage); }
  .row-loss td:first-child::before { background: var(--blush); }
}

.empty-row td {
  text-align: center;
  padding: 28px 14px;
  color: var(--slate-soft);
  font-style: italic;
}

.skeleton td { color: var(--slate-soft); font-style: italic; }

.delta-up   { color: var(--sage-deep); }
.delta-down { color: var(--blush-deep); }
.delta-flat { color: var(--slate-soft); }

/* ─── Responsive table → cards under 600px ─────────────────────── */
@media (max-width: 600px) {
  .table-wrap[data-collapse="cards"] .data-table thead { display: none; }
  .table-wrap[data-collapse="cards"] .data-table,
  .table-wrap[data-collapse="cards"] .data-table tbody,
  .table-wrap[data-collapse="cards"] .data-table tr,
  .table-wrap[data-collapse="cards"] .data-table td { display: block; width: 100%; }
  .table-wrap[data-collapse="cards"] .data-table tr {
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 12px;
    background: var(--paper);
  }
  .table-wrap[data-collapse="cards"] .data-table tr:hover { background: var(--paper); }
  .table-wrap[data-collapse="cards"] .data-table td {
    padding: 6px 0;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: right;
  }
  .table-wrap[data-collapse="cards"] .data-table td.num { text-align: right; }
  .table-wrap[data-collapse="cards"] .data-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate-soft);
    font-weight: 600;
    font-family: var(--font-ui);
  }
  .table-wrap[data-collapse="cards"] .data-table td.market-cell {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 6px;
  }
  .table-wrap[data-collapse="cards"] .data-table td.market-cell::before { margin-bottom: 4px; }
  .table-wrap[data-collapse="cards"] .data-table td.market-cell .market-rationale { text-align: left; }
  .table-wrap[data-collapse="cards"] .empty-row td {
    display: block;
    text-align: center;
    padding: 24px 0;
  }
  .table-wrap[data-collapse="cards"] .empty-row td::before { content: none; }
}

/* ─── Footer ───────────────────────────────────────────────────── */
footer {
  padding: 36px 0 48px;
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.footer-logo {
  font-weight: 600;
  color: var(--ink);
  font-family: var(--font-display);
}
.footer-links {
  font-size: 0.92rem;
  color: var(--slate);
}
.footer-links a { text-decoration: none; color: var(--slate); }
.footer-links a:hover { color: var(--ink); }
.footer-disclaimer {
  font-size: 0.82rem;
  color: var(--slate-soft);
  line-height: 1.6;
  max-width: 52ch;
  margin: 4px auto 0;
}
.footer-copy {
  font-size: 0.82rem;
  color: var(--slate-soft);
  font-family: var(--mono);
}

/* ─── Skeleton shimmer ─────────────────────────────────────────── */
.skeleton { position: relative; overflow: hidden; }
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--shimmer), transparent);
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.kpi-card.skeleton::after { animation-duration: 1.8s; }

/* ─── Charts ───────────────────────────────────────────────────── */
.timeframe-selector {
  display: inline-flex;
  gap: 2px;
  margin: 0;
  padding: 3px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.tf-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--slate);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.tf-btn:hover { color: var(--ink); background: var(--row-hover); }
.tf-btn.tf-active {
  background: var(--accent);
  color: var(--on-accent);
}
.tf-btn:active { transform: scale(0.97); }
.tf-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Charts sit directly on the section surface under a single hairline
   rather than inside a bordered card inside a bordered section. */
.chart-wrap {
  width: 100%;
  overflow: hidden;
  padding: 14px 0 4px;
  border-top: 1px solid var(--rule);
}
.chart {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--mono);
  font-size: 11px;
}
.chart .grid       { stroke: var(--grid); stroke-width: 1; }
.chart .axis-zero  { stroke: var(--rule-strong); stroke-width: 1; }
.chart .axis       { fill: var(--slate); font-family: var(--mono); }
.chart .bar-pos    { fill: var(--sage); }
.chart .bar-neg    { fill: var(--blush); }
.chart .bar-zero   { fill: var(--slate-soft); }
.chart .cum-line   { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.chart .cum-dot    { fill: var(--accent); }
.chart .bar-value  { font-size: 10.5px; }
.chart .empty-state { fill: var(--slate-soft); font-size: 13px; }

.chart .roi-pnl-line  { fill: none; stroke: var(--sage-deep); stroke-width: 1.75; }
.chart .roi-cost-line { fill: none; stroke: var(--blush-deep); stroke-width: 1.5; stroke-dasharray: 4 3; }
.chart .roi-dot       { fill: var(--sage-deep); }
.chart .roi-area      { stroke: none; }
.chart .roi-area-pos  { fill: color-mix(in srgb, var(--sage) 18%, transparent); }
.chart .roi-area-neg  { fill: color-mix(in srgb, var(--blush) 18%, transparent); }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--slate);
}
.legend-item   { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 2px;
  vertical-align: middle;
}
.swatch-pos  { background: var(--sage); }
.swatch-neg  { background: var(--blush); }
.swatch-line { background: var(--accent); height: 2px; margin: 5px 0; }
.swatch-pnl  { background: var(--sage-deep); }
.swatch-cost { background: var(--blush-deep); }
.swatch-net  { background: color-mix(in srgb, var(--sage) 30%, transparent); }

.src-badge {
  display: inline-block;
  font-size: 0.74rem;
  padding: 1px 7px;
  border-radius: 999px;
  font-variant-numeric: normal;
  white-space: nowrap;
}
.src-metered      { background: color-mix(in srgb, var(--sage) 16%, transparent); color: var(--sage-deep); }
.src-token_priced { background: color-mix(in srgb, var(--blush) 16%, transparent); color: var(--blush-deep); }
.src-mixed        { background: var(--track); color: var(--slate); }

.chart .heat-bg   { fill: var(--paper-warm); stroke: var(--rule); stroke-width: 0.5; }
.chart .heat-cell { fill: var(--sage-deep); }

.kpi-spark {
  display: block;
  width: 100%;
  height: 28px;
  margin: 6px 0 4px;
  overflow: visible;
  opacity: 0.9;
}
.kpi-spark polyline       { fill: none; stroke-width: 1.5; }
.kpi-spark .spark-zero    { stroke: var(--rule-strong); stroke-width: 0.75; stroke-dasharray: 2 2; }
.spark-pos     polyline   { stroke: var(--sage); }
.spark-neg     polyline   { stroke: var(--blush); }
.spark-neutral polyline   { stroke: var(--slate); }
.spark-bipolar polyline   { stroke: var(--accent); }

.chart-2col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 768px) {
  .chart-2col { grid-template-columns: 1fr; }
}

.extreme-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 10px;
  box-shadow: var(--shadow-card);
}
.extreme-pos { border-left: 2px solid var(--sage); }
.extreme-neg { border-left: 2px solid var(--blush); }
.extreme-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate);
  margin-bottom: 4px;
}
.extreme-value {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 6px;
}
.extreme-meta {
  font-size: 12px;
  color: var(--slate);
  margin-top: 2px;
}
.extreme-empty {
  font-size: 13px;
  color: var(--slate-soft);
  font-style: italic;
}

.section-chart { padding-bottom: 36px; }

/* ─── Chart geometry ───────────────────────────────────────────────
   Shape, not colour. These CSS geometry properties (rx on <rect>, r on
   <circle>) override the SVG presentation attributes app.js writes, so
   the chart silhouette is tuned here rather than in the renderer. Bars
   carry the same 3px softening as the rest of the page's corners; the
   cumulative line is the loudest stroke because it is the narrative. */
.chart .bar-pos, .chart .bar-neg, .chart .bar-zero { rx: 3px; }
.chart .heat-cell { rx: 2px; }
.chart .heat-bg   { rx: 2px; }
.chart .cum-dot   { r: 0; }              /* line-only; per-point dots stay off */
.chart .cum-line  { stroke-width: 2; }

/* ─── Biggest winners (Phase 35) ───────────────────────────────────
   A ledger, not a stack of cards: rows separated by hairlines, the whole
   list bounded once. Each row still opens into its own trade story. */
.winners-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
}
.winner-item { margin: 0; border-bottom: 1px solid var(--rule); }
.winner { overflow: hidden; }
.winner > summary.winner-row {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  outline: none;
  transition: background-color 160ms ease;
}
.winner > summary.winner-row::-webkit-details-marker { display: none; }
.winner > summary.winner-row::marker { content: ''; }
.winner > summary.winner-row:hover { background: var(--row-hover); }
.winner > summary.winner-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.winner-rank {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--slate-soft);
  flex: 0 0 auto;
  min-width: 2.2em;
}
.winner-pnl {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 1.02rem;
  flex: 0 0 auto;
  min-width: 5.5em;
}
.winner-mkt { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.winner-ticker {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.winner-ret { font-family: var(--mono); font-size: 0.9rem; flex: 0 0 auto; }

/* expand chevron (masked glyph → recolours per theme) */
.winner > summary.winner-row::after {
  content: '';
  flex: 0 0 18px;
  height: 18px;
  margin-left: 2px;
  background-color: var(--slate-soft);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / 14px;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / 14px;
  transition: transform 200ms ease, background-color 160ms ease;
}
.winner[open] > summary.winner-row::after { transform: rotate(180deg); background-color: var(--accent); }

/* podium accent for the top three */
.winner-row.winner-top1 { box-shadow: inset 2px 0 0 var(--accent); }
.winner-row.winner-top2,
.winner-row.winner-top3 { box-shadow: inset 2px 0 0 var(--rule-strong); }
.winner-row.winner-top1 .winner-rank { color: var(--accent); }

.winner-detail {
  padding: 4px 14px 16px;
  border-top: 1px solid var(--rule);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  animation: section-fade-in 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.winner-insight {
  margin: 12px 0 14px;
  padding-left: 10px;
  border-left: 2px solid var(--accent);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
}
.winner-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px 18px;
}
.winner-stat dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--slate-soft);
  margin-bottom: 2px;
}
.winner-stat dd {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.winner-rationale {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--slate);
  line-height: 1.5;
  word-break: break-word;
  padding: 8px 10px;
  background: var(--track);
  border-radius: var(--radius-sm);
}
.judg-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.judg-held     { background: color-mix(in srgb, var(--sage) 18%, transparent);  color: var(--sage-deep); }
.judg-broke    { background: color-mix(in srgb, var(--blush) 18%, transparent); color: var(--blush-deep); }
.judg-variance { background: var(--amber-soft); color: var(--amber); }
.winners-foot {
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--slate-soft);
  font-style: italic;
  line-height: 1.5;
}
.winner-empty {
  list-style: none;
  text-align: center;
  padding: 28px 14px;
  color: var(--slate-soft);
  font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
  .winner > summary.winner-row::after,
  .winner-detail { transition: none; animation: none; }
}
@media (max-width: 559px) {
  .winner > summary.winner-row { gap: 10px; padding: 11px 12px; flex-wrap: wrap; }
  .winner-mkt { order: 3; flex-basis: 100%; }
  .winner-ret { margin-left: auto; }
}

/* ─── Footer visitor count (GoatCounter) ───────────────────────── */
.footer-count {
  font-size: 0.78rem;
  color: var(--slate-soft);
  font-family: var(--mono);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT — the "deux" category nav (data-version="deux", hardcoded on <html>)
   A sticky scrollspy menu with a sliding indicator. The [data-version="deux"]
   prefix is retained so the rules stay scoped (the attribute is always
   present). version.js drives the scrollspy and measures the main-nav height
   into --nav-h so this bar seats flush beneath it.
   ─────────────────────────────────────────────────────────────────── */

/* Category nav + group wrappers (Deux is the only layout). */
[data-version="deux"] .cat-group { display: block; }
[data-version="deux"] .cat-nav { display: block; }

/* Category headers. These are the page's only small-caps labels: they name
   the four groups the sticky nav scrolls between, so they earn the form. */
[data-version="deux"] .cat-title {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px 24px 0;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate-soft);
}
[data-version="deux"] .cat-title::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}

/* Anchor targets clear the two stacked sticky bars when smooth-scrolled to. */
[data-version="deux"] .cat-group { scroll-margin-top: calc(var(--nav-h, 52px) + 52px); }

/* Light visual refresh — a gentle fade-up as the page paints (disabled
   under prefers-reduced-motion by the global rule at the foot of the file). */
[data-version="deux"] .cat-group > section {
  animation: vsReveal 460ms ease both;
}
@keyframes vsReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── DEUX — sticky scrollspy menu ─────────────────────────────────── */
[data-version="deux"] .cat-nav {
  position: sticky;
  top: var(--nav-h, 52px);   /* seats flush under the real main-nav height (set in version.js) */
  z-index: 40;
  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
}
[data-version="deux"] .cat-nav-inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
[data-version="deux"] .cat-nav-inner::-webkit-scrollbar { display: none; }
[data-version="deux"] .cat-nav-link {
  position: relative;
  padding: 12px 15px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--slate-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease;
}
[data-version="deux"] .cat-nav-link:hover { color: var(--ink); }
[data-version="deux"] .cat-nav-link.is-active { color: var(--accent); }
[data-version="deux"] .cat-nav-indicator {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  transition: left 280ms cubic-bezier(.4, 0, .2, 1),
              width 280ms cubic-bezier(.4, 0, .2, 1);
}

/* ─── Hero entrance ────────────────────────────────────────────────
   A short staggered settle on first paint, ordered so the eye lands on
   the headline, then the portrait, then the live figures. Declared only
   under no-preference so the reduced-motion default is the finished
   state rather than something waiting on an animation to reveal it. */
@media (prefers-reduced-motion: no-preference) {
  .hero-text > *,
  .hero-portrait,
  .masthead {
    animation: heroSettle 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .hero-text h1     { animation-delay: 0ms; }
  .hero-sub         { animation-delay: 70ms; }
  .hero-meta        { animation-delay: 140ms; }
  .hero-portrait    { animation-delay: 90ms; }
  .masthead         { animation-delay: 200ms; }
}
@keyframes heroSettle {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Print ────────────────────────────────────────────────────── */
@media print {
  nav, footer, .cat-nav, .hero-portrait, .halt-banner, .error-banner { display: none; }
  body { background: #fff; color: #000; }
  .section { border-color: #ddd; page-break-inside: avoid; }
  .kpi-card, .usage-card, .chart-wrap, .extreme-card { box-shadow: none; }
}

/* ─── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}