/* Ranks tab leaderboard */
.lb .row{align-items:baseline}
.lb-tbl{font-size:14px;margin-top:12px}

/* One layout at every width. Each row has the same visible cells, in order:
   position | avatar | name (rank shown underneath) | value.
   The Earnings view shows Earned, the Jobs view shows Jobs; the other is hidden. */
.lb-row{display:grid;grid-template-columns:22px 30px minmax(0,1fr) 92px;align-items:center;gap:8px;padding:8px 6px;border-top:1px solid var(--bd);border-radius:8px}
.lb-head{border-top:0;padding-top:0;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--mu)}
.lb-pos{font-variant-numeric:tabular-nums;font-weight:600;color:var(--mu);text-align:center}
.lb-av{position:relative;width:30px;height:30px;border-radius:50%;background:var(--bd);color:var(--tx);display:grid;place-items:center;font-weight:700;font-size:13px;overflow:hidden;flex:none}
.lb-name{min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.lb-name b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.lb-name small{display:block;color:var(--mu);font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-cr,.lb-jobs{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-cr{font-weight:600}
.lb-me{background:color-mix(in srgb,var(--p) 14%,transparent);box-shadow:inset 0 0 0 1px var(--p)}
.lb-me .lb-pos{color:var(--p)}
.lb-gap{text-align:center;color:var(--mu);padding:2px 0}
.lb-msg{padding:14px 6px;color:var(--mu);text-align:center}

/* Earnings / Jobs done and period buttons */
.lb-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.lb-chip{padding:6px 12px;border-radius:999px;border:1px solid var(--bd);background:transparent;color:var(--tx);font:600 13px system-ui,sans-serif;cursor:pointer}
.lb-chip.on{background:var(--p);border-color:var(--p);color:#fff}

/* Jobs tab: the Earned column is hidden, Jobs gets the value column */
.lb-jobsview .lb-cr{display:none}
.lb-jobsview .lb-row{grid-template-columns:22px 30px minmax(0,1fr) 64px}

/* Earnings tab: the Jobs column is hidden */
.lb-earnview .lb-jobs{display:none}

/* phones: a little tighter so the name keeps its room */
@media (max-width:519px){
  .lb-row{grid-template-columns:20px 28px minmax(0,1fr) 80px;gap:6px}
  .lb-av{width:28px;height:28px;font-size:12px}
  .lb-jobsview .lb-row{grid-template-columns:20px 28px minmax(0,1fr) 48px}
}