/* Horizontal grouping with wrap — used for control rows,
   button banks, indicator clusters. */

.o-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.o-cluster--tight { gap: var(--space-2); }
.o-cluster--loose { gap: var(--space-5); }
.o-cluster--between { justify-content: space-between; }
.o-cluster--center  { justify-content: center; }
.o-cluster--end     { justify-content: flex-end; }
.o-cluster--start-baseline { align-items: baseline; }

/* Stack-on-mobile (a.k.a. o-switcher) — an intrinsic responsive primitive so
   authors stop hand-rolling page-level media queries to stack a label+control
   or cluster on a phone (the app topbar had to). Below --bp-sm the children go
   full-width in a single column; above it they sit in the normal inline row.
   Literal of --bp-sm == 30rem/480px (custom props can't ride a @media
   condition; see _typography.css breakpoint tokens). */
@media (max-width: 30rem) {
  .o-cluster--stack-on-mobile {
    flex-direction: column;
    align-items: stretch;
  }
  .o-cluster--stack-on-mobile > * {
    width: 100%;
  }
}