/* The checkout popup (popup checkout plan, Orders\CheckoutPopup): Stripe's
   embedded checkout in a <dialog>, opened by public/assets/b/checkout.js
   from the checkout page's Pay button or, since Oct 29, straight from a Buy
   button on any page that loads this file (the Meditate frame, the book
   page). Moved here from meditate.css then, so the book page can have it
   without the rest of Meditate. A plum band with the gold kicker on top,
   Stripe's own form on paper under it; on a phone it is a sheet rising from
   the bottom, nearly the whole screen. Needs tokens.css. The dialog's own
   box is one class: only the browser's own dialog styles compete for it.
   Everything inside it is two classes, because on the checkout page the
   dialog sits inside .jr-lib and .jr-checkout, whose own h2, p and button
   rules ((0,1,1), library.css and meditate.css) would otherwise win. */
.jr-pay { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: var(--jr-radius-card); background: var(--jr-color-paper); color: var(--jr-color-ink); box-shadow: var(--jr-shadow-raised); overflow: auto; text-align: left; }
.jr-pay::backdrop { background: rgba(58, 15, 54, .6); }
html:has(.jr-pay[open]) { overflow: hidden; }
.jr-pay .jr-pay-head { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--jr-space-3); padding: var(--jr-space-4) var(--jr-space-5); background: var(--jr-color-plum); color: var(--jr-color-on-plum); }
.jr-pay .jr-pay-kicker { grid-column: 1; margin: 0 0 2px; font-family: var(--jr-font-ui); font-size: var(--jr-size-xs); font-weight: var(--jr-weight-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--jr-color-gold); }
.jr-pay .jr-pay-title { grid-column: 1; margin: 0; font-family: var(--jr-font-display); font-size: var(--jr-size-lg); line-height: var(--jr-leading-tight); color: var(--jr-color-on-plum); }
.jr-pay .jr-pay-close { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: var(--jr-radius-pill); background: rgba(255, 255, 255, .14); color: var(--jr-color-on-plum); cursor: pointer; }
.jr-pay .jr-pay-close svg { display: block; width: 26px; height: 26px; }
.jr-pay .jr-pay-close:hover { background: rgba(255, 255, 255, .26); }
.jr-pay .jr-pay-close:focus-visible { outline: 3px solid var(--jr-color-gold); outline-offset: 2px; }
.jr-pay .jr-pay-said { margin: 0; padding: var(--jr-space-10) var(--jr-space-5); text-align: center; font-family: var(--jr-font-body); font-size: var(--jr-size-md); color: var(--jr-color-muted-strong); }
.jr-pay .jr-pay-said[hidden] { display: none; }
.jr-pay .jr-pay-stripe { padding: var(--jr-space-3) 0 var(--jr-space-4); }
/* The way out when Stripe's frame is blank or blocked: a quiet text link (a button, since it submits the plain form), shown once the frame is mounted. */
.jr-pay .jr-pay-help { margin: 0; padding: 0 var(--jr-space-5) var(--jr-space-4); text-align: center; }
.jr-pay .jr-pay-help[hidden] { display: none; }
.jr-pay .jr-pay-fallback { padding: var(--jr-space-2) var(--jr-space-3); border: 0; background: none; color: var(--jr-color-muted-strong); font-family: var(--jr-font-ui); font-size: var(--jr-size-sm); text-decoration: underline; cursor: pointer; }
.jr-pay .jr-pay-fallback:hover { color: var(--jr-color-plum); }
.jr-pay .jr-pay-fallback:focus-visible { outline: 3px solid var(--jr-color-gold); outline-offset: 2px; }
@media (max-width: 600px) {
  .jr-pay { width: 100%; max-width: 100%; height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); margin: auto 0 0; border-radius: var(--jr-radius-card) var(--jr-radius-card) 0 0; }
}