@scope (progress-row-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    --progress-row-gap-default:           var(--a-space-1);
    --progress-row-column-gap-default:    var(--a-space-2);
    --progress-row-label-size-default:    var(--a-ui-size);
    --progress-row-label-fg-default:      var(--a-fg);
    --progress-row-meta-size-default:     var(--a-ui-sm);
    --progress-row-meta-fg-default:       var(--a-fg-muted);

    /* Fill color piped into nested progress-ui via its own token */
    --progress-row-fill-bg-default:       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, var(--progress-row-column-gap-default));
    row-gap: var(--progress-row-gap, var(--progress-row-gap-default));
    align-items: baseline;
  }

  [slot="label"] {
    grid-area: label;
    font-size: var(--progress-row-label-size, var(--progress-row-label-size-default));
    color: var(--progress-row-label-fg, var(--progress-row-label-fg-default));
    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, var(--progress-row-meta-size-default));
    color: var(--progress-row-meta-fg, var(--progress-row-meta-fg-default));
    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, var(--progress-row-fill-bg-default));
  }

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