/* onboarding-wizard — full-screen first-run wizard.
 *
 * Canonical: .tmp/onboarding-b-revised.html (approved 2026-05-20).
 * Spec: docs/superpowers/specs/2026-05-22-onboarding-wizard-design.md
 *
 * Token-only (--v2-*). No raw hex permitted (v2-raw-hex-warn hook enforces).
 * Demo-only .phone-frame / .phone-viewport / .step-section / .blurb / .page-header
 * scaffolding from the mockup is intentionally stripped — those exist only for
 * the mockup gallery layout. The mockup's .ob-screen used position:absolute
 * inside the phone viewport; production overrides to position:fixed at the
 * bottom of this file.
 */

/* ─── status bar (iOS-style, top of takeover) ─── */
.ob-statusbar {
  height: 54px;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 0 6px;
  font-family: var(--v2-font-body);
  font-size: 14px; font-weight: 500;
  color: var(--v2-text-primary);
}
.ob-statusbar .dots {
  display: flex; gap: 4px; align-items: center;
}
.ob-statusbar .dots span {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--v2-text-primary);
}

/* ─── top bar (wordmark + skip) ─── */
.ob-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 0;
  margin-bottom: 56px;
}
.ob-wordmark {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--v2-font-display);
  font-weight: 500;
  font-size: 17px;
  color: var(--v2-accent-botanical);
  letter-spacing: -0.01em;
}
.ob-wordmark .leaf {
  width: 22px; height: 22px;
}
.ob-skip {
  font-family: var(--v2-font-body);
  font-size: 13px;
  color: var(--v2-text-tertiary);
  text-decoration: none;
  padding: 12px 4px;
  min-height: 48px;
  display: flex; align-items: center;
  background: none; border: none; cursor: pointer;
}

/* ─── step heading / subhead ─── */
.step-heading {
  font-family: var(--v2-font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--v2-text-primary);
  font-size: 38px;
  line-height: 1.08;
  margin: 0 0 16px;
}
.step-subhead {
  font-family: var(--v2-font-body);
  color: var(--v2-text-secondary);
  line-height: 1.5;
  font-size: 16px;
  margin: 0 0 40px;
  max-width: 300px;
}

/* ─── form body ─── */
.ob-form { flex: 1; display: flex; flex-direction: column; }
.input-label {
  font-family: var(--v2-font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--v2-text-stone);
  font-weight: 500;
  margin-bottom: 8px;
}
.text-input {
  width: 100%;
  height: 56px;
  border: 1px solid var(--v2-border-strong);
  border-radius: var(--v2-radius-sm);
  background: var(--v2-bg-card);
  font-family: var(--v2-font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--v2-text-primary);
  padding: 0 16px;
  outline: none;
  letter-spacing: 0;
}
.text-input.numeric { letter-spacing: 0.05em; font-family: var(--v2-font-display); }
.text-input::placeholder { color: var(--v2-text-muted); font-style: italic; font-weight: 400; }
.text-input:focus { border-color: var(--v2-accent-botanical); }

/* ─── green location confirmation card ─── */
.zone-confirm {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--v2-pop-sage-bg);
  border: 1px solid var(--v2-accent-botanical);
  border-radius: var(--v2-radius-md);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: confirmIn 320ms var(--v2-ease-spring) both;
}
@keyframes confirmIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.zone-confirm .pin {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--v2-pop-sage);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.zone-confirm .location { flex: 1; font-family: var(--v2-font-body); }
.zone-confirm .location .city {
  font-size: 14px;
  font-weight: 500;
  color: var(--v2-text-primary);
  line-height: 1.3;
}
.zone-confirm .location .zone {
  font-size: 11px;
  color: var(--v2-pop-sage);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.zone-confirm .edit-link {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--v2-text-secondary);
  font-weight: 500;
  text-decoration: underline;
  background: none; border: none;
  cursor: pointer;
  padding: 12px 4px;
  min-height: 48px;
  font-family: var(--v2-font-body);
}

/* ─── segmented control (Step 3 sun exposure) ─── */
.segmented {
  display: flex;
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border-strong);
  border-radius: var(--v2-radius-sm);
  padding: 4px;
  gap: 4px;
}
.segmented button {
  flex: 1;
  height: 44px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  font-family: var(--v2-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--v2-text-secondary);
  cursor: pointer;
  letter-spacing: 0.02em;
}
.segmented button.selected {
  background: var(--v2-pop-sage-bg);
  border-color: var(--v2-accent-botanical);
  color: var(--v2-accent-botanical);
}

/* ─── native-feel select ─── */
.select-wrap { position: relative; }
.select-wrap select {
  width: 100%;
  height: 56px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--v2-border-strong);
  border-radius: var(--v2-radius-sm);
  background: var(--v2-bg-card);
  padding: 0 44px 0 16px;
  font-family: var(--v2-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--v2-text-primary);
  outline: none;
}
.select-wrap::after {
  content: '';
  position: absolute;
  right: 18px; top: 50%;
  width: 10px; height: 10px;
  border-right: 1.75px solid var(--v2-text-secondary);
  border-bottom: 1.75px solid var(--v2-text-secondary);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}

/* ─── footer: progress dots + caption + CTA ─── */
.ob-footer { margin-top: auto; padding-top: 24px; }
.va-progress {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 14px;
}
.va-progress span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--v2-border-strong);
  transition: width 240ms var(--v2-ease-spring), background-color 240ms;
}
.va-progress span.active {
  background: var(--v2-accent-botanical);
  /* Active dot stays a circle, just colored — the original 24px pill
   * read as a heavy black bar against the 8px sibling dots. Bug fix
   * 2026-05-23 (iPhone smoke). */
}
.va-progress span.done {
  /* completed step — holds green at 45% opacity */
  background: color-mix(in oklch, var(--v2-accent-botanical) 45%, transparent);
}
.step-count {
  font-family: var(--v2-font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--v2-text-stone);
  font-weight: 500;
  text-align: center;
  margin-bottom: 20px;
}
.primary-cta {
  width: 100%;
  height: 52px;
  background: var(--v2-accent-botanical);
  color: var(--v2-text-on-dark);
  border: none;
  border-radius: var(--v2-radius-sm);
  font-family: var(--v2-font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 48px;
}

/* ─── form gap helpers ─── */
.form-group + .form-group { margin-top: 24px; }

/* ─── boot-flash guard ─── *
 * Server sets body.onboarding-pending when users.onboarding_state ===
 * 'pending'; wizard JS strips it after the <section class="ob-screen">
 * is injected. See spec §3.1.
 */
body.onboarding-pending .app,
body.onboarding-pending .dash-topbar {
  visibility: hidden;
}

/* When the wizard is actively mounted, hide the dashboard chrome entirely
 * and lock scroll. */
body.onboarding-active .app,
body.onboarding-active .dash-topbar {
  display: none;
}
body.onboarding-active {
  overflow: hidden;
}

/* The wizard root — full viewport, takes over completely.
 * 100dvh (not vh) so iOS Safari URL bar doesn't clip the footer.
 * env(keyboard-inset-height) keeps the Continue/Finish CTA above the
 * on-screen keyboard. (Task 11.5.9) */
.ob-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  height: 100dvh;
  background: var(--v2-bg-primary);
  overflow-y: auto;
  padding: 0 var(--v2-space-lg);
  padding-top: env(safe-area-inset-top, 0);
  /* +24px above safe-area gives the CTA breathing room from the iOS home
   * indicator zone. Bare safe-area-inset alone left CONTINUE visually
   * clipped on iPhone (2026-05-23 smoke). */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + env(keyboard-inset-height, 0px) + 24px);
  display: flex;
  flex-direction: column;
}

/* iOS focus-zoom suppression: minimum 16px on text inputs. (Task 11.5.9) */
.ob-screen .text-input { font-size: max(16px, 1rem); }

/* WCAG 2.4.7 Focus Visible — explicit ring on every focusable inside the
 * wizard. Mockup CSS only styled :focus on .text-input. (Task 11.5.7) */
.ob-screen :focus-visible {
  outline: 2px solid var(--v2-accent-botanical);
  outline-offset: 2px;
  border-radius: 4px;
}
.ob-screen :focus:not(:focus-visible) { outline: none; }

/* .step-heading exception: it has tabindex=-1 and is programmatically
 * focused on every step mount for screen-reader announcement. iOS Safari
 * paints a tap-highlight overlay (translucent gray rectangle) on tabindex
 * elements when focused — this happens BELOW the outline layer and isn't
 * suppressed by outline:none alone, so -webkit-tap-highlight-color
 * transparent is required. The outline rules are kept as belt-and-braces
 * for the rare case where Safari treats programmatic focus as focus-visible.
 * SR users still hear the heading via aria-labelledby + focus; sighted
 * users get no visual focus indicator. Bug fix 2026-05-23 (iPhone smoke). */
.ob-screen .step-heading {
  -webkit-tap-highlight-color: transparent;
}
.ob-screen .step-heading:focus,
.ob-screen .step-heading:focus-visible {
  outline: none;
  box-shadow: none;
}

/* prefers-reduced-motion guard — suppress entrance/exit animations for users
 * who opt into reduced motion. (Task 11.5.7) */
@media (prefers-reduced-motion: reduce) {
  .ob-screen,
  .ob-screen *,
  .ob-screen *::before,
  .ob-screen *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}