/* PWA Onboarding — step-through device permissions */

.pwa-onboarding {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 56px);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

/* Progress dots */
.pwa-onboarding__progress {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.pwa-onboarding__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border-default);
  transition: all var(--duration-normal) ease;
}

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

.pwa-onboarding__dot--done {
  background: var(--color-brand);
}

/* Steps — hidden override is critical */
.pwa-onboarding__step[hidden] {
  display: none;
}

.pwa-onboarding__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 320px;
  width: 100%;
}

/* Icon */
.pwa-onboarding__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: var(--color-surface-200);
  color: var(--color-brand);
  margin-bottom: var(--space-2);
}

.pwa-onboarding__icon .icon {
  width: 32px;
  height: 32px;
}

.pwa-onboarding__icon--success {
  background: var(--color-brand);
  color: var(--color-brand-text);
}

/* Install step — larger and more prominent */
.pwa-onboarding__icon--install {
  width: 96px;
  height: 96px;
  background: var(--color-brand);
  color: var(--color-brand-text);
  box-shadow: 0 4px 24px color-mix(in srgb, var(--color-brand) 30%, transparent);
}

.pwa-onboarding__icon--install .icon {
  width: 40px;
  height: 40px;
}

/* Text */
.pwa-onboarding__title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.pwa-onboarding__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Actions — hidden override */
.pwa-onboarding__actions[hidden] {
  display: none;
}

.pwa-onboarding__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-4);
}

.pwa-onboarding__btn {
  width: 100%;
}

.pwa-onboarding__skip {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
}

.pwa-onboarding__skip:hover {
  color: var(--color-text-secondary);
}

/* Status indicator */
.pwa-onboarding__status {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  min-height: 1em;
}

.pwa-onboarding__status[data-state="pending"] {
  color: transparent;
}

.pwa-onboarding__status[data-state="granted"] {
  color: var(--color-brand);
}

.pwa-onboarding__status[data-state="denied"],
.pwa-onboarding__status[data-state="skipped"] {
  color: var(--color-text-muted);
}

.pwa-onboarding__status[data-state="unavailable"] {
  color: var(--color-text-tertiary);
}