/* ── New-user onboarding sequence ──────────────────────────────────────────
   Hybrid: welcome modal carousel -> spotlight coach-mark on the live upload
   button. Self-contained, scoped under .wr-onb-*. Uses existing design tokens.
*/

.wr-onb-root{
  position:fixed; inset:0; z-index:900;
  font-family:var(--font-body, 'Inter', sans-serif);
}
.wr-onb-root[hidden]{ display:none; }

/* ── Phase A: welcome modal ──────────────────────────────────────────────── */
.wr-onb-backdrop{
  position:fixed; inset:0;
  background:oklch(0 0 0 / .68);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:1.25rem;
  opacity:0; transition:opacity .28s ease;
}
.wr-onb-backdrop.wr-onb-show{ opacity:1; }

.wr-onb-card{
  position:relative;
  width:100%; max-width:560px;
  background:linear-gradient(180deg, color-mix(in oklab, var(--color-surface) 92%, transparent), var(--color-surface));
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl, 1rem);
  box-shadow:var(--shadow-lg, 0 18px 50px rgba(0,0,0,.48));
  padding:2rem 1.9rem 1.6rem;
  color:var(--color-text);
  transform:translateY(10px) scale(.985);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.wr-onb-backdrop.wr-onb-show .wr-onb-card{ transform:translateY(0) scale(1); }

.wr-onb-skip{
  position:absolute; top:.9rem; right:1rem;
  background:none; border:none; cursor:pointer;
  color:var(--color-text-faint); font-size:.82rem; font-weight:600;
  font-family:inherit; padding:.25rem .4rem; border-radius:6px;
  transition:color .15s, background .15s;
}
.wr-onb-skip:hover{ color:var(--color-text); background:var(--color-surface-offset); }

.wr-onb-eyebrow{
  display:inline-block;
  background:var(--color-primary-highlight);
  color:var(--color-primary);
  border-radius:var(--radius-full, 9999px);
  padding:.35rem .7rem; font-size:.7rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.07em;
  margin-bottom:.9rem;
}
.wr-onb-h{
  font-size:1.55rem; line-height:1.2; letter-spacing:-.025em;
  font-weight:800; margin:0 0 .55rem;
}
.wr-onb-sub{
  font-size:.98rem; line-height:1.55; color:var(--color-text-muted); margin:0;
}

/* step body slots */
.wr-onb-step{ display:none; }
.wr-onb-step.wr-onb-active{ display:block; animation:wr-onb-fade .32s ease; }
@keyframes wr-onb-fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* Step 2: value cards */
.wr-onb-cards{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.6rem; margin-top:1.2rem; }
@media(max-width:560px){ .wr-onb-cards{ grid-template-columns:1fr; } }
.wr-onb-vcard{
  background:var(--color-surface-offset);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg, .75rem);
  padding:.95rem .85rem;
}
.wr-onb-vcard .wr-onb-vicon{ font-size:1.4rem; line-height:1; margin-bottom:.5rem; display:block; }
.wr-onb-vcard .wr-onb-vt{ font-weight:700; font-size:.92rem; margin-bottom:.2rem; }
.wr-onb-vcard .wr-onb-vd{ font-size:.8rem; color:var(--color-text-muted); line-height:1.45; }
.wr-onb-vcard.teal .wr-onb-vt{ color:var(--color-primary); }
.wr-onb-vcard.warn .wr-onb-vt{ color:var(--color-warning); }
.wr-onb-vcard.good .wr-onb-vt{ color:var(--color-success); }

/* Step 3: investor type picker */
.wr-onb-types{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin-top:1.1rem; }
@media(max-width:560px){ .wr-onb-types{ grid-template-columns:1fr; } }
.wr-onb-type{
  text-align:left; font-family:inherit; cursor:pointer;
  display:flex; flex-direction:column; gap:.22rem;
  padding:.85rem .9rem;
  border-radius:var(--radius-lg, .75rem);
  background:var(--color-surface-offset);
  border:1px solid var(--color-border);
  color:var(--color-text);
  transition:border-color .15s, background .15s;
}
.wr-onb-type:hover{ border-color:var(--color-text-faint); }
.wr-onb-type.wr-onb-sel{ border-color:var(--color-primary); background:var(--color-primary-highlight); }
.wr-onb-type-ic{ font-size:1.3rem; line-height:1; }
.wr-onb-type-n{ font-weight:700; font-size:.92rem; }
.wr-onb-type.wr-onb-sel .wr-onb-type-n{ color:var(--color-primary); }
.wr-onb-type-d{ font-size:.78rem; color:var(--color-text-muted); line-height:1.4; }

/* Step 4: numbered how-it-works */
.wr-onb-steps{ list-style:none; margin:1.2rem 0 0; padding:0; display:flex; flex-direction:column; gap:.85rem; }
.wr-onb-steps li{ display:flex; gap:.75rem; align-items:flex-start; }
.wr-onb-num{
  flex:0 0 auto; width:26px; height:26px; border-radius:var(--radius-full, 9999px);
  background:var(--color-primary); color:var(--color-text-inverse, #171614);
  font-family:var(--font-mono, monospace); font-weight:700; font-size:.85rem;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.wr-onb-stext{ font-size:.92rem; line-height:1.45; }
.wr-onb-stext b{ font-weight:700; }
.wr-onb-stext .wr-onb-sd{ display:block; color:var(--color-text-muted); font-size:.82rem; margin-top:.1rem; }
.wr-onb-chips{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.45rem; }
.wr-onb-chip{
  font-size:.72rem; font-weight:600; color:var(--color-text-muted);
  background:var(--color-surface-2); border:1px solid var(--color-divider);
  border-radius:var(--radius-full, 9999px); padding:.22rem .6rem;
}

/* footer: progress dots + nav */
.wr-onb-foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:1.6rem; gap:1rem;
}
.wr-onb-dots{ display:flex; gap:.4rem; }
.wr-onb-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--color-border); transition:background .2s, width .2s;
}
.wr-onb-dot.wr-onb-on{ background:var(--color-primary); width:20px; border-radius:9999px; }
.wr-onb-actions{ display:flex; gap:.55rem; align-items:center; }

.wr-onb-btn{
  font-family:inherit; font-weight:700; font-size:.9rem;
  border-radius:var(--radius-lg, .75rem); padding:.6rem 1.05rem;
  cursor:pointer; border:1px solid transparent; transition:background .15s, border-color .15s, opacity .15s;
}
.wr-onb-btn-primary{ background:var(--color-primary); color:#fff; }
.wr-onb-btn-primary:hover{ background:var(--color-primary-hover); }
.wr-onb-btn-ghost{ background:transparent; color:var(--color-text-muted); border-color:var(--color-border); }
.wr-onb-btn-ghost:hover{ color:var(--color-text); border-color:var(--color-text-faint); }
.wr-onb-btn-text{ background:none; border:none; color:var(--color-text-muted); }
.wr-onb-btn-text:hover{ color:var(--color-text); }

/* ── Phase B: spotlight ──────────────────────────────────────────────────── */
.wr-onb-spot-cut{
  position:fixed; z-index:901;
  border-radius:14px;
  box-shadow:0 0 0 9999px oklch(0 0 0 / .72);
  pointer-events:none;
  transition:all .3s cubic-bezier(.2,.8,.2,1);
}
.wr-onb-spot-ring{
  position:fixed; z-index:902;
  border-radius:14px;
  border:2px solid var(--color-primary);
  pointer-events:none;
  box-shadow:0 0 0 4px color-mix(in oklab, var(--color-primary) 30%, transparent);
  animation:wr-onb-pulse 1.7s ease-in-out infinite;
}
@keyframes wr-onb-pulse{
  0%,100%{ box-shadow:0 0 0 4px color-mix(in oklab, var(--color-primary) 32%, transparent); }
  50%{ box-shadow:0 0 0 11px color-mix(in oklab, var(--color-primary) 6%, transparent); }
}

.wr-onb-coach{
  position:fixed; z-index:903;
  width:min(320px, calc(100vw - 2rem));
  background:linear-gradient(180deg, color-mix(in oklab, var(--color-surface) 94%, transparent), var(--color-surface));
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg, .75rem);
  box-shadow:var(--shadow-lg, 0 18px 50px rgba(0,0,0,.48));
  padding:1.15rem 1.15rem 1rem;
  color:var(--color-text);
  opacity:0; transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease;
}
.wr-onb-coach.wr-onb-show{ opacity:1; transform:none; }
.wr-onb-coach-h{ font-size:1.08rem; font-weight:800; letter-spacing:-.02em; margin:0 0 .35rem; }
.wr-onb-coach-sub{ font-size:.86rem; color:var(--color-text-muted); line-height:1.45; margin:0 0 .9rem; }
.wr-onb-coach-actions{ display:flex; gap:.55rem; align-items:center; }
/* little pointer arrow on the coach-mark */
.wr-onb-coach::before{
  content:""; position:absolute; width:14px; height:14px;
  background:inherit; border-left:1px solid var(--color-border); border-top:1px solid var(--color-border);
  transform:rotate(45deg);
}
.wr-onb-coach.wr-onb-arrow-up::before{ top:-8px; left:34px; }
.wr-onb-coach.wr-onb-arrow-down::before{ bottom:-8px; left:34px; transform:rotate(225deg); }

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .wr-onb-backdrop,.wr-onb-card,.wr-onb-coach,.wr-onb-spot-cut{ transition:none; }
  .wr-onb-step.wr-onb-active{ animation:none; }
  .wr-onb-spot-ring{ animation:none; }
}