/* Benchmark page: a ranking in the shape of the Chia VDF results on
   OpenBenchmarking (machine, percentile, results, average with error), with
   the speed drawn as a bar behind its number. One stat strip, one table that
   scrolls inside its own panel so the page itself does not. */
.bench { display: flex; flex-direction: column; gap: .75rem; }
.bench .stats { margin-bottom: 0; }
.bench .stat { flex: 1 1 200px; padding: .5rem .9rem; }
.bench .stat-value { font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; }
.bench .stats > .stat:first-child .stat-value { color: var(--accent); }
.bench-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: .15rem 1rem; margin: 0; }
.bench-heading h2 { margin: 0; }
.bench-heading .stat-sub { margin: 0; }
.bench-heading .bench-since { margin-left: auto; font-variant-numeric: tabular-nums; }
.bench-empty { max-width: 34rem; }

.bench-panel {
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow); overflow: auto; max-height: calc(100vh - 16.5rem); min-height: 9rem;
}
.bench-table { min-width: 640px; font-size: .86rem; }
.bench-table th { position: sticky; top: 0; z-index: 1; background: var(--surface); padding: .45rem .75rem; }
.bench-table td { padding: .34rem .75rem; }
.bench-table th.num, .bench-table td.num { text-align: right; }
.bench-table .bench-name { max-width: 24rem; overflow: hidden; text-overflow: ellipsis; }

/* Speed: the bar is drawn behind the figure, full width is the fastest */
.bench-table .bench-speed-h, .bench-table td.bench-speed { width: 38%; min-width: 14rem; }
td.bench-speed { position: relative; }
.bench-bar {
  position: absolute; left: .75rem; top: 50%; height: 62%; transform: translateY(-50%);
  max-width: calc(100% - 1.5rem); border-radius: 4px; background: rgb(var(--ink-rgb) / .1);
}
tbody tr:first-child .bench-bar { background: rgb(194 87 12 / .22); }
.bench-val { position: relative; font-weight: 600; padding-left: .45rem; }
.bench-val small { font-weight: 400; font-size: .76rem; color: var(--ink-dim); }

/* A median marker between rows, as the tier rows are on the reference */
tr.bench-median td { padding: 0; height: 0; border-bottom: 0; position: relative; }
tr.bench-median td span {
  display: block; padding: .12rem .75rem; font-size: .72rem; color: var(--ink-dim);
  background: rgb(var(--ink-rgb) / .04); border-top: 1px dashed var(--line-strong); border-bottom: 1px dashed var(--line-strong);
}
tbody tr.bench-median:hover td { background: none; }

tr.bench-you td { background: rgb(194 87 12 / .06); }
.bench-tag {
  display: inline-block; margin-left: .3rem; padding: 0 .4rem; border-radius: 999px;
  font-size: .68rem; font-weight: 600; color: var(--link); background: rgb(194 87 12 / .12);
}

@media (max-width: 640px) {
  .bench .stat { flex-basis: 45%; min-width: 0; }
  .bench-panel { max-height: none; overflow: visible; }
  .bench-table { min-width: 0; }
  .bench-table thead { display: none; }
  .bench-table tbody tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .1rem .6rem;
    padding: .5rem .75rem; border-bottom: 1px solid var(--rule);
  }
  .bench-table td { border: 0; padding: .1rem 0; white-space: normal; }
  .bench-table td.num, .bench-table td { text-align: left; }
  .bench-table td::before { content: attr(data-label); display: block; font-size: .68rem; color: var(--ink-dim); }
  .bench-table td.bench-name { grid-column: 1 / -1; font-weight: 600; max-width: none; }
  .bench-table td.bench-name::before { display: none; }
  .bench-table td.bench-speed { grid-column: 1 / -1; width: auto; min-width: 0; padding: .2rem 0 .3rem; }
  .bench-table td.bench-speed::before { display: none; }
  .bench-bar { left: 0; }
  .bench-val { padding-left: .35rem; }
  .bench-table td[data-label="#"] { display: none; }
  tr.bench-median td { display: block; grid-column: 1 / -1; }
  tr.bench-median { display: block; padding: 0; }
  tr.bench-median td::before { display: none; }
}