/* /benchmarks/ — one-pager. Tokens, nav and footer come from /styles.css.
   No per-run table on purpose: the raw numbers live upstream in the llmfit
   community dataset, this page carries the evidence that they were measured and
   reviewed, plus the ask. */

/* Tall viewports: the two bottom panels sit ON the fold, which is what makes the
   ask land without scrolling. Short ones scroll normally rather than clip, the
   mistake the home page used to make. */
body.bench-page { display: flex; flex-direction: column; min-height: 100dvh; }
.bench {
  flex: 1 1 auto; display: flex; flex-direction: column;
  width: 100%; max-width: var(--content-max); margin: 0 auto; box-sizing: border-box;
  padding: clamp(18px, 3.4vh, 34px) var(--gutter) 0;
}
.bench__push { flex: 1 1 auto; min-height: clamp(18px, 4vh, 54px); }

/* ─── Hero + figures ─── */
.bench__top { display: flex; gap: clamp(24px, 5vw, 56px); align-items: flex-start; flex-shrink: 0; }
.bench__intro { flex: 1 1 auto; min-width: 0; }
.kicker {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin: 0;
}
.bench__title {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em;
  line-height: 1.18; font-size: clamp(22px, 2.4vw, 28px); color: var(--text);
  margin: 9px 0 11px;
}
.bench__lead { max-width: 58ch; font-size: clamp(12.5px, 1.5vh, 13.5px); line-height: 1.6; color: var(--text-dim); margin: 0; }

.figures {
  flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 140px));
  gap: 14px 24px; margin: 4px 0 0; padding: 0; list-style: none;
}
.figures li { border-top: 2px solid var(--text); padding-top: 8px; }
.figures b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 2.2vw, 25px); line-height: 1; letter-spacing: -.01em; color: var(--text);
}
.figures span {
  display: block; margin-top: 5px; font-family: var(--font-mono); font-weight: 500;
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim);
}

/* ─── Rule row: label, hairline, github badge, state pills ─── */
.rule { display: flex; align-items: center; gap: 12px; margin: clamp(20px, 3.4vh, 30px) 0 14px; flex-wrap: wrap; }
.rule__line { flex: 1 1 40px; height: 1px; background: var(--border-2); }
.ghbadge {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px;
  border: 1px solid var(--border-2); border-radius: 999px; background: var(--surface);
  font-family: var(--font-mono); font-weight: 600; font-size: 11.5px; color: var(--text);
  text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease;
}
.ghbadge:hover { border-color: var(--teal); box-shadow: var(--shadow-soft); text-decoration: none; }
.ghbadge svg { width: 13px; height: 13px; flex: none; }
.pill {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.pill--merged { background: #ecfdf5; color: #047857; }
.pill--open { background: var(--teal-soft); color: #0369a1; font-weight: 500; }

/* ─── Vendor coverage board ─── */
.vendors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 14px; padding: 0; list-style: none; }
.vendors li { display: flex; }
.vendor {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 10px 14px; border-radius: var(--radius-sm); box-sizing: border-box;
  font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .02em;
  color: var(--text); text-decoration: none;
}
.vendor--tested { background: var(--surface); border: 1px solid var(--border); }
.vendor--wanted { background: transparent; border: 1px dashed var(--border-2); }
.vendor--wanted:hover { border-color: var(--teal); background: var(--teal-soft); text-decoration: none; }
.vendor__note { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; }
.vendor--tested .vendor__note { color: #047857; }
.vendor--wanted .vendor__note { color: var(--teal); }

/* ─── Upstream pull requests ─── */
.prlist { margin: 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.prlist li + li { border-top: 1px solid var(--surface-2); }
.pr { display: flex; align-items: center; gap: 18px; padding: 8px 16px; text-decoration: none; font-family: var(--font-mono); font-size: 11.5px; }
.pr:hover { background: var(--surface-2); text-decoration: none; }
.pr__num { flex: none; width: 38px; color: var(--text-mute); }
.pr__gpu { flex: none; width: 104px; display: flex; align-items: center; gap: 5px; font-weight: 600; color: var(--pr-colour, var(--teal)); }
.pr__gpu--code { font-weight: 500; color: var(--text-mute); }
.pr__mark { flex: none; height: 11px; width: auto; }
.pr__mark path { fill: currentColor; }
.pr__label { flex: 1 1 auto; min-width: 0; font-family: var(--font-body); font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr__date { flex: none; color: var(--text-mute); }
.pr__state { flex: none; width: 62px; text-align: center; padding: 2px 0; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: .04em; }

/* ─── Bottom panels ─── */
.bench__cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 48px); flex-shrink: 0; }
.bench__cols h2 { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text); margin: 0 0 8px; }
.bench__cols p { font-size: 12.5px; line-height: 1.55; color: var(--text-dim); margin: 0 0 8px; }
.wanted { border-left: 3px solid var(--teal); padding-left: 18px; }
.wanted__targets { font-family: var(--font-mono); font-size: 10.5px; color: #0e7490; }
.wanted__cta { font-size: 12.5px; font-weight: 600; margin: 0; }
.method p { font-size: 12px; color: var(--text-mute); }
.method ol { margin: 0; padding-left: 18px; columns: 2; column-gap: 32px; font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }
.method li { margin-bottom: 5px; break-inside: avoid; }
.method li::marker { color: var(--teal); }
.method code { font-family: var(--font-mono); font-size: 11px; }

.bench__foot {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; flex-shrink: 0;
  margin-top: clamp(16px, 2.6vh, 24px); padding: 12px 0;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11px; color: var(--text-mute);
}
.bench__foot .grow { flex: 1 1 auto; }

/* ─── Narrow ─── */
@media (max-width: 900px) {
  .bench__top { flex-direction: column; gap: 20px; }
  .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .bench__cols { grid-template-columns: 1fr; }
  .method ol { columns: 1; }
}
@media (max-width: 620px) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vendors { grid-template-columns: repeat(2, 1fr); }
  .pr { flex-wrap: wrap; gap: 6px 12px; }
  .pr__label { flex: 1 1 100%; order: 3; white-space: normal; }
  .pr__date { display: none; }
  .rule__line { display: none; }
}

/* Vendor mark sits with the name, brand colour only when the card was measured. */
.vendor__id { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.vendor__mark { flex: none; height: 15px; width: auto; }
.vendor--wanted .vendor__id { color: var(--text-mute); }
.vendor--wanted .vendor__id > span { color: var(--text-dim); }