/* FA-Bench Track 2 leaderboard, the chart on /news/fa-bench-leaderboard/.

   Each bar takes its organization's colour from ORGS in leaderboard.js, and a
   logo sits under it. Only Olign wears the site's purple, --primary in
   overrides.css. 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(1080px, calc(100vw - 48px));
  margin-left: calc(50% - min(540px, 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;
  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[aria-pressed="true"] {
  background: var(--fab-ink);
  color: #ffffff;
}
.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: 700;
  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: 700; 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:nth-child(2) { 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); }
.fab-lb table.fab-lb__tbl caption {
  caption-side: bottom;
  padding-top: 6px;
  text-align: left;
  font-size: 12px;
  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. */
@media (max-width: 480px) {
  .fab-lb { padding: 16px 14px 14px; }
  .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; }
}