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

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

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

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

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

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

    /* ── Match highlight ── */
    --combobox-match-bg-default:            var(--a-accent-muted);
    --combobox-match-fg-default:            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, var(--combobox-gap-default));
    position: relative;
    min-width: 0;
    font-size: var(--combobox-font-size, var(--combobox-font-size-default));
  }

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

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

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

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

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

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

  [data-input] {
    flex: 1;
    min-width: 0;
    outline: none;
    background: transparent;
    color: var(--combobox-fg, var(--combobox-fg-default));
    font: inherit;
    font-size: var(--combobox-font-size, var(--combobox-font-size-default));
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
  }
  [data-input][data-empty]::before {
    content: attr(data-placeholder);
    color: var(--combobox-placeholder-fg, var(--combobox-placeholder-fg-default));
    pointer-events: none;
  }

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

/* ── 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; }
