@scope (row-ui) {
  :where(:scope) {
    /* Gap resolves explicit-then-ambient: `[gap="N"]` sets the
       non-inheriting `--a-gap-self`; `[size]`/`:root` set the inheriting
       ambient `--a-gap` (base `--a-gap-md`). Reading
       `var(--a-gap-self, var(--a-gap))` picks up `<row-ui gap="…">` on
       this element, else falls through to the inherited ambient. */
    --row-gap:     var(--a-gap-self, var(--a-gap));
    --row-justify: flex-start;
    --row-align:   center;
    --row-drag-bg-active: var(--a-accent-muted);
  }

  :scope {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: var(--row-gap);
    justify-content: var(--row-justify);
    align-items: var(--row-align);
    /* Universal [padding] / [margin] opt-in — see tokens.css for scale. */
    padding: var(--a-padding, 0);
    margin: var(--a-margin, 0);
    text-align: inherit;
  }

  /* ── Draggable ── */
  :scope[draggable] {
    cursor: grab;
    user-select: none;
  }

  :scope[draggable]:active,
  :scope[draggable][data-draggable-dragging] {
    cursor: grabbing;
    background: var(--row-drag-bg-active);
  }

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

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

  /* Wrap */
  :scope[wrap] { flex-wrap: wrap; }

  /* Grow */
  :scope[grow] { flex: 1; min-width: 0; }
}
