/* 表单的正常状态不受影响；以下规则只在显式校验失败后出现。 */

:where(input, textarea, select)[data-validation-state="invalid"]:not(.choice-source) {
  border-color: color-mix(in srgb, var(--status-danger, #e26770) 78%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--status-danger, #e26770) 22%, transparent),
    0 10px 30px color-mix(in srgb, var(--status-danger, #e26770) 8%, transparent);
}

label.is-validation-invalid .choice-trigger {
  border-color: color-mix(in srgb, var(--status-danger, #e26770) 82%, transparent);
  box-shadow: inset 3px 0 color-mix(in srgb, var(--status-danger, #e26770) 68%, transparent);
}

.form-validity-message[data-validation-owner="client"] {
  position: relative;
  padding-inline-start: 18px;
  color: var(--status-danger, #ef8790);
  font-family: var(--font-ui);
  font-size: clamp(11px, 0.7vw, 13px);
  font-weight: 520;
  line-height: 1.55;
  letter-spacing: 0.03em;
}

.form-validity-message[data-validation-owner="client"]::before {
  position: absolute;
  top: 0.62em;
  left: 1px;
  width: 9px;
  height: 9px;
  border: 1px solid currentColor;
  content: "";
  opacity: 0.88;
  transform: rotate(45deg);
}

html[data-surface="member"][data-member-theme="garden"] .form-validity-message[data-validation-owner="client"],
html[data-surface="admin"] .form-validity-message[data-validation-owner="client"] {
  color: color-mix(in srgb, var(--status-danger, #b44f68) 82%, var(--ink, #2f2838));
}

html[data-surface="member"][data-member-theme="garden"] label.is-validation-invalid .choice-trigger,
html[data-surface="admin"] label.is-validation-invalid .choice-trigger {
  border-color: color-mix(in srgb, var(--status-danger, #b44f68) 72%, var(--garden-violet, #82669c));
}

@media (min-width: 2560px) {
  .form-validity-message[data-validation-owner="client"] {
    padding-inline-start: 22px;
    font-size: clamp(13px, 0.55vw, 16px);
  }

  .form-validity-message[data-validation-owner="client"]::before {
    width: 11px;
    height: 11px;
  }
}

@media (max-width: 640px) {
  .form-validity-message[data-validation-owner="client"] {
    padding-inline-start: 16px;
    font-size: 12px;
    line-height: 1.5;
  }
}

/* iOS 会放大字号不足 16px 的可编辑控件；只在窄屏触摸设备提升真实输入面。 */
@media (max-width: 760px) and (pointer: coarse) {
  input:is([type="text"], [type="email"], [type="password"], [type="number"], [type="search"]):not(.choice-source),
  textarea {
    font-size: 16px !important;
  }
}

@media (forced-colors: active) {
  :where(input, textarea, select)[data-validation-state="invalid"],
  label.is-validation-invalid .choice-trigger {
    outline: 2px solid Mark;
    outline-offset: 2px;
  }

  .form-validity-message[data-validation-owner="client"] {
    color: Mark;
  }
}