/* The form part's own sheet: the outcome its submit gate mints under ANY form, hand-authored included, so a page with no form part on it still reads legibly. */
.sk-form-success {
  --sk-form-success-ink: color-mix(in srgb, var(--sk-accent) 60%, var(--sk-ink));
  padding: 0.8rem 1rem;
  border-radius: var(--sk-control-radius);
  background: color-mix(in srgb, var(--sk-accent) 12%, var(--sk-bg));
}
.sk-form-error {
  --sk-form-error-ink: color-mix(in srgb, var(--sk-danger) 60%, var(--sk-ink));
  padding: 0.8rem 1rem;
  border-radius: var(--sk-control-radius);
  background: color-mix(in srgb, var(--sk-danger) 12%, var(--sk-bg));
}
.sk-form-success-icon {
  color: var(--sk-form-success-ink);
}
.sk-form-error-icon {
  color: var(--sk-form-error-ink);
}
.sk-form-success-text,
.sk-form-error-text {
  font-size: var(--kit-type-base);
  line-height: var(--kit-lead-body);
}
/* The arrangement too: the gate mints this row on a page that may carry no field part to arrange it. */
.sk-form-success,
.sk-form-error {
  display: flex;
  align-items: flex-start;
  gap: var(--kit-space-2);
}
.sk-form-success-icon,
.sk-form-error-icon {
  flex: none;
  /* Explicit body metrics, never 1em: the icon's em is inherited. */
  margin-top: calc((var(--kit-type-base) * var(--kit-lead-body) - var(--sk-icon-size)) / 2);
}
.sk-form-outcome {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: var(--kit-space-3);
  transition:
    grid-template-rows 180ms var(--sk-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    opacity 180ms var(--sk-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    margin-top 180ms var(--sk-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
@starting-style {
  .sk-form-outcome {
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 0;
  }
  /* Under the swap the FORM's height carries the vertical motion (below), so the card only fades. */
  [data-sk-swap] .sk-form-outcome {
    grid-template-rows: 1fr;
    margin-top: var(--kit-space-3);
  }
}
.sk-form-outcome-inner {
  overflow: hidden;
  min-height: 0;
}
/* The success SWAP: the script pins the form at the fields' height and releases it to the card's, so the fields never snap away. The height transition rides INLINE from form-pipeline.js, not here: the form is an entrance unit whose generated armed rules own its `transition` shorthand at higher specificity. */
[data-sk-swap] {
  overflow: hidden;
}

/* Clipped, not hidden: hiding a live region silences it. */
.sk-announce-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}