/* Rankings page. Everything else comes from home.css; this is only the table
   and the year control, which no other page has. */
.rk-main{padding-top:48px; padding-bottom:72px; display:flex; flex-direction:column; gap:28px}
.rk-main h1{font-size:clamp(40px,6vw,72px); letter-spacing:-.035em; line-height:1}

.rk-controls{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px;
  padding:20px 24px; border-radius:20px; background:var(--panel);
}
.yearpick{display:flex; align-items:center; gap:6px}
.ybtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px; border:1px solid var(--line-2);
  background:#fff; color:var(--ink); font-size:20px; text-decoration:none; line-height:1;
}
.ybtn:hover{background:var(--navy); border-color:var(--navy); color:#fff}
.ybtn.off{background:var(--panel); border-color:var(--line-3); color:var(--ink-dim)}
.ynow{
  min-width:96px; text-align:center; font-family:var(--display);
  font-size:34px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.rkfilter{
  display:flex; align-items:center; gap:8px; height:46px; padding:0 14px;
  border-radius:12px; border:1px solid var(--line-3); background:#fff;
  flex:1 1 240px; min-width:0;
}
.rkfilter input{
  flex:1; min-width:0; border:0; outline:none; background:transparent;
  font:inherit; font-size:14px; color:var(--ink);
}

.rk-tables{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr)); gap:40px 48px}
.rk-col{display:flex; flex-direction:column}
.rk-cap{font-size:24px; font-weight:800; margin-bottom:10px}
.rk-cap.g{color:var(--girl-ink)}
.rk-cap.b{color:var(--boy-ink)}

.rkhead,.rkrow{
  display:grid; grid-template-columns:40px minmax(0,1fr) minmax(120px,1.1fr) 76px;
  align-items:center; gap:10px;
}
.rkhead{
  padding:8px 0; font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); border-bottom:2px solid var(--line-2);
}
.rkhead.g{border-bottom-color:var(--girl)}
.rkhead.b{border-bottom-color:var(--boy)}
.rkhead .r{text-align:right}
.rkrow{
  min-height:48px; border-bottom:1px solid var(--line);
  color:var(--ink); text-decoration:none;
}
.rkrow:hover{background:var(--panel)}
.rkrow .rk{font-family:var(--mono); font-size:14px; color:var(--ink-3)}
.rkrow .nm{
  font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rkrow .bar{display:flex; align-items:center; gap:10px; min-width:0}
.rkrow .bar svg{flex:1; height:10px; min-width:40px}
.rkrow .ct{font-variant-numeric:tabular-nums; font-size:15px; min-width:56px; text-align:right}
.rkrow .mv{text-align:right; font-size:13px; font-weight:700}

@media (max-width:760px){
  .rk-main{padding-top:32px}
  .rkhead,.rkrow{grid-template-columns:32px minmax(0,1fr) minmax(90px,1fr) 60px; gap:8px}
  .rkrow .nm{font-size:17px}
  .rkrow .ct{min-width:46px; font-size:14px}
  .ynow{font-size:28px; min-width:76px}
}

/* show-every-name */
.rk-all{display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px 0 0}
.rk-allbtn{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px;
  padding:0 28px; border:1px solid var(--line-2); border-radius:14px;
  background:#fff; color:var(--ink); font:inherit; font-weight:700; font-size:16px; cursor:pointer;
}
.rk-allbtn:hover{background:var(--navy); border-color:var(--navy); color:#fff}
.rk-allbtn[disabled]{opacity:.55; cursor:default}
.rk-allstat{margin:0; font-size:13px; color:var(--ink-3); text-align:center}