/* =============================================================
   Alpha World — parent-facing web theme
   Canonical source: functions/src/shared/theme/alphaWorld.css
   Mirrored to public/styles/letter.css by the hosting predeploy
   step in firebase.json. Edit this file, never the copy.

   Same design language as the parent emails (see theme/email.js):
   deep violet ground, one raised card, amber for money, purple for
   normal approvals, red for safety. Class names are unchanged from
   the previous letter theme so no page markup had to move.
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Nunito+Sans:wght@400;600;700;800&display=swap");

:root {
  /* ground + surfaces */
  --bg: #211430;
  --card: #33205A;
  --card-hi: #3A2168;
  --panel: #271A45;

  /* ink */
  --ink: #ffffff;
  --ink-2: #e9e0fa;
  --ink-mute: #cbb6f5;
  --ink-faint: #9e8ac4;
  --ink-dim: #8a78ae;

  /* accents — colour carries meaning, never decoration */
  --violet: #7c3aed;
  --violet-deep: #6d28d9;
  --violet-soft: #c4b0ff;
  --amber: #fbbf24;
  --amber-deep: #f59e0b;
  --amber-ink: #2a1a16;
  --red: #b91c1c;
  --red-soft: #fca5a5;
  --green: #34d399;

  --rule: #3e2a63;
  --rule-soft: #33205a;

  --display: "Bricolage Grotesque", "Nunito Sans", Helvetica, Arial, sans-serif;
  --text: "Nunito Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --max: 600px;
  --gutter: clamp(16px, 4vw, 28px);
  --radius: 24px;

  --shadow-press: 0 10px 30px -12px rgba(0, 0, 0, 0.65);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background: transparent;
}

/* a single soft violet bloom behind the card — replaces the paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 460px at 50% -12%, rgba(124, 58, 237, 0.35) 0%, transparent 65%),
    radial-gradient(600px 400px at 88% 8%, rgba(251, 191, 36, 0.07) 0%, transparent 60%);
}

/* ============ page shell — one card on the ground ============ */
.page {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(20px, 5vw, 36px) var(--gutter) 56px;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 4vw, 28px);
  min-height: 100vh;
  animation: pageIn 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* every direct panel of .page reads as the email's card */
.page > section,
.page > #shell {
  background: var(--card);
  border-radius: var(--radius);
  padding: clamp(24px, 5vw, 34px) clamp(20px, 5vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3.5vw, 24px);
  box-shadow: var(--shadow-press);
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============ letterhead / brand bar ============ */
.letterhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.mark {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.4px;
  color: #eee6ff;
  line-height: 1;
}
.mark .glyph {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  font-style: normal;
  color: var(--amber);
  line-height: 1;
}
.meta {
  font-family: var(--text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: right;
  line-height: 1.6;
}

/* ============ subject + headline ============ */
.subject {
  font-family: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violet-soft);
  display: flex;
  align-items: center;
  gap: 10px;
}
.subject::before {
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--amber);
  display: inline-block;
}

.headline {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 5.4vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.8px;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.headline em {
  font-style: normal;
  color: var(--amber);
}

.lede {
  font-family: var(--text);
  font-weight: 400;
  font-size: clamp(15.5px, 2vw, 17px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 52ch;
  margin: 0;
}
.lede strong { color: var(--ink); font-weight: 700; }

/* ============ details list — the neutral panel ============ */
.dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 24px;
  row-gap: 14px;
  align-items: center;
  background: var(--panel);
  border-radius: 16px;
  padding: 20px 22px;
}
.dl dt {
  font-family: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9f86d6;
}
.dl dd {
  margin: 0;
  font-family: var(--text);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  text-align: right;
}
.dl dd.total {
  font-family: var(--display);
  font-size: 20px;
  color: var(--amber);
}

/* money reads gold, and only money */
.arrow { color: var(--ink-faint); padding: 0 0.35em; }
.to { color: var(--amber); font-weight: 800; }

/* ============ buttons ============ */
.actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.2px;
  text-transform: none;
  text-decoration: none;
  color: var(--ink);
  background: var(--violet);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: filter 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.btn:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: var(--shadow-press);
}
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn.primary { background: var(--violet); color: #fff; }

/* amber = money. Kept as the class name every page already uses. */
.btn.amber { background: var(--amber-deep); color: var(--amber-ink); }

/* rust = the destructive/decline answer */
.btn.rust { background: transparent; border-color: var(--red); color: var(--red-soft); }
.btn.rust:hover:not(:disabled) { background: var(--red); color: #fff; }

.btn.leaf { background: #15803d; color: #fff; }

.btn.ghost { background: var(--card); border-color: var(--violet-deep); color: var(--violet-soft); }

/* ============ footer note ============ */
.footnote {
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  font-size: 13px;
  color: var(--ink-faint);
  line-height: 1.5;
  font-family: var(--text);
  margin: 0;
}
.footnote a { color: var(--violet-soft); text-decoration: underline; text-underline-offset: 3px; }

.aside {
  border-left: 3px solid var(--violet-deep);
  padding: 2px 0 2px 16px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-faint);
}
.aside strong { color: var(--ink-mute); font-weight: 700; }

.notice { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; }

/* ============ state panels (loading / success / error) ============ */
.state {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.state .stamp {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--violet-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 32px;
  color: var(--amber);
  animation: stampIn 560ms cubic-bezier(0.22, 1, 0.36, 1) both 100ms;
}
.state.success .stamp { color: var(--green); border-color: rgba(52, 211, 153, 0.5); }
.state.error   .stamp { color: var(--red-soft); border-color: rgba(185, 28, 28, 0.6); background: #2e1420; }
.stamp.rust    { color: var(--red-soft); border-color: rgba(185, 28, 28, 0.6); background: #2e1420; }

@keyframes stampIn {
  from { opacity: 0; transform: scale(0.75); }
  to   { opacity: 1; transform: scale(1); }
}

.state .title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 5vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.6px;
  color: var(--ink);
  margin: 0;
}
.state .desc {
  font-family: var(--text);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 48ch;
  margin: 0;
}

/* loading dot */
.loading-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--amber);
  margin: 28px 0;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

[hidden] { display: none !important; }

/* ============ billing cycle switch (subscriptions) ============ */
.cycles {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--panel);
  border-radius: 9999px;
  align-self: flex-start;
}
.cycle-tab {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 9px 18px;
  border-radius: 9999px;
  font-family: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 180ms ease, color 180ms ease;
}
.cycle-tab:hover { color: var(--ink); }
.cycle-tab:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.cycle-tab[aria-selected="true"] { background: var(--violet); color: #fff; }
.badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 9999px;
  background: var(--amber);
  color: var(--amber-ink);
  text-transform: uppercase;
}
.cycle-tab[aria-selected="true"] .badge { background: var(--amber); color: var(--amber-ink); }

/* ============ plan rows (subscriptions) ============ */
.tariff { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tariff-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 4px;
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: var(--panel);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.tariff-row:hover { transform: translateY(-1px); border-color: var(--violet-deep); }
.tariff-row:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.tariff-row[aria-checked="true"] { border-color: var(--amber); background: #3a2e12; }
.nib {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--ink-faint);
  flex: 0 0 auto;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.tariff-row[aria-checked="true"] .nib {
  background: var(--amber);
  border-color: var(--amber);
  box-shadow: inset 0 0 0 3px #3a2e12;
}
.tariff-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
}
.tariff-note {
  grid-column: 2;
  font-family: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tariff-price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  color: var(--ink);
}
.tariff-row[aria-checked="true"] .tariff-price { color: var(--amber); }

/* ============ time limit slider (timelimit page) ============ */
.slider-block {
  background: var(--panel);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.slider-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.slider-label {
  font-family: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9f86d6;
}
.slider-value {
  font-family: var(--display);
  font-weight: 800;
  font-size: 48px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -1px;
}
.slider-value small {
  font-family: var(--text);
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 8px;
  font-weight: 700;
  vertical-align: middle;
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--rule);
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--rule);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--amber);
  border: 3px solid var(--panel);
  margin-top: -8px;
  transition: transform 160ms ease;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--amber);
  border: 3px solid var(--panel);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  appearance: none;
  background: transparent;
  border: 2px solid var(--rule);
  border-radius: 9999px;
  padding: 7px 14px;
  font-family: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
  transition: all 160ms ease;
}
.chip:hover { border-color: var(--violet-deep); color: var(--ink); }
.chip:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.chip.active { background: var(--violet); border-color: var(--violet); color: #fff; }

/* ============ checkout (purchases) ============ */
.methods { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.method {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: var(--panel);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}
.method:hover { border-color: var(--violet-deep); }
.method:has(input:checked) { border-color: var(--amber); background: #3a2e12; }
.method input[type="radio"] { accent-color: var(--amber); width: 18px; height: 18px; cursor: pointer; flex: 0 0 auto; }
.method label { flex: 1; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--ink-2); }

.paygrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.paybtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 10px;
  border: 2px solid var(--rule);
  border-radius: 14px;
  background: var(--panel);
  cursor: pointer;
  font-family: var(--text);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  transition: transform 180ms ease, border-color 180ms ease;
}
.paybtn:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--amber); }
.paybtn:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.paybtn:disabled { opacity: 0.45; cursor: not-allowed; }
.paybtn .btn-icon { font-size: 24px; line-height: 1; }

.amountbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  border-radius: 16px;
  background: #3a2e12;
  border: 1px solid #6b531a;
}
.amountbar .amount-label {
  font-family: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f5c563;
}
.amountbar .amount-value {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

.statemsg {
  padding: 16px 18px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}
.statemsg.success { background: #12301f; border: 1px solid #1f6b41; color: #86efac; }
.statemsg.error   { background: #2e1420; border: 1px solid #7f2233; color: var(--red-soft); }

.spinner-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(33, 20, 48, 0.8);
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.spinner-overlay.active { display: flex; }
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--rule);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ stagger reveal ============ */
.reveal > * { opacity: 0; transform: translateY(6px); animation: revealIn 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.reveal > *:nth-child(1) { animation-delay: 60ms; }
.reveal > *:nth-child(2) { animation-delay: 140ms; }
.reveal > *:nth-child(3) { animation-delay: 220ms; }
.reveal > *:nth-child(4) { animation-delay: 300ms; }
.reveal > *:nth-child(5) { animation-delay: 380ms; }
.reveal > *:nth-child(6) { animation-delay: 460ms; }
.reveal > *:nth-child(7) { animation-delay: 540ms; }
@keyframes revealIn {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 420px) {
  .paygrid { grid-template-columns: 1fr; }
  .tariff-row { grid-template-columns: auto 1fr; }
  .tariff-price { grid-column: 2; text-align: left; }
  .tariff-note { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}