/* Shared focus treatment for the portal and the embedded decision forms. */
:root {
  --field-focus-color: #005ba9;
  --field-focus-halo: rgb(0 91 169 / 18%);
}

:is(input:not([type="hidden"], [type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"]), textarea, select),
:is(.login-input, .search-box, .field) {
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}

:is(input:not([type="hidden"], [type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"]), textarea, select):focus,
:is(.login-input, .search-box, .field):focus-within {
  outline: none !important;
  border-color: var(--field-focus-color) !important;
  box-shadow: 0 0 0 3px var(--field-focus-halo);
}

/* Icon and label containers own the ring, so their inner input has no second ring. */
:is(.login-input, .search-box, .field) :is(input, textarea, select):focus {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  :is(input, textarea, select, .login-input, .search-box, .field) { transition: none; }
}

/* System high-contrast modes can suppress shadows; retain a visible focus indicator. */
@media (forced-colors: active) {
  :is(input, textarea, select):focus,
  :is(.login-input, .search-box, .field):focus-within {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }
  :is(.login-input, .search-box, .field) :is(input, textarea, select):focus {
    outline: none !important;
  }
}