/*
 * States the static mockups never had.
 *
 * Direction 2 forms only ever alert()ed, so the approved stylesheet has no rule
 * for a submitted form or a rejected one. Those two states are WordPress's, not
 * the client's, which is why they live here rather than in site.css — that file
 * is synced from docs/directions/direction-2-editorial/ and must stay the
 * client's own. Everything below is built from the direction's tokens so the
 * states still read as part of the same design.
 */

/* Accepted — replaces the whole form in place. */
.form-sent {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--red);
  border-radius: var(--radius-sm);
  background: var(--red-wash);
  padding: clamp(22px, 3vw, 34px);
}
.form-sent h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--heading, var(--ink));
  margin-bottom: 10px;
}
.form-sent p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0;
  max-width: 46ch;
}

/* Rejected — sits at the top of the form, above the steps. */
.form-errors {
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  background: var(--red-wash);
  padding: 16px 18px;
  margin-bottom: 24px;
}
.form-errors p {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--red);
  margin: 0 0 8px;
}
.form-errors ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
.form-errors li {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  padding-left: 16px;
  position: relative;
}
.form-errors li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--red);
}