/* Rankings (rankings.html, js/rankings.js). Builds on tools.css (cards,
   fields, segments). */
.rk-wrap { max-width: 760px; display: grid; gap: 12px; }
.rk-wrap > .card { margin: 0; }
.rk-wrap .tl-seg { margin-bottom: 0; }
.rk-filters { display: grid; gap: 12px; }
.rk-pools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.rk-pools button { min-height: 44px; padding: 0 2px; border-radius: 999px; border: 1px solid var(--border); background: transparent;
  color: var(--text-dim); font: inherit; font-weight: 700; cursor: pointer; }
.rk-pools button[aria-pressed="true"] { border-color: var(--accent-hi); color: var(--text); background: rgba(var(--accent-rgb, 220, 38, 38), .1); }
.rk-pools button:focus-visible, .rk-units button:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.rk-selects { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.rk-selects select { width: 100%; }
.rk-note { margin: 0; color: var(--text-faint); font-size: .8rem; line-height: 1.45; }

/* where the lifter stands, at the top of the leaderboard card */
.rk-you { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.rk-you p { margin: 0; }
.rk-you-big { color: var(--text); font-size: 1.1rem; font-weight: 800; line-height: 1.3; }
.rk-you-l { color: var(--text-dim); font-size: .9rem; line-height: 1.45; }
.rk-you-s { margin-top: 2px !important; color: var(--text-faint); font-size: .76rem; line-height: 1.4; }
.rk-src { margin: 8px 0 0; color: var(--text-faint); font-size: .78rem; line-height: 1.45; }
.rk-src a, .rk-you a { color: var(--accent-hi); font-weight: 600; }

/* the leaderboard */
.rk-board-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rk-h { margin: 0; color: var(--text); font-size: 1.05rem; }
.rk-units { display: inline-flex; flex: none; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.rk-units button { min-width: 48px; min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--text-dim); font: inherit; font-weight: 700; cursor: pointer; }
.rk-units button[aria-pressed="true"] { background: var(--surface-3); color: var(--text); }
.rk-group { margin: 2px 0 10px; color: var(--text-dim); font-size: .82rem; }
.rk-tabs { margin-bottom: 12px; }
.rk-wrap .rk-tabs { margin-bottom: 12px; }
.rk-tabs button { min-width: 0; padding: 0 4px; font-size: .86rem; }
.rk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: none; }
.rk-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.rk-list li:nth-child(-n+3) .rk-place { color: var(--accent-hi); }
.rk-place { color: var(--text-faint); font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; }
.rk-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rk-who strong { color: var(--text); font-size: .95rem; overflow-wrap: anywhere; }
.rk-who small { color: var(--text-dim); font-size: .78rem; font-variant-numeric: tabular-nums; }
.rk-who .rk-meet { color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-val { color: var(--text); font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.rk-val small { color: var(--text-faint); font-size: .72rem; font-weight: 700; }

@media (max-width: 560px) {
  .rk-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .rk-tabs button { font-size: .8rem; }
  .rk-pools button { font-size: .88rem; }
  /* The age names are the longer ones: class gets what "120+ kg" needs. */
  .rk-selects { grid-template-columns: minmax(0, 1fr) 108px; }
}
/* The smallest phones: age and class on rows of their own, tighter tabs. */
@media (max-width: 359px) {
  .rk-selects { grid-template-columns: 1fr; }
  .rk-pools { display: flex; flex-wrap: wrap; }
  .rk-pools button { flex: 1 0 auto; padding: 0 10px; }
  .rk-tabs button { font-size: .7rem; padding: 0; }
}