/* STT bench additions on top of the shared bench styles.css (same tokens, light + dark). */
:root {
  --heat-good: #e3f4e3;
  --heat-ok: #eef6d9;
  --heat-mid: #fdf0d2;
  --heat-bad: #fbe1df;
  --ins: #fbe1df;
  --del: #fdf0d2;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --heat-good: #1d3a1f; --heat-ok: #2c3a1b; --heat-mid: #3d3218; --heat-bad: #44201e; --ins: #44201e; --del: #3d3218;
  }
}
:root[data-theme="dark"] {
  --heat-good: #1d3a1f; --heat-ok: #2c3a1b; --heat-mid: #3d3218; --heat-bad: #44201e; --ins: #44201e; --del: #3d3218;
}

.answer { font-size: 17px; line-height: 1.55; max-width: 860px; }
.answer b { font-weight: 650; }
.explain { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.explain div { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.explain b { color: var(--text-primary); display: block; margin-bottom: 2px; }

.chip.r-good .dot { background: var(--good); }
.chip.r-ok .dot { background: #7cbf3a; }
.chip.r-average .dot { background: var(--warning); }
.chip.r-bad .dot { background: var(--critical); }

td.heat { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
td.heat.h-good { background: var(--heat-good); }
td.heat.h-ok { background: var(--heat-ok); }
td.heat.h-mid { background: var(--heat-mid); }
td.heat.h-bad { background: var(--heat-bad); }
td.heat small { display: block; font-weight: 500; font-size: 11px; color: var(--text-muted); }
tr.few td { opacity: .72; }

.wer-bar { display: flex; align-items: center; gap: 8px; min-width: 160px; }
.wer-bar .track { flex: 1; height: 10px; background: var(--track); border-radius: 4px; position: relative; overflow: hidden; }
.wer-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--series-1); border-radius: 0 4px 4px 0; }
.wer-bar span.v { width: 52px; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }

.clip { border-top: 1px solid var(--line); padding: 12px 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; }
.clip:first-child { border-top: 0; }
.clip .lines { display: grid; grid-template-columns: 64px 1fr; gap: 4px 10px; font-size: 14px; line-height: 1.5; }
.clip .who { color: var(--text-muted); font-size: 12px; padding-top: 2px; }
.clip .facts { text-align: right; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.clip .facts b { color: var(--text-primary); }
mark.miss { background: var(--del); color: inherit; border-radius: 3px; padding: 0 2px; }
mark.extra { background: var(--ins); color: inherit; border-radius: 3px; padding: 0 2px; }
.pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 10px; }

.hist { width: 100%; }
.hist .bar-a { fill: var(--series-1); }
.hist .bar-b { fill: var(--series-2); opacity: .75; }
.note { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.note code { font-family: var(--mono); font-size: 12px; background: var(--surface-2); padding: 1px 4px; border-radius: 4px; }
.prose { max-width: 820px; line-height: 1.6; }
.prose h2 { margin-top: 26px; }
.prose li { margin: 4px 0; }
@media (max-width: 720px) {
  .clip { grid-template-columns: 1fr; }
  .clip .facts { text-align: left; }
}