/* ============================================
   <xm-stack> — 1-D flex layout (vertical default).

   The flex-stack primitive behind forms, sidebars, and action rows.
   Slotted children are flex items (the <slot> is layout-transparent).
   Gutter via gap="…" → --xm-gutter-* (the --s-N-aliased layout tier).

   BEM block `stack`; modifiers --vertical / --horizontal, --gap-*,
   --align-*, --justify-*. Registered in scripts/check-bem.sh
   STRICT_BLOCKS.
   ============================================ */

.stack {
  display: flex;
  gap: var(--xm-gutter-md);
  /* Inherited ink so currentColor in slotted content reads on the desk
     surface (AD-13) — also satisfies the --md-sys-* token gate. */
  color: var(--md-sys-color-on-surface);
}

.stack--vertical   { flex-direction: column; }
.stack--horizontal { flex-direction: row; flex-wrap: nowrap; }

:host([wrap]) .stack--horizontal { flex-wrap: wrap; }

.stack--gap-none { gap: var(--xm-gutter-none); }
.stack--gap-xs   { gap: var(--xm-gutter-xs); }
.stack--gap-sm   { gap: var(--xm-gutter-sm); }
.stack--gap-md   { gap: var(--xm-gutter-md); }
.stack--gap-lg   { gap: var(--xm-gutter-lg); }
.stack--gap-xl   { gap: var(--xm-gutter-xl); }

.stack--align-start   { align-items: flex-start; }
.stack--align-center  { align-items: center; }
.stack--align-end     { align-items: flex-end; }
.stack--align-stretch { align-items: stretch; }

.stack--justify-start   { justify-content: flex-start; }
.stack--justify-center  { justify-content: center; }
.stack--justify-end     { justify-content: flex-end; }
.stack--justify-between { justify-content: space-between; }