/* onboarding: a few questions, one screen each, with the assistant taking shape beside them on wide screens */
.onb { min-height:100dvh; display:flex; flex-direction:column; background:var(--paper); }
.onb-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:calc(14px + env(safe-area-inset-top)) 18px 6px; max-width:1040px; width:100%; margin:0 auto; }
.onb-top .count { font:500 13px var(--body); color:var(--soft); }
.track { position:relative; max-width:1040px; width:calc(100% - 36px); margin:10px auto 0; height:6px; background:var(--sunk); border-radius:3px; }
.track i { position:absolute; inset-block:0; inset-inline-start:0; width:calc(var(--p, 0) * 100%); background:linear-gradient(to left, var(--primary), color-mix(in srgb, var(--primary) 55%, #B3E9E4)); border-radius:3px; transition:width .45s cubic-bezier(.3,.8,.3,1); }
.track .pearl { --s:22px; position:absolute; top:50%; inset-inline-start:calc(var(--p, 0) * 100%); transform:translate(var(--tx, 50%), -50%); transition:inset-inline-start .45s cubic-bezier(.3,.8,.3,1); }
[dir=rtl] .track .pearl { --tx:50%; } [dir=ltr] .track .pearl { --tx:-50%; }
.onb-wrap { flex:1; display:grid; gap:28px; max-width:1040px; width:100%; margin:0 auto; padding:18px 18px calc(110px + env(safe-area-inset-bottom)); align-items:start; }
.step { animation:rise .35s ease-out both; max-width:620px; }
@keyframes rise { from { opacity:0; transform:translateY(12px); } }
.step .eyebrow { font:600 13px var(--body); color:var(--primary); letter-spacing:.04em; }
.step h1 { margin:4px 0 6px; } .step .lede { color:var(--soft); margin:0 0 14px; }
.step .q { margin:22px 0 4px; font:600 16px var(--body); color:var(--ink); } .step .q small { color:var(--soft); font-weight:400; margin-inline-start:8px; }
.onb-nav { position:fixed; inset-inline:0; bottom:0; z-index:5; display:flex; gap:10px; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(12px); border-top:1px solid var(--rule); }
.onb-nav .main { margin:0; flex:1; max-width:420px; margin-inline:auto; } .onb-nav .ghost { flex:0 0 30%; max-width:160px; margin-inline:0; }
.onb-nav-in { display:flex; gap:10px; width:100%; max-width:1040px; margin:0 auto; }
.onb-nav-in .main { flex:1; } .onb-nav-in .ghost { flex:0 0 30%; max-width:160px; }

/* the assistant taking shape */
.shape { display:none; position:sticky; top:20px; background:var(--sea); color:var(--on-sea); border-radius:var(--r-lg); padding:22px; overflow:hidden; }
.shape::before { content:""; position:absolute; inset:-40% -30% auto auto; width:260px; height:260px; background:radial-gradient(closest-side, rgba(203,196,247,.28), rgba(203,196,247,0)); }
.shape h3 { margin:12px 0 2px; font:700 20px var(--display); position:relative; } .shape p { margin:0 0 14px; color:var(--on-sea-soft); font-size:14px; position:relative; }
.shape ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; position:relative; }
.shape li { display:grid; grid-template-columns:7.2em 1fr; gap:10px; align-items:baseline; font-size:14px; padding:8px 12px; border-radius:12px; background:rgba(255,255,255,.06); }
.shape li b { color:var(--on-sea-soft); font-weight:500; } .shape li span { color:var(--on-sea); font-weight:600; }
.shape li.empty { background:transparent; border:1px dashed rgba(255,255,255,.22); } .shape li.empty span { color:var(--on-sea-soft); font-weight:400; opacity:.7; }
.shape li.fresh { animation:fresh .9s ease-out; } @keyframes fresh { from { background:rgba(179,233,228,.35); } }
@media (min-width:900px) { .onb-wrap { grid-template-columns:minmax(0,1fr) 360px; gap:56px; padding-top:34px; } .shape { display:block; } .onb-top, .track { padding-inline:0; } .onb-top { padding-inline:18px; } }

/* the last step: the assistant, built */
.built { text-align:center; padding:8px 0 4px; } .built .pearl { --s:92px; margin:6px auto 12px; animation:form 1.1s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes form { from { transform:scale(.2); opacity:0; } }
.built h1 { margin-top:2px; }
.summary { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px; text-align:start; }
.summary li { display:grid; grid-template-columns:8em 1fr; gap:10px; background:var(--panel); border:1px solid var(--rule); border-radius:12px; padding:10px 14px; font-size:15px; }
.summary li b { color:var(--soft); font-weight:500; } .summary li button { grid-column:1 / -1; justify-self:start; }

@media (min-width:900px) { .onb-nav-in { justify-content:flex-start; } .onb-nav-in .main:not(.ghost) { flex:0 1 340px; } }

.summary.changes li { display:block; } .hint.why { margin:6px 2px 0; }