/* SNS canonical stylesheet 5/5 — UTILITIES. Atomic composition helpers, loads
   LAST so a utility intentionally wins over a component. Use these to compose
   pages out of canonical components instead of writing per-page CSS.
   DESIGN_SYSTEM_RESET_2026-05-31 §D. */
@layer utilities {
  .u-stack   { display: flex; flex-direction: column; gap: var(--space-fluid-sm, .75rem); }
  .u-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-fluid-sm, .75rem); }
  .u-center  { text-align: center; }
  .u-mt-lg   { margin-top: var(--space-fluid-lg, 2rem); }
  .u-fill    { width: 100%; }
  .u-hidden  { display: none !important; }
  @media (max-width: 880px) { .u-hide-mobile { display: none !important; } }

  /* Wide-monitor content centering (DESIGN_SYSTEM_RESET §B fix, proof).
     The content column caps at --content-max and CENTERS in the track left by the
     sidebar, so wide screens get balanced gutters (graphic-designer fill) instead of
     a left-anchored block with a lopsided right gap. In full rollout this lives in
     @layer base alongside the grid; here in utilities for the single-page proof. */
  .app > .content, .app .content { justify-self: center; }
}