/* Setup Wizard (page-setup-wizard.php) — reuses tokens, .btn, and .callout
   from main.css; only wizard-specific components are defined here. */

.wiz-shell{max-width:760px;margin:0 auto;padding:56px 24px 100px;}
@media(max-width:600px){.wiz-shell{padding:34px 16px 70px;}}

.wiz-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;gap:16px;flex-wrap:wrap;}

.notice-bar{
  display:flex;gap:10px;align-items:flex-start;background:rgba(224,166,74,0.08);border:1px solid var(--amber-dim);
  border-radius:6px;padding:12px 14px;margin-bottom:26px;font-family:var(--sans);font-size:12.5px;color:var(--text-mid);line-height:1.55;
}
.notice-bar .ic{color:var(--warn);font-family:var(--mono);font-weight:700;flex:none;}

/* ---------- Progress rail ---------- */
.rail{display:flex;align-items:flex-start;gap:0;margin-bottom:38px;}
.rail-step{flex:1;display:flex;flex-direction:column;gap:10px;}
.rail-track{height:2px;background:var(--line);position:relative;}
.rail-track i{position:absolute;inset:0;background:var(--amber);width:0%;transition:width .35s ease;}
.rail-step[data-state="done"] .rail-track i{width:100%;background:var(--buy);}
.rail-step[data-state="active"] .rail-track i{width:100%;}
.rail-meta{display:flex;align-items:center;gap:8px;}
.rail-num{
  font-family:var(--mono);font-size:11px;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--text-lo);
  background:var(--surface);flex:none;transition:all .2s ease;
}
.rail-step[data-state="active"] .rail-num{border-color:var(--amber);color:var(--amber);box-shadow:0 0 0 3px rgba(63,209,255,0.12);}
.rail-step[data-state="done"] .rail-num{border-color:var(--buy);color:var(--ink);background:var(--buy);}
.rail-label{font-family:var(--mono);font-size:11px;color:var(--text-lo);letter-spacing:0.02em;display:none;}
.rail-step[data-state="active"] .rail-label{color:var(--text-hi);}
@media(min-width:640px){.rail-label{display:block;}}

/* ---------- Card ---------- */
.wiz-card{
  background:var(--surface);border:1px solid var(--line);border-radius:6px;
  padding:34px;box-shadow:0 24px 60px -32px rgba(0,0,0,0.6);
}
@media(max-width:600px){.wiz-card{padding:24px 20px;}}

.step-kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--amber);margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.step-kicker::before{content:"";width:5px;height:5px;background:var(--amber);border-radius:1px;}
.step-title{font-family:var(--sans);font-size:22px;font-weight:700;letter-spacing:-0.01em;margin:0 0 8px;text-wrap:balance;}
.step-sub{font-family:var(--sans);font-size:14px;color:var(--text-mid);line-height:1.6;margin:0 0 28px;max-width:56ch;}

.field-label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-lo);display:block;margin-bottom:8px;}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;}
@media(max-width:520px){.field-grid{grid-template-columns:1fr;}}
.key-input{
  width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:4px;
  padding:12px 14px;color:var(--text-hi);font-family:var(--mono);font-size:14px;letter-spacing:0.03em;
}
.key-input::placeholder{color:var(--text-lo);letter-spacing:0.02em;}

.divider{height:1px;background:var(--line-soft);margin:28px 0;}

.instr-block{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:4px;padding:18px 20px;margin-top:16px;}
.instr-block h4{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-lo);margin:0 0 12px;}
.instr-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;}
.instr-list li{display:flex;gap:10px;align-items:flex-start;font-family:var(--sans);font-size:13.5px;color:var(--text-mid);line-height:1.55;}
.instr-list li .n{font-family:var(--mono);color:var(--amber);font-size:12px;flex:none;padding-top:1px;}
.instr-list code{background:var(--surface-3);border:1px solid var(--line-soft);border-radius:2px;padding:1px 6px;font-family:var(--mono);font-size:0.92em;color:var(--text-hi);}

.code-preview{margin-top:14px;}
.code-box{
  background:var(--surface-2);border:1px solid var(--line-soft);border-radius:4px;
  padding:14px 16px;font-family:var(--mono);font-size:13px;color:var(--amber);line-height:1.8;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
.code-box pre{margin:0;white-space:pre-wrap;word-break:break-all;font-family:inherit;}
.hint{font-family:var(--sans);font-size:12px;color:var(--text-lo);margin-top:8px;}

.url-chip{
  display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-2);
  border:1px solid var(--line-soft);border-radius:4px;padding:12px 12px 12px 16px;margin-top:6px;
}
.url-chip code{font-family:var(--mono);font-size:13.5px;color:var(--amber);overflow-x:auto;white-space:nowrap;}

/* ---------- Checklist ---------- */
.check-list{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;}
.check-item{
  display:flex;align-items:flex-start;gap:14px;padding:16px 4px;border-top:1px solid var(--line-soft);cursor:pointer;
}
.check-item:first-child{border-top:1px solid var(--line);}
.check-item input{position:absolute;opacity:0;width:1px;height:1px;}
.box{
  width:20px;height:20px;border-radius:4px;border:1px solid var(--line);background:var(--surface-2);flex:none;margin-top:1px;
  display:flex;align-items:center;justify-content:center;transition:all .15s ease;
}
.box svg{opacity:0;transition:opacity .1s ease;}
.check-item input:checked + .box{background:var(--amber);border-color:var(--amber);}
.check-item input:checked + .box svg{opacity:1;}
.check-item input:focus-visible + .box{outline:2px solid var(--amber);outline-offset:2px;}
.check-item .ctext strong{display:block;font-family:var(--sans);font-size:14px;color:var(--text-hi);margin-bottom:2px;}
.check-item .ctext span{font-family:var(--sans);font-size:13px;color:var(--text-lo);}

/* ---------- Chart mock (real EA comment format) ---------- */
.chart-mock{
  border:1px solid var(--line);border-radius:4px;background:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px),
    var(--surface-2);
  background-size:32px 32px;position:relative;overflow:hidden;margin-top:16px;padding:16px;min-height:170px;
}
.chart-mock .label{font-family:var(--mono);font-size:10px;color:var(--text-lo);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px;}
.chart-mock pre{
  margin:0;font-family:var(--mono);font-size:12px;line-height:1.65;color:var(--buy);white-space:pre-wrap;
}
.chart-mock pre .dim{color:var(--text-lo);}
.chart-mock pre .hi{color:var(--text-hi);}

.risk-table{width:100%;border-collapse:collapse;margin-top:14px;font-family:var(--sans);font-size:13px;}
.risk-table th{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-lo);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);}
.risk-table td{padding:9px 10px;border-bottom:1px solid var(--line-soft);color:var(--text-mid);vertical-align:top;}
.risk-table td:first-child{font-family:var(--mono);color:var(--text-hi);font-size:12px;white-space:nowrap;}

/* ---------- Step 4: terminal preview ---------- */
.term{
  background:#05060A;border:1px solid var(--line);border-radius:4px;padding:16px 18px;margin-top:18px;
  font-family:var(--mono);font-size:12.5px;line-height:1.75;color:var(--text-mid);min-height:48px;
}
.term .ln{opacity:0;transform:translateY(3px);transition:all .25s ease;}
.term .ln.show{opacity:1;transform:translateY(0);}
.term .path{color:var(--buy);}
.term .num{color:var(--buy);}
.term .prompt{color:var(--warn);}
@media(prefers-reduced-motion:reduce){.term .ln{transition:none;}}

.final-check{margin-top:8px;}
.complete-banner{
  margin-top:22px;padding:20px 22px;border-radius:4px;background:rgba(62,217,138,0.1);
  border:1px solid rgba(62,217,138,0.35);display:flex;align-items:center;gap:14px;
}
.complete-banner .ic{width:34px;height:34px;border-radius:50%;background:var(--buy);color:var(--ink);display:flex;align-items:center;justify-content:center;flex:none;font-weight:700;}
.complete-banner h4{margin:0 0 3px;font-family:var(--sans);font-size:15px;color:var(--text-hi);}
.complete-banner p{margin:0;font-family:var(--sans);font-size:13px;color:var(--text-mid);}

/* ---------- Bottom nav ---------- */
.wiz-nav{display:flex;align-items:center;justify-content:space-between;margin-top:26px;gap:12px;}
.wiz-nav .right{display:flex;gap:10px;align-items:center;}
.step-count{font-family:var(--mono);font-size:11px;color:var(--text-lo);}

[data-step-panel]{display:none;}
[data-step-panel].active{display:block;animation:wiz-fadein .25s ease;}
@keyframes wiz-fadein{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){[data-step-panel].active{animation:none;}}

.wiz-toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--surface-2);
  border:1px solid var(--line);color:var(--text-hi);font-family:var(--mono);font-size:12.5px;padding:10px 16px;
  border-radius:4px;opacity:0;pointer-events:none;transition:all .2s ease;z-index:50;display:flex;align-items:center;gap:8px;
}
.wiz-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.wiz-toast .dot{width:6px;height:6px;border-radius:50%;background:var(--buy);}