/* ================================================================
   Solo - Celebration / Submitted (Cream redesign, v2.0.0)
   Calm SubmittedView replaces confetti.
   First-bill celebration kept (calm version, no confetti).
   ================================================================ */

/* ── Claim splash (magic-link entry) ───────────────────────── */
/* Full-screen welcome moment when a customer arrives via a
   share-link claim token. Cream stage, animated mark dot
   "switching" from off to on, greeting, bill row, saving counter. */
.claim-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  animation: claim-splash-fade-in 320ms ease-out forwards;
  font-family: 'Inter Tight', system-ui, sans-serif;
  color: var(--ink);
}
.claim-splash.dismissing {
  animation: claim-splash-fade-out 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.claim-splash-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 380px;
  width: 100%;
}

.claim-splash-mark {
  width: 88px;
  height: 88px;
  color: var(--ink);
  opacity: 0;
  transform: scale(0.85);
  animation: claim-splash-mark-in 620ms 200ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  /* GPU-promote so the animation stays smooth even on slower iPhones */
  will-change: transform, opacity;
}
.claim-splash-mark-dot {
  /* Animate transform (GPU-accelerated) instead of cx for smoothness */
  transform: translateX(0);
  animation: claim-splash-dot-toggle 900ms 1100ms cubic-bezier(0.45, 0, 0.55, 1) forwards;
  will-change: transform;
}

.claim-splash-greet {
  margin: 28px 0 6px;
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(10px);
  animation: claim-splash-greet-in 520ms 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.claim-splash-greet em {
  font-style: italic;
  color: var(--accent);
}

.claim-splash-tag {
  margin: 0 0 36px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  opacity: 0;
  animation: claim-splash-fade-in 400ms 980ms ease-out forwards;
}

.claim-splash-bill {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Instrument Serif', serif;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(8px);
  animation: claim-splash-bill-in 540ms 1200ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.claim-splash-bill-from { color: var(--ink-3); }
.claim-splash-bill-arrow {
  font-size: 20px;
  color: var(--accent);
  font-style: normal;
}
.claim-splash-bill-to { color: var(--ink); }

.claim-splash-save {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0;
  animation: claim-splash-fade-in 480ms 1700ms ease-out forwards;
}
.claim-splash-save-num {
  font-family: 'Instrument Serif', serif;
  font-size: 64px;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.claim-splash-save-unit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@keyframes claim-splash-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes claim-splash-fade-out {
  /* Settle outward with a tiny scale - feels less like a hard cut */
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.985); }
}
@keyframes claim-splash-mark-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes claim-splash-dot-toggle {
  /* Toggle the mark's coral dot from "off" (cx=32.6) to "on" (cx=67.4)
     by translating 34.8 SVG units. transform is GPU-accelerated so this
     stays buttery on iPhones, where animating cx jitters. */
  from { transform: translateX(0); }
  to   { transform: translateX(34.8px); }
}
@keyframes claim-splash-greet-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes claim-splash-bill-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .claim-splash,
  .claim-splash-mark,
  .claim-splash-greet,
  .claim-splash-tag,
  .claim-splash-bill,
  .claim-splash-save {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .claim-splash-mark-dot {
    animation: none !important;
    transform: translateX(34.8px) !important;
  }
}


/* Keep confetti canvas selector so old code that references it is harmless */
.confetti-canvas {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 300;
  display: none; /* Disabled per new design */
}

/* ── Legacy celebration (kept as a quiet variant) ───────────── */
.celebration {
  text-align: center;
  padding: var(--space-10) var(--space-6) var(--space-8);
  animation: celebration-in 400ms var(--ease-sheet);
}
@keyframes celebration-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.celebration-check {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--good);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-6);
  animation: check-in 360ms var(--ease-sheet) 100ms both;
}
.celebration-check .sf-icon svg {
  width: 32px; height: 32px;
  color: white;
  stroke-width: 3;
}
@keyframes check-in {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.celebration-amount {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 54px;
  font-weight: 400;
  color: var(--good);
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  animation: count-reveal 360ms var(--ease-tap) 220ms both;
}
@keyframes count-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.celebration-label {
  font-size: 16px;
  color: var(--ink-2);
  margin-top: var(--space-2);
  animation: fade-up 360ms var(--ease-tap) 360ms both;
}

.celebration-timeline {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  margin-top: var(--space-8);
  text-align: left;
  animation: fade-up 360ms var(--ease-tap) 480ms both;
}
.celebration-timeline h4 {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.celebration-timeline p {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
}
.celebration-ref {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 8px;
  font-family: var(--font-mono);
}
.celebration-cta {
  margin-top: var(--space-6);
  animation: fade-up 360ms var(--ease-tap) 600ms both;
}

/* ── First Bill Celebration (calm) ─────────────────────────── */
.first-bill-celebration {
  text-align: center;
  padding: var(--space-10) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 300ms var(--ease-tap), transform 300ms var(--ease-tap);
}
.first-bill-celebration.visible {
  opacity: 1;
  transform: scale(1);
}
.first-bill-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--good);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-5);
  animation: check-in 360ms var(--ease-sheet) 100ms both;
}
.first-bill-icon .sf-icon svg {
  width: 32px; height: 32px;
  color: white;
  stroke-width: 3;
}
.first-bill-saving {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 54px;
  font-weight: 400;
  color: var(--good);
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-2);
  animation: count-reveal 360ms var(--ease-tap) 220ms both;
}
.first-bill-title {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: var(--space-3);
  animation: fade-up 360ms var(--ease-tap) 400ms both;
}
.first-bill-sub {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 320px;
  margin: 0 auto;
  animation: fade-up 360ms var(--ease-tap) 400ms both;
}
.first-bill-actions {
  margin-top: var(--space-8);
  width: 100%;
  max-width: 300px;
  display: flex; flex-direction: column; gap: var(--space-3);
  animation: fade-up 360ms var(--ease-tap) 560ms both;
}

/* fade-up shared keyframe (used by onboarding too) */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Plan-change digest splash ─────────────────────────────────
   Full-screen "what changed this month" moment (claim-splash family):
   cream stage, clock-with-sun mark showing the free window's move,
   serif headline, the user's own plans first, market notes after.
   Scrolls when content outgrows the viewport. Tokens only, so light
   and dark themes both hold. */
.digest-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(28px, env(safe-area-inset-top, 0px) + 20px) 24px calc(32px + var(--safe-bottom));
  opacity: 0;
  animation: claim-splash-fade-in 320ms ease-out forwards;
  font-family: var(--font);
  color: var(--ink);
}
.digest-splash.dismissing {
  animation: claim-splash-fade-out 450ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.digest-stage {
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Staggered entrance: each block sets --digest-i; reduced motion kills it. */
.digest-hero-mark,
.digest-eyebrow,
.digest-headline,
.digest-intro,
.digest-card,
.digest-notes,
.digest-actions,
.digest-footnote {
  opacity: 0;
  animation: fade-up 480ms var(--ease-sheet) forwards;
  animation-delay: calc(180ms + var(--digest-i, 0) * 110ms);
}
.digest-hero-mark  { --digest-i: 0; }
.digest-eyebrow    { --digest-i: 0.6; }
.digest-headline   { --digest-i: 1; }
.digest-intro      { --digest-i: 1.4; }
.digest-footnote   { --digest-i: 6; }

.digest-hero-mark {
  width: 116px;
  height: 116px;
  color: var(--ink);
  margin-bottom: 18px;
  will-change: transform, opacity;
}

.digest-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}

.digest-headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.06;
  letter-spacing: -0.012em;
  margin: 0 0 10px;
}

.digest-intro {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 26px;
  max-width: 340px;
}

/* Personal plan cards */
.digest-card {
  width: 100%;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px;
  margin-bottom: 14px;
  text-align: left;
}
.digest-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.digest-card-kind {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.digest-card-kind .sf-icon svg { width: 17px; height: 17px; display: block; }
.digest-card-badge {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.digest-card-chip {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rough per-month change, the card's hero number */
.digest-impact {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.digest-impact-fig {
  font-family: var(--font-serif);
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.digest-impact-fig small {
  font-size: 17px;
  letter-spacing: 0;
}
.digest-impact--up .digest-impact-fig   { color: var(--red); }
.digest-impact--down .digest-impact-fig { color: var(--good-ink); }
.digest-impact--flat .digest-impact-fig { color: var(--ink-2); }
.digest-impact-note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Keep the ($x to $y) range on one line so it never breaks mid-figure. */
.digest-impact-range { text-transform: none; letter-spacing: 0; white-space: nowrap; }
.digest-card-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.15;
  margin: 0 0 14px;
}
.digest-card-body {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

/* Was → Now window pills */
.digest-swap {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 14px;
}
.digest-swap-pill {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1;
  white-space: nowrap;
}
.digest-swap-pill small {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.digest-swap-was {
  background: var(--surface-2);
  color: var(--ink-3);
}
.digest-swap-was small { color: var(--ink-3); }
.digest-swap-now {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.digest-swap-now small { color: var(--accent-ink); }
.digest-swap-arrow {
  align-self: center;
  color: var(--accent);
  display: flex;
}
.digest-swap-arrow .sf-icon svg { width: 18px; height: 18px; display: block; }

/* Market-wide notes */
.digest-notes {
  width: 100%;
  text-align: left;
  margin: 10px 0 6px;
}
.digest-notes-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 6px 0 12px;
}
.digest-note {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  opacity: 0;
  animation: fade-up 480ms var(--ease-sheet) forwards;
  animation-delay: calc(180ms + var(--digest-i, 0) * 110ms);
}
.digest-note-kind {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--line); /* keeps the chip visible on the dark theme */
  box-shadow: var(--shadow-card);
}
.digest-note-kind .sf-icon svg { width: 15px; height: 15px; display: block; }
.digest-note h3 {
  font-size: var(--text-md);
  font-weight: 600;
  margin: 1px 0 3px;
}
.digest-note p {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

/* Actions + footnote */
.digest-actions {
  width: 100%;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.digest-secondary {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ink-2);
  padding: 12px;
  cursor: pointer;
}
.digest-footnote {
  font-size: var(--text-sm);
  color: var(--ink-3);
  margin: 18px 0 0;
  max-width: 320px;
}

@media (prefers-reduced-motion: reduce) {
  .digest-splash,
  .digest-hero-mark,
  .digest-eyebrow,
  .digest-headline,
  .digest-intro,
  .digest-card,
  .digest-notes,
  .digest-note,
  .digest-actions,
  .digest-footnote {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}