/* Instagram/PractiScore-style leaderboard rows. Shared by leagues + public.
   Spec: docs/superpowers/specs/2026-07-22-leaderboard-ui-design.md */
.lb-board { --div-hue: 42; }

.lb-tabs { display: flex; gap: 2px; overflow-x: auto; margin: 6px 0 10px;
  border-bottom: 1px solid var(--line); scrollbar-width: none; }
.lb-tabs::-webkit-scrollbar { display: none; }
.lb-tab { background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); font-family: var(--display); font-size: 13px;
  padding: 8px 12px; cursor: pointer; white-space: nowrap; }
.lb-tab.active { color: var(--text);
  border-bottom-color: hsl(var(--div-hue) 70% 55%); }

.lb-list { display: flex; flex-direction: column; }
.lb-row { display: grid; padding: 8px 10px;
  /* Name column is guaranteed readable width; the stats column may shrink
     (min 0) so its stat lines wrap instead of crushing the name to "J. …"
     on standings CSVs with many per-stage columns. */
  grid-template-columns: minmax(clamp(96px, 34%, 180px), 1fr) minmax(0, auto) auto;
  grid-template-areas: "name  stats donut"
                       "rank  stats donut";
  column-gap: 10px; align-items: center;
  border-top: 1px solid var(--line); }
.lb-row:first-child { border-top: 0; }
.lb-row.first { background: linear-gradient(90deg,
  rgba(245,185,33,.07), transparent 70%); }
.lb-row.you { background: rgba(90,169,236,.14);
  box-shadow: inset 3px 0 0 var(--steel); }
.lb-row.dq { opacity: .55; }

.lb-name { grid-area: name; display: flex; align-items: baseline; gap: 6px;
  min-width: 0; font-size: 13px; color: var(--text); }
.lb-name-text { flex: 1 1 auto; min-width: 24px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.lb-video { text-decoration: none; flex: none; }
/* Tags may shrink (they only truncate under pressure) — the Home feed and
   log book put "(stage · division)" here, and a long stage name must not
   crush the shooter's name to "Y…". flex-shrink 999: flex distributes
   shrink by factor × basis, so the tags absorb essentially ALL of the
   overflow before the name loses its first pixel. */
.lb-tags { color: var(--muted); font-size: 11px; flex: 0 999 auto;
  min-width: 3ch; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.lb-dq-tag { color: var(--red); font-size: 10px; font-weight: 700;
  border: 1px solid var(--red); border-radius: 4px; padding: 0 4px;
  flex: none; }

.lb-rankpct { grid-area: rank; }
.lb-rank { font-family: var(--display); font-weight: 700; font-size: 16px;
  color: var(--text); letter-spacing: .02em; }
.lb-rank.p1 { color: #ffd35c; }        /* gold */
.lb-rank.p2 { color: #c9d4e3; }        /* silver */
.lb-rank.p3 { color: #e09c60; }        /* bronze */

.lb-stats { grid-area: stats; display: flex; flex-direction: column;
  align-items: flex-end; gap: 2px; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; text-align: right; }
.lb-statline { display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 0 8px; }
.lb-stat { white-space: nowrap; color: var(--text); }
.lb-stat-label { color: var(--muted); margin-right: 2px; }
.lb-stat.hit-a { color: var(--green); }
.lb-stat.hit-c { color: var(--blue); }
.lb-stat.hit-d { color: var(--accent); }
.lb-stat.hit-bad { color: var(--red); }

.lb-donut { grid-area: donut; width: 34px; height: 34px; border-radius: 50%;
  position: relative; flex: none; }
.lb-donut-hole { position: absolute; inset: 6px; border-radius: 50%;
  background: var(--panel); }