/* ==========================================================================
   utilities.css
   Spacing and layout helpers. Loaded last so a utility beats a component.

   Deliberately small. A utility exists here only where both mockups reached
   for the same ad-hoc override; anything a page needs more than twice belongs
   in components.css as a named block, not here as a stack of helpers.
   ========================================================================== */

/* ---------- measure ----------
   Both mockups repeatedly canceled the 66ch default on p inside a card,
   where the card is already the measure. This is that override, named. */
.measure-none{max-width:none}
.measure-wide{max-width:82ch}
.measure-tight{max-width:52ch}

/* ---------- vertical rhythm ----------
   A section that needs to sit tighter or looser than the 72px default. */
.pad-none{padding-top:0;padding-bottom:0}
.pad-tight{padding-top:var(--section-y-sm);padding-bottom:var(--section-y-sm)}
.pad-top-none{padding-top:0}
.pad-bottom-none{padding-bottom:0}

/* ---------- stack ----------
   Margin below a block, on the token scale. Use instead of a one-off
   margin-bottom in a page. */
.mb-0{margin-bottom:0}
.mb-2{margin-bottom:var(--sp-2)}
.mb-4{margin-bottom:var(--sp-4)}
.mb-5{margin-bottom:var(--sp-5)}
.mb-7{margin-bottom:var(--sp-7)}

/* ---------- background ----------
   Overrides the alternating band fill set on section in base.css. */
.bg-panel{background:var(--white)}
.bg-paper{background:var(--paper)}
.bg-navy{background:var(--navy);color:var(--white)}
.bg-navy h2,.bg-navy h3{color:var(--white)}
.bg-navy p{color:var(--on-navy)}

/* ---------- alignment ---------- */
.center{text-align:center}
.center p,.center .btns{margin-left:auto;margin-right:auto}
.center .btns{justify-content:center}

/* ---------- horizontal rule ----------
   The 96px blue hairline used under a display title on a navy band. */
.rule{width:96px;height:1px;background:var(--blue);margin:22px 0 20px}