/* ============================================================================
   COMPONENT: form — labeled fields, hints, and field-level errors.
   Inputs/labels themselves are styled in base/base.css (semantic-first);
   this adds the field wrapper rhythm and the error/hint text patterns.
   ========================================================================== */

@layer components {
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .field__hint {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  /* Error text is itself the non-color signal; color reinforces it. */
  .field__error {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--status-danger-fg);
  }

  /* A labelled checkbox/radio row with a comfortable touch target. */
  .choice {
    --cluster-gap: var(--space-2xs);
    align-items: center;
    min-block-size: var(--touch-target);
    cursor: pointer;
    font-weight: var(--weight-normal);
  }

  .auth-page__mark {
    display: inline-flex;
    justify-content: center;
    color: var(--accent);
  }

  .auth-page__brand {
    font-size: var(--text-2xl);
  }
}