@scope (row-ui) {
  :where(:scope) {
    /* `--a-gap` defaults to `--a-gap-md` at :root in tokens.css; the
       universal `[gap="N"]` rules override it on the element, so reading
       `--a-gap` here picks up `<row-ui gap="…">` automatically. */
    --row-gap-default:     var(--a-gap);
    --row-justify-default: flex-start;
    --row-align-default:   center;
    --row-drag-bg-active-default: var(--a-accent-muted);
  }

  :scope {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: var(--row-gap, var(--row-gap-default));
    justify-content: var(--row-justify, var(--row-justify-default));
    align-items: var(--row-align, var(--row-align-default));
    /* 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, var(--row-drag-bg-active-default));
  }

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

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

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

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