/* Trainer and athlete rankings are separate routes and document sections. */
.startup-notice{position:fixed;z-index:100;inset:auto 18px 18px;max-width:660px;margin:auto;padding:18px 20px;border:1px solid #d4dcd4;border-radius:6px;background:#fff;color:#201f21;box-shadow:0 6px 24px #201f2126;font:13px/1.8 'DM Sans','Noto Sans Georgian',sans-serif}
.startup-notice p{margin:0 0 12px}
.startup-notice button{padding:10px 16px;border:0;border-radius:3px;background:#201f21;color:#fff;font:inherit;cursor:pointer}
.tennis-directory.ranking-page[hidden]{display:none!important}
.tennis-directory.ranking-page{padding:48px 0 72px;background:#fff}
.ranking-page-heading{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:24px;margin:0 0 28px;padding-bottom:24px;border-bottom:1px solid #dfe6df}
.ranking-sport{display:block;margin-bottom:12px;color:#738276;font-size:10px;font-weight:600;letter-spacing:.13em}
.ranking-page-heading h1{display:flex;align-items:center;gap:12px;margin:0;color:var(--ink);font-size:clamp(25px,3vw,36px);font-weight:700;line-height:1.45;letter-spacing:-.03em;overflow-wrap:anywhere}
.ranking-page-heading h1::before{content:'';flex:none;width:14px;height:17px;clip-path:polygon(50% 0,100% 100%,0 100%);background:var(--green)}
.athlete-directory .ranking-page-heading h1::before{background:var(--blue)}
.ranking-page-heading h1:focus{outline:none}
.ranking-page-navigation{box-sizing:border-box;display:flex;gap:6px;flex-wrap:wrap;padding:5px;border:1px solid #c9d5cc;border-radius:7px;background:#eaf0eb;box-shadow:0 5px 14px #201f2110}
.ranking-page-navigation>a{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-width:145px;min-height:48px;padding:12px 18px;border:1px solid #c6d2c9;border-radius:4px;background:#fff;color:#35463a;font-size:13px;font-weight:700;line-height:1.6;text-align:center;text-decoration:none;transition:transform .14s,box-shadow .14s,background .14s;touch-action:manipulation}
.ranking-page-navigation>a[aria-current=page]{border-color:#2b9644;background:var(--green);color:#14291a;box-shadow:0 3px 0 #287b3d,0 4px 9px #287b3d22}
.athlete-directory .ranking-page-navigation>a[aria-current=page]{border-color:#0796cc;background:var(--blue);color:#102c38;box-shadow:0 3px 0 #087fa6,0 4px 9px #087fa622}
.ranking-page-navigation>a:not([aria-current=page]):hover{border-color:#839e89;background:#f9fcf9;transform:translateY(-1px)}
.ranking-page-navigation>a:active{transform:translateY(1px)}
.ranking-page-navigation>a:focus-visible{outline:2px solid #201f21;outline-offset:3px}
.tennis-directory.ranking-page .rank-category{min-width:0;margin:0}
.tennis-directory.ranking-page .rank-filters{grid-template-columns:minmax(220px,1.5fr) minmax(150px,.8fr) minmax(180px,1fr);margin-bottom:14px}
.tennis-directory.ranking-page.athlete-directory .rank-filters{grid-template-columns:minmax(220px,1.5fr) minmax(150px,.8fr) minmax(180px,1fr);margin-bottom:24px}
.tennis-directory.ranking-page .rank-search{grid-column:auto}
.tennis-directory.ranking-page .rank-filters input,.tennis-directory.ranking-page .rank-filters select{height:43px;font-size:12px}
.tennis-directory.ranking-page.athlete-directory .rank-filters input:focus,.tennis-directory.ranking-page.athlete-directory .rank-filters select:focus{outline-color:var(--blue);border-color:var(--blue)}
.rank-tier-guide{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 24px}
.rank-tier-guide>button{position:relative;display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:8px 14px;border:1px solid var(--rank-tier-frame);border-radius:4px;background:var(--rank-tier-surface);color:var(--rank-tier-ink);font:inherit;font-size:11px;font-weight:600;line-height:1.7;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;touch-action:manipulation}
.rank-tier-guide>button::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--rank-tier-frame)}
.rank-tier-guide>button:hover{box-shadow:0 3px 9px #201f2114}
.rank-tier-guide>button:focus-visible{outline:2px solid #201f21;outline-offset:3px}
.tier-toggle-mark{position:absolute;display:grid;place-items:center;top:-7px;right:-7px;width:17px;height:17px;border:1px solid var(--rank-tier-frame);border-radius:50%;background:#fff;color:var(--rank-tier-ink);font:700 14px/1 'DM Sans',sans-serif;box-shadow:0 2px 5px #201f211c;opacity:0;transform:scale(.75);transition:opacity .14s,transform .14s;pointer-events:none}
.rank-tier-guide>button:hover .tier-toggle-mark,.rank-tier-guide>button:focus-visible .tier-toggle-mark,.rank-tier-guide>button[aria-pressed=false] .tier-toggle-mark{opacity:1;transform:scale(1)}
.rank-tier-guide>button[aria-pressed=false]{border-color:#cfd6d0;border-style:dashed;background:#f2f4f2;color:#818b83}
.rank-tier-guide>button[aria-pressed=false]>span:first-child{text-decoration:line-through}
.rank-tier-guide>button[aria-pressed=false]::before{opacity:.4}
.ranking-filter-toolbar{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.tennis-directory.ranking-page .ranking-filter-toolbar .rank-filters{flex:1;min-width:0;grid-template-columns:minmax(180px,1.4fr) minmax(130px,.9fr) minmax(145px,1fr);gap:8px;margin:0}
.ranking-filter-toolbar .rank-tier-guide{flex:none;flex-wrap:nowrap;max-width:100%;gap:8px;margin:0}
.ranking-filter-toolbar .rank-tier-guide>button{box-sizing:border-box;min-height:43px;padding:8px 10px;gap:6px;font-size:10px;white-space:nowrap}
.ranking-page [data-rank-tier=premium]{--rank-tier-frame:#d4af37;--rank-tier-surface:linear-gradient(115deg,#fff8e5,#fffdf7);--rank-tier-ink:#947018;--rank-tier-shadow:#b78c2520;--rank-tier-hover:#b38b27}
.ranking-page [data-rank-tier=mid]{--rank-tier-frame:#8dd9fb;--rank-tier-surface:#eff9fe;--rank-tier-ink:#087fa6;--rank-tier-shadow:#148db416;--rank-tier-hover:#2faedc}
.ranking-page [data-rank-tier=beginner]{--rank-tier-frame:#8dcc9d;--rank-tier-surface:#f1faf3;--rank-tier-ink:#2c7540;--rank-tier-shadow:#267b3b16;--rank-tier-hover:#42a85b}
.tennis-directory.ranking-page .rank-card{height:256px;min-height:256px}
.tennis-directory.ranking-page .rank-card .rank-avatar{width:clamp(120px,34%,180px);height:100%}
.tennis-directory.ranking-page .rank-card .rank-details strong{padding-right:0}
.tennis-directory.ranking-page .rank-card[data-rank-tier]{border-color:var(--rank-tier-frame);background:var(--rank-tier-surface);box-shadow:0 7px 18px var(--rank-tier-shadow)}
.tennis-directory.ranking-page .rank-card[data-rank-tier]:hover{border-color:var(--rank-tier-hover);box-shadow:0 9px 20px var(--rank-tier-shadow)}
.tennis-directory.ranking-page .rank-card[data-rank-tier] .rank-rating{color:var(--rank-tier-ink)}
.tennis-directory.ranking-page .rank-list,.tennis-directory.ranking-page .own-rank-slot:not(:empty){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tennis-directory.ranking-page .rank-list .rank-empty{grid-column:1/-1;padding:40px 22px;text-align:center;background:#fff}
.tennis-directory.ranking-page .rank-pagination{margin-top:22px}
@media(max-width:1100px){
  .ranking-filter-toolbar{flex-wrap:wrap;gap:14px}
  .tennis-directory.ranking-page .ranking-filter-toolbar .rank-filters{flex-basis:100%}
  .ranking-filter-toolbar .rank-tier-guide{flex-wrap:wrap}
}
@media(max-width:1000px){
  .tennis-directory.ranking-page .rank-filters,.tennis-directory.ranking-page.athlete-directory .rank-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tennis-directory.ranking-page .rank-search{grid-column:1/-1}
  .tennis-directory.ranking-page .ranking-filter-toolbar .rank-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .tennis-directory.ranking-page{padding:30px 0 48px}
  .ranking-page-heading{align-items:flex-start;flex-direction:column;gap:20px;margin-bottom:22px;padding-bottom:20px}
  .ranking-page-heading h1{font-size:27px}
  .tennis-directory.ranking-page .rank-list,.tennis-directory.ranking-page .own-rank-slot:not(:empty){grid-template-columns:1fr}
}
@media(max-width:560px){
  .ranking-page-heading h1{font-size:24px}
  .ranking-page-navigation{width:100%;gap:6px;padding:4px}
  .ranking-page-navigation>a{flex:1;min-width:0;padding:11px 12px;text-align:center;font-size:12px}
  .tennis-directory.ranking-page .rank-search{grid-column:1/-1}
  .tennis-directory.ranking-page .rank-filters select,.tennis-directory.ranking-page .rank-filters input{font-size:11px}
  .tennis-directory.ranking-page .rank-card,.tennis-directory.ranking-page .rank-card.rank-podium{height:auto;min-height:240px;align-items:stretch}
  .tennis-directory.ranking-page .rank-card .rank-avatar{height:auto;min-height:224px;align-self:stretch}
  .tennis-directory.ranking-page .rank-card .rank-details{padding:22px 4px 10px 0}
  .tennis-directory.ranking-page .rank-card .rank-details strong{padding-right:0}
}
@media(hover:none){.tier-toggle-mark{opacity:.85;transform:scale(1)}}

/* The incoming page is a solid sheet that covers the previous ranking. */
body.ranking-transitioning main{position:relative;isolation:isolate;overflow:clip;min-height:calc(100dvh - 76px)}
.ranking-transitioning .ranking-page.is-ranking-outgoing{position:absolute;inset:0 0 auto;width:100%;z-index:1;pointer-events:none;will-change:transform,opacity}
.ranking-transitioning .ranking-page.is-ranking-incoming{position:relative;z-index:2;will-change:transform}
.ranking-page.is-ranking-incoming[data-ranking-direction=from-right]{animation:ranking-cover-from-right .42s cubic-bezier(.2,.8,.2,1) both}
.ranking-page.is-ranking-incoming[data-ranking-direction=from-left]{animation:ranking-cover-from-left .42s cubic-bezier(.2,.8,.2,1) both}
.ranking-page.is-ranking-outgoing[data-ranking-direction=from-right]{animation:ranking-underlay-to-left .42s ease-out both}
.ranking-page.is-ranking-outgoing[data-ranking-direction=from-left]{animation:ranking-underlay-to-right .42s ease-out both}
@keyframes ranking-cover-from-right{from{transform:translate3d(102%,0,0);box-shadow:-22px 0 42px #201f2133}to{transform:translate3d(0,0,0);box-shadow:-3px 0 12px #201f2100}}
@keyframes ranking-cover-from-left{from{transform:translate3d(-102%,0,0);box-shadow:22px 0 42px #201f2133}to{transform:translate3d(0,0,0);box-shadow:3px 0 12px #201f2100}}
@keyframes ranking-underlay-to-left{from{transform:translate3d(0,0,0) scale(1);opacity:1}to{transform:translate3d(-4%,0,0) scale(.985);opacity:.82}}
@keyframes ranking-underlay-to-right{from{transform:translate3d(0,0,0) scale(1);opacity:1}to{transform:translate3d(4%,0,0) scale(.985);opacity:.82}}
@media(prefers-reduced-motion:reduce){.ranking-page.is-ranking-incoming,.ranking-page.is-ranking-outgoing{animation:none!important}}
