@scope (stat-ui) {
  :where(:scope) {
    /* ── Tokens ──
       Use size-responsive tokens so stat shrinks when parent card has size="sm". */
    --stat-value-size-default:   var(--a-title-size);
    --stat-value-weight-default: var(--a-weight-bold);
    --stat-value-fg-default:     var(--a-fg-strong);
    --stat-label-size-default:   var(--a-ui-size);
    --stat-label-fg-default:     var(--a-fg);
    --stat-change-size-default:  var(--a-ui-size);
    --stat-up-fg-default:        var(--a-success-bg);
    --stat-down-fg-default:      var(--a-danger-bg);
    --stat-icon-fg-default:      var(--a-fg-muted);

    /* ── Spacing ── */
    --stat-column-gap-default:   var(--a-gap);
    --stat-row-gap-default:      var(--a-gap-sm);
    text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
}

  :scope {
    /* ── Base ──
       Layout:
         label   icon     ← eyebrow row (icon decorative, auto-width)
         value            ← full-width hero number
         change           ← trend delta, full width */
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label  icon"
      "value  value"
      "change change";
    column-gap: var(--stat-column-gap, var(--stat-column-gap-default));
    row-gap: var(--stat-row-gap, var(--stat-row-gap-default));
    align-items: baseline;
  }

  /* ── Chart slot (inline sparkline) ──
     When an author adds <chart-ui slot="chart"> (or any sparkline-shape
     child), the grid reflows so the chart occupies the right column
     across the value + change rows, fixed to the stat's right edge.
     Hero number and chart read as a single visual unit. */
  :scope:has([slot="chart"]) {
    grid-template-columns: minmax(0, 1fr) minmax(5rem, 40%);
    grid-template-areas:
      "label  icon"
      "value  chart"
      "change chart";
    align-items: end;
  }

  /* Cap the chart slot at a sparkline-appropriate size — otherwise the
     chart's default aspect ratio stretches the row heights and bloats
     the whole card. Consumers who want a taller inline chart can
     override --stat-chart-max-height on the host. Uses `chart-ui[slot]`
     compound selector to beat chart-ui's own `:scope { max-height: 28rem }`
     (specificity 0,1,1 beats 0,0,1). `[slot="chart"]` alone is (0,1,0)
     — enough on paper but empirically losing to chart-ui's own scope in
     practice; the type selector makes it explicit. */
  [slot="chart"] {
    grid-area: chart;
    align-self: center;
    min-width: 0;
    width: 100%;
  }
  chart-ui[slot="chart"] {
    max-height: var(--stat-chart-max-height, 3rem);
  }

  /* ── Label (eyebrow) ── */
  [slot="label"] {
    grid-area: label;
    font-size: var(--stat-label-size, var(--stat-label-size-default));
    color: var(--stat-label-fg, var(--stat-label-fg-default));
    line-height: 1.4;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── Change delta (under value) ── */
  [slot="change"] {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    font-size: var(--stat-change-size, var(--stat-change-size-default));
    line-height: 1;
    justify-self: start;
  }

  /* ── Value ── */
  [slot="value"] {
    grid-column: 1 / -1;
    font-size: var(--stat-value-size, var(--stat-value-size-default));
    font-weight: var(--stat-value-weight, var(--stat-value-weight-default));
    color: var(--stat-value-fg, var(--stat-value-fg-default));
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Trend arrows via ::before */
  :scope[trend="up"] [slot="change"]::before {
    content: "\25B2";
    color: var(--stat-up-fg, var(--stat-up-fg-default));
  }
  :scope[trend="up"] [slot="change"] {
    color: var(--stat-up-fg, var(--stat-up-fg-default));
  }

  :scope[trend="down"] [slot="change"]::before {
    content: "\25BC";
    color: var(--stat-down-fg, var(--stat-down-fg-default));
  }
  :scope[trend="down"] [slot="change"] {
    color: var(--stat-down-fg, var(--stat-down-fg-default));
  }

  :scope[trend="neutral"] [slot="change"] {
    color: var(--stat-label-fg, var(--stat-label-fg-default));
  }

  /* ── Icon ── */
  [slot="icon"] {
    grid-area: icon;
    align-self: start;
    color: var(--stat-icon-fg, var(--stat-icon-fg-default));
    --a-icon-size: 1.25rem;
  }

  [slot="icon"][hidden] { display: none; }
}
