/* Onboarding-specific styles — extends shared/brand.css */

/* ── Shell ───────────────────────────────────────── */
.ob-header-bar {
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(70,18,32,.1);
  background: var(--cream);
  position: sticky;
  top: 0;
  z-index: 10;
}

.ob-brand { color: var(--plum); }

.ob-main {
  padding: 2.5rem 0 5rem;
  min-height: 80dvh;
}

.ob-footer {
  padding: 2rem 0;
  border-top: 1px solid rgba(70,18,32,.1);
}

/* ── Intro ───────────────────────────────────────── */
.ob-intro { max-width: 600px; }

.ob-intro-body {
  font-size: .9375rem;
  line-height: 1.75;
  color: rgba(70,18,32,.85);
}

.ob-intro-body p + p { margin-top: 1rem; }

/* ── Screens ─────────────────────────────────────── */
.ob-screen { animation: fadeUp 280ms ease both; }

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

/* ── Section header ──────────────────────────────── */
.ob-header { margin-bottom: .5rem; }

.ob-section-intro {
  font-size: .9375rem;
  line-height: 1.7;
  color: rgba(70,18,32,.8);
  max-width: 560px;
}

.ob-scale-legend {
  display: flex;
  justify-content: space-between;
  font-size: .8125rem;
  font-weight: 300;
  color: rgba(70,18,32,.6);
}

.ob-save-notice { font-size: .8125rem; }

/* ── Questions ───────────────────────────────────── */
.ob-questions { display: flex; flex-direction: column; }

.ob-field { scroll-margin-top: 5rem; }

.ob-hint {
  font-size: .85rem;
  color: rgba(70,18,32,.6);
  font-style: italic;
  line-height: 1.5;
}

/* Compact layout for Personality / Section 8 & 9 */
.ob-scale-compact {
  gap: .375rem;
}

.ob-scale-compact .scale-btn {
  min-height: 44px;
  font-size: .875rem;
}

/* ── Navigation ──────────────────────────────────── */
.ob-nav {
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(70,18,32,.1);
}

.ob-nav .btn { flex: 1 1 0; }
.ob-nav .btn--ghost { flex: 0 0 auto; min-width: 100px; }

/* ── Loading ─────────────────────────────────────── */
.ob-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40dvh;
}

.loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(70,18,32,.15);
  border-top-color: var(--crimson);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Thank you ───────────────────────────────────── */
.ob-thankyou { padding-bottom: 3rem; }

.ob-thankyou-body {
  font-size: .9375rem;
  line-height: 1.75;
}

.ob-thankyou-body p + p { margin-top: 1rem; }

/* ── Choices (shared but overridden slightly here) ── */
.choices { display: flex; flex-direction: column; gap: .5rem; }