@scope (col-ui) {
  :where(:scope) {
    --col-gap:     var(--a-gap-self, var(--a-gap));
    --col-justify: flex-start;
    --col-align:   stretch;
  }

  :scope {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--col-gap);
    justify-content: var(--col-justify);
    align-items: var(--col-align);
    /* Universal [padding] / [margin] opt-in — see tokens.css for scale. */
    padding: var(--a-padding, 0);
    margin: var(--a-margin, 0);
    /* Neutralize legacy UA rule that maps HTML `align=` attr to `text-align`.
       Our [align="center"] sets flex cross-axis alignment, not text alignment. */
    text-align: inherit;
  }

  /* Justify */
  :scope[justify="start"]         { --col-justify: flex-start; }
  :scope[justify="center"]        { --col-justify: center; }
  :scope[justify="end"]           { --col-justify: flex-end; }
  :scope[justify="space-between"] { --col-justify: space-between; }
  :scope[justify="space-around"]  { --col-justify: space-around; }

  /* Align */
  :scope[align="start"]   { --col-align: flex-start; text-align: start; }
  :scope[align="center"]  { --col-align: center; text-align: center; }
  :scope[align="end"]     { --col-align: flex-end; text-align: end; }
  :scope[align="stretch"] { --col-align: stretch; }

  /* Grow — fills remaining space in a flex parent. Used inside row-ui
     to push trailing content (amounts, badges) to the far edge. */
  :scope[grow] { flex: 1; min-width: 0; }
}
