/* =============================================================================
   /stats National Leaders Hub — design_handoff_stats_hub option 1a "The
   Record". Broadsheet layout: feature #1 + chase (2-5), full box-score grid,
   national-distribution band. Designed LIGHT-first — the light values below
   are the spec; the dark base maps them onto the site's white-alpha scale.
   All numerics tabular; cards outline-only; the table opens with the 2px
   ink newspaper rule.
   ============================================================================= */

/* Full-bleed like /explore: neutralize the Pico container cap. */
.page-stats main.container { max-width: 100%; width: 100%; padding-left: 0; padding-right: 0; }

.shx {
  /* dark base tokens (light block overrides at the end = the spec values) */
  --sx-ink: #fff;
  --sx-t85: rgba(255, 255, 255, 0.9);
  --sx-t78: rgba(255, 255, 255, 0.8);
  --sx-t2: rgba(255, 255, 255, 0.72);     /* text-2 (.72) */
  --sx-t3: rgba(255, 255, 255, 0.62);     /* text-3 (.65) */
  --sx-quiet: rgba(255, 255, 255, 0.5);   /* quiet (.55) */
  --sx-ghost: rgba(255, 255, 255, 0.35);  /* ghost (.3-.35) */
  --sx-hair: rgba(255, 255, 255, 0.25);   /* card/rule hairline (.38) */
  --sx-row: rgba(255, 255, 255, 0.1);     /* row hairline (.16) */
  --sx-div: rgba(255, 255, 255, 0.14);    /* dividers (.2) */
  --sx-axis: rgba(255, 255, 255, 0.3);    /* axis rule (.35) */
  --sx-chip-line: rgba(255, 255, 255, 0.3);
  --sx-fill: rgba(255, 255, 255, 0.12);   /* active chip fill (.08) */
  --sx-panel: rgba(255, 255, 255, 0.06);  /* photo fallback / avatar (.05-.08) */
  --sx-track: rgba(255, 255, 255, 0.15);  /* bar tracks (.1-.12) */
  --sx-bar: #e9edf2;                      /* bar/solid fill (ink) */
  --sx-bar-text: #0b0d10;                 /* text on solid fill */
  --sx-hist: rgba(255, 255, 255, 0.2);    /* histogram bars (.18) */
  --sx-spark: rgba(255, 255, 255, 0.5);   /* sparkline stroke (.5-.55) */
  --sx-menu: #1e2028;                     /* popover surface (#fff light) */
  color: var(--sx-ink);
  font-variant-numeric: tabular-nums;
}

/* ---- section-head extras ---- */
.shx .si-shead { margin-bottom: 18px; }
.shx-subhead.si-shead { margin-bottom: 14px; }
.shx-lbhead.si-shead { margin-bottom: 10px; }
/* season select styled as a bordered chip; the native select sits on top */
.shx-season {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px;
  border: 1px solid var(--sx-chip-line); border-radius: 9px;
  font-size: 12px; font-weight: 600; color: var(--sx-ink);
  white-space: nowrap; cursor: pointer;
}
.shx-season-label { pointer-events: none; }
.shx-caret { font-size: 9px; color: var(--sx-quiet); pointer-events: none; }
.shx-season select {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  margin: 0 !important; padding: 0 !important; border: none !important;
  background: transparent !important; color: transparent !important;
  box-shadow: none !important; cursor: pointer; appearance: none;
  -webkit-appearance: none;
}

/* ---- headline + controls ---- */
.shx-h1 {
  margin: 0 0 6px;
  font-size: 34px; font-weight: 800; letter-spacing: -0.4px; line-height: 1.15;
  color: var(--sx-ink);
}
.shx-dek { margin: 0 0 18px; max-width: 640px; font-size: 14px; line-height: 1.45; color: var(--sx-t2); }
.shx-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 26px; }
.shx-cats {
  display: inline-flex; align-items: center; padding: 2px;
  border: 1px solid var(--sx-chip-line); border-radius: 999px;
}
.shx-cat {
  margin: 0 !important; border: 0 !important; width: auto !important;
  padding: 4px 13px !important; border-radius: 999px !important;
  background: transparent !important; color: var(--sx-t2) !important;
  font-size: 11.5px !important; font-weight: 700; font-family: inherit;
  line-height: 1.3 !important; white-space: nowrap; cursor: pointer;
  box-shadow: none !important;
}
.shx-cat.is-on { background: var(--sx-bar) !important; color: var(--sx-bar-text) !important; }
.shx-chips { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.shx-chip {
  margin: 0 !important; border: 0 !important; width: auto !important;
  padding: 6px 13px !important; border-radius: 999px !important;
  background: transparent !important; color: var(--sx-t2) !important;
  font-size: 12px !important; font-weight: 600; font-family: inherit;
  line-height: 1.3 !important; white-space: nowrap; cursor: pointer;
  box-shadow: none !important;
}
.shx-chip.is-on { background: var(--sx-fill) !important; color: var(--sx-ink) !important; font-weight: 700; }
.shx-qual {
  margin-left: auto; flex: 1 1 auto; text-align: right;
  font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--sx-t3); white-space: nowrap;
}

/* ---- lead band ---- */
.shx-lead { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: stretch; margin: 0 0 36px; }
.shx-leadcol { display: flex; flex-direction: column; min-width: 0; }

/* feature card */
.shx-feature {
  flex: 1; display: flex;
  border: 1px solid var(--sx-hair); border-radius: 16px;
  overflow: hidden; min-height: 380px;
}
.shx-photo { position: relative; width: 44%; flex: none; background: var(--sx-panel); }
.shx-photo img,
.shx .shx-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; background: transparent; }
.shx-photo-blank {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 800; color: var(--sx-ghost);
}
.shx-feat-body {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: 14px; padding: 26px 28px; min-width: 0;
}
.shx-feat-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--sx-t78);
}
.shx-feat-kicker img,
.shx .shx-feat-kicker img { width: 16px; height: 16px; object-fit: contain; background: transparent; }
.shx-feat-name { font-size: 30px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.1; color: var(--sx-ink); text-decoration: none; display: block; }
a.shx-feat-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.shx-feat-valrow { display: flex; align-items: baseline; gap: 12px; }
.shx-feat-val { font-size: 64px; font-weight: 800; letter-spacing: -2px; line-height: 1; }
.shx-feat-unit { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--sx-t3); }
.shx-feat-mini { display: flex; align-items: center; gap: 22px; }
.shx-feat-mini > span { display: flex; flex-direction: column; gap: 1px; }
.shx-feat-mini b { font-size: 15px; font-weight: 800; }
.shx-feat-mini i {
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--sx-t3);
}
.shx-feat-pctl { display: flex; flex-direction: column; gap: 6px; }
.shx-feat-pctl-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--sx-t3);
}
.shx-bar { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--sx-track); overflow: hidden; }
.shx-bar i { display: block; height: 100%; border-radius: 3px; background: var(--sx-bar); }
.shx-feat-spark { display: flex; flex-direction: column; gap: 4px; }
.shx-feat-spark svg { display: block; }
.shx-feat-spark polyline { fill: none; stroke: var(--sx-spark); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.shx-feat-spark-cap { font-size: 10.5px; color: var(--sx-t3); }

/* the chase */
.shx-chase { flex: 1; display: flex; flex-direction: column; }
.shx-chase-row {
  flex: 1; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
  column-gap: 16px; align-items: center; padding: 14px 0;
  border-top: 1px solid var(--sx-div);
  text-decoration: none; color: inherit;
}
.shx-chase-rk { text-align: center; font-size: 15px; font-weight: 800; color: var(--sx-ghost); }
.shx-chase-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.shx-chase-name { font-size: 16.5px; font-weight: 800; letter-spacing: -0.2px; line-height: 1.2; color: var(--sx-ink); }
.shx-chase-row:hover .shx-chase-name { text-decoration: underline; text-underline-offset: 2px; }
.shx-chase-sub { display: flex; align-items: center; gap: 7px; min-width: 0; }
.shx-chase-logo,
.shx img.shx-chase-logo { width: 15px; height: 15px; flex: none; object-fit: contain; background: transparent; }
.shx-chase-school {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--sx-t78); white-space: nowrap;
}
.shx-chase-line { font-size: 12px; color: var(--sx-t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shx-chase-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.shx-chase-val { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; color: var(--sx-ink); }
.shx-chase-pctl {
  font-size: 10px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--sx-quiet); white-space: nowrap;
}

/* ---- the leaderboard (CSS grid rows; template set by JS per category) ---- */
.shx-table-wrap { overflow-x: auto; }
.shx-thead, .shx-trow {
  display: grid; column-gap: 12px; align-items: center; padding: 9px 0;
  min-width: 880px;
}
.shx-thead {
  border-top: 2px solid var(--sx-ink);   /* the newspaper rule */
  border-bottom: 1px solid var(--sx-axis);
  font-size: 10px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--sx-t3);
}
.shx-trow { border-bottom: 1px solid var(--sx-row); text-decoration: none; color: inherit; }
.shx-num { text-align: right; }
.shx-td-rk { font-size: 13px; font-weight: 800; color: var(--sx-ghost); }
.shx-td-player { display: flex; align-items: center; gap: 10px; min-width: 0; }
.shx-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--sx-panel);
  font-size: 10px; font-weight: 800; color: var(--sx-t78);
  overflow: hidden;
}
.shx-av img,
.shx .shx-av img { width: 100%; height: 100%; object-fit: cover; background: transparent; }
.shx-td-name { font-size: 13.5px; font-weight: 700; color: var(--sx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shx-trow:hover .shx-td-name { text-decoration: underline; text-underline-offset: 2px; }
.shx-td-pos { font-size: 9.5px; font-weight: 800; letter-spacing: 0.8px; color: var(--sx-quiet); flex: none; }
.shx-td-school { display: flex; align-items: center; gap: 8px; min-width: 0; }
.shx-td-school img,
.shx .shx-td-school img { width: 18px; height: 18px; flex: none; object-fit: contain; background: transparent; }
.shx-td-school span { font-size: 12.5px; font-weight: 600; color: var(--sx-t85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shx-td-conf { font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--sx-t3); white-space: nowrap; }
.shx-td-lead { font-size: 13.5px; font-weight: 800; color: var(--sx-ink); }
.shx-td-stat { font-size: 12.5px; font-weight: 600; color: var(--sx-t2); }
.shx-td-stat.is-strong { font-weight: 700; color: var(--sx-t85); }
.shx-td-pctl { display: flex; align-items: center; gap: 8px; }
.shx-td-pctl .shx-bar { width: 56px; height: 5px; flex: none; }
.shx-td-pctl b { font-size: 12px; font-weight: 700; min-width: 22px; text-align: right; color: var(--sx-ink); }
.shx-td-spark { display: block; margin-left: auto; }
.shx-td-spark polyline { fill: none; stroke: var(--sx-spark); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.shx-tfoot { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 0; }
.shx-tfoot span { font-size: 11.5px; color: var(--sx-t3); }
.shx-empty-note { margin: 18px 0 0; font-size: 12.5px; color: var(--sx-t2); }

/* ---- the field ---- */
.shx-fieldhead.si-shead { margin: 40px 0 18px; }
.shx-field-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) 300px 340px; gap: 48px; align-items: end; }
.shx-hist-wrap { position: relative; }
.shx-hist { display: flex; align-items: flex-end; gap: 6px; height: 220px; }
.shx-hist > span { flex: 1; background: var(--sx-hist); border-radius: 3px 3px 0 0; }
.shx-hist > span:hover:not(.shx-hist-lead) { background: var(--sx-t3); }
.shx-hist .shx-hist-lead {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: stretch; gap: 4px; height: 220px; background: transparent;
}
.shx-hist-flag { font-size: 8.5px; font-weight: 800; letter-spacing: 0.6px; text-align: center; color: var(--sx-ink); white-space: nowrap; overflow: hidden; }
.shx-hist-lead i { display: block; background: var(--sx-bar); border-radius: 3px 3px 0 0; }
.shx-hist-tip {
  position: absolute; top: -8px; z-index: 5; transform: translateX(-50%);
  padding: 7px 11px; border-radius: 8px; background: var(--sx-bar);
  color: var(--sx-bar-text); font-size: 11px; font-weight: 600; line-height: 1.5;
  white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(16, 20, 24, 0.22);
}
.shx-hist-tip b { display: block; font-size: 11.5px; font-weight: 800; }
.shx-axis {
  display: flex; justify-content: space-between; padding-top: 8px;
  border-top: 1px solid var(--sx-axis);
  font-size: 10.5px; font-weight: 700; color: var(--sx-t3);
}

/* player finder (field shead ctl) */
.shx-find-wrap { position: relative; }
.shx-find {
  width: 200px !important; height: 30px !important; margin: 0 !important;
  padding: 0 12px !important; border: 1px solid var(--sx-hair) !important;
  border-radius: 999px !important; background: transparent !important;
  background-image: none !important; color: var(--sx-ink) !important;
  font-size: 12px !important; font-weight: 600; font-family: inherit;
  box-shadow: none !important; outline: none !important;
}
.shx-find:focus { border-color: var(--sx-ink) !important; }
.shx-find::placeholder { color: var(--sx-t3); }
.shx-find-dd {
  position: absolute; top: 36px; right: 0; z-index: 20; min-width: 240px;
  padding: 5px; border: 1px solid var(--sx-hair); border-radius: 12px;
  background: var(--sx-menu); box-shadow: 0 14px 34px rgba(16, 20, 24, 0.16);
  display: flex; flex-direction: column;
}
.shx-find-hit {
  display: flex !important; align-items: center; justify-content: space-between; gap: 14px;
  width: 100% !important; margin: 0 !important; padding: 7px 10px !important;
  border: 0 !important; border-radius: 8px !important; background: transparent !important;
  color: var(--sx-ink) !important; font-size: 12.5px !important; font-weight: 600;
  font-family: inherit; text-align: left; cursor: pointer; box-shadow: none !important;
  line-height: 1.3;
}
.shx-find-hit:hover { background: var(--sx-hist) !important; }
.shx-find-hit b { font-weight: 800; font-variant-numeric: tabular-nums; }
.shx-find-none { padding: 8px 10px; font-size: 12px; color: var(--sx-t3); }

/* players-in-range panel (right of the chart) */
.shx-field-side { min-width: 0; }
.shx-side-head { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; color: var(--sx-ink); font-variant-numeric: tabular-nums; }
.shx-side-head span { font-size: 10px; font-weight: 800; letter-spacing: 0.8px; color: var(--sx-t3); }
.shx-side-sub { margin: 3px 0 10px; font-size: 11.5px; color: var(--sx-t2); font-variant-numeric: tabular-nums; }
.shx-side-list { display: flex; flex-direction: column; }
.shx-side-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 6px 0; border-top: 1px solid var(--sx-row);
  font-size: 12.5px; font-weight: 600; color: var(--sx-ink); text-decoration: none;
}
.shx-side-row:hover span { text-decoration: underline; text-underline-offset: 2px; }
.shx-side-row b { font-weight: 800; font-variant-numeric: tabular-nums; }
.shx-side-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.shx-side-who > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shx img.shx-side-logo { width: 16px; height: 16px; flex: none; object-fit: contain; background: transparent; }
.shx-side-row.is-on { font-weight: 800; }
.shx-side-row.is-on .shx-side-who > span::after { content: ' ◂'; font-size: 10px; }
.shx-side-none { padding: 8px 0; font-size: 12px; color: var(--sx-t3); }
.shx-side-more { padding: 6px 0; font-size: 11px; font-weight: 700; color: var(--sx-t3); border-top: 1px solid var(--sx-row); }
.shx-games { padding: 16px; border: 1px solid var(--sx-hair); border-radius: 12px; }
.shx-games-label {
  font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--sx-t3); margin-bottom: 10px;
}
.shx-games-list { display: flex; flex-direction: column; gap: 12px; }
.shx-game { display: flex; align-items: baseline; gap: 10px; }
.shx-game b { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: var(--sx-ink); }
.shx-game span { font-size: 12.5px; color: var(--sx-t2); }

/* fetch fade — layout height stays, content dips */
#shxHub { transition: opacity 0.18s ease; }
#shxHub.is-loading { opacity: 0.45; pointer-events: none; }

/* ---- responsive ---- */
@media (max-width: 1200px) {
  .shx-field-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .shx-games { display: none; }
}
@media (max-width: 980px) {
  .shx-lead { grid-template-columns: 1fr; }
  .shx-feature { min-height: 320px; }
}
@media (max-width: 720px) {
  .shx-photo { display: none; }
  .shx-feat-val { font-size: 48px; }
  .shx-field-grid { grid-template-columns: 1fr; gap: 24px; }
  .shx-games { grid-row: auto; grid-column: 1; }
  .shx-qual { display: none; }
}

/* =============================================================================
   LIGHT MODE — the spec values (design_handoff_stats_hub README tokens).
   ============================================================================= */
html.si-light body.si-themed .shx {
  --sx-ink: #101418;
  --sx-t85: rgba(16, 20, 24, 0.85);
  --sx-t78: rgba(16, 20, 24, 0.78);
  --sx-t2: rgba(16, 20, 24, 0.72);
  --sx-t3: rgba(16, 20, 24, 0.65);
  --sx-quiet: rgba(16, 20, 24, 0.55);
  --sx-ghost: rgba(16, 20, 24, 0.35);
  --sx-hair: rgba(16, 20, 24, 0.38);
  --sx-row: rgba(16, 20, 24, 0.16);
  --sx-div: rgba(16, 20, 24, 0.2);
  --sx-axis: rgba(16, 20, 24, 0.35);
  --sx-chip-line: rgba(16, 20, 24, 0.3);
  --sx-fill: rgba(16, 20, 24, 0.08);
  --sx-panel: rgba(16, 20, 24, 0.05);
  --sx-track: rgba(16, 20, 24, 0.1);
  --sx-bar: #101418;
  --sx-bar-text: #fff;
  --sx-hist: rgba(16, 20, 24, 0.18);
  --sx-spark: rgba(16, 20, 24, 0.55);
  --sx-menu: #fff;
}
html.si-light body.si-themed .shx-td-pctl .shx-bar { background: rgba(16, 20, 24, 0.12); }

/* In-development notice — holds The Field's slot until the advanced tools
   (distributions, percentiles, comparisons) ship. */
.shx-devnote {
  margin: 34px 0 8px; padding: 26px 24px; text-align: center;
  border: 1px dashed var(--sx-chip-line); border-radius: 14px;
}
.shx-devnote-kicker {
  margin: 0 0 6px; font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--sx-quiet);
}
.shx-devnote-title { margin: 0; font-size: 17px; font-weight: 800; color: var(--sx-ink, inherit); }
.shx-devnote-sub { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--sx-t3); }