[data-form-error-summary="true"] {
  scroll-margin-block: 1.5rem;
}

[data-form-error-summary="true"]:focus {
  outline: 3px solid color-mix(in srgb, #b42318 45%, transparent);
  outline-offset: 3px;
}

[data-form-error-summary="true"] a {
  color: inherit;
  font-weight: 700;
}

form[data-form-state="submitting"] {
  cursor: progress;
}

form[data-form-state="submitting"] :is(button[type="submit"], input[type="submit"], button:not([type])) {
  cursor: progress;
}

:is(button, input[type="submit"])[data-form-submitting="true"] {
  position: relative;
  opacity: .78;
}

:is(button, input[type="submit"])[data-form-submitting="true"]::after {
  display: inline-block;
  width: .8em;
  height: .8em;
  margin-inline-start: .55em;
  border: .14em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  vertical-align: -.08em;
  animation: form-busy-spin .7s linear infinite;
}

[data-ui="progress-status"] {
  display: grid;
  gap: .4rem;
}

[data-ui="progress-status"] p {
  margin: 0;
}

[data-ui="progress-status"] progress {
  width: min(100%, 32rem);
}

[data-ui="progress-status"] [data-progress-value] {
  font-variant-numeric: tabular-nums;
}

@keyframes form-busy-spin {
  to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
  :is(button, input[type="submit"])[data-form-submitting="true"]::after {
    border-right-color: currentColor;
    border-style: dotted;
    animation: none;
  }
}

@media (forced-colors: active) {
  [data-form-error-summary="true"]:focus {
    outline: 3px solid Highlight;
  }
}