/* ============================================================
   COMPONENT · FIELD
   The .c-field group: a labelled control with optional hint and
   per-field validation error. Emitted by GTDFormBuilder. The
   control itself is styled by the element selectors in
   04-elements/_form.css (there is no .c-input class) — this file
   adds only the surrounding group, its states, and the fieldset.

   Birren signal discipline: a validation error is an ATTENTION
   signal, so it uses --color-alert (amber), NOT --color-danger
   (red is reserved for destructive actions).
   ============================================================ */

.c-field {
  display: block;
  margin-bottom: var(--space-5);
}

.c-field > * + * { margin-top: var(--space-2); }

/* Reuse the plaque label intent from the bare `label` element rule. */
.c-field__label {
  display: block;
  margin-bottom: var(--space-2);
}

/* Required mark — amber, decorative (the `required` attr carries semantics). */
.c-field__required {
  margin-left: var(--space-1);
  color: var(--color-alert);
  font-weight: var(--fw-bold);
}

.c-field__hint {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.c-field__error {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-alert);
  margin-top: var(--space-1);
}

/* ---- error state: amber border + inset glow (mirrors the focus rule) ---- */
.c-field.is-error input,
.c-field.is-error textarea,
.c-field.is-error select {
  border-color: var(--color-alert);
  box-shadow:
    var(--shadow-inset-deep),
    0 0 0 2px color-mix(in srgb, var(--color-alert) 40%, transparent);
}

/* ---- single-checkbox layout: control then inline label on one row ------- */
.c-field--check .c-field__check-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* The inline check label is readable normal-case text, NOT the plaque label. */
.c-field__check-label {
  display: inline;
  margin: 0;
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-normal);
  text-transform: none;
  color: var(--color-text-strong);
  cursor: pointer;
}

/* ---- fieldset (radio group): reset chrome, stack the options ------------ */
.c-fieldset {
  border: none;
  padding: 0;
  margin-bottom: var(--space-5);
}

.c-fieldset .c-field__option { margin-top: var(--space-2); }

.c-field__option .c-radio__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-normal);
  text-transform: none;
  color: var(--color-text-strong);
  cursor: pointer;
}