/* ============================================================
   utilities.css — GoToM8 layout-primitives utility classes.
   ============================================================
   Pass D follow-up (BOLD Stellar Sweep 2026-05-08, MR for CC-309 Tier 1).

   Pixel-named (gap-N = N pixels), mapped to canonical --x-spacing-* tokens.
   Pure layout primitives — no visual side effects when applied to non-flex
   contexts. Designed to clear the highest-volume CC-309 violations
   (CSS classes used in markup but defined nowhere) without per-component
   visual regression risk.

   Why pixel-named (not Tailwind-level): GoToM8 markup uses gap-12 / gap-24
   in panel layouts (24px between two-column layout, etc.), values that don't
   exist in Tailwind's standard ramp. The histogram of class usage proves
   pixel-named intent: gap-4 (4px tight clusters) vs gap-16 (16px panel
   spacing) vs gap-24 (two-column spread).

   Tokens consumed (all defined in gotom8-theme.css):
     --x-spacing-0-5  =  2px
     --x-spacing-1    =  4px
     --x-spacing-1-5  =  6px
     --x-spacing-2    =  8px
     --x-spacing-3    = 12px
     --x-spacing-4    = 16px
     --x-spacing-6    = 24px

   Convention notes:
     • Stack containers default to flex's CSS-spec default align-items: stretch.
       Centering / start / end alignment is opt-in via .align-* modifiers.
     • Justify modifiers cover the four common cases.
     • Per-component .razor.css files retain priority via Blazor scoped CSS;
       these utilities provide the global default for un-styled flex layouts.
   ============================================================ */

/* Stack containers ---------------------------------------- */
.stack-vertical   { display: flex; flex-direction: column; }
.stack-horizontal { display: flex; flex-direction: row; }

/* Spacing — pixel-named to canonical token mapping --------- */
.gap-2  { gap: var(--x-spacing-0-5); }   /* 2px  */
.gap-4  { gap: var(--x-spacing-1); }     /* 4px  */
.gap-6  { gap: var(--x-spacing-1-5); }   /* 6px  */
.gap-8  { gap: var(--x-spacing-2); }     /* 8px  */
.gap-12 { gap: var(--x-spacing-3); }     /* 12px */
.gap-16 { gap: var(--x-spacing-4); }     /* 16px */
.gap-24 { gap: var(--x-spacing-6); }     /* 24px */

/* Justify modifiers --------------------------------------- */
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* Align modifiers (GoToM8 convention: align-* not items-*) - */
.align-start  { align-items: flex-start; }
.align-center { align-items: center; }
.align-end    { align-items: flex-end; }

/* Flex modifiers ------------------------------------------ */
.flex-wrap { flex-wrap: wrap; }
.flex-1    { flex: 1; }

/* UX Sweep M12 (P2-4): shared wizard-panel empty-state card.
   Extracted from 6 inline pixel-grade Style attributes across
   ProductOverview/FounderVoice/RtmPlan/DemandGen/LaunchPlan/AssetPanel.
   Background + dashed border consistent with the design-token palette. */
.wiz-empty-card {
    background-color: var(--x-color-muted);
    border: 1px dashed var(--x-color-border);
}