/* Small Bets newsletter popup.
   Self-contained: every selector is scoped under .sb-popup, and the rules below
   explicitly reset the page's global element styles (img, button, headings, p)
   so nothing leaks in or out. Colors mirror the Beehiiv form's own theme. */

.sb-popup{
  --sb-ink:#1e1b1a;
  --sb-card:#f6f3f0;
  --sb-line:rgba(30,27,26,.12);
  --sb-ease:cubic-bezier(.2,.75,.2,1);
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:140;
  box-sizing:border-box;
  width:min(424px,calc(100vw - 48px));
  max-height:calc(100vh - 48px);
  max-height:calc(100dvh - 48px);
  overflow-x:hidden;
  overflow-y:auto; /* only scrolls on very short screens; scroll chains to the page otherwise */
  margin:0;
  padding:22px 24px 0;
  background:var(--sb-card);
  color:var(--sb-ink);
  border:1px solid var(--sb-line);
  border-radius:0;
  box-shadow:0 22px 60px rgba(30,27,26,.2),0 4px 14px rgba(30,27,26,.08);
  font-family:inherit;
  font-size:16px;
  font-weight:400;
  line-height:1.5;
  letter-spacing:normal;
  text-align:left;
  opacity:0;
  visibility:hidden;
  transform:translate3d(0,18px,0);
  transition:opacity .45s var(--sb-ease),transform .6s var(--sb-ease),visibility 0s linear .6s;
}
.sb-popup[hidden]{display:none}
/* Not clickable until shown, and not while fading out. */
.sb-popup:not(.is-visible){pointer-events:none}
.sb-popup.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
  transition-delay:0s;
}
.sb-popup *,
.sb-popup *::before,
.sb-popup *::after{box-sizing:border-box}

.sb-popup__close{
  position:absolute;
  top:12px;
  right:16px;
  z-index:1;
  margin:0;
  padding:8px 6px;
  border:0;
  border-radius:2px;
  background:none;
  color:var(--sb-ink);
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  cursor:pointer;
  opacity:1;
}
.sb-popup__close:hover{text-decoration-thickness:2px}
.sb-popup__close:focus{outline:none}
.sb-popup__close:focus-visible{
  outline:2px solid var(--sb-ink);
  outline-offset:2px;
}

.sb-popup__body{
  display:grid;
  grid-template-columns:86px minmax(0,1fr);
  align-items:center;
  gap:0 20px;
  margin:0 0 22px;
}
.sb-popup__art{
  display:block;
  width:86px;
  height:auto;
  max-width:none;
  margin:0;
  object-fit:contain;
}
.sb-popup__copy{
  min-width:0;
  padding-top:16px;
}
.sb-popup__title{
  margin:0 0 8px;
  color:var(--sb-ink);
  font-family:inherit;
  font-size:19px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.02em;
  text-transform:none;
}
.sb-popup__text{
  margin:0;
  color:var(--sb-ink);
  font-size:14px;
  font-weight:400;
  line-height:1.55;
}

/* Beehiiv's slim form row is 52px. A server-side error renders a 12px <p> under it
   with the browser's default 12px top margin and ~15px lines, so its text sits at
   64-79px (one line) or 64-94px (two lines). 96px keeps two lines unclipped; in the
   normal state the extra space is transparent and reads as the card's bottom padding. */
.sb-popup__form{
  display:block;
  width:100%;
  height:96px;
  margin:0;
  border:0;
}

@media (max-width:560px){
  .sb-popup{
    left:12px;
    right:12px;
    bottom:max(12px,env(safe-area-inset-bottom));
    width:auto;
    max-height:calc(100vh - 24px);
    max-height:calc(100dvh - 24px);
    padding:18px 18px 0;
  }
  .sb-popup__close{top:8px;right:10px}
  .sb-popup__body{
    grid-template-columns:62px minmax(0,1fr);
    gap:0 16px;
    margin-bottom:14px;
  }
  .sb-popup__art{width:62px}
  .sb-popup__copy{padding-top:26px} /* clears CLOSE and its focus ring */
  .sb-popup__title{font-size:17px;margin-bottom:6px}
  .sb-popup__text{font-size:14px;line-height:1.5}
}

/* Staging only: lift the card above the bottom-left font-preview pill whenever it is present. */
body:has(.font-switch) .sb-popup{bottom:60px}

@media (prefers-reduced-motion:reduce){
  .sb-popup,
  .sb-popup.is-visible{
    transform:none;
    transition:none;
  }
}

@media print{
  .sb-popup{display:none!important}
}