/* ============================================================
   leaderboard.css — leaderboard.html only.
   Hero band, board tabs, family/search filters, regime switcher,
   sortable table, and the table-cell primitives leaderboard.js
   renders into (.lbt-*).
   ============================================================ */

/* ── Hero band ────────────────────────────────────────────── */
.lb-hero { position: relative; overflow: hidden; padding: 4rem 2rem 3rem; text-align: center; }
.lb-hero-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.lb-title {
  font: 700 clamp(2rem, 4vw, 2.9rem)/1.15 'Google Sans', system-ui, sans-serif;
  letter-spacing: -.03em; margin: .3rem 0 1rem;
}
.lb-sub { font-size: 1.05rem; line-height: 1.65; color: var(--text-muted); max-width: 760px; margin: 0 auto; }

.lb-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.4rem; margin-top: 2.4rem; max-width: 780px; margin-inline: auto;
}
.lb-stat { text-align: center; }
.lb-stat-v { display: block; font: 700 1.9rem/1 'Google Sans', system-ui, sans-serif; letter-spacing: -.02em; }
.lb-stat-l { display: block; font-size: .78rem; color: var(--text-muted); margin-top: .35rem; line-height: 1.4; }
.tone-va    { color: var(--fig-videova); }
.tone-skill { color: var(--fig-skill); }
.tone-vla   { color: var(--fig-vla); }
.tone-l3    { color: var(--fig-l3); }

/* ── Controls ─────────────────────────────────────────────── */
.lb-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
  max-width: 1180px; margin: 0 auto; padding: 0 2rem 1.4rem;
}
.lb-tabs { display: flex; gap: .4rem; background: var(--surface); padding: .3rem; border-radius: var(--radius-pill); }
.lb-tab {
  padding: .5rem 1.1rem; border: none; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-muted);
  font: 600 .85rem/1 'Google Sans', sans-serif; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.lb-tab:hover { color: var(--text); }
.lb-tab.is-active { background: var(--on-bg); color: var(--primary); box-shadow: var(--shadow); }
.lb-tab:focus-visible, .lb-regime-btn:focus-visible, .lb-chip:focus-visible, .lb-search:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}

.lb-filters { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.lb-chip {
  padding: .34rem .8rem; border-radius: var(--radius-pill);
  border: 1.5px solid var(--chip, var(--border)); color: var(--chip, var(--text));
  font: 600 .76rem/1 'Google Sans', sans-serif; cursor: pointer; user-select: none;
  background: color-mix(in srgb, var(--chip, var(--border)) 12%, transparent);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lb-chip:hover { transform: translateY(-1px); }
.lb-chip.is-off { opacity: .32; background: transparent; }
.lb-search {
  height: 34px; padding: 0 .9rem; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--on-bg); color: var(--text);
  font: 500 .84rem/1 'Noto Sans', sans-serif; min-width: 180px;
}
.lb-search:focus { outline: none; border-color: var(--primary); }

/* ── Regime switcher (By-level board only) ───────────────── */
.lb-regime { display: flex; gap: .4rem; flex-wrap: wrap; }
.lb-regime-btn {
  padding: .42rem .9rem; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--on-bg); color: var(--text-muted);
  font: 600 .78rem/1 'Google Sans', sans-serif; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.lb-regime-btn:hover { border-color: var(--primary); color: var(--text); }
.lb-regime-btn.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

.lb-wrap { max-width: 1180px; margin: 0 auto; padding: 0 2rem 3rem; }
.lb-note { font-size: .84rem; color: var(--text-muted); line-height: 1.6; margin: .8rem 0; min-height: 1.4em; }

/* ── Table ────────────────────────────────────────────────── */
.lb-table-shell {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: auto; background: var(--on-bg); box-shadow: var(--shadow);
}
.lb-table { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 640px; }
.lb-table thead { background: var(--surface); position: sticky; top: 0; z-index: 2; }
.lb-table th, .lb-table td { padding: .78rem 1rem; text-align: right; white-space: nowrap; }
.lb-table th:first-child, .lb-table td:first-child,
.lb-table th:nth-child(2), .lb-table td:nth-child(2) { text-align: left; }
.lb-table tbody tr { border-top: 1px solid var(--border); transition: background var(--dur-fast) var(--ease-out); }
.lb-table tbody tr:hover { background: var(--surface); }
.lb-table tbody tr.lbt-avg-row:hover { background: var(--surface); }

.lbt-rank-h, .lbt-rank { color: var(--text-muted); font-weight: 700; width: 2.4rem; }
.lbt-th { font: 700 .74rem/1 'Google Sans', sans-serif; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
.lbt-th-btn { cursor: pointer; user-select: none; }
.lbt-th-btn:hover { color: var(--text); }
.lbt-th.is-active { color: var(--primary); }
.lbt-empty { text-align: center !important; padding: 2.4rem 1rem !important; color: var(--text-muted); }

.lbt-name { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--text); }
.lbt-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.lbt-fam { font: 600 .78rem/1 'Google Sans', sans-serif; }

/* ── By-task board (fourth tab) ────────────────────────────────
   Grouped two-row header (paradigm spans over model columns),
   task-name cells with seen/unseen badges, pinned average row. */
.lbt-group-task { text-align: left !important; }
.lbt-group { text-align: center !important; font-size: .8rem; }
.lbt-model-h { font-size: .66rem !important; letter-spacing: 0 !important; font-weight: 600; }
.lbt-taskname { gap: .5rem; }
.lbt-task-tag {
  font: 700 .56rem/1 'Google Sans', sans-serif; letter-spacing: .05em; text-transform: uppercase;
  padding: .14rem .5rem; border-radius: var(--radius-pill);
  color: var(--fig-l3); background: color-mix(in srgb, var(--fig-l3) 13%, transparent);
  flex-shrink: 0;
}
.lbt-task-tag.is-seen { color: var(--fig-vla); background: color-mix(in srgb, var(--fig-vla) 13%, transparent); }
.lbt-avg-row td { font-weight: 700; border-top: 2px solid var(--border); background: var(--surface); }
.lbt-avg-row .lbt-num { font-weight: 700; }

/* Heatmap cells (taskgrid chart) */
.ig-cell {
  transform-box: fill-box; transform-origin: center;
  transform: scale(0);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-spring);
}
.ig-cell.is-drawn { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .ig-cell { transition: none !important; transform: none; }
}

.lbt-num { display: inline-flex; align-items: center; gap: .5rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.lbt-bar { position: relative; width: 44px; height: 5px; border-radius: 3px; background: var(--surface); overflow: hidden; flex-shrink: 0; }
.lbt-bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; transition: width 620ms var(--ease-out); }
.lbt-delta-pos { color: var(--fig-videova); }
.lbt-delta-neg { color: var(--fig-zs); }

/* ── Leaderboard-preview rows (index.html) — spacing that only
   applies inside the sim summary cards ──────────────────────── */
.lbp-metric small { display: block; }

/* ── Submit strip (leaderboard.html footer) ──────────────── */
.lb-submit { max-width: 1180px; margin: 0 auto; padding: 0 2rem 4rem; }
.lb-submit-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 2rem 2.2rem;
}
.lb-submit-card h3 { font: 700 1.2rem/1.3 'Google Sans', sans-serif; margin: 0 0 .4rem; }
.lb-submit-card p { font-size: .9rem; color: var(--text-muted); max-width: 52ch; margin: 0; line-height: 1.55; }

@media (max-width: 760px) {
  .lb-controls, .lb-wrap, .lb-submit { padding-left: 1.1rem; padding-right: 1.1rem; }
  .lb-controls { flex-direction: column; align-items: stretch; }
  .lb-filters { justify-content: flex-start; }
}

/* ── Task chip grid ("This phase's suite") ───────────────── */
.lb-task-chip-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.4rem;
  margin-top: 0.4rem;
}
.lb-task-chip {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1rem 1.1rem;
  background: var(--on-bg); border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: var(--radius); text-decoration: none; color: var(--text);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.lb-task-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow); text-decoration: none; color: var(--text); }
.lb-task-chip.is-seen   { border-left-color: var(--fig-vla); }
.lb-task-chip.is-unseen { border-left-color: var(--fig-l3); }
.lb-task-chip-id { font: 700 .92rem/1.3 'Google Sans', sans-serif; }
.lb-task-chip-tag {
  align-self: flex-start;
  font: 700 .62rem/1 'Google Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  padding: .12rem .45rem; border-radius: var(--radius-pill);
}
.lb-task-chip.is-seen   .lb-task-chip-tag { color: var(--fig-vla); background: color-mix(in srgb, var(--fig-vla) 14%, transparent); }
.lb-task-chip.is-unseen .lb-task-chip-tag { color: var(--fig-l3);  background: color-mix(in srgb, var(--fig-l3) 14%, transparent); }
.lb-task-chip-desc { font-size: .8rem; line-height: 1.5; color: var(--text-muted); }

/* ── Full task-suite reference table (leaderboard.html #full-suite) ─
   Deliberately its OWN table, not `.lb-table` — the shared board
   table has column-position rules (first two columns left-aligned)
   tuned for the rank/name board layout. Reusing that class on this
   very differently-shaped 11-column table caused the DP/L0 column
   and the "L1" sub-header to inherit that left-align rule instead of
   the right-align every numeric column here needs. Keeping this
   table on its own class means there is nothing to fight. ────────── */
.ptr-shell { max-height: 640px; overflow: auto; position: relative; }
.ptr-table { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 720px; }

.ptr-table thead { background: var(--surface); position: sticky; top: 0; z-index: 3; }
.ptr-table th, .ptr-table td { padding: .5rem .65rem; text-align: right; white-space: nowrap; }

/* Row 1 of the header (Task / DP / ACT / Mean) — Task spans both rows
   and stays left; the three grouped labels are centered over the
   sub-columns they head, rather than hugging the last sub-column
   the way a plain text-align:right would leave them. */
.ptr-table thead tr:first-child th { text-align: center; border-bottom: none; }
.ptr-table thead tr:first-child th:first-child { text-align: left; }

/* Row 2 of the header (L0…L3, L0…L3, DP, ACT) and every data column
   line up with the numbers beneath them. */
.ptr-table thead tr:last-child th { text-align: right; }

.ptr-table th:first-child, .ptr-table td.ptr-task { text-align: left; white-space: normal; }
.ptr-table tbody tr { border-top: 1px solid var(--border); }
.ptr-table tbody tr:nth-child(even) { background: rgba(127,127,127,.07); }
.ptr-mean { font-weight: 700; }

/* Overall-average row — pinned to the bottom of the scroll shell so
   it's visible however far down the 50 tasks you've scrolled. */
.ptr-avg-row td {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--surface); font-weight: 700;
  border-top: 2px solid var(--border);
}
.ptr-avg-row td.ptr-task { font-weight: 700; }

.ptr-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .6rem 0 1.1rem; font-size: .85rem; opacity: .8; }

.lbt-src {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .55rem; border-radius: var(--radius-pill);
  font: 700 .68rem/1.4 'Google Sans', sans-serif; letter-spacing: .03em; text-transform: uppercase;
}
.lbt-src::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.lbt-src-sim  { color: var(--fig-vla);  background: color-mix(in srgb, var(--fig-vla) 14%, transparent); }
.lbt-src-sim::before  { background: var(--fig-vla); }
.lbt-src-real { color: var(--fig-l3);   background: color-mix(in srgb, var(--fig-l3) 14%, transparent); }
.lbt-src-real::before { background: var(--fig-l3); }
 
/* ── Metric switcher (SR / Quality) — By-level board only,
   same visual language as #lb-regime, sits directly below it ─ */
#lb-metric.lb-regime { margin-top: .5rem; margin-bottom: .8rem; }
.lb-regime-btn.is-disabled { opacity: .4; cursor: not-allowed; }
.lb-regime-btn.is-disabled:hover { border-color: var(--border); color: var(--text-muted); }
.lb-scale-label {
  font: 700 .74rem/1 'Google Sans', sans-serif; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); align-self: center; margin-right: .25rem;
}
#lb-scale.lb-regime { align-items: center; margin-bottom: .8rem; }