/* ── Setup Wizard – Styles ── */
/* Self-contained, loaded only when wizard runs */

/* ── Custom scrollbars ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg,#1a1a1a)}
::-webkit-scrollbar-thumb{background:var(--line,#3a3a3a);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--muted,#969086)}
*{scrollbar-width:thin;scrollbar-color:var(--line,#3a3a3a) var(--bg,#1a1a1a)}

.wiz-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.75);
  display:none;align-items:center;justify-content:center;
  z-index:500;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:1rem;
}
.wiz-overlay.open{display:flex}

.wiz-box{
  background:var(--surface);
  width:100%;max-width:520px;
  border-radius:var(--radius-lg);
  padding:0;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  animation:wiz-fade-in 300ms ease-out;
  max-height:90vh;
  overflow-y:auto;
}
@keyframes wiz-fade-in{
  from{opacity:0;transform:translateY(16px) scale(0.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Steps indicator */
.wiz-steps{
  display:flex;align-items:center;justify-content:center;
  gap:0.5rem;
  padding:1.25rem 1.5rem 0.75rem;
}
.wiz-step-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--line);
  transition:all 250ms;
}
.wiz-step-dot.active{background:var(--accent);width:24px;border-radius:4px}
.wiz-step-dot.done{background:var(--muted)}

/* Body */
.wiz-body{padding:0.5rem 1.5rem 1.5rem}
.wiz-icon{
  display:flex;align-items:center;justify-content:center;
  margin-bottom:0.75rem;
}
.wiz-icon svg{color:var(--accent)}
.wiz-title{
  font-family:var(--font-heading);
  font-size:1.2rem;font-weight:800;
  text-align:center;
  margin-bottom:0.35rem;
  letter-spacing:-0.02em;
}
.wiz-sub{
  font-size:0.85rem;color:var(--muted);
  text-align:center;
  margin-bottom:1.25rem;
  line-height:1.5;
}

/* Preset picker (reused from main, scoped) */
.wiz-presets{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0.6rem;
  margin-bottom:1rem;
}
.wiz-preset{
  background:var(--surface2);
  border:2px solid var(--line);
  border-radius:var(--radius);
  padding:0.85rem 0.75rem;
  cursor:pointer;
  text-align:center;
  transition:border-color 180ms,background 180ms,transform 120ms;
}
.wiz-preset:active{transform:scale(0.97)}
.wiz-preset:hover{border-color:var(--muted)}
.wiz-preset.selected{
  border-color:var(--accent);
  background:rgba(232,101,42,0.1);
}
.wiz-preset .wp-icon{
  display:flex;align-items:center;justify-content:center;
  margin-bottom:0.35rem;
  color:var(--muted);
  font-size:1rem;
}
.wiz-preset.selected .wp-icon{color:var(--accent)}
.wiz-preset .wp-name{
  display:block;
  font-size:0.78rem;font-weight:700;
  margin-bottom:0.1rem;
}
.wiz-preset .wp-desc{
  display:block;
  font-size:0.65rem;color:var(--muted);
}

/* Mini stove preview */
.wiz-stove-preview{
  display:grid;gap:3px;padding:0.5rem;
  background:var(--surface);
  border-radius:6px;
  margin:0.5rem auto 0;
  max-width:140px;
}
.wiz-stove-preview .wsp-dot{
  aspect-ratio:1;
  border-radius:4px;
  background:var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:0.45rem;color:var(--muted);
  min-height:16px;
}
.wiz-preset.selected .wsp-dot{background:var(--accent-dim);color:var(--accent)}

/* Voice examples */
.wiz-voice-examples{
  display:grid;gap:0.4rem;
  margin-bottom:0.75rem;
}
.wiz-ve{
  display:flex;align-items:center;gap:0.5rem;
  padding:0.55rem 0.75rem;
  background:var(--surface2);
  border-radius:6px;
  font-size:0.78rem;
}
.wiz-ve .ve-say{color:var(--accent);font-weight:600}
.wiz-ve .ve-arrow{color:var(--muted);font-size:0.65rem}
.wiz-ve .ve-do{color:var(--muted)}

/* Footer */
.wiz-footer{
  display:flex;align-items:center;gap:0.75rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
}
.wiz-footer .wiz-skip{
  background:none;border:none;
  color:var(--muted);font-size:0.78rem;font-weight:600;
  cursor:pointer;padding:0.5rem 0;
  font-family:var(--font-body);
  transition:color 140ms;
}
.wiz-footer .wiz-skip:hover{color:var(--text)}
.wiz-footer .wiz-btn{
  background:var(--accent);color:#fff;border:none;
  border-radius:var(--radius);
  padding:0.7rem 1.5rem;
  font-family:var(--font-heading);
  font-size:0.88rem;font-weight:700;
  cursor:pointer;
  transition:opacity 140ms;
  margin-left:auto;
}
.wiz-footer .wiz-btn:active{opacity:0.8}
.wiz-footer .wiz-btn--secondary{
  background:var(--surface2);
  color:var(--text);
}
.wiz-footer .wiz-btn:disabled{opacity:0.4;cursor:default}

/* Responsive */
@media(max-width:400px){
  .wiz-presets{grid-template-columns:1fr}
  .wiz-body{padding:0.5rem 1rem 1.25rem}
}