/*!
 * The sign-in offer. Shared by the site's pages and the course player, so it
 * carries its own look rather than leaning on either one's stylesheet.
 *
 * A sheet at the bottom on a phone, a centred card once there is room, and
 * never a full-screen interstitial: the lesson behind it stays visible,
 * because the lesson is the thing and this is an aside.
 */
.bacc {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: end center;
  background: rgb(0 0 0 / 0.35);
  font-family: inherit;
}
.bacc__box {
  width: min(26rem, 100%);
  padding: 1.1rem 1rem 1rem;
  background: #fff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 24px rgb(0 0 0 / 0.18);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
@media (min-width: 40rem) {
  .bacc { place-items: center; }
  .bacc__box { border-radius: 18px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.22); }
}
.bacc__title { margin: 0; font-size: 1.3rem; line-height: 1.25; }
.bacc__blurb { margin: 0; max-width: 34ch; color: #555; line-height: 1.5; }
.bacc__btn { min-height: 44px; display: grid; place-items: center; }
.bacc__err { margin: 0; color: #B3261E; font-size: 0.9rem; }
/* Refusing must be as easy as accepting, or the offer is a gate wearing an
   offer's clothes. */
.bacc__later {
  min-height: 44px;
  padding: 0.4rem 1rem;
  background: none;
  border: 0;
  color: #555;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.bacc__note { margin: 0; max-width: 36ch; font-size: 0.8rem; color: #777; line-height: 1.45; }