/* First-run onboarding wizard: one question per screen, then the celebration.
   The phase-4 Claude Design screens pass restyles this surface. */

.pc-onboarding {
  width: 100%;
  max-width: 26rem;  /* a touch wider than pc-login for the textarea's measure */
  margin-inline: auto;
  margin-top: clamp(2rem, 10dvh, 5.5rem);
}

.pc-onboarding__dots {
  margin-bottom: 1.25rem;
}

.pc-onboarding__question {
  font-size: var(--lore-text-heading);
  margin: 0 0 0.375rem;
}

.pc-onboarding__hint {
  color: var(--lore-ink-soft);
  margin: 0 0 1.75rem;
}

.pc-onboarding__footer {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

/* button_to renders real buttons; quiet them down to whisper-links */
.pc-onboarding__skip,
.pc-onboarding__later {
  border: 0;
  padding: 0;
  background: none;
  font-size: var(--lore-text-small);
  color: var(--lore-ink-faint);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.pc-onboarding__skip:hover,
.pc-onboarding__later:hover {
  color: var(--lore-ink-soft);
}

/* Quiet re-entry from the garden — the wizard as a reusable surface, not a gate */
.pc-onboarding-replay {
  border: 0;
  padding: 0;
  background: none;
  font-size: var(--lore-text-small);
  color: var(--lore-ink-faint);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.pc-onboarding-replay:hover,
.pc-onboarding-replay:focus-visible {
  color: var(--lore-ink-soft);
}

/* The celebration: the fresh card grows in on arrival */

.pc-onboarding-celebrate {
  text-align: center;
}

.pc-onboarding-celebrate__card {
  max-width: 13rem;
  margin: 0 auto 1.75rem;
}

.pc-onboarding-celebrate--grown .pc-onboarding-celebrate__card {
  animation: pc-sprout-in var(--lore-dur-grow) var(--lore-ease-celebrate) both;
}

@keyframes pc-sprout-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.92);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-onboarding-celebrate--grown .pc-onboarding-celebrate__card {
    animation: none;
  }
}