/**
 * Vanceli - Auth pages layout (login, get-started, reset-password)
 * Depends on: tokens.css, base.css, components.css
 * The card shell itself (.auth-shell / .auth-main / .auth-card) lives in
 * components.css since it is reused verbatim across all three auth pages.
 */

.field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.field-row .field__label {
  margin-bottom: 0;
}

/* "Forgot Password?" is a link button (design.md §7 "Link button"), so its label
   is text-sm/14px like every other button label. It was text-xs/12px, which was
   both off-ladder for a button and under §2.2's 14px floor. Typography only -
   the control keeps its position in the field row. */
.field-forgot {
  font-size: var(--text-sm);
  font-weight: 600;
}

.auth-card__step[hidden] {
  display: none;
}

.otp-context {
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}

.otp-context strong {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-weight: 600;
}

.step-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: var(--space-4);
}

.step-back:hover {
  color: var(--accent);
}

.step-back svg {
  width: 16px;
  height: 16px;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.legend-heading {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-4);
}