@import url("https://use.typekit.net/bsk0vur.css");

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

:root {
  /* popcorn palette: red + warm yellow on white, near-black body text */
  --g: #901010;        /* primary brand red (was green; var name kept for diff sanity) */
  --w: #ffffff;
  --fg: #1a1a1a;
  --r: #ab1313;        /* fail / alert red */
  --y: #b08900;        /* warn / amber */
  --soft: #f8de8d;     /* warm yellow accent */
  --g08: rgba(248,222,141,0.40);   /* soft yellow panel */
  --g15: rgba(144,16,16,0.15);
  --g35: rgba(144,16,16,0.35);
  --t: 80ms ease;
  --max: 1100px;
  --mono: "calling-code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display: "neue-kabel", "calling-code", ui-sans-serif, system-ui, sans-serif;
}

html { background: var(--w); }
body {
  background: var(--w); color: var(--fg);
  font-family: var(--mono);
  font-size: 15px; line-height: 1.6; min-height: 100vh;
}
a { color: var(--r); text-decoration: none; }
a:hover { opacity: 0.65; }

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

header { border-bottom: 1px solid var(--g); }
header .page-wrap { padding-top: 36px; padding-bottom: 24px; }
.site-title {
  font-family: var(--display);
  font-weight: 900; font-style: normal; font-size: 48px;
  letter-spacing: -0.025em; line-height: 0.95; margin-bottom: 6px;
  color: var(--g);
}
.site-title a { text-decoration: none; color: var(--g); }
.site-title a::before { content: "↑ "; opacity: 0.45; font-size: 28px; vertical-align: middle; }
.site-title a:hover { opacity: 0.7; }
.site-subtitle { font-size: 13px; opacity: 0.55; font-style: italic; color: var(--g); }
.header-links { margin-top: 12px; display: flex; gap: 14px; font-size: 12px; font-style: italic; }
.header-links a { opacity: 0.55; text-decoration: none; }
.header-links a:hover { opacity: 1; }
.header-links .meta { opacity: 0.32; }

/* sitemap nav — appears on every page so any (variant, model) is one click away */
.sitemap {
  border-bottom: 1px solid var(--g15);
  background: var(--g08);
  font-size: 11px;
}
.sitemap .page-wrap { padding-top: 10px; padding-bottom: 10px; }
.sitemap .group { margin-right: 18px; display: inline-block; }
.sitemap .grp-label {
  font-style: italic; opacity: 0.55;
  letter-spacing: 0.06em; margin-right: 6px;
}
.sitemap a {
  text-decoration: none; opacity: 0.75;
  margin-right: 8px;
}
.sitemap a:hover { opacity: 1; }
.sitemap a.current { opacity: 1; font-weight: 500; text-decoration: underline; }

/* summary stats */
.stat-row {
  display: flex; gap: 0; border-bottom: 1px solid var(--g);
}
.stat {
  flex: 1; padding: 18px 20px; border-right: 1px solid var(--g15);
}
.stat:last-child { border-right: none; }
.stat-label {
  font-size: 11px; font-style: italic; opacity: 0.45;
  letter-spacing: 0.07em; margin-bottom: 4px;
}
.stat-val { font-size: 22px; letter-spacing: -0.01em; }
.stat-val.ok { color: #2d6a4f; }
.stat-val.bad { color: var(--r); }

/* model rollup table */
.model-table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
}
.model-table th, .model-table td {
  padding: 9px 14px; text-align: left;
  border-bottom: 1px solid var(--g15); font-size: 13px;
}
.model-table th {
  font-weight: 500; font-size: 11px; font-style: italic;
  letter-spacing: 0.07em; opacity: 0.55;
  border-bottom: 1px solid var(--g);
}
.model-table tr:hover td { background: var(--g08); }
.model-table a { text-decoration: none; }

/* card grid */
.tool-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--g); gap: 1px; padding-bottom: 1px;
  margin-top: 18px;
}
.tool-card {
  background: var(--w); padding: 14px 16px; cursor: pointer;
  transition: background var(--t), color var(--t);
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: var(--g);
}
.tool-card:hover { background: var(--g); color: var(--w); }
.card-top { display: flex; align-items: baseline; gap: 8px; }
.card-name { font-size: 13px; letter-spacing: -0.01em; }
.card-meta { font-size: 11px; opacity: 0.45; font-style: italic; margin-left: auto; }

.outcome-badge {
  font-size: 10px; padding: 1px 6px; border: 1px solid currentColor;
  letter-spacing: 0.04em; font-style: italic; opacity: 0.7;
}
.outcome-correct { color: #2d6a4f; }
.outcome-incorrect { color: var(--y); }
.outcome-compile_fail { color: var(--r); }
.outcome-error { color: var(--r); }
.outcome-skipped { opacity: 0.45; }
.outcome-unknown { opacity: 0.4; }
.outcome-pending { color: var(--g); opacity: 0.55; font-style: italic; }
.outcome-in_progress { color: var(--g); font-style: italic; }
.outcome-in_progress::after { content: " ●"; animation: blink 1.4s infinite; }
@keyframes blink { 0%,50%,100% { opacity: 1; } 25%,75% { opacity: 0.25; } }

.card-row { display: flex; gap: 8px; align-items: baseline; }
.card-runtime { font-size: 11px; opacity: 0.55; font-style: italic; }
.card-speedup { font-size: 11px; }
.speedup-pos { color: #2d6a4f; }
.speedup-neg { color: var(--y); }

/* trajectory page */
.tldr {
  background: var(--g08); border: 1px solid var(--g15);
  padding: 16px 18px; margin: 18px 0;
}
.tldr-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-top: 8px;
}
.tldr-cell .l { font-size: 10px; opacity: 0.45; font-style: italic; letter-spacing: 0.07em; }
.tldr-cell .v { font-size: 14px; }

/* popcorn stress re-eval (reval_popcorn_stress_sweep) */
.stress-block {
  border: 1px solid var(--g15); margin: 18px 0; background: var(--w);
}
.stress-block > summary {
  padding: 10px 14px; cursor: pointer; font-size: 12px;
  background: var(--g08); border-bottom: 1px solid var(--g15);
}
.stress-inner { padding: 12px 14px 16px; font-size: 13px; }
.stress-line { display: flex; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.stress-line .l { font-size: 10px; opacity: 0.45; font-style: italic; min-width: 140px; }
.stress-line .v { font-family: ui-monospace, monospace; font-size: 12px; word-break: break-all; }
.stress-errors { margin: 12px 0; font-size: 12px; }
.stress-errors ul { margin: 6px 0 0 18px; }
.stress-warn { color: var(--y); font-size: 12px; margin: 8px 0; }
.stress-tier-table { margin-top: 12px; }

/* extended metrics block */
.metrics {
  border: 1px solid var(--g15); margin: 18px 0;
}
.metrics-section {
  border-bottom: 1px solid var(--g15);
}
.metrics-section:last-child { border-bottom: none; }
.metrics-section > .metrics-head {
  background: var(--g08); padding: 8px 14px; font-size: 11px;
  font-style: italic; letter-spacing: 0.07em; opacity: 0.7;
  display: flex; justify-content: space-between; align-items: baseline;
}
.metrics-section > .metrics-head .src {
  font-size: 10px; opacity: 0.55;
}
.metrics-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--g15);
}
.metric {
  background: var(--w); padding: 8px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.metric .l { font-size: 10px; opacity: 0.45; font-style: italic; letter-spacing: 0.07em; }
.metric .v { font-size: 13px; }
.metric .v.muted { opacity: 0.45; font-style: italic; }
.metric .v.ratio-good { color: #2d6a4f; }
.metric .v.ratio-bad { color: var(--y); }

/* sweep-wide rollup table */
.metrics-rollup {
  width: 100%; border-collapse: collapse; margin: 0 0 6px 0;
}
.metrics-rollup td {
  padding: 9px 14px; font-size: 12px;
  border-bottom: 1px solid var(--g15);
}
.metrics-rollup td:first-child {
  width: 38%; opacity: 0.55; font-style: italic;
}

.turn {
  border-top: 1px solid var(--g15); padding: 16px 0;
}
.turn-head {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 12px; opacity: 0.7; margin-bottom: 8px;
}
.turn-head .turn-id { font-size: 13px; opacity: 1; }
.turn-head .turn-tokens {
  opacity: 0.9; white-space: normal; font-variant-numeric: tabular-nums;
}

details { margin: 6px 0; }
details > summary {
  cursor: pointer; font-size: 12px; opacity: 0.65;
  list-style: none; padding: 4px 0;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸ "; opacity: 0.5; }
details[open] > summary::before { content: "▾ "; }

.block {
  background: var(--g08); border-left: 2px solid var(--g35);
  padding: 8px 12px; margin: 4px 0;
  white-space: pre-wrap; word-break: break-word;
  font-size: 12px;
}
.block.tool-args { border-left-color: var(--g); }
.block.tool-out { border-left-color: #2d6a4f; }
.block.tool-out.fail { border-left-color: var(--r); }
.block.reasoning { border-left-color: var(--y); font-style: italic; opacity: 0.85; }
.block.assistant { border-left-color: var(--g); }

/* reference-PyTorch source on the trajectory page */
.ref-source { margin: 18px 0; border: 1px solid var(--g15); }
.ref-source > summary {
  background: var(--g08); padding: 10px 14px;
  font-size: 12px; font-style: italic; opacity: 0.75;
  letter-spacing: 0.04em; cursor: pointer;
}
.ref-source pre {
  margin: 0; padding: 12px 16px; max-height: 480px; overflow: auto;
  white-space: pre; font-size: 11px; line-height: 1.4;
  background: var(--w); border-top: 1px solid var(--g15);
}

/* whole-turn collapse for long turns */
.turn-collapse { border-top: 1px solid var(--g15); }
.turn-collapse > summary {
  padding: 12px 0; cursor: pointer; font-size: 13px; opacity: 0.85;
}
.turn-collapse[open] > summary { opacity: 1; }
.turn-collapse > summary::before { content: "▸ "; opacity: 0.5; }
.turn-collapse[open] > summary::before { content: "▾ "; }

/* tier-picker — cross-tier nav for the same problem */
.tier-picker {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 6px;
  font-size: 12px;
}
.tier-picker-label {
  font-style: italic; opacity: 0.55; letter-spacing: 0.06em;
  margin-right: 4px;
}
.tier-tab {
  padding: 4px 12px; border: 1px solid var(--g35);
  text-decoration: none; color: var(--g);
  font-size: 13px; transition: background var(--t), color var(--t);
}
.tier-tab:hover { background: var(--soft); }
.tier-tab.current {
  background: var(--g); color: var(--bg); border-color: var(--g);
  font-weight: 600;
}
.tier-tab.disabled {
  opacity: 0.32; cursor: not-allowed; font-style: italic;
}

/* AlphaEvolve evolution log */
.ae-progress {
  border: 1px solid var(--g35); margin: 18px 0;
  background: var(--soft); /* warm yellow accent so it stands out */
}
.ae-progress > summary {
  padding: 12px 16px; cursor: pointer; font-size: 13px;
  border-bottom: 1px solid var(--g35);
}
.ae-progress[open] > summary { border-bottom: 1px solid var(--g35); }
.ae-list { padding: 8px 12px; background: var(--w); }
.ae-cand { margin: 4px 0; }
.ae-cand > summary {
  padding: 6px 4px; font-size: 12px; display: flex; gap: 10px;
  align-items: center; flex-wrap: wrap;
}
.ae-idx { font-weight: 500; opacity: 0.85; }
.ae-meta { font-size: 11px; opacity: 0.55; font-style: italic; margin-left: auto; }

.role-tag {
  display: inline-block;
  font-size: 10px; padding: 0 5px; margin-right: 6px;
  border: 1px solid currentColor; letter-spacing: 0.04em;
  font-style: italic; opacity: 0.6; vertical-align: middle;
}

@media (max-width: 900px) {
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-row { flex-direction: column; }
  .stat { border-right: none; border-bottom: 1px solid var(--g15); }
}