/* FormField: label above (700 14px), 44px field, help below in body-sm ink-muted. */
.form { display: flex; flex-direction: column; gap: var(--space-6); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 14px; line-height: 20px; font-weight: 700; }
.field__input {
  height: 44px;
  width: 100%;
  border: 2px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-raised);
  padding: 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink);
  transition: border-color var(--transition);
}
.field__input:focus-visible { outline-offset: 1px; }
.field__help { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.field__error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--danger);
}
.field__error .icon { width: 14px; height: 14px; stroke-width: 2.5; }
.field--error .field__input { border-color: var(--danger); }

.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.checkbox input { width: 22px; height: 22px; margin: 0; accent-color: var(--brand); }

.form__links {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-muted);
}

/* Avatar picker: radio discs */
.avatar-picker { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.avatar-picker__legend { padding: 0; margin-bottom: 6px; }
.avatar-picker__options { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.avatar-picker__option { position: relative; cursor: pointer; }
.avatar-picker__option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.avatar-picker__option .avatar {
  outline: 3px solid transparent;
  outline-offset: 3px;
  transition: outline-color var(--transition);
}
.avatar-picker__option input:checked + .avatar { outline-color: var(--brand); }
.avatar-picker__option input:focus-visible + .avatar { outline-color: var(--info); }