@layer modules {
/* layout.css — Page structure */

.page-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Only the layout-level .page-content gets the fixed-nav offset.
   Many view templates also use .page-content as a wrapper — those
   nested instances must NOT add extra padding. */
.page-body > .page-content {
  padding-top: 4rem; /* height of fixed nav */
  min-height: 100vh;
  flex: 1;
}

.page-main {
  max-width: 80rem;
  margin-inline: auto;
  padding: 2rem 1rem;
}

@media (min-width: 640px) {
  .page-main {
    padding: 2rem 1.5rem;
  }
}

@media (min-width: 1024px) {
  .page-main {
    padding: 2rem 2rem;
  }
}

/* Narrow variant — for detail/comparison pages that cap at 56rem */
.page-narrow {
  max-width: 56rem;
  margin-inline: auto;
}

/* Shared page header — consistent title + spacing across all top-level pages */
.page-header-section {
  margin-bottom: var(--space-8);
}

.page-header-section__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
}

.page-header-section__subtitle {
  font-size: var(--text-base);
  color: var(--color-ink-subtle);
  margin-top: var(--space-1);
}

/* Auth-specific layout */
.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-8);
  padding-inline: 1rem;
  background:
    radial-gradient(ellipse 60% 50% at 50% 35%,
      oklch(0.93 0.03 250 / 0.5) 0%,
      transparent 70%),
    var(--color-canvas);
}

[data-theme="dark"] .auth-page {
  background:
    radial-gradient(ellipse 60% 50% at 50% 35%,
      oklch(0.20 0.04 250 / 0.5) 0%,
      transparent 70%),
    var(--color-canvas);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth-page {
    background:
      radial-gradient(ellipse 60% 50% at 50% 35%,
        oklch(0.20 0.04 250 / 0.5) 0%,
        transparent 70%),
      var(--color-canvas);
  }
}

@media (min-width: 640px) {
  .auth-page {
    padding-inline: 1.5rem;
  }
}
}