/* Authentication page styles (Devise) */

.auth-page {
  display: grid;
  place-items: center;
  padding: var(--bp-s-6) 0 var(--bp-s-7);
}

/* Not a --bp-w-* page tier: those are the three top-level page containers, all
   1200px. This is a card measure — the narrow single-column form column that
   log in / sign up / password reset all share.

   There is no global box-sizing reset (see the note on .bp-btn), and the card
   takes 1rem of padding + a 1px border from the shared `.card` rule in
   application.css. Content-box therefore rendered this 440px card at 474px,
   which overflowed the 90%-wide `.container` at 360px and gave the login screen
   a horizontal scrollbar on a phone. Border-box makes the measure literal. */
.auth-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 440px;
}

.auth-header {
  display: grid;
  gap: var(--bp-s-2);
  margin-bottom: var(--bp-s-4);
  text-align: center;
}

/* The gap between the last field and the submit button. Was an inline
   `style="margin-top: var(--bp-s-5)"` copy-pasted into every auth view. */
.auth-actions {
  margin-top: var(--bp-s-5);
}

.links {
  display: flex;
  gap: var(--bp-s-4);
  justify-content: center;
  flex-wrap: wrap;
  font-size: 14px;
  margin-top: var(--bp-s-4);
}