/* LiveMacroEval — centred newspaper layout, paper-matched palette.

   Two families only, standing in for WSJ's own three (Escrow for headlines,
   Exchange for body, Retina for small text — all proprietary):
     --display (Source Serif 4)  the big title and section headings, nothing else
     --text    (Libre Franklin)  every other word on the page
   The BibTeX block keeps the system monospace: it is code, and it downloads
   nothing.

   Colour: exactly two chromatic families, both lifted from the paper figures.
     --accent #298c8c  the green in every figure (GPT_TEAL in the case-study
                       series plots), used for positive / "beats consensus"
     --warm   #d97757  the paper's orange (Sonnet 4.5's bar), used for
                       negative / "below consensus" and for emphasis
   Teal and orange are complementary, so nothing fights; the earlier red read
   as a clash against the green. The *-ink variants are darkened only so small
   text clears WCAG AA — bars, rules and dots keep the exact figure values. */

:root {
  --bg: #ffffff;
  --bg-soft: #f4f5f7;
  --bg-card: #ffffff;

  /* every text colour below clears 4.5:1 on both --bg and --bg-soft */
  --fg: #14161a;         /* 18.1:1 */
  --fg-muted: #3a4049;   /* 10.5:1 */
  --fg-faint: #565d68;   /*  6.6:1 */

  --border: #d8dce3;

  --accent: #298c8c;      /* paper green — graphics only (4.0:1) */
  --accent-ink: #1f6e6e;  /* darkened for text (6.0:1) */
  --accent-soft: #e7f1f1;

  --warm: #d97757;        /* paper orange — graphics only (3.1:1) */
  --warm-ink: #a35136;    /* same hue, darkened for text (5.5:1) */
  --warm-soft: #fbeee8;

  --pos: var(--accent-ink);
  --neg: var(--warm-ink);

  /* the whole page is as wide as the paper title: .papertitle is 30em at its
     22px cap, i.e. 660px, and the wrap adds 26px of padding on each side, so
     nav, prose, tables, cards and every figure all share that one column */
  --max: 712px;
  /* prose spans the full wrap, so a paragraph lines up with the nav:
     the brand on the left, the last nav link on the right */
  --measure: 100%;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --text: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115;
    --bg-soft: #171a20;
    --bg-card: #171a20;
    --fg: #eef0f4;
    --fg-muted: #c2c8d2;
    --fg-faint: #9aa2af;
    --border: #2b303a;
    --accent: #54bcbc;
    --accent-ink: #54bcbc;   /* 8.4:1 on dark */
    --accent-soft: #14312f;
    --warm: #e08d6f;
    --warm-ink: #e59a7d;     /* 8.3:1 on dark */
    --warm-soft: #2e1d16;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 74px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--text);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The page is centred throughout; blocks that must not be, opt out below. */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 26px; text-align: left; }
header.hero .wrap { text-align: center; }

p { margin: 0 auto 15px; max-width: var(--measure); }
a { color: var(--accent-ink); text-underline-offset: 2px; }
a:hover { color: var(--warm-ink); }
strong, b { font-weight: 600; }
.hl { font-style: normal; color: var(--warm-ink); }
/* keep the highlighted phrase on one line so the hyphen never breaks */
.papertitle .hl { white-space: nowrap; }

.label, .tag, thead th, .kind {
  font-family: var(--text); text-transform: uppercase;
  letter-spacing: .085em; font-weight: 600;
}

/* ---------- nav ---------- */
nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
nav .wrap { display: flex; align-items: baseline; gap: 24px; height: 62px; padding-top: 20px; }
nav .brand {
  font-family: var(--display); font-weight: 600; font-size: 22px;
  letter-spacing: -0.015em; margin-right: auto; color: var(--fg);
}
nav .brand span { color: var(--accent-ink); }
nav a {
  font-family: var(--text); color: var(--fg-muted); text-decoration: none;
  font-size: 15px; font-weight: 500;
}
nav a:hover { color: var(--fg); text-decoration: underline; }
nav .navlinks { display: flex; gap: 22px; }
@media (max-width: 780px) { nav .navlinks { display: none; } }

/* ---------- hero ---------- */
header.hero { padding: 40px 0 40px; }
h1.title {
  font-family: var(--display); font-size: clamp(40px, 6.4vw, 76px); line-height: 1.03;
  letter-spacing: -0.025em; margin: 0 0 14px; font-weight: 600;
}
h1.title span { color: var(--accent-ink); }
.papertitle {
  font-family: var(--display); font-size: clamp(17px, 2vw, 22px); line-height: 1.3;
  font-weight: 400; color: var(--fg); margin: 0 auto 16px; max-width: 30em;
}

/* the three links read as one strip: equal-width tabs with a lighter contour,
   the row still spanning the width the longer labels used to need */
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
          max-width: 460px; margin: 0 auto; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0;
  padding: 6px 12px; border-radius: 3px;
  border: 1px solid var(--fg); background: var(--bg-card); color: var(--fg);
  text-decoration: none; font-family: var(--text); font-size: 13.5px; font-weight: 600;
  transition: .15s;
}
.btn:hover { background: var(--fg); color: var(--bg); }
/* No `primary` variant: all three buttons are the same outline treatment. A
   filled one was tried in both near-black and the site teal and read as too
   loud beside the other two -- the row is three peer links, not one call to
   action. `.btn:hover` above supplies the only fill. */
.btn.disabled { border-color: var(--border); color: var(--fg-faint); background: var(--bg-soft); pointer-events: none; }

/* ---------- live strip ---------- */
.livestrip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 28px; margin: 22px auto 0; padding: 10px 0; max-width: 660px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  font-family: var(--text); font-size: 13px; color: var(--fg-muted);
}
.livestrip .k { text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px;
                font-weight: 700; color: var(--fg-muted); }
.livestrip b { color: var(--accent-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  display: inline-block; margin-right: 7px; vertical-align: 1px;
  animation: pulse 3s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- sections ---------- */
section { padding: 58px 0; }
section + section { border-top: 1px solid var(--border); }
h2 {
  font-family: var(--display); font-size: clamp(28px, 4.2vw, 38px); font-weight: 600;
  letter-spacing: -0.018em; line-height: 1.14; margin: 0 auto 26px;
  text-align: center;
}
h3 {
  font-family: var(--text); font-size: 13.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  margin: 40px 0 14px; color: var(--fg);
}
h3::after {
  content: ""; display: block; width: 32px; height: 2px;
  background: var(--accent); margin: 8px auto 0;
}


/* ---------- cards ---------- */
.grid { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); text-align: left; }
.grid.g2 { grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); }
.grid.g4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.card { background: var(--bg-card); padding: 20px 22px; }
.card h4 {
  font-family: var(--display); margin: 3px 0 5px;
  font-size: 19px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.25;
}
.card .blurb { font-family: var(--text); font-size: 13.5px; font-weight: 600;
               color: var(--fg-muted); margin: 0 0 12px; }
.card p { max-width: none; margin-left: 0; margin-right: 0; }
.card ul { margin: 0; padding-left: 16px; font-size: 15.5px; color: var(--fg); }
.card li { margin-bottom: 5px; }
.card .tag { font-size: 12px; color: var(--accent-ink); }
.card .cardp { font-size: 15.5px; color: var(--fg); line-height: 1.62; margin: 0; }
/* a card with two paragraphs (the consensus and ARIMA baselines) keeps a gap between them */
.card .cardp + .cardp { margin-top: 10px; }

/* ---------- tables ---------- */
.tablewrap {
  overflow-x: auto; border: 1px solid var(--border);
  text-align: left; margin: 0 auto;
}
table { border-collapse: collapse; width: 100%; min-width: 540px; font-family: var(--text); font-size: 14.5px; }
table.narrow { min-width: 0; }
thead th {
  text-align: left; font-size: 10.5px; color: var(--fg-muted); font-weight: 600;
  padding: 11px 12px; border-bottom: 2px solid var(--fg);
  background: var(--bg-soft); white-space: nowrap;
}
tbody td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr.ref td { background: var(--bg-soft); }
/* caption row separating the two panels of the leaderboard */
tbody tr.grouphdr td {
  background: var(--bg-soft); border-bottom: 1px solid var(--border);
  border-top: 2px solid var(--fg); padding: 9px 16px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--fg-muted);
}
tbody tr.grouphdr:first-child td { border-top: none; }
tbody tr.lead td { background: var(--accent-soft); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.score { font-variant-numeric: tabular-nums; }
.score.pos { color: var(--pos); font-weight: 700; }
.score.neg { color: var(--neg); font-weight: 600; }
.ci { color: var(--fg-faint); font-size: 13px; font-variant-numeric: tabular-nums; }
.rank { color: var(--fg-faint); font-size: 13px; font-variant-numeric: tabular-nums; }
.kind {
  display: inline-block; font-size: 9.5px; letter-spacing: .07em;
  padding: 2px 6px; border: 1px solid var(--border);
  color: var(--fg-muted); margin-left: 8px; vertical-align: 1px;
}
.kind.llm   { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.kind.human { color: var(--warm-ink);   border-color: color-mix(in srgb, var(--warm) 45%, var(--border)); }
/* in the narrow column the name must not wrap; the note under it may */
.rowname { font-weight: 600; white-space: nowrap; }
.rownote { display: block; font-size: 12.5px; color: var(--fg-faint); font-weight: 400; }

/* bar cell */
.barcell { width: 22%; min-width: 110px; }
.bartrack { position: relative; height: 18px; background: var(--bg-soft); }
.barzero { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--fg-faint); }
.bar { position: absolute; top: 3px; height: 12px; }
.bar.pos { background: var(--accent); }
.bar.neg { background: var(--warm); }

/* the theme matrix column heads carry real words, so they are set as text
   rather than as the agate labels used elsewhere in the table heads */
table.themetable thead th {
  font-size: 13px; text-transform: none; letter-spacing: 0;
  color: var(--fg); font-weight: 600; padding-top: 13px; padding-bottom: 13px;
}

/* the matrix has four numeric columns, so the longest arm names may wrap
   here; in the leaderboard, which has room, .rowname stays on one line */
table.themetable .rowname { white-space: normal; }

/* theme matrix: one cell per model x theme */
td.cell { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cellbar { display: block; height: 3px; margin-top: 4px; background: var(--border); position: relative; }
.cellbar i { position: absolute; top: 0; height: 3px; }
.cellbar i.pos { background: var(--accent); }
.cellbar i.neg { background: var(--warm); }


/* ---------- figures ---------- */
figure { margin: 0 auto 28px; }
figure img { width: 100%; height: auto; display: block; border: 1px solid var(--border); background: #fff; }
figure.plain img { border: none; background: none; }
/* the pipeline figure sits directly under the banner, so it and its note are
   part of the hero: centred, and the note keeps the standfirst's size */
/* Figure 1 is drawn inline (vector shapes + real text, rebuilt from the paper's
   figure1.pptx by tools/build_figure1.py) in the site's own type and palette:
   titles in the display serif, everything else Libre Franklin, bars and
   baselines on the page tokens, so it follows the theme like the charts do.
   It breaks out of the text column to min(1020px, viewport - 52px), centred
   on the column, which is itself centred on the page; below 712px it is the
   column width. The drawing fills 96% of the SVG box -- the rest is invisible
   left padding that keeps the timeline block on the page's centre line. */
.hero-fig {
  --figw: min(1020px, 100vw - 52px);
  width: var(--figw);
  margin: 48px 0 0 calc(50% - var(--figw) / 2);
}
.hero-fig .fig1 { width: 100%; height: auto; display: block; }
/* class names are prefixed: the page's own .note (and any other short name)
   would otherwise reach into the SVG and restyle its text */
.fig1 .f1-panel     { fill: var(--bg); }
.fig1 text          { font-family: var(--text); fill: var(--fg); }
.fig1 text.f1-serif { font-family: var(--display); }
.fig1 text.f1-bar   { fill: var(--bg); }        /* on a filled bar, so it inverts with it */
.fig1 text.f1-note  { fill: var(--fg-muted); }  /* the cadence notes */
/* the line-art icons are black on transparent; flip them with the theme.
   .f1-brand (the Polymarket mark) keeps its own colour. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fig1 .f1-ink { filter: invert(1); }
}
.hero-fig figcaption {
  font-size: 19px; line-height: 1.5; color: var(--fg);
  text-align: center; margin: 16px auto 0; max-width: 44em;
}
figcaption {
  font-family: var(--text); font-size: 14.5px; color: var(--fg-muted);
  margin: 12px 0 0; line-height: 1.6; text-align: left;
}
figcaption b { color: var(--fg); font-weight: 600; }

/* ---------- misc ---------- */
pre {
  background: var(--bg-soft); border: 1px solid var(--border);
  padding: 16px 18px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px;
  line-height: 1.6; color: var(--fg); margin: 0; text-align: left;
}
.note {
  font-family: var(--text); font-size: 14px; color: var(--fg-muted);
  line-height: 1.6; margin: 12px 0 20px;
}
footer {
  padding: 34px 0 56px; font-family: var(--text); font-size: 13.5px;
  color: var(--fg-muted); border-top: 1px solid var(--border);
}
footer a { color: var(--fg-muted); }
footer a:hover { color: var(--accent-ink); }
footer .sep { color: var(--border); padding: 0 4px; }

/* ---------------------------------------------------------------- charts --
   The line figures are drawn as inline SVG from data/series.json instead of
   shipped as PNGs, so they inherit the page's type and respond to the theme.

   The series palette is the paper's own model palette, so a model reads the
   same colour here as in the figures. Each has a lightened dark-mode twin:
   the mid-tones that sit well on white go muddy on near-black. */
:root {
  --s-purple:  #8f63b8;
  --s-slate:   #7488b8;
  --s-gold:    #c47f17;
  --s-teal-lt: #5aa9a9;
  --s-blue:    #4a6b8a;
  --s-olive:   #6b8a4a;
  --s-brown:   #a37c52;
  --s-grey:    #868d99;
  --s-rose:    #b5567a;   /* the Claude Code agent arm: purple/slate are Qwen's */
  --grid: #e6e9ee;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --s-purple:  #b48fd8;
    --s-slate:   #9aabd4;
    --s-gold:    #e0a341;
    --s-teal-lt: #7fcaca;
    --s-blue:    #7f9fbf;
    --s-olive:   #9cbb72;
    --s-brown:   #c9a179;
    --s-grey:    #9aa1ad;
    --s-rose:    #d489a8;
    --grid: #2a2f38;
  }
}
/* No :root[data-theme="dark"] twin on purpose: the page's own tokens (see the
   :root block above) support only the media query, so adding one here would let
   the chart colours flip to their dark variants while the page stayed light. */

figure.chartfig { margin: 0 auto 30px; }
svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
svg.chart .grid   { stroke: var(--grid); stroke-width: 1; }
svg.chart .axis   { stroke: var(--fg-muted); stroke-width: 1.2; }
/* zero is break-even on the betting charts and the consensus line on scores,
   so it is drawn heavier than a gridline but lighter than a series */
svg.chart .zero   { stroke: var(--fg-faint); stroke-width: 1.4; }
svg.chart .marker { stroke: var(--fg-faint); stroke-width: 1.4; stroke-dasharray: 5 4; }
svg.chart text    { font-family: var(--text); }
/* numbers line up column-wise, the same way every other figure on the page
   sets them (.score, .ci, td.num, td.cell, .livestrip b) */
svg.chart .ylab, svg.chart .xlab { font-variant-numeric: tabular-nums; }
svg.chart .ylab   { font-size: 12px; fill: var(--fg-muted); text-anchor: end; }
svg.chart .xlab   { font-size: 12px; fill: var(--fg-muted); text-anchor: middle; }
svg.chart .axlab  { font-size: 12.5px; fill: var(--fg-muted); text-anchor: middle; }
svg.chart .markerlab { font-size: 11px; fill: var(--fg-faint); }
/* direct end-labels rather than a legend box — the paper figures label lines
   in place, and it removes a colour-matching step for the reader */
svg.chart .endlab { font-size: 12.5px; font-weight: 600; dominant-baseline: middle; }

@media (max-width: 560px) {
  svg.chart .endlab, svg.chart .ylab, svg.chart .xlab { font-size: 15px; }
}

/* --- hover readout ------------------------------------------------------
   A strip under the chart, the same width as it, rather than a box floating
   over it: with eight series a stacked tooltip was taller than the plot it
   described. Laid out horizontally the same values wrap to two or three short
   lines. It rests on the final value of every series, so it reads as a summary
   when nobody is hovering, and the fixed position means the page never
   reflows. The numbers are the plotted points themselves -- the same rounded,
   downsampled values already in series.json. */
.chartbox { position: relative; }
.chartbox .readout {
  margin-top: 10px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-soft);
  padding: 8px 11px;
  font-family: var(--text); font-size: 12px; line-height: 1.55;
  color: var(--fg);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 15px;
}
.chartbox .readout .rx {
  font-weight: 700; font-variant-numeric: tabular-nums;
  min-width: 4.6em;
}
.chartbox .readout .ri { display: inline-flex; align-items: baseline; gap: 5px; }
.chartbox .readout .ri i {
  width: 8px; height: 8px; border-radius: 2px; flex: none;
  position: relative; top: 1px;
}
.chartbox .readout .rn { color: var(--fg-muted); }
.chartbox .readout .ri b { font-weight: 600; font-variant-numeric: tabular-nums; }

svg.chart .hoverline { stroke: var(--fg-faint); stroke-width: 1; stroke-dasharray: 3 3; }
svg.chart .hoverdot  { stroke: var(--bg); stroke-width: 1.6; }

/* one series per line on a phone, where a wrapped row turns into a jumble */
@media (max-width: 520px) {
  .chartbox .readout { display: block; font-size: 13px; }
  .chartbox .readout .ri { display: flex; justify-content: space-between; }
  .chartbox .readout .rn { flex: 1; }
}

/* ---- month tabs ----------------------------------------------------------
   Pickers above the leaderboard and above each LiveBetting chart: the
   aggregate first, then the months newest to oldest. The strip scrolls
   sideways instead of wrapping, so it stays one line however many months
   accumulate, and the aggregate tab is sticky at the left edge so it is
   always in reach. Teal, in the accent family: outline chips at rest, the
   selected one filled with the ink tone (var(--bg) text, never a literal
   white -- --accent-ink inverts with the theme). */
.tabs {
  display: flex; flex-wrap: nowrap; gap: 6px; margin: 0 0 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  padding: 2px 2px 6px;
  -webkit-overflow-scrolling: touch;
}
.tab {
  flex: none;
  font-family: var(--text); font-size: 12.5px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
  padding: 6px 10px; border-radius: 3px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  background: var(--bg-card); color: var(--accent-ink);
  transition: .15s;
}
.tab:hover { background: var(--accent-soft); border-color: var(--accent-ink); }
.tab[aria-selected="true"] {
  background: var(--accent-ink); border-color: var(--accent-ink); color: var(--bg);
}
.tab.first { position: sticky; left: 0; z-index: 1; box-shadow: 0 0 0 3px var(--bg); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
figure.chartfig .tabs { margin-bottom: 10px; }
/* a market with no Polymarket round for the chosen month keeps its slot */
.chartempty {
  border: 1px dashed var(--border); border-radius: 4px; padding: 28px 16px;
  font-family: var(--text); font-size: 13.5px; color: var(--fg-faint); text-align: center;
}