/* 6.5 Log in (login.html). Loads after css/pages/join.css, whose account-page components it uses.
   Only what Create account doesn't have: the state banners above the form, the "Forgot password?" link under the
   password field (a 48px tap target) and the field's error border (ux C2: 2px color/danger). */

.login_banner {
  margin-bottom: 1.5rem;
}

.login_forgot {
  margin: 0;
}

.login_forgot .join_link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

/* Error: a 2px red border; the padding gives back the extra pixel so nothing moves */
.join_input[aria-invalid="true"] {
  padding: 19px 22px;
  border: 2px solid var(--color-danger);
}

@media screen and (max-width: 991px) {
  .join_input[aria-invalid="true"] {
    padding: 15px;
  }
}

/* ICCF words are in sentence case (ux §7): "Welcome back", "Log in". Create account keeps the inherited capitals for now. */
.join_heading__eyebrow,
.join_heading__title {
  text-transform: none;
}