/**
 * Shared Page Containers
 * Consistent container styling across all pages
 */

/* ============================================================
   PAGE CONTAINER
   Default container for form-style pages (720px max-width)
   ============================================================ */

.page-container {
  /* Explicit width matters: main is display:flex, and the auto margins
     switch a flex item to fit-content sizing - wide content (PN22 templates
     matrix) then blows the container past the mobile viewport (#558). */
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

/* ============================================================
   CONTAINER VARIANTS
   ============================================================ */

/* Wider container for dashboards/lists (800px) */
.page-container--wide {
  max-width: 800px;
}

/* Extra wide for complex layouts (1200px) */
.page-container--xl {
  max-width: 1200px;
}

/* Narrow container for auth pages (440px) */
.page-container--narrow {
  max-width: 440px;
}

/* Full viewport width for workspace layouts */
.page-container--fullscreen {
  max-width: 100%;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
  .page-container {
    padding: var(--space-4) var(--space-3);
  }
}