@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;
  }
}

/* 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 {
  padding-top: 4rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: 1rem;
}

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