@scope (table-toolbar-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --table-toolbar-gap:           var(--a-space-3);
    --table-toolbar-py:            var(--a-space-2);
    --table-toolbar-px:            0;
    --table-toolbar-cluster-gap:   var(--a-space-2);

    /* ── Surface ── */
    --table-toolbar-bg:            transparent;
    --table-toolbar-border:        transparent;
    --table-toolbar-border-width:  0;
    --table-toolbar-radius:        var(--a-radius-lg);

    /* ── Title ── */
    --table-toolbar-title-fg:      var(--a-fg-strong);
    --table-toolbar-title-size:    var(--a-ui-lg);
    --table-toolbar-title-weight:  var(--a-weight-medium);
    --table-toolbar-title-gap:     var(--a-space-2);

    /* ── Search ── */
    --table-toolbar-search-min:    14rem;
    --table-toolbar-search-max:    22rem;

    /* Popover tokens removed — popover escapes to top layer and
       cannot inherit @scope tokens. Raw --a-* tokens are used
       directly in the unscoped popover rules below (see comment
       at the rules block). */
  }

  /* ═══════ Base ═══════ */

  :scope {
    box-sizing: border-box;
    display: block;
    color: var(--a-fg);
  }

  [data-toolbar] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--table-toolbar-gap);
    padding: var(--table-toolbar-py) var(--table-toolbar-px);
    background: var(--table-toolbar-bg);
    border: var(--table-toolbar-border-width) solid var(--table-toolbar-border);
    border-radius: var(--table-toolbar-radius);
    min-width: 0;
  }

  /* ═══════ Variant: card ═══════
     Variant only re-assigns surface tokens; base layout above consumes
     them unchanged. Matches contract §"Variants override TOKENS, never
     base styles". */

  :scope[variant="card"] {
    --table-toolbar-bg:           var(--a-bg);
    --table-toolbar-border:       var(--a-border-subtle);
    --table-toolbar-border-width: 1px;
    --table-toolbar-py:           var(--a-space-3);
    --table-toolbar-px:           var(--a-space-4);
  }

  /* ═══════ Title cluster ═══════ */

  [data-title] {
    display: inline-flex;
    align-items: center;
    gap: var(--table-toolbar-title-gap);
    flex: 0 0 auto;
    min-width: 0;
  }

  [data-heading] {
    font-size: var(--table-toolbar-title-size);
    font-weight: var(--table-toolbar-title-weight);
    color: var(--table-toolbar-title-fg);
    line-height: 1.2;
  }

  [data-count-badge][hidden] { display: none; }

  /* ═══════ Controls cluster ═══════ */

  [data-controls] {
    display: inline-flex;
    align-items: center;
    gap: var(--table-toolbar-cluster-gap);
    flex: 0 0 auto;
  }

  [data-toolbar-btn][hidden] { display: none; }

  /* ═══════ Search ═══════ */

  [data-search] {
    flex: 1 1 var(--table-toolbar-search-min);
    min-width: 0;
    max-width: var(--table-toolbar-search-max);
    margin-inline-start: auto;
  }

  [data-search][hidden] { display: none; }

  /* ═══════ Actions slot ═══════ */

  [data-actions] {
    display: inline-flex;
    align-items: center;
    gap: var(--table-toolbar-cluster-gap);
    flex: 0 0 auto;
  }

  [data-actions]:empty { display: none; }
}

/* ═══════ Popover (top layer — outside @scope) ═══════
   Popovers escape to the top layer and cannot inherit --table-toolbar-* tokens
   from the @scope block. Style with raw --a-* tokens — same pattern used by
   tooltip-ui and toolbar-ui's spillover menu. */

[data-toolbar-popover]:not(:popover-open) {
  display: none !important;
}

[data-toolbar-popover]:popover-open {
  margin: 0;
  padding: var(--a-space-1);
  background: var(--a-canvas-bright);
  color: var(--a-fg);
  border: 1px solid var(--a-ui-border);
  border-radius: var(--a-radius);
  box-shadow: var(--a-shadow-lg);
  min-width: 16rem;
  font-family: var(--table-toolbar-font-family, var(--a-font-family-ui));
  font-size: var(--a-ui-size);
  display: flex;
  flex-direction: column;
  gap: var(--a-space-1);
  /* Fade + lift in on first paint. */
  opacity: 1;
  translate: 0 0;
  transition: opacity var(--a-duration-fast) var(--a-easing-out),
              translate var(--a-duration-fast) var(--a-easing-out);
  @starting-style {
    opacity: 0;
    translate: 0 -4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-toolbar-popover]:popover-open { transition: none; }
}

/* The popover head + empty hint are <text-ui variant="kicker"|caption">,
   so their typography (uppercase, tracking, muted color) comes from
   text-ui's own variant rules — no rule needed here.
   Sort rows are <menu-item-ui> — hover/focus/danger styling comes from
   menu-item-ui's @scope block.
   Filter and columns rows are <field-ui inline> — label/control geometry
   comes from field-ui's @scope block. */

[data-toolbar-popover] [data-popover-head] {
  padding: var(--a-space-1) var(--a-space-2);
}

[data-toolbar-popover] [data-popover-list] {
  display: flex;
  flex-direction: column;
  gap: var(--a-space-1);
  max-height: 22rem;
  overflow-y: auto;
}

[data-toolbar-popover] [data-popover-empty] {
  display: block;
  padding: var(--a-space-3) var(--a-space-2);
  text-align: center;
}

[data-toolbar-popover] [data-popover-action] {
  margin-top: var(--a-space-1);
  border-top: 1px solid var(--a-border-subtle);
  padding-top: var(--a-space-1);
}

[data-toolbar-popover] [data-filter-row],
[data-toolbar-popover] [data-columns-row] {
  padding: var(--a-space-1) var(--a-space-2);
}

[data-toolbar-popover] [data-filter-input] {
  min-width: 0;
}

/* Active sort row: lift the menu-item-ui's bg/fg via CSS-var override —
   menu-item-ui exposes --menu-item-bg / --menu-item-fg / --menu-item-icon-fg
   for exactly this. Stays inside the menu-item-ui token contract. */
[data-toolbar-popover] [data-sort-row][data-active] {
  --menu-item-bg: var(--a-bg-selected);
  --menu-item-fg: var(--a-fg);
  --menu-item-icon-fg: var(--a-fg);
  font-weight: var(--a-ui-weight, var(--a-weight-medium));
}
