/* Baseline home prototype. Tokens and the baseline rule come from ../fd.css; rows from ../list.css. */
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:8px;z-index:10;background:var(--ball);padding:10px 14px;border-radius:999px}

/* hero: the number stands on the baseline, today's top players line up on it */
.hh{padding-top:28px}
.hh h1{font:800 clamp(34px,5.2vw,60px)/1 var(--head);letter-spacing:-.04em;margin:0;max-width:13em}
.hh .stand{margin-top:22px}
.hh .big{font-size:clamp(120px,19vw,250px)}
.hh .lineup a{width:clamp(38px,4.2vw,58px)}
.hh .caption .lead{max-width:17em}
.hh .caption .best{max-width:30em}

/* search */
.srch{position:relative;margin-top:26px;max-width:720px}
.srch label{display:block;font-weight:600;font-size:15px;margin-bottom:8px}
.srch .box{display:flex;align-items:center;gap:10px;background:var(--paper);border:2px solid var(--court);border-radius:999px;padding:0 18px;min-height:56px}
.srch .box svg{flex:none;color:var(--mute)}
.srch input{flex:1;min-width:0;border:0;background:none;font:400 17px var(--body);color:var(--court);padding:14px 0;outline:none}
.srch input::placeholder{color:#6b716d}
.srch .box:focus-within{box-shadow:0 0 0 4px var(--ball)}
.qres{list-style:none;margin:8px 0 0;padding:0;display:none;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.qres.on{display:block}
.qres li+li{border-top:1px solid var(--line)}
.qres a{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;padding:10px 14px;min-height:56px;text-decoration:none}
.qres a:hover,.qres a:focus-visible{background:#eef0ea;outline:none}
.qres img,.qres .ini,.qres .ph,.qres .lg{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#fff;border:1px solid var(--line);padding:0}
.qres .lg{border-radius:10px;object-fit:contain;padding:3px}
.qres .ph,.qres .ini{display:grid;place-items:center;font:800 13px var(--head);color:var(--mute);border-radius:10px}
.qres .ini{border-radius:50%;background:var(--court);color:#fff}
.qres b{display:block;font-weight:600}
.qres small{display:block;color:var(--mute);font-size:14px;line-height:1.35}
.qres .none{padding:14px;color:var(--mute)}

/* globe + side column */
.glw{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;margin-top:18px;align-items:start}
.hglobe{position:relative;width:100%;aspect-ratio:1/1;max-height:640px;overflow:hidden;border-radius:4px}
.hglobe .maplibregl-canvas{outline:none}
.hglobe .maplibregl-cooperative-gesture-screen{font:500 15px/1.4 var(--body);background:rgba(15,21,18,.78)}
.side{min-width:0}
.key{list-style:none;margin:0;padding:0;font-size:15px;display:flex;flex-direction:column;gap:8px}
.key li{display:flex;align-items:center;gap:10px}
.key i{width:16px;height:16px;border-radius:50%;flex:none}
.key i.j{background:var(--ball);border:2px solid var(--court)}
.key i.o{background:#fff;border:2px solid var(--blue)}
.nearb{margin-top:16px;appearance:none;background:none;border:1px solid var(--court);border-radius:999px;padding:0 20px;min-height:48px;font:500 15px var(--body);color:var(--court);cursor:pointer;transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.nearb:active{transform:scale(.97)}
.nearb:disabled{opacity:.6;cursor:progress}
@media(hover:hover){.nearb:hover{background:var(--court);color:#fff}}
.pick{margin-top:20px;border-top:var(--base) solid var(--court);padding-top:14px}
.hint{color:var(--mute);margin:0;font-size:15px}.hint.pad{padding:20px}
.pk-h{display:flex;gap:12px;align-items:flex-start}
.pk-h .lg,.pk-h .ph{width:48px;height:48px;border-radius:10px;object-fit:contain;background:#fff;border:1px solid var(--line);padding:4px;flex:none;display:grid;place-items:center;font:800 14px var(--head);color:var(--mute)}
.pk-h b{display:block;font:800 21px/1.1 var(--head);letter-spacing:-.025em}
.pk-h span{display:block;color:var(--mute);font-size:14px;margin-top:3px}
.pk-n{margin:14px 0 0;font-size:15px}.pk-n b{font:800 30px/1 var(--head);letter-spacing:-.04em;color:var(--blue);margin-right:4px}
.pk-b{margin:6px 0 0;font-size:15px}.pk-b a{text-decoration-color:var(--line)}
.pk-f{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pk-f a{display:block;width:40px;height:40px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.pk-f img,.pk-f .ini{width:100%;height:100%;object-fit:cover;display:grid;place-items:center;background:var(--court);color:#fff;font:800 12px var(--head)}
.pk-t{margin:12px 0 0;font-size:14px;color:var(--mute);border-left:3px solid var(--ball);padding-left:10px}
.go{display:inline-flex;align-items:center;min-height:48px;margin-top:14px;padding:0 20px;background:var(--ball);color:var(--court);border-radius:999px;text-decoration:none;font-weight:600;font-size:15px;transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.go:active{transform:scale(.97)}
@media(hover:hover){.go:hover{background:#e9ef3a}}
@media(prefers-reduced-motion:no-preference){.pk{animation:pkin 220ms cubic-bezier(.23,1,.32,1) both}@keyframes pkin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}}
.nh{margin:0;font:800 19px var(--head);letter-spacing:-.02em}
.nl{list-style:none;margin:8px 0 0;padding:0}
.nl button{appearance:none;background:none;border:0;border-bottom:1px solid var(--line);width:100%;display:flex;justify-content:space-between;gap:12px;align-items:center;text-align:left;padding:10px 0;min-height:56px;cursor:pointer;font:inherit;color:inherit}
.nl b{display:block;font-weight:600}.nl small{display:block;color:var(--mute);font-size:14px}
.nl em{font-style:normal;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}

/* most pros: list.css rows, numbers smaller than the hero */
.al.top{margin-top:18px}
.al .faces .ini{display:grid}

.miss{margin:22px 0 0;font-size:14px;color:var(--mute);max-width:46em}

/* by country: the old home's country cards */
.bycountry h2 span{font:500 15px var(--body);letter-spacing:0;color:var(--mute);margin-left:8px}
.cgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:18px}
.cc{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--line);border-radius:4px;padding:16px 14px 14px;text-decoration:none;color:var(--court);min-width:0;transition:border-color 160ms ease,transform 160ms cubic-bezier(.23,1,.32,1)}
.cc:active{transform:scale(.98)}
.cc:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(hover:hover){.cc:hover{border-color:var(--court)}}
.cc .fl{font-size:22px;line-height:1;margin-bottom:10px}
.cc .t{font:600 17px/1.25 var(--body)}
.cc .big{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;margin-top:4px;font:800 26px/1.1 var(--head);letter-spacing:-.03em;color:var(--blue);font-variant-numeric:tabular-nums}
.cc .big small{font:400 13px var(--body);letter-spacing:0;color:var(--mute)}
.cc .m{font-size:13px;color:var(--mute);margin-top:2px}
.allc{margin:16px 0 0}

@media(max-width:960px){.glw{grid-template-columns:1fr;gap:18px}.cgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){
  .hh .big{font-size:clamp(110px,34vw,150px)}
  .hglobe{aspect-ratio:1/1}
  .cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bycountry h2 span{display:block;margin:4px 0 0}
}
@media(prefers-reduced-motion:reduce){.nearb,.go,.cc{transition:none}.nearb:active,.go:active,.cc:active{transform:none}}
@media(max-width:640px){.hh .caption p{margin:0}}
.hh .caption p{margin:0}
.hglobe .maplibregl-cooperative-gesture-screen{background:transparent;align-items:flex-end;justify-content:center;padding:0 12px 14px}
.hglobe .maplibregl-cooperative-gesture-screen .maplibregl-mobile-message,.hglobe .maplibregl-cooperative-gesture-screen .maplibregl-desktop-message{background:var(--court);color:#fff;border-radius:999px;padding:10px 16px;font:500 14px/1.3 var(--body);max-width:30em;text-align:center}
/* 2026-10-09 card: logo sits on the name's first line; the pill never wraps */
.go{white-space:nowrap;min-height:44px}
@media(max-width:640px){.pk .go{display:flex;justify-content:center;width:100%}}
/* check by category (2026-10-12): the academy pages' tab row with a lead word, the list under it swaps in place */
#cats .tabs{flex-wrap:wrap;align-items:baseline;gap:0 26px;overflow:visible}
#audList>.al{animation:catin .18s cubic-bezier(.23,1,.32,1)}
@keyframes catin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#audList>.al{animation:none}}
@media(max-width:640px){#cats .tabs{gap:0 18px}#cats .tabs button{font-size:15px}}
/* country under the tabs (2026-10-12): the Who page's dropdown (who.css .w-sel), the same dress; counted within the open group */
#cats .catbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 26px;margin-top:18px;border-bottom:1px solid var(--line)}
#cats .catbar .tabs{margin:0;border-bottom:0;flex:0 1 auto}
#cats .c-f{margin:0 0 7px}
#cats .c-f label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.c-sw{position:relative;display:inline-block;max-width:100%}
.c-sel{appearance:none;-webkit-appearance:none;display:block;min-height:38px;min-width:200px;max-width:100%;padding:0 40px 0 12px;font:500 15px/1.2 var(--body);color:var(--court);background:var(--paper);border:1px solid var(--court);border-radius:4px;cursor:pointer;font-variant-numeric:tabular-nums;transition:background-color 160ms ease,color 160ms ease,box-shadow 160ms ease}
.c-sel option{color:var(--court);background:#fff}
.c-chev{position:absolute;right:11px;top:50%;margin-top:-9px;pointer-events:none;color:var(--court);transition:color 160ms ease}
@media(hover:hover){.c-sel:hover{background:#fff}}
.c-sel:focus-visible{outline:none;box-shadow:0 0 0 4px var(--ball)}
.c-sw.set .c-sel{background:var(--court);color:var(--chalk)}
.c-sw.set .c-chev{color:var(--ball)}
@media(max-width:640px){#cats .c-f{flex:1 1 100%;margin:4px 0 10px}.c-sw{display:block}.c-sel{width:100%;min-width:0;min-height:44px}}
@media(prefers-reduced-motion:reduce){.c-sel,.c-chev{transition:none}}