/* The stat explorer (/stats/explore, templates/stats/explore.html): a
   full-screen workspace like the Markets chart and the Game simulator.
   The cards inside (workbench, leaderboard, the picked row) keep
   stats-explorer.css; this file is the shell: the top bar, the category
   bar and three panes that scroll on their own. */
html:has(> body.sx-page), body.sx-page { height: 100%; margin: 0; background: var(--tl-page); color: var(--tl-ink); }
body.sx-page { font-family: var(--tl-font); -webkit-font-smoothing: antialiased; font-feature-settings: 'tnum', 'cv11'; overflow: hidden; }
:where(.sx-page) :where(button, input, select) { font: inherit; color: inherit; margin: 0; }
:where(.sx-page) :where(button) { cursor: pointer; background: none; border: 0; padding: 0; }
:where(.sx-page) :where(a) { color: inherit; text-decoration: none; }
.sx-page :is(a, button, input, select):focus-visible { outline: none; box-shadow: var(--tl-focus-ring); }

.sx { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }

/* Top: home, name, league, players or teams, coverage, close. */
.sx-top { display: flex; align-items: center; gap: 12px; min-width: 0; height: 52px; padding: 0 12px 0 14px; border-bottom: 1px solid var(--tl-line-10); }
.sx-home img { display: block; border-radius: 6px; }
.sx-name { flex: none; font-size: 14.5px; font-weight: 650; letter-spacing: -0.2px; }
.sx-leagues { flex: none; display: flex; gap: 2px; padding: 2px; border: 1px solid var(--tl-line-10); border-radius: 8px; }
.sx-league { padding: 4px 10px; border-radius: 6px; font: 500 11.5px var(--tl-mono); letter-spacing: 0.04em; color: var(--tl-ink-60); }
.sx-league:hover { color: var(--tl-ink); }
.sx-league[aria-current] { background: var(--tl-fill-06); color: var(--tl-ink); }
.sx-top .tl-seg { flex: none; }
.sx-grow { flex: 1; min-width: 0; }
.sx-top .shx-cov { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--tl-ink-50); }
.sx-icon { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--tl-ink-60); }
.sx-icon:hover { background: var(--tl-fill-06); color: var(--tl-ink); }

/* The categories (players only; teams hide them). */
.sx-catbar { padding: 10px 14px; border-bottom: 1px solid var(--tl-line-06); overflow-x: auto; scrollbar-width: none; }
.sx-catbar::-webkit-scrollbar { display: none; }
.sx-catbar .shx-cats { display: flex; flex-wrap: nowrap; gap: 6px; }
.sx-catbar:has(> .shx-cats[hidden]) { display: none; }

/* Left: the workbench and the conference. Middle: the leaderboard.
   Right: the picked row. Each pane scrolls on its own. */
.sx-body { display: grid; grid-template-columns: 250px minmax(0, 1fr) 320px; gap: 12px; min-height: 0; padding: 12px; }
.sx-left, .sx-main, .sx-right { min-height: 0; overflow: auto; scrollbar-width: thin; }
.sx-left { display: flex; flex-direction: column; gap: 12px; }
.sx-main { display: flex; flex-direction: column; gap: 12px; }
.sx-main .shx-board { flex: 1 0 auto; }
.sx-main .shx-board-head { position: sticky; top: 0; z-index: 3; background: var(--tl-card-body, var(--tl-page)); }
.sx-confs { padding: 12px 14px 14px; }
.sx-confs .shx-glabel { margin-bottom: 8px; }
.sx-hint { margin: 10px 4px 0; font-size: 12px; line-height: 1.5; color: var(--tl-ink-50); }

@media (max-width: 1280px) {
  .sx-body { grid-template-columns: 230px minmax(0, 1fr) 280px; }
}
/* Narrow: one page that scrolls, the panes stacked. */
@media (max-width: 1000px) {
  body.sx-page { overflow: auto; }
  .sx { height: auto; min-height: 100vh; }
  .sx-body { grid-template-columns: minmax(0, 1fr); }
  .sx-left, .sx-main, .sx-right { overflow: visible; }
  .sx-right { order: -1; }
  .sx-main .shx-board-head { position: static; }
  .sx-top .shx-cov { display: none; }
}
@media (max-width: 560px) {
  .sx-name { display: none; }
}