/* Validation, flash, and pending-submission feedback. */

[role="alert"] {
  margin-block: var(--space-4);
  padding: var(--space-3) var(--space-4);
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-md);
}

[role="alert"] h2 { font-size: 1rem; }

.flash {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: space-between;
  width: min(100% - 2rem, 56rem);
  margin-inline: auto;
  margin-block: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
}

.flash p { margin: 0; }

.flash-dismiss {
  font-size: 1.125rem;
  line-height: 1;
  padding: 0 var(--space-1);
}

/* Pending-submission wait state (H3). Turbo disables the submitting
   control while its request is in flight; aria-busy is set on the form
   by the global turbo:submit-start listener.

   Per response-time research (Nielsen; the Doherty Threshold), feedback
   shown during a fast interaction makes it feel slower. The transition
   delays the dim until the wait exceeds ~250 ms, so quick submissions
   never flash a state change; restoration is immediate because the
   un-busy form has no matching transition. Labels are deliberately not
   swapped: a text change of different length reads as flicker. */
form[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 120ms ease-in 250ms;
}

/* The submitting control itself: disabled by Turbo, styled here so the
   state change reads as "working", not broken. */
form[aria-busy="true"] button[type="submit"],
form[aria-busy="true"] input[type="submit"] {
  cursor: progress;
}

.flash-success {
  color: var(--color-success-text);
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
}

.flash-warning {
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
}

.flash-danger {
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
}

.flash-neutral {
  color: var(--color-text);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-muted);
}