/* The overlay layer: dialog chrome, the embedded Stripe sheet and the toast.
 *
 * Lives apart from app.css because the landing page needs it too — Unlock there
 * opens the same embedded checkout as the question page, and the landing page
 * does not (and should not) load the whole application stylesheet.
 *
 * Every token is read with a literal fallback. The two pages define different
 * palettes under some of the same names — app.css `--bg` is the card surface,
 * the landing page's `--bg` is the page ground — and `--pay-surface` exists only
 * in app.css. Fallbacks are the dark values, which is the only mode the landing
 * page has.
 */

.sheet {
  width: min(92vw, 372px);
  padding: 26px 24px 22px;
  border: 1px solid var(--border, #2b2438); border-radius: 14px;
  background: var(--bg, #14111c); color: var(--text, #e6e3ec);
  font-family: var(--sans, system-ui, sans-serif); font-size: 14px;
  box-shadow: 0 28px 64px -20px rgba(10, 8, 18, .5);
}
.sheet::backdrop { background: rgba(16, 13, 24, .45); backdrop-filter: blur(2px); }
.sheet h2 { margin: 0 0 6px; font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }
.sheet-close {
  border: none; background: none; cursor: pointer;
  color: var(--muted, #8e88a0); font-size: 20px; line-height: 1; padding: 4px 6px;
}
.sheet-close:hover { color: var(--text, #e6e3ec); }


/* ---------- embedded checkout ---------- */

/* Wider and taller than the sign-in sheet: Stripe's iframe sizes itself to its
   content, and a subscription form with a wallet button, card fields and an
   address block needs room or it scrolls inside a box that also scrolls. */
.checkout-sheet {
  /* One continuous surface with the Stripe iframe, so the form does not sit in
     a lighter rectangle inside the modal. */
  background: var(--pay-surface, #2b2438);
  width: min(94vw, 620px);
  max-height: min(94vh, 860px);
  padding: 20px 22px 18px;
  overflow: hidden;
}
/* The layout must hang off [open]. A bare `display: flex` here beats the UA's
   `dialog:not([open]) { display: none }`, so close() empties the dialog and
   leaves the box itself painted on the page - closed, inert and still visible.
   Same trap as `[hidden]` losing to a class rule; see CLAUDE.md. */
.checkout-sheet[open] {
  display: flex;
  flex-direction: column;
}
.checkout-head {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 14px; flex: 0 0 auto;
}
.checkout-head h2 { margin: 0 0 3px; font-size: 16px; font-weight: 650; letter-spacing: -0.02em; }
.checkout-sub { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted, #8e88a0); }
.checkout-head .sheet-close { margin: -6px -6px 0 auto; }

/* One scroll container, not two. */
.checkout-mount { flex: 1 1 auto; overflow-y: auto; min-height: 420px; }
.checkout-mount iframe { display: block; width: 100%; }

/* ---------- toast ---------- */

#toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 90;
  transform: translate(-50%, 12px);
  max-width: min(92vw, 460px);
  padding: 10px 15px;
  border: 1px solid var(--border, #2b2438); border-radius: 10px;
  background: var(--bg, #14111c); color: var(--text, #e6e3ec);
  font-size: 13px; line-height: 1.45;
  box-shadow: 0 14px 36px -12px rgba(10, 8, 18, .4);
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#toast.is-good { border-color: var(--gold-line, #4a3d20); background: var(--gold-soft, #2a2110); }
#toast.is-bad { border-color: var(--bad, #f87171); }

body.checkout-pending { cursor: progress; }
body.checkout-pending .upgrade-btn { opacity: .65; pointer-events: none; }