/* Per-item override: sets the gap above ONE item, replacing the stack's
   spacing. Registered with no initial value, so var() falls back when it is
   not set, and with inherits: false, so setting it on one item never reaches
   that item's own children. Use it to give a nested stack its own top gap
   without touching its inner spacing. In a browser without @property
   (Firefox < 128, Safari < 16.4) it is an ordinary inherited custom property,
   so a value set on an item also reaches that item's nested stacks. */
@property --stack-space-before {
  syntax: "*";
  inherits: false;
}

.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Every Layout's rule: --stack-space set on the stack spaces its items, and
   set on one item, sets the gap above that item. The first item has no gap.
   --stack-space inherits: set on a nested stack, it also sets that stack's
   inner spacing and its descendants'. To set only the gap above an item, use
   --stack-space-before. */
.stack > * + * {
  margin-block-start: var(--stack-space-before, var(--stack-space, var(--space-s-md)));
}

/* :where() keeps this at (0,1,0) so height utilities and block classes, which
   load after compositions, still win. */
.stack:where(:only-child) {
  block-size: 100%;
}