/* Screen: wizard — "Add a process" (Describe → Drafted) */
.af-screen[data-screen="wizard"] .wz-stage { position: relative; height: 780px; }
.af-screen[data-screen="wizard"] .wz-stage.playing { transition: height 0.5s ease; }
.af-screen[data-screen="wizard"] .wz-state { position: absolute; inset: 0; opacity: 0; }
.af-screen[data-screen="wizard"] .wz-state.on { opacity: 1; }
.af-screen[data-screen="wizard"] .playing .wz-state { transition: opacity 0.35s ease; }
.af-screen[data-screen="wizard"] .wz-stage:not(.playing) :is(.pd-rise, .pd-hidden, .pd-pop) { transition: none; }

/* State 1 — Describe */
.af-screen[data-screen="wizard"] .wz-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.af-screen[data-screen="wizard"] .wz-top .ttl { font-size: 18px; font-weight: 500; }
.af-screen[data-screen="wizard"] .wz-top .ttl .pd-muted { font-weight: 400; margin-right: 8px; }
.af-screen[data-screen="wizard"] .wz-top .right { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.af-screen[data-screen="wizard"] .wz-top .right .pd-btn { margin-right: 6px; }
.af-screen[data-screen="wizard"] .wz-form { padding: 14px 18px; }
.af-screen[data-screen="wizard"] .wz-back { font-size: 12.5px; color: var(--pd-ink-3); margin-bottom: 10px; }
.af-screen[data-screen="wizard"] .wz-banner { position: relative; padding-right: 36px; font-size: 12.5px; }
.af-screen[data-screen="wizard"] .wz-banner .t { color: var(--pd-green); font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.af-screen[data-screen="wizard"] .wz-banner .q { margin-bottom: 2px; }
.af-screen[data-screen="wizard"] .wz-banner .x { position: absolute; top: 10px; right: 14px; font-size: 15px; color: var(--pd-ink-3); }
.af-screen[data-screen="wizard"] .wz-sec { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 6px; }
.af-screen[data-screen="wizard"] .wz-sec .t { font-size: 15px; font-weight: 600; }
.af-screen[data-screen="wizard"] .wz-sec .t.s { font-size: 13px; font-weight: 500; }
.af-screen[data-screen="wizard"] .wz-hint { font-size: 12.5px; color: var(--pd-ink-2); margin-bottom: 8px; }
.af-screen[data-screen="wizard"] .wz-chips { display: flex; gap: 8px; margin-bottom: 12px; }
.af-screen[data-screen="wizard"] .wz-chips .pd-chip { height: 26px; color: var(--pd-ink); }
.af-screen[data-screen="wizard"] .wz-chips .pd-chip i { width: 10px; height: 10px; border: 1.5px solid var(--pd-ink-3); border-radius: 3px; }
.af-screen[data-screen="wizard"] .wz-field { margin-bottom: 10px; }
.af-screen[data-screen="wizard"] .wz-field label { display: block; font-size: 12.5px; font-weight: 500; margin-bottom: 5px; }
.af-screen[data-screen="wizard"] .wz-field .h { font-size: 11.5px; color: var(--pd-ink-3); margin-top: 4px; }
.af-screen[data-screen="wizard"] .wz-field .pd-textarea { height: 80px; }
.af-screen[data-screen="wizard"] .wz-textarea .pd-caret { display: none; }
.af-screen[data-screen="wizard"] .wz-textarea.typing .pd-caret { display: inline-block; }
.af-screen[data-screen="wizard"] .wz-toggles { display: flex; gap: 6px; }
.af-screen[data-screen="wizard"] .wz-steps { display: grid; gap: 6px; margin-bottom: 8px; }
.af-screen[data-screen="wizard"] .wz-step { display: flex; align-items: center; gap: 8px; }
.af-screen[data-screen="wizard"] .wz-step .n { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--pd-line-2); border-radius: 5px; background: var(--pd-card-2); font-family: var(--font-mono); font-size: 11px; color: var(--pd-ink-2); flex: none; }
.af-screen[data-screen="wizard"] .wz-step .pd-input { flex: 1; height: 28px; }
.af-screen[data-screen="wizard"] .wz-step .x { color: var(--pd-ink-3); width: 14px; text-align: center; }
.af-screen[data-screen="wizard"] .wz-addrow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.af-screen[data-screen="wizard"] .wz-addrow .h { font-size: 11.5px; color: var(--pd-ink-3); }
.af-screen[data-screen="wizard"] .wz-draft { display: inline-flex; }
.af-screen[data-screen="wizard"] .wz-draft.pulse { background: var(--pd-blue-2); border-color: var(--pd-blue-2); }
.af-screen[data-screen="wizard"] .playing .wz-draft { transition: background 0.15s, border-color 0.15s; }

/* State 2 — Drafted */
.af-screen[data-screen="wizard"] .wz-two { display: grid; grid-template-columns: 62fr 38fr; gap: 16px; }
.af-screen[data-screen="wizard"] .wz-pipe { display: grid; gap: 10px; }
.af-screen[data-screen="wizard"] .wz-prow { position: relative; display: grid; grid-template-columns: 26px 1fr 18px; column-gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--pd-line); border-radius: 8px; background: var(--pd-card-2); }
.af-screen[data-screen="wizard"] .wz-prow.hl.on { background: var(--pd-blue-bg); border-color: var(--pd-blue-line); }
.af-screen[data-screen="wizard"] .playing .wz-prow.hl { transition: background 0.4s ease, border-color 0.4s ease, opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.af-screen[data-screen="wizard"] .wz-prow .n { grid-row: 1 / 3; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--pd-line-2); border-radius: 50%; font-family: var(--font-mono); font-size: 11px; color: var(--pd-ink-2); }
.af-screen[data-screen="wizard"] .wz-prow .t { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.af-screen[data-screen="wizard"] .wz-prow .d { grid-column: 2; grid-row: 2; font-size: 12.5px; color: var(--pd-ink-2); margin-top: 3px; }
.af-screen[data-screen="wizard"] .wz-prow .x { grid-column: 3; grid-row: 1 / 3; color: var(--pd-ink-3); text-align: center; }
.af-screen[data-screen="wizard"] .wz-rings { display: flex; justify-content: space-around; margin: 14px 0 12px; }
.af-screen[data-screen="wizard"] .wz-ring { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--pd-ink-2); }
.af-screen[data-screen="wizard"] .wz-ring.grey .pd-ring .centre { color: var(--pd-grey); }
.af-screen[data-screen="wizard"] .wz-ring.blue .pd-ring .centre { color: var(--pd-blue-2); }
.af-screen[data-screen="wizard"] .wz-ring.green .pd-ring .centre { color: var(--pd-green); }
.af-screen[data-screen="wizard"] .wz-check > div { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--pd-line); font-size: 12.5px; color: var(--pd-ink); }
.af-screen[data-screen="wizard"] .wz-check > div:first-child { border-top: 0; }
.af-screen[data-screen="wizard"] .wz-check > div.in { transition-duration: 0.25s; }