@scope (progress-row-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    /* Row-gap between the label/meta row and the bar. Bumped --a-space-1 →
       --a-space-2 so the bar isn't crammed under the label. (bug-42) */
    --progress-row-gap:           var(--a-space-2);
    --progress-row-column-gap:    var(--a-space-2);
    --progress-row-label-size:    var(--a-ui-size);
    --progress-row-label-fg:      var(--a-fg);
    --progress-row-meta-size:     var(--a-ui-sm);
    --progress-row-meta-fg:       var(--a-fg-muted);

    /* Fill color piped into nested progress-ui via its own token */
    --progress-row-fill-bg:       var(--a-accent-bg);
    text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
}

  :scope {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label meta"
      "bar   bar";
    column-gap: var(--progress-row-column-gap);
    row-gap: var(--progress-row-gap);
    align-items: baseline;
  }

  [slot="label"] {
    grid-area: label;
    font-size: var(--progress-row-label-size);
    color: var(--progress-row-label-fg);
    line-height: 1.4;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  [slot="meta"] {
    grid-area: meta;
    font-size: var(--progress-row-meta-size);
    color: var(--progress-row-meta-fg);
    font-variant-numeric: tabular-nums;
    justify-self: end;
    line-height: 1.4;
  }

  progress-ui {
    grid-area: bar;
    /* Pipe our component token into the nested progress component's token */
    --progress-fill-bg: var(--progress-row-fill-bg);
  }

  /* Variants — remap own tokens only; the nested progress inherits via --progress-row-fill-bg. */
  :scope[variant="success"] { --progress-row-fill-bg: var(--a-success-bg); }
  :scope[variant="warning"] { --progress-row-fill-bg: var(--a-warning-bg); }
  :scope[variant="danger"]  { --progress-row-fill-bg: var(--a-danger-bg); }
}
