/* Onboarding (UX-ONB) styles — kept separate from main.css so parallel work
   on the two files never collides. Covers: password strength meter (T1),
   sample-data preview (T2), completion confetti (T3), service-list empty
   state (T4). All CSP-safe (no inline styles). */

/* ── Password strength meter (T1) ─────────────────────────────────── */
.pw-strength {
  margin-top: 0.4rem;
}
.pw-strength-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--color-border, #e5e7eb);
  width: 100%;
  transition: background 0.2s, width 0.2s;
}
.pw-strength-bar[data-score="0"] { background: #dc2626; width: 20%; }
.pw-strength-bar[data-score="1"] { background: #f97316; width: 40%; }
.pw-strength-bar[data-score="2"] { background: #eab308; width: 60%; }
.pw-strength-bar[data-score="3"] { background: #84cc16; width: 80%; }
.pw-strength-bar[data-score="4"] { background: #16a34a; width: 100%; }
.pw-strength-label {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--color-text-muted, #6b7280);
}

/* ── Sample-data preview panel (T2) ───────────────────────────────── */
.sample-preview {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  /* --color-surface-alt is undefined in the theme, so it always fell back to the
     light #f9fafb — invisible light-on-light text in dark mode. Use a real token
     that is defined for both light and dark. */
  background: var(--color-bg-subtle, #f9fafb);
}
.sample-preview:empty {
  display: none;
}
.sample-preview-title {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text, #111827);
}
.sample-preview-list {
  margin: 0;
  padding-left: 1.1rem;
  list-style: disc;
}
.sample-preview-list li {
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
  color: var(--color-text-muted, #4b5563);
}

/* ── Completion confetti (T3) ─────────────────────────────────────── */
.onboarding-celebrate {
  position: relative;
  overflow: hidden;
}
.onb-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.onb-confetti span {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 8px;
  opacity: 0;
  animation: onb-fall 2.4s ease-in forwards;
}
.onb-confetti span:nth-child(odd) { background: var(--color-primary, #2563eb); }
.onb-confetti span:nth-child(even) { background: #16a34a; }
.onb-confetti span:nth-child(3n) { background: #eab308; border-radius: 50%; }
@keyframes onb-fall {
  0% { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: 0; transform: translateY(180px) rotate(360deg); }
}
.onb-confetti-1 { left: 6%; animation-delay: 0s; }
.onb-confetti-2 { left: 14%; animation-delay: 0.15s; }
.onb-confetti-3 { left: 23%; animation-delay: 0.3s; }
.onb-confetti-4 { left: 32%; animation-delay: 0.05s; }
.onb-confetti-5 { left: 41%; animation-delay: 0.45s; }
.onb-confetti-6 { left: 50%; animation-delay: 0.2s; }
.onb-confetti-7 { left: 59%; animation-delay: 0.5s; }
.onb-confetti-8 { left: 68%; animation-delay: 0.1s; }
.onb-confetti-9 { left: 77%; animation-delay: 0.35s; }
.onb-confetti-10 { left: 86%; animation-delay: 0.25s; }
.onb-confetti-11 { left: 93%; animation-delay: 0.55s; }
.onb-confetti-12 { left: 48%; animation-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .onb-confetti { display: none; }
}

/* ── Service-list empty state (T4) ────────────────────────────────── */
.onb-empty-state {
  max-width: 480px;
  margin: 3rem auto;
  text-align: center;
}
.onb-empty-illustration {
  width: 96px;
  height: 96px;
  margin: 0 auto 1rem;
  color: var(--color-text-muted, #9ca3af);
}
.onb-empty-title {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text, #111827);
}
.onb-empty-text {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--color-text-muted, #6b7280);
}
.onb-empty-example {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  color: var(--color-text-muted, #6b7280);
  font-style: italic;
}