/* The two world rankings (docs/design/rangliste-vrs.html, rangliste-vores.html):
   the region filter, the table, the reading, the source and the link to the
   other list. Valve's in the site's orange, ours in the Americas cyan, as in
   the mockups. Needs base.css. */
.ranking--vrs{--c:var(--sys);--ct:var(--sys-text);--on-c:var(--on-accent)}
.ranking--elo{--c:#12cdf0;--ct:#12cdf0;--on-c:#03222a}
.ranking .kick{color:var(--ct)}

/* Elo's score, the one place it is shown (R6) */
.rl-score{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);margin-top:2.2rem;scroll-margin-top:90px}
.rl-score>div{background:var(--panel);padding:1.2rem 1.35rem}
.rl-score__k{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2)}
.rl-score__v{font-family:var(--disp);font-weight:700;font-size:1.9rem;line-height:1.1;margin-top:.3rem;font-variant-numeric:tabular-nums}
.rl-score__v small{font-size:.5em;margin-left:.05em}
.rl-score__v--sm{font-size:1.3rem;margin-top:.55rem}
.rl-score__s{font-family:var(--mono);font-size:.66rem;color:var(--muted-2);margin-top:.35rem}
.rl-how{color:var(--muted);max-width:72ch;margin:1.2rem 0 0;font-size:.9rem}

.rl-bar{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin:1.2rem 0 1.4rem}
.rl-seg{display:flex;flex-wrap:wrap;gap:1px;background:var(--line)}
.rl-seg button{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;background:var(--panel-2);color:var(--muted-2);
  border:0;padding:.6rem 1rem;cursor:pointer}
.rl-seg button:hover:not(.on){color:var(--text-2)}
.rl-seg button.on{background:var(--rc);color:#06131a}
/* Find a team among every row, not only the fifty shown: under 480 px */
.rl-find{display:none;align-items:center;gap:.5rem;background:var(--panel-2);border:1px solid var(--line);padding:0 .7rem;color:var(--muted-2)}
.rl-find:focus-within{border-color:var(--c)}
.rl-find input{background:none;border:0;color:var(--text);font:inherit;font-size:.9rem;width:12rem;min-height:2.3rem;outline:none;-webkit-appearance:none;appearance:none}
.rl-find input::placeholder{color:var(--muted-2)}
.rl-none{color:var(--muted);font-size:.92rem;padding:1rem 0;margin:0;border-top:1px solid var(--line)}
.rl-none[hidden]{display:none}
.rl-count{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);margin-left:auto}

.rl-thd,.rl-row{display:grid;grid-template-columns:2.8rem minmax(0,1fr) 6rem 6.2rem 10.5rem;gap:1.3rem;align-items:center}
.rl-thd span{white-space:nowrap}
.rl-thd{padding:.5rem 0 .7rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.rl-thd span:nth-child(n+3){text-align:right}
.rl-row{padding:.8rem 0;scroll-margin-top:110px}
.rl-row{border-top:1px solid var(--line)}
.rl-row[hidden]{display:none}
.rl-row--target{background:color-mix(in srgb,var(--c) 10%,transparent);box-shadow:inset 3px 0 0 var(--c);margin:0 -.8rem;padding-left:.8rem;padding-right:.8rem}
.rl-rk{font-family:var(--disp);font-weight:700;font-size:1.15rem;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted-2)}
.rl-rk .r,.by-region .rl-rk .w{display:none}
.by-region .rl-rk .r{display:inline}
.rl-nm{font-family:var(--disp);font-weight:600;font-size:1.06rem;text-transform:uppercase;display:flex;align-items:center;gap:.55rem;min-width:0}
.rl-nm i{width:8px;height:8px;border-radius:50%;flex:none}
.rl-nm img{width:18px;height:18px;object-fit:contain;flex:none}
.rl-nm a,.rl-nm span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit;text-decoration:none}
.rl-nm a:hover{text-decoration:underline;text-underline-offset:3px}
.rl-nm small{font-family:var(--mono);font-weight:400;font-size:.62rem;letter-spacing:.06em;color:var(--muted-2);white-space:nowrap}
.rl-row--earlier .rl-nm{color:var(--muted)}
.rl-val{font-family:var(--disp);font-weight:700;font-size:1.05rem;text-align:right;font-variant-numeric:tabular-nums}
.rl-chg{font-family:var(--mono);font-size:.74rem;text-align:right;color:var(--muted-2)}
.rl-chg.up{color:var(--gain)}.rl-chg.dn{color:var(--lose)}
.rl-mv{font-family:var(--disp);font-weight:700;font-size:.98rem;text-align:right;color:var(--muted-2);font-variant-numeric:tabular-nums}
.rl-mv.up{color:var(--gain)}.rl-mv.dn{color:var(--lose)}
.rl-gap{text-align:right;white-space:nowrap}
.rl-gap .r,.by-region .rl-gap .w{display:none}
.by-region .rl-gap .r{display:inline}
.rl-gap b{display:block;font-family:var(--disp);font-weight:700;font-size:.98rem;color:var(--text-2);font-variant-numeric:tabular-nums}
.rl-gap b.up{color:var(--gain)}.rl-gap b.dn{color:var(--lose)}
.rl-gap small,.rl-gap__none{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;color:var(--muted-2);margin-top:.1rem}
.rl-more{padding:1.2rem 0 .2rem;border-top:1px solid var(--line)}
.rl-more[hidden]{display:none}
.rl-more button{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;background:var(--panel-2);color:var(--muted-2);
  border:1px solid var(--line);padding:.6rem 1.1rem;cursor:pointer;width:100%}
.rl-more button:hover{color:var(--text)}
.rl-read{margin:1.6rem 0 0;padding-left:1rem;border-left:2px solid var(--c);font-size:.95rem;line-height:1.6;color:var(--text-2);max-width:78ch}
.rl-src{font-size:.92rem;line-height:1.7;color:var(--muted);margin:1.6rem 0 0;padding-top:1.3rem;border-top:1px solid var(--line);max-width:80ch}
.rl-src b{color:var(--text-2);font-weight:600}
.rl-x{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;background:var(--panel-2);border-left:3px solid var(--xc);padding:1.4rem 1.6rem;margin-top:3rem;text-decoration:none;color:inherit}
.rl-x:hover{background:var(--panel)}
.rl-x__t{font-family:var(--disp);font-weight:700;font-size:1.3rem;text-transform:uppercase;line-height:1.1}
.rl-x__s{font-size:.9rem;color:var(--muted);max-width:56ch;margin-top:.35rem}
.rl-x__b{margin-left:auto;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;background:var(--xc);color:var(--xon);
  padding:.65rem 1.15rem;clip-path:var(--pill);white-space:nowrap}
@media(max-width:760px){
  /* A phone: the panel's padding and the number columns give the name its room back (at 375 px the
     name had 4 px of it and read as nothing); names wrap at spaces, and "we rank them 3 higher" reads
     "3 higher". */
  .ranking .lv2{padding:1.2rem .9rem 1.4rem}
  .rl-thd,.rl-row{grid-template-columns:1.9rem minmax(0,1fr) 3.4rem 5.6rem;gap:.55rem}
  .rl-rk{font-size:1rem}
  .rl-nm{font-size:.98rem;gap:.4rem}
  .rl-nm a,.rl-nm span{white-space:normal;line-height:1.1}
  .ranking--elo .rl-thd,.ranking--elo .rl-row{grid-template-columns:1.9rem minmax(0,1fr) 3.4rem 4.3rem}
  .rl-gap__long{display:none}
  .ranking--vrs .rl-thd,.ranking--vrs .rl-row{grid-template-columns:1.9rem minmax(0,1fr) 3.4rem 2.8rem}
  .rl-val{font-size:.98rem}
  .rl-gap{white-space:normal}
  .rl-gap small{line-height:1.25}
  .rl-thd span:nth-child(4),.rl-row .rl-chg{display:none}
  .rl-count{margin-left:0;width:100%}
  .rl-x__b{margin-left:0}
}
/* Under 480 px (the review of 2026-10-01): the panel to the edge, the region chips on one line that scrolls,
   their dots the legend, a search over every row, the header held under the menu, and the whole row the link. */
@media(max-width:480px){
  .ranking .lv2{padding:.4rem 14px 1.4rem;clip-path:none}
  .rl-bar{gap:.6rem}
  .rl-seg{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;background:none;gap:6px;width:calc(100% + 3rem);margin:0 -1.5rem;padding:0 1.5rem}
  .rl-seg::-webkit-scrollbar{display:none}
  .rl-seg button{flex:none;min-height:44px;padding:0 1rem}
  .rl-seg button i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rc);margin-right:.5rem;vertical-align:.05rem}
  .rl-seg button.on i{background:#06131a}
  .rl-find{display:flex;width:100%;order:-1}
  .rl-find input{width:100%;min-height:44px;font-size:1rem}
  .ranking .rl-list{overflow:visible}
  .rl-thd{position:sticky;top:56px;z-index:5;background:var(--panel);padding:.7rem 0 .6rem}
  .rl-row{position:relative;min-height:52px;padding:.45rem 0}
  .rl-rk{display:flex;align-items:center;justify-content:flex-end;gap:.45rem}
  .rl-rk::before{content:'';width:3px;height:22px;background:var(--rc);flex:none;margin-right:auto}
  .rl-nm>i{display:none}
  .rl-thd,.rl-row,.ranking--vrs .rl-thd,.ranking--vrs .rl-row{grid-template-columns:2.6rem minmax(0,1fr) 3.4rem 2.8rem}
  .ranking--elo .rl-thd,.ranking--elo .rl-row{grid-template-columns:2.6rem minmax(0,1fr) 3.4rem 4.3rem}
  .rl-legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
  .rl-legend i{display:inline-block;width:3px;height:12px;margin-right:.4rem;vertical-align:-2px}
  .rl-nm a::after{content:'';position:absolute;inset:0}
  .rl-row:has(.rl-nm a):active{background:color-mix(in srgb,var(--text) 4%,transparent)}
  .rl-nm a:focus-visible{outline:none}
  .rl-row:has(.rl-nm a:focus-visible){outline:2px solid var(--c);outline-offset:-2px}
}
/* motion: row hover, as on Race to the Major's table. Not under 480 px, where the whole row is the link. */
@media(hover:hover) and (min-width:481px){
  .rl-row{position:relative}
  .rl-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sys);transform:scaleY(0);transition:transform var(--d-fast) var(--ease-out)}
  .rl-row .rl-nm{transition:transform var(--d-fast) var(--ease-out)}
  .rl-row:hover::before{transform:none}
  .rl-row:hover .rl-nm{transform:translateX(4px)}
}