/* ==========================================================================
   BeatDesk Layout Polish — spacing, alignment, consistency
   Load after beatdesk-ui.css. No branding changes.
   ========================================================================== */

:root {
  /* 4px spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;

  /* Layout tokens (override ui-* where needed) */
  --ui-max: 1200px;
  --ui-gutter: clamp(1.25rem, 4vw, 2rem);
  --ui-radius: 12px;
  --ui-radius-sm: 12px;
  --ui-radius-lg: 16px;

  --page-section-y: var(--s-12);
  --page-section-y-sm: var(--s-8);
  --stack-sm: var(--s-3);
  --stack-md: var(--s-4);
  --stack-lg: var(--s-6);
  --stack-xl: var(--s-8);
  --grid-gap: var(--s-4);
  --grid-gap-lg: var(--s-6);
  --card-pad: var(--s-4);
  --btn-h: 2.75rem;

  /* Typography scale */
  --type-page: clamp(2rem, 4.5vw, 2.75rem);
  --type-hero: clamp(2.25rem, 5.5vw, 3.25rem);
  --type-section: 1.375rem;
  --type-card: 0.9375rem;
  --type-body: 0.9375rem;
  --type-meta: 0.8125rem;
  --type-kicker: 0.6875rem;
  --leading-title: 1.12;
  --leading-body: 1.55;
}

/* ── Container shell (single grid for all pages) ── */

.site-header > div,
footer.border-t > div,
.mx-auto.max-w-7xl,
.mx-auto.max-w-6xl,
.mx-auto.max-w-4xl,
.mx-auto.max-w-3xl,
.mx-auto.max-w-2xl,
.mx-auto.max-w-xl,
.ui-recent-row,
.ui-skeleton-wrap,
.pb-16 > .mx-auto.max-w-6xl,
.pb-20 > section > .mx-auto {
  width: 100%;
  max-width: var(--ui-max);
  margin-inline: auto;
}

.site-header > div,
footer.border-t > div,
.mx-auto.max-w-7xl,
.mx-auto.max-w-6xl,
.mx-auto.max-w-4xl,
.mx-auto.max-w-3xl,
.mx-auto.max-w-2xl,
.mx-auto.max-w-xl,
.ui-recent-row,
.ui-skeleton-wrap,
.pb-16 > .mx-auto.max-w-6xl {
  padding-inline: var(--ui-gutter) !important;
}

/* ── Typography hierarchy ── */

.section-kicker,
.eyebrow {
  display: block;
  font-size: var(--type-kicker) !important;
  margin: 0 0 var(--s-2) !important;
  line-height: 1.3;
}

.page-hero h1,
.relative.flex.min-h-\[88vh\] h1 {
  font-size: var(--type-hero) !important;
  line-height: var(--leading-title) !important;
  margin: var(--s-2) 0 var(--s-4) !important;
}

section .mb-8 h2,
section .text-center h2,
.ui-recent-row h2 {
  font-size: var(--type-section) !important;
  line-height: var(--leading-title) !important;
  margin: 0 0 var(--s-2) !important;
}

.playlist-card-body h3,
.flow-card h2,
.flow-card h3 {
  font-size: var(--type-card) !important;
  line-height: 1.35 !important;
  margin: var(--s-1) 0 0 !important;
}

p.text-cream-muted,
.flow-card p,
.page-hero p {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.playlist-card-body .text-xs,
.playlist-card-body .text-\[10px\] {
  font-size: var(--type-meta) !important;
  line-height: 1.4;
}

/* ── Page sections ── */

section.py-20 {
  padding-block: var(--page-section-y) !important;
}

section.py-16 {
  padding-block: var(--page-section-y-sm) !important;
}

.pb-20 {
  padding-bottom: var(--page-section-y) !important;
}

section .mb-8,
section .mb-8.flex {
  margin-bottom: var(--stack-lg) !important;
  align-items: flex-end;
  gap: var(--s-4);
}

section.border-y {
  padding-block: var(--page-section-y) !important;
}

section.border-y .text-center {
  text-align: left !important;
  margin-bottom: var(--stack-lg);
}

section.border-y .mt-12.grid {
  margin-top: 0 !important;
  gap: var(--grid-gap-lg) !important;
}

/* ── Home hero ── */

.relative.flex.min-h-\[88vh\] .relative.mx-auto {
  padding: var(--s-16) var(--ui-gutter) var(--s-10) !important;
  max-width: var(--ui-max) !important;
  margin-inline: auto !important;
}

.relative.flex.min-h-\[88vh\] .mx-auto.max-w-3xl {
  max-width: 640px !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

.relative.flex.min-h-\[88vh\] .hero-proof {
  margin-top: var(--stack-lg) !important;
  gap: var(--s-2) !important;
}

.relative.flex.min-h-\[88vh\] .mt-8,
.relative.flex.min-h-\[88vh\] .mt-10 {
  margin-top: var(--stack-xl) !important;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.ui-waveform {
  right: var(--ui-gutter);
  bottom: var(--s-8);
}

.ui-recent-row {
  padding-block: var(--s-6) var(--page-section-y-sm) !important;
  margin-top: 0 !important;
}

.ui-recent-row h2 {
  margin-bottom: var(--stack-md) !important;
}

.ui-recent-scroll {
  gap: var(--grid-gap);
  margin-inline: calc(var(--ui-gutter) * -0.25);
  padding-inline: calc(var(--ui-gutter) * 0.25);
}

/* Stat row on home */
.grid.gap-4.sm\:grid-cols-3,
.grid.gap-6.md\:grid-cols-3 {
  gap: var(--grid-gap-lg) !important;
}

/* ── Cards (unified) ── */

.stat-card,
.flow-card,
.empty-state,
.ui-recent-item {
  border-radius: var(--ui-radius) !important;
  padding: var(--card-pad) !important;
}

.stat-card,
.flow-card {
  padding: var(--s-6) !important;
}

.stat-card:hover,
.flow-card:hover,
.playlist-card:hover,
.ui-recent-item:hover {
  transform: translateY(-2px);
}

.playlist-card {
  padding: var(--s-3) !important;
  border-radius: var(--ui-radius) !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.playlist-card-art {
  border-radius: var(--ui-radius-sm) !important;
  flex-shrink: 0;
}

.playlist-card-body {
  padding: var(--s-3) 0 0 !important;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.playlist-card-body .mt-3 {
  margin-top: auto !important;
  padding-top: var(--s-2);
}

.stagger-children,
.grid.gap-4.sm\:grid-cols-2.lg\:grid-cols-4,
.grid.gap-4.sm\:grid-cols-2.lg\:grid-cols-3,
.ui-skeleton-grid {
  gap: var(--grid-gap) !important;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)) !important;
}

@media (min-width: 900px) {
  .stagger-children,
  .grid.gap-4.sm\:grid-cols-2.lg\:grid-cols-4,
  .grid.gap-4.sm\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  .stagger-children,
  .grid.gap-4.sm\:grid-cols-2.lg\:grid-cols-4,
  .grid.gap-4.sm\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ── Library page ── */

.page-hero .relative.mx-auto {
  padding-top: var(--s-10) !important;
  padding-bottom: var(--s-6) !important;
}

.page-hero h1 {
  font-size: var(--type-page) !important;
  margin: var(--s-2) 0 var(--s-3) !important;
}

.page-hero p {
  margin-top: var(--s-3) !important;
  max-width: 36rem;
}

.page-hero .mt-8 {
  margin-top: var(--stack-lg) !important;
}

.pb-20 > .page-hero + section,
.pb-20 section:not(.page-hero) {
  padding-inline: 0;
}

/* Search + filters */
.page-hero + section .flex.flex-wrap,
.pb-20 .flex.flex-wrap.gap-2 {
  gap: var(--s-2) !important;
  margin-bottom: var(--stack-lg) !important;
}

input[type="search"] {
  min-height: var(--btn-h);
  padding-block: var(--s-3) !important;
}

.filter-pill {
  min-height: 2.25rem;
  padding: var(--s-2) var(--s-4) !important;
  display: inline-flex;
  align-items: center;
}

/* ── Playlist detail hero ── */

.game-hero--detail {
  min-height: 0 !important;
  padding-bottom: var(--s-8) !important;
  padding-inline: max(var(--ui-gutter), calc((100% - var(--ui-max)) / 2 + var(--ui-gutter))) !important;
}

.game-hero--detail .relative.mx-auto > a.inline-flex {
  padding: var(--s-8) 0 var(--s-3) !important;
  display: inline-flex;
  align-items: center;
}

.game-hero--detail .game-hero-bg {
  width: min(56vw, 220px) !important;
  margin: 0 !important;
  border-radius: var(--ui-radius-sm) !important;
}

.game-hero--detail .mt-5.flex {
  margin: var(--s-6) 0 0 !important;
  gap: var(--stack-lg) !important;
}

.game-hero--detail h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  margin: var(--s-3) 0 var(--s-2) !important;
}

.game-hero--detail .mt-5.flex > div:first-child p {
  margin-top: var(--s-2) !important;
}

.game-hero--detail .mt-5.flex > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.game-hero--detail .ui-tags {
  margin-top: var(--s-3) !important;
  gap: var(--s-2) !important;
}

@media (min-width: 768px) {
  .game-hero--detail {
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: var(--stack-xl);
    row-gap: 0;
    align-items: end !important;
    padding-bottom: var(--s-10) !important;
  }

  .game-hero--detail .game-hero-bg {
    width: 220px !important;
  }

  .game-hero--detail .mt-5.flex {
    margin: 0 0 var(--s-2) !important;
  }
}

/* Player block under hero */
.pb-16 > .mx-auto.max-w-6xl {
  padding-top: var(--stack-lg) !important;
  padding-bottom: var(--page-section-y) !important;
}

/* ── Buttons (unified heights) ── */

.btn-primary,
.btn-secondary,
.btn-primary--sm {
  min-height: var(--btn-h) !important;
  padding-inline: var(--s-6) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--s-2) !important;
  line-height: 1 !important;
}

.btn-primary--sm {
  min-height: 2.25rem !important;
  padding-inline: var(--s-4) !important;
  font-size: var(--type-meta) !important;
}

.btn-primary:hover,
.btn-secondary:hover,
.action-chip:hover {
  transform: translateY(-1px);
}

.game-hero--detail .action-chip:first-of-type {
  min-height: var(--btn-h) !important;
  padding-inline: var(--s-6) !important;
  order: -1;
}

.action-chip {
  min-height: 2.5rem !important;
  padding: var(--s-2) var(--s-5) !important;
}

.ui-icon-btn {
  width: var(--btn-h);
  height: var(--btn-h);
  flex-shrink: 0;
}

.site-header .btn-primary {
  min-height: 2.5rem !important;
  padding-inline: var(--s-5) !important;
}

/* ── Header / footer alignment ── */

.site-header > div {
  padding-block: var(--s-3) !important;
}

footer.border-t {
  margin-top: var(--page-section-y);
}

footer.border-t > div {
  padding-block: var(--s-10) !important;
}

/* ── How-to & admin ── */

.page-hero + section .grid.gap-5 {
  gap: var(--grid-gap) !important;
}

.page-hero + section .grid > .flow-card h2 {
  margin-top: var(--stack-md) !important;
}

section.mx-auto.max-w-2xl {
  padding: var(--s-8) var(--ui-gutter) !important;
}

header.border-b:has(a[href="/admin"]) > div {
  max-width: var(--ui-max);
  margin-inline: auto;
  padding-inline: var(--ui-gutter);
}

.min-h-screen.pb-16 > .mx-auto.max-w-6xl,
.min-h-screen.pb-16 > div.mx-auto {
  padding-inline: var(--ui-gutter) !important;
}

/* ── Modals ── */

.modal-header {
  padding: var(--s-5) var(--s-6) !important;
}

.modal-body {
  padding: var(--s-6) !important;
}

.modal-header h2 {
  font-size: var(--type-section) !important;
  line-height: var(--leading-title);
}

/* ── Subtle motion (less bounce) ── */

.btn-primary:hover {
  transform: translateY(-1px) !important;
}

main.flex-1 {
  animation: ui-page-in 0.35s var(--ui-ease) both;
}

/* ── Mobile balance ── */

@media (max-width: 767px) {
  :root {
    --page-section-y: var(--s-10);
  }

  .relative.flex.min-h-\[88vh\] .relative.mx-auto {
    padding-top: var(--s-10) !important;
    padding-bottom: var(--s-8) !important;
  }

  .game-hero--detail {
    padding-inline: var(--ui-gutter) !important;
  }

  .game-hero--detail .game-hero-bg {
    width: min(72vw, 220px) !important;
    margin-inline: auto !important;
  }

  .game-hero--detail .mt-5.flex {
    align-items: stretch !important;
  }

  .game-hero--detail .mt-5.flex > div:last-child {
    width: 100%;
  }

  .game-hero--detail .action-chip {
    flex: 1 1 auto;
    justify-content: center;
  }

  .stagger-children,
  .grid.gap-4.sm\:grid-cols-2.lg\:grid-cols-4,
  .grid.gap-4.sm\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  section .mb-8.flex {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Site nav alignment ── */

.site-header nav {
  gap: var(--s-2) !important;
}

.site-header a:not(.btn-primary) {
  padding: var(--s-2) var(--s-3) !important;
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
}

/* ── Playlist row headers ── */

section .mb-8.flex h2,
section .mb-8 h2 {
  letter-spacing: -0.02em;
}

section .mb-8.flex .btn-secondary,
section .mb-8.flex a.btn-secondary {
  flex-shrink: 0;
}

/* ── Empty & loading states ── */

.empty-state {
  padding: var(--s-10) var(--s-6) !important;
  text-align: center;
}

.empty-state h2,
.empty-state h3 {
  margin: var(--s-3) 0 var(--s-2) !important;
}

.ui-skeleton-wrap {
  padding-block: var(--s-4) var(--page-section-y-sm) !important;
}

.ui-skeleton-grid {
  gap: var(--grid-gap) !important;
}

/* ── Footer text rhythm ── */

footer.border-t p,
footer.border-t a {
  line-height: var(--leading-body);
}

footer.border-t .flex.flex-wrap {
  gap: var(--s-4) var(--s-6) !important;
}

/* ── Admin tables ── */

.min-h-screen.pb-16 table {
  width: 100%;
}

.min-h-screen.pb-16 th,
.min-h-screen.pb-16 td {
  padding: var(--s-3) var(--s-4) !important;
  vertical-align: middle;
}

/* ── Prevent horizontal overflow ── */

main.flex-1,
#root {
  overflow-x: clip;
}

img,
.playlist-card-art,
.game-hero-bg {
  max-width: 100%;
}