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

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

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

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

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

    /* ── Suggestions popover ── */
    --tags-input-suggestions-bg-default:        var(--a-canvas-bright);
    --tags-input-suggestions-border-default:    var(--a-ui-border);
    --tags-input-suggestions-radius-default:    var(--a-radius);
    --tags-input-suggestions-shadow-default:    var(--a-shadow-lg);
    --tags-input-suggestion-bg-focus-default:   var(--a-ui-bg-hover);
    --tags-input-suggestion-fg-focus-default:   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, var(--tags-input-gap-default));
    min-height: var(--tags-input-min-h, var(--tags-input-min-h-default));
    padding: var(--tags-input-py, var(--tags-input-py-default))
             var(--tags-input-px, var(--tags-input-px-default));
    border: 1px solid var(--tags-input-border, var(--tags-input-border-default));
    border-radius: var(--tags-input-radius, var(--tags-input-radius-default));
    background: var(--tags-input-bg, var(--tags-input-bg-default));
    color: var(--tags-input-fg, var(--tags-input-fg-default));
    font-size: var(--tags-input-font-size, var(--tags-input-font-size-default));
    cursor: text;
    transition:
      background  var(--tags-input-duration, var(--tags-input-duration-default)) var(--tags-input-easing, var(--tags-input-easing-default)),
      border-color var(--tags-input-duration, var(--tags-input-duration-default)) var(--tags-input-easing, var(--tags-input-easing-default)),
      box-shadow  var(--tags-input-duration, var(--tags-input-duration-default)) var(--tags-input-easing, var(--tags-input-easing-default));
  }

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

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

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

  :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-default: var(--tags-input-chip-bg-invalid, var(--tags-input-chip-bg-invalid-default));
  }

  /* ── 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, var(--tags-input-fg-default));
    font: inherit;
    font-size: var(--tags-input-font-size, var(--tags-input-font-size-default));
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    cursor: text;
  }
  /* Empty-state placeholder via ::before pseudo so the contenteditable
     surface participates in inline layout (the same pattern the input-ui
     + combobox-ui editable surfaces use). */
  [data-inline-input][data-empty]::before {
    content: attr(data-placeholder);
    color: var(--tags-input-placeholder-fg, var(--tags-input-placeholder-fg-default));
    pointer-events: none;
  }

  /* ── 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-default: var(--a-ui-sm);
    --tags-input-min-h-default:     var(--a-size-sm);
    --tags-input-gap-default:       calc(var(--a-space-1) / 1.25);
  }
  :scope[size="lg"] {
    --tags-input-font-size-default: var(--a-ui-lg);
    --tags-input-min-h-default:     var(--a-size-lg);
    --tags-input-gap-default:       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; }
}
