/* Connect-account wizard — a simulated OAuth-style flow (pick platform ->
   "connecting" -> confirm) since no real per-platform integration exists
   yet. Same visual language as the rest of the app shell (dashboard.css). */

.wizard { max-width: 560px; margin: 40px auto 0; }
/* .wizard-step sets its own `display`, which — being author CSS — beats
   the browser's default `[hidden] { display: none }` UA rule. Restate it
   explicitly since JS toggles `hidden` to switch between steps. */
.wizard-step[hidden] { display: none; }
.wizard-step { display: flex; flex-direction: column; gap: 16px; text-align: center; align-items: center; padding: 8px 0; }
.wizard-step h1 { margin: 0; font: 400 2rem var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.wizard-lede { margin: 0; color: var(--soft); font-size: 0.95rem; max-width: 40ch; }

.wizard-platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; width: 100%; margin-top: 8px; }
.wizard-platform-option { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); cursor: pointer; font: 600 0.9rem var(--font-ui); color: var(--ink); }
.wizard-platform-option:hover { border-color: var(--cardinal); background: var(--wash); }
.wizard-platform-option .platform-mark { width: 34px; height: 34px; font-size: 0.72rem; }

.wizard-spinner { width: 40px; height: 40px; border: 3px solid var(--line); border-top-color: var(--cardinal); border-radius: 50%; animation: wizard-spin 0.8s linear infinite; }
@keyframes wizard-spin { to { transform: rotate(360deg); } }

.wizard-notice { padding: 12px 15px; border: 1px solid var(--line); border-radius: 9px; background: var(--wash); color: var(--soft); font-size: 0.82rem; line-height: 1.5; text-align: left; }
.wizard-field { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.wizard-field label { font-weight: 800; font-size: 0.85rem; }
.wizard-actions { display: flex; gap: 10px; width: 100%; justify-content: center; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .wizard-spinner { animation: none; border-top-color: var(--line); }
}