/*
 * Authentication screens: login, forgot/reset password and change password - they all
 * use the same centred card and form, so every one follows the breakpoints below.
 * Mobile-first like base.css; breakpoints per the constitution: tablet 481–1024px,
 * desktop from 1025px.
 */

.auth-card {
  max-width: 28rem;
  margin: 0 auto;
}

.auth-form .button {
  margin-top: var(--space-2);
}

.auth-links {
  margin-top: var(--space-4);
  font-size: var(--font-size-small);
}

/* Tablet: 481px–1024px */
@media (min-width: 481px) {
  .auth-card {
    margin-top: var(--space-6);
  }
}

/* Desktop: from 1025px */
@media (min-width: 1025px) {
  .auth-card {
    margin-top: var(--space-8);
  }
}