/* R19. Only the six existing text inputs in the two forms.
   No value, autocomplete, validation or submission changes.
   Native autofill still requires physical-browser acceptance testing. */

#homeSubscribe #homeEmail {
  caret-color: #f6f4ed;
}
#homeSubscribe #homeEmail:focus {
  outline: none;
}
#homeSubscribe #homeEmail:focus-visible {
  box-shadow: 0 2px 0 #f6f4ed;
}
#homeSubscribe #homeEmail:is(:autofill, :-webkit-autofill) {
  appearance: none;
  -webkit-appearance: none;
  -webkit-text-fill-color: #f6f4ed;
  caret-color: #f6f4ed;
}

/* A real input remains inside this presentation span. The span reproduces
   its existing 60px box/baseline; labels, IDs and error nodes are unchanged.
   Without background-clip support it has no box, decoration or effect. */
#request-form .r19-field-surface {
  display: contents;
}
#request-form .r19-field-surface > input {
  caret-color: #222a22;
  --r19-focus-line: #46573c;
}
#request-form .r19-field-surface > input:focus {
  outline: none;
}
#request-form .r19-field-surface > input:focus-visible {
  box-shadow: inset 2px 2px 6px #20282010,
              inset -2px -2px 6px #fff,
              0 2px 0 var(--r19-focus-line);
}
#request-form .r19-field-surface > input[aria-invalid="true"] {
  --r19-focus-line: #a04437;
}
#request-form .r19-field-surface > input:is(:autofill, :-webkit-autofill) {
  -webkit-text-fill-color: #222a22;
  caret-color: #222a22;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  /* The home field stays transparent, including when it is autofilled.
     The browser's compulsory background is clipped instead of covered. */
  #homeSubscribe #homeEmail {
    -webkit-background-clip: text;
    background-clip: text;
  }
  /* Art Shopping already uses these opaque base colours plus inset shading
     in assets/v4/sections.css. Keep that exact surface behind the input;
     the existing input border, padding, font and shading stay untouched.
     Moving only the base paint avoids an added opaque inset fill. */
  #request-form .r19-field-surface {
    display: inline-block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 60px;
    vertical-align: baseline;
    border-radius: 13px;
    background: #e9ebe3;
    transition: background .2s;
  }
  #request-form .r19-field-surface:hover {
    background: #e7eae0;
  }
  #request-form .r19-field-surface:focus-within {
    background: #f6f7f1;
  }
  #request-form .r19-field-surface > input {
    -webkit-background-clip: text;
    background-clip: text;
  }
}

@media (prefers-reduced-motion: reduce) {
  #request-form .r19-field-surface { transition: none; }
}
@media (forced-colors: active) {
  #request-form .r19-field-surface { background: transparent !important; }
  #homeSubscribe #homeEmail,
  #request-form .r19-field-surface > input {
    forced-color-adjust: auto;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    background: Field !important;
    color: FieldText !important;
    -webkit-text-fill-color: FieldText !important;
    caret-color: FieldText !important;
    box-shadow: none !important;
  }
  #homeSubscribe #homeEmail:focus,
  #request-form .r19-field-surface > input:focus {
    outline: 2px solid Highlight;
    outline-offset: 3px;
  }
}