/* Form pieces shared by sign in and sign up. The page frames live in login.css and signup.css. */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  max-width: 22rem;
}

.auth-title {
  margin: 0;
  font: var(--type-page-title);
  letter-spacing: var(--tracking-tight);
}

.auth-lede {
  margin: var(--space-3) 0 0;
  color: var(--muted-foreground);
  font: var(--type-body);
}

.auth-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.field-head a {
  color: var(--muted-foreground);
  font: var(--type-caption);
}

.field-note {
  color: var(--muted-foreground);
  font: var(--type-caption);
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--muted-foreground);
  font: var(--type-caption);
}

.consent a {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-alt {
  margin: 0;
  color: var(--muted-foreground);
  font: var(--type-body);
}

.auth-alt a {
  color: var(--foreground);
  font-weight: var(--font-medium);
}