/* =========================================================
   AI Apps — Broker Tools · Wizard (continuous step flow)
   Typeform-style: one small question group per screen,
   progress, live money-insights, computing → reveal.
   Progressive enhancement: without JS the classic form shows.
   ========================================================= */

/* while wizard is active: hide classic inputs panel, results & paywall bar */
body.wiz-active #inputsPanel{display:none}
body.wiz-active:not(.wiz-done) #resultsPanel{display:none}
body.wiz-active:not(.wiz-done) .unlock-bar{display:none!important}
body.wiz-done #wizBox{display:none}
/* single column while stepping */
body.wiz-active .calc{grid-template-columns:1fr;max-width:680px;margin-left:auto;margin-right:auto}

#wizBox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;position:relative}

/* progress */
.wiz-prog{display:flex;align-items:center;gap:12px;padding:16px 24px 0;font-size:12.5px;font-weight:700;color:var(--muted)}
.wiz-prog .wp-track{flex:1;height:7px;background:var(--blue-mist);border-radius:999px;overflow:hidden}
.wiz-prog .wp-track i{display:block;height:100%;width:0;background:var(--grad-money);border-radius:999px;transition:width .4s cubic-bezier(.2,.7,.2,1)}
.wiz-prog .wp-count{white-space:nowrap;direction:rtl}

/* screens */
.wiz-screen{padding:26px 26px 24px;display:none;animation:wizIn .34s ease}
.wiz-screen.on{display:block}
@keyframes wizIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.wiz-screen h2{font-size:clamp(19px,2.6vw,24px);line-height:1.3;margin-bottom:6px}
.wiz-screen .wz-sub{color:var(--muted);font-size:14px;margin-bottom:18px}

/* insight chip (the "continuous value" moment) */
.wiz-insight{display:flex;gap:10px;align-items:flex-start;background:rgba(22,179,100,.08);
  border:1px solid rgba(22,179,100,.35);border-radius:14px;padding:12px 14px;margin-bottom:18px;
  font-size:13.5px;font-weight:600;color:#0b7a45;animation:wizIn .4s ease}
.wiz-insight .wi-ic{flex:none;font-size:17px}
.wiz-insight b{color:#065f38}

/* enlarge controls inside wizard */
.wiz-screen .field label{font-size:15px}
.wiz-screen .field input[type=number],.wiz-screen .field input[type=text],.wiz-screen .field select{
  font-size:19px;padding:15px 16px;font-weight:700}
.wiz-screen input[type=range]{height:34px}
.wiz-screen .seg button{padding:14px 8px;font-size:14.5px}
.wiz-screen .field{margin-bottom:18px}
.wiz-screen .field .hint{font-size:12.5px}

/* nav */
.wiz-nav{display:flex;gap:10px;padding:0 26px 24px}
.wiz-nav .btn{flex:1;padding:15px;font-size:16px}
.wiz-nav .wz-back{flex:0 0 auto;padding:15px 18px}
.wiz-keys{padding:0 26px 16px;font-size:11.5px;color:var(--muted);text-align:center}
.wiz-keys kbd{background:var(--blue-mist);border-radius:5px;padding:1px 7px;font-family:inherit;font-weight:700}

/* intro screen */
.wiz-intro{padding:34px 28px 28px;text-align:center}
.wiz-intro .wz-emoji{font-size:44px;line-height:1}
.wiz-intro h2{font-size:clamp(21px,3vw,27px);margin:14px 0 8px}
.wiz-intro .wz-hook{color:var(--muted);font-size:15.5px;max-width:440px;margin:0 auto 20px}
.wiz-intro .wz-hook b{color:var(--money)}
.wiz-gets{max-width:400px;margin:0 auto 22px;text-align:right;display:grid;gap:9px}
.wiz-gets .wg{display:flex;gap:9px;font-size:14px;font-weight:600;align-items:flex-start}
.wiz-gets .wg::before{content:"✓";color:var(--money);font-weight:900}
.wiz-intro .wz-time{font-size:12.5px;font-weight:700;color:var(--muted);margin-top:12px}
.wiz-intro .btn{min-width:240px}

/* computing overlay */
.wiz-compute{padding:56px 28px;text-align:center}
.wiz-compute .wc-spin{width:46px;height:46px;border-radius:50%;border:4px solid var(--blue-mist);
  border-top-color:var(--blue);margin:0 auto 20px;animation:wcspin .8s linear infinite}
@keyframes wcspin{to{transform:rotate(360deg)}}
.wiz-compute h2{font-size:19px;margin-bottom:16px}
.wiz-compute .wc-lines{display:grid;gap:8px;max-width:340px;margin:0 auto;text-align:right}
.wiz-compute .wc-line{font-size:13.5px;font-weight:600;color:var(--muted);opacity:0;transform:translateY(6px);transition:.3s}
.wiz-compute .wc-line.on{opacity:1;transform:none}
.wiz-compute .wc-line::before{content:"✓ ";color:var(--money);font-weight:900}

/* edit bar shown above results after reveal */
.wiz-editbar{display:none;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:var(--blue-mist);border-radius:16px;padding:12px 16px;margin-bottom:16px;font-size:13px;font-weight:700}
body.wiz-done .wiz-editbar{display:flex}
.wiz-editbar .we-chips{display:flex;gap:6px;flex-wrap:wrap}
.wiz-editbar .we-chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 11px;
  font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:border-color .15s}
.wiz-editbar .we-chip:hover{border-color:var(--blue);color:var(--blue)}

/* results reveal animation */
body.wiz-done #resultsPanel{animation:wizReveal .55s cubic-bezier(.2,.7,.2,1)}
@keyframes wizReveal{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}

@media(max-width:560px){
  .wiz-screen{padding:20px 18px 18px}
  .wiz-nav{padding:0 18px 18px}
  .wiz-intro{padding:28px 18px 22px}
  .wiz-keys{display:none}
}
@media print{ #wizBox,.wiz-editbar{display:none!important} }