/* ==========================================================================
   leaderboard.css — /team-leaderboard (wave 3, 2026-09-04; fixed the same day
   against truth.md and critique.md). Loads after feature-v2.css, feature-v3.css,
   show.css and home.css.

   Reworked 2026-09-05 by the simplify-and-port pass. Four things worth
   knowing before editing:
   1. The board is a port of cloutly-frontend@origin/master LeaderboardV2:
      the page head, the card head, components/Strips.js BasisBanner, and rows
      built the way components/BoardRow.js builds them (rank, a 40px avatar,
      name over job title, metric slots each a value over a caption, and a
      trailing chevron because the whole row is a link). It is a <ul>, not a
      table, because the product's board is not a table and has no header row.
   2. The mentions column is deliberately absent: Board.js:104 renders it only
      when `basis === 'verified'`, and this board's basis is `mentions`, which
      is exactly what the banner above it says.
   3. Nothing in a mock or on the board is under 13px, and muted text inside a
      port is #5b6076.
   4. SWEEP-2026-09-04 B6: the board has no controls. The period pills, the
      location pills and this page's own basis switch are gone, and with them
      the FLIP, the wash and the two-state strip height.
   ========================================================================== */

.lb-page .sec-tight { padding-top: 0; }
.lb-page .lb-lede { max-width: 760px; }
/* the wide lede is followed straight by .cards, which brings no margin of its own, so it carries the section rhythm */
.lb-page .lb-lede.is-wide { margin-bottom: 36px; }
.lb-page .lb-lede .h { text-wrap: balance; }
/* one of the three ledes runs the full column, so three sections do not open with the same block in the same place */
@media (min-width: 992px) {
  .lb-page .lb-lede.is-wide { max-width: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4px 56px; align-items: end; }
  .lb-page .lb-lede.is-wide .sub { padding-bottom: 4px; }
}

/* ---------- hero: the review, and where its credit went ---------- */
.lb-page .m-from { font-size: 13px; }
.lb-page .v2-hero .fine a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.lb-page .v2-hero .fine a:hover { color: var(--ink); }
.lb-review { padding: 18px 20px 20px; }
.lb-stars { margin: 2px 0 8px; font-size: 15px; letter-spacing: 3px; color: #f5a623; }
.lb-review-t { font: 400 15.5px/1.55 var(--font-body); color: var(--ink); }
.lb-credit { padding: 14px 18px; }
.lb-page .lb-av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #3a68f0, var(--blue)); color: #fff; font: 700 14px/1 var(--font-display); }
.lb-credit b { font-weight: 600; }
/* scoped past .lb-av, which is a <span> in the same card */
.lb-credit > div > span { display: block; margin-top: 2px; font: 400 13px/1.4 var(--font-body); color: var(--v2-body); }

/* ==========================================================================
   the board, ported from LeaderboardV2
   ========================================================================== */
.lb-screen { max-width: 960px; margin-top: 34px; }
.lb-page-h { margin-bottom: 14px; }
.lb-h1 { margin: 0; font: 700 20px/1.3 var(--font-display); color: var(--ink); }
.lb-h-sub { margin: 4px 0 0; max-width: 60ch; font: 400 13.5px/1.5 var(--font-body); color: #5b6076; }
.lb-card { border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow); overflow: hidden; }
.lb-card-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 20px; margin: 0; padding: 16px 22px 14px; }
.lb-card-h b { font: 700 16px/1.35 var(--font-display); color: var(--ink); }
.lb-card-h span { font: 500 13px/1.3 var(--font-display); color: #5b6076; }

/* Strips.js BasisBanner: the icon, the sentence, and the chevron that says it navigates */
.lb-basis { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 22px; border-block: 1px solid var(--v2-line); background: var(--ghost); font: 400 13.5px/1.55 var(--font-body); color: #5b6076; }
.lb-basis b { color: var(--ink); font-weight: 600; }
.lb-ic { flex: none; display: grid; place-items: center; color: #5b6076; }
.lb-ic .icon { width: 15px; height: 15px; fill: none; }
.lb-basis .lb-ic { margin-top: 3px; }
.lb-basis .lb-chev { margin-left: auto; }

/* BoardRow.js: rank, avatar, who, the metric flex, the chevron */
.lb-rows { margin: 0; padding: 6px 10px 10px; list-style: none; }
.lb-row { display: grid; grid-template-columns: 34px 40px minmax(0, 1fr) 336px 17px; align-items: center; gap: 14px; padding: 12px; border-radius: 12px; }
.lb-row + .lb-row { border-top: 1px solid #eef0f6; border-radius: 12px; }
.lb-rank { font: 600 15px/1 var(--font-display); color: #5b6076; text-align: center; }
.lb-rank i { display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; font-style: normal; }
.lb-rank i.is-lead { background: #e0e8ff; color: #002499; font-weight: 700; }
.lb-page .lb-row .lb-av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: none; color: #fff; font: 600 15px/1 var(--font-display); }
.lb-who { min-width: 0; }
.lb-name { display: block; font: 700 15.5px/1.3 var(--font-display); color: #0b0e1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-who em { display: block; margin-top: 2px; font-style: normal; font: 400 13px/1.35 var(--font-body); color: #5b6076; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* fixed slot widths, because deciding per row is what breaks the alignment down the list (BoardRow.js:80-84) */
.lb-metrics { display: flex; align-items: flex-start; justify-content: flex-end; gap: 24px; }
.lb-m { display: block; flex: 0 0 96px; text-align: right; }
.lb-m .lb-v { display: block; font: 800 16px/1.25 var(--font-display); letter-spacing: -.01em; color: #0b0e1a; font-variant-numeric: tabular-nums; }
.lb-m .lb-c { display: block; padding-top: 2px; font-style: normal; font: 400 13px/1.3 var(--font-body); color: #5b6076; white-space: nowrap; }
.lb-star { font-style: normal; color: #f5a623; margin-right: 4px; }
.lb-flag { text-align: right; }
.lb-chip { display: inline-block; padding: 3px 9px; border-radius: 6px; background: #f1f5f9; color: #475569; font-style: normal; font: 600 13px/1.4 var(--font-display); white-space: nowrap; }
.lb-chip.is-up { background: #e6f7ea; color: #0c7a52; }
.lb-chip.is-down { background: #ffe3ea; color: #c9184a; }
.lb-chip.is-flat { background: #f1f5f9; color: #475569; }
.lb-row .lb-chev { color: #98a0b5; }
.lb-note { max-width: 900px; margin-top: 16px; font: 400 13px/1.55 var(--font-body); color: var(--v2-body); }

/* ==========================================================================
   the queue: Strips.js AttributionStrip over AttributionQueueDialog.js
   ========================================================================== */
.lb-beat { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 40px; align-items: center; }
.lb-beat-c p { margin: 0; max-width: 46ch; font: 400 16.5px/1.65 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.lb-beat-c a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(15, 13, 25, .3); }
.lb-beat-c a:hover { color: var(--blue); text-decoration-color: currentColor; }
.lb-screen--q { max-width: 560px; margin-top: 0; }
.lb-strip { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: #eef2ff; font: 400 13.5px/1.5 var(--font-body); color: #414a68; }
.lb-strip b { color: var(--ink); font-weight: 600; }
.lb-strip .lb-ic { margin-top: 2px; color: var(--blue); }
.lb-dlg { padding: 18px 20px 16px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow); }
.lb-dlg-e { margin: 0; font: 600 13px/1.3 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: #5b6076; }
.lb-dlg-t { margin: 6px 0 0; font: 700 18px/1.3 var(--font-display); color: var(--ink); }
.lb-dlg-q { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--v2-card); }
.lb-dlg-m { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 500 13px/1.3 var(--font-display); color: #5b6076; }
.lb-stars { font-style: normal; font-size: 13px; letter-spacing: 1.5px; color: #f5a623; }
.lb-dlg-q p { margin: 0; font: 400 14.5px/1.5 var(--font-body); color: var(--ink); }
.lb-dlg-c { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.lb-dlg-c span { padding: 8px 14px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #d1d5db; font: 500 13.5px/1.3 var(--font-display); color: #374151; }
.lb-dlg-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--v2-line); }
.lb-dlg-f span { font: 500 13.5px/1.3 var(--font-display); color: #5b6076; padding: 8px 10px; }
.lb-dlg-f b { margin-left: auto; padding: 8px 14px; border-radius: 8px; background: var(--v2-card); font: 600 13.5px/1.3 var(--font-display); color: var(--ink); }

/* ==========================================================================
   the five gates, as a precedence ladder
   ========================================================================== */
.lb-tiers { background: var(--v2-card); }
.lb-spine { position: relative; max-width: 900px; }
.lb-spine-in, .lb-spine-out { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font: 400 14px/1.5 var(--font-body); color: var(--v2-body); }
.lb-spine-in { margin-bottom: 14px; }
.lb-spine-out { margin-top: 16px; }
.lb-spine-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line); font: 600 13px/1.3 var(--font-display); color: var(--ink); white-space: nowrap; }
.lb-gates { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line); overflow: hidden; }
.lb-gate { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; padding: 14px 18px; }
.lb-gate + .lb-gate { border-top: 1px solid var(--v2-line); }
.lb-gate-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--v2-card); font: 700 13px/1 var(--font-display); color: #5b6076; }
.lb-gate-b b { display: block; font: 600 15px/1.35 var(--font-display); color: var(--ink); }
.lb-gate-b p { margin: 2px 0 0; font: 400 14px/1.5 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.lb-gate-s { justify-self: end; font: 500 13px/1.35 var(--font-display); color: #5b6076; text-align: right; white-space: nowrap; }
.lb-gate.is-hit { background: #f0fff6; }
.lb-gate.is-hit .lb-gate-n { background: #0c7a52; color: #fff; }
.lb-gate.is-hit .lb-gate-s { color: #0c7a52; font-weight: 700; white-space: normal; }
.lb-gate.is-cold .lb-gate-b b, .lb-gate.is-cold .lb-gate-b p { opacity: .72; }
.lb-rule { grid-column: 1 / -1; margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: var(--v2-card); font: 400 13.5px/1.5 var(--font-body); color: #5b6076; }
.lb-rule b { color: var(--ink); font-weight: 600; }
.lb-tail { max-width: 66ch; margin-top: 30px; font: 400 16px/1.65 var(--font-body); color: var(--v2-body); text-wrap: pretty; }

/* ---------- breakpoints ---------- */
@media (max-width: 991px) {
  .lb-beat { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lb-beat-c p { max-width: 66ch; }
  .lb-screen--q { max-width: 720px; }
  .lb-row { grid-template-columns: 34px 40px minmax(0, 1fr) 290px 17px; }
  .lb-metrics { gap: 14px; }
  .lb-m { flex: 0 0 87px; }
}
@media (max-width: 767px) {
  .lb-row { grid-template-columns: 28px 36px minmax(0, 1fr) !important; grid-template-areas: "rank av who" ". . metrics"; gap: 8px 12px; padding: 12px 6px; }
  .lb-row .lb-rank { grid-area: rank; }
  .lb-page .lb-row .lb-av { grid-area: av; width: 36px; height: 36px; }
  .lb-who { grid-area: who; }
  .lb-metrics { grid-area: metrics; flex-wrap: wrap; justify-content: flex-start; margin-top: 6px; gap: 8px 18px; }
  .lb-m { text-align: left; flex: 0 0 auto; min-width: 0; }
  .lb-row .lb-chev { display: none; }
  .lb-gate { grid-template-columns: 26px minmax(0, 1fr); }
  .lb-gate-s { grid-column: 2; justify-self: start; text-align: left; white-space: normal; }
  .lb-card-h, .lb-basis { padding-left: 16px; padding-right: 16px; }
  .lb-rows { padding: 4px 8px 8px; }
}