/* ==========================================================================
   LyricBingo V2 — Spacing & layout (aligned with Pro design system)
   ========================================================================== */

:root {
  --v2-space-1: 4px;
  --v2-space-2: 8px;
  --v2-space-3: 12px;
  --v2-space-4: 16px;
  --v2-space-5: 20px;
  --v2-space-6: 24px;
  --v2-space-7: 28px;
  --v2-space-8: 32px;
  --v2-space-9: 40px;
  --v2-space-10: 48px;
  --v2-shell-pad-x: clamp(20px, 3vw, 36px);
  --v2-shell-pad-top: 20px;
  --v2-shell-pad-bottom: 48px;
  --v2-section-gap: 24px;
  --v2-grid-gap: 12px;
  --v2-card-pad: 20px;
  --v2-card-radius: 12px;
  --v2-page-max: 1200px;
  --v2-search-h: 40px;
}

/* ── Shell: one scroll region (main only) ── */
html.lb-v2-html,
body.lb-v2-active {
  height: 100% !important;
  overflow: hidden !important;
}

#lb-v2-root {
  height: 100vh !important;
  height: 100dvh !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.lb-v2.v2-shell,
.lb-v2.v2-shell-pro {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

.lb-v2 .v2-side {
  height: 100% !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  position: relative !important;
  top: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.lb-v2 .v2-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.lb-v2 .v2-main {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding:
    var(--v2-shell-pad-top)
    var(--v2-shell-pad-x)
    var(--v2-shell-pad-bottom) !important;
  scroll-padding-top: 12px;
}

/* ── Page containers — shared width & alignment ── */
.v2-home-hub,
.v2-library-page,
.v2-simple-page,
.v2-console-page,
.v2-admin-page,
.v2-pro-page {
  max-width: var(--v2-page-max);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.lb-v2 .v2-console-page,
.lb-v2 .v2-simple-page,
.lb-v2 .v2-admin-page {
  padding: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── Top bar ── */
.v2-top,
.v2-top-pro {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--v2-space-4) !important;
  margin-bottom: var(--v2-section-gap) !important;
  padding-top: 0 !important;
}

.v2-main:has(.v2-console-page) .v2-top,
.v2-main:has(.v2-simple-page) .v2-top,
.v2-main:has(.v2-admin-page) .v2-top-pro {
  display: none !important;
}

.v2-search,
.v2-search-pro {
  height: var(--v2-search-h) !important;
  min-height: var(--v2-search-h) !important;
}

.v2-actions {
  gap: var(--v2-space-3) !important;
  flex-shrink: 0;
}

/* ── Page rhythm ── */
.v2-hero {
  margin-bottom: 0;
}

.v2-hero + .v2-section,
.v2-section,
.v2-spotlight,
.v2-home-hub__hero,
.v2-admin-spotlight {
  margin-bottom: var(--v2-section-gap) !important;
}

.v2-head {
  gap: var(--v2-space-4) !important;
  margin-bottom: var(--v2-space-4) !important;
  align-items: flex-end !important;
}

.v2-grid,
.v2-recent-grid,
.v2-show-grid,
.v2-col-grid,
.v2-analytics-list,
.v2-report-list,
.v2-report-stack {
  gap: var(--v2-grid-gap) !important;
}

/* ── Sticky sub-nav — stays inside main, below scroll top ── */
.v2-col-nav {
  position: sticky;
  top: 0;
  z-index: 6;
  margin-bottom: var(--v2-space-4);
  padding: var(--v2-space-2) 0;
  background: linear-gradient(180deg, #1a1a1a 70%, transparent);
}

/* ── Cards ── */
.v2-card:not([data-card]):not(.v2-quick-card) {
  padding: var(--v2-card-pad) !important;
  border-radius: var(--v2-card-radius) !important;
}

.v2-recent-card,
.v2-show-card,
.v2-analytics-game {
  padding: var(--v2-card-pad) !important;
  border-radius: var(--v2-card-radius) !important;
}

.v2-hero .v2-actions {
  margin-top: var(--v2-space-6);
  gap: var(--v2-space-3);
}

.v2-hero .v2-lead {
  margin-top: var(--v2-space-4);
  max-width: 62ch;
}

.v2-title {
  margin: var(--v2-space-3) 0 0;
}

.v2-k + .v2-title,
.v2-k + .v2-spotlight__title,
.v2-k + .v2-home-hub__title {
  margin-top: var(--v2-space-2);
}

/* ── Host console — see beatdesk-v2-host.css ── */

@media (max-width: 900px) {
  html.lb-v2-html,
  body.lb-v2-active {
    overflow: hidden !important;
  }

  #lb-v2-root {
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .lb-v2.v2-shell,
  .lb-v2.v2-shell-pro {
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-columns: 1fr !important;
    height: 100% !important;
  }

  .lb-v2 .v2-side {
    height: auto !important;
    max-height: none !important;
    flex-shrink: 0;
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
  }

  .lb-v2 .v2-nav {
    flex: 0 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .lb-v2 .v2-main {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto;
    max-height: none !important;
    padding-bottom: 88px !important;
  }

  .lb-v2 .v2-main:has(.v2-host-pro) {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding-bottom: 16px !important;
  }

  .v2-top,
  .v2-top-pro {
    flex-wrap: wrap;
  }
}

@media (max-width: 720px) {
  :root {
    --v2-shell-pad-x: 16px;
    --v2-shell-pad-top: 16px;
    --v2-shell-pad-bottom: 40px;
  }

  .v2-actions {
    width: 100%;
    justify-content: stretch;
  }

  .v2-actions .v2-btn {
    flex: 1;
  }
}