/* Stable field surfaces. One state cue belongs to the visible control, never both wrapper and input. */
body[data-admin-shell] :is(
  input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"]),
  textarea, select
) {
  background-color: var(--input-bg);
  border-color: transparent !important;
  outline: none;
  box-shadow: none;
}
body[data-admin-shell] :is(
  input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"]),
  textarea, select
):is(:focus, :focus-visible) {
  background-color: var(--input-bg);
  outline: none;
  box-shadow: inset 0 -2px 0 var(--primary);
}
body[data-admin-shell] :is(input, textarea, select):is(.is-invalid, [aria-invalid="true"]):where(:not([type="checkbox"], [type="radio"], [type="hidden"])) {
  border-color: transparent !important;
  box-shadow: inset 0 -2px 0 #b00020;
}
/* Native WebKit selects suppress inset shadows; reserve one stable bottom edge instead. */
body[data-admin-shell] form select {
  border-bottom-style: solid;
  border-bottom-width: 2px;
}
body[data-admin-shell] form select:is(:focus, :focus-visible) {
  border-bottom-color: var(--primary) !important;
  box-shadow: none;
}
body[data-admin-shell] form select:is(.is-invalid, [aria-invalid="true"]) {
  border-bottom-color: #b00020 !important;
  box-shadow: none;
}
/* Auth fields own their surface on the wrapper; the inner input stays visually neutral. */
body[data-admin-shell] main .auth-form form .field-wrap,
body[data-admin-shell] main .auth-form form .field-wrap:is(:hover, :focus-within) {
  background: var(--input-bg);
  border-color: transparent;
  box-shadow: none;
}
body[data-admin-shell] main .auth-form form .field-wrap:has(input:is(:focus, :focus-visible)) {
  box-shadow: inset 0 -2px 0 var(--primary);
}
body[data-admin-shell] main .auth-form form .field-wrap:has(input:is(.is-invalid, [aria-invalid="true"])) {
  box-shadow: inset 0 -2px 0 #b00020;
}
body[data-admin-shell] main .auth-form form .field-wrap input,
body[data-admin-shell] main .auth-form form .field-wrap input:is(:hover, :focus, :focus-visible, .is-invalid, [aria-invalid="true"]) {
  background: transparent;
  border-color: transparent !important;
  outline: none;
  box-shadow: none;
}
/* Autofill uses the same soft field surface instead of a browser-white inner rectangle. */
body[data-admin-shell] :is(input, textarea, select):autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: inset 0 0 0 1000px #f1f5f9;
  caret-color: var(--text);
}
body[data-admin-shell] :is(input, textarea, select):autofill:focus {
  -webkit-box-shadow: inset 0 -2px 0 var(--primary), inset 0 0 0 1000px #f1f5f9;
}
body[data-admin-shell] :is(input, textarea, select):autofill:is(.is-invalid, [aria-invalid="true"]) {
  -webkit-box-shadow: inset 0 -2px 0 #b00020, inset 0 0 0 1000px #f1f5f9;
}
body[data-admin-shell] main .auth-form form .field-wrap input:autofill {
  -webkit-box-shadow: inset 0 0 0 1000px #f1f5f9;
}
/* List searches also use a wrapper surface so their icon and text share one cue. */
body[data-admin-shell] .page-search,
body[data-admin-shell] .page-search:focus-within {
  background: var(--input-bg);
  border-color: transparent;
  box-shadow: none;
}
body[data-admin-shell] .page-search:has(input:focus) {
  box-shadow: inset 0 -2px 0 var(--primary);
}
body[data-admin-shell] .page-search:has(input:is(.is-invalid, [aria-invalid="true"])) {
  box-shadow: inset 0 -2px 0 #b00020;
}
body[data-admin-shell] .page-search input,
body[data-admin-shell] .page-search input:is(:focus, :focus-visible, .is-invalid, [aria-invalid="true"]) {
  background: transparent;
  box-shadow: none;
}
/* Existing public form designs retain their initial surfaces and single underline. */
:is(.global-contact-form, .contact-page) [data-shared-contact-form] :is(input:not([type="checkbox"], [type="hidden"]), textarea, select),
:is(.global-contact-form, .contact-page) #contactForm :is(input:not([type="checkbox"], [type="hidden"]), textarea, select) {
  background-color: transparent;
  outline: none;
  box-shadow: none;
}
:is(.global-contact-form, .contact-page) :is([data-shared-contact-form], #contactForm) :is(input, textarea, select):is(:focus, :focus-visible) {
  border-bottom-color: #7821aa;
  outline: none;
  box-shadow: none;
}
:is(.global-contact-form, .contact-page) :is([data-shared-contact-form], #contactForm) :is(input, textarea, select):is(.is-invalid, [aria-invalid="true"]):not([type="checkbox"]) {
  border-color: transparent !important;
  border-bottom-color: #b00020 !important;
  outline: none;
  box-shadow: none;
}
:is(.global-contact-form, .contact-page) :is(input, textarea, select):autofill {
  -webkit-text-fill-color: #131313;
  -webkit-box-shadow: inset 0 0 0 1000px #f5f5f5;
}
/* The public profession picker draws its single underline on its container. */
:is(.global-contact-form, .contact-page) .profession:has(select:focus)::after {
  border-bottom-color: #7821aa;
}
:is(.global-contact-form, .contact-page) .profession:has(select:is(.is-invalid, [aria-invalid="true"]))::after {
  border-bottom-color: #b00020;
}
.newsletter-footer__row input[type="email"],
.newsletter-card input[type="email"],
.site-search__input {
  outline: none;
  box-shadow: none;
}
:is(.newsletter-footer__row, .newsletter-card) input[type="email"]:is(:focus, :focus-visible) {
  box-shadow: inset 0 -2px 0 #7821aa;
}
:is(.newsletter-footer__row, .newsletter-card) input[type="email"]:is(.is-invalid, [aria-invalid="true"]) {
  border-color: transparent !important;
  box-shadow: inset 0 -2px 0 #b00020;
}
.site-search__input:is(:focus, :focus-visible) {
  outline: none;
  box-shadow: inset 0 -2px 0 #ca72ff;
}
.site-search__input:is(.is-invalid, [aria-invalid="true"]) {
  border-color: #858585 !important;
  box-shadow: inset 0 -2px 0 #ffb7c0;
}
:is(.newsletter-footer__row, .newsletter-card) input[type="email"]:autofill {
  -webkit-text-fill-color: #171119;
  -webkit-box-shadow: inset 0 0 0 1000px #fff;
}
:is(.newsletter-footer__row, .newsletter-card) input[type="email"]:autofill:focus {
  -webkit-box-shadow: inset 0 -2px 0 #7821aa, inset 0 0 0 1000px #fff;
}
:is(.newsletter-footer__row, .newsletter-card) input[type="email"]:autofill:is(.is-invalid, [aria-invalid="true"]) {
  -webkit-box-shadow: inset 0 -2px 0 #b00020, inset 0 0 0 1000px #fff;
}
.site-search__input:autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: inset 0 0 0 1000px #151515;
}
.site-search__input:autofill:focus {
  -webkit-box-shadow: inset 0 -2px 0 #ca72ff, inset 0 0 0 1000px #151515;
}
.site-search__input:autofill:is(.is-invalid, [aria-invalid="true"]) {
  -webkit-box-shadow: inset 0 -2px 0 #ffb7c0, inset 0 0 0 1000px #151515;
}
input:is([type="checkbox"], [type="radio"]).is-invalid {
  box-shadow: none;
}
/* Keep native choices, file pickers and rich-text controls keyboard-visible. */
body[data-admin-shell] trix-editor {
  background-color: var(--white);
  border-color: var(--border) !important;
  box-shadow: none;
}
body[data-admin-shell] trix-editor:is(:focus, :focus-visible) {
  outline: none;
  box-shadow: inset 0 -2px 0 var(--primary);
}
body[data-admin-shell] trix-editor:is(.is-invalid, [aria-invalid="true"]) {
  box-shadow: inset 0 -2px 0 #b00020;
}
body[data-admin-shell] :is(input[type="checkbox"], input[type="radio"], input[type="file"], input[type="range"], input[type="color"]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
@media (forced-colors: active) {
  body[data-admin-shell] :is(input, textarea, select):focus,
  :is([data-shared-contact-form], #contactForm, .newsletter-footer__row, .newsletter-card, .site-search) :is(input, textarea, select):focus {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
  body[data-admin-shell] main .auth-form form .field-wrap:has(input:focus) {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}