/* ============================================================
   StatsLogic — Custom Dark Theme
   Charcoal / Ice-White palette, persistent sidebar layout
   ============================================================ */

/* ── Tokens ── */
:root {
  --sl-bg:          #111318;
  --sl-surface:     #1e2128;
  --sl-surface-2:   #262b35;
  --sl-border:      #2e3340;
  --sl-text:        #f5f5f5;
  --sl-text-muted:  #8b95a7;
  --sl-accent:      #e2e8f0;
  --sl-accent-dim:  #3d4556;
  --sl-danger:      #e05252;
  --sl-success:     #4ade80;
  --sl-warning:     #f59e0b;
  --sl-sidebar-w:   240px;
  --sl-topbar-h:    52px;
  --sl-transition:  0.22s ease;
}

/* ── Reset / Base ── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--sl-bg);
  color: var(--sl-text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.9375rem;
}

/* ── Layout Shell ── */
.sl-wrapper {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ── */
.sl-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sl-sidebar-w);
  background: var(--sl-surface);
  border-right: 1px solid var(--sl-border);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transition: transform var(--sl-transition), width var(--sl-transition);
  overflow: hidden;
}

/* Mobile: hidden off-screen by default */
@media (max-width: 991.98px) {
  .sl-sidebar {
    transform: translateX(-100%);
    width: var(--sl-sidebar-w);
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
  }
  body.sidebar-open .sl-sidebar {
    transform: translateX(0);
  }
}

/* ── Sidebar Header ── */
.sl-sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px 14px 14px;
  border-bottom: 1px solid var(--sl-border);
  min-height: 64px;
  flex-shrink: 0;
}

.sl-sidebar-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.sl-sidebar-wordmark {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sl-accent);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: opacity var(--sl-transition);
}

/* ── Sidebar Nav ── */
.sl-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--sl-border) transparent;
}
.sl-sidebar-nav::-webkit-scrollbar { width: 4px; }
.sl-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sl-sidebar-nav::-webkit-scrollbar-thumb { background: var(--sl-border); border-radius: 2px; }

/* ── Collapsible association groups ── */
.sl-nav-details { border: none; }
.sl-nav-details > summary { list-style: none; cursor: pointer; }
.sl-nav-details > summary::-webkit-details-marker { display: none; }

.sl-nav-assoc {
  padding: 6px 14px 6px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sl-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  user-select: none;
}
.sl-nav-assoc:hover { color: var(--sl-text); }

.sl-nav-assoc-link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}
.sl-nav-assoc-link:hover { color: var(--sl-text); text-decoration: none; }
.sl-nav-assoc-link.active { color: var(--sl-accent); }

.sl-nav-assoc-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Label ellipsis for association names */
.sl-nav-assoc .sl-sidebar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.sl-nav-chevron {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--sl-text-muted);
  flex-shrink: 0;
  transition: transform var(--sl-transition);
  padding-left: 4px;
}
.sl-nav-details[open] > summary .sl-nav-chevron {
  transform: rotate(90deg);
}

.sl-nav-team {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 22px;
  color: var(--sl-text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  border-radius: 0;
  min-width: 0;
  transition: background var(--sl-transition), color var(--sl-transition);
}
.sl-nav-team:hover {
  background: var(--sl-accent-dim);
  color: var(--sl-text);
  text-decoration: none;
}
.sl-nav-team.active {
  background: var(--sl-accent-dim);
  color: var(--sl-accent);
  font-weight: 500;
}

/* Label ellipsis for team names */
.sl-nav-team .sl-sidebar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.sl-nav-team-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 2px;
  flex-shrink: 0;
}
.sl-nav-team-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sl-success);
  flex-shrink: 0;
  margin-left: auto;
}

/* ── Sidebar Footer ── */
.sl-sidebar-footer {
  border-top: 1px solid var(--sl-border);
  padding: 10px 12px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sl-sidebar-footer a,
.sl-sidebar-footer button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 0.8125rem;
  color: var(--sl-text-muted);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  transition: background var(--sl-transition), color var(--sl-transition);
  white-space: nowrap;
}
.sl-sidebar-footer a:hover,
.sl-sidebar-footer button:hover {
  background: var(--sl-accent-dim);
  color: var(--sl-text);
}
.sl-sidebar-footer .sl-footer-icon { font-size: 1rem; flex-shrink: 0; }

/* ── Main Content ── */
.sl-main {
  margin-left: var(--sl-sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: margin-left var(--sl-transition);
}
@media (max-width: 991.98px) {
  .sl-main { margin-left: 0; }
}

/* ── Mobile Top Bar ── */
.sl-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--sl-topbar-h);
  background: var(--sl-surface);
  border-bottom: 1px solid var(--sl-border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}
.sl-hamburger {
  background: none;
  border: none;
  color: var(--sl-text);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}
.sl-hamburger:hover { background: var(--sl-accent-dim); }
.sl-topbar-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--sl-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Mobile Backdrop ── */
.sl-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 150;
}
body.sidebar-open .sl-backdrop { display: block; }

/* ── Page Content ── */
.sl-content {
  padding: 0 32px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
@media (max-width: 767.98px) {
  .sl-content { padding: 0 16px 20px; }
}

/* ── Hero logo (homepage + layout) ── */
.sl-hero-logo {
  text-align: center;
  padding-top: 8px;
  margin-bottom: 12px;
}

/* ── Page Header ── */
.sl-page-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.sl-page-header-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
}
.sl-page-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--sl-text);
}

/* Mobile: the action cluster (any direct child using ms-auto / d-flex) drops
   to its own row beneath the title and its buttons wrap so a Statistician's
   three CTAs don't drag the page sideways. */
@media (max-width: 600px) {
  .sl-page-header {
    gap: 10px;
    margin-bottom: 18px;
  }
  .sl-page-header h2 { font-size: 1.2rem; }
  .sl-page-header .ms-auto {
    width: 100%;
    margin-left: 0 !important;
    flex-wrap: wrap;
  }
  .sl-page-header .ms-auto > .btn { flex: 1 1 auto; }
}

/* ── Cards ── */
.card {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: 8px;
  color: var(--sl-text);
}
.card-header {
  background: var(--sl-surface-2);
  border-bottom: 1px solid var(--sl-border);
  color: var(--sl-text);
  border-radius: 8px 8px 0 0 !important;
  padding: 10px 16px;
}
.card-body { color: var(--sl-text); }

/* ── Tables ── */
.table {
  color: var(--sl-text);
  border-color: var(--sl-border);
}
.table > :not(caption) > * > * {
  background-color: transparent;
  border-bottom-color: var(--sl-border);
  color: var(--sl-text);
}
.table-bordered > :not(caption) > * > * { border-color: var(--sl-border); }
.table-dark, thead.table-dark th, .table > thead.table-dark > tr > th {
  background-color: var(--sl-surface-2) !important;
  color: var(--sl-accent) !important;
  border-color: var(--sl-border) !important;
}
.table tbody tr:hover > * { background-color: var(--sl-accent-dim) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,0.02); }
/* Goalie rows */
.table .table-info { background-color: rgba(99,180,220,0.08) !important; }
.table .table-info:hover > * { background-color: var(--sl-accent-dim) !important; }

/* Click-to-sort headers. Behaviour lives in wwwroot/js/sortable-table.js; a table
   opts in with class="sl-sortable-table" plus data-sort-type on each sortable th. */
.sl-sortable-table thead th { cursor: pointer; user-select: none; white-space: nowrap; }
.sl-sortable-table thead th:hover { background-color: rgba(255,255,255,0.06); }
.sl-sortable-table thead th .sort-ind { display: inline-block; min-width: 0.9em; color: var(--sl-accent, #4ade80); font-size: 0.85em; }

/* ── Buttons ── */
.btn-primary {
  background-color: var(--sl-accent-dim);
  border-color: var(--sl-border);
  color: var(--sl-accent);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #4a5568;
  border-color: var(--sl-accent);
  color: var(--sl-accent);
}
.btn-outline-secondary {
  border-color: var(--sl-border);
  color: var(--sl-text-muted);
}
.btn-outline-secondary:hover {
  background-color: var(--sl-accent-dim);
  border-color: var(--sl-border);
  color: var(--sl-text);
}
.btn-outline-primary {
  border-color: var(--sl-accent-dim);
  color: var(--sl-accent);
}
.btn-outline-primary:hover {
  background-color: var(--sl-accent-dim);
  border-color: var(--sl-accent-dim);
  color: var(--sl-accent);
}
.btn-success { background-color: #1f6640; border-color: #1f6640; color: var(--sl-success); }
.btn-success:hover { background-color: #28834f; border-color: #28834f; color: var(--sl-success); }
.btn-outline-danger { border-color: var(--sl-danger); color: var(--sl-danger); }
.btn-outline-danger:hover { background-color: rgba(224,82,82,0.15); border-color: var(--sl-danger); color: var(--sl-danger); }
.btn-danger { background-color: #7a1f1f; border-color: #7a1f1f; color: var(--sl-danger); }
.btn-danger:hover { background-color: #952626; border-color: #952626; color: var(--sl-danger); }
.btn-warning { background-color: #6b4a12; border-color: #6b4a12; color: var(--sl-warning); }
.btn-warning:hover { background-color: #875e18; border-color: #875e18; color: var(--sl-warning); }

/* ── Forms ── */
.form-control, .form-select {
  background-color: var(--sl-surface-2);
  border-color: var(--sl-border);
  color: var(--sl-text);
}
.form-control:focus, .form-select:focus {
  background-color: var(--sl-surface-2);
  border-color: var(--sl-accent-dim);
  color: var(--sl-text);
  box-shadow: 0 0 0 0.2rem rgba(226,232,240,0.12);
}
.form-control::placeholder { color: var(--sl-text-muted); }
.form-control:disabled, .form-control[readonly] {
  background-color: var(--sl-surface);
  color: var(--sl-text-muted);
  border-color: var(--sl-border);
  opacity: 0.75;
}
.form-label { color: var(--sl-text-muted); font-size: 0.8125rem; margin-bottom: 4px; }
.form-select option { background: var(--sl-surface-2); color: var(--sl-text); }

/* ── Modals ── */
.modal-content {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  color: var(--sl-text);
}
.modal-header {
  background: var(--sl-surface-2);
  border-bottom: 1px solid var(--sl-border);
  color: var(--sl-text);
}
.modal-footer { border-top: 1px solid var(--sl-border); }
.btn-close { filter: invert(1) grayscale(1); opacity: 0.6; }
.btn-close:hover { opacity: 1; }

/* ── Alerts ── */
.alert {
  background: var(--sl-surface-2);
  border: 1px solid var(--sl-border);
  color: var(--sl-text);
  border-radius: 6px;
}
.alert-info  { border-left: 3px solid var(--sl-accent-dim); }
.alert-danger { border-left: 3px solid var(--sl-danger); color: var(--sl-danger); }
.alert-success { border-left: 3px solid var(--sl-success); }

/* ── Badges ── */
.badge.bg-secondary { background-color: var(--sl-accent-dim) !important; color: var(--sl-text-muted); }
.badge.bg-success { background-color: #1f6640 !important; color: var(--sl-success); }
.badge.bg-danger { background-color: #7a1f1f !important; color: var(--sl-danger); }

/* ── List Groups ── */
.list-group-item {
  background-color: var(--sl-surface);
  border-color: var(--sl-border);
  color: var(--sl-text);
}
.list-group-item-action:hover {
  background-color: var(--sl-accent-dim);
  color: var(--sl-text);
}

/* ── Record Badge ── */
.sl-record-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  background: var(--sl-surface-2);
  border: 1px solid var(--sl-border);
  font-size: 1rem;
  font-weight: 600;
  color: var(--sl-accent);
  letter-spacing: 0.03em;
}

/* ── Result pill (W/L/T) ── */
.sl-result {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
}
.sl-result-w { background: rgba(74,222,128,0.15); color: var(--sl-success); }
.sl-result-l { background: rgba(224,82,82,0.15);  color: var(--sl-danger); }
.sl-result-t { background: rgba(139,149,167,0.15); color: var(--sl-text-muted); }

/* ── Game list row ── */
/* ── Games section header: heading on the left, New Game on the right ── */
.sl-games-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  /* The header button jumps here; this keeps the heading off the very top edge. */
  scroll-margin-top: 16px;
}
.sl-games-header h5 { flex: 1 1 auto; }

/* ── Unfinished games, pinned above the list ── */
.sl-inprogress-panel {
  border: 1px solid var(--sl-accent);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--sl-accent-dim);
}
.sl-inprogress-title {
  color: var(--sl-text-muted);
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.sl-inprogress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  flex-wrap: wrap;
}

/* ── "You already have a game open" warning on the New Game page ── */
.sl-unfinished-warning {
  border: 1px solid var(--sl-accent);
  border-radius: 8px;
  background: var(--sl-accent-dim);
  padding: 12px 14px;
  margin-bottom: 18px;
  text-align: left;
}
.sl-unfinished-warning-title { font-weight: 600; margin-bottom: 4px; }
.sl-unfinished-warning-body {
  color: var(--sl-text-muted);
  font-size: .8125rem;
  margin-bottom: 8px;
}
.sl-unfinished-warning-link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0;
  color: var(--sl-text);
  text-decoration: none;
  border-top: 1px solid var(--sl-border);
}
.sl-unfinished-warning-link:hover { color: var(--sl-accent); }
.sl-unfinished-warning-go { margin-left: auto; color: var(--sl-accent); font-weight: 600; font-size: .8125rem; }

/* ── The two entry choices on the New Game page ── */
.sl-newgame-choice-hint {
  color: var(--sl-text-muted);
  font-size: .75rem;
  text-align: center;
  margin-top: 6px;
}

.sl-game-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--sl-border);
  transition: background var(--sl-transition);
  text-decoration: none;
  color: var(--sl-text);
}
.sl-game-row:last-child { border-bottom: none; }
.sl-game-row:hover { background: var(--sl-accent-dim); color: var(--sl-text); text-decoration: none; }
.sl-game-date { color: var(--sl-text-muted); font-size: 0.8125rem; min-width: 80px; }
.sl-game-opponent { flex: 1; font-weight: 500; }
.sl-game-score { font-variant-numeric: tabular-nums; color: var(--sl-text-muted); font-size: 0.875rem; }

/* Mobile: let the game row wrap so the action buttons (View Game, plus the
   Statistician/Owner-only Live Stats Entry button) drop to their own row
   instead of forcing the page sideways. */
@media (max-width: 600px) {
  .sl-game-row {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .sl-game-date { min-width: 0; }
  .sl-game-row .btn { flex: 1 1 auto; }
}

/* ── Stat grid (player profile totals) ── */
.sl-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.sl-stat-cell {
  background: var(--sl-surface-2);
  border: 1px solid var(--sl-border);
  border-radius: 8px;
  padding: 12px 10px;
  text-align: center;
}
.sl-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sl-accent);
  line-height: 1;
}
.sl-stat-label {
  font-size: 0.7rem;
  color: var(--sl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

/* ── Centered auth card (EnterCode, Login) ── */
.sl-auth-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}
.sl-auth-card {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: 12px;
  padding: 36px 32px;
  width: 100%;
  max-width: 400px;
}
.sl-auth-logo {
  display: block;
  margin: 0 auto 20px;
  height: 64px;
  object-fit: contain;
}
.sl-auth-title {
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--sl-text);
  margin-bottom: 6px;
}
.sl-auth-subtitle {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--sl-text-muted);
  margin-bottom: 24px;
}

/* "OR" divider used to separate sign-in methods. Centered text with
   horizontal rules extending to either side so the section break is
   visually unmistakable. */
.sl-auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--sl-text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin: 22px 0;
}
.sl-auth-divider::before,
.sl-auth-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--sl-border);
}
.sl-auth-divider::before { margin-right: 12px; }
.sl-auth-divider::after  { margin-left: 12px; }

/* ── Sticky action bar (StatPanel, EditGame) ── */
.sl-sticky-bar {
  position: sticky;
  bottom: 0;
  background: var(--sl-surface);
  border-top: 1px solid var(--sl-border);
  padding: 12px 0;
  margin-top: 16px;
  display: flex;
  gap: 10px;
  z-index: 10;
}

/* ── Mobile stats cards ── */
.stats-table-wrap { display: block; }
.stats-card-grid  { display: none; }

@media (max-width: 767.98px) {
  .stats-table-wrap { display: none; }
  .stats-card-grid  {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.sl-player-card {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: 8px;
  padding: 14px 16px;
}
.sl-player-card-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--sl-text);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sl-player-card-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 8px;
}
.sl-player-card-stat {
  text-align: center;
}
.sl-player-card-stat-val {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sl-accent);
  line-height: 1;
}
.sl-player-card-stat-lbl {
  font-size: 0.65rem;
  color: var(--sl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Association card grid ── */
.sl-assoc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.sl-assoc-card {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: 8px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--sl-text);
  transition: background var(--sl-transition), border-color var(--sl-transition);
}
.sl-assoc-card:hover {
  background: var(--sl-surface-2);
  border-color: var(--sl-accent-dim);
  color: var(--sl-text);
  text-decoration: none;
}
.sl-assoc-card-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}
.sl-assoc-card-name { font-weight: 600; font-size: 0.9375rem; }
.sl-assoc-card-count { font-size: 0.8125rem; color: var(--sl-text-muted); }

/* ── Team cards (association details) ── */
.sl-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.sl-team-card {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--sl-transition);
}
.sl-team-card:hover { border-color: var(--sl-accent-dim); }
.sl-team-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sl-team-card-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.sl-team-card-name { font-weight: 600; font-size: 0.9375rem; }

/* ── text-danger override ── */
.text-danger { color: var(--sl-danger) !important; }
.text-muted  { color: var(--sl-text-muted) !important; }
.text-success { color: var(--sl-success) !important; }

/* ── Live Stats Entry ── */
.sl-live-scorebar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--sl-surface);
  border-bottom: 1px solid var(--sl-border);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 -32px 20px;
}
@media (max-width: 767.98px) {
  .sl-live-scorebar { margin: 0 -16px 16px; }
}
.sl-live-score {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--sl-accent);
  flex: 1;
  text-align: center;
}
.sl-live-score-team {
  font-size: 0.8rem;
  color: var(--sl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sl-live-nav { display: flex; gap: 8px; }

/* Two-column player card grid on tablet+ */
.sl-player-live-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  .sl-player-live-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Period / Final bar */
.sl-period-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.sl-period-btn {
  flex: 1;
  min-height: 44px;
  background: var(--sl-surface-2);
  border: 1px solid var(--sl-border);
  border-radius: 8px;
  color: var(--sl-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--sl-transition), color var(--sl-transition), border-color var(--sl-transition);
  user-select: none;
  -webkit-user-select: none;
}
.sl-period-btn:hover  { background: var(--sl-accent-dim); color: var(--sl-text); }
.sl-period-btn.active { background: var(--sl-accent-dim); border-color: var(--sl-accent); color: var(--sl-accent); }

.sl-player-live-card {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}
.sl-player-live-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--sl-text);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sl-player-live-number {
  font-size: 0.8125rem;
  color: var(--sl-text-muted);
}
.sl-stat-grid-live {
  display: grid;
  /* min must accommodate the [− 48px] [4 gap] [val 40px] [4 gap] [+ 48px] = 144px
     content plus the .sl-stat-control's 20px padding + 2px border = 166px.
     Bumped to 170px for a hair of breathing room. */
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.sl-stat-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #232935;
  border: 1px solid var(--sl-border);
  border-radius: 8px;
  padding: 8px 10px;
}
.sl-stat-control-label {
  font-size: 0.7rem;
  color: var(--sl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sl-stat-control-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sl-stat-btn {
  min-width: 48px;
  min-height: 48px;
  background: var(--sl-surface-2);
  /* Default styling is the "+" button — green to match the homepage preview. */
  border: 1px solid var(--sl-success);
  border-radius: 6px;
  color: var(--sl-success);
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--sl-transition), border-color var(--sl-transition);
  user-select: none;
  -webkit-user-select: none;
}
.sl-stat-btn:hover  { background: rgba(74,222,128,0.12); }
.sl-stat-btn:active { background: rgba(74,222,128,0.22); }
/* "−" button — red, overrides the green default. */
.sl-stat-btn-minus {
  color: var(--sl-danger);
  border-color: var(--sl-danger);
}
.sl-stat-btn-minus:hover  { background: rgba(224,82,82,0.12); }
.sl-stat-btn-minus:active { background: rgba(224,82,82,0.22); }
.sl-stat-value {
  min-width: 40px;
  text-align: center;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--sl-accent);
  transition: opacity 0.15s;
}
.sl-stat-value.flash { opacity: 0.25; }

/* Saves is calculated from shots against minus goals against, so its card has no buttons. The
   dashed border and transparent fill say "output, not input" without dimming the number itself —
   it is still a stat people read off the card. min-height matches .sl-stat-btn so the goalie's
   three cards stay the same height with only two of them tappable. */
.sl-stat-control-derived {
  background: transparent;
  border-style: dashed;
}
.sl-stat-control-derived .sl-stat-control-row {
  justify-content: center;
  min-height: 48px;
}

.sl-pim-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.sl-pim-label {
  font-size: 0.7rem;
  color: var(--sl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 2px;
}
.sl-pim-total {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sl-accent);
  min-width: 40px;
}
.sl-pim-chip {
  min-height: 36px;
  padding: 0 10px;
  background: var(--sl-surface-2);
  border: 1px solid var(--sl-border);
  border-radius: 16px;
  color: var(--sl-text-muted);
  font-size: 0.8125rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background var(--sl-transition), color var(--sl-transition);
  user-select: none;
  -webkit-user-select: none;
}
.sl-pim-chip:hover  { background: var(--sl-accent-dim); color: var(--sl-text); }
.sl-pim-chip:active { background: #4a5568; }
.sl-pim-chip-undo   { color: var(--sl-danger); border-color: rgba(224,82,82,0.3); }
.sl-pim-chip-undo:hover { background: rgba(224,82,82,0.12); color: var(--sl-danger); }

.sl-shutout-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}
.sl-shutout-yes { background: rgba(74,222,128,0.12); color: var(--sl-success); }
.sl-shutout-no  { background: var(--sl-surface-2); color: var(--sl-text-muted); }

/* ── Marked out for a game ── */
.sl-out-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: .06em;
  background: var(--sl-surface-2);
  color: var(--sl-text-muted);
  border: 1px solid var(--sl-border);
}
/* The row stays readable but plainly not a stat line. */
.sl-out-row td { color: var(--sl-text-muted); font-style: italic; }

/* Live entry: an absent player's card dims and its controls stop responding. The
   pointer-events block is presentation only — SetPlayerAbsent and UpdateLiveStat
   both enforce this server-side. */
.sl-player-live-card.sl-is-absent .sl-stat-grid-live,
.sl-player-live-card.sl-is-absent .sl-goalie-extras-toggle,
.sl-player-live-card.sl-is-absent .sl-pim-row {
  opacity: .35;
  pointer-events: none;
}

/* Expander for a goalie's scoring and PIM controls. Deliberately quieter than the stat
   buttons above it: the frequent taps are shots against, saves and goals against. */
.sl-goalie-extras-toggle {
  background: none;
  border: 1px dashed var(--sl-border);
  color: var(--sl-text-muted);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  margin-bottom: 8px;
}
.sl-goalie-extras-toggle:hover { border-color: var(--sl-accent); color: var(--sl-accent); }
.sl-absent-toggle {
  background: none;
  border: 1px solid var(--sl-border);
  color: var(--sl-text-muted);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
}
.sl-absent-toggle:hover { border-color: var(--sl-accent); color: var(--sl-accent); }
.sl-absent-toggle.sl-is-out { background: var(--sl-surface-2); color: var(--sl-danger); border-color: rgba(224,82,82,0.3); }

/* ── Live stats sticky header wrapper ── */
.sl-live-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--sl-bg);
}

/* Number pad */
.sl-number-pad {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0 8px;
  border-bottom: 1px solid var(--sl-border);
}
.sl-number-btn {
  min-width: 44px;
  min-height: 44px;
  background: var(--sl-surface-2);
  border: 1px solid var(--sl-border);
  border-radius: 8px;
  color: var(--sl-text-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--sl-transition), color var(--sl-transition), border-color var(--sl-transition);
  user-select: none;
  -webkit-user-select: none;
}
.sl-number-btn:hover         { background: var(--sl-accent-dim); color: var(--sl-text); }
.sl-number-btn.active        { background: var(--sl-accent-dim); border-color: var(--sl-accent); color: var(--sl-accent); }
.sl-number-btn-goalie        { border-color: rgba(74,222,128,0.35); color: var(--sl-success); }
.sl-number-btn-goalie:hover  { background: rgba(74,222,128,0.12); border-color: var(--sl-success); color: var(--sl-success); }
.sl-number-btn-goalie.active { background: rgba(74,222,128,0.18); border-color: var(--sl-success); color: var(--sl-success); }

/* Active player card highlight */
.sl-player-live-card.sl-card-active {
  border-color: var(--sl-accent);
  box-shadow: 0 0 0 2px var(--sl-accent);
}

/* ── No-sidebar layout (live stats page) ── */
.sl-no-sidebar .sl-main { margin-left: 0 !important; }

/* ── Live mode — compact spacing to maximise on-screen content ── */
.sl-live-mode .sl-content {
  padding: 0 10px 10px;
}
.sl-live-mode .sl-live-scorebar {
  position: static;   /* sticky handled by .sl-live-header wrapper */
  padding: 8px 0;
  margin: 0 0 0;
  border-bottom: none;
}
.sl-live-mode .sl-period-bar {
  margin-bottom: 0;
  gap: 6px;
  border-bottom: none;
}
.sl-live-mode .sl-number-pad {
  padding: 6px 0 6px;
}
.sl-live-mode .sl-number-btn {
  min-width: 40px;
  min-height: 40px;
  font-size: 0.75rem;
}
.sl-live-mode .sl-period-btn {
  min-height: 38px;
  font-size: 0.8125rem;
}
.sl-live-mode .sl-player-live-grid {
  gap: 8px;
}
.sl-live-mode .sl-player-live-card {
  padding: 8px 10px;
}
.sl-live-mode .sl-player-live-name {
  margin-bottom: 6px;
  font-size: 0.9rem;
}
.sl-live-mode .sl-stat-grid-live {
  gap: 6px;
  margin-bottom: 6px;
}
.sl-live-mode .sl-stat-control {
  padding: 6px 8px;
}
.sl-live-mode .sl-stat-control-label {
  font-size: 0.65rem;
}
.sl-live-mode .sl-pim-row {
  gap: 4px;
  margin-top: 2px;
}
.sl-live-mode .sl-pim-chip {
  min-height: 32px;
  padding: 0 7px;
  font-size: 0.75rem;
}
.sl-live-mode h5.mb-2 {
  margin-bottom: 4px !important;
  margin-top: 10px !important;
}
.sl-live-mode h5.mt-4 {
  margin-top: 12px !important;
}

/* ── Scrollbar (global) ── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--sl-border) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sl-border); border-radius: 3px; }

/* ── How To page ── */
@keyframes sl-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.sl-howto-hero {
  text-align: center;
  padding: 32px 16px 40px;
}
.sl-howto-title {
  font-size: clamp(1.75rem, 5vw, 3rem);
  font-weight: 800;
  background: linear-gradient(135deg, #60a5fa, #e2e8f0, #a78bfa, #60a5fa);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: sl-shimmer 6s ease infinite;
  margin-bottom: 12px;
  line-height: 1.2;
}
.sl-howto-subtitle {
  color: var(--sl-text-muted);
  font-size: 1.0625rem;
  max-width: 560px;
  margin: 0 auto;
}
.sl-howto-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 820px;
  margin: 0 auto 48px;
  padding: 0 4px;
}
.sl-howto-section {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-left: 4px solid var(--section-color, var(--sl-accent));
  border-radius: 10px;
  padding: 24px 28px;
  transition: transform var(--sl-transition), box-shadow var(--sl-transition);
}
.sl-howto-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}
.sl-howto-section-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.sl-howto-section-header > div:last-child {
  flex: 1;
  min-width: 0;
}
.sl-howto-step-badge {
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  background: var(--section-color, var(--sl-accent));
  color: #111318;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sl-howto-section-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--sl-text);
  margin: 0 0 3px;
}
.sl-howto-section-tagline {
  font-size: 0.875rem;
  color: var(--sl-text-muted);
  margin: 0;
}
.sl-howto-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 4px;
}
.sl-howto-steps > li {
  display: block;
  position: relative;
  padding-left: 20px;
  font-size: 0.9375rem;
  color: var(--sl-text);
  line-height: 1.55;
  margin-bottom: 10px;
}
.sl-howto-steps > li:last-child {
  margin-bottom: 0;
}
.sl-howto-bullet {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--section-color, var(--sl-accent));
}
.sl-howto-tip {
  background: var(--sl-surface-2);
  border: 1px solid var(--sl-border);
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--sl-text-muted);
  margin-top: 14px;
}
.sl-howto-tip-icon {
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1.5;
}
.sl-howto-tier-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 4px 0 16px;
}
.sl-howto-tier-card {
  background: var(--sl-surface-2);
  border: 1px solid var(--sl-border);
  border-radius: 8px;
  padding: 14px 16px;
}
.sl-howto-tier-card-title {
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.sl-howto-tier-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--sl-text-muted);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sl-howto-tier-card ul li {
  position: relative;
  padding-left: 15px;
}
.sl-howto-tier-card ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--sl-success);
}

/* Workflow numbered steps */
.sl-howto-workflow-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--section-color, var(--sl-text-muted));
  margin: 18px 0 10px;
}
.sl-howto-workflow {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: workflow-step;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sl-howto-workflow li {
  position: relative;
  padding-left: 32px;
  font-size: 0.9rem;
  color: var(--sl-text);
  line-height: 1.55;
  counter-increment: workflow-step;
}
.sl-howto-workflow li::before {
  content: counter(workflow-step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--section-color, var(--sl-accent));
  color: #111318;
  font-size: 0.7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.sl-howto-workflow li .sl-howto-workflow-sub {
  margin-top: 6px;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sl-howto-workflow li .sl-howto-workflow-sub li {
  padding-left: 14px;
  font-size: 0.8375rem;
  color: var(--sl-text-muted);
  counter-increment: none;
}
.sl-howto-workflow li .sl-howto-workflow-sub li::before {
  content: '·';
  background: none;
  color: var(--sl-text-muted);
  font-size: 1rem;
  font-weight: 400;
  width: auto;
  height: auto;
  border-radius: 0;
  position: absolute;
  left: 0;
  top: 0;
}

/* Home page how-to banner */
.sl-howto-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, var(--sl-surface-2), var(--sl-surface));
  border: 1px solid var(--sl-border);
  border-left: 4px solid #60a5fa;
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  text-decoration: none;
  color: var(--sl-text);
  transition: box-shadow var(--sl-transition), transform var(--sl-transition);
}
.sl-howto-banner:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.3);
  transform: translateY(-1px);
  color: var(--sl-text);
  text-decoration: none;
}

/* How To — section jump nav */
.sl-howto-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 820px;
  margin: 0 auto 32px;
  padding: 0 4px;
}
.sl-howto-nav-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 8px;
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: 100px;
  text-decoration: none;
  color: var(--sl-text);
  font-size: 0.8375rem;
  font-weight: 500;
  transition: background var(--sl-transition), border-color var(--sl-transition), transform var(--sl-transition);
  cursor: pointer;
  white-space: nowrap;
}
.sl-howto-nav-chip:hover {
  background: var(--sl-surface-2);
  border-color: var(--chip-color, var(--sl-accent));
  color: var(--sl-text);
  text-decoration: none;
  transform: translateY(-1px);
}
.sl-howto-nav-chip-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--chip-color, var(--sl-accent));
  color: #111318;
  font-size: 0.65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .sl-howto-tier-grid { grid-template-columns: 1fr; }
  .sl-howto-section { padding: 16px 18px; }
  .sl-howto-hero { padding: 20px 8px 28px; }
  .sl-howto-banner { flex-direction: column; align-items: flex-start; }
  .sl-howto-nav { gap: 6px; }
  .sl-howto-nav-chip { font-size: 0.78rem; padding: 6px 11px 6px 7px; }
}

/* ── Collapsible admin rows ── */
.sl-collapse-toggle {
  background: none;
  border: none;
  padding: 0 4px;
  cursor: pointer;
  color: var(--sl-text-muted);
  line-height: 1;
  flex-shrink: 0;
}
.sl-collapse-toggle:hover { color: var(--sl-text); }
.sl-collapse-chevron {
  display: inline-block;
  font-size: 1.1rem;
  transition: transform var(--sl-transition);
}
.sl-collapse-toggle[aria-expanded="true"] .sl-collapse-chevron {
  transform: rotate(90deg);
}

/* ── Homepage associations CTA block ── */
.sl-assoc-cta-block {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-left: 4px solid var(--sl-accent);
  border-radius: 10px;
  padding: 22px 24px;
  text-decoration: none;
  color: var(--sl-text);
  transition: box-shadow var(--sl-transition), transform var(--sl-transition), border-color var(--sl-transition);
  margin-bottom: 24px;
}
.sl-assoc-cta-block:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
  transform: translateY(-2px);
  border-color: var(--sl-accent-dim);
  color: var(--sl-text);
  text-decoration: none;
}
.sl-assoc-cta-icon { font-size: 2.2rem; flex-shrink: 0; line-height: 1; }
.sl-assoc-cta-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 3px; }
.sl-assoc-cta-sub { font-size: 0.875rem; color: var(--sl-text-muted); }

/* ── Association empty state ── */
.sl-empty-state {
  text-align: center;
  padding: 60px 24px;
  max-width: 440px;
  margin: 0 auto;
}
.sl-empty-state-icon { font-size: 3rem; margin-bottom: 16px; opacity: 0.45; }
.sl-empty-state-title { font-size: 1.2rem; font-weight: 700; color: var(--sl-text); margin-bottom: 10px; }
.sl-empty-state-body {
  font-size: 0.9rem;
  color: var(--sl-text-muted);
  margin-bottom: 22px;
  line-height: 1.65;
}

/* ──────────────────────────────────────────
   Homepage redesign
   ────────────────────────────────────────── */

.sl-section {
  margin: clamp(1.25rem, 2.5vw, 2rem) 0;
}
.sl-section-eyebrow {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  color: var(--sl-text);
  margin-bottom: 16px;
  text-align: center;
  letter-spacing: 0;
}
.sl-section-eyebrow::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  background: var(--sl-accent);
  margin: 8px auto 0;
  border-radius: 2px;
}

/* Hero */
.sl-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
}
.sl-hero .sl-hero-logo {
  margin-bottom: 2px;
}
.sl-hero-tagline {
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--sl-text);
  margin: 0;
}
.sl-hero-subhead {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  color: var(--sl-text-muted);
  margin: 0;
  line-height: 1.5;
}
.sl-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  margin-top: 6px;
}

/* Value props grid */
.sl-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.sl-feature-card {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-left: 4px solid var(--sl-accent);
  border-radius: 10px;
  padding: 18px 20px 16px;
  transition: box-shadow var(--sl-transition), transform var(--sl-transition), border-color var(--sl-transition);
}
.sl-feature-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
  transform: translateY(-2px);
}
.sl-feature-card-icon {
  font-size: 1.7rem;
  line-height: 1;
  margin-bottom: 8px;
}
.sl-feature-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sl-text);
  margin-bottom: 6px;
}
.sl-feature-card-desc {
  font-size: 0.9rem;
  color: var(--sl-text-muted);
  line-height: 1.5;
  margin: 0;
}
.sl-feature-card-live  { border-left-color: var(--sl-danger);  }
.sl-feature-card-live  .sl-feature-card-icon { color: var(--sl-danger);  }
.sl-feature-card-stats { border-left-color: #60a5fa;           }
.sl-feature-card-stats .sl-feature-card-icon { color: #60a5fa;           }
.sl-feature-card-share { border-left-color: var(--sl-success); }
.sl-feature-card-share .sl-feature-card-icon { color: var(--sl-success); }

/* Sample preview frame */
.sl-sample-wrap {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: 12px;
  padding: 20px 20px 16px;
  position: relative;
}
.sl-sample-wrap::before {
  content: "Preview";
  position: absolute;
  top: -10px;
  left: 18px;
  background: var(--sl-bg);
  color: var(--sl-text-muted);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border: 1px solid var(--sl-border);
  border-radius: 100px;
}
.sl-sample-logo {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: var(--sl-surface-2);
  border: 1px solid var(--sl-border);
  border-radius: 8px;
  flex-shrink: 0;
}
.sl-sample-caption {
  text-align: center;
  font-size: 0.95rem;
  color: var(--sl-text-muted);
  margin: 0 0 18px;
  padding: 0 16px;
  line-height: 1.5;
}

/* Dashboard preview internals */
.sl-preview-section-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--sl-text-muted);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  font-weight: 600;
}
.sl-preview-table-wrap {
  border: 1px solid var(--sl-border);
  border-radius: 8px;
  overflow-x: auto;
  background: var(--sl-surface-2);
}
.sl-preview-table {
  background: var(--sl-surface-2);
  min-width: 100%;
}
.sl-preview-table-skater { min-width: 720px; }
.sl-preview-table-goalie { min-width: 760px; }
.sl-preview-table-row {
  display: grid;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--sl-border);
  font-size: 0.86rem;
}
.sl-preview-table-skater .sl-preview-table-row {
  /* fr units so columns grow proportionally with the wrapper width,
     matching the auto-layout <table> on the real Dashboard. */
  grid-template-columns:
    minmax(36px, 1fr)   /* #     */
    minmax(120px, 4fr)  /* Player */
    minmax(32px, 1fr)   /* GP    */
    minmax(28px, 0.9fr) /* G     */
    minmax(28px, 0.9fr) /* A     */
    minmax(36px, 1.1fr) /* Pts   */
    minmax(46px, 1.4fr) /* Shots */
    minmax(40px, 1.1fr) /* +/-   */
    minmax(50px, 1.4fr) /* PIM   */
    minmax(32px, 1fr)   /* PPG   */
    minmax(32px, 1fr)   /* SHG   */
    minmax(46px, 1.3fr);/* FO%   */
}
.sl-preview-table-goalie .sl-preview-table-row {
  grid-template-columns:
    minmax(36px, 1fr)   /* #     */
    minmax(120px, 4fr)  /* Player */
    minmax(32px, 1fr)   /* GP    */
    minmax(28px, 0.9fr) /* G     */
    minmax(28px, 0.9fr) /* A     */
    minmax(36px, 1.1fr) /* Pts   */
    minmax(48px, 1.3fr) /* PIM   */
    minmax(44px, 1.3fr) /* SA    */
    minmax(50px, 1.5fr) /* Saves */
    minmax(32px, 1fr)   /* GA    */
    minmax(54px, 1.5fr) /* SV%   */
    minmax(32px, 1fr);  /* SO    */
}
.sl-preview-table-row:last-child { border-bottom: none; }
.sl-preview-table-head {
  background: var(--sl-surface-2);
  color: var(--sl-text-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.sl-preview-col-num   { color: var(--sl-text-muted); }
.sl-preview-col-name  { font-weight: 500; color: var(--sl-accent); }
.sl-preview-col-shots { text-align: right; color: var(--sl-text-muted); }
.sl-preview-pts       { font-weight: 700; color: var(--sl-accent); }

.sl-preview-games {
  border: 1px solid var(--sl-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--sl-surface-2);
}
.sl-preview-game-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--sl-border);
}
.sl-preview-game-row:last-child { border-bottom: none; }
.sl-preview-game-row .sl-game-opponent { flex: 1; font-size: 0.9rem; }
.sl-preview-view-game {
  display: inline-block;
  background: var(--sl-surface);
  color: var(--sl-accent);
  border: 1px solid var(--sl-accent);
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 540px) {
  .sl-preview-table-row { font-size: 0.76rem; padding: 7px 10px; }
}

/* Live entry preview — matches real LiveStats.cshtml layout.
   Capped at a tablet-landscape-ish max-width so the 2-column
   player grid renders at realistic proportions. */
.sl-sample-wrap-live {
  background: linear-gradient(180deg, var(--sl-surface-2), var(--sl-surface));
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.sl-preview-player-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 720px) {
  .sl-preview-player-grid { grid-template-columns: repeat(2, 1fr); }
}
.sl-preview-scorebar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.sl-preview-score-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 150px;
}
.sl-preview-score-team {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sl-text-muted);
}
.sl-preview-score {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--sl-accent);
  letter-spacing: 0.04em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.sl-preview-score-dash {
  color: var(--sl-text-muted);
  font-size: 1.15rem;
  margin: 0 6px;
  font-weight: 400;
}
.sl-preview-score-nav {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.sl-preview-score-btn {
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.sl-preview-score-btn-warn { background: var(--sl-warning); color: var(--sl-bg); }
.sl-preview-score-btn-back { background: #60a5fa; color: var(--sl-bg); }

.sl-preview-period-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.sl-preview-period-btn {
  flex: 1;
  text-align: center;
  padding: 7px 6px;
  border: 1px solid var(--sl-border);
  background: var(--sl-surface-2);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--sl-text-muted);
  font-weight: 600;
}
.sl-preview-period-btn-active {
  background: var(--sl-accent-dim);
  border-color: var(--sl-accent);
  color: var(--sl-accent);
}

.sl-preview-jersey-pad {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.sl-preview-jersey-btn {
  padding: 6px 12px;
  border: 1px solid var(--sl-border);
  background: var(--sl-surface);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--sl-text-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sl-preview-jersey-btn-goalie {
  border-color: var(--sl-success);
  color: var(--sl-success);
}

.sl-preview-player-card {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: 10px;
  padding: 14px 14px 12px;
}
.sl-preview-player-name {
  font-weight: 600;
  color: var(--sl-text);
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.sl-preview-player-num {
  color: var(--sl-text-muted);
  font-size: 0.85rem;
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
}
.sl-preview-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}
.sl-preview-stat-control {
  background: var(--sl-surface-2);
  border: 1px solid var(--sl-border);
  border-radius: 8px;
  padding: 7px 6px;
  text-align: center;
}
.sl-preview-stat-control-label {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  color: var(--sl-text-muted);
  letter-spacing: 0.06em;
  margin-bottom: 5px;
  font-weight: 600;
}
.sl-preview-stat-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.sl-preview-stat-minus,
.sl-preview-stat-plus {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sl-bg);
  border: 1px solid var(--sl-border);
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.9rem;
}
.sl-preview-stat-plus  { color: var(--sl-success); border-color: var(--sl-success); }
.sl-preview-stat-minus { color: var(--sl-danger);  border-color: var(--sl-danger);  }
.sl-preview-stat-val {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sl-accent);
  font-variant-numeric: tabular-nums;
}

/* PIM row inside skater player card */
.sl-preview-pim-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--sl-border);
  flex-wrap: wrap;
}
.sl-preview-pim-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--sl-text-muted);
  letter-spacing: 0.06em;
  font-weight: 600;
}
.sl-preview-pim-total {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sl-accent);
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}
.sl-preview-pim-chip {
  padding: 3px 9px;
  border: 1px solid var(--sl-border);
  background: var(--sl-surface);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--sl-text-muted);
  font-variant-numeric: tabular-nums;
}
.sl-preview-pim-chip-undo {
  color: var(--sl-danger);
  border-color: var(--sl-danger);
}

/* How it works flow */
.sl-howit-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 10px;
}
.sl-howit-box {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-top: 3px solid var(--sl-accent);
  border-radius: 10px;
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sl-howit-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sl-accent);
  color: var(--sl-bg);
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 2px;
}
.sl-howit-box-1 { border-top-color: #60a5fa; }
.sl-howit-box-1 .sl-howit-num { background: #60a5fa; }
.sl-howit-box-2 { border-top-color: var(--sl-warning); }
.sl-howit-box-2 .sl-howit-num { background: var(--sl-warning); }
.sl-howit-box-3 { border-top-color: var(--sl-success); }
.sl-howit-box-3 .sl-howit-num { background: var(--sl-success); }
.sl-howit-title {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--sl-text);
}
.sl-howit-desc {
  font-size: 0.85rem;
  color: var(--sl-text-muted);
  line-height: 1.5;
  margin: 0;
}
.sl-howit-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--sl-text-muted);
  font-weight: 700;
}
@media (max-width: 720px) {
  .sl-howit-flow { grid-template-columns: 1fr; }
  .sl-howit-arrow { transform: rotate(90deg); padding: 2px 0; }
}

/* ============================================================
   Demo Group Walkthrough — dev-only feature.
   Remove this entire block when the demo period ends along with
   the @if (!HostEnv.IsProduction()) block in _Layout.cshtml and
   the Demo() action + Demo.cshtml view.
   ============================================================ */

/* Sidebar — divider + two links between the associations list and the footer */
.sl-sidebar-demo-divider {
  border-top: 1px solid var(--sl-border);
  margin: 10px 12px 6px;
}
.sl-sidebar-demo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: var(--sl-text);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background var(--sl-transition), color var(--sl-transition);
}
.sl-sidebar-demo-link:hover {
  background: var(--sl-accent-dim);
  color: var(--sl-accent);
  text-decoration: none;
}
.sl-sidebar-demo-link .sl-footer-icon {
  color: var(--sl-warning);
  font-size: 0.9rem;
}
.sl-sidebar-demo-link-feedback {
  color: var(--sl-text-muted);
  font-size: 0.84rem;
  padding-left: 22px;
}
.sl-sidebar-demo-link-feedback .sl-footer-icon { color: var(--sl-success); }

/* Demo page itself */
.sl-demo-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 4px;
  /* Prevent inner content (notably the 720px-wide skater mock) from forcing the
     whole page to scroll horizontally on mobile. The .sl-preview-table-wrap
     inside still scrolls on its own via overflow-x:auto. */
  min-width: 0;
}
.sl-demo-hero {
  text-align: center;
  padding: 28px 16px 24px;
}
.sl-demo-hero h1 {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--sl-text);
}
.sl-demo-hero p {
  color: var(--sl-text-muted);
  font-size: 1rem;
  max-width: 620px;
  margin: 0 auto 18px;
}
.sl-demo-hero-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* SVG flow diagram */
.sl-demo-flow-svg {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  margin: 8px auto 28px;
}

/* Numbered step block (heavier than HowTo's because tour steps are more concrete) */
.sl-demo-section {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: 10px;
  padding: 22px 24px;
  margin-bottom: 20px;
  min-width: 0;
}
.sl-demo-section h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--sl-text);
}
.sl-demo-section h2 .sl-demo-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sl-accent-dim);
  color: var(--sl-accent);
  font-size: 0.9rem;
  font-weight: 700;
  margin-right: 10px;
}
.sl-demo-section p {
  color: var(--sl-text-muted);
  font-size: 0.94rem;
  margin: 0 0 12px;
}
.sl-demo-steps {
  margin: 0 0 16px 8px;
  padding-left: 22px;
}
.sl-demo-steps li {
  margin-bottom: 8px;
  color: var(--sl-text);
  font-size: 0.94rem;
}
.sl-demo-steps li strong { color: var(--sl-accent); }
.sl-demo-steps code {
  background: var(--sl-surface-2);
  color: var(--sl-text);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.85em;
}

/* Annotated mock UI — dotted-border callout next to a feature in the mock */
.sl-demo-mock-frame {
  position: relative;
  background: var(--sl-surface-2);
  border: 1px solid var(--sl-border);
  min-width: 0;
  border-radius: 8px;
  padding: 14px;
  margin: 16px 0;
}
.sl-demo-callout {
  border: 1px dashed var(--sl-warning);
  background: rgba(245, 158, 11, 0.07);
  color: var(--sl-text);
  font-size: 0.82rem;
  padding: 6px 10px;
  border-radius: 6px;
  margin: 10px 0;
}
.sl-demo-callout strong { color: var(--sl-warning); }

/* Feedback CTA at the bottom of the page */
.sl-demo-feedback-cta {
  text-align: center;
  padding: 30px 16px 36px;
}
.sl-demo-feedback-cta p {
  color: var(--sl-text-muted);
  margin-bottom: 14px;
}

/* Mobile tightening for the demo walkthrough — reduce padding so cards don't
   feel cramped, and ensure mock UIs scale gracefully. The .sl-preview-table-wrap
   still scrolls horizontally on its own for the wide skater/goalie tables. */
@media (max-width: 600px) {
  .sl-demo-wrap          { padding: 0; }
  .sl-demo-hero          { padding: 20px 12px 16px; }
  .sl-demo-hero p        { font-size: 0.94rem; }
  .sl-demo-section       { padding: 18px 14px; border-radius: 8px; }
  .sl-demo-section h2    { font-size: 1.02rem; }
  .sl-demo-section h2 .sl-demo-section-num { width: 24px; height: 24px; font-size: 0.78rem; margin-right: 8px; }
  .sl-demo-section p     { font-size: 0.88rem; }
  .sl-demo-steps         { padding-left: 18px; margin-left: 0; }
  .sl-demo-steps li      { font-size: 0.88rem; }
  .sl-demo-mock-frame    { padding: 10px; margin: 12px 0; }
  .sl-demo-callout       { font-size: 0.78rem; padding: 5px 8px; }
  .sl-demo-flow-svg      { margin: 4px auto 18px; }
  .sl-demo-feedback-cta  { padding: 22px 12px 28px; }
}