/* Platform selection routes to each provider's authorization flow. */
.wizard { max-width: 600px; margin: 56px auto 0; }
.wizard-step[hidden] { display: none; }
.wizard-step { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; padding: 8px 0; }
.wizard-step h1 { margin: 0; font: 400 2.7rem/1.08 var(--font-display); letter-spacing: -.035em; color: var(--ink); }
.wizard-lede { max-width: 48ch; margin: 0; color: var(--soft); font-size: .94rem; line-height: 1.65; }
.wizard-platform-grid { display: grid; gap: 12px; width: 100%; margin-top: 20px; }
.wizard-platform-option { display: flex; align-items: center; gap: 18px; width: 100%; min-height: 96px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); cursor: pointer; color: var(--ink); text-align: left; transition: border-color 160ms ease, background-color 160ms ease; }
.wizard-platform-option:hover { border-color: var(--gold); background: color-mix(in srgb, var(--wash) 35%, var(--card)); }
.wizard-platform-option:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.wizard-platform-option .platform-mark { width: 44px; height: 44px; border-radius: 12px; font-size: .75rem; }
.wizard-platform-option__label { display: grid; gap: 4px; }
.wizard-platform-option__label strong { font: 700 .98rem var(--font-ui); }
.wizard-platform-option__label small { color: var(--soft); font: 400 .8rem var(--font-ui); }
.wizard-platform-option__arrow { margin-left: auto; color: var(--soft); font-size: 1.2rem; }
.wizard-spinner { width: 36px; height: 36px; margin-bottom: 8px; border: 3px solid var(--line); border-top-color: var(--cardinal); border-radius: 50%; animation: wizard-spin .8s linear infinite; }
.wizard-notice { padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--wash); color: var(--soft); font-size: .84rem; line-height: 1.6; }
.wizard-field { display: grid; gap: 8px; width: 100%; }
.wizard-field label { font-weight: 700; font-size: .85rem; }
.wizard-actions { display: flex; gap: 10px; width: 100%; margin-top: 8px; }
@keyframes wizard-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  .wizard { margin-top: 32px; }
  .wizard-step h1 { font-size: 2.3rem; }
  .wizard-platform-option { min-height: 88px; padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .wizard-spinner { animation: none; } }