/*
 * Form element row. Composes a label + control + (helper or error) with
 * accessible wiring (label `for`/id, aria-describedby on the control).
 *
 * Doesn't know or care which control it wraps — works with `.c-input`,
 * `.c-textarea`, `.c-select`, native checkbox/radio, etc.
 */

.c-form-element {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.c-form-element + .c-form-element {
  margin-top: 16px;
}

.c-form-element__label {
  font-family: var(--corza-font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--corza-ink);
  line-height: 1.3;
}

.c-form-element__required {
  color: var(--corza-error);
  margin-left: 2px;
}

.c-form-element__helper {
  font-size: 12px;
  color: var(--corza-mid);
  line-height: 1.4;
  margin-top: 2px;
}

.c-form-element__error {
  font-size: 12px;
  color: var(--corza-error);
  font-weight: 500;
  line-height: 1.4;
  margin-top: 2px;
}

/*
 * Inline layout: label sits to the left of the control. Useful for
 * checkbox/radio rows and dense edit-in-place patterns.
 */
.c-form-element--inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.c-form-element--inline .c-form-element__label {
  margin: 0;
}

/*
 * Error state on the wrapper. Doesn't restyle the control directly —
 * the control should also receive `.c-input--error` (or equivalent) so
 * the wrapper isn't load-bearing for the visual.
 */
.c-form-element.is-invalid .c-form-element__label {
  color: var(--corza-ink);
}