@scope (select-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --select-gap:               var(--a-space-2);
    --select-trigger-gap:       var(--a-space-1);
    --select-height:            var(--a-size);
    --select-px:                var(--a-ui-px);
    --select-radius:            var(--a-radius);
    --select-leading-radius:    var(--a-radius-full);

    /* ── Typography ── */
    --select-font-size:         var(--a-ui-size);
    --select-label-size:        var(--a-label-size);

    /* ── Colors ── */
    --select-bg:                var(--a-ui-bg);
    --select-bg-selected:       var(--a-ui-bg-selected);
    --select-bg-hover:          var(--a-ui-bg-hover);
    --select-border:            var(--a-ui-border);
    --select-border-hover:      var(--a-ui-border-hover);
    --select-focus-ring:        var(--a-focus-ring);
    --select-focus-ring-invalid: var(--a-focus-ring-invalid);
    --select-label-fg:          var(--a-ui-text-muted);
    --select-placeholder-fg:    var(--a-ui-text-placeholder);
    --select-caret-fg:          var(--a-ui-text-muted);
    --select-fg:                var(--a-ui-text);
    --select-fg-hover:          var(--a-ui-text-hover);
    --select-fg-selected:       var(--a-ui-text-selected);
    --select-fg-subtle:         var(--a-ui-text-subtle);
    --select-fg-muted:          var(--a-ui-text-muted);
    --select-fg-disabled:       var(--a-ui-text-disabled);
    --select-ghost-bg-hover:    var(--a-bg-muted);

    /* ── Transition ── */
    --select-duration:          var(--a-duration-fast);
    --select-easing:            var(--a-easing);

    /* ── Listbox ── */
    --select-option-px:         var(--a-ui-px);
    --select-option-py:         var(--a-ui-py);
    --select-option-bg-hover:   var(--a-bg-hover);
    --select-option-fg-active:  var(--a-ui-text-active);
    --select-option-fg-disabled: var(--a-ui-text-disabled);
    --select-group-label-size:  var(--a-ui-size);
    text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
}

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--select-gap);
    min-width: 0;
    /* font-family floor on the host — trigger/native-select/options inherit it. */
    font-family: var(--select-font-family, var(--a-font-family-ui));
    font-size: var(--select-font-size);
  }

  :scope[data-direction="row"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  :scope[disabled] { pointer-events: none; color: var(--select-fg-disabled); }

  /* Label */
  :scope::before {
    content: attr(label);
    font-size: var(--select-label-size);
    color: var(--select-label-fg);
  }
  :scope:not([label])::before,
  :scope[label=""]::before { display: none; }

  /* Trigger */
  [slot="trigger"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--select-trigger-gap);
    min-width: 0;
    min-height: var(--select-height);
    padding: 0 var(--select-px);
    border: 1px solid var(--select-border);
    border-radius: var(--select-radius);
    background: var(--select-bg);
    line-height: 1;
    cursor: pointer;
    /* Match every property the hover / focus / invalid states change. */
    transition:
      background   var(--select-duration) var(--select-easing),
      border-color var(--select-duration) var(--select-easing),
      color        var(--select-duration) var(--select-easing),
      box-shadow   var(--select-duration) var(--select-easing);
  }
  [slot="trigger"]:hover {
    border-color: var(--select-border-hover);
    background: var(--select-bg-hover);
    color: var(--select-fg);
  }
  [slot="trigger"]:hover [slot="caret"] {
    color: var(--select-fg-subtle);
  }
  :scope:focus-visible { outline: none; }
  :scope:focus-visible [slot="trigger"] {
    /* Canonical ring via L3 token (see semantics.css FOCUS block). */
    box-shadow: var(--select-focus-ring);
    color: var(--select-fg);
  }
  :scope[aria-invalid="true"]:focus-visible [slot="trigger"],
  :scope[error]:focus-visible [slot="trigger"] {
    box-shadow: var(--select-focus-ring-invalid);
  }
  :scope:focus-visible::before {
    color: var(--select-fg-subtle);
  }

  /* Leading icon / avatar — inline-flex centers icon content vertically
     within the slot box (same recipe as input-ui's prefix/suffix). */
  [slot="leading"] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
    --a-icon-size: var(--select-font-size);
    color: var(--select-fg-muted);
  }

  img[slot="leading"] {
    width: var(--select-leading-size, calc(var(--select-height) - var(--select-gap)));
    height: var(--select-leading-size, calc(var(--select-height) - var(--select-gap)));
    border-radius: var(--select-leading-radius);
    object-fit: cover;
  }

  [slot="display"] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--select-fg);
  }
  input[slot="display"] {
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--select-fg);
    min-width: 0;
    width: 100%;
  }
  input[slot="display"]::placeholder {
    color: var(--select-placeholder-fg);
  }
  :scope:not([value]) [slot="display"],
  :scope[value=""] [slot="display"] {
    color: var(--select-placeholder-fg);
  }

  /* Caret color is held against button-ui's stronger cascade by chaining
     :scope [slot="trigger"] [slot="caret"] — matches at the same
     specificity as button-ui's own slot rules without !important. */
  :scope [slot="trigger"] [slot="caret"] {
    color: var(--select-caret-fg);
    flex-shrink: 0;
  }

  /* Size handled by universal [size] attribute system. */

  /* Ghost variant */
  :scope[variant="ghost"] {
    --select-bg: transparent;
    --select-border: transparent;
    --select-border-hover: transparent;
  }
  :scope[variant="ghost"] [slot="trigger"]:hover {
    background: var(--select-ghost-bg-hover);
    color: var(--select-fg);
  }
  :scope[variant="ghost"] [slot="trigger"]:hover [slot="caret"] {
    color: var(--select-fg-subtle);
  }

  /* ── SPEC-040 — Multi-select chip trigger ──
     [data-multi-chips] is set on the host by render() when [multiple] is
     active. Layout switches from inline-text trigger to wrap-flex chip row.
     Tag-ui chips inside [data-chips] inherit the host's tag-ui token set;
     the +more pill is a CSS-only button styled to match. */
  :scope[data-multi-chips] [slot="trigger"] {
    flex-wrap: wrap;
    align-items: center;
    /* Pack chips left with a small gap — override the base trigger's
       `space-between` (which is for the single-select content↔caret split),
       otherwise the chips spread across the full trigger width. The display
       slot flex-grows (below) to push the caret to the trailing edge. */
    justify-content: flex-start;
    gap: var(--a-space-1);
    /* min-height tracks single-row height when empty; flex-wrap allows
       it to grow as chips overflow. */
    padding-block: calc(var(--select-py, var(--a-space-1)));
  }
  :scope[data-multi-chips] [data-chips] {
    display: contents; /* let chips participate in the trigger's flex line */
  }
  :scope[data-multi-chips] [data-chips] tag-ui {
    /* Chip styling tracks the active variant via tag-ui's own tokens. */
    --tag-size: var(--a-ui-tiny);
  }
  :scope[data-multi-chips] [data-chips] [data-more] {
    appearance: none;
    border: 1px solid var(--select-border);
    background: var(--select-bg-hover);
    color: var(--select-fg-muted);
    border-radius: var(--a-radius-full);
    padding: 0 var(--a-space-2);
    font: inherit;
    font-size: var(--a-ui-tiny);
    line-height: calc(var(--a-size) - var(--a-space-3));
    cursor: pointer;
  }
  :scope[data-multi-chips] [data-chips] [data-more]:hover {
    background: var(--a-bg-hover);
  }

  /* Clear-all `x` affordance. Visible only when [clearable] AND chips. */
  :scope[data-multi-chips] [data-clear-all] {
    appearance: none;
    background: transparent;
    border: none;
    padding: var(--a-space-0);
    margin-inline-start: var(--a-space-1);
    color: var(--select-fg-muted);
    cursor: pointer;
    border-radius: var(--a-radius-full);
    --a-icon-size: var(--a-ui-sm);
    display: inline-flex;
    align-items: center;
  }
  :scope[data-multi-chips] [data-clear-all][hidden] { display: none; }
  :scope[data-multi-chips] [data-clear-all]:hover {
    color: var(--select-fg);
    background: var(--a-bg-hover);
  }

  /* In multi-select with chips present, the trigger display element is
     the rest-of-row slot — make it flex-grow but not push chips off. */
  :scope[data-multi-chips] [slot="display"] {
    flex: 1;
    min-width: 4ch;
  }
  /* Hide the display when empty in multi-mode (chips fill the slot). */
  :scope[data-multi-chips] [slot="display"]:empty {
    flex: 0 0 0;
    padding: 0;
  }
}

/* ── Top-layer: cannot inherit component tokens ── */

select-ui [slot="listbox"] {
  margin: 0;
  padding: var(--a-space-1);
  border: 1px solid var(--a-ui-border);
  border-radius: var(--a-radius);
  background: var(--a-canvas-bright);
  box-shadow: var(--a-shadow-lg);
  max-height: 15rem;
  overflow-y: auto;
  font-family: inherit;
  font-size: var(--a-ui-size);
  color: var(--select-fg);

  /* Positioned by JS (#positionListbox) — fixed to viewport */
  width: max-content;

  /* Fade + lift in on first paint (popover top-layer cannot inherit
     component tokens, so reference --a-* directly). */
  opacity: 1;
  translate: 0 0;
  transition: opacity var(--a-duration-fast) var(--a-easing-out),
              translate var(--a-duration-fast) var(--a-easing-out);
}

select-ui [slot="listbox"]:popover-open {
  @starting-style {
    opacity: 0;
    translate: 0 -4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  select-ui [slot="listbox"] { transition: none; }
}

select-ui [role="option"] {
  display: flex;
  align-items: center;
  padding: var(--a-space-1) var(--a-ui-px);
  border-radius: var(--a-radius-sm);
  white-space: nowrap;
  color: var(--select-fg-subtle);
  cursor: pointer;
  transition:
    background var(--a-duration-fast) var(--a-easing),
    color var(--a-duration-fast) var(--a-easing);
}
select-ui [role="option"]:hover,
select-ui [role="option"][data-focused] {
  background: var(--select-option-bg-hover);
  color: var(--select-fg-hover);
}
select-ui [role="option"][aria-selected="true"] {
  color: var(--select-fg-selected);
  background: var(--select-bg-selected);
  font-weight: var(--a-ui-weight);
}
select-ui [role="option"][aria-disabled="true"] {
  color: var(--select-option-fg-disabled);
  cursor: not-allowed;
}
select-ui [role="option"][aria-disabled="true"]:hover {
  background: transparent;
}

/* Option with icon */
select-ui [role="option"] icon-ui {
  --a-icon-size: var(--a-ui-size);
  color: var(--select-fg-muted);
  margin-inline-end: var(--a-space-1);
  vertical-align: -0.125em;
}

/* Option with avatar — small inline image (matches the trigger leading
   avatar radius), sized to the option line-height. */
select-ui [role="option"] img[data-option-avatar] {
  width: var(--a-ui-size);
  height: var(--a-ui-size);
  border-radius: var(--select-leading-radius);
  object-fit: cover;
  margin-inline-end: var(--a-space-1);
  vertical-align: -0.2em;
}

/* Separator */
select-ui [data-separator] {
  height: 1px;
  background: var(--a-border-subtle);
  margin: var(--a-space-1) 0;
  border: none;
}

/* Menu header (avatar + name + description) */
select-ui [data-menu-header] {
  display: flex;
  align-items: center;
  gap: var(--a-space-2);
  padding: var(--a-space-2) var(--a-ui-px);
}

select-ui [data-menu-header] img {
  width: 2rem;
  height: 2rem;
  border-radius: var(--a-radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

select-ui [data-menu-header] strong {
  display: block;
  font-weight: var(--a-weight-medium);
  color: var(--select-fg);
  font-size: var(--a-ui-size);
}

select-ui [data-menu-header] span {
  display: block;
  font-size: var(--a-ui-sm);
  color: var(--select-fg-muted);
}

select-ui [role="group"] [slot="group-label"] {
  padding: var(--a-space-1) var(--a-ui-px);
  font-size: var(--a-ui-tiny);
  font-weight: var(--a-ui-weight);
  color: var(--select-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Divider between groups — enabled by <select-ui divider>. */
select-ui[divider] [role="group"] + [role="group"] {
  border-top: 1px solid var(--a-border-subtle);
  margin-top: var(--a-space-1);
  padding-top: var(--a-space-1);
}

/* ── Hint (§184, v0.5.5, FEEDBACK-08 §7) ──
   Caption beneath the trigger; wired to aria-describedby on the host. */
select-ui [slot="hint"] {
  display: block;
  margin-top: var(--select-hint-mt, var(--a-space-1));
  font-size: var(--select-hint-size, var(--a-ui-xs));
  color: var(--select-hint-fg, var(--select-fg-muted));
  line-height: var(--select-hint-lh, 1.4);
}

/* ── SPEC-040 — Multi-select popover affordances ──
   Top-layer: popover lives outside @scope so reference --a-* directly. */

/* Select-all / Clear control row above the option list. */
select-ui [slot="listbox"] [data-select-all] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--a-space-1);
  border-bottom: 1px solid var(--a-border-subtle);
  margin-bottom: var(--a-space-1);
}
select-ui [slot="listbox"] [data-select-all-btn] {
  appearance: none;
  background: transparent;
  border: none;
  font: inherit;
  font-size: var(--a-ui-xs);
  color: var(--a-accent);
  cursor: pointer;
  padding: var(--a-space-1) var(--a-space-2);
  border-radius: var(--a-radius-sm);
}
select-ui [slot="listbox"] [data-select-all-btn]:hover {
  background: var(--a-bg-hover);
}

/* Multi-select option rows — leading checkbox indicator + label.
   The check icon is hidden by default and revealed at aria-selected. */
select-ui [role="option"][data-multi-option] {
  display: flex;
  align-items: center;
  gap: var(--a-space-2);
}
select-ui [role="option"][data-multi-option] [data-checkbox] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--a-ui-border);
  border-radius: var(--a-radius-sm);
  background: var(--a-canvas-bright);
  margin-inline-end: 0; /* row gap already provides spacing */
  transition:
    background var(--a-duration-fast) var(--a-easing),
    border-color var(--a-duration-fast) var(--a-easing);
}
/* Hide the check icon when unselected — overrides the option-row icon-ui
   rule above. */
select-ui [role="option"][data-multi-option] [data-checkbox] icon-ui {
  --a-icon-size: 0.75rem;
  color: transparent;
  margin: 0;
  vertical-align: 0;
  transition: color var(--a-duration-fast) var(--a-easing);
}
select-ui [role="option"][data-multi-option][aria-selected="true"] [data-checkbox] {
  background: var(--a-accent);
  border-color: var(--a-accent);
}
select-ui [role="option"][data-multi-option][aria-selected="true"] [data-checkbox] icon-ui {
  color: var(--a-chrome-light);
}
select-ui [role="option"][data-multi-option] [data-option-label] {
  flex: 1;
  min-width: 0;
}
/* Multi-option selected state — override the single-select "bold +
   accent bg" treatment so the row stays light + the checkbox carries
   the selected signal. */
select-ui [role="option"][data-multi-option][aria-selected="true"] {
  background: transparent;
  font-weight: inherit;
  color: var(--select-fg);
}
select-ui [role="option"][data-multi-option][aria-selected="true"]:hover,
select-ui [role="option"][data-multi-option][aria-selected="true"][data-focused] {
  background: var(--select-option-bg-hover);
}

/* Empty state when there are no options. */
select-ui [slot="listbox"] [data-empty] {
  padding: var(--a-space-3) var(--a-ui-px);
  color: var(--a-fg-muted);
  text-align: center;
  font-size: var(--a-ui-xs);
}
