/* Layout rules only: display, positioning, and spacing (padding, margin,
   gap). Colour, typography, and other skin/intrinsic properties stay in
   base.css/main.css - see doc/arch/service/wui.md's CSS strategy for the
   split. Loaded after base.css. */

@layer layout {

/* "Cluster": any container directly holding labels is a row of related
   controls that should line up on their centres and space out evenly,
   wrapping if needed - true for a radio group, a checkbox group, or
   anything else with this shape, not just this one example. Targets the
   structural pattern (a container of labels) rather than a class, same
   as the label/radio rule above. */
:is(.cluster):has(> label) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--std-margin);
}

/* "Stack": vertical counterpart to .cluster - any container whose children
   should be laid out in a column with equal spacing between them, wrapping
   if needed. Flex + gap rather than margin on the children themselves, so
   spacing is only ever between siblings, never doubled up or left on the
   outer edges. */
.stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--std-margin);
}

.stack > * {
  margin: 0;
}

}