/**
 * Etch Form Builder — the base look for forms built BEFORE 0.41.5. GENERATED, do not edit: the source is
 * builder-ui/src/styles/defaults.js, written here by `npm run build` (builder-ui/scripts/build-defaults-css.mjs).
 *
 * Until 0.41.4 the look shipped in runtime.css. Since 0.41.5 it is Etch block CSS, which a form only gets once it
 * is rebuilt (Insert/Refresh in the Etch panel); its root then carries data-ef-styles="etch". This file styles
 * every form whose root does NOT, so a page nobody refreshed yet keeps its look. The scope sits inside :where()
 * and each class, in the rule's own selector and in its nested ones, also matches the data-ef-* markers that carry
 * it (a form saved in Etch's edit mode before 0.41.0 can have lost a class, #479), inside :is(): every rule has the
 * specificity of the same default unscoped (as in runtime.css 0.41.0, except the span modifiers, the textarea
 * row, the container grid and the gallery, which defaults.js settles by specificity on purpose).
 * TODO(debt): remove at 1.0, when every form has been rebuilt (#738).
 */

:is(.etchform, [data-ef-root]):where(:not([data-ef-styles])) {
  box-sizing: content-box;
  width: 100%;
  width: -moz-available;
  width: -webkit-fill-available;
  width: stretch;
  max-width: 40rem;
  margin-inline: auto;
}

:where([data-ef-root]:not([data-ef-styles])) :is(.etchform__form, [data-ef-form]) {
  display: flex;
  flex-direction: column;
  gap: var(--space-m, 1.25rem);
  padding: var(--space-l, 2rem);
  background: var(--base-ultra-light, #fff);
  border: 1px solid var(--border-color-light, #e4e4e7);
  border-radius: var(--radius, 14px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
  container-type: inline-size;
}

:where([data-ef-root]:not([data-ef-styles])) :is(.etchform__head, [data-ef-head]) {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-block-end: 0.25rem;
}

:where([data-ef-root]:not([data-ef-styles])) :is(.etchform__heading, [data-ef-heading]) {
  margin: 0;
  line-height: 1.15;
}

:where([data-ef-root]:not([data-ef-styles])) :is(.etchform__description, [data-ef-description]) {
  margin: 0;
  color: var(--text-dark-muted, #555);
}

:where([data-ef-root]:not([data-ef-styles])) :is(.etchform__grid, [data-ef-grid]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-inline-size: 0;
  gap: var(--space-m, 1.25rem);

  @container (min-width: 28rem) {
    grid-template-columns: repeat(12, minmax(0, 1fr));

    & > :not(:is(.etchform__field, [data-ef-field])) {
      grid-column: 1 / -1;
    }
  }
}

:where([data-ef-root]:not([data-ef-styles])) :is(.etchform__field, [data-ef-field]) {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;

  &:has(.etchform__control:user-invalid:not(:focus)) :is(.etchform__label, [data-ef-label], [data-ef-legend]) {
    color: var(--danger, #dc3545);
  }

  &:not([hidden]):has(> input[type="checkbox"][data-ef-control]) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.6rem;

    & > input[type="checkbox"] {
      order: -1;
      flex: none;
      width: auto;
      margin: 0;
      padding: 0;
    }

    & > label {
      flex: 1 1 0;
      min-inline-size: 0;
    }

    & > :is(.etchform__help, [data-ef-help]),
    & > .etchform__error {
      flex-basis: 100%;
    }
  }

  @container (min-width: 28rem) {
    grid-column: span 12;

    &:is(.etchform__field, [data-ef-field]):has(textarea) {
      grid-column: 1 / -1;
    }
  }
}

:where([data-ef-root]:not([data-ef-styles])) .etchform__field--span-1 {
  @container (min-width: 28rem) {
    &:is(.etchform__field, [data-ef-field]) {
      grid-column: span 1;
    }
  }
}

:where([data-ef-root]:not([data-ef-styles])) .etchform__field--span-2 {
  @container (min-width: 28rem) {
    &:is(.etchform__field, [data-ef-field]) {
      grid-column: span 2;
    }
  }
}

:where([data-ef-root]:not([data-ef-styles])) .etchform__field--span-3 {
  @container (min-width: 28rem) {
    &:is(.etchform__field, [data-ef-field]) {
      grid-column: span 3;
    }
  }
}

:where([data-ef-root]:not([data-ef-styles])) .etchform__field--span-4 {
  @container (min-width: 28rem) {
    &:is(.etchform__field, [data-ef-field]) {
      grid-column: span 4;
    }
  }
}

:where([data-ef-root]:not([data-ef-styles])) .etchform__field--span-5 {
  @container (min-width: 28rem) {
    &:is(.etchform__field, [data-ef-field]) {
      grid-column: span 5;
    }
  }
}

:where([data-ef-root]:not([data-ef-styles])) .etchform__field--span-6 {
  @container (min-width: 28rem) {
    &:is(.etchform__field, [data-ef-field]) {
      grid-column: span 6;
    }
  }
}

:where([data-ef-root]:not([data-ef-styles])) .etchform__field--span-7 {
  @container (min-width: 28rem) {
    &:is(.etchform__field, [data-ef-field]) {
      grid-column: span 7;
    }
  }
}

:where([data-ef-root]:not([data-ef-styles])) .etchform__field--span-8 {
  @container (min-width: 28rem) {
    &:is(.etchform__field, [data-ef-field]) {
      grid-column: span 8;
    }
  }
}

:where([data-ef-root]:not([data-ef-styles])) .etchform__field--span-9 {
  @container (min-width: 28rem) {
    &:is(.etchform__field, [data-ef-field]) {
      grid-column: span 9;
    }
  }
}

:where([data-ef-root]:not([data-ef-styles])) .etchform__field--span-10 {
  @container (min-width: 28rem) {
    &:is(.etchform__field, [data-ef-field]) {
      grid-column: span 10;
    }
  }
}

:where([data-ef-root]:not([data-ef-styles])) .etchform__field--span-11 {
  @container (min-width: 28rem) {
    &:is(.etchform__field, [data-ef-field]) {
      grid-column: span 11;
    }
  }
}

:where([data-ef-root]:not([data-ef-styles])) .etchform__field--span-12 {
  @container (min-width: 28rem) {
    &:is(.etchform__field, [data-ef-field]) {
      grid-column: span 12;
    }
  }
}

:where([data-ef-root]:not([data-ef-styles])) :is(.etchform__label, [data-ef-label], [data-ef-legend]) {
  font-weight: 600;
  font-size: var(--text-s, 0.9rem);
  line-height: 1.2;
}

:where([data-ef-root]:not([data-ef-styles])) .etchform__control {
  width: 100%;
  font: inherit;
  font-size: var(--text-m, 1rem);
  line-height: 1.4;
  padding: 0.7em 0.9em;
  color: var(--base-ultra-dark, #18181b);
  background: var(--base-ultra-light, #fff);
  border: 1px solid var(--border-color-light, #cbced4);
  border-radius: var(--radius, 10px);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;

  &:focus {
    outline: none;
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px color-mix( in srgb, var(--primary, #2563eb) 22%, transparent );
  }

  &:user-invalid:not(:focus) {
    border-color: var(--danger, #dc3545);
  }
}

:where([data-ef-root]:not([data-ef-styles])) .etchform__control--area {
  min-height: 8rem;
  resize: vertical;
}

:where([data-ef-root]:not([data-ef-styles])) :is(.etchform__group, [data-ef-group]) {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

:where([data-ef-root]:not([data-ef-styles])) :is(.etchform__option, [data-ef-option]) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  font-size: var(--text-m, 1rem);
  line-height: 1.3;

  & input {
    flex: none;
    margin: 0;
  }
}

:where([data-ef-root]:not([data-ef-styles])) :is(.etchform__help, [data-ef-help]) {
  margin: 0;
  color: var(--text-dark-muted, #555);
  font-size: var(--text-s, 0.9rem);
  line-height: 1.35;
}

:where([data-ef-root]:not([data-ef-styles])) :is(.etchform__submit, [data-ef-submit]) {
  align-self: flex-start;
  margin-block-start: 0.25rem;
}

:where([data-ef-root]:not([data-ef-styles])) :is(.etchform__captcha, [data-ef-captcha]) {
  margin-block-start: 0.25rem;
}

:where([data-ef-root]:not([data-ef-styles])) :is(.etchform__rich, [data-ef-rich]) {
  border: 1px solid var(--border-color-light, #cbced4);
  border-radius: var(--radius, 10px);

  &:focus {
    outline: none;
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px color-mix( in srgb, var(--primary, #2563eb) 22%, transparent );
  }
}

:where([data-ef-root]:not([data-ef-styles])) :is(.etchform__file, [data-ef-file]) {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;

  & input[type="file"] {
    width: 100%;
    font: inherit;
    font-size: var(--text-m, 1rem);
    color: var(--base-ultra-dark, #18181b);
    background: var(--base-ultra-light, #fff);
    border: 1px solid var(--border-color-light, #cbced4);
    border-radius: var(--radius, 10px);
    padding: 0.6em 0.9em;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;

    &:focus {
      outline: none;
      border-color: var(--primary, #2563eb);
      box-shadow: 0 0 0 3px color-mix( in srgb, var(--primary, #2563eb) 22%, transparent );
    }
  }

  & [data-ef-gallery] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    &:empty {
      display: none;
    }
  }
}

:where([data-ef-root]:not([data-ef-styles])) :is(.etchform__step, [data-ef-step]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-inline-size: 0;
  gap: var(--space-m, 1.25rem);

  @container (min-width: 28rem) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-column: 1 / -1;

    & > :not(:is(.etchform__field, [data-ef-field])) {
      grid-column: 1 / -1;
    }
  }
}

:where([data-ef-root]:not([data-ef-styles])) :is(.etchform__progress, [data-ef-progress]) {
  display: flex;
  gap: var(--space-s, 0.75rem);
  margin-block-end: var(--space-m, 1rem);
}

:where([data-ef-root]:not([data-ef-styles])) :is(.etchform__progress-item, [data-ef-progress-item]) {
  flex: 1;
  padding-block-end: 0.4rem;
  border-block-end: 2px solid var(--border-color-light, #e4e4e7);
  color: var(--text-dark-muted, #555);
  font-size: var(--text-s, 0.9rem);
  text-align: center;

  &.etchform__progress-item--active {
    border-color: var(--primary, #2563eb);
    color: var(--base-ultra-dark, #18181b);
    font-weight: 600;
  }

  &.etchform__progress-item--done {
    border-color: var(--success, #198754);
  }
}

:where([data-ef-root]:not([data-ef-styles])) :is(.etchform__stepnav, [data-ef-stepnav]) {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s, 0.75rem);
  margin-block-start: 0.25rem;
}

:where([data-ef-root]:not([data-ef-styles])) :is(.etchform__section, [data-ef-section]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-inline-size: 0;
  gap: var(--space-m, 1.25rem);

  @container (min-width: 28rem) {
    grid-template-columns: repeat(12, minmax(0, 1fr));

    & > :not(:is(.etchform__field, [data-ef-field])) {
      grid-column: 1 / -1;
    }
  }
}

:where([data-ef-root]:not([data-ef-styles])) :is(.etchform__divider, [data-ef-divider]) {
  margin-inline: 0;
}