/* Benchmarks UI — shared styles. Rides the site design system (styles.css). */

.bz-wrap { max-width: 1080px; margin: 0 auto; }

/* ── data-viz tokens (validated against --bg-surface #151518) ── */
:root {
  --viz: #3987e5;                       /* sequential blue, dark step */
  --viz-track: rgba(57,135,229,.14);
  --viz-lo: #0d366b;                    /* ramp low (recedes to surface) */
  --viz-hi: #cde2fb;                    /* ramp high */
  --st-good: #0ca30c;
  --st-warn: #fab219;
  --st-serious: #ec835a;
  --st-critical: #d03b3b;
}

/* ── stat tiles ── */
.bz-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 22px 0; }
.bz-tile {
  border: 1px solid var(--rule-mid); border-radius: var(--r-lg);
  background: var(--bg-surface); padding: 14px 16px;
}
.bz-tile .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-46); }
.bz-tile .val { font-family: var(--sans); font-weight: 500; font-size: 26px; color: var(--fg); margin-top: 6px; }
.bz-tile .sub { font-family: var(--body); font-size: 12px; color: var(--fg-46); margin-top: 2px; }

/* ── tables ── */
.bz-tablewrap { overflow-x: auto; border: 1px solid var(--rule-mid); border-radius: var(--r-lg); background: var(--bg-surface); }
table.bz { width: 100%; border-collapse: collapse; font-family: var(--body); font-size: 13.5px; color: var(--fg-78); }
table.bz th {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-46); text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap; cursor: pointer; user-select: none;
}
table.bz th.nosort { cursor: default; }
table.bz th .dir { color: var(--fg-92); }
table.bz td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
table.bz tbody tr:last-child td { border-bottom: 0; }
table.bz tbody tr.bz-click { cursor: pointer; }
table.bz tbody tr.bz-click:hover td { background: rgba(220,219,216,.03); }
table.bz td.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.bz-model { color: var(--fg-92); font-weight: 500; }
.bz-dim { color: var(--fg-46); font-size: 12px; }

/* ── in-cell meter (single-hue; track = same ramp, receded) ── */
.bz-meter { display: flex; align-items: center; gap: 9px; min-width: 130px; }
.bz-meter .track { flex: 1; height: 8px; background: var(--viz-track); border-radius: 0 4px 4px 0; overflow: hidden; }
.bz-meter .fill { height: 100%; background: var(--viz); border-radius: 0 4px 4px 0; }
.bz-meter .v { font-variant-numeric: tabular-nums; color: var(--fg-92); font-size: 13px; min-width: 34px; text-align: right; }

/* ── chips / badges (never color-alone: dot + text) ── */
.bz-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-62); border: 1px solid var(--rule-mid); border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.bz-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-32); }
.bz-chip.good .dot { background: var(--st-good); }
.bz-chip.warn .dot { background: var(--st-warn); }
.bz-chip.serious .dot { background: var(--st-serious); }
.bz-chip.viz .dot { background: var(--viz); }

/* ── heatmap ── */
.bz-heat { display: flex; gap: 2px; }
.bz-heat .cell {
  width: 26px; height: 20px; border-radius: 3px; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 9.5px; font-variant-numeric: tabular-nums;
}
.bz-scale { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; color: var(--fg-46); margin: 10px 0 0; }
.bz-scale .bar { width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--viz-lo), var(--viz), var(--viz-hi)); }

/* ── detail panels ── */
.bz-detail td { background: var(--bg-deep); }
.bz-story { border-left: 2px solid var(--viz); padding: 8px 0 8px 14px; margin: 10px 0; }
.bz-story h4 { font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--fg-92); margin-bottom: 3px; }
.bz-story p { font-size: 13px; color: var(--fg-62); line-height: 1.55; margin: 3px 0; }
.bz-story .scores { font-family: var(--mono); font-size: 11px; color: var(--fg-46); }

/* ── quality × speed scatter ── */
.bz-chart { border: 1px solid var(--rule-mid); border-radius: var(--r-lg); background: var(--bg-surface); padding: 18px; margin: 22px 0; }
.bz-chart h3 { font-family: var(--display); font-weight: 400; font-size: 19px; color: var(--fg); margin-bottom: 2px; }
.bz-chart .sub { font-family: var(--body); font-size: 12.5px; color: var(--fg-46); margin-bottom: 10px; }
.bz-chart svg { width: 100%; height: auto; display: block; }
.bz-chart text { font-family: "JetBrains Mono", monospace; font-size: 10px; fill: rgba(200,198,194,.62); }
.bz-chart text.pt-label { font-family: "Inter", sans-serif; font-size: 11px; fill: rgba(232,230,226,.86); }
.bz-chart line.grid { stroke: rgba(220,219,216,.07); stroke-width: 1; }
.bz-chart line.axis { stroke: rgba(220,219,216,.16); stroke-width: 1; }

/* ── tooltip ── */
.bz-tip {
  position: fixed; z-index: 50; pointer-events: none; max-width: 320px;
  background: var(--bg-raised); border: 1px solid var(--rule-strong); border-radius: 8px;
  padding: 9px 11px; font-family: var(--body); font-size: 12.5px; color: var(--fg-78); line-height: 1.45;
  box-shadow: 0 8px 28px rgba(0,0,0,.5); display: none;
}
.bz-tip b { color: var(--fg-92); font-weight: 500; }

/* ── section furniture ── */
.bz-h2 { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); color: var(--fg); margin: 34px 0 6px; }
.bz-note { font-family: var(--body); font-size: 13px; color: var(--fg-46); line-height: 1.6; max-width: 720px; margin-bottom: 14px; }
.bz-updated { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-32); }

/* ── run selector ── */
.bz-runs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.bz-runbtn {
  font-family: var(--mono); font-size: 11px; color: var(--fg-62); background: none;
  border: 1px solid var(--rule-mid); border-radius: 999px; padding: 6px 13px; cursor: pointer;
}
.bz-runbtn.on { color: var(--fg); border-color: var(--viz); background: rgba(57,135,229,.10); }

/* ── index page cards ── */
.bz-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .bz-cards { grid-template-columns: 1fr; } }
.bz-card {
  display: block; border: 1px solid var(--rule-mid); border-radius: var(--r-lg);
  background: var(--bg-surface); padding: 20px; text-decoration: none;
}
.bz-card:hover { border-color: var(--rule-strong); }
.bz-card h3 { font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--fg); }
.bz-card .tag { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-46); }
.bz-card .mini { margin-top: 14px; }
.bz-card .mini .row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--rule); }
.bz-card .mini .rank { font-family: var(--mono); font-size: 10px; color: var(--fg-32); width: 14px; }
.bz-card .mini .nm { flex: 1; font-family: var(--body); font-size: 13px; color: var(--fg-78); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-card .mini .sc { font-family: var(--mono); font-size: 12px; color: var(--fg-92); font-variant-numeric: tabular-nums; }
.bz-card .go { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-92); }

.bz-queue { border: 1px solid var(--rule-mid); border-radius: var(--r-lg); background: var(--bg-surface); }
.bz-queue .qrow { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.bz-queue .qrow:last-child { border-bottom: 0; }
.bz-queue .pos { font-family: var(--mono); font-size: 11px; color: var(--fg-32); width: 18px; }
.bz-queue .nm { flex: 1; min-width: 220px; font-family: var(--body); font-size: 14px; color: var(--fg-92); }
.bz-queue .exp { font-family: var(--mono); font-size: 11px; color: var(--fg-46); font-variant-numeric: tabular-nums; }
.bz-queue a { color: var(--fg-46); font-size: 12px; }