@layer layout {
  .stack > * + * {
    margin-top: var(--stack-space, var(--space-s));
  }
  /* Spacing steps by name. Margins, not --stack-space, so a nested stack keeps its own default. */
  .stack[data-space="2xs"] > * + * {
    margin-top: var(--space-2xs);
  }
  .stack[data-space="l"] > * + * {
    margin-top: var(--space-l);
  }
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-space, var(--space-xs));
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
    gap: var(--grid-space, var(--space-s));
  }
  /* Small cells (a dashboard's figure tiles): two columns even on a phone. */
  .grid[data-min="s"] {
    --grid-min: 9rem;
    --grid-space: var(--space-xs);
  }
  .center {
    max-width: var(--measure);
    margin-inline: auto;
  }
  /* Account forms are narrow; a lesson's slides need more room than prose. */
  .center[data-measure="narrow"] {
    max-width: var(--measure-narrow);
  }
  .center[data-measure="wide"] {
    max-width: var(--measure-wide);
  }
  /* A list laid out by a primitive is a layout, not a bulleted list. */
  :is(ul, ol):is(.stack, .cluster, .grid) {
    padding: 0;
    list-style: none;
  }
}