/* =========================================================================
   layout.css — page shell and structural layout (.wrap, .narrow, .stack,
   .row, .page-head), plus every media query that governs THIS file's own
   selectors.

   LOAD ORDER: after tokens.css, base.css; before components.css, header.css,
   pages.css, legacy.css. components.css's `[hidden] { display: none
   !important; }` and its `.row > select/input/button` width overrides both
   assume `.row { display: flex }` (defined below) has already been declared
   — load this file first so those later, more specific / !important rules
   are the ones that win. The Responsive section at the bottom of this file
   deliberately contains ONLY the layout-owned selectors from each shared
   breakpoint — the header/pages-owned rules that used to share the same
   @media block live in header.css's and pages.css's own Responsive
   sections instead, each placed after that file's own base rule so the
   override always wins there too.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------- */
.wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-8) var(--space-16);
}
.narrow {
  max-width: 420px;
  margin: var(--space-12) auto;
  padding: 0 var(--space-4);
}
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.row--end { align-items: flex-end; }
.row > .field { flex: 1 1 220px; }

/* -------------------------------------------------------------------------
   Page head
   ------------------------------------------------------------------------- */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.page-head h1 { margin: 0 0 var(--space-1); }
.page-head .desc { color: var(--text-muted); margin: 0; max-width: 60ch; }
.page-head__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

/* generic "sub" / "desc" text used stand-alone (legacy + descriptions in
   permit rows) — kept distinct from .page-head .desc above. NOTE: the
   legacy `.sub` alias itself now lives in legacy.css (back-compat aliases
   are isolated there); `.desc` and `.muted` below are still current and
   stay here next to `.page-head`, matching their original grouping. */
.desc { color: var(--text-muted); max-width: 320px; }
.muted { color: var(--text-muted); font-size: var(--text-sm); }

/* =========================================================================
   Responsive — mobile-first. Breakpoints at 560 / 720 / 960.
   Only .wrap / .narrow / .page-head live here; the .age-num/.facts and
   .app-header/.admin-grid rules that originally shared these same @media
   blocks now live in pages.css's and header.css's own Responsive sections.
   ========================================================================= */
@media (min-width: 560px) {
  /* enough width that the .narrow login card no longer needs edge padding
     to keep it off the viewport edge */
  .narrow { padding: 0; }
}

@media (min-width: 720px) {
  .wrap { padding-left: var(--space-8); padding-right: var(--space-8); }
}

/* below 720px: tighter shell, collapsed/wrapped header nav, single-column
   facts/admin grid — written mobile-first above, this block only pulls
   back space that assumes a wide viewport */
@media (max-width: 719.98px) {
  .wrap { padding: var(--space-4) var(--space-4) var(--space-10); }
  .narrow { margin: var(--space-8) auto; }
  .page-head { flex-direction: column; align-items: stretch; }
}