/* Outer pill/wrapper is the only visible chrome; inner fields stay flat. */
.auth-input-pill input,
.auth-input-pill textarea,
.search-box #search-input {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

/* Kill Chrome / Safari autofill "yellow box" so pills match the dark theme */
.auth-input-pill input:-webkit-autofill,
.auth-input-pill input:-webkit-autofill:hover,
.auth-input-pill input:-webkit-autofill:focus,
.auth-input-pill input:-webkit-autofill:focus-visible,
.auth-input-pill input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0 1000px var(--search-surface) inset !important;
}

[data-theme="light"] .auth-input-pill input:-webkit-autofill,
[data-theme="light"] .auth-input-pill input:-webkit-autofill:hover,
[data-theme="light"] .auth-input-pill input:-webkit-autofill:focus,
[data-theme="light"] .auth-input-pill input:-webkit-autofill:focus-visible,
[data-theme="light"] .auth-input-pill input:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px #ffffff inset !important;
}

.auth-input-pill input:focus,
.auth-input-pill input:focus-visible,
.auth-input-pill textarea:focus,
.auth-input-pill textarea:focus-visible,
.search-box #search-input:focus,
.search-box #search-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Focus ring is owned by the outer .auth-input-pill (see style.css + auth-search-align.css) */