/* Jcode benchmarks: shares the main site's aesthetic:
   JetBrains Mono, monochrome, one green accent, generous whitespace. */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-700.woff2") format("woff2");
}

:root {
  --ink: #111;
  --muted: #666;
  --faint: #999;
  --rule: #ccc;
  --wash: #f4f4f4;
  --bg: #fff;
  --green: #37b24d;
  --green-soft: #d3f0da;
  --pass: #37b24d;
  --fail: #d24b4b;
  --infra: #d9a441;
  --radius: 8px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 960px; margin: 0 auto; padding: 0 1.5rem 6rem; }

a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--green); }

/* ---- Top nav / breadcrumb ---- */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 0 8px; font-size: 13px; color: var(--faint);
}
.topbar a { color: var(--muted); text-decoration: none; }
.topbar a:hover { color: var(--green); }
.topbar .sep { color: var(--rule); }
.topbar .spacer { flex: 1; }

/* ---- Headings ---- */
.eyebrow { color: var(--faint); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin: 40px 0 6px; }
h1 { font-size: 2.1rem; letter-spacing: -0.02em; margin: 0 0 8px; }
h2 { font-size: 1.25rem; letter-spacing: -0.01em; margin: 56px 0 4px; }
h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--faint); margin: 28px 0 10px; font-weight: 700; }
.lede { color: var(--muted); max-width: 62ch; margin: 0 0 8px; }
.sub { color: var(--faint); font-size: 13px; margin: 4px 0; }
hr { border: none; border-top: 1px solid var(--rule); margin: 40px 0; }

/* ---- Badges / pills ---- */
.pill {
  display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: 20px;
  border: 1px solid var(--rule); color: var(--muted); white-space: nowrap;
}
.pill.green { color: var(--green); border-color: var(--green); }
.pill.warn { color: var(--infra); border-color: var(--infra); }
.badge-projected {
  display: inline-block; font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px; background: repeating-linear-gradient(
    45deg, var(--wash), var(--wash) 5px, #ececec 5px, #ececec 10px);
  color: var(--infra); border: 1px solid var(--infra);
}

/* ---- Note / validity banner ---- */
.note {
  background: var(--wash);
  padding: 12px 16px; border-radius: var(--radius);
  margin: 18px 0; font-size: 13px; color: var(--muted);
}
.note strong { color: var(--ink); }

/* ---- Scoreboard cards ---- */
.scoreboard { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 20px 0; }
.score-card {
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px 22px;
  text-decoration: none; color: inherit; display: block; transition: border-color .15s, transform .15s;
}
.score-card:hover { border-color: var(--green); transform: translateY(-2px); }
.score-card .name { font-size: 13px; color: var(--muted); }
.score-card .big { font-size: 40px; font-weight: 700; letter-spacing: -1px; line-height: 1.1; margin: 6px 0 2px; }
.score-card .delta { font-size: 13px; }
.delta.up { color: var(--green); }
.delta.down { color: var(--fail); }
.score-card .foot { color: var(--faint); font-size: 12px; margin-top: 12px; display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 680px) { .scoreboard { grid-template-columns: 1fr; } }

/* ---- Stat row ---- */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 18px 0; }
.stat { border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px; }
.stat .n { font-size: 22px; font-weight: 700; }
.stat .l { font-size: 11px; color: var(--faint); margin-top: 2px; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---- Charts ---- */
.chart { border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px; margin: 14px 0; }
.chart svg { display: block; width: 100%; height: auto; }
.legend { display: flex; gap: 18px; font-size: 12px; color: var(--muted); margin-top: 10px; flex-wrap: wrap; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.glyph-diamond { transform: rotate(45deg); display: inline-block; width: 8px; height: 8px; margin-right: 5px; vertical-align: middle; }

/* ---- Comparison bars ---- */
.bars { margin: 16px 0; }
.bar-row { display: grid; grid-template-columns: 220px 1fr 56px; align-items: center; gap: 12px; margin: 9px 0; }
.bar-label { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-label.you { color: var(--ink); font-weight: 700; }
.bar-track { background: var(--wash); border-radius: 4px; height: 22px; position: relative; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; background: var(--rule); transition: width .5s ease; }
.bar-fill.you { background: var(--green); }
.bar-fill.hatch { background: repeating-linear-gradient(45deg, var(--rule), var(--rule) 5px, #dedede 5px, #dedede 10px); }
.bar-val { font-size: 13px; text-align: right; color: var(--muted); }
.bar-val.you { color: var(--green); font-weight: 700; }

/* ---- Config matrix ---- */
.matrix-controls { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.toggle {
  font-family: inherit; font-size: 12px; padding: 5px 12px; border-radius: 20px;
  border: 1px solid var(--rule); background: var(--bg); color: var(--muted); cursor: pointer;
}
.toggle.active { border-color: var(--green); color: var(--green); }

/* ---- Tables ---- */
table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
th { color: var(--faint); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; cursor: pointer; user-select: none; white-space: nowrap; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--wash); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.dot.pass { background: var(--pass); }
.dot.fail { background: var(--fail); }
.dot.infra { background: var(--infra); }
/* Timed-out trials: passed anyway (green core, amber ring) vs failed (red core, amber ring) */
.dot.pass-timeout { background: var(--pass); box-shadow: 0 0 0 2px var(--infra); }
.dot.timeout-fail { background: var(--fail); box-shadow: 0 0 0 2px var(--infra); }
tr.infra td { color: var(--faint); }
.heat { display: block; border-radius: 4px; padding: 6px 8px; text-align: center; font-variant-numeric: tabular-nums; }
code { background: var(--wash); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.mono-faint { color: var(--faint); }
footer { color: var(--faint); font-size: 12px; margin-top: 64px; border-top: 1px solid var(--rule); padding-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .bar-fill, .score-card { transition: none; }
}