/* Loads FIRST inside parts (FAMILY_KIND_ORDER, load.ts): the other
 * control kinds emit this vocabulary, so their sheets must come after it. */

/* `vocabulary-define:` below marks a rule narrowing a class ANOTHER unit defines: the form
 * part (shared/form-pipeline) mints and paints the outcome markup for any form, and this part
 * arranges what it renders. */

/* Base paints the row and its ink; data-layout seats the glyph. */
/* vocabulary-define: */
.sk-form-success-text {
  margin: 0;
  max-width: var(--sk-measure);
}
/* vocabulary-define: */
.sk-form-success[data-layout="above"] {
  flex-direction: column;
  gap: var(--kit-space-1);
  padding: var(--kit-space-3) 1rem;
}
/* vocabulary-define: */
.sk-form-success[data-layout="above"] .sk-form-success-icon {
  width: calc(var(--sk-icon-size) * 1.8);
  height: calc(var(--sk-icon-size) * 1.8);
  margin-top: 0;
}

/* Carries WHOLE-FORM failures; field-level rejections keep the attached
   * housing below. */
/* vocabulary-define: */
.sk-form-error-text {
  margin: 0;
  max-width: var(--sk-measure);
}
/* vocabulary-define: */
.sk-form-error[data-layout="above"] {
  flex-direction: column;
  gap: var(--kit-space-1);
  padding: var(--kit-space-3) 1rem;
}
/* vocabulary-define: */
.sk-form-error[data-layout="above"] .sk-form-error-icon {
  width: calc(var(--sk-icon-size) * 1.8);
  height: calc(var(--sk-icon-size) * 1.8);
  margin-top: 0;
}

/* Built by field.js and painted here; the script guards the pairing by
 * returning when there is no row to attach to. */
.sk-field {
  display: block;
  margin-bottom: var(--kit-space-3);
}

.sk-field-label {
  display: block;
  margin-bottom: var(--kit-space-1);
  /* The kit's detail label voice. */
  font-size: var(--sk-text-detail-size);
  font-weight: var(--kit-weight-eyebrow);
  letter-spacing: calc(var(--kit-track-eyebrow) * 1em);
  text-transform: var(--kit-caps-eyebrow);
  color: var(--sk-ink-muted);
}
.sk-field-req {
  color: var(--sk-accent);
  margin-left: 0.25em;
}

/* data-invalid on the part root; the {.exists} gate leaves the attribute EMPTY
 * when clean, so only a real message opens it. */
.sk-field[data-invalid="true"] :is(.sk-input, .sk-textarea, .sk-select, .sk-file) {
  border-color: var(--sk-danger);
}
.sk-field[data-invalid="true"] :is(.sk-input, .sk-textarea, .sk-file):has(+ .sk-field-error),
.sk-field[data-invalid="true"] .sk-select-wrap:has(+ .sk-field-error) .sk-select,
.sk-field[data-invalid="true"] .sk-date-wrap:has(+ .sk-field-error) .sk-input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
/* A grid row (0fr to 1fr) plus opacity tweens the banner open without
 * measuring. */
.sk-field-error {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin: 0;
  transition:
    grid-template-rows 150ms ease,
    opacity 150ms ease,
    margin-top 150ms ease;
}
.sk-field[data-invalid="true"] .sk-field-error {
  grid-template-rows: 1fr;
  opacity: 1;
  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));
}
.sk-field-error-inner {
  display: block;
  overflow: hidden;
  min-height: 0;
}
.sk-field-error-banner {
  display: flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.6rem 0.9rem;
  background: var(--sk-danger);
  color: var(--sk-danger-ink);
  border-radius: var(--sk-control-radius);
  /* An error message is field furniture, never body copy. */
  font-size: var(--sk-text-detail-size);
  font-weight: 600;
}
.sk-field
  :is(.sk-input, .sk-textarea, .sk-file, .sk-select-wrap, .sk-date-wrap)
  + .sk-field-error
  .sk-field-error-banner {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* The margin is part of the OPEN state, so a closed banner adds no space. */
.sk-field[data-invalid="true"] .sk-check + .sk-field-error {
  margin-top: var(--kit-space-2);
}
.sk-field-error-x {
  flex: none;
  width: 0.8em;
  height: 0.8em;
}