/*
 * Layout primitives (#16). Container-query based (AGENTS.md rule 4: "a
 * component adapts to the space it's given, not the screen size, since
 * this is a modular canvas, not a single-purpose page") — no @media
 * breakpoints in here.
 *
 * .av-container: establishes a containment context. Wrap anything that
 * needs to respond to its own box size, not the viewport.
 * .av-stack: vertical flow with token-driven, consistent gaps.
 * .av-cluster: horizontal, wraps, token-driven gaps — for menu items,
 * action rows, etc.
 */

.av-container {
  container-type: inline-size;
  container-name: av-container;
}

.av-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.av-stack--tight {
  gap: var(--spacing-2);
}

.av-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
}

/* Example narrow/wide behavior driven by the container's own size, not
   the viewport — components built on .av-container can add their own
   @container rules the same way. */
@container av-container (min-width: 480px) {
  .av-cluster {
    gap: var(--spacing-4);
  }
}