@scope (chart-legend-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --chart-legend-gap:         var(--a-space-2);
    --chart-legend-row-gap:     var(--a-space-1);
    --chart-legend-py:          var(--a-space-1);
    --chart-legend-px:          0;

    /* ── Swatch ── */
    --chart-legend-swatch-size: var(--a-space-2-5);
    --chart-legend-line-w:      2px;

    /* ── Typography ── */
    --chart-legend-font-size:   var(--a-ui-tiny);
    --chart-legend-fg:          var(--a-fg-subtle);
    --chart-legend-fg-inactive: var(--a-fg-muted);

    /* ── Interaction ── */
    --chart-legend-row-radius:  var(--a-radius-sm);
    --chart-legend-row-hover:   var(--a-canvas-2);
    --chart-legend-row-fg-hover: var(--a-fg);

    /* ── Focus ── */
    --chart-legend-focus-ring:  var(--a-focus-ring);
  }

  :scope {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: var(--chart-legend-gap);
    padding: var(--chart-legend-py) var(--chart-legend-px);
    font-size: var(--chart-legend-font-size);
    color: var(--chart-legend-fg);
  }

  /* Position variants — drive flex-direction. DOM placement still wins for
     actual layout; these tune the internal row direction. */
  :scope[position="top"],
  :scope[position="bottom"] {
    flex-direction: row;
    justify-content: center;
  }

  :scope[position="left"],
  :scope[position="right"] {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Rows are <badge-ui> chips. We override badge-ui's default tokens
     to give them a quieter, click-to-toggle appearance — transparent
     bg by default (so they read as inline text not chips), highlighted
     on hover when interactive. The pill chrome (radius, padding,
     font-size, line-height) comes from badge-ui itself. */
  badge-ui[data-row] {
    --badge-bg: transparent;
    --badge-fg: var(--chart-legend-fg);
    --badge-radius: var(--chart-legend-row-radius);
    --badge-px: var(--a-space-1);
    --badge-py: var(--chart-legend-py);
    --badge-gap: var(--chart-legend-row-gap);
    --badge-font-size: var(--chart-legend-font-size);
    cursor: pointer;
    transition: background var(--a-duration-fast) var(--a-easing),
                color var(--a-duration-fast) var(--a-easing);
  }

  /* Static rows — no interaction */
  :scope[static] badge-ui[data-row] {
    cursor: default;
  }

  badge-ui[data-row][role="button"]:hover {
    --badge-bg: var(--chart-legend-row-hover);
    --badge-fg: var(--chart-legend-row-fg-hover);
  }

  badge-ui[data-row][role="button"]:focus-visible {
    outline: none;
    box-shadow: var(--chart-legend-focus-ring);
  }

  /* Inactive (toggled-off) rows — dim the swatch + fade label. Drives
     badge-ui's --badge-fg so the label fades alongside the swatch. */
  badge-ui[data-row]:not([data-active]) {
    --badge-fg: var(--chart-legend-fg-inactive);
  }
  badge-ui[data-row]:not([data-active]) swatch-ui {
    opacity: 0.4;
  }

  /* Swatch is composed via <swatch-ui shape="…">; per-shape styling
     lives in swatch.css. The legend just hands its [shape] attr through
     and writes --swatch-color inline. Pre-2026-05-01 this file owned a
     `<span data-swatch>` element + dot/square/line/dashed CSS rules,
     which collided with the docs-shell's `[data-swatch]` token-demo
     rule (cascade leak). Composing the primitive moves the styling to
     one place. */
}
