/* profiles-hub.css — the one Profiles hub for every sport (preview 2026-11-10). Pairs with profiles-hub.js.
   Site tokens: ground #1C1B19, stone card #F7F6F4, inset #EDECE9, ink #232220, muted #5B5A58, gold #E7B937.
   Sport accent: football blue, racing green, NBA gold, tennis purple, F1 red (gold stays the brand). */
.phub{
  --ph-acc:#E7B937; --ph-acc-ink:#8A6A10; --ph-stone:#F7F6F4; --ph-inset:#EDECE9; --ph-ink:#232220; --ph-mute:#5B5A58;
  --ph-line:rgba(35,34,32,.12); --ph-ground:#1C1B19; --ph-mono:'JetBrains Mono',ui-monospace,monospace;
  margin:4px 0 18px; font-family:Inter,system-ui,-apple-system,sans-serif; color:var(--ph-ink); position:relative;
}
.phub[data-sport=football]{--ph-acc:#3B82F6;--ph-acc-ink:#1D4ED8}
.phub[data-sport=racing]{--ph-acc:#22C55E;--ph-acc-ink:#15803D}
.phub[data-sport=nba]{--ph-acc:#FDB927;--ph-acc-ink:#8A5A00}
.phub[data-sport=tennis]{--ph-acc:#A855F7;--ph-acc-ink:#7E22CE}
.phub[data-sport=f1]{--ph-acc:#EF4444;--ph-acc-ink:#B91C1C}
.phub *{box-sizing:border-box}
.phub button{font-family:inherit}

/* console strip: the dark "instrument" line above the search */
.phub-console{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px 10px;color:#CFCBC4}
.phub-id{display:flex;align-items:center;gap:10px;min-width:0}
.phub-pulse{width:8px;height:8px;border-radius:50%;background:var(--ph-acc);box-shadow:0 0 0 0 var(--ph-acc);animation:phPulse 2.4s ease-out infinite;flex:none}
@keyframes phPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ph-acc) 55%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.phub-kick{font:700 10.5px/1 var(--ph-mono);letter-spacing:.16em;text-transform:uppercase;color:#fff}
.phub-sport{font:700 10.5px/1 var(--ph-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ph-acc)}
.phub-scope{font:500 10px/1 var(--ph-mono);letter-spacing:.1em;text-transform:uppercase;color:#9C978E;border:1px solid #3A3733;border-radius:999px;padding:5px 9px}
.phub-keys{font:500 10px/1 var(--ph-mono);letter-spacing:.06em;color:#8E8A83;white-space:nowrap}
.phub-keys kbd{font:700 10px/1 var(--ph-mono);color:#E9E6E0;background:#2A2825;border:1px solid #3A3733;border-bottom-width:2px;border-radius:5px;padding:3px 6px;margin:0 3px 0 8px}
.phub-keys kbd + kbd{margin-left:0}

/* search bar: kinds + field in ONE light capsule */
.phub-bar{position:relative;display:flex;align-items:stretch;gap:6px;background:var(--ph-stone);border:1px solid var(--ph-line);border-radius:18px;padding:6px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 18px 40px -24px rgba(0,0,0,.65);transition:box-shadow .2s,border-color .2s}
.phub-bar:focus-within{border-color:color-mix(in srgb,var(--ph-acc) 60%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--ph-acc) 18%,transparent),0 18px 40px -24px rgba(0,0,0,.65)}
.phub-kinds{display:flex;gap:4px;background:var(--ph-inset);border-radius:13px;padding:4px;flex:none;overflow-x:auto;scrollbar-width:none}
.phub-kinds::-webkit-scrollbar{display:none}
.phub-kinds button{appearance:none;border:0;background:transparent;color:var(--ph-mute);font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;
  padding:11px 14px;border-radius:10px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.phub-kinds button:hover{color:var(--ph-ink);background:rgba(35,34,32,.06)}
.phub-kinds button.on{background:var(--ph-ink);color:#fff}
.phub-field{position:relative;flex:1;display:flex;align-items:center;min-width:0;cursor:text}
.phub-ico{position:absolute;left:14px;color:var(--ph-mute);display:flex;pointer-events:none}
.phub-q{width:100%;height:46px;border:0;background:transparent;color:var(--ph-ink);font:500 16px/1 Inter,system-ui,sans-serif;padding:0 14px 0 42px;outline:0;-webkit-appearance:none;appearance:none}
.phub-q::placeholder{color:#8E8A83}
.phub-q::-webkit-search-cancel-button{-webkit-appearance:none}
.phub-scan{position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;overflow:hidden;opacity:0;transition:opacity .2s}
.phub-scan::after{content:"";position:absolute;inset:0;width:35%;background:linear-gradient(90deg,transparent,var(--ph-acc),transparent);animation:phScan 1s linear infinite}
.phub-field.busy .phub-scan{opacity:1}
@keyframes phScan{from{transform:translateX(-100%)}to{transform:translateX(290%)}}

/* results */
.phub-ac{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;background:var(--ph-stone);border:1px solid var(--ph-line);border-radius:16px;
  padding:6px;max-height:min(420px,60vh);overflow-y:auto;box-shadow:0 24px 60px -18px rgba(0,0,0,.6)}
.phub-ac.show{display:block;animation:phDrop .16s ease-out}
@keyframes phDrop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.phub-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;appearance:none;border:0;background:transparent;border-radius:11px;padding:9px 10px;cursor:pointer;color:var(--ph-ink);position:relative}
.phub-row:hover,.phub-row.hi{background:var(--ph-inset)}
.phub-row.hi::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--ph-acc)}
.phub-av{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--ph-ink);color:#fff;font:700 11px/1 var(--ph-mono);letter-spacing:.04em}
.phub-rt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.phub-rt b{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phub-rt small{font:500 12px/1.3 Inter,system-ui,sans-serif;color:var(--ph-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phub-live{flex:none;display:inline-flex;align-items:center;gap:4px;font:700 9.5px/1 var(--ph-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ph-acc-ink);
  background:color-mix(in srgb,var(--ph-acc) 14%,transparent);border-radius:999px;padding:5px 8px}
.phub-none{padding:16px 14px;color:var(--ph-mute);font-size:13.5px}

/* quick rows */
.phub-quick{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.phub-qrow{display:flex;align-items:center;gap:12px;min-width:0}
.phub-ql{flex:none;display:inline-flex;align-items:center;gap:6px;font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#A8A39B;width:72px}
.phub-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0;min-width:0;mask-image:linear-gradient(90deg,#000 92%,transparent)}
.phub-chips::-webkit-scrollbar{display:none}
.phub-chip{flex:none;appearance:none;cursor:pointer;border:1px solid #3A3733;background:#252320;color:#ECE8E1;font:600 12.5px/1 Inter,system-ui,sans-serif;padding:8px 12px;border-radius:999px;transition:.15s;white-space:nowrap}
.phub-chip em{font:700 9px/1 var(--ph-mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:#8E8A83;margin-right:6px}
.phub-chip:hover{border-color:var(--ph-acc);color:#fff}
.phub-chip.live{border-color:color-mix(in srgb,var(--ph-acc) 45%,#3A3733)}
.phub-chip.acc{background:var(--ph-acc);border-color:var(--ph-acc);color:#111}

/* profile bar */
.phub-pbar{position:relative;z-index:40;margin-top:14px;display:flex;align-items:center;gap:12px;background:rgba(28,27,25,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid #3A3733;border-radius:16px;padding:8px 8px 8px 14px}
.phub-pbar[hidden]{display:none}
.phub-dockwrap{margin:0;position:static}
.phub-pbar.dock::before{content:"";position:absolute;left:-1px;right:-1px;top:-11px;height:10px;background:#1C1B19}
.phub-pbar.dock{position:fixed;z-index:80;margin:10px 0 0;box-shadow:0 14px 34px -14px rgba(0,0,0,.7);animation:phDrop .15s ease-out}
.phub-pslot{height:0}
.phub-crumb{flex:none;display:flex;flex-direction:column;gap:3px;min-width:0;max-width:260px}
.phub-crumb span{font:700 9.5px/1 var(--ph-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ph-acc)}
.phub-crumb b{color:#fff;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phub-jump{flex:1;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0;mask-image:linear-gradient(90deg,#000 90%,transparent)}
.phub-jump::-webkit-scrollbar{display:none}
.phub-jump button{flex:none;appearance:none;border:0;background:transparent;color:#B5B0A8;font:600 11.5px/1 Inter,system-ui,sans-serif;padding:8px 10px;border-radius:9px;cursor:pointer;white-space:nowrap}
.phub-jump button:hover{background:#2A2825;color:#fff}
.phub-act{flex:none;display:flex;gap:6px}
.phub-btn{appearance:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;border:1px solid #3A3733;background:#252320;color:#ECE8E1;font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;padding:10px 12px;border-radius:11px;transition:.15s}
.phub-btn:hover{border-color:#5A564F;color:#fff}
.phub-btn.acc{background:var(--ph-acc);border-color:var(--ph-acc);color:#111}
.phub-btn.ico{padding:9px}

/* compare */
.phub-cmp{margin-top:14px;background:var(--ph-stone);border:1px solid var(--ph-line);border-radius:20px;padding:16px;animation:phDrop .2s ease-out}
.phub-cmp[hidden]{display:none}
.phub-cmp-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.phub-cmp-h .phub-kick{color:var(--ph-acc-ink)}
.phub-cmp-h b{font-size:15px;font-weight:800}
.phub-ck{display:flex;gap:4px;margin-left:8px;background:var(--ph-inset);border-radius:10px;padding:3px}
.phub-ck button{appearance:none;border:0;background:transparent;font:700 11.5px/1 Inter,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--ph-mute);padding:7px 10px;border-radius:8px;cursor:pointer}
.phub-ck button.on{background:#fff;color:var(--ph-ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.phub-cmp-h .phub-btn{margin-left:auto;background:var(--ph-inset);border-color:transparent;color:var(--ph-ink)}
.phub-vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-bottom:12px}
.phub-side{min-height:58px;border-radius:14px;padding:12px 14px;display:flex;align-items:center;background:var(--ph-inset);font-size:17px}
.phub-side.a{border-left:4px solid var(--ph-acc)}
.phub-side.b{border-right:4px solid var(--ph-ink);justify-content:flex-end;text-align:right}
.phub-side b{font-weight:800}
.phub-side i{font-style:normal;color:var(--ph-mute);font-size:13.5px}
.phub-swap{appearance:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--ph-line);background:#fff;color:var(--ph-ink);display:grid;place-items:center;cursor:pointer}
.phub-swap:disabled{opacity:.35;cursor:default}
.phub-bar.sub{box-shadow:none;margin-bottom:12px}
.phub-cmp-sub{display:flex;justify-content:space-between;gap:12px;font:500 12px/1.4 Inter,system-ui,sans-serif;color:var(--ph-mute);margin-bottom:10px}
.phub-cmp-sub span:last-child{text-align:right}
.phub-tally{display:flex;align-items:center;gap:12px;background:var(--ph-inset);color:var(--ph-ink);border-radius:12px;padding:10px 14px;margin-bottom:12px;font-size:13.5px;font-weight:600}
.phub-tally span{flex:1;text-align:center;color:var(--ph-ink)}
.phub-tally b{font:800 22px/1 var(--ph-mono);min-width:30px;text-align:center}
.phub-tally b.a{color:var(--ph-acc)}
.phub-crs{display:flex;flex-direction:column;gap:2px}
.phub-cr{display:grid;grid-template-columns:64px 1fr minmax(120px,190px) 1fr 64px;align-items:center;gap:10px;padding:7px 4px;border-radius:9px}
.phub-cr:nth-child(odd){background:rgba(35,34,32,.035)}
.phub-cr .va,.phub-cr .vb{font:700 14px/1 var(--ph-mono);color:var(--ph-mute)}
.phub-cr .vb{text-align:right}
.phub-cr .lb{text-align:center;font-size:12.5px;font-weight:600;line-height:1.2}
.phub-cr .lb small{display:block;font:500 11px/1.3 Inter,system-ui,sans-serif;letter-spacing:0;color:#8E8A83}
.phub-cr .ba,.phub-cr .bb{height:8px;border-radius:8px;background:var(--ph-inset);position:relative;overflow:hidden}
.phub-cr .ba i,.phub-cr .bb i{position:absolute;top:0;bottom:0;width:0;border-radius:8px;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.phub-cr .ba i{right:0;background:color-mix(in srgb,var(--ph-acc) 45%,#cfcac2)}
.phub-cr .bb i{left:0;background:#bdb8b0}
.phub-crs.go .phub-cr i{width:var(--w)}
.phub-cr.wa .va{color:var(--ph-acc-ink)}
.phub-cr.wa .ba i{background:var(--ph-acc)}
.phub-cr.wb .vb{color:var(--ph-ink)}
.phub-cr.wb .bb i{background:var(--ph-ink)}
.phub-note{margin:12px 2px 0;font-size:11.5px;color:var(--ph-mute)}
.phub-cmp-load{display:flex;flex-direction:column;gap:8px}
.phub-cmp-load i{display:block;height:26px;border-radius:9px;background:linear-gradient(90deg,var(--ph-inset) 0%,#f9f8f6 50%,var(--ph-inset) 100%);background-size:200% 100%;animation:phShim 1.2s linear infinite}

/* skeleton + reveal (no dark box ever on screen) */
.phub-skel{margin-top:14px;background:var(--ph-stone);border:1px solid var(--ph-line);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:14px}
.phub-skel[hidden]{display:none}
.phub-skel i,.phub-skel b,.sk-block{display:block;border-radius:10px;background:linear-gradient(90deg,var(--ph-inset) 0%,#fbfaf8 50%,var(--ph-inset) 100%);background-size:200% 100%;animation:phShim 1.2s linear infinite}
.sk-hero{display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;gap:8px 14px}
.sk-hero i{width:64px;height:64px;border-radius:16px;grid-row:span 2}
.sk-hero b{height:22px;width:55%}.sk-hero b.s{height:14px;width:35%}
.sk-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.sk-row i{height:64px}
.sk-row:nth-of-type(3){grid-template-columns:2fr 1fr}
.sk-block{height:180px}
@keyframes phShim{from{background-position:200% 0}to{background-position:-200% 0}}
html.phub-holding .phub-target{visibility:hidden;height:0;overflow:hidden}
.phub-in{animation:phIn .35s ease-out both}
@keyframes phIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* stat centre + player sheet */
.phub-extra{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.phub-extra[hidden]{display:none}
.tc-g{background:var(--ph-stone);border:1px solid var(--ph-line);border-radius:18px;padding:14px 16px}
.tc-main{padding:16px 18px 18px}
.tc-h{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.tc-h span{font:800 12px/1.2 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ph-ink)}
.tc-h small{font:500 11px/1.3 Inter,system-ui,sans-serif;color:var(--ph-mute)}
.tc-h.big span{font-size:13px;color:var(--ph-ink)}
.phub-seg{display:flex;gap:4px;background:var(--ph-inset);border-radius:12px;padding:4px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.phub-seg button{flex:1 0 auto;appearance:none;border:0;background:transparent;color:var(--ph-mute);font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;padding:10px 10px;border-radius:9px;cursor:pointer;white-space:nowrap}
.phub-seg button small{font-size:9.5px;margin-left:6px;opacity:.7}
.phub-seg button.on{background:#fff;color:var(--ph-ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.phub-rec{display:flex;gap:8px;align-items:stretch;margin-bottom:12px}
.phub-rec > span{flex:1;background:var(--ph-inset);border-radius:12px;padding:10px 12px;font:800 24px/1 var(--ph-mono);display:flex;flex-direction:column;gap:5px}
.phub-rec small{font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--ph-mute)}
.phub-rec .w{box-shadow:inset 3px 0 0 #16A34A}.phub-rec .d{box-shadow:inset 3px 0 0 #A8A29A}.phub-rec .l{box-shadow:inset 3px 0 0 #DC2626}
.phub-rec .rng{flex:1.6;font:500 11.5px/1.45 Inter,system-ui,sans-serif;color:var(--ph-mute);justify-content:center}
.tc-duo{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;background:var(--ph-ink);color:#fff;border-radius:16px;padding:14px 16px;margin-bottom:12px}
.tc-duo > div{display:flex;flex-direction:column;gap:4px}
.tc-duo > div:nth-child(3){text-align:right}
.tc-duo small{font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#B5B0A8}
.tc-duo b{font:800 30px/1 var(--ph-mono)}
.tc-duo > div:first-child b{color:var(--ph-acc)}
.tc-duo span{font-size:11px;color:#9C978E}
.tc-duo .vs{font:700 12px/1 var(--ph-mono);color:#6E6A63}
.tc-duo p{grid-column:1/-1;margin:2px 0 0;font-size:12.5px;color:#D9D5CE;text-align:center}
.tc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tc-grid .tc-g{background:#fff;padding:12px 14px}
.tc-r{display:grid;grid-template-columns:minmax(96px,1.1fr) 48px 1fr 48px;align-items:center;gap:8px;padding:5px 0;border-top:1px solid rgba(35,34,32,.06)}
.tc-r.one{grid-template-columns:minmax(96px,1.1fr) 48px 1fr}
.tc-r .lb{font-size:12.5px;color:var(--ph-ink)}
.tc-r b{font:700 13px/1 var(--ph-mono);text-align:right;color:var(--ph-acc-ink)}
.tc-r em{font:600 13px/1 var(--ph-mono);font-style:normal;color:var(--ph-mute)}
.tc-bar,.tc-solo{display:block;height:7px;border-radius:7px;background:#D9D5CE;position:relative;overflow:hidden}
.tc-bar i,.tc-solo i{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--ph-acc);border-radius:7px}
.tc-bar.half{background:#CFCAC2}.tc-bar.half i{background:var(--ph-ink)}
.tc-ht{width:100%;border-collapse:collapse;font-size:12.5px}
.tc-ht th{font:700 10.5px/1 Inter,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--ph-mute);text-align:center;padding:4px}
.tc-ht td{padding:6px 4px;border-top:1px solid rgba(35,34,32,.06);text-align:center}
.tc-ht td:first-child{text-align:left}
.tc-ht td b{font:700 13px/1 var(--ph-mono)}
.tc-hb{width:40%}
.tc-hits{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.tc-hg > b{display:block;font:800 11px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ph-acc-ink);margin-bottom:6px}
.tc-hr{display:grid;grid-template-columns:1fr 70px 44px;gap:8px;align-items:center;padding:4px 0;font-size:12.5px}
.tc-hbar{display:block;height:7px;border-radius:7px;background:#D9D5CE;overflow:hidden;position:relative}
.tc-hbar i{position:absolute;inset:0 auto 0 0;width:var(--w);background:#8E8A83;border-radius:7px}
.tc-hr.hot .tc-hbar i{background:var(--ph-acc)}
.tc-hr.hot span:first-child{font-weight:700}
.tc-hr em{font:600 11.5px/1 var(--ph-mono);font-style:normal;color:var(--ph-mute);text-align:right}
.tc-logw{overflow-x:auto;margin:0 -4px}
.tc-log{width:100%;border-collapse:collapse;font:500 12px/1.2 var(--ph-mono);white-space:nowrap}
.tc-log th{font:700 10.5px/1 Inter,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--ph-mute);padding:6px 6px;text-align:center;position:sticky;top:0;background:var(--ph-stone)}
.tc-log td{padding:7px 6px;border-top:1px solid rgba(35,34,32,.07);text-align:center}
.tc-log .l{text-align:left;font-family:Inter,system-ui,sans-serif;font-weight:600}
.tc-log .l small{display:block;font:500 11px/1.3 Inter,system-ui,sans-serif;color:var(--ph-mute)}
.tc-log .ha{display:inline-block;width:18px;font:700 9.5px/1 var(--ph-mono);color:var(--ph-mute)}
.tc-log .na{color:#B5B0A8}
.tc-log .sc{display:inline-block;min-width:44px;padding:4px 6px;border-radius:7px;font-weight:800;color:#fff}
.tc-log .sc.w{background:#16A34A}.tc-log .sc.d{background:#8E8A83}.tc-log .sc.l{background:#DC2626}
.phub-more{display:block;margin:10px auto 0;appearance:none;border:1px solid var(--ph-line);background:#fff;color:var(--ph-ink);font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;padding:10px 14px;border-radius:10px;cursor:pointer}
.ps-g{margin-top:12px}
.ps-g + .ps-g{margin-top:14px}
.ps-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ps-t{background:#fff;border:1px solid rgba(35,34,32,.07);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;position:relative}
.ps-t small{font:600 10px/1.2 Inter,system-ui,sans-serif;color:var(--ph-mute)}
.ps-t b{font:800 20px/1 var(--ph-mono)}
.ps-t > span{font:500 11.5px/1.2 Inter,system-ui,sans-serif;color:var(--ph-mute)}
.ps-pc{display:block;height:5px;border-radius:5px;background:#E3DFD8;overflow:hidden;margin-top:4px}
.ps-pc u{display:block;height:100%;width:var(--w);background:#8E8A83;border-radius:5px}
.ps-t em{font:700 11px/1 Inter,system-ui,sans-serif;font-style:normal;color:var(--ph-mute)}
.ps-t.top{box-shadow:inset 0 3px 0 var(--ph-acc)}
.ps-t.top .ps-pc u{background:var(--ph-acc)}
.ps-t.top em{color:var(--ph-acc-ink)}
.ps-t.low .ps-pc u{background:#C2410C}

/* phones */
@media (max-width:760px){
  .phub-keys{display:none}
  .phub-bar{flex-direction:column;border-radius:16px}
  .phub-kinds{width:100%}
  .phub-kinds button{flex:1;padding:10px 8px;font-size:10px}
  .phub-qrow{flex-direction:column;align-items:flex-start;gap:6px}
  .phub-ql{width:auto}
  .phub-chips{width:100%}
  .phub-pbar{flex-wrap:wrap;padding:8px 8px 8px 12px;top:4px}
  .phub-crumb{flex:1;max-width:none}
  .phub-act .phub-btn span{display:none}
  .phub-jump{order:3;flex-basis:100%}
  .phub-cr{grid-template-columns:44px 1fr 92px 1fr 44px;gap:6px}
  .phub-cr .va,.phub-cr .vb{font-size:12px}
  .phub-cr .lb{font-size:11.5px}
  .phub-side{font-size:14px;min-height:50px;padding:10px}
  .tc-grid{grid-template-columns:1fr}
  .phub-rec > span{font-size:19px;padding:8px 10px}
  .phub-rec .rng{display:none}
  .tc-duo b{font-size:24px}
  .ps-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .phub *,.phub-in{animation:none!important;transition:none!important}
  .phub-crs .phub-cr i{width:var(--w)}
}

/* stone-theme.css paints EVERY input dark inside @layer theme with !important, and a layered !important beats any
   unlayered one. So the hub's own fields are reset from inside the same layer (more specific, so it wins there). */
@layer theme{
  .phub .phub-q,.phub input.phub-q{background-color:transparent!important;color:#232220!important;border:0!important;box-shadow:none!important;-webkit-text-fill-color:#232220!important}
  .phub .phub-q::placeholder{color:#8E8A83!important;-webkit-text-fill-color:#8E8A83!important}
  /* stone-theme also forces every <b> light (b{color:var(--on-dark-2)!important}); the hub's light cards need ink */
  .phub b{color:inherit!important}
  .phub .phub-crumb b{color:#fff!important}
  .phub .tc-r b,.phub .tc-hg > b{color:var(--ph-acc-ink)!important}
  .phub .tc-duo b{color:#fff!important}
  .phub .tc-duo > div:first-child b,.phub .phub-tally b.a{color:var(--ph-acc)!important}
  /* mobile.css recolours table cells on phones; the hub's own tables keep their ink */
  .phub :is(.tc-ht,.tc-log) :is(td,b,span){color:#232220!important;background:transparent!important}
  .phub :is(.tc-ht,.tc-log) th{color:#5B5A58!important;background:transparent!important}
  .phub .tc-log small{color:#5B5A58!important}
  .phub .tc-log .sc{color:#fff!important}
  .phub .tc-log .sc.w{background:#16A34A!important}.phub .tc-log .sc.d{background:#8E8A83!important}.phub .tc-log .sc.l{background:#DC2626!important}
  .phub em,.phub small{color:var(--ph-mute)!important}
  .phub .phub-chip em{color:#8E8A83!important}
  .phub .ps-t.top em{color:var(--ph-acc-ink)!important}
  .phub .tc-duo small{color:#B5B0A8!important}
  .phub .phub-crumb span,.phub .phub-sport{color:var(--ph-acc)!important}
  .phub .tc-log .na{color:#8E8A83!important}
}

/* ═══ ONE SKIN for every sport's profile body (2026-11-10, Callum: "can't have the old table in the same section as the new one") ═══
   The sport modules still render the data (keep every number), the hub restyles them so a profile reads as ONE design:
   same cards, headings, title, tiles and tables as the hub's own sections. Old cards the hub replaces are dropped (.phub-dup).
   Inside @layer theme because stone-theme.css / intel4.css set these with layered !important. Colours stay with the stone
   adapter (it already paints the light stone palette); this sets type, spacing, shape and fit. */
.phub-target .phub-dup{display:none!important}
.phub-target .phub-extra{margin:0 0 12px!important;display:flex;flex-direction:column;gap:12px}
@layer theme{
  .phub-target{--sk-ink:#232220;--sk-mute:#5B5A58;--sk-line:rgba(35,34,32,.12)}
  /* cards */
  .phub-target :is(.pc-card,.pdg-card,.cxn-card){border-radius:18px!important;border:1px solid var(--sk-line)!important;padding:16px 18px!important;margin:0 0 12px!important;box-shadow:none!important;min-width:0!important;overflow:hidden}
  .phub-target :is(.pc-card,.pdg-card,.cxn-card)::before{display:none!important}
  /* section headings: the hub's mono label, the note beside it in plain text */
  .phub-target :is(.fbp-sec,.tp-sec,.np-sec,.f1p-sec,.pdg-h,.cxn-lab){font:800 12px/1.35 Inter,system-ui,sans-serif!important;letter-spacing:.06em!important;text-transform:uppercase!important;
    color:var(--sk-ink)!important;margin:0 0 12px!important;padding:0!important;border:0!important;display:flex!important;flex-wrap:wrap;align-items:baseline;gap:4px 10px;overflow-wrap:anywhere}
  .phub-target :is(.fbp-sec,.tp-sec,.np-sec,.f1p-sec,.pdg-h,.cxn-lab) :is(small,span,em){font:500 11.5px/1.4 Inter,system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:var(--sk-mute)!important}
  /* the profile title + its line */
  .phub-target :is(.fbp-hero h3,.tp-hero h3,h3.np-h,.f1p-hero h3,.cxn-nm,.pdg-hnm){font:800 clamp(22px,3.2vw,30px)/1.12 Inter,system-ui,sans-serif!important;letter-spacing:-.01em!important;color:var(--sk-ink)!important;margin:0 0 6px!important;overflow-wrap:anywhere;text-transform:none!important}
  .phub-target :is(.fbp-bio,.tp-bio,.np-sub,.f1p-bio,.cxn-role){font:500 13px/1.5 Inter,system-ui,sans-serif!important;color:var(--sk-mute)!important;letter-spacing:0!important;overflow-wrap:anywhere}
  .phub-target :is(.fbp-hero,.tp-hero,.f1p-hero){background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important}
  .phub-target :is(.fbp-hero,.tp-hero,.f1p-hero)::before{display:none!important}
  /* stat tiles: the hub tile */
  .phub-target :is(.fbp-grid,.tp-grid,.np-kpis,.f1p-grid,.cxn-grid,.pdg-statgrid){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))!important;gap:8px!important}
  .phub-target :is(.fbp-grid > div,.tp-stat,.np-kpi,.f1p-st,.cxn-cell,.pdg-stat){border-radius:12px!important;border:1px solid rgba(35,34,32,.08)!important;padding:10px 12px!important;min-width:0!important;box-shadow:none!important;overflow-wrap:anywhere}
  .phub-target :is(.fbp-grid > div,.tp-stat,.np-kpi,.f1p-st,.pdg-stat) b,.phub-target .cxn-cell .cv{font:800 20px/1.15 'JetBrains Mono',ui-monospace,monospace!important;letter-spacing:-.01em!important}
  .phub-target :is(.fbp-grid > div,.tp-stat,.np-kpi,.f1p-st,.pdg-stat) :is(span,small,em),.phub-target .cxn-cell :is(.ck,.cs){font-size:11px!important;line-height:1.35!important;letter-spacing:.02em!important}
  /* tables: scroll sideways inside the card, never push the page wider */
  .phub-target :is(.fbp-wrap,.fbp-hmwrap,.fbp-gkwrap,.np-tw,.f1p-wrap,.tp-mlist){max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .phub-target :is(.fbp-wrap table,.fbp-cs,.fbp-gk,.np-tbl,.f1p-tbl){font:500 12px/1.3 'JetBrains Mono',ui-monospace,monospace!important;border-collapse:collapse!important}
  .phub-target :is(.fbp-wrap table,.fbp-cs,.fbp-gk,.np-tbl,.f1p-tbl) th{font:700 10.5px/1.2 Inter,system-ui,sans-serif!important;letter-spacing:.05em!important;text-transform:uppercase!important;color:var(--sk-mute)!important;white-space:nowrap;padding:7px 8px!important}
  .phub-target :is(.fbp-wrap table,.fbp-cs,.fbp-gk,.np-tbl,.f1p-tbl) td{padding:7px 8px!important;border-top:1px solid rgba(35,34,32,.07)!important;white-space:nowrap}
  /* chips and controls inside profiles */
  .phub-target :is(.fbp-season,.fbp-comp,.fbp-pscope){font:600 13px/1 Inter,system-ui,sans-serif!important;border-radius:10px!important;padding:8px 10px!important;max-width:100%!important}
  .phub-target :is(.fbp-link,.cxn-lnk2,.tp-simn){text-decoration:none!important;border-bottom:1.5px solid color-mix(in srgb,currentColor 35%,transparent)!important}
}
@media (max-width:760px){
  @layer theme{
    .phub-target :is(.pc-card,.pdg-card,.cxn-card){padding:14px 14px!important;border-radius:16px!important}
    .phub-target :is(.fbp-grid,.tp-grid,.np-kpis,.f1p-grid,.cxn-grid,.pdg-statgrid){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  }
}

/* sport accent on the profile body too */
.phub-target{--ph-acc:#E7B937;--ph-acc-ink:#8A6A10}
.phub-target[data-sport=football]{--ph-acc:#3B82F6;--ph-acc-ink:#1D4ED8}
.phub-target[data-sport=racing]{--ph-acc:#22C55E;--ph-acc-ink:#15803D}
.phub-target[data-sport=nba]{--ph-acc:#FDB927;--ph-acc-ink:#8A5A00}
.phub-target[data-sport=tennis]{--ph-acc:#A855F7;--ph-acc-ink:#7E22CE}
.phub-target[data-sport=f1]{--ph-acc:#EF4444;--ph-acc-ink:#B91C1C}
@layer theme{
  /* rhythm: every heading after the first in a card gets air above it */
  .phub-target :is(.pc-card,.pdg-card,.cxn-card) :is(.fbp-sec,.tp-sec,.np-sec,.f1p-sec,.pdg-h,.cxn-lab):not(:first-child){margin-top:22px!important}
  .phub-target .fbx{margin:0!important}
  /* the intel block moved to its own card: its own ink (the adapter colours it by position, which no longer matches) */
  .phub-fbxcard{background:#F7F6F4!important}
  .phub-fbxcard :is(span,b,small,em,div,h4,p,td,th,strong,a){color:#232220!important}
  .phub-fbxcard :is(small,p,em){color:#5B5A58!important}
  /* football intel block in the hub's language */
  .phub-target .fbx-tabs{display:flex!important;flex-wrap:wrap;gap:4px!important;background:#EDECE9!important;border-radius:12px!important;padding:4px!important;margin:0 0 14px!important;width:max-content;max-width:100%}
  .phub-target .fbx-tabs button{border:0!important;background:transparent!important;color:#5B5A58!important;font:700 12px/1 Inter,system-ui,sans-serif!important;letter-spacing:.04em!important;text-transform:uppercase!important;padding:9px 12px!important;border-radius:9px!important}
  .phub-target .fbx-tabs button.on{background:#fff!important;color:#232220!important;box-shadow:0 1px 3px rgba(0,0,0,.12)!important}
  .phub-target .fbx-trr i,.phub-target .fbx-hr i{background:#E3DFD8!important;border-radius:7px!important;height:7px!important}
  .phub-target .fbx-trr u,.phub-target .fbx-hr u{background:#8E8A83!important;border-radius:7px!important}
  .phub-target .fbx-trr.top u,.phub-target .fbx-hr.hi u{background:var(--ph-acc)!important}
  .phub-target .fbx-trr.low u{background:#C2410C!important}
  .phub-target .fbx-trr b,.phub-target .fbx-hr b{font:700 13px/1 'JetBrains Mono',ui-monospace,monospace!important;color:#232220!important}
  .phub-target .fbx-trr em,.phub-target .fbx-hr em{font:600 11px/1 'JetBrains Mono',ui-monospace,monospace!important;font-style:normal!important;color:#5B5A58!important}
  .phub-target .fbx-trr.top em{color:var(--ph-acc-ink)!important}
  .phub-target .fbx-reads{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0!important}
  .phub-target .fbx-reads span{background:#fff!important;border:1px solid rgba(35,34,32,.1)!important;color:#232220!important;border-radius:999px!important;padding:7px 11px!important;font:600 11.5px/1.2 Inter,system-ui,sans-serif!important}
  .phub-target :is(.fbx-tier,.fbx-man,.fbx-rk,.fbx-hbox,.fbx-facts > div){background:#fff!important;border:1px solid rgba(35,34,32,.08)!important;border-radius:12px!important;box-shadow:none!important;min-width:0;overflow-wrap:anywhere}
  .phub-target .fbx-tier b{font:800 24px/1.1 'JetBrains Mono',ui-monospace,monospace!important;color:#232220!important}
  .phub-target .fbx-tier span,.phub-target .fbx-hbox h4,.phub-target .fbx-role span{font:700 11px/1.2 Inter,system-ui,sans-serif!important;letter-spacing:.05em!important;text-transform:uppercase!important;color:#5B5A58!important}
  .phub-target .fbx-man .fbp-link{font:700 14px/1.25 Inter,system-ui,sans-serif!important;color:#232220!important;border:0!important;border-bottom:1.5px solid color-mix(in srgb,var(--ph-acc) 50%,transparent)!important;padding:0!important;background:none!important;text-align:left}
  .phub-target .fbx-man em{font:700 11px/1.3 Inter,system-ui,sans-serif!important;letter-spacing:.04em!important;text-transform:uppercase!important;font-style:normal!important;color:var(--ph-acc-ink)!important}
  .phub-target .fbx-card{background:transparent!important;border:0!important;padding:0!important;grid-template-columns:minmax(0,240px) minmax(0,1fr)!important}
  .phub-target .fbx-role b{color:#232220!important}
  .phub-target .fbx-note{font-size:11.5px!important;color:#5B5A58!important;margin:14px 0 0!important}
  /* filter chips the old pages use (competition picker etc.) */
  .phub-target :is(.fbp-comps button,.fbp-chip,.fbp-compchip){border-radius:999px!important;font:600 11.5px/1.2 Inter,system-ui,sans-serif!important}
}
@media (max-width:760px){ @layer theme{ .phub-target .fbx-card{grid-template-columns:minmax(0,1fr)!important} .phub-target .fbx-tabs{width:auto} } }

@layer theme{
  /* one column: the old two-up card grid left half-width cards and holes */
  .phub-target :is(.fbp-out,.tp-out,.np-out,.f1p-detail,.pdg-out){display:block!important;grid-template-columns:none!important}
  .phub-target :is(.fbp-out,.tp-out,.np-out,.f1p-detail,.pdg-out) > *{width:auto!important;max-width:100%!important;grid-column:auto!important}
  /* header pickers in one row that wraps */
  .phub-target .fbp-seasonwrap{display:inline-flex!important;align-items:center;gap:8px!important;margin:12px 16px 0 0!important;vertical-align:top;max-width:100%}
  .phub-target .fbp-seasonwrap span{font:700 11px/1 Inter,system-ui,sans-serif!important;letter-spacing:.05em!important;color:#5B5A58!important}
  .phub-target :is(.fbp-season,.fbp-comp,.fbp-pscope){height:38px!important;background:#fff!important;border:1px solid rgba(35,34,32,.14)!important;color:#232220!important}
}

@media (max-width:760px){ @layer theme{
  .phub-target table th:first-child,.phub-target table td:first-child,.phub .tc-log th:first-child,.phub .tc-log td:first-child{position:sticky!important;left:0!important;z-index:2!important;background:#F7F6F4!important;box-shadow:6px 0 8px -8px rgba(0,0,0,.35)!important}
  .phub-target table tr{display:table-row!important;background:transparent!important;border:0!important}
  .phub-target table td,.phub-target table th{display:table-cell!important}
  .phub-target table td::before{content:none!important}
} }

/* simple version (Callum 10-Nov): blank until you pick, no keyboard strip, plain bar */
.phub-target.phub-blank{display:none!important}
.phub-empty{margin:14px 4px 0;color:#A8A39B;font-size:13.5px}
.phub-empty[hidden]{display:none}
.phub-quick[hidden]{display:none}
.phub-pbar{margin-top:14px}
.phub-crumb{flex:1!important;max-width:none!important}
.phub-crumb b{font-size:16px}
@media (max-width:760px){ .phub-pbar{flex-wrap:nowrap} .phub-crumb{min-width:0} .phub-crumb b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} }

/* referee page */
.rf-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}
.rf-sub{font:800 11px/1.2 Inter,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#5B5A58;margin:0 0 8px}
.rf-pill{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;background:#fff;border:1px solid rgba(35,34,32,.08);border-radius:12px;padding:9px 12px;margin-bottom:6px}
.rf-pill .pv-link{justify-self:start}
.rf-pill span{grid-column:1;font-size:12px;color:#5B5A58}
.rf-pill b{grid-column:2;grid-row:1/span 2;font:800 16px/1 'JetBrains Mono',ui-monospace,monospace}
.rf-pill.up b{color:#B91C1C}.rf-pill.dn b{color:#15803D}
.rf-none,.rf-note{font-size:12.5px;color:#5B5A58;margin:6px 0 0}
.pv-link{display:inline;appearance:none;background:none;border:0;padding:0;font:inherit;font-weight:700;color:#232220;cursor:pointer;text-align:left;border-bottom:1.5px solid color-mix(in srgb,var(--ph-acc) 50%,transparent)}
.tc-log td.up{color:#B91C1C!important;font-weight:800}.tc-log td.dn{color:#15803D!important;font-weight:800}
@media (max-width:760px){ .rf-two{grid-template-columns:1fr} }
@layer theme{ .phub .rf-pill.up b,.phub .tc-log td.up{color:#B91C1C!important} .phub .rf-pill.dn b,.phub .tc-log td.dn{color:#15803D!important} .phub .rf-pill span,.phub .rf-sub{color:#5B5A58!important} .phub .pv-link{color:#232220!important} }

/* 2026-11-10 (Callum: "when I search a name it cuts off"): the results floated over the page and .i4-view (overflow:hidden)
   cut them off at its edge, worst on the blank page. They now open INSIDE the search card and push the page down. */
.phub-bar{flex-wrap:wrap}
.phub-bar .phub-ac{position:static!important;flex:1 0 100%;order:5;max-height:none!important;overflow:visible!important;box-shadow:none!important;
  border:0!important;border-top:1px solid var(--ph-line)!important;border-radius:0!important;margin:6px 0 0!important;padding:6px 0 0!important;background:transparent!important;animation:none!important}
.phub-bar .phub-ac:not(.show){display:none!important}
.phub-rt b,.phub-rt small{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere}
.phub-row{align-items:flex-start}

/* percentiles against the same role */
.pct-sum{margin:0 0 14px;font-size:14px;line-height:1.5;color:#232220}
.pct-sum b{font-weight:800}
.pct-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px 22px}
.pct-gh{font:800 12px/1.2 Inter,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#5B5A58;margin:0 0 6px}
.pct-r{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(60px,1fr) 84px;gap:10px;align-items:center;padding:5px 0;border-top:1px solid rgba(35,34,32,.07)}
.pct-l{font-size:13px;font-weight:600;color:#232220;min-width:0;overflow-wrap:anywhere}
.pct-l small{display:block;font-size:11.5px;font-weight:500;color:#5B5A58;margin-top:1px}
.pct-b{display:block;height:8px;border-radius:8px;background:#E3DFD8;overflow:hidden;position:relative}
.pct-b i{position:absolute;inset:0 auto 0 0;width:var(--w);background:#8E8A83;border-radius:8px}
.pct-r.hi .pct-b i{background:var(--ph-acc)}
.pct-r.lo .pct-b i{background:#C2410C}
.pct-r em{font:700 12.5px/1 Inter,system-ui,sans-serif;font-style:normal;text-align:right;color:#5B5A58}
.pct-r.hi em{color:var(--ph-acc-ink)}
@layer theme{ .phub .pct-l,.phub .pct-sum{color:#232220!important} .phub .pct-r.hi em{color:var(--ph-acc-ink)!important} .phub .pct-gh{color:#5B5A58!important} }

/* compact stat sheet: a tight table per group, three across on desktop (Callum: "more compact but still easy to read") */
.ps-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px 22px;align-items:start}
.ps .ps-g{margin:0!important}
.ps-tbl{width:100%;border-collapse:collapse;font-size:13px}
.ps-tbl th{font:800 11.5px/1.2 Inter,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#5B5A58;text-align:right;padding:0 0 6px;white-space:nowrap}
.ps-tbl th:first-child{text-align:left;color:#232220}
.ps-tbl td{padding:5px 0;border-top:1px solid rgba(35,34,32,.07);color:#232220}
.ps-tbl td.v{text-align:right;font:700 13.5px/1.2 'JetBrains Mono',ui-monospace,monospace;padding-left:10px;white-space:nowrap}
.ps-tbl td.p{text-align:right;font:500 12.5px/1.2 'JetBrains Mono',ui-monospace,monospace;color:#5B5A58;padding-left:12px;width:56px;white-space:nowrap}
.ps-tbl .na{color:#8E8A83}
@layer theme{ .phub .ps-tbl td{color:#232220!important;background:transparent!important} .phub .ps-tbl td.p,.phub .ps-tbl th{color:#5B5A58!important} .phub .ps-tbl th:first-child{color:#232220!important}
  .phub .ps-tbl th:first-child,.phub .ps-tbl td:first-child{position:static!important;box-shadow:none!important;background:transparent!important} }

@layer theme{ .phub .ps-tbl{width:100%!important;min-width:0!important;display:table!important;table-layout:auto!important} .phub .ps-g{width:100%!important;min-width:0!important} }

/* ── player page round 4 ── */
.pp-grid{display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:22px;align-items:start}
.pp-chart{min-width:0}
.pz{width:100%;max-width:470px;height:auto;display:block;margin:0 auto;overflow:visible}
.pz-n{font:800 11px Inter,system-ui,sans-serif;fill:#232220}
.pz-l{font:600 11.5px Inter,system-ui,sans-serif;fill:#3F3D3A}
.pz-c{font:800 12px Inter,system-ui,sans-serif;fill:#fff}
.pz-s{transition:opacity .15s}.pz-s:hover{opacity:.82}
.pz-key{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:6px 0 0;font-size:12.5px;color:#5B5A58}
.pz-key i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.pz-note{font-size:12px;color:#5B5A58;margin:8px 0 0;text-align:center}
.pp-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.pp-lh{font:800 12px/1.2 Inter,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#5B5A58;margin:0 0 6px}
.pp-list ul{list-style:none;margin:0;padding:0}
.pp-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:baseline;padding:6px 0;border-top:1px solid rgba(35,34,32,.07);font-size:13.5px}
.pp-list li span{font-weight:600;color:#232220}
.pp-list li em{font-style:normal;font-size:12px;color:#5B5A58;white-space:nowrap}
.pp-list li b{font-weight:800;white-space:nowrap}
.pp-list.good li b{color:#15803D}.pp-list.bad li b{color:#B91C1C}
.ks{background:#fff;border:1px solid rgba(35,34,32,.08);border-radius:14px;padding:12px 14px}
.ks-r{padding:8px 0;border-top:1px solid rgba(35,34,32,.06)}
.ks-r:first-of-type{border-top:0}
.ks-t{display:flex;justify-content:space-between;gap:10px;font-size:13.5px}
.ks-t span{font-weight:600;color:#232220}.ks-t b{font:800 13.5px 'JetBrains Mono',ui-monospace,monospace;color:#232220}
.ks-bar{position:relative;height:10px;border-radius:10px;background:#E3DFD8;margin:6px 0 4px;overflow:visible}
.ks-bar i{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:10px;background:#8E8A83}
.ks-r.hi .ks-bar i{background:#3B82F6}.ks-r.lo .ks-bar i{background:#C2410C}
.ks-bar u{position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;background:#232220;border-radius:2px}
.ks-f{display:flex;justify-content:space-between;font-size:11.5px;color:#5B5A58}
.ks-r.hi .ks-f span:first-child{color:#1D4ED8;font-weight:700}.ks-r.lo .ks-f span:first-child{color:#B91C1C;font-weight:700}
.sl .tc-h{align-items:center}
.sl-mode{margin:0 0 0 auto!important;width:auto!important;display:inline-flex!important;padding:3px!important}
.sl-mode button{flex:none!important;padding:7px 12px!important}
.sl-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:14px 26px;align-items:start}
.sl-g ul{list-style:none;margin:0;padding:0}
.sl-g li{display:grid;grid-template-columns:minmax(0,1fr) auto 28px;gap:10px;align-items:center;padding:5px 0;border-top:1px solid rgba(35,34,32,.07);font-size:13.5px}
.sl-g li span{color:#232220}
.sl-g li b{font:700 13.5px 'JetBrains Mono',ui-monospace,monospace;color:#232220;text-align:right}
.pc{display:inline-grid;place-items:center;width:26px;height:22px;border-radius:7px;font:800 11px Inter,system-ui,sans-serif;font-style:normal;color:#fff}
.pc.hi{background:#15803D}.pc.mid{background:#65A30D}.pc.low{background:#D97706}.pc.lo{background:#B91C1C}.pc.none{background:transparent}
@media (max-width:860px){ .pp-grid{grid-template-columns:minmax(0,1fr)} }
@layer theme{
  .phub .pp-list li span,.phub .ks-t span,.phub .ks-t b,.phub .sl-g li span,.phub .sl-g li b{color:#232220!important}
  .phub .pp-list li em,.phub .ks-f span,.phub .pp-lh{color:#5B5A58!important}
  .phub .pp-list.good li b{color:#15803D!important}.phub .pp-list.bad li b{color:#B91C1C!important}
  .phub .ks-r.hi .ks-f span:first-child{color:#1D4ED8!important}.phub .ks-r.lo .ks-f span:first-child{color:#B91C1C!important}
  .phub .pc{color:#fff!important}
}

.ks-note{font-size:12px;color:#5B5A58;margin:-2px 0 6px}
@layer theme{ .phub .ks-note{color:#5B5A58!important} }

/* 2026-11-10 (Callum): no Career picker on player pages; the page's Club / International switch decides it */
@layer theme{ .phub-target .fbp-hero .fbp-seasonwrap:has(.fbp-pscope){display:none!important} }

/* All stats, round 5: one card per group */
.sl-cols{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))!important;gap:12px!important;align-items:start}
.sl-card{background:#fff;border:1px solid rgba(35,34,32,.08);border-radius:14px;overflow:hidden}
.sl-h{display:grid;grid-template-columns:minmax(0,1fr) 52px 48px 30px;gap:8px;align-items:center;padding:10px 14px;border-bottom:1px solid rgba(35,34,32,.08);box-shadow:inset 4px 0 0 var(--sl-c,#232220)}
.sl-h span{font:800 12px/1.2 Inter,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#232220}
.sl-h em{font:700 10px/1 Inter,system-ui,sans-serif;font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:#8E8A83;text-align:right}
.sl-h em:last-child{text-align:center}
.sl-card ul{list-style:none;margin:0;padding:4px 0}
.sl-card li{display:grid;grid-template-columns:minmax(0,1fr) 52px 48px 30px;gap:8px;align-items:center;padding:6px 14px;font-size:13.5px}
.sl-card li:nth-child(even){background:#F7F6F4}
.sl-card li span{color:#232220;min-width:0;overflow-wrap:anywhere}
.sl-card li b{font:800 14px/1 'JetBrains Mono',ui-monospace,monospace;color:#232220;text-align:right}
.sl-card li small{font:500 12px/1 'JetBrains Mono',ui-monospace,monospace;color:#8E8A83;text-align:right}
.sl-card li .pc{justify-self:center}
.sl-card.ink{--sl-c:#232220}.sl-card.att{--sl-c:#3B82F6}.sl-card.pos{--sl-c:#14B8A6}.sl-card.def{--sl-c:#475569}.sl-card.dis{--sl-c:#D97706}.sl-card.gk{--sl-c:#7C3AED}
@layer theme{ .phub .sl-card li span,.phub .sl-card li b,.phub .sl-h span{color:#232220!important} .phub .sl-card li small,.phub .sl-h em{color:#8E8A83!important}
  .phub .sl-card li:nth-child(even){background:#F7F6F4!important} .phub .pc{color:#fff!important} }

/* competition page */
.cg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,100px),1fr));gap:8px}
.cg-t{background:#fff;border:1px solid rgba(35,34,32,.08);border-radius:12px;padding:10px 12px}
.cg-t small{display:block;font-size:11.5px;color:#5B5A58}
.cg-t b{display:block;font:800 22px/1.15 'JetBrains Mono',ui-monospace,monospace;color:#232220;margin-top:2px}
.fg td.l{white-space:nowrap}
.fg-tag{display:inline-block;margin-left:8px;font:700 10px/1 Inter,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:4px 7px;vertical-align:1px}
.fg-tag.hot{background:#DCFCE7;color:#15803D}.fg-tag.cold{background:#FEE2E2;color:#B91C1C}
.frs{white-space:nowrap}
.fr{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;font:800 10.5px Inter,system-ui,sans-serif;font-style:normal;color:#fff;margin-right:3px}
.fr.w{background:#16A34A}.fr.d{background:#8E8A83}.fr.l{background:#DC2626}
.tc-log td.up2{color:#15803D!important;font-weight:800}.tc-log td.dn2{color:#B91C1C!important;font-weight:800}
.pf{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:10px}
.pf-c{position:relative;background:#fff;border:1px solid rgba(35,34,32,.08);border-radius:14px;padding:12px 14px 12px 40px}
.pf-c > em{position:absolute;left:12px;top:12px;font:800 13px/1 'JetBrains Mono',ui-monospace,monospace;font-style:normal;color:#8E8A83}
.pf-n{font-size:14px;font-weight:700;min-width:0}.pf-n small{display:block;font-size:12px;font-weight:500;color:#5B5A58;margin-top:2px}
.pf-r{display:flex;align-items:center;justify-content:space-between;margin:8px 0 4px}
.pf-r b{font:800 22px/1 'JetBrains Mono',ui-monospace,monospace;color:#232220}
.spk{width:64px;height:22px}
.pf-f{font-size:12px;color:#5B5A58}
.ld{list-style:none;margin:0;padding:0}
.ld li{display:grid;grid-template-columns:24px minmax(0,1fr) auto 46px;gap:8px;align-items:center;padding:7px 0;border-top:1px solid rgba(35,34,32,.07);font-size:13.5px}
.ld li em{font:700 12px 'JetBrains Mono',ui-monospace,monospace;font-style:normal;color:#8E8A83}
.ld li span{min-width:0}.ld li span small{display:block;font-size:11.5px;color:#5B5A58;margin-top:1px}
.ld li b{font:800 14px 'JetBrains Mono',ui-monospace,monospace;color:#232220;text-align:right}
.ld li i{font-style:normal;font-size:11px;color:#8E8A83}
.cl-tabs{flex-wrap:wrap;margin-bottom:10px}
.cl-tabs button{flex:none!important;padding:8px 11px!important}
.cmp-tl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:12px 20px}
.cmp-tlc .ld li{grid-template-columns:22px minmax(0,1fr) auto 0}
@layer theme{ .phub .cg-t b,.phub .pf-r b,.phub .ld li b{color:#232220!important} .phub .cg-t small,.phub .pf-n small,.phub .pf-f,.phub .ld li span small{color:#5B5A58!important}
  .phub .ld li em,.phub .ld li i,.phub .pf-c > em{color:#8E8A83!important} .phub .fg-tag.hot{color:#15803D!important} .phub .fg-tag.cold{color:#B91C1C!important} .phub .fr{color:#fff!important}
  .phub .tc-log td.up2{color:#15803D!important}.phub .tc-log td.dn2{color:#B91C1C!important} }

@media (max-width:760px){ .cg{grid-template-columns:repeat(3,minmax(0,1fr))} .cg-t b{font-size:18px} }
@layer theme{ .phub .fg-tag.hot{background:#DCFCE7!important} .phub .fg-tag.cold{background:#FEE2E2!important} .phub .cmp-tl{background:transparent!important} }

.cl-body .ld{columns:2;column-gap:32px}
.cl-body .ld li{break-inside:avoid}
@media (max-width:760px){ .cl-body .ld{columns:1} }

/* this season v last season */
.sc-key{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:#5B5A58;margin:0 0 10px}
.sc-key i{display:inline-block;width:12px;height:8px;border-radius:3px;margin-right:6px;vertical-align:0}
.sc-key i.o,.sc-b i.o{background:#B5B0A8}.sc-key i.n,.sc-b i.n{background:#3B82F6}
.sc-r{display:grid;grid-template-columns:minmax(0,1.1fr) 62px minmax(90px,2fr) 62px 86px;gap:10px;align-items:center;padding:7px 0;border-top:1px solid rgba(35,34,32,.07);font-size:13.5px}
.sc-l{font-weight:600;color:#232220;min-width:0}
.sc-v{font:700 13.5px 'JetBrains Mono',ui-monospace,monospace;text-align:right;color:#232220}.sc-v.old{color:#8E8A83}
.sc-b{display:flex;flex-direction:column;gap:3px}
.sc-b i{display:block;height:7px;border-radius:7px;width:var(--w)}
.sc-r em{font:800 12.5px Inter,system-ui,sans-serif;font-style:normal;text-align:right;white-space:nowrap}
.sc-r em.up{color:#15803D}.sc-r em.dn{color:#B91C1C}
@media (max-width:760px){ .sc-r{grid-template-columns:minmax(0,1fr) 48px 48px 64px} .sc-b{display:none} }
@layer theme{ .phub .sc-l,.phub .sc-v{color:#232220!important} .phub .sc-v.old,.phub .sc-key{color:#8E8A83!important} .phub .sc-r em.up{color:#15803D!important} .phub .sc-r em.dn{color:#B91C1C!important} }

/* tennis (Callum 11-Nov): win rate + serve beside the percentile chart; compact match list */
@layer theme{
  .phub-target[data-sport=tennis] .tp-out{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)!important;grid-auto-flow:row dense;column-gap:12px}
  .phub-target[data-sport=tennis] .tp-out > *{grid-column:1 / -1!important}
  .phub-target[data-sport=tennis] .tp-out > .pl-l{grid-column:1!important}
  .phub-target[data-sport=tennis] .tp-out > .pl-r{grid-column:2!important;grid-row:span 2}
  .phub-target[data-sport=tennis] .tp-mrow{display:grid!important;grid-template-columns:78px 22px minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:5px 0!important;min-height:0!important;font-size:13px!important}
  .phub-target[data-sport=tennis] .tp-mrow > span:nth-child(3){display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;min-width:0}
  .phub-target[data-sport=tennis] .tp-mrow > span:nth-child(3) .tp-mdate{display:inline!important;font-size:11.5px!important;margin:0!important}
  .phub-target[data-sport=tennis] .tp-mrow .tp-mdate{font:500 12px/1.2 'JetBrains Mono',ui-monospace,monospace!important}
  .phub-target[data-sport=tennis] .tp-mrow .tp-mscore{font:600 12.5px/1.2 'JetBrains Mono',ui-monospace,monospace!important;white-space:nowrap;text-align:right}
  .phub-target[data-sport=tennis] .tp-mrow .tp-w,.phub-target[data-sport=tennis] .tp-mrow .tp-l{font:800 12px/1 Inter,system-ui,sans-serif!important;text-align:center}
}
@media (max-width:860px){ @layer theme{
  .phub-target[data-sport=tennis] .tp-out{grid-template-columns:minmax(0,1fr)!important}
  .phub-target[data-sport=tennis] .tp-out > .pl-l,.phub-target[data-sport=tennis] .tp-out > .pl-r{grid-column:1!important;grid-row:auto}
  .phub-target[data-sport=tennis] .tp-mrow{grid-template-columns:44px 18px minmax(0,1fr) auto}
} }
@layer theme{
  .phub-target[data-sport=tennis] .tp-mrow{grid-template-columns:92px 22px minmax(0,1fr) auto!important}
  .phub-target[data-sport=tennis] .tp-mrow > .tp-mdate{white-space:nowrap!important}
  .phub-target[data-sport=tennis] .tp-mrow > span:nth-child(3) .tp-mdate{font:500 12px/1.3 Inter,system-ui,sans-serif!important;color:#5B5A58!important}
  .phub-target[data-sport=tennis] .tp-mrow .tp-m{font:600 13.5px/1.3 Inter,system-ui,sans-serif!important}
}
@media (max-width:860px){ @layer theme{ .phub-target[data-sport=tennis] .tp-mrow{grid-template-columns:80px 18px minmax(0,1fr)!important} .phub-target[data-sport=tennis] .tp-mrow .tp-mscore{grid-column:3;text-align:left} } }

/* NBA player page */
.nb-ks{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.nb-k{background:#fff;border:1px solid rgba(35,34,32,.08);border-radius:12px;padding:10px 12px}
.nb-k small{display:block;font:700 11px/1.2 Inter,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#5B5A58}
.nb-k b{display:block;font:800 24px/1.15 'JetBrains Mono',ui-monospace,monospace;color:#232220;margin:3px 0 2px}
.nb-k span{font-size:11.5px;color:#8E8A83;white-space:nowrap}.nb-k span.up{color:#15803D;font-weight:700}.nb-k span.dn{color:#B91C1C;font-weight:700}
.nb-tabs{margin-bottom:6px;flex-wrap:wrap}.nb-tabs button{flex:none!important;padding:8px 14px!important}
.nb-ch{width:100%;height:auto;display:block}
.nb-v{font:800 14px Inter,system-ui,sans-serif;fill:#232220}.nb-o{font:600 13px Inter,system-ui,sans-serif;fill:#5B5A58}
.nb-r{font:800 12px Inter,system-ui,sans-serif}.nb-r.w{fill:#15803D}.nb-r.l{fill:#B91C1C}.nb-a{font:700 11px Inter,system-ui,sans-serif;fill:#fff}
.nb-hits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.nb-hit{position:relative;background:#fff;border:1px solid rgba(35,34,32,.08);border-radius:12px;padding:9px 12px;overflow:hidden}
.nb-hit small{display:block;font-size:12px;color:#5B5A58}.nb-hit b{font:800 18px 'JetBrains Mono',ui-monospace,monospace;color:#232220}
.nb-hit i{position:absolute;left:0;bottom:0;height:4px;width:var(--w);background:#8E8A83}
.nb-hit.hot i{background:#15803D}.nb-hit.cold i{background:#B91C1C}
.nb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.nb-grid .tc-g{background:#fff}
@media (max-width:860px){ .nb-ks{grid-template-columns:repeat(3,minmax(0,1fr))} .nb-grid{grid-template-columns:1fr} .nb-k b{font-size:20px} }
@layer theme{ .phub .nb-k b,.phub .nb-hit b{color:#232220!important} .phub .nb-k small,.phub .nb-hit small{color:#5B5A58!important} .phub .nb-k span.up{color:#15803D!important} .phub .nb-k span.dn{color:#B91C1C!important} }
/* NBA chart on phones: keep it readable and let it scroll sideways rather than shrink the labels */
.nb-body{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:760px){ .nb-body .nb-ch{min-width:640px} .nb-hits{min-width:0} }