@scope (inline-message-ui) {
  :where(:scope) {
    /* ── Colors ──
       Default is muted hint copy (no fill behind, so use the on-canvas
       `--a-fg-muted`). Severity variants drop in `--a-{family}-text`
       (light-dark(20-shade, 20-tint)) — the on-canvas text family, not
       `--a-{family}-fg` (which is on-fill / on-strong-bg). */
    --inline-message-fg:        var(--a-fg-muted);
    --inline-message-icon-fg:   currentColor;

    /* ── Layout ── */
    --inline-message-gap:       var(--a-space-1);
    --inline-message-icon-size: var(--a-ui-sm);

    /* ── Typography ── */
    --inline-message-font-size: var(--a-ui-sm);
    --inline-message-line-height: var(--a-leading-snug);
  }

  :scope {
    /* ── Base ──
       inline-flex so the message reads as a single inline-flow annotation
       (icon + text on one row), with baseline alignment so the icon optically
       sits on the text baseline. No background, no border, no padding box —
       SPEC-033 §3 principle 1: in-flow not surface-bearing.  */
    box-sizing: border-box;
    display: inline-flex;
    align-items: baseline;
    gap: var(--inline-message-gap);
    color: var(--inline-message-fg);
    font-size: var(--inline-message-font-size);
    line-height: var(--inline-message-line-height);
  }

  /* ── Leading icon ──
     `align-self: center` so the icon optically centers against the first
     text line (baseline alignment on the parent would otherwise drop the
     icon below the text baseline). The icon inherits foreground via
     `color: currentColor` so it tracks the variant's color shift without
     a second token wiring.

     `order: -1` is the visual-lead anchor: `ensure()` always appends the
     stamped leading slot AFTER the body text-span (because #syncBodyText
     runs first in render()), so DOM order is [text, icon]. The flex
     `order` flips visual order back to [icon, text] without requiring
     us to splice nodes ahead of consumer-provided body content. Same
     pattern used by alert.css. */
  :scope [slot="leading"] {
    flex-shrink: 0;
    align-self: center;
    color: var(--inline-message-icon-fg);
    --a-icon-size: var(--inline-message-icon-size);
    order: -1;
  }

  /* ── Variants ──
     Token-only: severity changes foreground color (matched icon comes from
     the variant's default in inline-message.class.js). No padding / display / layout
     changes — these are variants, not modes (per css-patterns.md). */
  :scope[variant="info"] {
    --inline-message-fg: var(--a-info-text);
  }

  :scope[variant="success"] {
    --inline-message-fg: var(--a-success-text);
  }

  :scope[variant="warning"] {
    --inline-message-fg: var(--a-warning-text);
  }

  :scope[variant="danger"] {
    --inline-message-fg: var(--a-danger-text);
  }
}
