/* The sign-in and password pages (registration/login_base.html), made the
   course's own (Aaron, Oct 9): their one action in the logo's red, quiet
   white links that turn red, and the drafting grid (login-grid.png, from
   Aaron) on the right half, with the red mark and the course's line over
   it. Below the xl breakpoint that half is hidden, and the grid fades in
   behind the top of the page instead. */

.bb-auth .btn-primary {
  --si-btn-bg: var(--bb-logo-red);
  --si-btn-border-color: var(--bb-logo-red);
  --si-btn-hover-bg: var(--bb-logo-red-deep);
  --si-btn-hover-border-color: var(--bb-logo-red-deep);
  --si-btn-active-bg: var(--bb-logo-red-deep);
  --si-btn-active-border-color: var(--bb-logo-red-deep);
  --si-btn-focus-shadow-rgb: var(--bb-logo-red-rgb);
  --si-btn-disabled-bg: var(--bb-logo-red-deep);
  --si-btn-disabled-border-color: var(--bb-logo-red-deep);
}

.bb-auth-link {
  color: var(--bb-paper);
  text-decoration: underline;
  text-decoration-color: rgba(236, 238, 242, 0.35);
  text-underline-offset: 3px;
}

.bb-auth-link:hover,
.bb-auth-link:focus {
  color: var(--bb-logo-red);
  text-decoration-color: currentColor;
}

/* For a buyer who comes here before setting a password. */
.bb-auth-note {
  color: var(--bb-mute);
  font-size: 0.9375rem;
}

/* --- the right half (xl and up) ----------------------------------------- */

.bb-auth-art {
  background: var(--bb-panel) url("login-grid.14728b86859a.png") center / cover no-repeat;
  border-left: 1px solid var(--bb-line);
}

.bb-auth-pitch {
  max-width: 28rem;
  padding: 0 2rem;
  text-align: center;
}

.bb-auth-mark {
  width: 88px;
  height: auto;
  margin-bottom: 2rem;
}

.bb-auth-tagline {
  margin: 0;
  color: var(--bb-paper);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.bb-auth-byline {
  margin: 1rem 0 0;
  color: var(--bb-mute);
  font-size: 1.125rem;
  font-weight: 500;
}

/* --- narrower screens: the grid behind the top of the page --------------- */

@media (max-width: 1199.98px) {
  .bb-auth {
    background-image:
      linear-gradient(to bottom, rgba(var(--bb-ink-rgb), 0.2), var(--bb-ink) 55%),
      url("login-grid.14728b86859a.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%, 1440px auto;
  }
}