:where(.field) {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  margin-block: 0.5lh 1lh;
  gap: 0.125lh;
  text-align: start;

  & + .field {
    margin-block-start: 1lh;
  }

  input:not([type="checkbox"], [type="radio"], [type="reset"], [type="submit"]),
  select,
  textarea {
    width: 100%;
  }

  label {
    line-height: 1.1;
    text-align: inherit;
  }

  & > span {
    width: 100%;
  }

  /* when a div.field's input is focussed, dim the label */
  label:has(+ :focus-within) {
    color: var(--gray-text);
  }

  ::placeholder {
    color: var(--gray-text);
    opacity: 0.6;
    font-style: italic;
  }

  &:has(:required) label::after {
    content: " *";
    color: var(--color-red);
  }

  &:has(.error) {
    label,
    .error.message {
      color: var(--color-red);
    }

    :where(input, textarea, select) {
      border-color: var(--color-red);
    }

    .with-icon svg * {
      stroke: var(--color-red);
    }
  }

  .field-message {
    margin: 0;
    font-size: var(--font-size-xs);
    text-align: match-parent;
    text-align: inherit;
  }
}

:where(.fields) {
  display: grid;
  gap: 0.25lh;
  grid-auto-columns: 1fr;
  grid-template-columns: repeat(auto-fit, minmax(25ch, 1fr));
  margin-block: 0.25lh;
  padding: 0;

  .label {
    grid-row: 1 / 2;
    grid-column: 1 / -1;
    margin: 0;
    text-align: start;
  }

  .field {
    grid-row: auto;
    margin-block: 0;
    width: auto;
  }

  .message {
    grid-row: auto;
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
    font-size: var(--font-size-xs);
    text-align: inherit;

    &.error {
      color: var(--color-red);
    }
  }
}

:where(.fieldset) {
  margin-block-start: 1lh;
  .legend {
    font-size: var(--font-size-m);
    font-weight: 600;
    line-height: 1.5;
    text-align: start;
    margin-block: 0.25lh 0;

    & + .field {
      margin-block-start: 0.25rem;
    }
  }
}