leaderboard.css

/* Copyright 2026 Olewave, LLC
   SPDX-License-Identifier: Apache-2.0 */

/* FA-Bench leaderboards, the ASR (Track 2) and forced alignment (Track 1)
   boards, on words and on phones. The leaderboard page shows all three boards
   in one card, as ranked tables, with the task and tier switches at its top
   right.

   Each bar takes its organization's colour from ORGS in leaderboard.js. A
   withdrawn system's row has no bar. Text stays in the site's inks, never in
   a bar colour.

   Coloured marks are <i> and <b>, never <span>. overrides.css clears the
   background of every span inside a .blog-article__body li or p. It also
   rounds and spaces every article <img>, so the logo images undo that. */

.fab-lb,
.fab-lb *,
.fab-lb *::before,
.fab-lb *::after { box-sizing: border-box; }

.fab-lb {
  --fab-accent: #5f3bff;
  --fab-ink: #0a0a0a;
  --fab-text: #222222;
  --fab-text-2: #646464;
  --fab-rule: #e5e5e5;
  --fab-chip: #f2f2ee;
  position: relative;
  margin: 1.6em 0;
  padding: 20px 20px 16px;
  background: #ffffff;
  border: 1px solid var(--fab-rule);
  border-radius: 16px;
  color: var(--fab-text);
  font-size: 14px;
  line-height: 1.45;
}

/* Wider than the 720px reading column on a desktop, centred on it, and never
   wider than the viewport less a gutter. */
.fab-lb--wide {
  width: min(1240px, calc(100vw - 48px));
  /* inline-start, so a right-to-left page widens toward the same side */
  margin-inline-start: calc(50% - min(620px, 50vw - 24px));
}

.fab-lb .fab-lb__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
}
.fab-lb .fab-lb__heading { flex: 1 1 280px; min-width: 0; }
.fab-lb .fab-lb__title {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fab-ink);
  text-wrap: balance;
}
.fab-lb .fab-lb__sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--fab-text-2);
}

.fab-lb .fab-lb__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.fab-lb .fab-lb__seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--fab-chip);
  border-radius: 999px;
}
.fab-lb .fab-lb__seg button {
  appearance: none;
  border: 0;
  margin: 0;
  background: transparent;
  color: var(--fab-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.fab-lb .fab-lb__seg button:hover { color: var(--fab-ink); }
.fab-lb .fab-lb__seg button:disabled { opacity: .45; cursor: default; }
.fab-lb .fab-lb__seg button:disabled:hover { color: inherit; }
/* The systems filter is the quieter control, a white thumb on the chip. */
.fab-lb .fab-lb__seg button[aria-pressed="true"] {
  background: #ffffff;
  color: var(--fab-ink);
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.14);
}

/* The task, tier and transcript switches choose the board. They sit in one
   left-aligned row at the top left of the table, each after a short label. */
.fab-lb .fab-lb__switches {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 10px 22px;
  margin-top: 16px;
}
.fab-lb .fab-lb__switch { display: inline-flex; align-items: center; gap: 8px; }
.fab-lb .fab-lb__switch[hidden] { display: none; }
.fab-lb .fab-lb__switch-label { font-size: 13px; font-weight: 600; color: var(--fab-text-2); white-space: nowrap; }
.fab-lb .fab-lb__switch-ctl { display: inline-flex; align-items: center; gap: 6px; }
/* The "i" after Forced alignment, small and quiet in the switch labels' grey.
   Its text shows on hover, on keyboard focus and on a tap. */
.fab-lb .fab-lb__info { position: relative; display: inline-flex; }
.fab-lb .fab-lb__info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: var(--fab-text-2);
  font: 700 11px/1 Georgia, 'Times New Roman', serif;
  cursor: help;
}
.fab-lb .fab-lb__info-btn:focus-visible,
.fab-lb .fab-lb__info.is-open .fab-lb__info-btn { color: var(--fab-ink); }
.fab-lb .fab-lb__info-tip {
  display: none;
  position: absolute;
  z-index: 6;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid var(--fab-rule);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(10, 10, 10, 0.12);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--fab-text);
  text-align: left;
  white-space: normal;
}
.fab-lb .fab-lb__info-btn:focus-visible + .fab-lb__info-tip,
.fab-lb .fab-lb__info.is-open .fab-lb__info-tip { display: block; }
/* Hover only where there is one. A touch screen keeps a tapped element
   hovered, which would hold the text open after a second tap. */
@media (hover: hover) {
  .fab-lb .fab-lb__info:hover .fab-lb__info-tip { display: block; }
  .fab-lb .fab-lb__info-btn:hover { color: var(--fab-ink); }
}
.fab-lb .fab-lb__seg--switch button {
  font-size: 14px;
  font-weight: 600;
  padding: 9px 14px;
}
/* The chosen board shows in the site's purple, 5.9:1 under white text. */
.fab-lb .fab-lb__seg--switch button[aria-pressed="true"] {
  background: var(--fab-accent);
  color: #ffffff;
  box-shadow: none;
}
.fab-lb .fab-lb__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.fab-lb .fab-lb__toolbar .fab-lb__controls { width: 100%; justify-content: space-between; }

/* Until the script draws the card, the page's plain tables stand in for it,
   for a reader without JavaScript. With the script they never show, and the
   card keeps its height so the text below does not jump. */
.fab-lb { scroll-margin-top: 96px; }
.fab-lb.is-js > .fab-lb__static { display: none; }
.fab-lb.is-js:not(.is-ready) { min-height: 720px; }
.fab-lb .fab-lb__static + .fab-lb__static { margin-top: 24px; }
.fab-lb .fab-lb__static h2 { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--fab-ink); }
.fab-lb .fab-lb__static .fab-lb__table-wrap { overflow-x: auto; }
.fab-lb .fab-lb__seg button { white-space: nowrap; }
.fab-lb .fab-lb__count {
  margin-left: 6px;
  color: inherit;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}
.fab-lb .fab-lb__cell select {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 1px solid var(--fab-rule);
  border-radius: 999px;
  padding: 7px 32px 7px 14px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.2;
  color: var(--fab-text);
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23646464' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  cursor: pointer;
}
.fab-lb button:focus-visible,
.fab-lb select:focus-visible,
.fab-lb summary:focus-visible,
.fab-lb .fab-lb__row:focus-visible,
.fab-lb a:focus-visible {
  outline: 2px solid var(--fab-accent);
  outline-offset: 2px;
}

.fab-lb img.fab-lb__logo-img {
  display: block;
  flex: none;
  max-width: none;
  margin: 0;
  padding: 1px;
  border: 1px solid var(--fab-rule);
  border-radius: 4px;
  background: #ffffff;
  object-fit: contain;
}
.fab-lb img.fab-lb__logo-img.is-mark { padding: 2px; }
.fab-lb .fab-lb__mono {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #ffffff;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
}

.fab-lb .fab-lb__plot { position: relative; margin-top: 10px; }
/* FA-Bench's mark in the empty top-right corner of the upright chart, where
   the lowest bars leave room. It sits under the tooltip, and the one row per
   system layout, which has no free corner, leaves it out. */
.fab-lb .fab-lb__plot:has(svg.fab-lb__svg)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 78px;
  height: 72px;
  background: #ffffff url("logos/fa-bench.png") no-repeat center / contain;
  pointer-events: none;
}
.fab-lb svg.fab-lb__svg { display: block; overflow: visible; }
.fab-lb .fab-lb__grid { stroke: var(--fab-rule); stroke-width: 1; shape-rendering: crispEdges; }
.fab-lb .fab-lb__base { stroke: #a3a3a3; stroke-width: 1; shape-rendering: crispEdges; }
.fab-lb .fab-lb__tick,
.fab-lb .fab-lb__axis {
  fill: var(--fab-text-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.fab-lb .fab-lb__value {
  fill: var(--fab-ink);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fab-lb .fab-lb__label { fill: var(--fab-text); font-size: 12px; }
.fab-lb .fab-lb__fill { transition: opacity 120ms ease; }
.fab-lb svg.has-hover .fab-lb__fill:not(.is-hover) { opacity: 0.28; }
.fab-lb .fab-lb__label.is-hover { fill: var(--fab-ink); font-weight: 600; }
.fab-lb .fab-lb__tile { fill: #ffffff; stroke: var(--fab-rule); stroke-width: 1; }
.fab-lb .fab-lb__mono-text { fill: #ffffff; font-weight: 600; letter-spacing: -0.02em; }
.fab-lb .fab-lb__hit { fill: transparent; cursor: default; }

/* Narrow screens get one row per system, read top to bottom. */
.fab-lb .fab-lb__rows { display: grid; gap: 7px; }
.fab-lb .fab-lb__row {
  display: grid;
  grid-template-columns: 1.7em minmax(0, 11em) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 13px;
  border-radius: 6px;
}
.fab-lb .fab-lb__rank {
  font-weight: 500;
  color: var(--fab-text-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fab-lb .fab-lb__name {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.fab-lb .fab-lb__track { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fab-lb .fab-lb__bar {
  display: block;
  flex: none;
  height: 14px;
  border-radius: 0 4px 4px 0;
}
.fab-lb .fab-lb__val {
  font-size: 12px;
  font-weight: 600;
  color: var(--fab-ink);
  font-variant-numeric: tabular-nums;
}

.fab-lb .fab-lb__tip {
  position: absolute;
  z-index: 5;
  width: 252px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid var(--fab-rule);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(10, 10, 10, 0.12);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--fab-text);
  pointer-events: none;
}
.fab-lb .fab-lb__tip[hidden] { display: none; }
.fab-lb .fab-lb__tip-head { display: flex; align-items: center; gap: 8px; }
.fab-lb .fab-lb__tip-name { font-weight: 700; color: var(--fab-ink); }
.fab-lb .fab-lb__tip-org { font-size: 12px; color: var(--fab-text-2); }
.fab-lb .fab-lb__tip-kind { color: var(--fab-text-2); margin-top: 6px; }
.fab-lb .fab-lb__tip-main {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 700;
  color: var(--fab-ink);
  font-variant-numeric: tabular-nums;
}
.fab-lb .fab-lb__tip-main small { font-size: 12px; font-weight: 500; color: var(--fab-text-2); margin-left: 6px; }
.fab-lb .fab-lb__tip-grid {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 2px 14px;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.fab-lb .fab-lb__tip-grid div:nth-child(3n+1) { color: var(--fab-text-2); }
.fab-lb .fab-lb__tip-grid div:nth-child(3n+2),
.fab-lb .fab-lb__tip-grid div:nth-child(3n) { text-align: right; }
.fab-lb .fab-lb__tip-grid div:nth-child(-n+3) { color: var(--fab-text-2); font-size: 11.5px; }
.fab-lb .fab-lb__tip-note {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--fab-rule);
  color: var(--fab-text-2);
}

.fab-lb .fab-lb__notes,
.fab-lb .fab-lb__source {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fab-text-2);
}
.fab-lb .fab-lb__notes div + div { margin-top: 2px; }
.fab-lb .fab-lb__source a { color: var(--fab-ink); }

.fab-lb .fab-lb__table { margin-top: 12px; }
.fab-lb .fab-lb__table summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--fab-ink);
}
.fab-lb .fab-lb__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fab-lb table.fab-lb__tbl {
  width: 100%;
  min-width: 760px;
  margin: 10px 0 0;
  border-collapse: collapse;
  font-size: 13px;
}
.fab-lb table.fab-lb__tbl th,
.fab-lb table.fab-lb__tbl td {
  border: 1px solid var(--fab-rule);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}
.fab-lb table.fab-lb__tbl th { background: #f7f7f3; font-weight: 600; }
.fab-lb table.fab-lb__tbl th,
.fab-lb table.fab-lb__tbl td { white-space: nowrap; }
.fab-lb table.fab-lb__tbl td.fab-lb__sys-cell { white-space: normal; min-width: 11em; }
.fab-lb table.fab-lb__tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.fab-lb table.fab-lb__tbl .is-sorted { font-weight: 700; color: var(--fab-ink); }
/* A system that no longer takes part, listed unranked after the ranked rows. */
.fab-lb table.fab-lb__tbl tr.is-withdrawn td { color: var(--fab-text-2); background: #fafaf7; font-weight: 400; }
.fab-lb table.fab-lb__tbl tr.is-withdrawn:first-of-type td,
.fab-lb table.fab-lb__tbl tr:not(.is-withdrawn) + tr.is-withdrawn td { border-top: 2px solid var(--fab-rule); }
.fab-lb table.fab-lb__tbl caption {
  caption-side: bottom;
  padding-top: 6px;
  text-align: left;
  font-size: 12px;
  color: var(--fab-text-2);
}
/* The worked Drop example under a forced alignment table, in the caption's font. */
.fab-lb .fab-lb__drop { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--fab-text-2); }
.fab-lb .fab-lb__sys { display: flex; align-items: flex-start; gap: 8px; }
.fab-lb .fab-lb__sys > img,
.fab-lb .fab-lb__sys > b { margin-top: 2px; }
.fab-lb .fab-lb__sys-pipe { font-size: 11.5px; color: var(--fab-text-2); }

.fab-lb .fab-lb__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* A phone drops the counts from the buttons so the three still fit on one
   line. The table carries every row. */
/* Below the upright chart's width the switch row wraps, one switch to a line
   across the card, with the labels in a column so the buttons line up. */
@media (max-width: 679px) {
  .fab-lb .fab-lb__heading { flex-basis: auto; }
  .fab-lb .fab-lb__switch { display: flex; flex: 1 1 100%; }
  .fab-lb .fab-lb__switch-label { flex: 0 0 5.6em; }
  .fab-lb .fab-lb__seg--switch { display: flex; flex: 1 1 auto; min-width: 0; }
  .fab-lb .fab-lb__switch-ctl { display: flex; flex: 1 1 auto; min-width: 0; }
  /* The "i" sits at the row's right end here, so its text opens leftward. */
  .fab-lb .fab-lb__info-tip { left: auto; right: -4px; transform: none; width: min(260px, calc(100vw - 48px)); }
  .fab-lb .fab-lb__seg--switch button { flex: 1 1 0; padding: 9px 8px; }
  .fab-lb.is-js:not(.is-ready) { min-height: 1200px; }
}

@media (max-width: 480px) {
  .fab-lb { padding: 16px 14px 14px; }
  /* A label beside the buttons leaves them too little width, so it goes above. */
  .fab-lb .fab-lb__switch { flex-direction: column; align-items: stretch; gap: 4px; }
  .fab-lb .fab-lb__switch-label { flex: none; }
  .fab-lb .fab-lb__seg--switch button { font-size: 13px; }
  .fab-lb .fab-lb__seg button { padding: 8px 10px; }
  .fab-lb .fab-lb__count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fab-lb .fab-lb__fill,
  .fab-lb .fab-lb__seg button { transition: none; }
}

/* The board is the table. The sorted column draws each ranked row's value as a
   bar on the scale of the best value shown, and the mean F1 its 95% interval
   as a capped whisker. Price shows an API's list price per audio hour. */
.fab-lb .fab-lb__table.is-board { margin-top: 12px; }
.fab-lb .fab-lb__barcell { display: flex; align-items: center; gap: 8px; min-width: 12em; }
.fab-lb .fab-lb__barnum { flex: 0 0 5.2em; text-align: right; }
.fab-lb .fab-lb__barnum small { font-size: 12.5px; font-weight: 400; color: var(--fab-text-2); }
/* A withdrawn row gives its interval as text too, with no bar. */
.fab-lb table.fab-lb__tbl tr.is-withdrawn td small { font-size: 12.5px; font-weight: 400; }
.fab-lb .fab-lb__bartrack { position: relative; flex: 1 1 auto; min-width: 4.4em; height: 14px; }
.fab-lb .fab-lb__barfill {
  background: var(--bar); position: absolute; left: 0; top: 1px; bottom: 1px; border-radius: 3px; }
.fab-lb .fab-lb__ci { position: absolute; top: 50%; height: 0; border-top: 1.5px solid var(--fab-ink); }
.fab-lb .fab-lb__ci::before,
.fab-lb .fab-lb__ci::after { content: ''; position: absolute; top: -5px; height: 9px; border-left: 1.5px solid var(--fab-ink); }
.fab-lb .fab-lb__ci::before { left: -0.75px; }
.fab-lb .fab-lb__ci::after { right: -0.75px; }
.fab-lb .fab-lb__open { color: var(--fab-text-2); font-weight: 400; }
/* On the board, a name keeps to one line and a row centres on its bar. The
   table's text is 15px, larger than the notes around it, and a two-word
   heading such as Buckeye noisy wraps so the table fits its card. */
.fab-lb .fab-lb__table.is-board table.fab-lb__tbl th,
.fab-lb .fab-lb__table.is-board table.fab-lb__tbl td { padding: 6px 6px; vertical-align: middle; }
.fab-lb .fab-lb__table.is-board table.fab-lb__tbl td.fab-lb__sys-cell { min-width: 13em; }
.fab-lb .fab-lb__table.is-board .fab-lb__sys-name { white-space: nowrap; }
.fab-lb .fab-lb__table.is-board table.fab-lb__tbl { font-size: 15px; }
.fab-lb .fab-lb__table.is-board table.fab-lb__tbl th { white-space: normal; vertical-align: bottom; }

/* Night, under html[data-theme="dark"], in the palette of the site's dark.css.
   The card takes the surface the site's cards use, and its tokens the site's
   night text and rules. Logos keep their white tiles, since many are drawn
   for white, and the bars take each organization's night colour. */
[data-theme="dark"] .fab-lb {
  --fab-accent: #5f3bff;
  --fab-ink: #f2f2f2;
  --fab-text: #e2e2e2;
  --fab-text-2: #a3a3a3;
  --fab-rule: #2e2e34;
  --fab-chip: #232328;
  background: #1b1b1f;
}
[data-theme="dark"] .fab-lb .fab-lb__seg button[aria-pressed="true"] { background: #3a3a42; box-shadow: none; }
[data-theme="dark"] .fab-lb .fab-lb__seg--switch button[aria-pressed="true"] { background: var(--fab-accent); color: #ffffff; }
[data-theme="dark"] .fab-lb .fab-lb__cell select {
  background: #232328 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a3a3a3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--fab-ink);
}
[data-theme="dark"] .fab-lb table.fab-lb__tbl th { background: #232328; }
[data-theme="dark"] .fab-lb table.fab-lb__tbl tr.is-withdrawn td { background: #202025; }
[data-theme="dark"] .fab-lb .fab-lb__tip { background: #232328; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); }
[data-theme="dark"] .fab-lb .fab-lb__info-tip { background: #232328; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); }
[data-theme="dark"] .fab-lb .fab-lb__barfill { background: var(--bar-night, var(--bar)); }
[data-theme="dark"] .fab-lb .fab-lb__source a,
[data-theme="dark"] .fab-lb .fab-lb__notes a { color: #9b85ff; }