/* =========================================================================
   PeopleWill — onboarding wizard
   Short, visual, non-invasive. Built for a phone first.
   ========================================================================= */

.pw-wizard {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-5);
  max-inline-size: var(--pw-container-narrow);
  margin-inline: auto;
}

.pw-wizard__header {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-2);
}

.pw-wizard__title {
  font-size: var(--pw-text-2xl);
}

.pw-wizard__lead {
  color: var(--pw-text-secondary);
  max-inline-size: var(--pw-measure);
}

/* Marks a step the user may skip, so "optional" is visible, not implied. */
.pw-wizard__optional {
  align-self: flex-start;
  padding: 2px var(--pw-space-2);
  border-radius: var(--pw-radius-full);
  background: var(--pw-surface-sunken);
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-xs);
  font-weight: var(--pw-weight-medium);
}

.pw-wizard__body {
  min-block-size: 200px;
}

/* Actions stay reachable on a phone without hunting for them. */
.pw-wizard__actions {
  position: sticky;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  gap: var(--pw-space-3);
  padding-block: var(--pw-space-3);
  background: linear-gradient(to top, var(--pw-bg) 70%, transparent);
}

.pw-wizard__actions .pw-button--primary {
  flex: 1;
}

.pw-wizard__skip {
  margin-inline-start: auto;
}

/* ---------------------------------------------------------------------------
   Auth choice
   --------------------------------------------------------------------------- */

.pw-auth-options {
  display: grid;
  gap: var(--pw-space-3);
}

.pw-auth-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pw-space-2);
  min-block-size: 52px;
  padding: var(--pw-space-3) var(--pw-space-4);
  border: 1px solid var(--pw-border-strong);
  border-radius: var(--pw-radius-md);
  background: var(--pw-surface);
  color: var(--pw-text);
  font-size: var(--pw-text-base);
  font-weight: var(--pw-weight-medium);
}

.pw-auth-option:hover {
  border-color: var(--pw-primary);
}

/* The privacy promise sits with the auth choice, where it is actually read. */
.pw-auth-privacy {
  display: flex;
  gap: var(--pw-space-2);
  padding: var(--pw-space-3);
  border-radius: var(--pw-radius-md);
  background: var(--pw-bg-subtle);
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-sm);
}

.pw-auth-privacy .pw-icon {
  flex: none;
  margin-block-start: 2px;
  color: var(--pw-primary);
}

/* A verified account is not proof of a unique human — PRD §9. Say so. */
.pw-auth-caveat {
  margin-block-start: var(--pw-space-3);
  color: var(--pw-text-muted);
  font-size: var(--pw-text-xs);
}

/* ---------------------------------------------------------------------------
   Identity step
   --------------------------------------------------------------------------- */

.pw-identity {
  display: grid;
  gap: var(--pw-space-5);
}

.pw-identity__preview {
  display: flex;
  align-items: center;
  gap: var(--pw-space-4);
  padding: var(--pw-space-4);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius-lg);
  background: var(--pw-bg-subtle);
}

.pw-identity__avatar {
  display: grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  flex: none;
  border-radius: var(--pw-radius-full);
  background: color-mix(in srgb, var(--pw-accent-color, var(--pw-primary)) 14%, var(--pw-surface));
  color: var(--pw-accent-color, var(--pw-primary));
  overflow: hidden;
}

.pw-identity__avatar .pw-icon {
  inline-size: 30px;
  block-size: 30px;
}

.pw-identity__avatar img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.pw-identity__nickname {
  font-size: var(--pw-text-lg);
  font-weight: var(--pw-weight-bold);
}

.pw-identity__meta {
  margin-block-start: var(--pw-space-1);
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-sm);
}

.pw-identity__interests {
  margin-block-start: var(--pw-space-1);
  color: var(--pw-text-muted);
  font-size: var(--pw-text-xs);
}

/* ---------------------------------------------------------------------------
   Completion
   --------------------------------------------------------------------------- */

.pw-wizard-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pw-space-4);
  padding-block: var(--pw-space-7);
  text-align: center;
}

.pw-wizard-done__mark {
  display: grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  border-radius: var(--pw-radius-full);
  background: var(--pw-success-tint);
  color: var(--pw-success);
}

.pw-wizard-done__mark .pw-icon {
  inline-size: 32px;
  block-size: 32px;
}

.pw-wizard-done__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pw-space-3);
}