/* Notify: the account page and the password reset frames. Layout only: colors, radii, shadows and
   motion come from app.css. */

/* Account: one column at the Programs page's measure, centered like it. */
.account {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 840px;
  margin-inline: auto;
}

.account > .page-head {
  margin-bottom: 24px;
}

/* 'Stop these reminders' lands here: keep the card clear of the top bar. */
.account #reminders {
  scroll-margin-top: 24px;
}

.account-purchase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}

.account-signout {
  display: flex;
}

/* A purchase's invoice and credit notes (2026-10-27): links on one wrapping line, each a 44px target in height. */
.account-documents {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}

.account-documents a {
  padding-block: 12px;
  margin-block: -12px;
}

/* 'Back to sign in' under a reset form, placed like 'Forgot password?'. */
.notify-back {
  align-self: center;
  margin-top: -8px;
}

@media (max-width: 767px) {
  .account > .page-head {
    margin-bottom: 8px;
  }

  .account-purchase {
    align-items: flex-start;
    flex-direction: column;
  }
}