/* Sign in / password reset: a centred column, title above the card. */

.auth {
  width: 100%;
  max-width: var(--measure-auth);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-xl) 0;
  /* Centred in what is left of the viewport rather than pinned under the top
     edge with the rest of the page empty beneath it. `svh` is the conservative
     one — it keeps a phone's collapsing toolbar from pushing the card off. */
  min-height: calc(100vh - 10rem);
  min-height: calc(100svh - 10rem);
}

/* The column is the measure on this page, so the card fills it rather than
   centring a second, narrower box inside it. `margin: 0` matters as much as the
   width: a flex child with an `auto` side margin shrink-wraps to its content
   instead of stretching, which is what kept this card narrow. */
.auth .card {
  max-width: none;
  margin: 0;
  padding: var(--space-xl);
  gap: var(--space-lg);
}

.auth .form {
  gap: var(--space-lg);
}

.auth__intro {
  text-align: center;
}

.auth__title {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
}

.auth__sub {
  margin: 6px 0 0;
  font-size: var(--text-md);
  color: var(--text-secondary);
}

.auth .button {
  width: 100%;
}