/* Trajectory Viewer: Mercor product theme.
   Tokens extracted from mercor.com's live CSS: Inter, white surfaces on zinc-50,
   indigo-600 #4F46E5 primary, zinc neutral scale, red-600 danger.
   Series colors validated (dataviz): DeepSeek = indigo, Gemini = #E2551F. */

@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --page: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --ink: #18181b;
  --ink-2: #3f3f46;
  --muted: #71717a;
  --grid: #e4e4e7;
  --baseline: #d4d4d8;
  --border: rgba(24, 24, 27, 0.08);
  --m1: #4f46e5;   /* DeepSeek-V4-Pro, Mercor indigo-600 */
  --m2: #e2551f;   /* Gemini-3.6-Flash, Mercor salmon, stepped for 3:1 */
  --link: #4f46e5;
  --good: #16a34a;
  --good-text: #15803d;
  --warning: #f59e0b;
  --serious: #ea580c;
  --critical: #dc2626;
  --violet: #52525b; /* dataset-level magnitude bars stay neutral (models own the hues) */
  --display: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  background: var(--page);
  color: var(--ink-2);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--m1);
  outline-offset: 2px;
}

/* ---------- masthead ---------- */
.masthead {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 28px;
  padding: 0 24px; height: 58px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 26px; height: 26px; flex: none; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-title {
  font-family: var(--display); font-weight: 650; font-size: 15.5px;
  letter-spacing: -0.01em; color: var(--ink);
}
.brand-sub { font-size: 11px; color: var(--muted); letter-spacing: 0.02em; }
.nav { display: flex; gap: 4px; }
.nav a {
  padding: 6px 12px; border-radius: 0; font-size: 13px; color: var(--ink-2);
  letter-spacing: 0.02em;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a.active { background: #eef2ff; color: #4338ca; }
.matchup { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.vs { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.model-key { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.dot.m1 { background: var(--m1); }
.dot.m2 { background: var(--m2); }
.verdict-mini { font-size: 11px; }
.verdict-mini.bad { color: var(--critical); }
.verdict-mini.good { color: var(--good-text); }
@media (max-width: 900px) { .matchup { display: none; } }

/* ---------- layout ---------- */
main { max-width: 1280px; margin: 0 auto; padding: 28px 24px 80px; }
.boot { color: var(--muted); padding: 60px 0; text-align: center; }

.eyebrow {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 11px; font-weight: 600; color: var(--muted);
}
h1.page-title {
  font-family: var(--display); font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink); font-size: 28px; line-height: 1.2;
  margin: 4px 0 6px;
}
.page-lede { color: var(--ink-2); max-width: 72ch; }

section.block { margin-top: 40px; }
.block-head { display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 18px; }
.block-head h2 {
  font-family: var(--display); font-weight: 650;
  letter-spacing: -0.01em; font-size: 15.5px; color: var(--ink);
}
.block-head .hint { font-size: 12px; color: var(--muted); }

/* ---------- stat tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 24px; }
.tile {
  background: var(--surface); border: 1px solid var(--grid); border-radius: 0;
  padding: 14px 16px 12px; box-shadow: var(--shadow-card);
}
.tile .t-label { font-size: 12px; color: var(--muted); letter-spacing: 0.02em; }
.tile .t-value { font-size: 30px; font-weight: 600; color: var(--ink); line-height: 1.2; margin-top: 2px; }
.tile .t-value.hero { font-size: 48px; }
.tile .t-sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.tile .t-sub .chip-mini { margin-right: 4px; }

/* ---------- charts ---------- */
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chart-grid .span2 { grid-column: 1 / -1; }
@media (max-width: 980px) { .chart-grid { grid-template-columns: 1fr; } }
.card {
  background: var(--surface); border: 1px solid var(--grid); border-radius: 0;
  padding: 16px 18px; box-shadow: var(--shadow-card);
}
.card h3 { font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: 0.01em; }
.card .sub { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--ink-2); margin-bottom: 10px; flex-wrap: wrap; }
.legend .key { display: inline-flex; gap: 6px; align-items: center; }
.swatch { width: 10px; height: 10px; border-radius: 0; display: inline-block; }
svg text { font-family: var(--body); }
.chart-svg { display: block; width: 100%; height: auto; }
.bar-hit:hover rect.bar { filter: brightness(1.18); }
.bar-hit { cursor: default; }

/* ---------- tooltip ---------- */
.tooltip {
  position: fixed; z-index: 100; pointer-events: none;
  background: #ffffff; color: var(--ink); border: 1px solid var(--border);
  border-radius: 0; padding: 6px 9px; font-size: 12px; max-width: 340px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10); line-height: 1.4;
}
.tooltip .tt-dim { color: var(--muted); }

/* ---------- filters ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters input[type="search"], .filters select {
  background: var(--surface); color: var(--ink); border: 1px solid var(--border);
  border-radius: 0; padding: 7px 10px; font-size: 13px; font-family: var(--body);
}
.filters input[type="search"] { width: 260px; }
.filters .count { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.filters button.clear {
  background: none; border: 1px solid var(--border); color: var(--ink-2); border-radius: 0;
  padding: 6px 10px; font-size: 12px; cursor: pointer;
}
.filters button.clear:hover { color: var(--ink); border-color: var(--muted); }

/* ---------- pairs table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--grid); border-radius: 0; background: var(--surface); box-shadow: var(--shadow-card); }
table.pairs { border-collapse: collapse; width: 100%; min-width: 980px; font-size: 13px; }
table.pairs th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--border);
  white-space: nowrap; background: var(--surface);
}
table.pairs th.num, table.pairs td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.pairs td { padding: 9px 12px; border-bottom: 1px solid var(--grid); vertical-align: middle; }
table.pairs tbody tr { cursor: pointer; }
table.pairs tbody tr:hover { background: var(--surface-2); }
table.pairs tbody tr:last-child td { border-bottom: none; }
td.pairno { color: var(--muted); font-variant-numeric: tabular-nums; width: 48px; }
td.task .t-name { color: var(--ink); font-weight: 500; font-family: var(--mono); font-size: 12.5px; }
td.task .t-repo { font-size: 11px; color: var(--muted); }
.chip {
  display: inline-block; padding: 2px 8px; border-radius: 0; font-size: 11.5px;
  border: 1px solid var(--border); color: var(--ink-2); white-space: nowrap;
}
.chip.cat { background: var(--surface-2); }
.chip-mini { display: inline-block; padding: 0 6px; border-radius: 0; font-size: 11px; border: 1px solid var(--border); }
.cell-model { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell-model .v { color: var(--ink); }
.cell-model .u { color: var(--muted); font-size: 11px; }
.f2p-bad { color: var(--critical); font-weight: 600; }
.f2p-good { color: var(--good-text); font-weight: 600; }
.dumbbell { display: grid; grid-template-rows: 4px 4px; gap: 2px; width: 130px; }
.dumbbell span { border-radius: 0; height: 4px; display: block; }
.dumbbell .b1 { background: var(--m1); }
.dumbbell .b2 { background: var(--m2); }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink-2); }
th .arr { font-size: 9px; }

/* ---------- taxonomy view ---------- */
.tax-l1 { margin-top: 26px; }
.tax-l1-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.tax-l1-head h2 { font-family: var(--display); letter-spacing: -0.01em; font-size: 16px; color: var(--ink); font-weight: 650; }
.tax-l1-head .n { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.tax-l1-bar { height: 5px; background: var(--baseline); border-radius: 0; overflow: hidden; margin: 6px 0 14px; max-width: 480px; }
.tax-l1-bar span { display: block; height: 100%; background: var(--violet); border-radius: 0; }
details.tax-l2 { border: 1px solid var(--border); border-radius: 0; background: var(--surface); margin-bottom: 8px; overflow: hidden; }
details.tax-l2 > summary {
  cursor: pointer; padding: 10px 14px; display: flex; gap: 10px; align-items: center;
  list-style: none; color: var(--ink); font-weight: 500; font-size: 13.5px;
}
details.tax-l2 > summary::-webkit-details-marker { display: none; }
details.tax-l2 > summary::before { content: "▸"; color: var(--muted); font-size: 11px; transition: transform 0.15s; }
details.tax-l2[open] > summary::before { transform: rotate(90deg); }
details.tax-l2 > summary .n { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.tax-case { border-top: 1px solid var(--grid); padding: 10px 14px 10px 34px; }
.tax-case a.case-link { font-family: var(--mono); font-size: 12.5px; color: var(--link); }
.tax-case a.case-link:hover { text-decoration: underline; }
.tax-case .r { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; max-width: 100ch; }
.tax-def { font-size: 13px; color: var(--ink-2); max-width: 96ch; margin: 2px 0 8px; }
.tax-body { font-size: 13px; color: var(--ink-2); padding: 8px 14px 0 34px; max-width: 100ch; }
.tax-example { color: var(--muted); }
.tax-example .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-right: 6px; }
details.tax-l2 > summary .n { font-weight: 400; }
details.tax-l2.empty > summary { color: var(--muted); }
.tax-l3 { border-top: 1px solid var(--grid); margin-top: 8px; padding: 8px 14px 6px 34px; }
.tax-l3-head { display: flex; gap: 10px; align-items: baseline; }
.tax-l3-head .n { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tax-l3 .tax-body { padding-left: 0; }

/* ---------- pair detail ---------- */
.pairnav { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.pairnav a.btn, a.btn {
  border: 1px solid var(--border); border-radius: 0; padding: 5px 11px; font-size: 12.5px;
  color: var(--ink-2); background: var(--surface); display: inline-block;
}
.pairnav a.btn:hover, a.btn:hover { color: var(--ink); border-color: var(--muted); }
.pairnav .where { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.case-head .task-id { font-family: var(--mono); font-size: 15px; color: var(--link); }
.case-head h1 { margin-bottom: 10px; }
.case-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }

.prompt-box {
  background: var(--surface); border: 1px solid var(--grid);
  border-radius: 0; padding: 14px 16px; white-space: pre-wrap; font-size: 13.5px;
  max-height: 300px; overflow-y: auto; color: var(--ink-2);
}

.verdicts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 860px) { .verdicts { grid-template-columns: 1fr; } }
.verdict-card { border: 1px solid var(--border); border-radius: 0; background: var(--surface); overflow: hidden; }
.verdict-card .vc-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--grid); }
.verdict-card .vc-top .name { font-weight: 600; color: var(--ink); font-size: 14.5px; }
.status-chip {
  margin-left: auto; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 0;
}
.status-chip.fail { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }
.status-chip.pass { color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; }
.vc-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.vc-stats .s { padding: 10px 8px 12px; text-align: center; border-right: 1px solid var(--grid); }
.vc-stats .s:last-child { border-right: none; }
.vc-stats .s .v { font-size: 17px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.vc-stats .s .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.vc-foot { padding: 8px 16px; border-top: 1px solid var(--grid); font-size: 12px; color: var(--muted); display: flex; gap: 14px; }
.vc-error { padding: 8px 16px; border-top: 1px solid var(--grid); font-size: 12px; color: var(--critical); }
.vc-foot a { color: var(--link); }
.vc-foot a:hover { text-decoration: underline; }

.rationale { max-width: 90ch; font-size: 14px; }
.causal { display: grid; grid-template-columns: 180px 1fr; border: 1px solid var(--border); border-radius: 0; overflow: hidden; background: var(--surface); }
.causal .cl { padding: 12px 14px; border-bottom: 1px solid var(--grid); }
.causal .cl:nth-last-child(-n+2) { border-bottom: none; }
.causal .cl.k {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-2);
  border-right: 1px solid var(--grid);
}
.causal .cl.v { font-size: 13.5px; white-space: pre-wrap; }
.causal .cl.v code, .wb-text code, .rationale code, .reasoning-text code { font-family: var(--mono); font-size: 12px; color: var(--ink); background: var(--surface-2); padding: 0 4px; border-radius: 0; }
.reasoning-text strong { color: var(--ink); font-weight: 650; }
@media (max-width: 700px) { .causal { grid-template-columns: 1fr; } .causal .cl.k { border-right: none; } }

/* workblocks */
.wb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 980px) { .wb-cols { grid-template-columns: 1fr; } }
.wb-col-head { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); font-size: 13.5px; margin-bottom: 10px; }
.wb-card {
  border: 1px solid var(--grid);
  background: var(--surface); padding: 10px 14px; margin-bottom: 10px;
}
.wb-card.div { border-color: #fecaca; background: #fef2f2; }
.wb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-name { font-weight: 600; color: var(--ink); font-size: 12.5px; letter-spacing: 0.04em; }
.wb-sub { font-size: 11.5px; color: var(--muted); }
.wb-steps { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wb-steps a { color: var(--link); }
.wb-steps a:hover { text-decoration: underline; }
.wb-badge { font-size: 10.5px; font-weight: 700; color: #b91c1c; background: #fee2e2; padding: 1px 7px; border-radius: 0; letter-spacing: 0.05em; }
.wb-text { font-size: 13px; color: var(--ink-2); margin-top: 6px; white-space: pre-wrap; }

/* trajectory viewer */
.traj-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.traj-tabs button {
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--border);
  border-radius: 0; padding: 8px 16px; font-size: 13px; cursor: pointer; font-family: var(--body);
  display: inline-flex; align-items: center; gap: 8px;
}
.traj-tabs button:hover { color: var(--ink); }
.traj-tabs button.active { color: var(--ink); border-color: var(--muted); background: var(--surface-2); }
.ribbon-wrap { margin-bottom: 6px; }
.ribbon-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 5px; }
.ribbon { display: flex; gap: 2px; height: 22px; }
.ribbon .seg { flex: 1; border-radius: 0; cursor: pointer; min-width: 6px; border: none; padding: 0; }
.ribbon .seg:hover { filter: brightness(1.3); }
.ribbon .seg.div { background: var(--critical); }
.ribbon-blocks { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 18px; font-size: 11.5px; color: var(--ink-2); }
.ribbon-blocks .key { display: inline-flex; gap: 5px; align-items: center; }

.step-card { border: 1px solid var(--border); border-radius: 0; background: var(--surface); margin-bottom: 10px; overflow: hidden; scroll-margin-top: 120px; }
.step-card.flash { box-shadow: 0 0 0 2px var(--m1); }
.step-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--grid); }
.step-no { font-family: var(--display); font-weight: 650; font-size: 13px; color: var(--ink); }
.step-wb { font-size: 11px; padding: 1px 8px; border-radius: 0; border: 1px solid var(--border); color: var(--ink-2); }
.step-wb.div { color: #b91c1c; border-color: #fecaca; }
.step-body { padding: 10px 14px 12px; display: grid; gap: 10px; }
.trace-part .part-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 4px; }
.reasoning-text { font-size: 13px; white-space: pre-wrap; color: var(--ink-2); max-width: 110ch; }
pre.term {
  background: #fafafa; border: 1px solid var(--grid); border-radius: 0;
  padding: 10px 12px; font-family: var(--mono); font-size: 12px; line-height: 1.5;
  overflow-x: auto; white-space: pre-wrap; word-break: break-word; color: #3f3f46;
  max-height: 480px; overflow-y: auto;
}
pre.term.err-out { color: #b91c1c; }
button.expand {
  background: none; border: 1px solid var(--border); color: var(--link); border-radius: 0;
  padding: 3px 10px; font-size: 11.5px; cursor: pointer; margin-top: 6px; font-family: var(--body);
}
button.expand:hover { border-color: var(--link); }
.final-answer { border: 1px solid var(--grid); background: var(--surface); padding: 12px 16px; }
.final-answer .part-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 4px; }
.no-steps { color: var(--muted); padding: 20px; text-align: center; border: 1px dashed var(--grid); border-radius: 0; }

/* tests */
.tests-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 980px) { .tests-cols { grid-template-columns: 1fr; } }
.test-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.test-table td { padding: 6px 10px; border-bottom: 1px solid var(--grid); font-family: var(--mono); font-size: 11.5px; word-break: break-all; }
.test-table td.st { font-family: var(--body); white-space: nowrap; width: 76px; font-weight: 600; font-size: 11.5px; }
.crit-box { border: 1px solid #fecaca; background: #fef2f2; padding: 10px 12px; margin: 10px 0; }
.crit-box .part-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: #b91c1c; margin-bottom: 4px; }
.crit-text { font-size: 13px; color: var(--ink); font-weight: 500; }
.crit-what { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.crit-n { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 4px; }
.crit-tag { display: inline-block; font-size: 10.5px; color: var(--muted); border: 1px solid var(--grid); padding: 0 5px; margin-left: 5px; white-space: nowrap; }
.test-table td .chip-mini { margin-left: 5px; font-size: 10.5px; color: #4338ca; border-color: #c7d2fe; }
.test-table td { white-space: normal; font-family: var(--body); font-size: 12.5px; }
.test-table td.st { font-family: var(--body); }
.st .pass { color: var(--good-text); }
.st .fail { color: var(--critical); }
details.p2p summary { cursor: pointer; font-size: 12.5px; color: var(--ink-2); padding: 6px 0; }
details.p2p summary:hover { color: var(--ink); }

.err { color: var(--serious); padding: 30px; text-align: center; }