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

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

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

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

    /* ── Popover ── */
    --combobox-popover-bg:          var(--a-canvas-bright);
    --combobox-popover-border:      var(--a-ui-border);
    --combobox-popover-radius:      var(--a-radius);
    --combobox-popover-shadow:      var(--a-shadow-lg);

    /* ── Options ── */
    --combobox-option-px:           var(--a-ui-px);
    --combobox-option-py:           var(--a-space-1);
    --combobox-option-bg-active:    var(--a-ui-bg-hover);
    --combobox-option-fg-active:    var(--a-ui-text-hover);
    --combobox-option-bg-selected:  var(--a-ui-bg-selected);
    --combobox-option-fg-selected:  var(--a-ui-text-selected);

    /* ── Match highlight ── */
    --combobox-match-bg:            var(--a-accent-muted);
    --combobox-match-fg:            var(--a-accent-strong);

    text-align: start;  /* §text-align-reset — block ancestor centering */
  }

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

  :scope[disabled] {
    pointer-events: none;
    color: var(--combobox-fg-disabled);
    opacity: 0.6;
  }

  /* ── Label ── */
  [data-label] {
    display: block;
    font-size: var(--combobox-label-size);
    color: var(--combobox-label-fg);
  }

  /* ── Field ── */
  [data-field] {
    display: flex;
    align-items: center;
    gap: var(--combobox-field-gap);
    min-height: var(--combobox-height);
    padding: 0 var(--combobox-px);
    border: 1px solid var(--combobox-border);
    border-radius: var(--combobox-radius);
    background: var(--combobox-bg);
    color: var(--combobox-fg);
    transition:
      background  var(--combobox-duration) var(--combobox-easing),
      border-color var(--combobox-duration) var(--combobox-easing),
      color       var(--combobox-duration) var(--combobox-easing),
      box-shadow  var(--combobox-duration) var(--combobox-easing);
  }

  :scope:not([disabled]) [data-field]:hover {
    background: var(--combobox-bg-hover);
    border-color: var(--combobox-border-hover);
  }

  :scope:focus-within [data-field] {
    box-shadow: var(--combobox-focus-ring);
  }
  :scope[aria-invalid="true"]:focus-within [data-field],
  :scope[error]:focus-within [data-field] {
    box-shadow: var(--combobox-focus-ring-invalid);
  }

  [data-prefix],
  [data-suffix] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--combobox-caret-fg);
    --a-icon-size: var(--combobox-font-size);
  }
  [data-prefix]:empty { display: none; }
  [data-suffix] {
    cursor: pointer;
  }

  [data-input] {
    flex: 1;
    min-width: 0;
    outline: none;
    background: transparent;
    color: var(--combobox-fg);
    font: inherit;
    font-size: var(--combobox-font-size);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    /* Positioning context for the [data-empty]::before placeholder pseudo
       (kept out of inline flow so the caret renders at content-start). */
    position: relative;
  }
  /* Empty-state placeholder. Absolutely positioned (NOT inline) so an
     in-flow pseudo box doesn't push the caret-at-position-0 to the right
     of the placeholder text after type-then-delete. Same pattern
     input-ui + textarea-ui + tags-input-ui use. */
  [data-input][data-empty]::before {
    content: attr(data-placeholder);
    color: var(--combobox-placeholder-fg);
    pointer-events: none;
    position: absolute;
    inset: 0;
    padding: inherit;
    display: flex;
    align-items: center;
  }

  [data-clear] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--combobox-fg-muted);
    cursor: pointer;
    --a-icon-size: var(--combobox-font-size);
  }
  [data-clear]:hover {
    color: var(--combobox-fg);
  }
}

/* Higher-specificity guard: the editable [data-input] picked up 8px block
   padding from an outer source that out-cascaded the @scope rule above, pinning
   the field to ~36px at every [size]. This wins the cascade so the field height
   tracks --a-size (sm/md/lg) like input-ui. */
combobox-ui [data-field] [data-input] {
  padding-block: 0;
}

/* ── Top-layer popover: cannot inherit @scope component tokens ── */

combobox-ui [data-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: 18rem;
  overflow-y: auto;
  font-family: inherit;
  font-size: var(--a-ui-size);
  color: var(--a-ui-text);
  width: max-content;

  opacity: 1;
  translate: 0 0;
  transition: opacity var(--a-duration-fast) var(--a-easing-out),
              translate var(--a-duration-fast) var(--a-easing-out);
}

combobox-ui [data-listbox]:popover-open {
  @starting-style {
    opacity: 0;
    translate: 0 -4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  combobox-ui [data-listbox] { transition: none; }
}

combobox-ui [data-listbox] [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(--a-ui-text-subtle);
  cursor: pointer;
  transition:
    background var(--a-duration-fast) var(--a-easing),
    color      var(--a-duration-fast) var(--a-easing);
}

combobox-ui [data-listbox] [role="option"][data-active] {
  background: var(--a-ui-bg-hover);
  color: var(--a-ui-text-hover);
}

combobox-ui [data-listbox] [role="option"][aria-selected="true"] {
  background: var(--a-ui-bg-selected);
  color: var(--a-ui-text-selected);
  font-weight: var(--a-ui-weight);
}

combobox-ui [data-listbox] [role="option"][aria-disabled="true"] {
  color: var(--a-ui-text-disabled);
  cursor: not-allowed;
}

combobox-ui [data-listbox] [role="option"] mark {
  background: var(--a-accent-muted);
  color: var(--a-accent-strong);
  padding: 0 0.1em;
  border-radius: var(--a-radius-sm);
}

combobox-ui [data-listbox] [role="group"] [data-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(--a-ui-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

combobox-ui [data-empty],
combobox-ui [data-loading],
combobox-ui [data-footer] {
  padding: var(--a-space-2) var(--a-ui-px);
  color: var(--a-ui-text-muted);
  font-size: var(--a-ui-size);
}

combobox-ui [data-footer]:empty { display: none; }
