@scope (toolbar-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --toolbar-gap:    var(--a-space-1);
    --toolbar-radius: var(--a-radius-md);
    --toolbar-px:     var(--a-space-1);
    --toolbar-py:     var(--a-space-1);

    /* ── Colors ── */
    --toolbar-bg:     transparent;
    --toolbar-fg:     var(--a-fg);
    --toolbar-border: var(--a-border-subtle);
  }

  /* ── Base ── */
  :scope {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--toolbar-gap);
    padding: var(--toolbar-py) var(--toolbar-px);
    border-radius: var(--toolbar-radius);
    color: var(--toolbar-fg);
    min-width: 0;        /* allow shrinking within flex/grid parents */
    overflow: hidden;    /* prevent pre-measurement flash before reflow */
  }

  /* Direct children must keep their natural size so reflow() can detect overflow.
     (Without this, flex would shrink them and overflow would never trigger.) */
  :scope > * {
    flex: 0 0 auto;
  }

  /* ── Bordered ── */
  :scope[bordered] {
    border: 1px solid var(--toolbar-border);
    background: var(--toolbar-bg);
  }

  /* ── Gap variants ── */
  :scope[gap="sm"] { --toolbar-gap: var(--a-space-1); }
  :scope[gap="md"] { --toolbar-gap: var(--a-space-2); }
  :scope[gap="lg"] { --toolbar-gap: var(--a-space-3); }

  /* ── Align ── */
  :scope[align="start"]         { justify-content: flex-start; }
  :scope[align="center"]        { justify-content: center; }
  :scope[align="end"]           { justify-content: flex-end; }
  :scope[align="space-between"] { justify-content: space-between; }
  :scope[align="space-around"]  { justify-content: space-around; }

  /* Spillover trigger sits at the end, pushed to the right edge when aligned start. */
  [data-toolbar-spillover] {
    margin-inline-start: auto;
  }
  :scope[align="end"] [data-toolbar-spillover],
  :scope[align="center"] [data-toolbar-spillover],
  :scope[align="space-between"] [data-toolbar-spillover],
  :scope[align="space-around"] [data-toolbar-spillover] {
    margin-inline-start: 0;
  }

  /* Custom elements define their own `display`, so the UA [hidden] default
     doesn't stick. Force hidden to win. */
  [hidden] { display: none !important; }
}

/* ── toolbar-group-ui: atomic inline-flex cluster ── */
@scope (toolbar-group-ui) {
  :where(:scope) {
    --toolbar-group-gap: var(--a-space-1);
  }
  :scope {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--toolbar-group-gap);
    min-width: 0;
  }
}

/* ── Spillover popover (outside @scope — lives in top layer) ──
   Closed [popover] elements are display:none per the UA stylesheet.
   We MUST NOT override `display` at the unqualified selector — doing so
   makes the closed popover render as a phantom flex item that adds width
   to the toolbar and breaks the overflow measurement. Style only when open.

   NOTE: Raw --a-* tokens are used below because the popover is promoted
   to the top layer and cannot inherit --toolbar-* component tokens from
   the @scope block above. This is the same pattern used by tooltip-ui. */
toolbar-ui [data-toolbar-spillover-menu]:not(:popover-open) {
  display: none !important;
}

toolbar-ui [data-toolbar-spillover-menu]:popover-open {
  margin: 0;
  padding: var(--a-space-1);
  border: 1px solid var(--a-border-subtle);
  border-radius: var(--a-radius-lg);
  background: var(--a-bg-subtle);
  box-shadow: var(--a-shadow-lg);
  min-width: 10rem;
  font-family: var(--toolbar-font-family, var(--a-font-family-ui));
  font-size: var(--a-ui-size);
  color: var(--toolbar-fg);
  /* Stack overflow items as rows (each row can be a group with its own gap). */
  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) {
  toolbar-ui [data-toolbar-spillover-menu]:popover-open { transition: none; }
}

/* Inside the spillover, render as a vertical list — every item (groups and
   their children) takes a full row. Looks like a menu, not a half-collapsed
   strip. */
toolbar-ui [data-toolbar-spillover-menu]:popover-open toolbar-group-ui {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: var(--a-space-1);
}

toolbar-ui [data-toolbar-spillover-menu]:popover-open button-ui {
  width: 100%;
  justify-content: flex-start;
}

/* Composite controls that nest inside the toolbar (select-ui, segmented-ui,
   etc.) should stretch as full-width rows in the spillover list. */
toolbar-ui [data-toolbar-spillover-menu]:popover-open select-ui,
toolbar-ui [data-toolbar-spillover-menu]:popover-open segmented-ui,
toolbar-ui [data-toolbar-spillover-menu]:popover-open input-ui {
  width: 100%;
  min-width: 0;
}
