/* public/review-leaderboard.css - the review leaderboard (public/review-leaderboard.js),
   shared by the web home card, the phone home and the Leaderboard tab on both screens.
   Tokens only (design-system.css is loaded on web and phone). */
.rlb { display: flex; flex-direction: column; gap: var(--s-4); }
.rlb-av { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-royal-soft) center / cover no-repeat; color: var(--accent-ink); font-weight: 700; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); }
.rlb-av.has-photo { color: transparent; }
.rlb-av-sm { width: 30px; height: 30px; font-size: 11px; }
.rlb-av-md { width: 40px; height: 40px; font-size: 14px; }
.rlb-av-lg { width: 64px; height: 64px; font-size: 22px; }
.rlb-av-xl { width: 84px; height: 84px; font-size: 28px; }
.rlb-place-gold { box-shadow: 0 0 0 3px var(--brand-gold-a); }
.rlb-place-silver { box-shadow: 0 0 0 3px var(--ink-3); }
.rlb-place-bronze { box-shadow: 0 0 0 3px var(--warn); }
.rlb-star { width: 13px; height: 13px; fill: var(--brand-gold-a); vertical-align: -2px; }
.rlb-crown { width: 26px; height: 26px; fill: var(--brand-gold-a); margin-bottom: 2px; }
.rlb-name { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.rlb-name { cursor: pointer; }
button.rlb-name:hover { color: var(--accent); text-decoration: underline; }
.rlb-awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); }
.rlb-award { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.rlb-award-body { display: flex; flex-direction: column; min-width: 0; }
.rlb-award-label { font-size: var(--text-xs); color: var(--warn-ink); font-weight: 600; }
.rlb-award-name { font-weight: 700; }
.rlb-role { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-ink); font-size: 10px; font-weight: 700; vertical-align: 1px; }
.rlb-award-sub, .rlb-step-sub, .rlb-note, .rlb-empty { font-size: var(--text-xs); color: var(--ink-3); }
.rlb-card { border: 1px solid var(--border-subtle); border-radius: var(--r-lg); background: var(--surface); padding: var(--s-4); }
.rlb-podium { display: flex; justify-content: center; align-items: flex-end; gap: var(--s-4); margin-bottom: var(--s-4); }
.rlb-step { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 120px; min-width: 0; text-align: center; }
.rlb-step-name { font-weight: 700; max-width: 100%; text-align: center; }
.rlb-step-sub { white-space: nowrap; }
.rlb-block { width: 100%; margin-top: 4px; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--surface-2); color: var(--ink-3); font-weight: 700; font-size: var(--text-sm); padding-top: 6px; }
.rlb-step-gold .rlb-block { height: 72px; background: var(--warn-soft); color: var(--warn-ink); }
.rlb-step-silver .rlb-block { height: 50px; }
.rlb-step-bronze .rlb-block { height: 36px; }
.rlb-podium.is-compact { gap: var(--s-2); }
.rlb-podium.is-compact .rlb-step { width: 92px; }
.rlb-podium.is-compact .rlb-av-xl { width: 64px; height: 64px; font-size: 22px; }
.rlb-podium.is-compact .rlb-av-lg { width: 50px; height: 50px; font-size: 17px; }
.rlb-podium.is-compact .rlb-block { display: none; }
.rlb-list-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-2); }
.rlb-list-title { font-weight: 700; }
.rlb-sort { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.rlb-sort button { border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); border-radius: var(--r-full); padding: 6px 12px; font: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer; min-height: 32px; }
.rlb-sort button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.rlb-list { list-style: none; margin: 0; padding: 0; }
.rlb-row { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr) 44px 64px 52px; align-items: center; gap: var(--s-3); padding: 10px 0; border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.rlb-compact .rlb-row { grid-template-columns: 18px 40px minmax(0, 1fr) 36px 64px; }
.rlb-compact .rlb-row.is-compact { grid-template-columns: 18px 30px minmax(0, 1fr) 36px 60px; padding: 7px 0; }
.rlb-row-head { color: var(--ink-3); font-size: var(--text-xs); border-top: 0; padding-top: 0; }
.rlb-rank { color: var(--ink-3); font-weight: 700; }
.rlb-who { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rlb-bar { height: 6px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.rlb-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--ok); }
.rlb-num { text-align: right; font-weight: 700; }
.rlb-rate, .rlb-named { text-align: right; white-space: nowrap; color: var(--ink-2); }
.rlb-empty { margin: var(--s-3) 0; }
@media (max-width: 560px) {
  .rlb-row { grid-template-columns: 18px 36px minmax(0, 1fr) 34px 58px; gap: var(--s-2); }
  .rlb-row .rlb-named, .rlb-row-head .rlb-named { display: none; }
  .rlb-step { width: 96px; }
  .rlb-av-xl { width: 68px; height: 68px; font-size: 22px; }
  .rlb-av-lg { width: 54px; height: 54px; font-size: 18px; }
}