/* 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); }

/* ── Q&A accordion ── */
details.bz-qa {
  border: 1px solid var(--rule-mid); border-radius: var(--r-lg);
  background: var(--bg-surface); margin-bottom: 8px;
}
details.bz-qa summary {
  cursor: pointer; padding: 12px 16px; list-style: none;
  display: flex; align-items: baseline; gap: 10px; min-width: 0;
}
details.bz-qa summary::-webkit-details-marker { display: none; }
details.bz-qa summary .qn { font-family: var(--mono); font-size: 11px; color: var(--fg-92); flex-shrink: 0; }
details.bz-qa summary .qa-axis { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-46); flex-shrink: 0; }
details.bz-qa summary .qa-snip { font-family: var(--body); font-size: 13px; color: var(--fg-62); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.bz-qa[open] summary .qa-snip { display: none; }
details.bz-qa .qa-body { padding: 0 16px 14px; }
details.bz-qa .qa-q { font-family: var(--body); font-size: 13.5px; font-style: italic; color: var(--fg-46); line-height: 1.6; margin-bottom: 10px; max-width: 720px; }
details.bz-qa .qa-a { font-family: var(--body); font-size: 14px; color: var(--fg-78); line-height: 1.65; white-space: pre-wrap; max-width: 720px; }

/* ── run selector ── */
.bz-runs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.bz-runs-group { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: center; }
.bz-runs-group + .bz-runs-group { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--rule); }
.bz-runs-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-46); width: 100%; margin-bottom: 2px;
}
.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;
  display: inline-flex; align-items: center; gap: 7px;
}
.bz-runbtn.on { color: var(--fg); border-color: var(--viz); background: rgba(57,135,229,.10); }
.bz-runbtn.ft { border-color: rgba(143,180,216,.45); color: var(--fg-78); }
.bz-runbtn.ft.on { border-color: #8fb4d8; background: rgba(143,180,216,.12); color: var(--fg); }
.bz-chip.ft { color: #8fb4d8; border-color: rgba(143,180,216,.4); }
.bz-chip.ft .dot { background: #8fb4d8; }
.bz-chip.grok { color: #f07a6a; border-color: rgba(240,122,106,.45); }
.bz-chip.grok .dot { background: #f07a6a; }
table.bz tbody tr.ft td { background: rgba(143,180,216,.04); }
table.bz tbody tr.ft:hover td { background: rgba(143,180,216,.08); }
table.bz tbody tr.ft-active td { box-shadow: inset 3px 0 0 #8fb4d8; }
table.bz tbody tr.sel td { box-shadow: inset 3px 0 0 var(--viz); }
table.bz tbody tr.ft.sel td { box-shadow: inset 3px 0 0 #8fb4d8; }
.bz-qa-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 8px 16px; margin: 4px 0 2px;
}
.bz-qa-head .who { font-family: var(--sans); font-size: 15px; color: var(--fg-92); font-weight: 500; }
.bz-qa-head .meta { font-family: var(--mono); font-size: 11px; color: var(--fg-46); }

/* ── index page cards ── */
.bz-cards { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
@media (max-width: 820px) { .bz-cards { grid-template-columns: minmax(0,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; min-width: 0; font-family: var(--body); font-size: 13px; color: var(--fg-78); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-card .mini .sc { flex-shrink: 0; }
.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; }

/* ── bottom sheet (touch-friendly detail popover; bench.js) ── */
.bz-sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45); display: none; }
.bz-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  background: var(--bg-raised); border-top: 1px solid var(--rule-strong);
  border-radius: 14px 14px 0 0;
  padding: 12px var(--pad-x) calc(20px + env(safe-area-inset-bottom));
  max-height: 62vh; overflow-y: auto; display: none;
  font-family: var(--body); font-size: 13.5px; color: var(--fg-78); line-height: 1.55;
  box-shadow: 0 -12px 40px rgba(0,0,0,.5);
}
.bz-sheet b { color: var(--fg-92); font-weight: 500; }
.bz-sheet .grab { width: 36px; height: 4px; border-radius: 2px; background: var(--fg-20); margin: 0 auto 12px; }
.bz-sheet.open, .bz-sheet-backdrop.open { display: block; }

/* ── mobile: tables reflow to stacked cards (mark tables with .rsp) ── */
@media (max-width: 620px) {
  .bz-meter { min-width: 0; }
  .bz-queue .nm { min-width: 140px; }

  table.bz.rsp, table.bz.rsp tbody, table.bz.rsp tr, table.bz.rsp td { display: block; width: 100%; }
  table.bz.rsp thead { display: none; }
  table.bz.rsp tbody tr { padding: 11px 14px; border-bottom: 1px solid var(--rule); }
  table.bz.rsp tbody tr:last-child { border-bottom: 0; }
  table.bz.rsp td { border-bottom: 0; padding: 3px 0; }
  table.bz.rsp td.rk { display: none; }             /* rank column: order is visual */
  table.bz.rsp td[data-label] { display: flex; align-items: center; gap: 10px; }
  table.bz.rsp td[data-label]::before {
    content: attr(data-label);
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--fg-46); min-width: 76px; flex-shrink: 0;
  }
  table.bz.rsp td.num { text-align: left; }
  table.bz.rsp tr.bz-detail { background: var(--bg-deep); }
  table.bz.rsp tr.bz-detail td { padding: 8px 0 4px; }

  /* heatmap: bigger touch targets, wrapping strip */
  .bz-heat { flex-wrap: wrap; gap: 3px; }
  .bz-heat .cell { width: 31px; height: 28px; font-size: 10px; cursor: pointer; }

  .bz-chart { padding: 14px; }
  .bz-tile .val { font-size: 22px; }
}
.bz-heat .cell { cursor: pointer; }                 /* tappable at every size */