@scope (description-list-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --description-list-gap-row:        var(--a-space-2);
    --description-list-gap-column:     var(--a-space-3);
    --description-list-term-min-width: 8rem;

    /* ── Typography ── */
    --description-list-term-font-size: var(--a-ui-sm);
    --description-list-term-weight:    var(--a-weight-medium);
    --description-list-desc-font-size: var(--a-ui-sm);
    --description-list-desc-weight:    var(--a-weight-normal);

    /* ── Colors ── */
    --description-list-term-fg:        var(--a-fg-muted);
    --description-list-desc-fg:        var(--a-fg);
  }

  :scope {
    /* ── Base ── stacked layout (term above desc, single column). */
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--description-list-gap-row) var(--description-list-gap-column);
    margin: 0;
    padding: 0;
  }

  [data-dl-term],
  dt {
    margin: 0;
    font-size: var(--description-list-term-font-size);
    font-weight: var(--description-list-term-weight);
    color: var(--description-list-term-fg);
    line-height: 1.3;
  }

  [data-dl-desc],
  dd {
    margin: 0;
    font-size: var(--description-list-desc-font-size);
    font-weight: var(--description-list-desc-weight);
    color: var(--description-list-desc-fg);
    line-height: 1.4;
  }

  /* Pair separator: extra margin under each non-last dd so DD→DT (between
     pairs) reads as a wider gap than DT→DD (within a pair). Match anything
     that isn't `[layout="inline"]` so the default case (no attribute set —
     `layout` defaults to "stacked" but only reflects when explicitly set)
     and the explicit `[layout="stacked"]` both get the same rhythm. */
  :scope:not([layout="inline"]) [data-dl-desc]:not(:last-child),
  :scope:not([layout="inline"]) dd:not(:last-child) {
    margin-bottom: var(--description-list-gap-row);
  }

  /* Inline: term and desc on one row */
  :scope[layout="inline"] {
    grid-template-columns: minmax(var(--description-list-term-min-width), max-content) 1fr;
    align-items: baseline;
  }

  :scope[layout="inline"][align="between"] [data-dl-desc],
  :scope[layout="inline"][align="between"] dd {
    text-align: end;
  }

  /* §-TBD (v0.5.19, FB-51 #3): align="stretch" lets dd fill the
     remaining inline-grid track width. Useful when dd hosts a block-
     level form control (slider-ui / select-ui / color-picker-ui) that
     would otherwise shrink-wrap to content. width:100% on direct
     children reaches block controls that have their own inline-flex
     :scope rule (e.g. <slider-ui>) so they stretch to track width. */
  :scope[layout="inline"][align="stretch"] > [data-dl-desc],
  :scope[layout="inline"][align="stretch"] > dd {
    justify-self: stretch;
    width: 100%;
  }
  :scope[layout="inline"][align="stretch"] > [data-dl-desc] > *,
  :scope[layout="inline"][align="stretch"] > dd > * {
    width: 100%;
  }

  /* Size handled by the universal [size] attribute scaling --a-ui-size;
     components pick up font-size from token chain automatically. */
}
