/*
 * ============================================================
 *  xal-shows-public.css
 *  Public-facing Show Listing + Show Detail pages.
 *
 *  Load order:
 *    xal-tokens.css        (design tokens — MUST be first)
 *    xal-base.css          (reset, flex/gap/text utilities)
 *    xal-components.css    (xal-btn, xal-badge)
 *    xal-cards.css         (xal-show-card, xal-bout-card)
 *    xal-layout.css        (xal-default-layout, xal-card-grid)
 *    xal-typography.css    (xal-page-title, xal-overline …)
 *    xal-shows-public.css  ← this file
 *
 *  Architecture: TRUE MOBILE-FIRST
 *    base = mobile  |  @media(min-width:901px) = desktop only
 *  No duplicate selectors. No !important except where noted.
 *  No inline styles required in HTML — all layout lives here.
 *  Font: Montserrat (from xal-tokens --xal-font-family)
 * ============================================================
 */

/* ----------------------------------------------------------
   PROTOTYPE NAV  (preview/prototype only — strip in prod)
   ---------------------------------------------------------- */
.proto-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  height: 48px;
  background: rgba(6,6,6,0.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--xal-border);
  display: flex; align-items: center;
  padding: 0 20px; gap: 4px;
}
.proto-logo       { font-family: var(--xal-font-family); font-weight: 800; font-size: 14px; margin-right: 20px; color: var(--xal-text); }
.proto-logo span  { color: var(--xal-gold); }
.proto-sep        { width: 1px; height: 18px; background: var(--xal-border-card); margin: 0 8px; }
.proto-btn {
  padding: 6px 14px; border: none; background: transparent;
  color: var(--xal-text-secondary); font-family: var(--xal-font-family);
  font-size: 13px; font-weight: 600;
  border-radius: var(--xal-radius-md); transition: var(--xal-transition-fast);
}
.proto-btn:hover  { color: var(--xal-text); }
.proto-btn.active { color: var(--xal-gold); background: var(--xal-gold-muted); }
.proto-badge {
  margin-left: auto; font-family: var(--xal-font-family);
  font-size: 11px; font-weight: 700;
  background: var(--xal-gold-muted); color: var(--xal-gold);
  border: 1px solid var(--xal-gold-border);
  border-radius: var(--xal-radius-pill); padding: 2px 10px;
}

/* View switching */
.view        { display: none; padding-top: 48px; }
.view.active { display: block; min-height: 100vh; }


/* ----------------------------------------------------------
   SHARED UTILITIES  (public-page-specific overrides)
   ---------------------------------------------------------- */

/* Divider */
.sp-divider { height: 1px; background: var(--xal-border); margin: 20px 0; }

/* Section heading — wraps xal-overline pattern */
.sp-sect-head {
  font-family: var(--xal-font-family);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--xal-text-muted); font-weight: 700; margin-bottom: 14px;
}

/* List card container (org card, official card) */
.sp-list-card {
  background: var(--xal-bg-card);
  border: 1px solid var(--xal-border-card);
  border-radius: var(--xal-radius-xl);
  overflow: hidden;
}
.sp-list-card-sep { border-top: 1px solid var(--xal-border); }

/* Avatar — reuses xal token colors */
.sp-av {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--xal-gold); color: #000;
  font-family: var(--xal-font-family);
  font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sp-av--sm  { width: 32px; height: 32px; font-size: 11px; }
.sp-av--lg  { width: 48px; height: 48px; font-size: 15px; }
.sp-av--xl  { width: 56px; height: 56px; font-size: 17px; }
.sp-av--blue   { background: var(--xal-blue);           color: #fff; }
.sp-av--green  { background: var(--xal-status-open);    color: #fff; }
.sp-av--red    { background: var(--xal-red);            color: #fff; }
.sp-av--purple { background: var(--xal-status-unopposed); color: #fff; }
.sp-av--teal   { background: var(--xal-status-checkedin); color: #fff; }

/* Tag pills */
.sp-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--xal-radius-pill);
  font-family: var(--xal-font-family);
  font-size: 12px; font-weight: 700; border: 1px solid transparent;
}
.sp-tag--open     { background: var(--xal-status-open-bg);    color: var(--xal-status-open);    border-color: var(--xal-status-open-border); }
.sp-tag--upcoming { background: var(--xal-gold-muted);        color: var(--xal-gold);           border-color: var(--xal-gold-border); }
.sp-tag--closed   { background: var(--xal-status-closed-bg);  color: var(--xal-status-closed);  border-color: var(--xal-status-closed-border); }
.sp-tag--neutral  { background: var(--xal-bg-surface);        color: var(--xal-text-secondary); border-color: var(--xal-border-card); }

/* Status badges */
.sp-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--xal-radius-pill);
  font-family: var(--xal-font-family);
  font-size: 12px; font-weight: 700;
}
.sp-badge--confirmed { background: var(--xal-status-confirmed-bg); color: var(--xal-status-confirmed); }
.sp-badge--pending   { background: var(--xal-status-pending-bg);   color: var(--xal-status-pending); }
.sp-badge--count     { background: var(--xal-bg-surface); color: var(--xal-text-secondary); border: 1px solid var(--xal-border-card); }

/* Search field */
.sp-search-wrap { position: relative; margin-bottom: 20px; }
.sp-search-wrap input {
  width: 100%; padding: 12px 16px 12px 42px;
  border-radius: var(--xal-radius-pill); border: 1.5px solid var(--xal-border-card);
  background: var(--xal-bg-card); color: var(--xal-text);
  font-family: var(--xal-font-family);
  font-size: 16px; min-height: 48px; outline: none; transition: var(--xal-transition-base);
}
.sp-search-wrap input:focus { border-color: var(--xal-gold-border); box-shadow: 0 0 0 3px var(--xal-gold-glow); }
.sp-search-ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--xal-text-muted); font-size: 16px; pointer-events: none;
}

.sp-search-field-wrap { position: relative; }
.sp-search-field-wrap input {
  width: 100%; padding: 12px 16px 12px 40px;
  border-radius: var(--xal-radius-pill); border: 1.5px solid var(--xal-border-card);
  background: var(--xal-bg-card); color: var(--xal-text);
  font-family: var(--xal-font-family);
  font-size: 16px; min-height: 48px; outline: none; transition: var(--xal-transition-base);
}
.sp-search-field-wrap input:focus { border-color: var(--xal-gold-border); box-shadow: 0 0 0 3px var(--xal-gold-glow); }
.sp-search-field-ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--xal-text-muted); font-size: 15px; pointer-events: none;
}

/* Shared buttons */
.sp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; border: none; border-radius: var(--xal-radius-md);
  font-family: var(--xal-font-family);
  font-size: 14px; font-weight: 600;
  padding: 10px 20px; min-height: 44px;
  transition: var(--xal-transition-fast); cursor: pointer; white-space: nowrap;
}
.sp-btn--primary { background: var(--xal-gold); color: #000; }
.sp-btn--primary:hover { background: #e8c84a; box-shadow: 0 4px 16px var(--xal-gold-glow); }
.sp-btn--outline { background: transparent; border: 1.5px solid var(--xal-border-strong); color: var(--xal-text-secondary); }
.sp-btn--outline:hover { border-color: var(--xal-gold-border); color: var(--xal-gold); }
.sp-btn--ghost   { background: transparent; color: var(--xal-gold); padding: 0; font-size: 14px; min-height: auto; }
.sp-btn--full    { width: 100%; justify-content: center; }
.sp-btn--lg      { padding: 14px 28px; min-height: 52px; font-size: 15px; border-radius: var(--xal-radius-lg); }
.sp-btn--icon    { min-height: 52px; min-width: 52px; border-radius: var(--xal-radius-xl); padding: 12px 16px; font-size: 18px; }

.sp-btn-message {
  background: var(--xal-bg-surface); border: 1.5px solid var(--xal-border-card);
  color: var(--xal-text-secondary); border-radius: var(--xal-radius-md);
  font-family: var(--xal-font-family);
  padding: 10px 20px; font-size: 13px; font-weight: 600;
  min-height: 44px; transition: var(--xal-transition-fast);
}
.sp-btn-message:hover { border-color: var(--xal-gold-border); color: var(--xal-gold); }

.sp-btn-ask-organizer {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  padding: 16px 20px; min-height: 52px;
  width: 100%; border-radius: var(--xal-radius-xl); font-size: 15px;
}
.sp-btn-officiate { min-height: 48px; gap: 8px; }

/* ----------------------------------------------------------
   SHOW LISTING PAGE
   ---------------------------------------------------------- */
.sp-page-listing { padding: 16px 14px 100px; }

.sp-listing-hdr {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-bottom: 20px;
}
.sp-listing-hdr h1 { font-family: var(--xal-font-family); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: var(--xal-text); }
.sp-listing-hdr h1 span { color: var(--xal-gold); }

.sp-filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-filter-btn {
  padding: 10px 18px; border: 1.5px solid var(--xal-border-card);
  background: var(--xal-bg-card); color: var(--xal-text-secondary);
  font-family: var(--xal-font-family); font-size: 13px; font-weight: 600;
  border-radius: var(--xal-radius-pill); min-height: 48px; transition: var(--xal-transition-fast);
}
.sp-filter-btn:hover  { border-color: var(--xal-gold-border); color: var(--xal-gold); }
.sp-filter-btn.active { background: var(--xal-gold-muted); border-color: var(--xal-gold-border); color: var(--xal-gold); }

/* Show card grid — single col on mobile */
.sp-shows-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

/*
 * Show Card — reuses xal-show-card shell from xal-cards.css.
 * Only the internal content classes are defined here.
 * The HTML uses .xal-show-card as the root.
 */
.sp-card-flyer-ph {
  width: 100%; aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center; font-size: 3rem;
}
.sp-card-org {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 10px; border-bottom: 1px solid var(--xal-border);
}
.sp-card-org-l    { display: flex; align-items: center; gap: 10px; }
.sp-card-org-name { font-family: var(--xal-font-family); font-size: 13px; font-weight: 600; color: var(--xal-text); }
.sp-card-org-role { font-family: var(--xal-font-family); font-size: 11px; color: var(--xal-text-secondary); }
.sp-card-share {
  background: none; border: none; color: var(--xal-text-muted); font-size: 18px;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--xal-radius-md); transition: color var(--xal-transition-fast);
}
.sp-card-share:hover { color: var(--xal-gold); }

.sp-card-body   { padding: 14px 16px 10px; }
.sp-card-title  { font-family: var(--xal-font-family); font-size: 15px; font-weight: 700; margin-bottom: 10px; line-height: 1.3; color: var(--xal-text); }
.sp-card-meta   { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; align-items: center; }
.sp-meta-date   { font-family: var(--xal-font-family); font-size: 13px; font-weight: 700; color: var(--xal-gold); }
.sp-meta-count  {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--xal-font-family); font-size: 12px; color: var(--xal-text-secondary);
  background: var(--xal-bg-surface); border-radius: var(--xal-radius-pill);
  padding: 4px 10px; font-weight: 600;
}
.sp-meta-loc    { font-family: var(--xal-font-family); font-size: 12px; color: var(--xal-text-secondary); margin-bottom: 10px; }
.sp-card-tags   { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-card-actions { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.sp-card-actions .sp-btn { min-height: 52px; font-size: 15px; border-radius: var(--xal-radius-xl); width: 100%; }

/* Selected card highlight */
.sp-show-card-selected {
  border-color: var(--xal-gold-border) !important;
  box-shadow: 0 0 0 2px var(--xal-gold-dim) !important;
}

/* ----------------------------------------------------------
   EVENT DETAIL — SHARED SHELL
   ---------------------------------------------------------- */
.sp-page-detail { max-width: 1200px; margin: 0 auto; }

/* Hero */
.sp-detail-hero         { position: relative; background: var(--xal-bg-card); }
.sp-detail-hero__ph {
  width: 100%; aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center; font-size: 5rem;
}
.sp-detail-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 25%, rgba(6,6,6,0.75) 70%, rgba(6,6,6,1) 100%);
}
.sp-hero-back {
  position: absolute; top: 16px; left: 20px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(6,6,6,0.70); backdrop-filter: blur(8px);
  border: 1px solid var(--xal-border-card); border-radius: var(--xal-radius-pill);
  color: var(--xal-text); font-family: var(--xal-font-family); font-size: 14px; font-weight: 600;
  padding: 10px 18px; min-height: 44px; transition: var(--xal-transition-fast);
}
.sp-hero-back:hover { background: rgba(6,6,6,0.90); }
.sp-hero-share {
  position: absolute; top: 16px; right: 20px;
  background: rgba(6,6,6,0.70); backdrop-filter: blur(8px);
  border: 1px solid var(--xal-border-card); border-radius: var(--xal-radius-pill);
  color: var(--xal-text); font-family: var(--xal-font-family); font-size: 14px; font-weight: 600;
  padding: 10px 16px; min-height: 44px;
  display: flex; align-items: center; gap: 6px;
}
/* Centered pill inviting the full-size flyer view — same chrome as the
   back/share pills so the hero reads as one control set. */
.sp-hero-view-full {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 8px;
  background: rgba(6,6,6,0.70); backdrop-filter: blur(8px);
  border: 1px solid var(--xal-border-card); border-radius: var(--xal-radius-pill);
  color: var(--xal-text); font-family: var(--xal-font-family); font-size: 14px; font-weight: 600;
  padding: 10px 18px; min-height: 44px; transition: var(--xal-transition-fast);
}
.sp-hero-view-full:hover,
.sp-hero-view-full:focus-visible {
  background: rgba(6,6,6,0.90);
  border-color: var(--xal-gold-border);
  color: var(--xal-gold);
  outline: none;
}

/* Event Identity */
.sp-detail-identity { padding: 20px 16px 0; background: var(--xal-bg-page); }
.sp-detail-identity__row {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.sp-detail-title {
  font-family: var(--xal-font-family);
  font-size: 1.35rem; font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.15; margin-bottom: 6px; color: var(--xal-text);
}
.sp-detail-sub {
  font-family: var(--xal-font-family);
  font-size: 12px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--xal-text-muted); margin-bottom: 12px;
}
.sp-detail-tags    { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.sp-detail-cta-group { display: none; } /* shown on desktop */

/* Quick Stats Bar */
.sp-detail-qsbar {
  display: flex; gap: 0;
  border-top: 1px solid var(--xal-border);
  border-bottom: 1px solid var(--xal-border);
  margin-top: 16px;
  overflow-x: auto; scrollbar-width: none;
}
.sp-detail-qsbar::-webkit-scrollbar { display: none; }
.sp-dqs {
  flex: 1; min-width: 110px;
  padding: 14px 16px; border-right: 1px solid var(--xal-border);
  display: flex; flex-direction: column; gap: 3px;
}
.sp-dqs:last-child { border-right: none; }
.sp-dqs-l { font-family: var(--xal-font-family); font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--xal-text-muted); font-weight: 700; }
.sp-dqs-v { font-family: var(--xal-font-family); font-size: 14px; font-weight: 800; color: var(--xal-text); }
.sp-dqs-v--gold { color: var(--xal-gold); }
.sp-dqs-v--red  { color: var(--xal-red); }

/* ----------------------------------------------------------
   DESKTOP TAB NAV — hidden on mobile
   ---------------------------------------------------------- */
.sp-detail-tabs-wrap { display: none; }
.sp-tab-panel        { display: none; }

/* ----------------------------------------------------------
   MOBILE CONTINUOUS SCROLL
   ---------------------------------------------------------- */
.sp-mobile-scroll { display: block; }

.sp-mobile-section {
  padding: 28px 16px;
  border-bottom: 8px solid var(--xal-bg-secondary);
}
.sp-mobile-section:last-child {
  border-bottom: none;
  padding-bottom: 120px;
}

.sp-mobile-section-title {
  font-family: var(--xal-font-family);
  font-size: 18px; font-weight: 800; margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px; color: var(--xal-text);
}
.sp-section-icon {
  width: 38px; height: 38px; border-radius: var(--xal-radius-md);
  background: var(--xal-bg-surface); display: flex; align-items: center;
  justify-content: center; font-size: 18px; flex-shrink: 0;
}

/* ----------------------------------------------------------
   INFO ROWS  (event logistics)
   ---------------------------------------------------------- */
.sp-info-rows-wrap {
  background: var(--xal-bg-card);
  border: 1px solid var(--xal-border-card);
  border-radius: var(--xal-radius-xl);
  overflow: hidden; margin-bottom: 16px;
}
.sp-info-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; border-bottom: 1px solid var(--xal-border);
}
.sp-info-row:last-child { border-bottom: none; }
.sp-info-icon {
  width: 40px; height: 40px; border-radius: var(--xal-radius-md);
  background: var(--xal-bg-surface); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; font-size: 18px;
  color: var(--xal-gold);
}
.sp-info-body  { flex: 1; }
.sp-info-lbl   { font-family: var(--xal-font-family); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--xal-text-muted); font-weight: 700; margin-bottom: 2px; }
.sp-info-val   { font-family: var(--xal-font-family); font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--xal-text); }
.sp-info-val--link { color: var(--xal-blue-bright); cursor: pointer; }
.sp-info-val--warn { color: var(--xal-red-bright); }

/* ----------------------------------------------------------
   SHOW DOCUMENT LINKS (Fact Sheet + general uploads)
   ---------------------------------------------------------- */
.sp-doc-link {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--xal-bg-card); border: 1.5px solid var(--xal-border-card);
  border-radius: var(--xal-radius-xl); cursor: pointer; min-height: 60px;
  transition: border-color var(--xal-transition-fast); margin-bottom: 10px;
  text-decoration: none;
}
.sp-doc-link:hover { border-color: var(--xal-gold-border); }
.sp-doc-icon {
  width: 44px; height: 44px; border-radius: var(--xal-radius-md);
  background: var(--xal-gold-muted); color: var(--xal-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.sp-doc-body  { flex: 1; overflow: hidden; }
.sp-doc-title { font-family: var(--xal-font-family); font-size: 15px; font-weight: 600; color: var(--xal-gold); }
.sp-doc-meta  { font-family: var(--xal-font-family); font-size: 11px; color: var(--xal-text-muted); margin-top: 2px; }
.sp-doc-chev  { color: var(--xal-text-muted); font-size: 22px; flex-shrink: 0; }

/* ----------------------------------------------------------
   ORGANIZER ROWS
   ---------------------------------------------------------- */
.sp-org-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--xal-border);
  min-height: 72px;
}
.sp-org-row:last-child { border-bottom: none; }
.sp-org-info  { display: flex; align-items: center; gap: 12px; }
.sp-org-name  { font-family: var(--xal-font-family); font-size: 15px; font-weight: 600; color: var(--xal-text); }
.sp-org-club  { font-family: var(--xal-font-family); font-size: 12px; color: var(--xal-text-secondary); margin-top: 2px; }

/* ----------------------------------------------------------
   OFFICIAL ROWS
   ---------------------------------------------------------- */
.sp-official-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px; border-bottom: 1px solid var(--xal-border);
  min-height: 76px;
}
.sp-official-row:last-child { border-bottom: none; }
.sp-official-info   { display: flex; align-items: center; gap: 14px; }
.sp-official-name   { font-family: var(--xal-font-family); font-size: 15px; font-weight: 600; color: var(--xal-text); }
.sp-official-lic    { font-family: var(--xal-font-family); font-size: 12px; color: var(--xal-text-secondary); margin-top: 3px; }
.sp-official-role   { font-family: var(--xal-font-family); font-size: 11px; color: var(--xal-text-muted); margin-top: 2px; }
.sp-officials-actions { margin-bottom: 14px; }

/* ----------------------------------------------------------
   BOUT SHEET ROWS (public show details → Bouts tab)
   ---------------------------------------------------------- */
.sp-sheet-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--xal-border);
  min-height: 64px;
}
.sp-sheet-row:last-child { border-bottom: none; }
.sp-sheet-name { font-family: var(--xal-font-family); font-size: 14px; color: var(--xal-text); }

/* ----------------------------------------------------------
   SCHEDULE ACCORDIONS
   ---------------------------------------------------------- */
.sp-bout-day {
  border: 1px solid var(--xal-border-card);
  border-radius: var(--xal-radius-xl);
  overflow: hidden; margin-bottom: 12px;
}
.sp-bout-day__hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 16px; background: var(--xal-bg-card);
  cursor: pointer; user-select: none; min-height: 60px;
  transition: background var(--xal-transition-fast);
}
.sp-bout-day__hdr:hover { background: var(--xal-bg-surface); }
.sp-bout-day__hdr-l     { display: flex; align-items: center; gap: 10px; }
.sp-bout-day__name      { font-family: var(--xal-font-family); font-size: 15px; font-weight: 700; color: var(--xal-text); }
.sp-bout-day__chip      {
  background: var(--xal-gold-muted); color: var(--xal-gold);
  border: 1px solid var(--xal-gold-border);
  border-radius: var(--xal-radius-pill); font-family: var(--xal-font-family);
  font-size: 13px; font-weight: 700; padding: 5px 14px;
}
.sp-bout-day__chev       { font-size: 20px; color: var(--xal-text-muted); transition: transform var(--xal-transition-base); }
.sp-bout-day.open .sp-bout-day__chev { transform: rotate(180deg); }
.sp-bout-day__body       { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.sp-bout-day.open .sp-bout-day__body { max-height: 900px; }

.sp-sched-list  { padding: 8px 16px 16px; }
.sp-sched-item  {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--xal-border);
}
.sp-sched-item:last-child { border-bottom: none; }
.sp-sched-emoji {
  width: 40px; height: 40px; border-radius: var(--xal-radius-md);
  background: var(--xal-bg-surface); display: flex; align-items: center;
  justify-content: center; font-size: 18px; flex-shrink: 0;
}
.sp-sched-time  { font-family: var(--xal-font-family); font-size: 16px; font-weight: 700; color: var(--xal-text); }
.sp-sched-label { font-family: var(--xal-font-family); font-size: 14px; color: var(--xal-text-secondary); margin-top: 4px; }

/* ----------------------------------------------------------
   LAUNCHER TILES  (conditional, organizer-enabled)
   ---------------------------------------------------------- */
.sp-section-launcher {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--xal-bg-card); border: 1.5px solid var(--xal-border-card);
  border-radius: var(--xal-radius-xl); padding: 20px;
  min-height: 72px; cursor: pointer; width: 100%;
  text-align: left; transition: border-color var(--xal-transition-fast), background var(--xal-transition-fast);
  margin-bottom: 12px;
}
.sp-section-launcher:hover,
.sp-section-launcher:active { border-color: var(--xal-gold-border); background: var(--xal-gold-muted); }
.sp-section-launcher__left  { display: flex; align-items: center; gap: 16px; }
.sp-section-launcher__icon  {
  width: 48px; height: 48px; border-radius: var(--xal-radius-lg);
  background: var(--xal-bg-surface); display: flex; align-items: center;
  justify-content: center; font-size: 22px; flex-shrink: 0;
}
.sp-section-launcher__title  { font-family: var(--xal-font-family); font-size: 16px; font-weight: 700; color: var(--xal-text); }
.sp-section-launcher__sub    { font-family: var(--xal-font-family); font-size: 13px; color: var(--xal-text-secondary); margin-top: 3px; }
.sp-section-launcher__arrow  { font-size: 22px; color: var(--xal-text-muted); flex-shrink: 0; }

/* ----------------------------------------------------------
   MOBILE STICKY CTA BAR
   ---------------------------------------------------------- */
.sp-mobile-cta-bar {
  display: flex;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1200;
  background: rgba(6,6,6,0.97);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--xal-border-card);
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  gap: 10px; align-items: center;
}
.sp-mobile-cta-bar .sp-btn--primary {
  flex: 1; min-height: 52px; font-size: 15px; border-radius: var(--xal-radius-xl);
}
.sp-mobile-cta-bar .sp-btn--outline {
  min-height: 52px; min-width: 52px;
  border-radius: var(--xal-radius-xl); padding: 12px 16px; font-size: 18px;
}

/* ----------------------------------------------------------
   MOBILE SUB-PAGES (Competitors / Bouts overlays)
   ---------------------------------------------------------- */
.sp-subpage       { display: none; }
.sp-subpage.active {
  display: block;
  position: fixed; inset: 0; top: 48px;
  background: var(--xal-bg-page); z-index: 800; overflow-y: auto;
}
.sp-subpage-back {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; background: var(--xal-bg-secondary);
  border-bottom: 1px solid var(--xal-border);
  position: sticky; top: 0; z-index: 100;
}
.sp-subpage-back-btn {
  background: none; border: none; color: var(--xal-text-secondary);
  font-family: var(--xal-font-family); font-size: 14px; font-weight: 600;
  min-height: 44px; display: flex; align-items: center; gap: 6px;
}
.sp-subpage-back-btn:hover  { color: var(--xal-gold); }
.sp-subpage-back__title     { font-family: var(--xal-font-family); font-size: 15px; font-weight: 700; color: var(--xal-text); }
.sp-subpage-body { padding: 20px 16px 100px; }

/* ----------------------------------------------------------
   COMPETITOR CARDS  (mobile sub-page + desktop table)
   ---------------------------------------------------------- */
.sp-comp-card-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.sp-comp-card {
  background: var(--xal-bg-card); border: 1px solid var(--xal-border-card);
  border-radius: var(--xal-radius-xl); padding: 16px;
  display: flex; align-items: center; gap: 14px; min-height: 72px;
}
.sp-comp-card__info { flex: 1; }
.sp-comp-card__name { font-family: var(--xal-font-family); font-size: 15px; font-weight: 700; margin-bottom: 4px; color: var(--xal-text); }
.sp-comp-card__meta { font-family: var(--xal-font-family); font-size: 13px; color: var(--xal-text-secondary); line-height: 1.6; }
.sp-comp-note-sm    { font-family: var(--xal-font-family); font-size: 11px; color: var(--xal-gold); font-weight: 600; }

/* Competitor search / count row */
.sp-comp-search-row {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 12px; margin-bottom: 20px;
}
.sp-comp-count-label { font-family: var(--xal-font-family); font-size: 13px; color: var(--xal-text-secondary); }

/* Weight class header */
.sp-wc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--xal-bg-surface);
  border-radius: var(--xal-radius-md); margin: 20px 0 10px;
}
.sp-wc-head:first-of-type { margin-top: 0; }
.sp-wc-name { font-family: var(--xal-font-family); font-size: 14px; font-weight: 700; color: var(--xal-text); }
.sp-wc-div  { font-family: var(--xal-font-family); font-size: 11px; color: var(--xal-text-muted); margin-left: 8px; }

/* ----------------------------------------------------------
   BOUT CARDS  (public view)
   Uses sp-* prefix; mirrors xal-bout-card structure but
   without the red/blue corner system from admin view.
   ---------------------------------------------------------- */
.sp-bout-card {
  border-radius: var(--xal-radius-xl); 
  overflow: hidden; 
  margin-bottom: 16px;
  transition: border-color var(--xal-transition-fast);
}
.sp-bout-card:hover { border-color: var(--xal-border-strong); }

/* Fighter matchup header */
.sp-bout-matchup {
  display: grid; grid-template-columns: 1fr 36px 1fr;
  align-items: center; padding: 16px; gap: 8px;
  border-bottom: 1px solid var(--xal-border);
}
.sp-fighter           { display: flex; align-items: center; gap: 12px; }
.sp-fighter--right    { flex-direction: row-reverse; text-align: right; }
.sp-fighter-name      { font-family: var(--xal-font-family); font-size: 14px; font-weight: 700; color: var(--xal-text); }
.sp-fighter-gym       { font-family: var(--xal-font-family); font-size: 12px; color: var(--xal-text-secondary); margin-top: 2px; }
.sp-fighter-loc       { font-family: var(--xal-font-family); font-size: 11px; color: var(--xal-text-muted); }
.sp-vs-badge {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--xal-bg-surface); color: var(--xal-text-secondary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--xal-font-family); font-size: 11px; font-weight: 800; flex-shrink: 0;
}

/* Stats grid — 3-col: left · center label · right */
.sp-bout-stats {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 6px 12px; padding: 14px 16px; border-bottom: 1px solid var(--xal-border);
}
.sp-bs-l { text-align: right;  font-family: var(--xal-font-family); font-size: 13px; font-weight: 600; color: var(--xal-text); }
.sp-bs-m {
  text-align: center; font-family: var(--xal-font-family); font-size: 11px;
  color: var(--xal-text-muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  display: flex; align-items: center; justify-content: center;
}
.sp-bs-r    { text-align: left; font-family: var(--xal-font-family); font-size: 13px; font-weight: 600; color: var(--xal-text); }
.sp-bs-note { font-family: var(--xal-font-family); font-size: 10px; color: var(--xal-gold); font-weight: 600; }

/* Weight section */
.sp-bout-weight {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 12px; padding: 16px; background: var(--xal-bg-surface);
}
.sp-bw-l   { font-family: var(--xal-font-family); font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--xal-text-muted); font-weight: 700; }
.sp-bw-v   { font-family: var(--xal-font-family); font-size: 22px; font-weight: 800; color: var(--xal-text); }
.sp-bw-mm  { display: flex; gap: 24px; }
.sp-bw-mm-l { font-family: var(--xal-font-family); font-size: 10px; text-transform: uppercase; color: var(--xal-text-muted); font-weight: 700; }
.sp-bw-mm-v { font-family: var(--xal-font-family); font-size: 16px; font-weight: 700; color: var(--xal-text); }

/* Bout status footer */
.sp-bout-status {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 10px; padding: 14px 16px;
}
.sp-bout-status-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-bout-note          { font-family: var(--xal-font-family); font-size: 11px; color: var(--xal-text-muted); }
.sp-bout-note a        { color: var(--xal-blue-bright); }

/* Bouts segmented toggle */
.sp-bouts-toggle {
  display: flex; background: var(--xal-bg-surface);
  border-radius: var(--xal-radius-xl); padding: 4px; width: 100%;
  margin-bottom: 14px;
}
.sp-bouts-toggle-btn {
  flex: 1; padding: 10px 16px; border: none; background: transparent;
  border-radius: var(--xal-radius-xl); font-family: var(--xal-font-family);
  font-size: 14px; font-weight: 700; color: var(--xal-text-secondary);
  min-height: 52px; transition: var(--xal-transition-fast);
}
.sp-bouts-toggle-btn.active { background: var(--xal-gold); color: #000; }

/* Bout search wrapper */
.sp-bout-search-wrap { margin-bottom: 16px; }

/* ----------------------------------------------------------
   DESKTOP OVERVIEW ASIDE
   ---------------------------------------------------------- */
.sp-aside-card {
  background: var(--xal-bg-card); border: 1px solid var(--xal-border-card);
  border-radius: var(--xal-radius-xl); padding: 20px;
}
.sp-aside-head {
  font-family: var(--xal-font-family); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--xal-text-muted);
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--xal-border);
}

/* Quick-stat tiles (overview tab) */
.sp-qs-tiles { display: none; } /* visible on desktop only — see media query */

/* ==========================================================
   DESKTOP OVERRIDES  (min-width: 901px)
   Only overrides / additions vs mobile base above.
   ========================================================== */
@media (min-width: 901px) {

  /* --- Listing --- */
  .sp-page-listing    { max-width: 1400px; margin: 0 auto; padding: 28px 20px 60px; }
  .sp-listing-hdr h1  { font-size: 1.5rem; }
  .sp-shows-grid      { grid-template-columns: repeat(auto-fill, minmax(375px, 1fr)); gap: 30px; }

  /* Wide desktop cards turned the flyer into most of the card (289px of a 504px card at
     1440px). A 16/9 band gives back ~45px per card so more shows fit on screen. The
     component's MaxHeight never applied here — this zone is shorter, so it just clipped
     the tile; letting the flyer fill the band instead keeps object-fit honest, and
     anchoring top keeps the poster's title in frame rather than cropping to its middle. */
  .sp-shows-grid .xal-show-card__flyer { aspect-ratio: 16 / 9; }
  .sp-shows-grid .xal-show-card__flyer .xal-flyer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    border-radius: 0;
  }
  /* The card already zooms the image on hover; a lifting tile would fight it and expose
     a sliver of the band underneath. */
  .sp-shows-grid .xal-show-card__flyer .xal-flyer:hover {
    transform: none;
    box-shadow: none;
  }
  .sp-shows-grid .xal-show-card__flyer .xal-flyer__img { object-position: center top; }
  .sp-search-wrap input { max-width: 460px; }
  .sp-card-actions    { flex-direction: row; gap: 10px; }
  .sp-card-actions .sp-btn {
    min-height: 44px; font-size: 14px; border-radius: var(--xal-radius-md);
    width: auto; flex: 1; min-width: 120px;
  }

  /* --- Detail hero --- */
  .sp-detail-hero__ph { aspect-ratio: 21/8; }

  /* --- Identity --- */
  .sp-detail-identity       { padding: 20px 24px 0; }
  .sp-detail-title          { font-size: 1.75rem; }
  .sp-detail-cta-group      { display: flex; gap: 10px; flex-wrap: wrap; }

  /* --- Quick stats --- */
  .sp-dqs { min-width: auto; padding: 14px 20px; }

  /* --- Tab nav --- */
  .sp-detail-tabs-wrap {
    display: block;
    position: sticky; top: 0px; z-index: 200;
    background: var(--xal-bg-secondary); border-bottom: 1px solid var(--xal-border);
  }
  .sp-detail-tabs {
    max-width: 1200px; margin: 0 auto;
    display: flex; padding: 0 24px;
    overflow-x: auto; scrollbar-width: none;
  }
  .sp-detail-tabs::-webkit-scrollbar { display: none; }
  .sp-detail-tab {
    padding: 15px 22px; border: none; background: transparent;
    font-family: var(--xal-font-family); color: var(--xal-text-secondary);
    font-size: 13px; font-weight: 600;
    white-space: nowrap; border-bottom: 2px solid transparent;
    margin-bottom: -1px; transition: color var(--xal-transition-fast); min-height: 48px;
  }
  .sp-detail-tab:hover  { color: var(--xal-text); }
  .sp-detail-tab.active { color: var(--xal-gold); border-bottom-color: var(--xal-gold); }
  .sp-tab-ct {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--xal-bg-surface); color: var(--xal-text-secondary);
    border-radius: var(--xal-radius-pill);
    font-size: 10px; font-weight: 700; padding: 1px 6px; margin-left: 6px;
  }
  .sp-detail-tab.active .sp-tab-ct { background: var(--xal-gold-muted); color: var(--xal-gold); }

  /* --- Tab panels --- */
  .sp-tab-panel        { display: none; }
  .sp-tab-panel.active { display: block; }
  .sp-tab-body { max-width: 1200px; margin: 0 auto; padding: 28px 24px 60px; }

  /* --- Overview 2-col grid --- */
  .sp-overview-grid { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }

  /* --- Info rows in tab body (no card bg) --- */
  .sp-tab-body .sp-info-rows-wrap { background: transparent; border: none; border-radius: 0; }
  .sp-tab-body .sp-info-row       { padding: 14px 0; }
  .sp-tab-body .sp-info-icon      { width: 36px; height: 36px; font-size: 16px; }
  .sp-tab-body .sp-info-val       { font-size: 14px; }
  .sp-tab-body .sp-info-lbl       { font-size: 10px; }

  /* --- Org rows in aside card --- */
  .sp-aside-card .sp-org-row   { padding: 12px 0; min-height: auto; }
  .sp-aside-card .sp-org-name  { font-size: 14px; }
  .sp-aside-card .sp-org-row:last-child { border-bottom: none; }

  /* --- Document links in tab body --- */
  .sp-tab-body .sp-doc-link { margin-top: 16px; padding: 16px; min-height: 64px; }

  /* --- Official rows in tab body --- */
  .sp-tab-body .sp-official-row { padding: 16px 20px; min-height: 72px; }

  /* --- Quick stat tiles (overview) --- */
  .sp-qs-tiles {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 24px;
  }
  .sp-qs-tile {
    background: var(--xal-bg-surface); border: 1.5px solid var(--xal-border-card);
    border-radius: var(--xal-radius-lg); padding: 18px 12px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    cursor: pointer; transition: var(--xal-transition-fast); text-align: center; min-height: 90px;
  }
  .sp-qs-tile:hover     { border-color: var(--xal-gold-border); background: var(--xal-gold-muted); }
  .sp-qs-tile__icon     { font-size: 22px; }
  .sp-qs-tile__val      { font-family: var(--xal-font-family); font-size: 20px; font-weight: 800; color: var(--xal-text); }
  .sp-qs-tile__label    { font-family: var(--xal-font-family); font-size: 12px; color: var(--xal-text-secondary); font-weight: 600; }

  /* --- Desktop competitor table --- */
  .sp-comp-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
  .sp-comp-table th {
    font-family: var(--xal-font-family); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--xal-text-muted); font-weight: 700;
    padding: 10px 14px; border-bottom: 1px solid var(--xal-border); text-align: left;
  }
  .sp-comp-table td {
    font-family: var(--xal-font-family); font-size: 13px;
    padding: 12px 14px; border-bottom: 1px solid var(--xal-border); vertical-align: middle;
    color: var(--xal-text);
  }
  .sp-comp-table tr:last-child td { border-bottom: none; }
  .sp-comp-table tr:hover td      { background: var(--xal-bg-hover); }
  .sp-comp-name-cell { display: flex; align-items: center; gap: 10px; }

  /* --- Mobile-only elements: hide on desktop --- */
  .sp-mobile-scroll   { display: none; }
  .sp-mobile-cta-bar  { display: none !important; }
  .sp-subpage         { display: none !important; }

  /* --- Bout matchup desktop --- */
  .sp-bout-matchup  { grid-template-columns: 1fr auto 1fr; padding: 18px 20px; gap: 12px; }
  .sp-bout-stats    { padding: 16px 20px; }
  .sp-bout-weight   { flex-direction: row; align-items: center; justify-content: space-between; padding: 16px 20px; }
  .sp-bout-status   { flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 20px; }
  .sp-bw-v          { font-size: 24px; }

  /* --- Bouts toggle desktop width --- */
  .sp-bouts-toggle      { width: fit-content; }
  .sp-bouts-toggle-btn  { min-height: 44px; padding: 10px 22px; font-size: 13px; }

  /* --- Comp search desktop --- */
  .sp-comp-search-row { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
  .sp-comp-search-row .sp-search-field-wrap { max-width: 400px; }

  /* --- Bout search desktop --- */
  .sp-bout-search-header {
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap;
    gap: 12px; margin-bottom: 20px;
  }
  .sp-bout-search-wrap { max-width: 300px; margin-bottom: 0; }

  /* --- Schedule / Officials layout desktop --- */
  .sp-schedule-tab-inner  { max-width: 700px; }
  .sp-officials-tab-inner { max-width: 680px; }
  .sp-officials-tab-inner .sp-officials-actions {
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap;
    gap: 12px; margin-bottom: 20px;
  }
  .sp-officials-tab-inner .sp-officials-actions .sp-sect-head { margin: 0; }
}

/* ----------------------------------------------------------
   SMALL PHONES
   ---------------------------------------------------------- */
@media (max-width: 420px) {
  .sp-detail-title { font-size: 1.2rem; }
  .sp-dqs          { min-width: 100px; }
  .sp-tag          { font-size: 11px; padding: 3px 8px; }
}

/* ----------------------------------------------------------
   MOBILE SHOW DETAILS — QUICK-JUMP CHIPS + STACKED SECTIONS
   Markup is only instantiated on mobile (viewport-gated), so
   these rules need no media query.
   ---------------------------------------------------------- */
.sp-m2 { padding-bottom: 110px; }

/* Sticky horizontally-scrollable chip nav.
   The nav is the sticky shell; the inner div scrolls so the
   right-edge scrim can sit fixed over it as an overflow cue. */
.sp-m2-chips {
  position: sticky; top: 0; z-index: 40;
  background: rgba(6,6,6,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--xal-border-card);
  timeline-scope: --sp-m2-chips-x;
}
.sp-m2-chips__scroll {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 10px 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-timeline: --sp-m2-chips-x x;
}
.sp-m2-chips__scroll::-webkit-scrollbar { display: none; }

/* Overflow cue: fades the right edge so cut-off chips read as scrollable.
   Invisible when nothing sits under it (gradient matches the nav bg). */
.sp-m2-chips::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 1px; width: 48px;
  background: linear-gradient(to left, rgba(6,6,6,0.95) 25%, transparent);
  pointer-events: none;
}
/* Where scroll-driven animations are supported, hide the cue at scroll end. */
@supports (animation-timeline: scroll()) {
  .sp-m2-chips::after {
    animation: sp-m2-scrim-fade linear both;
    animation-timeline: --sp-m2-chips-x;
  }
  @keyframes sp-m2-scrim-fade {
    0%, 85% { opacity: 1; }
    100%    { opacity: 0; }
  }
}

/* The gradient scrim alone proved too subtle (QA missed the Officials chip
   entirely), so phones also get an explicit gold chevron over the scrim and a
   one-time nudge that peeks the off-screen chips. Both are scoped to widths
   where the chip row is guaranteed to overflow (4 labelled chips ≈ 500px);
   above that the row may fit and the cues would mislead. */
@media (max-width: 480px) {
  .sp-m2-chips::before {
    content: '';
    position: absolute; right: 12px; top: calc(50% - 6px); z-index: 1;
    width: 9px; height: 9px;
    border-top: 2.5px solid var(--xal-gold);
    border-right: 2.5px solid var(--xal-gold);
    transform: rotate(45deg);
    pointer-events: none;
  }
  @supports (animation-timeline: scroll()) {
    .sp-m2-chips::before {
      animation: sp-m2-scrim-fade linear both;
      animation-timeline: --sp-m2-chips-x;
    }
  }
  .sp-m2-chip {
    animation: sp-m2-chips-nudge 850ms ease-in-out 700ms 1 both;
  }
  @keyframes sp-m2-chips-nudge {
    0%, 100% { transform: translateX(0); }
    40%, 60% { transform: translateX(-18px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .sp-m2-chip { animation: none; }
  }
}

.sp-m2-chip {
  flex: 0 0 auto; min-height: 44px; padding: 8px 16px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--xal-radius-pill);
  border: 1px solid var(--xal-border-card);
  background: var(--xal-bg-surface);
  color: var(--xal-text-secondary);
  font-family: var(--xal-font-family); font-size: 13px; font-weight: 700;
  white-space: nowrap; cursor: pointer;
  transition: var(--xal-transition-fast);
}
.sp-m2-chip.is-active {
  background: var(--xal-gold); color: #000; border-color: var(--xal-gold);
}
.sp-m2-chip__count {
  font-size: 11px; padding: 1px 7px; border-radius: var(--xal-radius-pill);
  background: rgba(255,255,255,0.12);
}
.sp-m2-chip.is-active .sp-m2-chip__count { background: rgba(0,0,0,0.18); }

/* Active section (only one is mounted at a time) */
.sp-m2-section { padding: 18px 14px 10px; }
.sp-m2-section__title {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--xal-font-family); font-size: 18px; font-weight: 800;
  color: var(--xal-text); margin: 0 0 12px;
}
.sp-m2-section__title span { font-size: 13px; font-weight: 700; color: var(--xal-text-muted); }

/* Compact cards in a single, full-width vertical column.
   Block flow (not flex/gap) so <Virtualize> spacer height math stays correct. */
.sp-mobile-card-list { display: block; }
.sp-mobile-card-list .xal-bout-card,
.sp-mobile-card-list .xal-boxer-card { margin-bottom: 10px; }

/* Collapsible filter bar (Competitors / Bouts on mobile) */
.sp-mobile-filter { margin-bottom: 12px; }
.sp-mobile-filter__bar { display: flex; gap: 8px; align-items: center; }
.sp-mobile-filter__search {
  flex: 1; min-height: 44px;
  background: var(--xal-bg-surface);
  border: 1px solid var(--xal-border-card);
  border-radius: var(--xal-radius-lg);
  color: var(--xal-text); padding: 0 14px;
  font-family: var(--xal-font-family); font-size: 15px;
}
.sp-mobile-filter__toggle {
  flex-shrink: 0; min-height: 44px; padding: 0 16px;
  background: var(--xal-bg-surface);
  border: 1px solid var(--xal-border-card);
  border-radius: var(--xal-radius-lg);
  color: var(--xal-text-secondary);
  font-family: var(--xal-font-family); font-size: 14px; font-weight: 600;
}
.sp-mobile-filter__panel {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 10px; padding: 12px;
  background: var(--xal-bg-surface);
  border: 1px solid var(--xal-border-card);
  border-radius: var(--xal-radius-lg);
}
.sp-mobile-filter__panel .xal-detail-filter__input { min-height: 44px; }
.sp-mobile-filter__actions { display: flex; gap: 10px; }
.sp-mobile-filter__actions .xal-btn { min-height: 44px; }