/* ═══════════════════════════════════════
   WOBAZI — Paywall UI in the app (app/paywall.js)
   Everything is scoped under body.pw-on, which paywall.js only sets when PAYWALL=on.
   Site tokens only, so light mode follows. Bump ?v= in app/index.html on every change.
═══════════════════════════════════════ */

/* ── Guest: real Actions/Relationships content is replaced by the lock card ── */
body.pw-on.pw-tier-anon #results .section[data-tab="actions"]:not([data-pw]),
body.pw-on.pw-tier-anon #results .section[data-tab="relationships"]:not([data-pw]),
body.pw-on.pw-tier-anon #hero-card { display: none !important; }

/* One sign-in prompt per screen: while a lock card is showing, the portal's "Keep this chart"
   card and the tab's section chips (which point at hidden sections) step aside. */
body.pw-on.pw-tier-anon:has(.pw-lock:not(.hide)) #portal-keep,
body.pw-on.pw-tier-anon #toc-actions,
body.pw-on.pw-tier-anon #toc-relationships { display: none !important; }

/* Lock glyph on the tab buttons (top row and bottom nav). */
body.pw-on .pw-locked { position: relative; }
body.pw-on .tab-btn-top.pw-locked::after,
body.pw-on .bn-item.pw-locked::after {
  content: '';
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 2px var(--bg);
}

/* ── Lock / upsell cards ── */
body.pw-on .pw-card {
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
}
body.pw-on .pw-card.hide { display: none; }
body.pw-on .pw-ico { display: block; color: var(--gold); font-size: 22px; margin-bottom: 8px; }
body.pw-on .pw-title { color: var(--text); font-size: 18px; font-weight: 700; margin: 0 0 8px; text-wrap: balance; }
body.pw-on .pw-copy { color: var(--m7); font-size: 14px; line-height: 1.55; margin: 0 auto 18px; max-width: 30em; text-wrap: pretty; }
body.pw-on .pw-btn { text-decoration: none; justify-content: center; font-size: 15px; padding: 13px 26px; }
body.pw-on .pw-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── Free: first lines readable, then blurred and faded ── */
body.pw-on .pw-preview {
  position: relative;
  max-height: 200px;
  overflow: hidden;
}
body.pw-on .pw-preview::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 84px; bottom: 0;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: linear-gradient(to bottom, transparent 0%, var(--bg) 92%);
  pointer-events: auto; /* nothing under the blur is clickable */
}
/* …but only on the screen that's showing. pointer-events: auto beats the hidden screen's
   pointer-events: none, so the invisible overlay was eating taps on whatever sat under it
   (the birth form's Name field on phones). */
body.pw-on .screen:not(.active) .pw-preview::after { pointer-events: none; }

/* ── Power Days, free: next 7 days open, later dates locked ── */
body.pw-on .cal-day.cal-locked {
  background: none;
  border-color: transparent;
  color: var(--m4, rgba(255,255,255,0.35));
  opacity: 0.45;
  cursor: pointer;
}
body.pw-on .cal-day.cal-locked.cal-selected { opacity: 0.8; outline: 1px dashed var(--gold); outline-offset: -2px; }
body.pw-on .pw-pd-lock { text-align: center; }
body.pw-on .pw-pd-lock-strip {
  margin-top: 14px;
  padding: 14px 14px 16px;
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-md);
}
body.pw-on .pw-pd-lock-strip .pw-copy { margin-bottom: 12px; font-size: 13px; }
body.pw-on .pw-pd-lock-detail { padding: 18px 8px; }
body.pw-on .pw-pd-lock .pw-btn { display: inline-flex; }

/* ── Trial countdown + checkout welcome ── */
.pw-trial {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--gold-dim);
  border: 1px solid var(--gold-dim);
  color: var(--text);
  border-radius: var(--radius-md);
  padding: 10px 12px 10px 16px;
  margin: 0 0 20px;
  font-size: 14px;
}
.pw-trial-text { flex: 1 1 12em; }
.pw-trial-cta {
  color: #1a0a00; background: var(--gold); text-decoration: none; font-weight: 700;
  border-radius: 100px; padding: 8px 14px; min-height: 36px; display: inline-flex; align-items: center;
}
.pw-trial-x {
  background: none; border: 0; color: var(--m6); font-size: 22px; line-height: 1;
  width: 36px; height: 36px; cursor: pointer; border-radius: 50%;
}
.pw-trial-x:focus-visible, .pw-trial-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Oracle ── */
.pw-oracle-left {
  margin: 0; padding: 6px 16px 0;
  text-align: center; font-size: 12px; color: var(--m6);
}
.pw-oracle-left.is-blocked { color: var(--text); font-size: 13px; padding-bottom: 2px; }
.oracle-input.pw-disabled, .oracle-send-btn.pw-disabled { opacity: 0.45; cursor: not-allowed; }
.oracle-chips.pw-disabled { opacity: 0.35; pointer-events: none; }
.pw-oracle-left a, .pw-cap .pw-cap-cta, .pw-inline-cta { color: var(--gold); font-weight: 600; }
.pw-inline-cta { display: inline-block; margin-top: 8px; }