/* 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);
}

/* A single utility link tucked under the field it belongs to — "Forgot
   password?" beneath the password input on log in.

   It used to share a `.row` (justify-content: space-between) with the Remember
   me checkbox. #2128 removed the checkbox, and space-between with one child
   drops that child to the LEFT, under the field label. Right-aligned here on
   purpose: flush with the field edge is where the link has always rendered,
   and it reads as an affordance on the field rather than as the field's help
   text. */
.auth-field-link {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--bp-s-2);
}

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