@scope (tags-input-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --tags-input-min-h:           var(--a-size);
    --tags-input-px:              var(--a-ui-px);
    --tags-input-py:              calc(var(--a-space-1) / 2);
    --tags-input-gap:             var(--a-space-1);
    --tags-input-radius:          var(--a-radius);

    /* ── Typography ── */
    --tags-input-font-size:       var(--a-ui-size);

    /* ── Colors — host ── */
    --tags-input-bg:              var(--a-ui-bg);
    --tags-input-bg-hover:        var(--a-ui-bg-hover);
    --tags-input-fg:              var(--a-ui-text);
    --tags-input-placeholder-fg:  var(--a-ui-text-placeholder);
    --tags-input-border:          var(--a-ui-border);
    --tags-input-border-hover:    var(--a-ui-border-hover);
    --tags-input-focus-ring:      var(--a-focus-ring);
    --tags-input-focus-ring-invalid: var(--a-focus-ring-invalid);

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

    /* ── Chip overrides — cascaded into nested <tag-ui> ── */
    --tags-input-chip-bg-invalid: var(--a-danger-muted);

    /* ── Suggestions popover ── */
    --tags-input-suggestions-bg:        var(--a-canvas-bright);
    --tags-input-suggestions-border:    var(--a-ui-border);
    --tags-input-suggestions-radius:    var(--a-radius);
    --tags-input-suggestions-shadow:    var(--a-shadow-lg);
    --tags-input-suggestion-bg-focus:   var(--a-ui-bg-hover);
    --tags-input-suggestion-fg-focus:   var(--a-ui-text-hover);

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

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tags-input-gap);
    min-height: var(--tags-input-min-h);
    /* font-family floor on the host — the inner input + tags inherit it. */
    font-family: var(--tags-input-font-family, var(--a-font-family-ui));
    padding: var(--tags-input-py)
             var(--tags-input-px);
    border: 1px solid var(--tags-input-border);
    border-radius: var(--tags-input-radius);
    background: var(--tags-input-bg);
    color: var(--tags-input-fg);
    font-size: var(--tags-input-font-size);
    cursor: text;
    transition:
      background  var(--tags-input-duration) var(--tags-input-easing),
      border-color var(--tags-input-duration) var(--tags-input-easing),
      box-shadow  var(--tags-input-duration) var(--tags-input-easing);
  }

  :scope:not([disabled]):hover {
    background: var(--tags-input-bg-hover);
    border-color: var(--tags-input-border-hover);
  }

  :scope:focus-within {
    box-shadow: var(--tags-input-focus-ring);
    border-color: transparent;
  }

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

  :scope[disabled] {
    opacity: 0.5;
    pointer-events: none;
  }

  /* ── Chip list ── */
  [data-chip-list] {
    display: contents;  /* chips become direct flex children of the host */
  }

  /* Chip styling — cascade host-scoped overrides into <tag-ui> internals. */
  :scope tag-ui {
    /* keep the chip subtle by default; consumer tokens can override. */
  }

  :scope tag-ui[data-invalid] {
    --tag-bg: var(--tags-input-chip-bg-invalid);
  }

  /* ── Inline input ── */
  [data-inline-input] {
    flex: 1 1 8em;
    min-width: 8em;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    outline: none;
    background: transparent;
    color: var(--tags-input-fg);
    font: inherit;
    font-size: var(--tags-input-font-size);
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    cursor: text;
    /* 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. The pseudo is 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 + combobox-ui use. */
  [data-inline-input][data-empty]::before {
    content: attr(data-placeholder);
    color: var(--tags-input-placeholder-fg);
    pointer-events: none;
    position: absolute;
    inset: 0;
    padding: inherit;
    display: flex;
    align-items: center;
  }

  /* ── Spinner (async validator) ── */
  [data-spinner] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --a-icon-size: 1em;
    animation: tags-input-spin 800ms linear infinite;
  }
  [data-spinner][hidden] { display: none; }

  /* ── Sizing — leverages universal [size] attribute ── */
  :scope[size="sm"] {
    --tags-input-font-size: var(--a-ui-sm);
    --tags-input-min-h:     var(--a-size-sm);
    --tags-input-gap:       calc(var(--a-space-1) / 1.25);
  }
  :scope[size="lg"] {
    --tags-input-font-size: var(--a-ui-lg);
    --tags-input-min-h:     var(--a-size-lg);
    --tags-input-gap:       var(--a-space-2);
  }
}

/* ── Suggestions popover ── */
/* Host-scoped (not inside @scope) so the popover can render outside the
   normal flow if a future revision opts into top-layer. Currently inlined. */

tags-input-ui [data-suggestions] {
  position: absolute;
  left: 0;
  top: calc(100% + var(--a-space-1));
  width: 100%;
  min-width: 12em;
  max-height: 18rem;
  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);
  font-family: inherit;
  font-size: var(--a-ui-size);
  color: var(--a-ui-text);
  overflow-y: auto;
  z-index: 10;
}

tags-input-ui {
  position: relative;
}

tags-input-ui [data-suggestions][hidden] { display: none; }

tags-input-ui [data-suggestions] [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);
}

tags-input-ui [data-suggestions] [role="option"][data-active],
tags-input-ui [data-suggestions] [role="option"]:hover {
  background: var(--a-ui-bg-hover);
  color: var(--a-ui-text-hover);
}

@keyframes tags-input-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  tags-input-ui [data-spinner] { animation: none; }
}
