@scope (search-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    --search-radius:      var(--a-radius);
    --search-duration:    var(--a-duration-fast);
    --search-easing:      var(--a-easing);
    text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
}

  :scope {
    display: block;
  }

  /* Hide clear icon when empty */
  :scope[value=""] [slot="suffix"],
  :scope:not([value]) [slot="suffix"] {
    opacity: 0;
    pointer-events: none;
  }

  [slot="suffix"] {
    transition: opacity var(--search-duration) var(--search-easing);
  }

  /* Override input-ui radius to pill for search */
  input-ui {
    --input-radius: var(--search-radius);
  }
}
