/**
 * BigPlay — Applied Spacing Layer (WP03)
 * Load AFTER theme.bundle.css + exchange-theme.css (+ typography).
 * Canonical scale: 4 / 8 / 12 / 16 / 24 / 32 (+ dense/micro exceptions).
 */

/* ── Alias bridge: legacy --ex-* → theme roles ──────────────────────────── */
.exchange-app {
  --ex-shell-gap: var(--theme-space-shell-gap, 0.75rem);
  --ex-site-header-gap: var(--theme-space-header-gap, 0.25rem);
  --ex-navbar-item-gap: var(--theme-space-3, 0.75rem);
  --ex-group-gap: var(--theme-space-group-gap, 0.5rem);
  --ex-strip-gap: var(--theme-space-strip-gap, 0.25rem);
  --ex-account-main-gap: var(--theme-space-account-main, 1rem);
  --ex-xch-gap: var(--theme-space-odds-gap, 0.25rem);
}

/* ── Page containers ────────────────────────────────────────────────────── */
.exchange-app .container,
.exchange-app .container-fluid {
  padding-left: var(--theme-space-page-x, 0.75rem);
  padding-right: var(--theme-space-page-x, 0.75rem);
}

.exchange-app .container-sub {
  padding-inline: var(--theme-space-account-panel, 1.25rem);
}

/* ── Shell grid ─────────────────────────────────────────────────────────── */
.exchange-app .ex-shell {
  gap: var(--ex-shell-gap, var(--theme-space-shell-gap, 0.75rem));
  padding-block: var(--theme-space-shell-pad-y, 0.5rem) var(--theme-space-4, 1rem);
}

/* Home dense: tighter columns, keep markets high in fold */
body.ex-home-dense .ex-shell {
  --ex-shell-gap: var(--theme-space-shell-gap-dense, 0.5rem);
  padding-block: var(--theme-space-1, 0.25rem) var(--theme-space-2, 0.5rem);
}

/* ── League / in-play groups ────────────────────────────────────────────── */
.exchange-app .ex-inplay-group + .ex-inplay-group {
  margin-top: var(--theme-space-group-gap, 0.5rem);
}

.exchange-app .ex-inplay-group {
  margin-bottom: var(--theme-space-group-gap, 0.5rem);
}

/* Event stack inside groups */
.exchange-app .ex-inplay-group__list .ex-event {
  margin-bottom: var(--theme-space-row-gap, 0.25rem);
}

.exchange-app .ex-inplay-group__list .ex-event:last-child {
  margin-bottom: 0;
}

/* ── Odds column gutters ────────────────────────────────────────────────── */
.exchange-app .ex-inplay-group__list--indibet {
  --ex-xch-gap: var(--theme-space-odds-gap, 0.25rem);
}

/* Mobile: equal horizontal + vertical gap between odds cells */
@media (max-width: 991.98px) {
  .exchange-app .ex-inplay-group__list--indibet {
    --ex-xch-gap: 0.125rem;
    --ex-xch-pair-gap: 0.125rem;
  }
}

/* ── Schedule / category strips ─────────────────────────────────────────── */
.exchange-app .ex-live-cat-strip,
.exchange-app .ex-results-cat-strip,
.exchange-app .ex-schedule-subnav,
.exchange-app .ex-personalization-strip {
  margin-block: var(--theme-space-strip-gap, 0.25rem);
}

.exchange-app .ex-header-cats {
  padding-block: var(--theme-space-strip-gap, 0.25rem);
}

/* ── Account: tabs → content = 16px ─────────────────────────────────────── */
.exchange-user-layout .ex-shell__main,
.exchange-account-layout .ex-shell__main {
  gap: var(--ex-account-main-gap, var(--theme-space-account-main, 1rem));
  padding-bottom: var(--theme-space-2, 0.5rem);
}

.exchange-account-layout .ex-shell__main > .ex-subnav-tabs,
.exchange-account-layout .ex-shell__main > .ex-money-section__tabs,
.exchange-account-layout .ex-shell__main > .ex-account-section__tabs {
  margin-bottom: 0;
  padding-top: var(--theme-space-dense, 0.25rem);
  padding-inline: var(--theme-space-4, 1rem);
}

.exchange-account-layout .ex-shell__main > .ex-subnav-tabs + .ex-user-panel,
.exchange-account-layout .ex-shell__main > .ex-money-section__tabs + .ex-user-panel,
.exchange-account-layout .ex-shell__main > .ex-subnav-tabs + .ex-money-section,
.exchange-account-layout .ex-shell__main > .ex-money-section__tabs + .ex-money-section,
.exchange-account-layout .ex-shell__main > .ex-account-section__tabs + .ex-account-section,
.exchange-account-layout .ex-shell__main > .ex-subnav-tabs + .ex-account-section {
  padding-block: var(--theme-space-account-panel, 1.25rem) var(--theme-space-6, 1.5rem);
}

/* ── Fold clearance under sticky header ─────────────────────────────────── */
.exchange-app .ex-shell__betstrip {
  top: calc(
    var(--ex-site-header-height, 7.5rem) + var(--ex-site-header-gap, var(--theme-space-header-gap, 0.25rem))
  );
}

/* ── Footer / section breathing room ────────────────────────────────────── */
.exchange-app .ex-footer,
body.ex-home-dense .ex-home-trading-page > .ex-footer {
  margin-top: var(--theme-space-section, 1.5rem);
}