/* layout.css — page-structure containers extracted from the former inline
   <style>. M62: rules kept in their original relative source order. */

@layer layout {

  /* M63: document-scroll model — the page scrolls naturally; .page-body is a
     plain centred wrapper and .main-content no longer scrolls on its own. */
  .page-body {
    max-inline-size:var(--page-max); width:100%; margin:0 auto;
  }

  /* M65: mobile-first form-strip layout */
  .form-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:var(--space-md);
  }
  .form-group { display:flex; flex-direction:column; gap:var(--space-2xs); min-inline-size:0; }
  .form-group--full { grid-column:1 / -1; }

  .dob-row, .time-row {
    display:flex; gap:var(--space-2xs); flex-wrap:wrap;
  }
  .dob-row > *, .time-row > * { flex:1 1 0; min-inline-size:0; }
  /* Selects keep their intrinsic width so the longest month name never clips;
     the year input absorbs the remaining space. Tighter inline padding keeps
     the three controls inside a 276px grid column. */
  .dob-row { flex-wrap:nowrap; }
  .dob-row > select { flex:1 0 auto; padding-inline-start:var(--space-xs); }
  .dob-row > input { flex:1 1 4.5rem; min-inline-size:4.5rem; padding-inline:var(--space-xs); }

  .location-row { display:flex; gap:10px; align-items:flex-end; margin-top:18px; }
  .location-row .form-group { flex:1; }
  .coords-row {
    display:grid; grid-template-columns:1fr; gap:var(--space-sm);
    margin-block-start:var(--space-sm);
  }

  @media (min-width:640px) {
    .form-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-lg); }
    .coords-row { grid-template-columns:1fr 1fr; }
  }

}