/*
  utilities.css — a small, closed set. Add to this list only when a need
  recurs three times across real pages; otherwise it belongs in components.css
  scoped to the component that needs it. See §V7.

  Loaded LAST so a utility wins over a component default of equal specificity
  (e.g. .u-gap-5 over .split__points' own gap).

  These exist primarily so no page needs an inline style= attribute: the CSP
  sets style-src 'self', which blocks inline style attributes outright (§VI-1).
*/

/* Layout */
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-inline-flex { display: inline-flex; }
.u-items-center { align-items: center; }
.u-justify-between { justify-content: space-between; }
.u-justify-center { justify-content: center; }
.u-flex-wrap { flex-wrap: wrap; }
.u-w-full { width: 100%; }
.u-mx-auto { margin-inline: auto; }

/* Gap */
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }
.u-gap-5 { gap: var(--space-5); }
.u-gap-8 { gap: var(--space-8); }

/* Margin — top */
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mt-7 { margin-top: var(--space-7); }
.u-mt-8 { margin-top: var(--space-8); }

/* Margin — bottom */
.u-mb-3 { margin-bottom: var(--space-3); }
.u-mb-6 { margin-bottom: var(--space-6); }
.u-mb-7 { margin-bottom: var(--space-7); }
.u-mb-8 { margin-bottom: var(--space-8); }

/* Text color — semantic tokens only */
.u-text-secondary { color: var(--color-text-secondary); }
.u-text-tertiary { color: var(--color-text-tertiary); }
.u-text-action { color: var(--color-action); }
.u-text-on-dark { color: var(--c-sand-100); }
.u-text-success { color: var(--color-success-text); }
.u-text-center { text-align: center; }

/* Measure — caps line length on prose that sits outside a <p> */
.u-measure-44 { max-width: 44ch; }
.u-measure-48 { max-width: 48ch; }
.u-measure-52 { max-width: 52ch; }
.u-measure-60 { max-width: 60ch; }
.u-prose { max-width: var(--container-prose); }

/* Responsive visibility */
.u-hide-mobile { display: none; }
@media (min-width: 768px) {
  .u-hide-mobile { display: revert; }
}
.u-hide-desktop {}
@media (min-width: 1024px) {
  .u-hide-desktop { display: none; }
}