/* ==========================================================================
   Single-purpose utility classes.

   These exist because the Content-Security-Policy has no `unsafe-inline`, which
   blocks `style="…"` attributes as well as <style> blocks — silently, with no
   error in the console. Anything that would otherwise be a one-off inline style
   needs a class here.

   MUST BE THE LAST STYLESHEET IN THE LAYOUT. A utility and a component class
   have the same specificity (one class each), so source order decides which
   wins. Loaded any earlier, `.u-on-dark-muted` would lose to `.lead` in
   layout.css and the override would fail without any visible reason.

   Keep this list short. A third variant of the same idea belongs in the
   component it keeps appearing in.
   ========================================================================== */

.u-center { text-align: center; }
.u-center-x { justify-content: center; }

.u-mt-4 { margin-top: var(--space-4); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mt-8 { margin-top: var(--space-8); }
.u-mt-10 { margin-top: var(--space-10); }
.u-mt-12 { margin-top: var(--space-12); }
.u-mb-10 { margin-bottom: var(--space-10); }

/* Body text on the dark band, where --color-ink-soft has no contrast at all. */
.u-on-dark-muted { color: rgb(250 246 240 / 0.85); }

.u-fine-print {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}