/**
 * PowerReader - Onboarding Styles (Phase 6)
 *
 * Full-screen 4-step onboarding flow.
 * Uses CSS custom properties defined in main.css :root.
 */

/* ==============================================
   Onboarding Wrapper
   ============================================== */
.onboarding {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--bottom-nav-height) - 100px);
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-md);
}

/* ==============================================
   Progress Dots
   ============================================== */
.onboarding__progress {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
}

.onboarding__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-border);
  transition: background-color 0.3s, transform 0.3s;
}

.onboarding__dot--active {
  background-color: var(--color-primary);
  transform: scale(1.3);
}

/* ==============================================
   Step Content
   ============================================== */
.onboarding__content {
  max-width: 400px;
  margin-bottom: var(--spacing-xl);
}

.onboarding__title {
  font-size: var(--text-h2);
  margin-bottom: var(--spacing-md);
  line-height: 1.3;
}

.onboarding__desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.8;
}

/* ==============================================
   Visual Illustrations
   ============================================== */
.onboarding__visual {
  margin: var(--spacing-lg) 0;
}

.onboarding__icon {
  font-size: 64px;
  line-height: 1;
  margin-bottom: var(--spacing-md);
}

/* Mini bias spectrum for step 2 */
.onboarding__spectrum {
  width: 80%;
  max-width: 300px;
  height: 12px;
  border-radius: 6px;
  margin: 0 auto var(--spacing-sm);
  background: linear-gradient(
    to right,
    var(--color-bias-extreme-left) 0%,
    var(--color-bias-left) 20%,
    var(--color-bias-center) 50%,
    var(--color-bias-right) 80%,
    var(--color-bias-extreme-right) 100%
  );
}

.onboarding__spectrum-labels {
  display: flex;
  justify-content: space-between;
  width: 80%;
  max-width: 300px;
  margin: 0 auto;
  font-size: var(--text-small);
  font-weight: 700;
}

/* ==============================================
   Actions (Skip / Next / Start)
   ============================================== */
.onboarding__actions {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}

.onboarding__next {
  min-width: 120px;
  padding: var(--spacing-sm) var(--spacing-lg);
}