.page-wrap { max-width: 1400px; margin: 0 auto; padding: 11px 24px 48px; }

    /* ── SELECTOR BAR — single row, wraps responsively ─────── */
    .subnav {
      background: var(--brand-brown);
      border-radius: var(--radius);
      margin-bottom: 12px;
      padding: 6px 10px;
      position: sticky;
      top: 44px;
      z-index: 99;
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;  /* wraps to second line on narrow screens */
    }
    .subnav-sep {
      width: 3px;
      height: 14px;
      background: var(--brand-amber);
      border-radius: 2px;
      margin: 0 8px;
      flex-shrink: 0;
      opacity: 0.9;
    }
    .subnav-label {
      font-family: 'Oswald', sans-serif;
      font-size: 0.60rem;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--brand-amber);
      padding-right: 2px;
      white-space: nowrap;
      opacity: 0.85;
    }
    .seg-group {
      display: flex;
      border-radius: 4px;
      overflow: hidden;
      background: var(--brand-dark);
    }
    .subnav a {
      padding: 2px 9px;
      font-family: 'Oswald', sans-serif;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.4px;
      color: var(--brand-cream);
      text-decoration: none;
      transition: background 0.15s;
      white-space: nowrap;
    }
    .subnav a:hover { background: var(--brand-amber); color: var(--brand-dark); }
    .subnav a.active { background: var(--brand-gold); color: var(--brand-dark); }
    .subnav .action-btn {
      padding: 2px 10px;
      font-family: 'Oswald', sans-serif;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.6px;
      color: var(--brand-cream);
      background: transparent;
      text-decoration: none;
      transition: background 0.15s, color 0.15s;
      white-space: nowrap;
    }
    .subnav .action-btn:hover { background: var(--brand-amber); color: var(--brand-dark); }
    .subnav .action-btn.active { background: var(--brand-gold); color: var(--brand-dark); }
    .subnav-actions-spacer { margin-left: auto; display: flex; }

    /* ── SECTION HEADER ──────────────────────────────────── */
    .section-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }
    .section-title {
      font-family: 'Oswald', sans-serif;
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--brand-brown);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      /* title itself is NOT a toggle — only the chevron button is */
    }
    /* Chevron toggle button — visually attached to the title but a separate element */
    .sport-toggle-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 3px 6px;
      border-radius: 5px;
      color: var(--brand-brown);
      font-size: 0.85rem;
      line-height: 1;
      display: flex;
      align-items: center;
      transition: background 0.15s, color 0.15s;
      flex-shrink: 0;
      /* Make sure it can't be confused with the sport link */
      margin-left: 2px;
    }
    .sport-toggle-btn:hover { background: var(--row-even); color: var(--brand-dark); }
    .sport-toggle-btn svg { transition: transform 0.2s ease; display: block; }
    .sport-toggle-btn[aria-expanded="false"] svg { transform: rotate(-90deg); }
    /* Collapsed league grid */
    .sport-leagues[data-collapsed="true"] { display: none; }
    .section-subtitle { font-size: 0.85rem; color: var(--text-muted); }

    /* ── DATA TABLES ─────────────────────────────────────── */

/* ── Mobile / small screen overrides ────────────────────────────────────── */
/* Trigger: width <= 768px OR height <= 500px (landscape phone) */
@media (max-width: 768px), (max-height: 500px) {
  /* NavBar — hide brand text, shrink search */
  .nav-brand { display: none; }
  #rr-search-wrap { max-width: 160px; min-width: 100px; }

  /* Subnav — hide entirely on mobile */
  .subnav { display: none; }
}