/* ============================================================
   STATS HUB (/stats) — leaders, player stats, grade entry, staff dashboard, game report.
   Builds on style.css tokens. Everything here is scoped to .sx / .sx-* so it can't leak.
   ============================================================ */
body.sx-page{background:var(--smoke)}
[hidden]{display:none !important}

/* ---------- top band ---------- */
.sx-bar{background:var(--grey); color:#fff; position:relative; overflow:hidden;
  padding:clamp(104px,14vh,140px) 0 0}
.sx-bar::after{content:""; position:absolute; inset:auto 0 0 0; height:4px; background:linear-gradient(90deg,var(--red),transparent)}
.sx-crumb{margin-bottom:10px}
.sx-bar-row{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.sx-title{font-family:var(--font-head); text-transform:uppercase; font-size:clamp(2.1rem,6vw,3.6rem); line-height:.95; font-weight:400}
.sx-switches{display:flex; gap:8px; flex-wrap:wrap}
.sx-side{display:inline-flex; border:1px solid var(--line); border-radius:4px; overflow:hidden}
.sx-side a{font-family:var(--font-label); text-transform:uppercase; letter-spacing:.14em; font-size:.78rem;
  padding:11px 18px; color:#a9a9b0; transition:background .2s var(--ease), color .2s var(--ease)}
.sx-side a:hover{color:#fff}
.sx-side a[aria-current]{background:var(--red); color:#fff}
.sx-tabs{display:flex; gap:4px; margin-top:22px; overflow-x:auto}
.sx-tabs a{font-family:var(--font-label); text-transform:uppercase; letter-spacing:.14em; font-size:.82rem;
  color:#a9a9b0; padding:12px 16px 14px; border-bottom:4px solid transparent; white-space:nowrap}
.sx-tabs a:hover{color:#fff}
.sx-tabs a[aria-current]{color:#fff; border-bottom-color:var(--red)}

/* signed-in name + sign out */
.sx-bar-top{display:flex; justify-content:space-between; align-items:center; gap:12px}
.sx-who{font-size:.85rem; color:#c9c9ce; text-align:right}
.sx-who button{background:none; border:0; padding:0; color:#fff; text-decoration:underline; font:inherit; cursor:pointer}

/* sign-in gate: until the script says who you are, only the sign-in panel shows */
.sx-signin{max-width:32.5rem}
.sx-signin h2{margin:0}
.sx-signin .sx-sub{margin:0}
body.sx-page:not(.sx-in) .sx > :not(.sx-signin),
body.sx-page:not(.sx-in) .sx-savebar{display:none !important}
body.sx-in .sx-signin{display:none}
body:not(.sx-staff) .sx-tabs [data-staff]{display:none}

/* ---------- page shell ---------- */
.sx{max-width:var(--wrap); margin:0 auto; padding:28px var(--pad) 80px; color:#17171a; line-height:1.45; font-size:1.05rem}
.sx :is(button,select,input,a,th):focus-visible{outline:3px solid var(--red); outline-offset:2px}
.sx select,.sx input{font:inherit; font-size:16px; padding:10px 12px; border:1px solid var(--smoke-2);
  border-radius:5px; background:#fff; color:var(--ink); width:100%}
.sx label{display:block; font-family:var(--font-label); text-transform:uppercase; letter-spacing:.12em;
  font-size:.74rem; color:var(--muted); margin-bottom:6px}
.sx h2{font-family:var(--font-head); text-transform:uppercase; font-weight:400; font-size:2.1rem; margin:34px 0 12px; line-height:1}
.sx h2 small{font-family:var(--font-body); text-transform:none; font-size:.85rem; color:var(--muted); margin-left:8px}
.sx-sub{font-size:1rem; color:var(--muted); margin:0 0 14px}
.sx-empty{color:var(--muted); padding:42px 12px; text-align:center}
.sx-err{color:var(--red); font-weight:600; white-space:pre-line}
.sx-ok{color:#1b7a3a; font-weight:600}
.sx-link{color:var(--red); font-weight:600}
.sx-go{font-family:var(--font-label); text-transform:uppercase; letter-spacing:.12em; font-size:.85rem;
  padding:13px 22px; border:0; border-radius:3px; background:var(--red); color:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; white-space:nowrap}
.sx-go:hover{background:var(--red-dark)}
.sx-go:disabled{background:#b9b6b1; cursor:default}
.sx-row-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.sx-row-head h2{margin-right:auto}
.sx-row-head select{width:auto}

/* season / region switch */
.sx-scope{display:inline-flex; border:1px solid var(--smoke-2); border-radius:4px; overflow:hidden; background:#fff}
.sx-scope button{font-family:var(--font-label); text-transform:uppercase; letter-spacing:.12em; font-size:.8rem;
  border:0; background:#fff; color:var(--muted); padding:10px 18px; cursor:pointer}
.sx-scope button[aria-pressed="true"]{background:var(--grey); color:#fff}
.sx-filters{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px}
.sx-filters select{width:auto}

/* in-page tabs (players: leaders / my stats; staff views) */
.sx-ptabs{display:flex; gap:6px; margin-bottom:18px; overflow-x:auto}
.sx-ptabs button{font-family:var(--font-label); text-transform:uppercase; letter-spacing:.12em; font-size:.85rem;
  padding:11px 18px; border:1px solid var(--smoke-2); background:#fff; color:var(--muted); border-radius:4px; cursor:pointer; white-space:nowrap}
.sx-ptabs button[aria-selected="true"]{background:var(--red); border-color:var(--red); color:#fff}

/* stat tiles */
.sx-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px}
.sx-tiles.scroll{display:flex; overflow-x:auto; padding-bottom:6px}
.sx-tiles.scroll .sx-tile{flex:0 0 auto; min-width:128px}
.sx-tile{background:#fff; border:1px solid var(--smoke-2); border-top:3px solid var(--red); border-radius:4px; padding:14px 16px}
.sx-tile .v{font-family:var(--font-head); font-size:2.6rem; line-height:1; color:var(--ink)}
.sx-tile .l{font-family:var(--font-label); text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; color:var(--muted); margin-top:8px}

/* leaderboards */
.sx-boards{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:640px){.sx-boards{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.sx-boards{grid-template-columns:1fr 1fr 1fr}}
.sx-board{background:#fff; border:1px solid var(--smoke-2); border-radius:4px; overflow:hidden}
.sx-board h3{margin:0; padding:14px 18px; background:var(--grey); color:#fff; font-family:var(--font-head);
  text-transform:uppercase; font-weight:400; font-size:1.45rem; letter-spacing:.02em}
.sx-board ol{list-style:none; margin:0; padding:0}
.sx-board li{display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:10px; padding:12px 18px; border-top:1px solid var(--smoke)}
.sx-board li:first-child{border-top:0; background:#fff4f4}
.sx-jn{font-family:var(--font-head); font-size:1.7rem; color:var(--red); text-align:center}
.sx-pn{font-weight:600; font-size:1.05rem}
.sx-pn small{display:block; font-weight:400; font-size:.8rem; color:var(--muted)}
.sx-val{font-family:var(--font-head); font-size:1.85rem}
.sx-board li:first-child .sx-val{font-size:2.3rem; color:var(--red)}

/* tables */
.sx-table{overflow-x:auto; background:#fff; border:1px solid var(--smoke-2); border-radius:4px}
.sx-table table{border-collapse:collapse; width:100%; font-size:.95rem; white-space:nowrap}
.sx-table th,.sx-table td{padding:11px 12px; text-align:right; border-top:1px solid var(--smoke)}
.sx-table th{background:var(--grey); color:#fff; font-weight:600; border-top:0}
.sx-table th.sort{cursor:pointer; user-select:none}
.sx-table .l{text-align:left}
.sx-table td.text{text-align:left; white-space:normal; min-width:180px}
.sx-table td small{color:var(--muted)}
.sx-table tbody tr:nth-child(even) td{background:#fafafa}
.sx-table tr.click{cursor:pointer}
.sx-table tr.click:hover td{background:#fff4f4}
.sx-table td.in{color:#1b7a3a; font-weight:600; text-align:center}
.sx-table td.miss{color:var(--red); font-weight:600; text-align:center; background:#fff4f4 !important}
.sx-table td.na{color:var(--muted); text-align:center}
.sx-table .stick{position:sticky; left:0; background:inherit}
.sx-table td.stick{background:#fff; font-weight:600}

/* panels: sign-in, entry controls, coach player lookup */
.sx-panel{background:#fff; border:1px solid var(--smoke-2); border-top:4px solid var(--red); border-radius:4px; padding:18px; display:grid; gap:12px}
.sx-lookup{max-width:26.25rem}

/* my stats header */
.sx-me{margin-top:20px}
.sx-me-head{display:flex; align-items:stretch; background:#fff; border:1px solid var(--smoke-2); border-radius:4px; overflow:hidden; margin-bottom:6px}
.sx-me-num{background:var(--red); color:#fff; font-family:var(--font-head); font-size:4.4rem; line-height:1; padding:14px 22px; min-width:116px; text-align:center}
.sx-me-name{padding:12px 16px; display:flex; flex-direction:column; justify-content:center}
.sx-me-name b{font-family:var(--font-head); text-transform:uppercase; font-weight:400; font-size:2.4rem; line-height:1}
.sx-me-name span{color:var(--muted); font-size:1rem; margin-top:4px}

/* ---------- grade entry ---------- */
.sx-controls{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(min-width:800px){.sx-controls{grid-template-columns:repeat(4,1fr)}}
.sx-players{display:grid; gap:12px; margin-top:16px; padding-bottom:110px}
.sx-player{display:grid; grid-template-columns:64px 1fr; background:#fff; border:1px solid var(--smoke-2); border-radius:4px; overflow:hidden}
.sx-pnum{background:var(--grey); color:#fff; font-family:var(--font-head); font-size:2.3rem; line-height:1;
  display:flex; align-items:flex-start; justify-content:center; padding-top:12px}
.sx-player.saved .sx-pnum{background:var(--red)}
.sx-pbody{padding:10px 12px 12px; min-width:0}
.sx-phead{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px}
.sx-pname{font-weight:700; font-size:1.15rem}
.sx-pstate{font-size:.8rem; color:var(--muted)}
.sx .sx-dnp{display:flex; align-items:center; gap:6px; font-family:var(--font-body); text-transform:none; letter-spacing:0;
  font-size:.88rem; color:#17171a; margin:0; white-space:nowrap; cursor:pointer}
.sx .sx-dnp input{width:20px; height:20px; accent-color:var(--red)}
.sx-player.is-dnp .sx-fields,.sx-player.is-dnp .sx-toprow{opacity:.35}
.sx-toprow{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; background:#fff4f4; border-radius:4px; padding:8px; margin-bottom:10px}
.sx-toprow input{font-size:18px; font-weight:700; text-align:center}
.sx-fields{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
@media(min-width:700px){.sx-fields{grid-template-columns:repeat(6,1fr)}}
.sx-field.text{grid-column:1 / -1}
.sx-field input{padding:8px}
.sx .sx-field label{font-size:.66rem; letter-spacing:.08em; margin-bottom:4px}
.sx-stepper{display:grid; grid-template-columns:34px 1fr 34px}
.sx-stepper button{font:inherit; font-size:20px; font-weight:700; padding:0; border:1px solid var(--smoke-2); background:#fff; color:var(--grey); cursor:pointer}
.sx-stepper button:first-child{border-radius:5px 0 0 5px; border-right:0}
.sx-stepper button:last-child{border-radius:0 5px 5px 0; border-left:0}
.sx .sx-stepper input{border-radius:0; min-width:0; padding:8px 0; text-align:center}
@media(max-width:480px){
  .sx{padding-inline:12px}
  .sx-player{grid-template-columns:48px 1fr}
  .sx-pnum{font-size:1.8rem}
  .sx-toprow{gap:6px; padding:6px}
  .sx-stepper{grid-template-columns:28px 1fr 28px}
}
.sx-stepper button:disabled{color:#c3c3c9}
.sx-savebar{position:fixed; left:0; right:0; bottom:0; z-index:90; background:#fff; border-top:1px solid var(--smoke-2);
  box-shadow:0 -10px 30px -18px rgba(0,0,0,.4); padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom,0px))}
.sx-savebar .in{max-width:calc(var(--wrap) - 2 * var(--pad)); margin:0 auto; display:flex; gap:12px; align-items:center}
.sx-savebar #msg{flex:1; font-size:.9rem; white-space:pre-line}

/* ---------- printable game report ---------- */
.sx-sheet{background:#fff; border:1px solid var(--smoke-2); border-radius:4px; padding:24px 26px}
.sx-rtop{display:flex; align-items:stretch; justify-content:space-between; gap:16px; border-bottom:4px solid var(--red); padding-bottom:12px}
.sx-rtop .kicker{font-family:var(--font-label); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:var(--muted)}
.sx-rtop h1{margin:6px 0 6px; font-family:var(--font-head); text-transform:uppercase; font-weight:400; font-size:2.8rem; line-height:1}
.sx-rtop .meta{font-size:.88rem; color:var(--muted)}
.sx-rtag{display:inline-block; background:var(--red); color:#fff; font-size:.72rem; font-weight:600; padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:1px}
.sx-unit{background:var(--grey); color:#fff; border-radius:4px; padding:8px 18px; text-align:center; min-width:130px; display:flex; flex-direction:column; justify-content:center}
.sx-unit .v{font-family:var(--font-head); font-size:3.2rem; line-height:1}
.sx-unit .l{font-size:.8rem; opacity:.85}
.sx-sheet .sx-tiles{grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); margin:14px 0}
.sx-sheet .sx-tile.sticker{background:#fff4f4}
.sx-highlights{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.sx-hl{border:1px solid var(--smoke-2); border-radius:4px; overflow:hidden}
.sx-hl h3{margin:0; padding:7px 10px; font-family:var(--font-head); text-transform:uppercase; font-weight:400; font-size:1.05rem; background:var(--smoke); border-bottom:1px solid var(--smoke-2)}
.sx-hl ol{margin:0; padding:0; list-style:none}
.sx-hl li{display:grid; grid-template-columns:34px 1fr auto; gap:8px; padding:6px 10px; border-top:1px solid var(--smoke); font-size:.88rem; align-items:center}
.sx-hl li:first-child{border-top:0}
.sx-hl .sx-jn{font-size:1.1rem}
.sx-hl .sx-val{font-size:1.1rem}
.sx-sheet h2{font-size:1.4rem; margin:20px 0 6px}
.sx-rtable{overflow-x:auto}
.sx-rtable table{border-collapse:collapse; width:100%; font-size:.82rem}
.sx-rtable th,.sx-rtable td{padding:5px 7px; text-align:center; border-bottom:1px solid #e7e5e1; white-space:nowrap}
.sx-rtable th{background:var(--grey); color:#fff; font-weight:600; font-size:.75rem}
.sx-rtable th.hi{background:var(--red)}
.sx-rtable .l{text-align:left}
.sx-rtable td.num{font-family:var(--font-head); font-size:1rem; color:var(--red)}
.sx-rtable td.grade{font-weight:700; background:#fafafa}
.sx-rtable td.grade.high{color:#1b7a3a}
.sx-rtable td.grade.low{color:var(--red)}
.sx-rtable td.stk{background:#fff4f4; font-weight:600}
.sx-rtable tr.avg td{font-weight:700; background:var(--smoke); border-bottom:0}
.sx-notes{margin:0; padding:0; list-style:none; columns:2; column-gap:24px; font-size:.82rem}
.sx-notes li{break-inside:avoid; margin-bottom:6px}
.sx-foot{margin-top:16px; font-size:.7rem; color:var(--muted); display:flex; justify-content:space-between; gap:12px}

@page{size:letter landscape; margin:.35in}
@media print{
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  body.sx-page{background:#fff}
  .site-head,.site-foot,.sx-bar,.sx-noprint{display:none !important}
  .sx{padding:0; max-width:none}
  .sx-sheet{border:0; padding:0}
  .sx-rtable{overflow:visible}
  .sx-rtable table{font-size:10.5px}
  .sx-group{break-inside:avoid-page}
  thead{display:table-header-group}
}

/* ---------- /stats landing ---------- */
.sx-doors{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:-46px; position:relative; z-index:2}
@media(max-width:1000px){.sx-doors{grid-template-columns:1fr}}
.sx-door{background:#fff; border:1px solid var(--smoke-2); border-radius:6px; overflow:hidden; box-shadow:var(--shadow)}
.sx-door .head{background:var(--grey); color:#fff; padding:22px 24px; display:flex; justify-content:space-between; align-items:center; gap:12px}
.sx-door.def .head{background:var(--red)}
.sx-door .head h2{margin:0; font-size:2rem; color:#fff}
.sx-door .head small{font-family:var(--font-label); text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; opacity:.85}
.sx-door .links{display:grid}
.sx-door .links a{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 24px; border-top:1px solid var(--smoke);
  transition:background .2s var(--ease)}
.sx-door .links a:first-child{border-top:0}
.sx-door .links a:hover{background:#fff4f4}
.sx-door .links b{font-family:var(--font-head); text-transform:uppercase; font-weight:400; font-size:1.25rem; display:block; color:var(--ink)}
.sx-door .links span{font-size:.88rem; color:var(--muted)}
.sx-door .links .arw{color:var(--red); font-size:1.2rem}