/* public/css/subscription.css
   ───────────────────────────────────────────────────────────────
   All styling for the subscription / paywall / cancellation surfaces.
   Sacred Acid tokens are defined in sacred-acid-tokens.css and imported
   by oracle/index.html before this file.

   Per the design handoff, the prototype uses inline styles + React JSX.
   Translated here into a class-based stylesheet — JS files (subscription-
   ui.js) manage structure + class state, all visual rules live here.

   Class naming: .sub-*  for subscription-only components.
   ────────────────────────────────────────────────────────────── */

/* ═══ Reduced-motion fallback (applies to every animation in this file) ═══ */
@media (prefers-reduced-motion: reduce) {
  .sub-modal-shell,
  .sub-toast,
  .sub-trial-pill,
  .sub-spinner__path { animation: none !important; }
  .sub-trial-pill { box-shadow: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   MODAL SHELL — shared by paywall, cancel-offer, cancel-final
   ═══════════════════════════════════════════════════════════════════ */

.sub-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}

.sub-modal-shell {
  position: relative;
  width: 100%;
  max-width: 520px;     /* desktop centred shell; mobile fills viewport */
  background: var(--void);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sub-modal-fade 200ms var(--ease-standard);
}
@media (min-width: 600px) {
  .sub-modal-shell {
    margin: 32px 16px;
    max-height: calc(100vh - 64px);
    border: 1px solid var(--hairline-soft);
    border-radius: 16px;
    box-shadow: var(--shadow-modal-lift);
  }
}
@keyframes sub-modal-fade {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}

/* Top atmospheric gold wash */
.sub-modal-shell::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(201,169,109,0.12), transparent 65%);
}

.sub-modal-topbar {
  position: relative;
  z-index: 5;
  flex-shrink: 0;
  padding: 32px 20px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
}
.sub-modal-eyebrow {
  color: var(--sa-gold);
  font-family: var(--font-body), sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}
.sub-modal-close {
  margin-left: auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(247,209,172,0.18);
  color: var(--rose);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.sub-modal-close:hover { border-color: var(--rose); }
.sub-modal-close:focus-visible {
  outline: 2px solid var(--oracle);
  outline-offset: 2px;
}

.sub-modal-body {
  position: relative;
  z-index: 4;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 22px 32px;
  -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════════════════════
   PAYWALL MODAL — hero + unlock list + tier cards + payment form
   ═══════════════════════════════════════════════════════════════════ */

.sub-paywall-headline {
  font-family: "The Silver Editorial", Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.06;
  color: var(--parchment);
  margin: 6px 0 14px;
}
.sub-paywall-headline .sub-italic-rose {
  color: var(--rose);
  font-style: italic;
}
.sub-paywall-subhead {
  color: var(--moonstone);
  font-size: 13.5px;
  line-height: 1.65;
  margin: 0 0 24px;
}

.sub-section-label {
  color: var(--sa-gold);
  font-family: var(--font-body), sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.sub-unlock-list {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sub-unlock-list__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--parchment);
  font-size: 13.5px;
  line-height: 1.5;
}
.sub-unlock-list__bullet {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--rose);
  font-size: 11px;
}
.sub-unlock-list__soon {
  color: var(--smoke);
  font-size: 10px;
  margin-left: 6px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.sub-tier-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

.sub-footnote {
  margin-top: 18px;
  text-align: center;
  color: var(--smoke);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════════════
   PRICING TIER CARD
   ═══════════════════════════════════════════════════════════════════ */

.sub-tier-card {
  position: relative;
  width: 100%;
  text-align: left;
  background: linear-gradient(180deg, rgba(20,17,13,0.6) 0%, rgba(11,10,10,0.95) 100%);
  border: 1px solid rgba(247,209,172,0.16);
  border-radius: 12px;
  padding: 14px 16px 13px 14px;
  cursor: pointer;
  font-family: var(--font-body), sans-serif;
  color: var(--parchment);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 200ms var(--ease-standard),
              box-shadow 240ms var(--ease-standard),
              background 240ms var(--ease-standard);
}
.sub-tier-card:hover { border-color: rgba(224,242,81,0.5); }
.sub-tier-card:focus-visible {
  outline: 2px solid var(--oracle);
  outline-offset: 2px;
}
.sub-tier-card[aria-pressed="true"] {
  border-color: var(--oracle);
  background: linear-gradient(180deg, rgba(224,242,81,0.05) 0%, rgba(11,10,10,0.95) 70%);
  box-shadow: 0 0 24px -6px rgba(224,242,81,0.22);
}

.sub-tier-card__radio {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(247,209,172,0.35);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 200ms var(--ease-standard);
}
.sub-tier-card[aria-pressed="true"] .sub-tier-card__radio {
  border-color: var(--oracle);
  background: rgba(224,242,81,0.08);
}
.sub-tier-card__radio-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--oracle);
  display: none;
}
.sub-tier-card[aria-pressed="true"] .sub-tier-card__radio-dot { display: block; }

.sub-tier-card__main {
  flex: 1;
  min-width: 0;
}
.sub-tier-card__name {
  color: var(--sa-gold);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.sub-tier-card[aria-pressed="true"] .sub-tier-card__name { color: var(--oracle); }
.sub-tier-card__cadence {
  color: var(--moonstone);
  font-size: 11.5px;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.sub-tier-card__price {
  text-align: right;
  flex-shrink: 0;
}
.sub-tier-card__price-num {
  font-family: "The Silver Editorial", Georgia, serif;
  color: var(--parchment);
  font-size: 24px;
  line-height: 1;
}
.sub-tier-card[aria-pressed="true"] .sub-tier-card__price-num { color: var(--rose); }
.sub-tier-card__price-unit {
  font-family: var(--font-body), sans-serif;
  font-size: 11px;
  color: var(--moonstone);
  letter-spacing: 0.04em;
  margin-left: 2px;
}
.sub-tier-card__save {
  margin-top: 5px;
  color: var(--sa-gold);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.sub-tier-card__save--best { color: var(--oracle); }

/* ═══════════════════════════════════════════════════════════════════
   COMBINED PURCHASE MENU (#purchase-menu) — 7.9zj
   Reuses the modal shell + sub-cta-primary + sub-tier-card atoms; adds
   the checkbox "option" cards (Your Calling / Oracle Infinite) that
   toggle what's in the cart, with the cadence tier-cards nested under
   Infinite. One component, contextual defaults set by the entry point.
   ═══════════════════════════════════════════════════════════════════ */

.pm-menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}
.pm-menu .sub-section-label { margin-bottom: 2px; }

.pm-option {
  border: 1px solid rgba(247,209,172,0.16);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20,17,13,0.6) 0%, rgba(11,10,10,0.95) 100%);
  overflow: hidden;
  transition: border-color 200ms var(--ease-standard),
              box-shadow 240ms var(--ease-standard);
}
.pm-option[data-checked="true"] {
  border-color: var(--oracle);
  box-shadow: 0 0 24px -8px rgba(224,242,81,0.22);
}

.pm-option__toggle {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 16px 16px 15px;
  cursor: pointer;
  font-family: var(--font-body), sans-serif;
  color: var(--parchment);
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.pm-option__toggle:focus-visible {
  outline: 2px solid var(--oracle);
  outline-offset: -2px;
}

/* Square checkbox — distinct from the round radio on the tier cards. */
.pm-option__check {
  flex-shrink: 0;
  margin-top: 2px;
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 1px solid rgba(247,209,172,0.35);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 200ms var(--ease-standard),
              background 200ms var(--ease-standard);
}
.pm-option[data-checked="true"] .pm-option__check {
  border-color: var(--oracle);
  background: rgba(224,242,81,0.12);
}
.pm-option__check-mark {
  color: var(--oracle);
  font-size: 12px;
  line-height: 1;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 160ms var(--ease-standard),
              transform 160ms var(--ease-standard);
}
.pm-option[data-checked="true"] .pm-option__check-mark {
  opacity: 1;
  transform: scale(1);
}

.pm-option__main { flex: 1; min-width: 0; }
.pm-option__name {
  display: block;
  color: var(--sa-gold);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pm-option[data-checked="true"] .pm-option__name { color: var(--oracle); }
.pm-option__desc {
  display: block;
  color: var(--moonstone);
  font-size: 12.5px;
  line-height: 1.55;
}

.pm-option__price {
  flex-shrink: 0;
  text-align: right;
  padding-left: 6px;
}
.pm-option__price-num {
  font-family: "The Silver Editorial", Georgia, serif;
  color: var(--parchment);
  font-size: 22px;
  line-height: 1;
}
.pm-option[data-checked="true"] .pm-option__price-num { color: var(--rose); }
.pm-option__price-unit {
  display: block;
  margin-top: 3px;
  color: var(--smoke);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Cadence tier-cards nested under Oracle Infinite — collapse when off. */
.pm-cadence {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 14px 15px;
}
.pm-cadence[data-visible="false"] { display: none; }

/* The shared .sub-tier-card pins its price column to flex-shrink:0 with an
   inline save badge. In this narrower nested container the long ANNUAL
   badge ("SAVE $87 — BEST VALUE") forces the label column to overflow and
   collide with the price. Scoped to the menu only — the paywall's own tier
   cards keep their exact shipping layout. Let the price column yield space
   and drop the badge onto its own line under the price. */
.pm-cadence .sub-tier-card__price { flex-shrink: 1; min-width: 0; padding-left: 8px; }
.pm-cadence .sub-tier-card__save  { display: block; margin-top: 4px; white-space: normal; }

.pm-cta { margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════
   PAYMENT FORM
   ═══════════════════════════════════════════════════════════════════ */

.sub-payment-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sub-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sub-field__labelrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: var(--sa-gold);
  font-family: var(--font-body), sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.sub-field__sublabel {
  color: var(--smoke);
  font-size: 9px;
}

.sub-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(201,169,109,0.22);
  border-radius: 4px;
  color: var(--moonstone);
  font-family: var(--font-body), sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  padding: 13px 14px;
  outline: none;
}
.sub-input[readonly] { cursor: not-allowed; }
.sub-input:focus { border-color: rgba(224,242,81,0.4); }

/* Stripe Elements container — styled to match the static mock. Real
   Elements mount via JS in Prompt 2. */
.sub-stripe-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(201,169,109,0.32);
  border-radius: 4px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.sub-stripe-card.is-disabled { opacity: 0.5; pointer-events: none; }
/* Stripe injects its own iframe inside .sub-stripe-card; we only need
   to make sure the container has enough internal padding for the
   iframe's baseline + that the StripeElement--focus class lights up
   the border the same way our native inputs do on focus. */
.sub-stripe-card .__PrivateStripeElement { width: 100%; }
.sub-stripe-card.StripeElement--focus,
.sub-stripe-card:focus-within { border-color: rgba(224,242,81,0.4); }
.sub-stripe-card.StripeElement--invalid { border-color: rgba(179,74,74,0.5); }

/* Inline payment error banner under the card field. Hidden until
   handleSubmit's catch fills it. */
.sub-payment-error {
  display: none;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(179,74,74,0.4);
  background: rgba(179,74,74,0.06);
  color: #d99c9c;
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: 0.01em;
}
.sub-payment-error.is-visible { display: flex; }
.sub-payment-error--soft {
  /* Card-level validation errors fired by Stripe Elements' "change"
     event — quieter than a submit-time decline so we don't shout at
     the user mid-typing. */
  border-color: rgba(201,169,109,0.32);
  background: rgba(201,169,109,0.04);
  color: var(--moonstone);
}
.sub-payment-error__icon { line-height: 1; padding-top: 1px; }
.sub-payment-error__text { flex: 1; }

/* Busy state for the discount inline status. */
.sub-discount-status--busy { color: var(--moonstone); opacity: 0.75; }

/* Discount code field — collapsed link + expanded input */
.sub-discount-link {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--moonstone);
  font-size: 11.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: var(--font-body), sans-serif;
  cursor: pointer;
  letter-spacing: 0.04em;
  align-self: flex-start;
}
.sub-discount-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sub-discount-row {
  display: flex;
  gap: 8px;
}
.sub-discount-input {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(201,169,109,0.32);
  border-radius: 4px;
  color: var(--parchment);
  font-family: var(--font-body), sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 11px 13px;
  outline: none;
}
.sub-discount-input:focus { border-color: var(--sa-gold); }
.sub-discount-apply {
  background: transparent;
  color: var(--sa-gold);
  border: 1px solid var(--sa-gold);
  border-radius: 4px;
  padding: 0 16px;
  font-family: var(--font-body), sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
}
.sub-discount-status {
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.sub-discount-status--ok  { color: var(--oracle); }
.sub-discount-status--err { color: var(--signal-soft); }

/* Primary submit pill — used by paywall, save-offer, cancel-final */
.sub-cta-primary {
  width: 100%;
  background: linear-gradient(180deg, rgba(224,242,81,0.12) 0%, rgba(224,242,81,0.02) 100%);
  color: var(--oracle);
  border: 1px solid var(--oracle);
  border-radius: 9999px;
  padding: 15px 18px;
  font-family: var(--font-body), sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: var(--shadow-glow-cta);
  transition: box-shadow 220ms var(--ease-standard);
}
.sub-cta-primary:hover { box-shadow: 0 0 36px -6px rgba(224,242,81,0.5); }
.sub-cta-primary:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.sub-cta-primary[disabled] {
  background: rgba(224,242,81,0.06);
  cursor: wait;
}
.sub-cta-primary__price {
  font-family: "The Silver Editorial", Georgia, serif;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
.sub-cta-primary__dot { color: rgba(224,242,81,0.6); }

.sub-payment-footnote {
  text-align: center;
  color: var(--smoke);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* 7.5eq — Checkout-mode notice. Replaces the card + postal fields
   when payment happens on Stripe's hosted page. Sits above the
   discount field so the user sees the redirect promise before
   committing. Compact by design — this isn't the hero copy, just a
   quiet handoff cue. */
.sub-checkout-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  background: rgba(201, 169, 109, 0.06);
  color: var(--parchment);
  font-size: 12.5px;
  line-height: 1.45;
}
.sub-checkout-notice__icon {
  flex-shrink: 0;
  color: var(--sa-gold);
  font-size: 14px;
  line-height: 1;
}
.sub-checkout-notice__text { flex: 1; }
.sub-payment-footnote em {
  color: var(--sa-gold);
  font-family: "The Silver Editorial", Georgia, serif;
  font-style: italic;
}

.sub-spinner {
  width: 14px;
  height: 14px;
  display: inline-block;
}
.sub-spinner__path {
  transform-origin: center;
  animation: sub-spin 900ms linear infinite;
}
@keyframes sub-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════
   TRIAL PILL — 4 states (early / mid / urgent / past_due)
   ═══════════════════════════════════════════════════════════════════ */

.sub-trial-pill {
  border-radius: 9999px;
  padding: 6px 12px;
  font-family: var(--font-body), sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
}
.sub-trial-pill:focus-visible { outline: 2px solid var(--oracle); outline-offset: 2px; }

.sub-trial-pill--early {
  border-color: rgba(201,169,109,0.45);
  background: #0A0908;
  color: var(--sa-gold);
}
.sub-trial-pill--mid {
  border-color: var(--sa-gold);
  background: linear-gradient(180deg, #CDA96B 0%, #B7935A 100%);
  color: var(--ink);
}
.sub-trial-pill--urgent {
  border-color: var(--oracle);
  background: var(--oracle);
  color: var(--ink);
  animation: sub-trial-pulse 2s ease-in-out infinite;
}
.sub-trial-pill--past_due {
  border-color: rgba(242,81,112,0.55);
  background: rgba(242,81,112,0.08);
  color: var(--signal);
}
@keyframes sub-trial-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,242,81,0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(224,242,81,0); }
}

/* ═══════════════════════════════════════════════════════════════════
   INLINE SUBSCRIBE OVERLAY (Library)
   ═══════════════════════════════════════════════════════════════════ */

.sub-inline-overlay {
  position: relative;
  margin: 32px auto 0;
  max-width: 480px;
}
.sub-inline-overlay__card {
  position: relative;
  padding: 24px 18px 16px;
  background: linear-gradient(180deg, rgba(20,17,13,0.96) 0%, rgba(11,10,10,0.98) 100%);
  border: 1px solid rgba(224,242,81,0.32);
  border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.9), 0 0 40px -16px rgba(224,242,81,0.3);
}
.sub-inline-overlay__pill {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.sub-inline-overlay__ornament {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.sub-inline-overlay__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(247,209,172,0.4), transparent);
}
.sub-inline-overlay__sparkle {
  color: var(--rose);
  font-size: 11px;
  letter-spacing: 0.4em;
}
.sub-inline-overlay__eyebrow {
  text-align: center;
  color: var(--oracle);
  font-size: 9.5px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 8px;
}
.sub-inline-overlay__teaser {
  text-align: center;
  color: var(--parchment);
  font-family: var(--font-body), sans-serif;
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.sub-inline-overlay__cta {
  width: 100%;
  background: linear-gradient(180deg, rgba(224,242,81,0.14) 0%, rgba(224,242,81,0.03) 100%);
  color: var(--oracle);
  border: 1px solid var(--oracle);
  border-radius: 9999px;
  padding: 12px 18px;
  font-family: var(--font-body), sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 0 22px -8px rgba(224,242,81,0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   TRIAL-ENDED BUBBLE (Brainstorm)
   ═══════════════════════════════════════════════════════════════════ */

.sub-trial-ended-bubble {
  align-self: flex-start;
  max-width: 100%;
  display: flex;
  gap: 12px;
  padding-right: 8px;
  margin-top: 6px;
}
.sub-trial-ended-bubble__avatar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 3px;
  color: var(--sa-gold);
  font-family: "The Silver Editorial", Georgia, serif;
  font-style: italic;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 8px rgba(201,169,109,0.4));
}
.sub-trial-ended-bubble__body { flex: 1; }
.sub-trial-ended-bubble__headline {
  font-family: "The Silver Editorial", Georgia, serif;
  font-style: italic;
  color: var(--parchment);
  font-size: 19px;
  line-height: 1.4;
  margin: 0 0 12px;
}
.sub-trial-ended-bubble__copy {
  color: var(--moonstone);
  font-family: var(--font-body), sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  font-style: normal;
  margin: 0;
}
.sub-trial-ended-bubble__copy .sub-italic-rose {
  color: var(--rose);
  font-family: "The Silver Editorial", Georgia, serif;
  font-style: italic;
}
.sub-trial-ended-bubble__cta {
  margin-top: 14px;
  background: linear-gradient(180deg, rgba(224,242,81,0.12) 0%, rgba(224,242,81,0.02) 100%);
  color: var(--oracle);
  border: 1px solid var(--oracle);
  border-radius: 9999px;
  padding: 11px 20px;
  font-family: var(--font-body), sans-serif;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-glow-subtle);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Locked composer (replaces input when trial ended) */
.sub-brainstorm-locked-composer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(247,209,172,0.18);
  border-radius: 22px;
  padding: 14px 16px;
  color: var(--moonstone);
  font-family: var(--font-body), sans-serif;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
}
.sub-brainstorm-locked-composer__cta {
  color: var(--oracle);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════════
   ACCOUNT SCREEN — identity strip, section header, four panels
   ═══════════════════════════════════════════════════════════════════ */

.sub-account-screen {
  position: relative;
  min-height: 100vh;
  padding-bottom: 60px;
}
.sub-account-screen::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 36% at 50% 10%, rgba(201,169,109,0.10), transparent 65%);
}

.sub-account-topbar {
  position: relative;
  padding: 32px 20px 14px;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
}
.sub-account-back {
  width: 30px; height: 30px;
  background: transparent;
  border: none;
  color: var(--rose);
  font-size: 22px;
  cursor: pointer;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.sub-account-back:focus-visible { outline: 2px solid var(--oracle); outline-offset: 2px; border-radius: 50%; }
.sub-account-title {
  text-align: center;
  color: var(--rose);
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  font-weight: 400;
}

.sub-account-body {
  position: relative;
  padding: 8px 22px 60px;
  max-width: 600px;
  margin: 0 auto;
}

/* Identity strip — vertical stack, fully centered per Task 2 of the
   2026-05-21 fidelity pass. Big avatar (88px) anchors the visual top of
   the account screen; name + email read clearly below.
   Prior version was a small (52px) left-aligned flex row — replaced
   here to match Design's mockup. */
.sub-account-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  margin: 6px 0 24px;
}
.sub-account-identity__avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C9A96D 0%, #8a6b3d 100%);
  border: 1px solid rgba(247,209,172,0.45);
  box-shadow: 0 18px 36px -16px rgba(201, 169, 109, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-family: 'Silver Editorial', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 38px;
  line-height: 1;
}
.sub-account-identity__textstack {
  /* Inner stack holds name + email so the 14px gap above stays between
     avatar and (name+email pair), not between each line. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.sub-account-identity__name {
  font-family: 'Silver Editorial', 'Cormorant Garamond', Georgia, serif;
  color: var(--parchment);
  font-size: 30px;
  line-height: 1.1;
  font-weight: 400;
}
.sub-account-identity__email {
  color: var(--moonstone);
  font-family: var(--font-body), sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  word-break: break-all;
  /* Lowercase keeps the email recognisable as an email (uppercased emails
     read as labels). Tracking + Futura body match Task 2 spec. */
}

/* ═══════════════════════════════════════════════════════════════════
   COSMIC BLUEPRINT — full section (account screen)
   Inline render of the existing onboarding Step 03 chart cards plus
   a birth-meta row, a tappable identity pill, and an "Open your full
   chart →" link below. Lives between identity strip + SUBSCRIPTION
   divider on every account screen state.
   ═══════════════════════════════════════════════════════════════════ */

/* Two-column grid: chart wheel on the left, DATE/TIME/PLACE column
   on the right. Mobile <360px stacks vertically with the wheel on
   top per Task 1 spec. */
.sub-blueprint-grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 24px;
  margin: 4px 0 20px;
}
@media (max-width: 360px) {
  .sub-blueprint-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px;
  }
}

/* Birth meta — two modes:
   1. .sub-blueprint-meta            → legacy 3-column flex row
     (kept for any caller mounting outside the new grid)
   2. .sub-blueprint-meta--stacked   → vertical stack used inside
     the new 2-column grid. Each row has label-above-value, left-
     aligned. */
.sub-blueprint-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  justify-content: center;
  margin: 4px 0 18px;
}
.sub-blueprint-meta--stacked {
  flex-direction: column;
  gap: 14px;
  margin: 0;
  align-items: flex-start;
  justify-content: center;
}
@media (max-width: 360px) {
  .sub-blueprint-meta--stacked { align-items: center; }
}
.sub-blueprint-meta__col {
  text-align: center;
  min-width: 0;
}
.sub-blueprint-meta--stacked .sub-blueprint-meta__col { text-align: left; }
@media (max-width: 360px) {
  .sub-blueprint-meta--stacked .sub-blueprint-meta__col { text-align: center; }
}
.sub-blueprint-meta__label {
  color: var(--sa-gold);
  font-family: var(--font-body), sans-serif;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.sub-blueprint-meta__value {
  color: var(--parchment);
  font-family: var(--font-body), sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* Chart wheel — inline SVG built by _renderChartWheel(). The SVG
   carries its own internal gold radial glow now (see Layer 1 in
   subscription-ui.js); CSS just centers it inside its grid cell. */
.sub-blueprint-wheel {
  display: block;
  margin: 0 auto;
}

/* Blueprint card — bordered tappable surface between the wheel/data
   grid and the bottom of the Cosmic Blueprint section. Carries the
   full identity (Sun · Rising · Profile/Type-full) + a subtitle row
   that doubles as the "Open your full chart →" affordance. */
.sub-blueprint-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  margin: 14px 0 0;
  background: linear-gradient(180deg, rgba(201, 169, 109, 0.04) 0%, rgba(11, 10, 10, 0.6) 100%);
  border: 1px solid rgba(201, 169, 109, 0.28);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-body), sans-serif;
  color: var(--parchment);
  transition: border-color 200ms var(--ease-standard),
              background 200ms var(--ease-standard);
}
.sub-blueprint-card:hover {
  border-color: rgba(201, 169, 109, 0.55);
  background: linear-gradient(180deg, rgba(201, 169, 109, 0.06) 0%, rgba(11, 10, 10, 0.6) 100%);
}
.sub-blueprint-card:focus-visible {
  outline: 2px solid var(--oracle);
  outline-offset: 2px;
}
.sub-blueprint-card__identity {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.sub-blueprint-card__sparkle {
  color: var(--sa-gold);
  font-size: 13px;
  flex-shrink: 0;
  line-height: 1;
}
.sub-blueprint-card__identity-text {
  font-family: 'Silver Editorial', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--parchment);
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.sub-blueprint-card__subtitle {
  margin-top: 8px;
  padding-left: 23px;   /* indents to align with identity text past the sparkle */
  font-family: var(--font-body), sans-serif;
  font-size: 11.5px;
  line-height: 1.5;
}
.sub-blueprint-card__subtitle-muted { color: var(--moonstone); }
.sub-blueprint-card__subtitle-link {
  color: var(--sa-gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease-standard), color 200ms var(--ease-standard);
}
.sub-blueprint-card:hover .sub-blueprint-card__subtitle-link {
  color: var(--rose);
  border-bottom-color: rgba(247, 209, 172, 0.45);
}

/* Inline chart cards — embed of renderChartSummary's output. The
   .chart-card rules live in oracle.css and style themselves; here we
   just contain them inside the account flow's max-width and add a
   subtle outer wrap so it reads as one cohesive block. */
.sub-blueprint-chart {
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Identity pill — "Virgo Sun · Scorpio Rising · 1/3 MG" style. Gold
   sparkle bookends, gold outline, transparent fill — matches the
   visual language of the COMING SOON pill but tappable.
   Centered in the section, wraps gracefully on narrow viewports. */
.sub-blueprint-identity-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px auto 14px;
  padding: 8px 18px;
  background: transparent;
  border: 1px solid rgba(201, 169, 109, 0.4);
  border-radius: 9999px;
  color: var(--sa-gold);
  font-family: var(--font-body), sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  max-width: 100%;
  text-align: center;
}
.sub-blueprint-identity-pill:hover {
  border-color: var(--rose);
  color: var(--rose);
}
.sub-blueprint-identity-pill:focus-visible {
  outline: 2px solid var(--oracle);
  outline-offset: 2px;
}
.sub-blueprint-identity-pill__sparkle {
  color: var(--rose);
  font-size: 10px;
}
/* Identity pill at the top of the identity strip (post 2026-05-22
   layout reorder). Sits directly below the email, before PROFILE.
   Same visual treatment as the in-section variant; just nudges
   margins for the new position. */
.sub-blueprint-identity-pill--top {
  margin: -6px auto 24px;
}

/* "Open your full chart →" link — small ember-gold underlined text
   below the identity pill. Lives in its own row, centered. */
.sub-blueprint-open-link {
  display: block;
  margin: 0 auto 12px;
  background: none;
  border: none;
  padding: 6px 8px;
  color: var(--sa-gold);
  font-family: var(--font-body), sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.sub-blueprint-open-link:hover { color: var(--rose); }
.sub-blueprint-open-link:focus-visible {
  outline: 2px solid var(--oracle);
  outline-offset: 2px;
}

/* Cosmic Blueprint widget — small-pill legacy variant. Retained for
   any caller that still passes opts.chartSummary instead of the full
   opts.chartData payload (defensive fallback). */
   section divider. Card with eyebrow + pill summary + tap affordance.
   Routes to the existing #step-chartsummary screen. */
.sub-blueprint-widget {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 18px 0 8px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(20,17,13,0.6) 0%, rgba(11,10,10,0.95) 100%);
  border: 1px solid rgba(247,209,172,0.16);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body), sans-serif;
  color: var(--parchment);
  transition: border-color 200ms var(--ease-standard), background 200ms var(--ease-standard);
}
.sub-blueprint-widget:hover { border-color: rgba(247,209,172,0.45); }
.sub-blueprint-widget:focus-visible {
  outline: 2px solid var(--oracle);
  outline-offset: 2px;
}
.sub-blueprint-widget__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sub-blueprint-widget__eyebrow {
  display: block;
  color: var(--sa-gold);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.sub-blueprint-widget__pill {
  display: block;
  color: var(--parchment);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.35;
  word-break: break-word;
}
.sub-blueprint-widget__pill .sub-blueprint-widget__dot {
  color: var(--smoke);
  margin: 0 8px;
}
.sub-blueprint-widget__cta {
  flex-shrink: 0;
  color: var(--rose);
  font-size: 18px;
  line-height: 1;
}

/* Chart-summary back-to-account button — injected when user enters the
   chart summary from the account context. Replaces the onboarding-flow
   confirm-area buttons (which only make sense mid-onboarding). */
.sub-chart-back-row {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 5vh, 3rem);
  padding-bottom: 1rem;
}
/* Top variant — back button moves to the top of the chart-summary
   screen when entered from the account screen (2026-05-22 reorder).
   Left-aligned, header-position. Pushes the chart cards down so they
   sit cleanly below. */
.sub-chart-back-row--top {
  justify-content: flex-start;
  margin-top: 0;
  padding: 4px 0 16px;
}
.sub-chart-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  border: 1px solid rgba(201,169,109,0.45);
  border-radius: 9999px;
  padding: 12px 24px;
  color: var(--sa-gold);
  font-family: var(--font-body), sans-serif;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 200ms var(--ease-standard), color 200ms var(--ease-standard);
}
.sub-chart-back-btn:hover { border-color: var(--rose); color: var(--rose); }
.sub-chart-back-btn:focus-visible {
  outline: 2px solid var(--oracle);
  outline-offset: 2px;
}

.sub-account-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 14px;
}
.sub-account-divider__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(201,169,109,0.35) 50%, transparent 100%);
}
.sub-account-divider__label {
  color: var(--sa-gold);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.sub-account-panel h2 {
  font-family: "The Silver Editorial", Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  color: var(--parchment);
  margin: 0 0 18px;
  line-height: 1.1;
}

/* Status pill above trial-mode heading
   (Kept for backward compat with any modal that still mounts the
   pre-7.5aj single-banner — the dual-trial block is the canonical
   account-screen status surface now.) */
.sub-account-status-pill {
  display: inline-block;
  background: rgba(247,209,172,0.06);
  border: 1px solid rgba(247,209,172,0.22);
  border-radius: 9999px;
  padding: 6px 12px;
  color: var(--moonstone);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* ─────────────────────────────────────────────────────────────────
   Dual-trial status block (7.5aj) — replaces the single banner with
   two independent rows reflecting Brainstorm + Chamber gates.
   Visual hierarchy: each row is a flex row with label + status;
   modifier class on the row keys the status-text color so an
   at-a-glance scan reads which window is which state.
   ───────────────────────────────────────────────────────────────── */
.sub-dual-trial {
  margin-bottom: 20px;
}
.sub-dual-trial__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(247,209,172,0.18);
  background: rgba(247,209,172,0.04);
  margin-bottom: 8px;
}
.sub-dual-trial__label {
  color: var(--parchment);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.sub-dual-trial__status {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moonstone);
}
/* State color keys — only the status text shifts; rows stay quiet. */
.sub-dual-trial__row--in_window .sub-dual-trial__status { color: var(--parchment); }
.sub-dual-trial__row--ended     .sub-dual-trial__status { color: var(--coral, #d97a6c); }
.sub-dual-trial__row--active    .sub-dual-trial__status { color: var(--ember-gold, #e0b550); }
.sub-dual-trial__row--pending   .sub-dual-trial__status { color: var(--moonstone); opacity: 0.7; }
.sub-dual-trial__row--unknown   .sub-dual-trial__status { color: var(--moonstone); opacity: 0.5; }

.sub-dual-trial__anchor {
  margin: 12px 0 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moonstone);
  opacity: 0.85;
}
.sub-account-trial-sub {
  color: var(--moonstone);
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 22px;
}

/* Active plan card */
.sub-account-active-card {
  padding: 20px 20px 22px;
  border-radius: 14px;
  border: 1px solid rgba(224,242,81,0.28);
  background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(224,242,81,0.06), transparent 70%), rgba(11,10,10,0.95);
  box-shadow: 0 14px 40px -22px rgba(224,242,81,0.3), var(--shadow-inner-well);
  margin-bottom: 20px;
}
.sub-account-active-card__eyebrow {
  color: var(--oracle);
  font-size: 9.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 500;
}
.sub-account-active-card__plan {
  font-family: "The Silver Editorial", Georgia, serif;
  font-size: 24px;
  color: var(--rose);
  line-height: 1.15;
  margin-bottom: 6px;
}
.sub-account-active-card__plan em { font-style: italic; }
.sub-account-active-card__billing {
  color: var(--moonstone);
  font-size: 12.5px;
  line-height: 1.5;
}
.sub-account-active-card__billing strong {
  color: var(--parchment);
  font-weight: 400;
}
.sub-account-active-card__billing-dot {
  color: var(--smoke);
  margin: 0 6px;
}

/* Action button stack */
.sub-account-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sub-account-action {
  background: transparent;
  color: var(--sa-gold);
  border: 1px solid rgba(201,169,109,0.45);
  border-radius: 9999px;
  padding: 13px 18px;
  font-family: var(--font-body), sans-serif;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sub-account-action--muted {
  color: var(--moonstone);
  border-color: rgba(163,163,158,0.22);
}
.sub-account-action__arrow {
  font-size: 13px;
  opacity: 0.7;
}
.sub-account-action:focus-visible {
  outline: 2px solid var(--oracle);
  outline-offset: 2px;
}

/* Notice banners (canceling / past_due) */
.sub-account-notice {
  padding: 18px 18px 20px;
  border-radius: 12px;
  margin-bottom: 22px;
}
.sub-account-notice--gold {
  border: 1px solid rgba(201,169,109,0.45);
  background: rgba(201,169,109,0.04);
}
.sub-account-notice--coral {
  border: 1px solid rgba(242,81,112,0.45);
  background: rgba(242,81,112,0.06);
}
.sub-account-notice__eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 500;
}
.sub-account-notice--gold  .sub-account-notice__eyebrow { color: var(--sa-gold); }
.sub-account-notice--coral .sub-account-notice__eyebrow { color: var(--signal); }
.sub-account-notice__body {
  color: var(--parchment);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 4px;
}
.sub-account-notice__body .sub-notice-rose { color: var(--rose); }
.sub-account-notice__sub {
  color: var(--moonstone);
  font-size: 12px;
  line-height: 1.5;
  margin: 8px 0 0;
}

.sub-cta-coral {
  width: 100%;
  background: var(--signal);
  color: var(--ink);
  border: 1px solid var(--signal);
  border-radius: 9999px;
  padding: 14px 18px;
  font-family: var(--font-body), sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
}

.sub-account-empty {
  padding: 30px 20px;
  text-align: center;
  color: var(--moonstone);
  font-size: 13px;
  line-height: 1.6;
}
.sub-account-empty__hint {
  margin-top: 6px;
  color: var(--smoke);
  font-size: 11.5px;
}

/* ═══════════════════════════════════════════════════════════════════
   CANCEL OFFER + FINAL MODALS — content shared with paywall shell
   ═══════════════════════════════════════════════════════════════════ */

.sub-cancel-ornament {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 22px;
}
.sub-cancel-ornament__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(247,209,172,0.4) 50%, transparent 100%);
}
.sub-cancel-ornament__sparkle {
  color: var(--rose);
  font-size: 12px;
  letter-spacing: 0.4em;
}

.sub-cancel-headline {
  font-family: "The Silver Editorial", Georgia, serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.05;
  color: var(--parchment);
  margin: 0 0 18px;
  text-align: center;
}
.sub-cancel-headline--final { font-size: 36px; }
.sub-cancel-headline em { color: var(--rose); font-style: italic; }

.sub-cancel-body {
  color: var(--moonstone);
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 14px;
  text-align: center;
  text-wrap: pretty;
}
.sub-cancel-body--last { margin-bottom: 28px; }
.sub-cancel-body--final-last { margin-bottom: 32px; }
.sub-cancel-body .sub-rose { color: var(--rose); }
.sub-cancel-body .sub-oracle { color: var(--oracle); }

.sub-offer-card {
  padding: 18px 18px 20px;
  border-radius: 12px;
  border: 1px solid rgba(224,242,81,0.32);
  background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(224,242,81,0.07), transparent 70%), rgba(11,10,10,0.9);
  margin-bottom: 22px;
  text-align: center;
}
.sub-offer-card__eyebrow {
  color: var(--oracle);
  font-size: 9.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 500;
}
.sub-offer-card__price {
  font-family: "The Silver Editorial", Georgia, serif;
  font-size: 30px;
  color: var(--rose);
  line-height: 1;
  margin-bottom: 6px;
}
.sub-offer-card__price-cadence {
  color: var(--smoke);
  font-size: 14px;
  font-family: var(--font-body), sans-serif;
}
.sub-offer-card__strike {
  color: var(--moonstone);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.sub-offer-card__strike s { color: var(--smoke); }

.sub-cancel-secondary {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  padding: 4px 0;
  color: var(--moonstone);
  font-size: 12px;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: var(--font-body), sans-serif;
  cursor: pointer;
  letter-spacing: 0.04em;
  margin-top: 14px;
}

.sub-cancel-footnote {
  margin-top: 22px;
  text-align: center;
  color: var(--smoke);
  font-size: 10px;
  letter-spacing: 0.04em;
}

/* Cancel-final secondary button (muted rose-gold outline) */
.sub-cta-muted-rose {
  width: 100%;
  background: transparent;
  color: var(--parchment);
  border: 1px solid rgba(247,209,172,0.45);
  border-radius: 9999px;
  padding: 15px 18px;
  font-family: var(--font-body), sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════════════
   ACCOUNT SCREEN — additional sections (profile row, notifications,
   account links, member-since footer). Subscription-section coming-
   soon treatment lives further down in this file.
   ═══════════════════════════════════════════════════════════════════ */

/* Profile block — content rows below the PROFILE section header
   (the section-header is shared with Notifications / Account so the
   visual rhythm matches the rest of the screen). No card border or
   gradient — just stacked text rows aligned with the rest of the
   section's vertical rhythm. */
.sub-account-profile-block {
  padding: 4px 4px 18px;
  border-bottom: 1px solid rgba(247,209,172,0.06);
}
/* NAME + EMAIL rows — each row is a label + bordered read-only field.
   Per the 2026-05-22 reorder, fields render as form-style bordered
   boxes (Design called for "read-only styled input field"). Stack
   vertically with no hairline between since each field has its own
   border. */
.sub-account-profile-block__row {
  padding: 8px 0;
}
.sub-account-profile-block__rowlabel {
  color: var(--sa-gold);
  font-family: var(--font-body), sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
/* Bordered read-only field — looks like a form input the user can't
   edit. Mirrors the .sub-input visual language so it reads as a real
   form field, not a label. */
.sub-account-profile-block__field {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(201, 169, 109, 0.22);
  border-radius: 6px;
  padding: 12px 14px;
  color: var(--parchment);
  font-family: var(--font-body), sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  word-break: break-all;
}
/* Legacy class kept for any older caller that still mounts the
   pre-field-row markup. Visually treats like the new __field. */
.sub-account-profile-block__rowvalue {
  color: var(--parchment);
  font-family: var(--font-body), sans-serif;
  font-size: 14px;
  font-weight: 500;
  word-break: break-all;
}
/* Legacy class kept for safety — some older callers may still mount
   pre-row markup. Treats identically to __rowvalue. */
.sub-account-profile-block__email {
  color: var(--parchment);
  font-family: var(--font-body), sans-serif;
  font-size: 14px;
  font-weight: 500;
  word-break: break-all;
  margin-bottom: 4px;
}
.sub-account-profile-block__sub {
  color: var(--moonstone);
  font-size: 11.5px;
  line-height: 1.5;
  margin: 0 0 10px;
}
.sub-account-profile-block__link {
  background: none;
  border: none;
  padding: 0;
  color: var(--sa-gold);
  font-family: var(--font-body), sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.sub-account-profile-block__link:hover { color: var(--rose); }
.sub-account-profile-block__link:focus-visible {
  outline: 2px solid var(--oracle);
  outline-offset: 2px;
}

/* Section header — ember-gold ornament divider with centered eyebrow.
   Used by NOTIFICATIONS and ACCOUNT sections. */
.sub-account-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 14px;
}
.sub-account-section-header__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(201,169,109,0.35) 50%, transparent 100%);
}
.sub-account-section-header__label {
  color: var(--sa-gold);
  font-family: var(--font-body), sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

/* Notification row — label + subtitle + toggle. Toggle is a styled
   <button role="switch"> so a11y is correct without native checkbox
   complications. Default OFF for unsubscribed users; tap shows toast. */
.sub-notif-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 4px;
  border-bottom: 1px solid rgba(247,209,172,0.06);
}
.sub-notif-row:last-of-type { border-bottom: none; }
.sub-notif-row__main {
  flex: 1;
  min-width: 0;
}
.sub-notif-row__title {
  color: var(--parchment);
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 2px;
}
.sub-notif-row__sub {
  color: var(--moonstone);
  font-size: 11.5px;
  line-height: 1.45;
}
.sub-notif-toggle {
  width: 36px;
  height: 20px;
  border-radius: 9999px;
  background: rgba(247,209,172,0.08);
  border: 1px solid rgba(247,209,172,0.18);
  position: relative;
  cursor: pointer;
  padding: 0;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
  flex-shrink: 0;
}
.sub-notif-toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--moonstone);
  transition: transform var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.sub-notif-toggle[aria-checked="true"] {
  background: rgba(224,242,81,0.25);
  border-color: var(--oracle);
}
.sub-notif-toggle[aria-checked="true"]::after {
  transform: translateX(16px);
  background: var(--oracle);
}
.sub-notif-toggle:focus-visible {
  outline: 2px solid var(--oracle);
  outline-offset: 2px;
}
.sub-notif-helper {
  margin-top: 10px;
  color: var(--smoke);
  font-size: 11px;
  line-height: 1.55;
}

/* 7.5bw — toggle states for the wired Cosmic events row.
   --busy: dim + disable pointer while a fetch is in flight. Prevents
   the user from double-tapping during the OneSignal round-trip and
   firing the soft pre-prompt twice. */
.sub-notif-row--busy { opacity: 0.55; pointer-events: none; }
.sub-notif-row--busy .sub-notif-toggle { cursor: progress; }

/* 7.5bw — branded sheet content reused by:
     openIOSInstallSheet (install gate)
     openSoftPrePromptSheet (pre-native ask)
     openNotificationsDeniedSheet (denied-state)
   All three render inside createModalShell, so the overlay / focus
   trap / Esc handling is inherited; this block styles only the inner
   content. Keep close to the paywall modal's voice (eyebrow + h1 +
   body + action row at the bottom). */
.sub-notif-sheet__title {
  font-family: var(--font-display), serif;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--parchment);
  margin: 4px 0 14px;
}
.sub-notif-sheet__body {
  font-family: var(--font-body), sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--smoke);
  margin: 0 0 18px;
}
.sub-notif-sheet__body--small {
  font-size: 12.5px;
  color: rgba(247,209,172,0.55);
  margin-top: -8px;
}
.sub-notif-sheet__actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  justify-content: flex-end;
}
.sub-notif-sheet__btn {
  font-family: var(--font-body), sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--parchment);
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.sub-notif-sheet__btn--primary {
  background: var(--oracle);
  color: var(--ink);
  border-color: var(--oracle);
}
.sub-notif-sheet__btn--primary:hover { filter: brightness(1.08); }
.sub-notif-sheet__btn--ghost {
  border-color: rgba(247,209,172,0.25);
}
.sub-notif-sheet__btn--ghost:hover {
  border-color: rgba(247,209,172,0.55);
}
.sub-notif-sheet__btn:focus-visible {
  outline: 2px solid var(--oracle);
  outline-offset: 2px;
}

/* Account-link row — left icon + label + arrow. Same skeleton as
   sub-account-action but as a row inside the ACCOUNT section, not a
   pill. Sign-out variant flips label/icon to muted-rose. */
.sub-account-link {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 4px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(247,209,172,0.06);
  cursor: pointer;
  text-align: left;
  color: var(--parchment);
  font-family: var(--font-body), sans-serif;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  transition: background var(--dur-fast) var(--ease-standard);
}
.sub-account-link:last-of-type { border-bottom: none; }
.sub-account-link:hover { background: rgba(201,169,109,0.06); }
.sub-account-link:focus-visible { outline: 2px solid var(--oracle); outline-offset: -2px; }
.sub-account-link__icon {
  color: var(--sa-gold);
  width: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.sub-account-link__main {
  flex: 1;
  min-width: 0;
}
.sub-account-link__title {
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 2px;
}
.sub-account-link__sub {
  color: var(--moonstone);
  font-size: 11.5px;
  line-height: 1.45;
}
.sub-account-link__arrow {
  color: var(--smoke);
  font-size: 13px;
  flex-shrink: 0;
}
.sub-account-link--destructive {
  /* Slightly desaturated rose/coral for Sign Out per Task 2 — signals
     destructive without screaming "danger." */
  color: rgba(242, 81, 112, 0.85);
}
.sub-account-link--destructive .sub-account-link__icon { color: rgba(242, 81, 112, 0.65); }

/* Member-since footer — sparkle-bookended timestamp at the bottom.
   Hidden via :empty when the date can't be computed. */
.sub-account-member-since {
  margin: 36px 0 0;
  padding: 18px 0 8px;
  color: var(--sa-gold);
  font-family: var(--font-body), sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.sub-account-member-since__sparkle { color: var(--rose); font-size: 11px; }
.sub-account-member-since[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   SUBSCRIPTIONS COMING-SOON treatment (per Task 3)
   Wraps pricing cards + payment form in a dimmed/blurred non-
   interactive container with a dateless "✦ COMING SOON ✦" pill above.
   (The committed public-launch date was removed from all copy
   2026-05-26.) Removed entirely when SUBSCRIPTIONS_LIVE = true (see
   subscription-ui.js for the flag).
   ═══════════════════════════════════════════════════════════════════ */
.sub-coming-soon-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  margin: 0 auto 22px;
  padding: 7px 16px;
  background: transparent;
  border: 1px solid rgba(201, 169, 109, 0.4);
  border-radius: 9999px;
  color: var(--sa-gold);
  font-family: var(--font-body), sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.sub-coming-soon-pill__sparkle { color: var(--rose); font-size: 9px; }
/* Admin variant — same shape, chartreuse accent so it reads as a
   different status (unlimited access vs gated coming-soon). */
.sub-coming-soon-pill--admin {
  border-color: rgba(224, 242, 81, 0.45);   /* --sa-chartreuse */
  color: #c8db4a;
}
.sub-coming-soon-pill--admin .sub-coming-soon-pill__sparkle { color: #c8db4a; }

.sub-coming-soon-preview {
  opacity: 0.45;
  filter: blur(0.5px);
  pointer-events: none;
  user-select: none;
}

/* ─── First-render loading spinner inside the account panel ─────────
   Centered, faintly visible. Shown for one tick while the cached
   subscription snapshot primes. */
.sub-account-panel-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
  color: var(--moonstone);
  opacity: 0.7;
}
.sub-spinner--inline { display: inline-flex; }
.sub-spinner--inline svg { animation: sub-spin 0.85s linear infinite; }
@keyframes sub-spin { to { transform: rotate(360deg); } }

/* ─── Smooth fade-in for panel transitions (subscribe success, etc.) */
.sub-account-panel.is-fading-in {
  animation: sub-fade-in 320ms ease-out;
}
@keyframes sub-fade-in {
  from { opacity: 0.0; transform: translateY(4px); }
  to   { opacity: 1.0; transform: translateY(0);    }
}

/* ─── Post-subscribe gold particle burst (~800ms) ─────────────────────
   Anchored to the panel via position: relative on the host. Particles
   start at the center and fly outward to (--dx, --dy) coords, fading
   out as they reach apex. Pointer-events:none so they never block
   clicks on the transitioning panel underneath. */
.sub-success-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.sub-success-particle {
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: radial-gradient(circle, #f7d1ac 0%, rgba(201,169,109,0.6) 60%, transparent 100%);
  box-shadow: 0 0 6px rgba(247, 209, 172, 0.7);
  opacity: 0;
  animation: sub-particle-burst 820ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes sub-particle-burst {
  0%   { opacity: 0;   transform: translate(0, 0) scale(0.4); }
  18%  { opacity: 1; }
  100% { opacity: 0;   transform: translate(var(--dx, 0), var(--dy, 0)) scale(1.0); }
}
@media (prefers-reduced-motion: reduce) {
  .sub-success-particle, .sub-account-panel.is-fading-in {
    animation: none;
  }
}
.sub-coming-soon-label {
  text-align: center;
  margin: 18px 0 4px;
  color: rgba(201, 169, 109, 0.75);
  font-family: var(--font-body), sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════
   APP NAV — Push-style hamburger drawer (replaces the prior slide-out
   scaffold). Drawer slides in from the LEFT, the app content pushes
   ~70% to the right with a subtle scale-down so the drawer feels
   spatial rather than overlaid.

   See public/js/app-nav.js for behavior. Sacred Acid tokens throughout.
   ═══════════════════════════════════════════════════════════════════ */

/* App shell — wraps every existing screen + modal. Stays in place when
   the drawer opens (the 2026-05 push-pattern was replaced by an
   overlay-with-scrim per real-use feedback that the push read as
   "squishing the content").
   IMPORTANT: do NOT add `will-change: transform` here. The spec says
   will-change:transform creates a containing block for fixed-positioned
   descendants — which traps the kit's .ok-substrate (position: fixed)
   inside app-shell instead of pinning it to the viewport. */
#app-shell {
  position: relative;
  min-height: 100vh;
  background: var(--void);
}
/* Lock background scroll + disable interaction with the app while
   drawer is open. The scrim (below) handles the visual dim. */
body.drawer-open #app-shell {
  pointer-events: none;
}

/* Scrim — full-viewport tap-to-close + visual dim. Repurposed from the
   prior .drawer-sliver-tap (which was sized to the 30% sliver of the
   pushed app); now covers the whole viewport behind the drawer. */
.drawer-sliver-tap {
  position: fixed;
  inset: 0;
  z-index: 1450;                         /* under #push-drawer (1500) */
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: none;
  cursor: pointer;
  display: none;
  opacity: 0;
  transition: opacity 240ms ease;
  padding: 0;
}
body.drawer-open .drawer-sliver-tap {
  display: block;
  opacity: 1;
}
@supports not (backdrop-filter: blur(2px)) {
  body.drawer-open .drawer-sliver-tap { background: rgba(0, 0, 0, 0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .drawer-sliver-tap { transition: none; }
}

/* Push drawer panel. Hidden by default via [hidden]; .drawer-open on
   body slides it in. */
#push-drawer {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: 80%;
  max-width: 320px;
  background: #0A0908;
  border-right: 1px solid rgba(201, 169, 109, 0.22);
  transform: translateX(-100%);
  transition: transform 280ms cubic-bezier(.32, .72, .34, 1),
              box-shadow 320ms ease;
  will-change: transform;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  overflow-y: auto;
}
#push-drawer[hidden] { display: none; }
body.drawer-open #push-drawer {
  transform: translateX(0);
  box-shadow:
    8px 0 32px -12px rgba(0,0,0,0.9),
    inset -1px 0 0 rgba(201, 169, 109, 0.12);
}
@media (prefers-reduced-motion: reduce) {
  #push-drawer {
    transform: translateX(-100%);
    opacity: 0;
    transition: opacity 200ms ease;
  }
  body.drawer-open #push-drawer {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Ember-gold seam on right edge of the panel — adds depth without a
   heavy border. */
#push-drawer::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(201, 169, 109, 0.45) 40%,
    rgba(201, 169, 109, 0.45) 60%,
    transparent 100%);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}
body.drawer-open #push-drawer::after { opacity: 1; }

/* Drawer hero — MENU eyebrow + × close top-right; wordmark + fingerprint
   centered below. */
.drawer-hero {
  position: relative;
  padding: 54px 22px 30px;
  text-align: center;
  border-bottom: 1px solid rgba(247, 209, 172, 0.08);
  margin-bottom: 14px;
}
.drawer-topright {
  position: absolute;
  top: 54px; right: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
}
.drawer-eyebrow {
  color: var(--sa-gold);
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  font-weight: 500;
}
.drawer-close-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(247, 209, 172, 0.2);
  color: var(--rose);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.drawer-close-btn:hover { border-color: var(--rose); }
.drawer-close-btn:focus-visible {
  outline: 2px solid var(--oracle);
  outline-offset: 2px;
}

.drawer-wordmark-wrap {
  position: relative;
  margin-top: 28px;
  padding: 36px 8px 24px;
  display: inline-block;
}
/* Fingerprint backdrop — production asset at /public/img/fingerprint.jpg
   (510×509 JPG, light fingerprint on solid black). mix-blend-mode:
   screen lifts the light pattern out of the dark JPG background.
   Opacity bumped 0.12 → 0.22 in the 2026-05-21 cleanup pass for a
   visible-but-not-dominant watermark. */
.drawer-fingerprint {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(220px, 64vw, 280px);
  height: auto;
  opacity: 0.22;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.drawer-wordmark {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}
/* "the ORACLE" lockup — kit's .ok-wordmark (oracle-kit.css) rendered
   at its default size (mb 29px + oracle 54px). Drop-shadow lifts it
   off the fingerprint without needing a text-shadow ring.
   2026-06-02 cleanup: was an <img src="/assets/theOracle-wordmark.svg">
   which clipped the ORACLE E because SVG-as-image doesn't load the
   page's @font-face rules. Switched to HTML lockup. */
.drawer-logo {
  filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.85));
}

/* Drawer row — Account icon is now a small gold gradient initial-
   circle (sigil) per the 2026-05-21 cleanup pass. Sized to match the
   18×18 SVG icons on Library + Help & Support — the circle itself
   becomes the visual cue; the initial is a textural detail rather
   than a legibility target. */
.drawer-row__initial {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C9A96D 0%, #8a6b3d 100%);
  border: 1px solid rgba(247, 209, 172, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Negate the .drawer-row__icon parent's 36×36 inflation so the
     circle reads at 28px while keeping the row's hit target intact. */
}
.drawer-row__initial-mark {
  color: var(--ink);
  font-family: 'Silver Editorial', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
  /* Optical centering — italic glyphs lean right; nudge left ~1px so
     the visual centroid sits in the circle's geometric center. */
  transform: translateX(-1px);
}

/* Drawer rows */
.drawer-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.drawer-row {
  position: relative;
  background: transparent;
  border: none;
  padding: 18px 22px;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--parchment);
  font-family: var(--font-body), sans-serif;
  /* Bumped from 14 to 17 per real-use feedback: nav items were
     reading too small relative to the wordmark above. 17px matches the
     visual weight of the Silver Editorial "the" in the new wordmark. */
  font-size: 17px;
  letter-spacing: 0.02em;
  transition: background 180ms ease, color 180ms ease;
}
.drawer-row:hover { background: rgba(201, 169, 109, 0.06); }
.drawer-row:focus-visible {
  outline: 2px solid var(--oracle);
  outline-offset: -2px;
}
.drawer-row__icon {
  color: var(--oracle);
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 180ms ease;
}
.drawer-row__label { flex: 1; }

/* 7.5eg — Share The Oracle drawer entry. Same row chrome (size, gold
   label, hover wash) as every other drawer row — only the icon flips
   to acid green so the affordance is unmistakable. */
.drawer-row--share .drawer-row__icon { color: #CCFF00; }

/* 7.5eg — Account screen "Share The Oracle" section.
   Secondary button — acid-green border + text, transparent fill on the
   dark account substrate. Visible but not competing with the Subscribe
   / Manage Subscription primary CTAs. Lives in the same body column
   the existing sub-account sections use, so spacing is automatic. */
.sub-account-share-block {
  margin: 28px 0 0;
}
.sub-account-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  background: transparent;
  border: 1px solid #CCFF00;
  border-radius: 999px;
  color: #CCFF00;
  font-family: "Futura Cyrillic", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.sub-account-share-btn:hover,
.sub-account-share-btn:focus-visible {
  background: rgba(204,255,0,0.08);
  outline: none;
}
.sub-account-share-btn svg { flex: none; }

.drawer-footer {
  padding: 24px 22px 28px;
  color: rgba(247, 209, 172, 0.45);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-family: "The Silver Editorial", Georgia, serif;
  font-style: italic;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.drawer-footer__sparkle { color: var(--rose); }

/* 7.5fy — App version under the drawer footer. Deliberately faint;
   support asks "what version do you see?" and it's tap-to-copy.
   Populated by version-check.js from window.__ORACLE_VERSION__. */
.drawer-version {
  display: block;
  width: 100%;
  margin: -14px 0 18px;
  padding: 4px;
  background: none;
  border: none;
  color: rgba(247, 209, 172, 0.28);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-align: center;
  cursor: pointer;
}

/* ─── Hamburger morph animation (three lines → ×) ───────────────────
   The .app-nav-btn--menu element from the prior nav scaffold gets
   data-open="true|false" set by app-nav.js. CSS handles the lines'
   rotate / fade transforms. */
.app-nav-btn--menu {
  position: relative;
  /* Override the column flex-direction + gap from the prior scaffold so
     the three line spans become absolutely-positioned children we can
     transform individually. */
  flex-direction: row;
  gap: 0;
  padding: 0;
}
.app-nav-btn--menu span {
  position: absolute;
  left: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--sa-gold);
  transform-origin: center;
  transition:
    transform 280ms cubic-bezier(.32, .72, .34, 1),
    width 240ms cubic-bezier(.32, .72, .34, 1),
    opacity 200ms ease;
}
.app-nav-btn--menu span:nth-child(1) { top: calc(50% - 5px); margin-left: -7px; }
.app-nav-btn--menu span:nth-child(2) { top: calc(50% - 1px); margin-left: -7px; }
.app-nav-btn--menu span:nth-child(3) { top: calc(50% + 3px); margin-left: -7px; }
.app-nav-btn--menu[data-open="true"] span:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}
.app-nav-btn--menu[data-open="true"] span:nth-child(2) {
  width: 0; opacity: 0;
}
.app-nav-btn--menu[data-open="true"] span:nth-child(3) {
  transform: translateY(-4px) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
  .app-nav-btn--menu span { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   SIGN OUT CONFIRMATION MODAL
   Cancel is PRIMARY (chartreuse outline). "Yes, sign me out" is
   secondary (muted underlined link). Deliberately harder to
   accidentally sign out per the master prompt.
   ═══════════════════════════════════════════════════════════════════ */
#signout-confirm-modal[hidden] { display: none; }
.signout-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1600;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}
.signout-modal-shell {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--void);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sub-modal-fade 200ms var(--ease-standard);
}
@media (min-width: 600px) {
  .signout-modal-shell {
    margin: 32px 16px;
    max-height: calc(100vh - 64px);
    border: 1px solid var(--hairline-soft);
    border-radius: 16px;
    box-shadow: var(--shadow-modal-lift);
  }
}
.signout-modal-shell::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(201,169,109,0.12), transparent 65%);
}
.signout-modal-topbar {
  position: relative;
  z-index: 5;
  padding: 32px 22px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.signout-modal-body {
  position: relative;
  z-index: 4;
  padding: 24px 22px 32px;
  display: flex;
  flex-direction: column;
}
.signout-modal-headline {
  font-family: "The Silver Editorial", Georgia, serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  color: var(--parchment);
  margin: 0 0 14px;
  text-align: center;
}
.signout-modal-body-copy {
  color: var(--moonstone);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  margin: 0 0 26px;
  text-wrap: pretty;
}
.signout-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Cancel = primary (chartreuse outline pill — full width). Reuses
   .sub-cta-primary visual language from the subscription handoff. */
.signout-cancel-btn {
  width: 100%;
  background: linear-gradient(180deg, rgba(224,242,81,0.12) 0%, rgba(224,242,81,0.02) 100%);
  color: var(--oracle);
  border: 1px solid var(--oracle);
  border-radius: 9999px;
  padding: 15px 18px;
  font-family: var(--font-body), sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-glow-cta);
}
.signout-cancel-btn:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}
/* "Yes, sign me out" = secondary muted underlined link */
.signout-confirm-link {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  padding: 4px 0;
  color: var(--moonstone);
  font-family: var(--font-body), sans-serif;
  font-size: 12px;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.signout-confirm-link:hover { color: var(--rose); }

/* ═══════════════════════════════════════════════════════════════════
   SIGNED-OUT SCREEN (a #step-account-sized step section)
   ═══════════════════════════════════════════════════════════════════ */
/* IMPORTANT: this screen is a child of #step-signed-out which is itself
   `display: flex; flex-direction: column; flex: 1` via the global .step
   .active rule. `flex: 1` here lets the signed-out screen fill whatever
   vertical space its section has (more reliable than min-height: 100vh
   when ancestors don't establish a viewport-height context). */
.signed-out-screen {
  position: relative;
  flex: 1;
  width: 100%;
  padding: 80px 22px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.signed-out-screen::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 40% at 50% 30%, rgba(201,169,109,0.12), transparent 65%);
}
.signed-out-content {
  position: relative;
  z-index: 2;
  max-width: 480px;
  width: 100%;
}
/* Step section override — force the signed-out section to fill the
   viewport even when #app-shell isn't a flex container. Parents above
   us are block-level, but step.active gets `flex: 1` which only works
   inside flex parents — so we set explicit min-height here too. */
#step-signed-out.active {
  min-height: 100dvh;
  max-width: none;
  padding: 0;
}
.signed-out-ornament {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 24px;
  max-width: 280px;
}
.signed-out-ornament__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(247,209,172,0.4) 50%, transparent 100%);
}
.signed-out-ornament__sparkle {
  color: var(--rose);
  font-size: 12px;
  letter-spacing: 0.4em;
}
.signed-out-eyebrow {
  color: var(--sa-gold);
  font-family: var(--font-body), sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.signed-out-headline {
  font-family: "The Silver Editorial", Georgia, serif;
  font-weight: 400;
  font-size: 38px;
  line-height: 1.05;
  color: var(--parchment);
  margin: 0 0 18px;
}
.signed-out-body {
  color: var(--moonstone);
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 32px;
  text-wrap: pretty;
}
.signed-out-cta {
  width: 100%;
  max-width: 320px;
  background: linear-gradient(180deg, rgba(224,242,81,0.12) 0%, rgba(224,242,81,0.02) 100%);
  color: var(--oracle);
  border: 1px solid var(--oracle);
  border-radius: 9999px;
  padding: 14px 22px;
  font-family: var(--font-body), sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-glow-subtle);
}

/* ═══════════════════════════════════════════════════════════════════
   ACCOUNT SCREEN — Sign Out section at the bottom
   ═══════════════════════════════════════════════════════════════════ */
.sub-account-signout {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline-soft);
  text-align: center;
}
.sub-account-signout__label {
  color: var(--smoke);
  font-family: var(--font-body), sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.sub-account-signout__btn {
  background: transparent;
  border: 1px solid rgba(163, 163, 158, 0.22);
  border-radius: 9999px;
  padding: 11px 26px;
  color: var(--moonstone);
  font-family: var(--font-body), sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}
.sub-account-signout__btn:hover {
  color: var(--rose);
  border-color: rgba(247, 209, 172, 0.45);
}
.sub-account-signout__btn:focus-visible {
  outline: 2px solid var(--oracle);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   SUPPORT FALLBACK MODAL
   ═══════════════════════════════════════════════════════════════════ */
#support-fallback-modal[hidden] { display: none; }
.support-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1700;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}
.support-modal-shell {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--void);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sub-modal-fade 220ms ease-out;
}
@media (min-width: 600px) {
  .support-modal-shell {
    margin: 32px 16px;
    max-height: calc(100vh - 64px);
    border: 1px solid var(--hairline-soft);
    border-radius: 16px;
    box-shadow: var(--shadow-modal-lift);
  }
}
.support-modal-shell::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(201,169,109,0.12), transparent 65%);
}
.support-modal-topbar {
  position: relative;
  z-index: 5;
  padding: 32px 22px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.support-modal-body {
  position: relative;
  z-index: 4;
  padding: 24px 22px 32px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.support-headline {
  font-family: "The Silver Editorial", Georgia, serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.05;
  color: var(--parchment);
  margin: 18px 0 18px;
  text-align: center;
}
.support-headline em { color: var(--rose); font-style: italic; }
.support-body-copy {
  color: var(--moonstone);
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 24px;
  text-align: center;
  text-wrap: pretty;
}
.support-email-pill {
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(201, 169, 109, 0.32);
  border-radius: 12px;
  margin-bottom: 14px;
  text-align: center;
}
.support-email-pill__eyebrow {
  color: var(--sa-gold);
  font-size: 9.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 500;
}
.support-email-pill__address {
  font-family: "The Silver Editorial", Georgia, serif;
  font-size: 22px;
  color: var(--rose);
  letter-spacing: 0.02em;
  word-break: break-all;
}
.support-copy-btn {
  width: 100%;
  background: linear-gradient(180deg, rgba(224,242,81,0.12) 0%, rgba(224,242,81,0.02) 100%);
  color: var(--oracle);
  border: 1px solid var(--oracle);
  border-radius: 9999px;
  padding: 14px 18px;
  font-family: var(--font-body), sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 28px -10px rgba(224, 242, 81, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: box-shadow 220ms ease, background 220ms ease;
}
.support-copy-btn.is-copied {
  background: linear-gradient(180deg, rgba(224,242,81,0.18) 0%, rgba(224,242,81,0.04) 100%);
}
.support-copy-btn__check {
  display: none;
}
.support-copy-btn.is-copied .support-copy-btn__check { display: inline-block; }
.support-copy-btn:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.support-subject-hint {
  margin-top: 18px;
  text-align: center;
  color: var(--smoke);
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.support-subject-hint__value { color: var(--moonstone); }

/* ═══════════════════════════════════════════════════════════════════
   APP MENU (DEPRECATED — kept for reference, replaced by push drawer)
   The old slide-out menu styles below are dead code as of 2026-05-20b;
   safe to remove once the push drawer is in production for one cycle.
   ═══════════════════════════════════════════════════════════════════ */

/* Hamburger + avatar cluster — used in BS header right column AND in a
   floating absolute-positioned variant inside #step-reading. The library
   keeps its own .library-ornate__menu / __avatar styling — same visual
   language, different class names for historical reasons. */
.app-nav-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.app-nav-cluster--floating {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 30;
}
.app-nav-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(11, 10, 10, 0.65);
  border: 1px solid rgba(247, 209, 172, 0.22);
  color: var(--rose);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.app-nav-btn:hover { border-color: var(--rose); }
.app-nav-btn:focus-visible {
  outline: 2px solid var(--oracle);
  outline-offset: 2px;
}
.app-nav-btn--menu {
  flex-direction: column;
  gap: 4px;
}
.app-nav-btn--menu span {
  display: block;
  width: 14px;
  height: 1.5px;
  background: var(--sa-gold);
}
.app-nav-btn--avatar {
  font-family: "The Silver Editorial", Georgia, serif;
  font-size: 16px;
  color: var(--sa-gold);
}

/* Slide-out menu panel */
.app-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
}
.app-menu-overlay[hidden] { display: none; }
.app-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  animation: sub-modal-fade 200ms var(--ease-standard);
}
.app-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  max-width: 88vw;
  height: 100vh;
  background: var(--ink);
  border-left: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px -20px rgba(0, 0, 0, 0.9);
  animation: app-menu-slide-in 240ms var(--ease-standard);
}
@keyframes app-menu-slide-in {
  from { transform: translateX(100%); opacity: 0.6; }
  to   { transform: translateX(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .app-menu-panel,
  .app-menu-backdrop { animation: none; }
}

.app-menu-topbar {
  padding: 32px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--hairline-soft);
}
.app-menu-eyebrow {
  color: var(--sa-gold);
  font-family: var(--font-body), sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}
.app-menu-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(247,209,172,0.18);
  color: var(--rose);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.app-menu-close:hover { border-color: var(--rose); }
.app-menu-close:focus-visible {
  outline: 2px solid var(--oracle);
  outline-offset: 2px;
}

.app-menu-list {
  flex: 1;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
}
.app-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(247,209,172,0.07);
  cursor: pointer;
  text-align: left;
  color: var(--parchment);
  font-family: var(--font-body), sans-serif;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.app-menu-item:hover { background: rgba(224, 242, 81, 0.04); color: var(--oracle); }
.app-menu-item:hover .app-menu-item__glyph { color: var(--oracle); }
.app-menu-item:focus-visible {
  outline: 2px solid var(--oracle);
  outline-offset: -2px;
}
.app-menu-item--muted { color: var(--moonstone); }
.app-menu-item--muted:hover { color: var(--rose); background: rgba(247,209,172,0.04); }
.app-menu-item--muted:hover .app-menu-item__glyph { color: var(--rose); }
.app-menu-item__glyph {
  flex-shrink: 0;
  width: 18px;
  color: var(--sa-gold);
  font-size: 13px;
  text-align: center;
}
.app-menu-item__label { flex: 1; }

.app-menu-footer {
  padding: 16px 22px 24px;
  color: var(--smoke);
  font-family: var(--font-body), sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  border-top: 1px solid var(--hairline-soft);
}

/* ═══════════════════════════════════════════════════════════════════
   TOAST (save-offer acceptance)
   ═══════════════════════════════════════════════════════════════════ */

.sub-toast {
  position: fixed;
  bottom: 80px;
  left: 20px;
  right: 20px;
  max-width: 480px;
  margin: 0 auto;
  z-index: 1200;
  background: rgba(20,17,13,0.95);
  border: 1px solid rgba(224,242,81,0.45);
  color: var(--oracle);
  border-radius: 12px;
  padding: 13px 16px;
  font-family: var(--font-body), sans-serif;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-align: center;
  box-shadow: 0 18px 50px -12px rgba(0,0,0,0.8);
  animation: sub-toast-slide 320ms var(--ease-ritual);
}
@keyframes sub-toast-slide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}