/* The publish wizard in the look of the rest of the site (tokens in home.css). Loaded after wizard.css;
   every rule is under .wizard-shell, so nothing else changes. */

.wizard-shell { padding-block: 40px 72px; gap: 64px; grid-template-columns: 230px minmax(0, 780px); }

/* the steps */
.wizard-shell .wizard-steps ol { gap: 3px; }
.wizard-shell .wizard-steps ol::before { content: ''; position: absolute; left: 22px; top: 18px; bottom: 18px; width: 2px; background: var(--border); border-radius: 2px; }
.wizard-shell .wizard-step-link { position: relative; padding: 9px 12px; border-radius: 12px; font-weight: 550; transition: background .15s, color .15s; }
.wizard-shell .wizard-step-mark { width: 28px; height: 28px; background: var(--surface); border-width: 1.5px; font-weight: 650; }
.wizard-shell .wizard-step.is-done .wizard-step-mark { background: color-mix(in srgb, var(--good) 16%, var(--surface)); border-color: color-mix(in srgb, var(--good) 40%, transparent); color: var(--good); }
.wizard-shell .wizard-step.is-current .wizard-step-link { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.wizard-shell .wizard-step.is-current .wizard-step-mark { background: var(--accent); border-color: var(--accent); color: var(--accent-text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }

/* the question */
.wizard-shell .wizard-kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.wizard-shell .wizard-bar { height: 8px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.wizard-shell .wizard-bar span { background: linear-gradient(90deg, var(--accent), #00A9CE); }
.wizard-shell .wizard-question { font-size: clamp(30px, 3.6vw, 40px); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.wizard-shell .wizard-help { font-size: 16px; line-height: 1.6; margin: 12px 0 32px; }

/* fields */
.wizard-shell .input, .wizard-shell .select, .wizard-shell .textarea { border-radius: 14px; border: 1px solid var(--border); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.wizard-shell .input:focus, .wizard-shell .select:focus, .wizard-shell .textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.wizard-shell .input-lg { font-size: 19px; padding: 15px 18px; }
.wizard-shell .field > label { font-weight: 600; }
.wizard-shell .field-invalid .input, .wizard-shell .field-invalid .textarea { border-color: var(--bad); }
.wizard-shell .textarea-prompt { border-radius: 16px; background: #0B1330; color: #D6E2FF; border-color: rgba(255, 255, 255, .08); }

/* the choices */
.wizard-shell .choice { padding: 20px 22px; border-radius: 20px; box-shadow: 0 1px 2px var(--shadow-a), 0 12px 26px -20px var(--shadow-b); transition: transform .2s cubic-bezier(.2, .8, .2, 1), border-color .2s, box-shadow .2s, background .2s; }
.wizard-shell .choice b { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.wizard-shell .choice:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 2px 4px var(--shadow-a), 0 20px 36px -22px var(--shadow-b); }
.wizard-shell .choice[aria-pressed='true'] { border-color: var(--accent); background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface) 80%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), 0 16px 30px -22px color-mix(in srgb, var(--accent) 60%, var(--shadow-b)); }
.wizard-shell .choices-pills .choice { padding: 8px 16px; border-radius: 999px; box-shadow: none; }
.wizard-shell .choices-pills .choice:hover { transform: none; }
.wizard-shell .choices-pills .choice[aria-pressed='true'] { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.wizard-shell .tag-cloud { border-radius: 16px; background: color-mix(in srgb, var(--accent) 3%, var(--surface-2)); }
.wizard-shell .tag-chip { height: 30px; box-shadow: 0 1px 2px var(--shadow-a); }
.wizard-shell .tag-chip-on { background: var(--accent); }

/* panels and the review */
.wizard-shell .panel, .wizard-shell .review-block, .wizard-shell .icon-preview, .wizard-shell .checklist-panel { border-radius: 18px; box-shadow: 0 1px 2px var(--shadow-a), 0 12px 26px -22px var(--shadow-b); }
.wizard-shell .icon-preview .product-logo { box-shadow: 0 0 0 1px var(--card-ring), 0 10px 18px -8px color-mix(in srgb, var(--accent) 60%, transparent); }
.wizard-shell .review-change { border-radius: 999px; }
.wizard-shell .notice { border-radius: 14px; }

/* the buttons */
.wizard-shell .wizard-nav { margin-top: 36px; padding-top: 22px; }
.wizard-shell .wizard-nav .btn { height: 46px; border-radius: 999px; font-weight: 650; }
.wizard-shell .wizard-nav .btn-primary { box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--brand) 80%, transparent); }
.wizard-shell .wizard-nav .btn-primary:hover { transform: translateY(-1px); }

@media (max-width: 860px) { .wizard-shell { padding-block: 24px 56px; } }
@media (max-width: 640px) { .wizard-shell .wizard-question { font-size: 28px; } .wizard-shell .choice { padding: 16px 18px; } }
@media (prefers-reduced-motion: reduce) { .wizard-shell .choice, .wizard-shell .wizard-step-link { transition: none; } .wizard-shell .choice:hover, .wizard-shell .wizard-nav .btn-primary:hover { transform: none; } }