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

    /* ── Spacing ── */
    --stat-column-gap:   var(--a-gap-self, var(--a-gap));
    --stat-row-gap:      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);
    row-gap: var(--stat-row-gap);
    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 sits in the value row and
     ends at the value's baseline — hero number and chart read as one
     visual unit, the chart "resting on" the value text. */
  :scope:has([slot="chart"]) {
    grid-template-columns: minmax(0, 1fr) minmax(5rem, 40%);
    grid-template-areas:
      "label  icon"
      "value  chart"
      "change .";
    align-items: end;
  }

  /* Chart cell — bottom-aligned to the value row's baseline; aspect
     ratio 4:3 (width:height) keeps it readable as a small inline chart
     rather than a thin sparkline rail. Consumers override via
     --stat-chart-aspect. */
  [slot="chart"] {
    grid-area: chart;
    align-self: end;
    min-width: 0;
    width: 100%;
    aspect-ratio: var(--stat-chart-aspect, 4 / 3);
  }
  chart-ui[slot="chart"] {
    height: 100%;
  }

  /* When chart is present, value must NOT span into the chart column
     (its default `grid-column: 1 / -1` would overlap the chart cell and
     misalign both). Confine it to col 1. */
  :scope:has([slot="chart"]) [slot="value"] {
    grid-column: 1;
  }

  /* ── Horizontal-bleed KPI tile ──
     value / label / change stack on the LEFT; the chart fills the RIGHT
     column at full height and bleeds to the card's top / right / bottom
     edges (cancels the card-section inset via negative margins keyed to
     the inherited --card-inset). The compact `slot="chart"` reflow above
     keeps the chart resting on the value baseline; this opt-in spreads it
     into a full-height trajectory panel. Compose inside a card section:
       <card-ui><section>
         <stat-ui bleed value=… label=… change=… trend=…>
           <chart-ui slot="chart" type="area" …></chart-ui>
         </stat-ui>
       </section></card-ui>  */
  :scope[bleed]:has([slot="chart"]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--stat-bleed-col, 46%));
    grid-template-areas:
      "label  chart"
      "value  chart"
      "change chart";
    align-items: start;
  }
  :scope[bleed] [slot="value"],
  :scope[bleed] [slot="change"] {
    grid-column: 1;
  }
  /* Icon shares the label row, pinned to the text column's inner edge. */
  :scope[bleed] [slot="label"] {
    padding-inline-end: var(--a-space-5);
  }
  :scope[bleed] [slot="icon"] {
    grid-area: label;
    justify-self: end;
    align-self: start;
  }
  :scope[bleed] [slot="chart"] {
    grid-area: chart;
    /* VERTICAL bleed via stretch: a stretched grid item's height is
       `track − margins`, so a negative margin-block overflows the track by
       that amount top + bottom. `height:auto` overrides the base
       chart-ui[slot="chart"]{height:100%} so the stretch governs. */
    align-self: stretch;
    height: auto;
    margin-block: calc(-1 * var(--card-inset, 0px));
    /* HORIZONTAL bleed via explicit width: chart-ui pins its own
       `width:100%` (chart.css), which beats justify-self:stretch and would
       freeze the box to the track — so a negative margin-inline-end can't
       widen it. Instead size the box to `track + inset` and left-anchor it,
       so the right edge overflows to the card edge while the left keeps the
       column gap. The percentage resolves against the grid track. */
    justify-self: start;
    width: calc(100% + var(--card-inset, 0px));
    min-width: 0;
    /* override the inline-chart 4:3 — fill the row span instead */
    aspect-ratio: auto;
  }

  /* ── Label (eyebrow) ── */
  [slot="label"] {
    grid-area: label;
    font-size: var(--stat-label-size);
    color: var(--stat-label-fg);
    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);
    line-height: 1;
    justify-self: start;
  }

  /* ── Value ── */
  [slot="value"] {
    grid-column: 1 / -1;
    font-size: var(--stat-value-size);
    font-weight: var(--stat-value-weight);
    color: var(--stat-value-fg);
    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);
  }
  :scope[trend="up"] [slot="change"] {
    color: var(--stat-up-fg);
  }

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

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

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

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