:root {
  --form-control-height: 2.25rem;
  --form-control-radius: 0.5rem;
  --form-focus-ring: color-mix(in srgb, var(--accent, #ff936f) 72%, white 28%);
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
  box-sizing: border-box;
  max-width: 100%;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select) {
  min-height: var(--form-control-height);
}

:where(input, select, textarea, button, a):focus-visible {
  outline: 3px solid var(--form-focus-ring);
  outline-offset: 2px;
}

:where(input[type="tel"], input[autocomplete="tel"], input[name*="phone" i]) {
  inline-size: min(100%, 20ch);
}

:where(input[autocomplete="postal-code"], input[name*="zip" i], input[id*="zip" i]) {
  inline-size: min(100%, 11ch);
}

:where(input[autocomplete="address-level1"], input[name="state" i], input[id$="state" i]) {
  inline-size: min(100%, 12ch);
}

:where(input[type="date"], input[type="time"]) {
  inline-size: min(100%, 18ch);
}

:where(input[type="number"], input[inputmode="numeric"], input[inputmode="decimal"]) {
  inline-size: min(100%, 14ch);
  font-variant-numeric: tabular-nums;
}

:where(input[type="email"], input[type="url"], input[autocomplete="street-address"], input[autocomplete="address-line2"]) {
  inline-size: min(100%, 44ch);
}

:where(textarea) {
  min-height: 4.75rem;
  resize: vertical;
}

@media (max-width: 680px) {
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
    inline-size: 100%;
  }

  body .profile .additional-profile-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .profile .additional-profile-grid > label {
    grid-column: 1 / -1 !important;
    inline-size: 100% !important;
  }
}