/* Leaderboard page in the v3 shell. Styles the markup that ranking.js renders (unchanged from website/ranking). */
.rk-hero { padding: clamp(64px, 10vh, 112px) 0 0; }
.rk-hero-in { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end; }
.rk-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.6vw, 68px); line-height: 1.12; letter-spacing: .02em; margin: 0 0 18px; }
html[lang="en"] .rk-hero h1 { letter-spacing: -.01em; }
.rk-hero .sub { color: var(--text-2); font-size: 17px; max-width: 30em; margin: 0; }
.rk-optin { text-transform: none; letter-spacing: .04em; }
.rk-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 26px; font-size: 13px; color: var(--muted); }
.rk-status { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); }
.rk-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); }
.rk-status[data-status="error"]::before { background: #d9534f; box-shadow: none; }
.rk-status[data-status="loading"]::before { background: var(--muted); box-shadow: none; }
.rk-range { font-family: var(--mono); }
.rk-count { text-align: right; }
.rk-count .big-num { font-size: clamp(96px, 13vw, 180px); }
.rk-count-label, .rk-count-unit { display: block; font-size: 13px; color: var(--muted); }
.rk-count-label { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.rk-count-unit { margin-top: 10px; }

.rk-board-wrap { padding-top: clamp(48px, 8vh, 72px); }
.control-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; align-items: center; margin-bottom: 28px; }
.control-group { display: flex; align-items: center; gap: 14px; }
.control-label { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.segmented, .metric-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(235, 228, 216, .05); box-shadow: inset 0 0 0 1px var(--line); }
.segmented button, .metric-tabs button { font: inherit; font-size: 13.5px; color: var(--text-2); background: none; border: 0; padding: 7px 15px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.segmented button:hover, .metric-tabs button:hover { color: var(--text); }
.segmented button.active, .metric-tabs button.active { background: var(--text); color: var(--bg); font-weight: 600; }

.board { border-radius: 18px; padding: 8px 0 0; background: linear-gradient(180deg, rgba(235, 228, 216, .035), rgba(235, 228, 216, .01)); box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -40px rgba(0, 0, 0, .8); overflow: hidden; }
.board-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 22px 26px 18px; }
.board-heading .section-label { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; color: var(--muted); margin: 0 0 8px; }
.board-heading h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); margin: 0; letter-spacing: .02em; }
.board-basis { margin: 0; font-size: 13px; color: var(--muted); text-align: right; }
.board-head, .board-row { display: grid; grid-template-columns: 72px 1fr minmax(120px, auto) 64px; gap: 16px; align-items: center; padding: 0 26px; }
.board-head { height: 40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.board-head span:nth-child(3), .board-head span:nth-child(4) { text-align: right; }
.board-row { min-height: 68px; border-bottom: 1px solid var(--line); transition: background .2s; }
.board-row:hover { background: rgba(235, 228, 216, .03); }
.board-row .rank { font: 600 20px/1 -apple-system, "SF Pro Display", sans-serif; font-variant-numeric: tabular-nums; color: var(--muted); }
.board-row .rank.podium { color: var(--orange-hi); }
.board-row .person { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-width: 0; }
.board-row .person i { grid-row: span 2; font-style: normal; font-size: 22px; line-height: 1; }
.board-row .person b { font-weight: 600; font-size: 16px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-row .person small { font-size: 12px; color: var(--muted); }
.board-row .value { text-align: right; font: 600 20px/1 -apple-system, "SF Pro Display", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.board-row .coverage { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
/* the top three get room and light */
.board-row:nth-child(1) { min-height: 104px; background: radial-gradient(60% 120% at 0% 50%, rgba(238, 128, 53, .14), transparent 70%); }
.board-row:nth-child(1) .rank { font-size: 44px; background: linear-gradient(180deg, #ffd29b, var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.board-row:nth-child(1) .value { font-size: 34px; background: linear-gradient(180deg, #ffd29b, var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.board-row:nth-child(1) .person b { font-size: 20px; }
.board-row:nth-child(2), .board-row:nth-child(3) { min-height: 80px; }
.board-row:nth-child(2) .rank, .board-row:nth-child(3) .rank { font-size: 28px; }
.board-row:nth-child(2) .value, .board-row:nth-child(3) .value { font-size: 24px; }
.empty-row { padding: 56px 26px; text-align: center; color: var(--muted); }
.board-footer { display: flex; justify-content: space-between; gap: 16px; padding: 16px 26px 18px; font-size: 13px; color: var(--muted); }
.board-footer b { color: var(--text); font-variant-numeric: tabular-nums; }
.metric-note { margin: 16px 2px 0; font-size: 13px; color: var(--muted); }

.rk-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.rk-steps li { padding: 24px 24px 26px 0; }
.rk-steps li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.rk-steps .mono { font: 12px var(--mono); color: var(--orange-hi); letter-spacing: .1em; }
.rk-steps h3 { margin: 10px 0 8px; font-size: 17px; font-weight: 600; }
.rk-steps p { margin: 0; color: var(--text-2); font-size: 15px; }

@media (max-width: 820px) {
  .rk-hero-in { grid-template-columns: 1fr; gap: 24px; }
  .rk-count { text-align: left; }
  .board-heading { flex-direction: column; align-items: flex-start; }
  .board-basis { text-align: left; }
  .rk-steps { grid-template-columns: 1fr; }
  .rk-steps li, .rk-steps li + li { padding: 20px 0; border-left: 0; }
  .rk-steps li + li { border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .control-bar { flex-direction: column; align-items: stretch; }
  .control-group { flex-direction: column; align-items: flex-start; gap: 8px; }
  .metric-tabs, .segmented { width: 100%; }
  .metric-tabs button, .segmented button { flex: 1; padding: 7px 4px; font-size: 13px; }
  .board-head, .board-row { grid-template-columns: 44px 1fr auto; padding: 0 16px; gap: 10px; }
  .board-head span:nth-child(4), .board-row .coverage { display: none; }
  .board-heading, .board-footer { padding-left: 16px; padding-right: 16px; }
  .board-row:nth-child(1) .rank { font-size: 32px; } .board-row:nth-child(1) .value { font-size: 24px; }
  .board-footer { flex-direction: column; }
}
.board .rows { margin: 0; padding: 0; border-top: 0; list-style: none; }