/* leaderboard.html — page-specific styles.
   Layout: full-width epoch command bar → full-width 4-stat row →
   two-column body (rankings left, personal sidebar right).
   All colour comes from design tokens (var(--surface)/--text/…) so both
   light and dark themes resolve automatically; #FFB400 is the fixed brand
   gold. Theme-specific dark tweaks (if any) live in dark-colors.css. */

/* ── Hero banner (uses the shared pr-card-* component from components.css) ── */
    .lb-hero { margin-bottom:16px; }
    .lb-hero-head { display:flex;align-items:center;gap:8px; }
    .lb-hero-eyebrow {
      font-family:var(--font-mono);font-size:9px;font-weight:600;
      letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);
    }

/* ── Section headers ── */
    .lb-sec {
      display:flex;align-items:center;gap:10px;
      font-family:var(--font-mono);font-size:12px;font-weight:600;
      letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);
      /* Uniform left-column rhythm: 28px above each section header, 14px down to its
         card. Section content (podium/table/card) carries no margin of its own, so the
         gap between every section is exactly this — even, not the old ad-hoc mix. */
      margin:28px 0 14px;padding-left:2px;
    }
    .lb-board > .lb-sec:first-child { margin-top:0; }
    .lb-sec::before { content:"";width:6px;height:6px;border-radius:50%;background:#FFB400;flex-shrink:0; }
    .lb-sec-line { flex:1;height:1px;background:var(--border-card); }
    .lb-sec-sub { font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:0.04em;text-transform:none;color:var(--text-muted);flex-shrink:0; }

/* ════ Epoch command bar (top, full-width) ════ */
    .lb-cmd {
      position:relative;display:flex;align-items:center;gap:24px;flex-wrap:wrap;
      background:var(--surface);border:1px solid var(--border-card);border-radius:var(--radius);
      padding:18px 22px;margin-bottom:16px;overflow:hidden;
    }
    .lb-cmd::before {
      content:"";position:absolute;inset:0 0 auto 0;height:3px;
      background:linear-gradient(90deg,#FFB400,rgba(255,180,0,0.15));
    }
    .lb-cmd-epoch { display:flex;align-items:center;gap:12px; }
    .lb-cmd-epoch-n { font-family:var(--font-mono);font-size:22px;font-weight:800;letter-spacing:-0.02em;color:var(--text); }
    .lb-cmd-phase {
      font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:0.12em;
      text-transform:uppercase;padding:4px 9px;border-radius:var(--radius-full);border:1px solid transparent;white-space:nowrap;
    }
    .lb-cmd-phase.is-pre { color:#d97706;background:rgba(217,119,6,0.10);border-color:rgba(217,119,6,0.25); }
    .lb-cmd-phase.is-post { color:#16a34a;background:rgba(22,163,74,0.10);border-color:rgba(22,163,74,0.25); }
    .lb-cmd-sep { width:1px;align-self:stretch;min-height:36px;background:var(--border-card); }
    .lb-cmd-count { display:flex;flex-direction:column;gap:6px;min-width:180px; }
    .lb-cmd-count-top { display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; }
    .lb-cmd-count-val { font-family:var(--font-mono);font-size:22px;font-weight:800;letter-spacing:-0.02em;color:var(--text); }
    .lb-cmd-count-cap { font-family:var(--font-mono);font-size:8.5px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted); }
    .lb-cmd-prog { height:4px;background:var(--gray-100);border-radius:2px;overflow:hidden; }
    .lb-cmd-prog-fill { height:100%;width:0;background:linear-gradient(90deg,#FFB400,#d97706);border-radius:2px;transition:width 0.4s ease; }
    .lb-cmd-toggle { margin-left:auto;display:inline-flex;gap:2px;padding:3px;background:var(--gray-100);border-radius:var(--radius-full); }
    @media (max-width:640px){ .lb-cmd{ gap:14px;padding:14px 16px; } .lb-cmd-sep{ display:none; } .lb-cmd-toggle{ margin-left:0; } }

/* shared toggle pill (command bar + Full Rankings heading reuse .lb-cc-tg) */
    .lb-cc-tg {
      font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:0.04em;
      color:var(--text-muted);padding:5px 14px;border-radius:var(--radius-full);text-decoration:none;
      transition:color 0.15s,background 0.15s,box-shadow 0.15s;
    }
    .lb-cc-tg:hover { color:var(--text); }
    .lb-cc-tg.active { color:var(--text);background:var(--surface);box-shadow:var(--shadow-xs); }
    .lb-vt { appearance:none;-webkit-appearance:none;border:0;background:transparent;cursor:pointer;font:inherit; }

/* ════ Full-width stat row ════ */
    .lb-statrow-wrap { margin-bottom:12px; }
    .lb-statrow { display:grid;grid-template-columns:repeat(4,1fr);gap:12px; }
    @media (max-width:900px){ .lb-statrow{ grid-template-columns:repeat(2,1fr); } }
    @media (max-width:480px){ .lb-statrow{ grid-template-columns:1fr; } }
    .lb-cc-stat {
      display:flex;flex-direction:column;gap:5px;padding:16px 18px;
      background:var(--surface);border:1px solid var(--border-card);border-radius:var(--radius-sm);
    }
    .lb-cc-stat.is-pool { background:rgba(255,180,0,0.06);border-color:rgba(255,180,0,0.22); }
    .lb-cc-stat.is-mine { background:rgba(255,180,0,0.12);border-color:rgba(255,180,0,0.40); }
    .lb-cc-lbl {
      font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.12em;
      text-transform:uppercase;color:var(--text-muted);
    }
    .lb-cc-val { font-family:var(--font-mono);font-size:26px;font-weight:800;letter-spacing:-0.03em;color:var(--text);line-height:1.05; }
    .lb-cc-val em { font-style:normal;font-size:11px;font-weight:600;color:var(--text-muted);letter-spacing:0;margin-left:2px; }
    .lb-cc-stat.is-mine .lb-cc-val { color:var(--brand-amber-strong); }
    .lb-cc-sub { font-family:var(--font-mono);font-size:9.5px;font-weight:500;color:var(--text-muted); }
    .lb-cc-note {
      font-size:11px;line-height:1.5;color:var(--text-secondary);
      background:var(--surface);border:1px solid var(--border-card);border-radius:var(--radius-sm);
      padding:9px 12px;margin-bottom:18px;
    }

/* ════ Two-column body ════ */
    .lb-main { display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start; }
    @media (max-width:980px){ .lb-main{ grid-template-columns:1fr; } }
    .lb-side { display:flex;flex-direction:column;gap:16px;min-width:0; }
    .lb-board { min-width:0; }

/* ── Compact podium (top 3) ── */
    .lb-podium { display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }
    @media (max-width:600px){ .lb-podium{ grid-template-columns:1fr; } }
    .lb-pod {
      display:flex;align-items:center;gap:12px;
      background:var(--surface);border:1px solid var(--border-card);border-radius:var(--radius-sm);
      padding:14px 16px;transition:border-color 0.18s;
    }
    .lb-pod.gold { border-color:rgba(255,180,0,0.30); }
    .lb-pod-rank { font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--text-muted);flex-shrink:0; }
    .lb-pod.gold .lb-pod-rank { color:#FFB400; }
    .lb-pod.silver .lb-pod-rank { color:var(--gray-400); }
    .lb-pod.bronze .lb-pod-rank { color:#CD7F32; }
    .lb-pod-av {
      width:34px;height:34px;border-radius:10px;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;
      font-size:12px;font-weight:800;color:#fff;
    }
    .lb-pod-id { display:flex;flex-direction:column;gap:2px;min-width:0; }
    .lb-pod-name { font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .lb-pod-pts { font-family:var(--font-mono);font-size:15px;font-weight:800;color:var(--text);letter-spacing:-0.02em; }
    .lb-pod-pts em { font-style:normal;font-size:9px;font-weight:500;color:var(--text-muted); }

/* ── Rankings table ── */
    .lb-table {
      background:var(--surface);border:1px solid var(--border-card);border-radius:var(--radius);overflow:hidden;
    }
    .lb-head {
      display:grid;grid-template-columns:40px 28px 1fr 80px 1fr 56px;
      gap:10px;padding:10px 18px;
      font-family:var(--font-mono);font-size:8.5px;font-weight:600;
      letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);
      border-bottom:1px solid var(--gray-200);background:var(--gray-50);
    }
    .lb-row {
      display:grid;grid-template-columns:40px 28px 1fr 80px 1fr 56px;
      align-items:center;gap:10px;padding:10px 18px;
      border-bottom:1px solid var(--gray-100);font-size:12px;
      transition:background 0.1s;
    }
    .lb-row:last-child { border-bottom:none; }
    .lb-row:hover { background:var(--gray-50); }
    .lb-row.is-self {
      background:rgba(255,180,0,0.08);
      border:1px solid rgba(255,180,0,0.22);
      border-radius:8px;margin:2px 8px;padding:9px 16px;
    }
    .lb-rank { font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text-muted);text-align:center; }
    .lb-rank.top-1 { color:#FFB400; }
    .lb-rank.top-2 { color:var(--gray-400); }
    .lb-rank.top-3 { color:#CD7F32; }
    .lb-avatar {
      width:24px;height:24px;border-radius:7px;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;
      font-size:9px;font-weight:700;color:#fff;
    }
    .lb-name { font-size:12px;font-weight:600;color:var(--text); }
    .lb-you-tag {
      font-family:var(--font-mono);font-size:8px;padding:1px 6px;border-radius:999px;
      background:rgba(255,180,0,0.12);color:#FFB400;font-weight:700;
      letter-spacing:0.06em;text-transform:uppercase;margin-left:4px;
    }
    .lb-addr { font-family:var(--font-mono);font-size:9px;color:var(--text-muted); }
    .lb-pts { font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--text);text-align:right; }
    .lb-bar { height:6px;background:var(--gray-100);border-radius:3px;position:relative; }
    .lb-bar-fill { height:100%;border-radius:3px;background:linear-gradient(90deg,rgba(255,180,0,0.1),#FFB400);position:relative; }
    .lb-bar-fill::after {
      content:"";position:absolute;top:50%;right:0;width:8px;height:8px;border-radius:50%;
      background:#FFB400;transform:translate(50%,-50%);box-shadow:0 0 6px rgba(255,180,0,0.4);
    }
    .is-self .lb-bar-fill::after { box-shadow:0 0 8px rgba(255,180,0,0.55); }
    .lb-acc { font-family:var(--font-mono);font-size:11px;font-weight:600;text-align:right; }

/* ════ Personal sidebar — "Your Stats" ════ */
    .lb-mycard {
      background:var(--surface);border:1px solid var(--border-card);border-radius:var(--radius);
      padding:20px;position:relative;overflow:hidden;
    }
    .lb-mycard::before {
      content:"";position:absolute;top:0;left:0;right:0;height:2px;
      background:linear-gradient(90deg,transparent,#FFB400 30%,#FFB400 70%,transparent);
    }
    .lb-my-top { display:flex;align-items:center;gap:18px;margin-bottom:18px; }
    .my-ring-wrap { position:relative;width:100px;height:100px;flex-shrink:0; }
    .my-ring-label { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; }
    .my-ring-val { font-family:var(--font-mono);font-size:22px;font-weight:800;color:var(--text);letter-spacing:-0.03em; }
    .my-ring-sub { font-family:var(--font-mono);font-size:7.5px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted); }
    .lb-my-rank { display:flex;flex-direction:column;gap:1px; }
    .lb-my-rank-n { font-family:var(--font-mono);font-size:30px;font-weight:800;color:var(--text);letter-spacing:-0.03em;line-height:1; }
    .lb-my-rank-tot { font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text-muted); }
    .lb-my-rank-lbl { font-family:var(--font-mono);font-size:8px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-top:4px; }

    .lb-my-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
    .lb-tile {
      padding:12px 14px;background:var(--gray-50);border:1px solid var(--gray-100);border-radius:var(--radius-sm);
    }
    .lb-tile-val { font-family:var(--font-mono);font-size:18px;font-weight:700;color:var(--text);letter-spacing:-0.02em; }
    .lb-tile-delta { font-family:var(--font-mono);font-size:9.5px;font-weight:600;margin-left:4px;color:var(--text-muted); }
    .lb-tile-lbl { font-family:var(--font-mono);font-size:8px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-top:4px; }
    .lb-pt-lock, .lb-pt-risk { font-size:9px;margin-left:2px; }
    .lb-pt-risk { color:#d97706; }
    #lb-epoch-card.lb-has-temp { border-color:rgba(255,180,0,0.35); }
    #lb-epoch-card.lb-has-temp .lb-tile-val { color:#d97706; }

/* ── How points work (sidebar list) ── */
    .pts-card {
      background:var(--surface);border:1px solid var(--border-card);border-radius:var(--radius);
      padding:16px 18px;
    }
    .pts-card-head { display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid var(--gray-100); }
    .pts-card-label { font-family:var(--font-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);font-weight:600; }
    .pts-card-foot { font-family:var(--font-mono);font-size:9.5px;font-weight:600;color:var(--brand-amber-strong);text-align:right; }
    .pts-grid { display:flex;flex-direction:column; }
    .pts-item {
      display:flex;justify-content:space-between;align-items:center;gap:10px;
      padding:9px 0;border-bottom:1px solid var(--gray-50);
      font-size:12px;color:var(--text-secondary);
    }
    .pts-item:last-child { border-bottom:none; }
    .pts-item .pts-val { font-family:var(--font-mono);font-size:11px;font-weight:700;white-space:nowrap; }
    .pts-item .pts-val.positive { color:var(--green); }
    .pts-item .pts-val.negative { color:var(--red); }

/* ── "How it's calculated" transparency panel ── */
    .lb-explain {
      background:var(--surface);border:1px solid var(--border-card);
      border-radius:var(--radius);padding:0 18px;
    }
    .lb-explain > summary {
      font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.04em;
      text-transform:uppercase;color:var(--text);cursor:pointer;padding:14px 0;list-style:none;
      display:flex;align-items:center;gap:10px;
    }
    .lb-explain > summary::-webkit-details-marker { display:none; }
    /* +/- toggle (matches the shared .rf-acc accordion). */
    .lb-explain > summary::after { content:'+';margin-left:auto;font-family:var(--font-mono);font-size:16px;font-weight:400;line-height:1;color:#FFB400; }
    .lb-explain[open] > summary::after { content:'\2212'; }
    .lb-explain-body { padding-bottom:16px; }
    .lb-explain-formula {
      font-family:var(--font-mono);font-size:12px;color:var(--text);
      background:var(--gray-50);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:12px;
    }
    .lb-explain-grid { display:flex;flex-direction:column;gap:2px; }
    .lb-explain-row { display:grid;grid-template-columns:160px 1fr;gap:12px;padding:7px 0;border-bottom:1px solid var(--gray-50); }
    .lb-explain-row .k {
      font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:0.08em;
      text-transform:uppercase;color:var(--text-muted);
    }
    .lb-explain-row .v { font-size:12px;line-height:1.5;color:var(--text-secondary); }
    .lb-explain-note { font-size:11px;color:var(--text-muted);margin-top:12px;font-style:italic; }
    @media (max-width:640px){ .lb-explain-row{ grid-template-columns:1fr;gap:2px; } }

/* ── Mobile: rankings table (appended last to win source order) ── */
@media (max-width: 640px) {
  /* The 6-col grid squeezed the name and Share-bar columns to ~57px each. Drop
     the Share bar on phones and give the curator name the room it needs. */
  .lb-head, .lb-row { grid-template-columns: 26px 26px minmax(0,1fr) 54px 46px; gap: 8px; padding-left: 12px; padding-right: 12px; }
  .lb-head > :nth-child(5), .lb-row > :nth-child(5) { display: none; }   /* Share / bar column */
}