/* Brodoit v10 onboarding — 4 full-screen swipeable slides. Uses /app/theme.css tokens (v10); zero deps. */
.onb{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;background:var(--b-bg,#FBF8F3);color:var(--b-ink,#17141F);font-family:var(--b-sans,sans-serif);overflow:hidden;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);animation:onb-in var(--m-enter,320ms) var(--ease,ease);touch-action:pan-y;-webkit-user-select:none;user-select:none}
.onb.out{animation:onb-out var(--m-state,200ms) ease forwards}
.onb *{box-sizing:border-box}
.onb-top{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 8px 0 20px;flex-shrink:0}
.onb-dots{display:flex;gap:6px;align-items:center}
.onb-dots i{display:block;width:8px;height:8px;border-radius:999px;background:var(--b-line-2,rgba(23,20,31,.16));transition:width var(--m-state,200ms) var(--ease,ease),background var(--m-state,200ms)}
.onb-dots i.on{width:24px;background:var(--b-ink,#17141F)}
.onb-dots i.done{background:var(--move,#B5402A)}
.onb-skip{min-height:44px;min-width:44px;padding:0 14px;border:none;background:transparent;color:var(--b-mute,#6F697D);font:var(--t-sm,600 13px/1.4 sans-serif);border-radius:var(--r-pill,999px);cursor:pointer}
.onb-skip:active{background:var(--b-bg-2,#F2EDE4)}
.onb-view{flex:1;min-height:0;position:relative;overflow:hidden}
.onb-track{display:flex;height:100%;width:400%;transform:translate3d(0,0,0);transition:transform var(--m-enter,320ms) var(--ease,cubic-bezier(.16,1,.3,1));will-change:transform}
.onb-track.drag{transition:none}
.onb-slide{width:25%;height:100%;flex:0 0 25%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;padding:56px 24px 16px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;text-align:center}
.onb-slide>*{max-width:360px;width:100%}
.onb-hero{display:grid;place-items:center;min-height:160px;position:relative;width:auto}
.onb-hero .mascot{display:block;transition:transform var(--m-state,200ms) var(--ease,ease)}
.onb-slide.active .onb-hero.float .mascot{animation:onb-float 3.2s ease-in-out infinite}
.onb-hero.tap{cursor:pointer}
.onb-hero.tap:active .mascot{transform:scale(.96)}
.onb-say{position:absolute;top:0;right:-4px;background:var(--b-card,#fff);color:var(--b-ink,#17141F);font:var(--t-sm,600 13px/1.4 sans-serif);padding:8px 12px;border-radius:14px 14px 14px 4px;box-shadow:var(--sh-1);opacity:0;transform:translateY(6px) scale(.9);transition:opacity var(--m-state,200ms),transform var(--m-state,200ms) var(--ease,ease);pointer-events:none;white-space:nowrap}
.onb-say.on{opacity:1;transform:none}
.onb-eyebrow{font:var(--t-eyebrow,800 11px/1 sans-serif);letter-spacing:.14em;text-transform:uppercase;color:var(--move,#B5402A)}
.onb-h1{font:var(--t-h1,800 28px/1.1 sans-serif);letter-spacing:-.03em;color:var(--b-ink,#17141F);margin:0}
.onb-h1 .grad{background:var(--b-grad,linear-gradient(135deg,#B5402A,#8E2F1E));-webkit-background-clip:text;background-clip:text;color:transparent}
.onb-p{font:var(--t-body,500 15px/1.5 sans-serif);color:var(--b-ink-2,#4B4657);margin:0}
.onb-foot{flex-shrink:0;padding:8px 24px 16px;display:flex;flex-direction:column;gap:8px;align-items:center}
.onb-foot .b-btn{width:100%;max-width:360px;min-height:52px}
.onb-foot .onb-hint{font:var(--t-cap,600 12px/1.3 sans-serif);color:var(--b-mute,#6F697D);min-height:16px}
/* slide 2 — ring + leaderboard */
.onb-ring{position:relative;width:220px;height:220px;display:grid;place-items:center}
.onb-ring svg.ringsvg{position:absolute;inset:0;transform:rotate(-90deg)}
.onb-ring .bg{stroke:var(--move-soft,rgba(181,64,42,.14))}
.onb-ring .fg{stroke:var(--move,#B5402A);stroke-dasharray:597 597;stroke-dashoffset:597}
.onb-slide.active .onb-ring .fg{animation:onb-ring 1.6s var(--ease,cubic-bezier(.16,1,.3,1)) .15s forwards}
.onb-ring .mascot{position:relative;z-index:1}
.onb-steps{display:flex;flex-direction:column;align-items:center;gap:2px}
.onb-steps b{font:var(--t-display,800 40px/1 sans-serif);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--b-ink,#17141F)}
.onb-steps small{font:var(--t-cap,600 12px/1.3 sans-serif);color:var(--b-mute,#6F697D);letter-spacing:.04em;text-transform:uppercase}
.onb-board{background:var(--b-card,#fff);border-radius:var(--r-md,16px);box-shadow:var(--sh-1);border:1px solid var(--b-line,rgba(23,20,31,.08));padding:4px 14px;text-align:left}
.onb-board .row{display:flex;align-items:center;gap:10px;min-height:48px;padding:4px 0;border-bottom:1px solid var(--b-line,rgba(23,20,31,.08));opacity:0;transform:translateY(10px)}
.onb-board .row:last-child{border-bottom:none}
.onb-slide.active .onb-board .row{animation:b-rise var(--m-enter,320ms) var(--ease,ease) forwards}
.onb-slide.active .onb-board .row:nth-child(1){animation-delay:.5s}.onb-slide.active .onb-board .row:nth-child(2){animation-delay:.65s}.onb-slide.active .onb-board .row:nth-child(3){animation-delay:.8s}
.onb-board .rank{width:18px;font:var(--t-sm,600 13px/1.4 sans-serif);color:var(--b-mute,#6F697D);text-align:center}
.onb-board .b-avatar{width:34px;height:34px;font-size:13px}
.onb-board .who{flex:1;font:var(--t-h3,700 17px/1.3 sans-serif);font-size:15px;color:var(--b-ink,#17141F);display:flex;align-items:center;gap:6px}
.onb-board .who .ico{color:var(--b-primary,#B5402A)}
.onb-board .who small{font:var(--t-cap,600 12px/1.3 sans-serif);color:var(--b-mute,#6F697D)}
.onb-board .n{font:var(--t-sm,600 13px/1.4 sans-serif);font-variant-numeric:tabular-nums;color:var(--b-ink-2,#4B4657)}
.onb-board .row.me{background:var(--move-soft,rgba(181,64,42,.14));margin:0 -14px;padding:4px 14px;border-radius:12px}
.onb-board .row.me .n{color:var(--move-deep,#8E2F1E);font-weight:800}
/* slide 3 — goal chips */
.onb-group{text-align:left;display:flex;flex-direction:column;gap:8px}
.onb-group .lbl{display:flex;align-items:center;gap:6px;font:var(--t-cap,600 12px/1.3 sans-serif);color:var(--b-mute,#6F697D);letter-spacing:.06em;text-transform:uppercase}
.onb-chips{display:flex;flex-wrap:wrap;gap:8px}
.onb-chips .b-chip{min-height:44px;transition:transform var(--m-press,120ms) var(--ease,ease),background var(--m-state,200ms),color var(--m-state,200ms)}
.onb-chips .b-chip:active{transform:scale(.96)}
.onb-chips .b-chip.on{background:var(--b-ink,#17141F);color:var(--b-bg,#FBF8F3)}
.onb-chips .b-chip.on .ico{color:var(--move,#B5402A)}
/* slide 4 — permissions */
.onb-perm{display:flex;gap:12px;align-items:flex-start;text-align:left;background:var(--b-card,#fff);border-radius:var(--r-md,16px);box-shadow:var(--sh-1);border:1px solid var(--b-line,rgba(23,20,31,.08));padding:14px}
.onb-perm .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex-shrink:0;background:var(--b-primary-soft,rgba(181,64,42,.12));color:var(--b-primary,#B5402A)}
.onb-perm.bell .ic{background:var(--b-violet-soft,rgba(31,30,28,.12));color:var(--b-violet,#1F1E1C)}
.onb-perm .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.onb-perm .txt b{font:var(--t-h3,700 17px/1.3 sans-serif);font-size:15px;color:var(--b-ink,#17141F)}
.onb-perm .txt p{margin:0;font:var(--t-sm,600 13px/1.4 sans-serif);font-weight:500;color:var(--b-ink-2,#4B4657)}
.onb-perm .b-btn{margin-top:6px;align-self:flex-start;padding:10px 16px;font-size:14px;border-radius:var(--r-sm,12px);min-height:44px}
.onb-perm .state{display:none;align-items:center;gap:6px;margin-top:6px;min-height:44px;font:var(--t-sm,600 13px/1.4 sans-serif);color:var(--b-ink-2,#4B4657)}
.onb-perm .state .ico{flex-shrink:0}
.onb-perm.ok .b-btn,.onb-perm.no .b-btn{display:none}
.onb-perm.ok .state,.onb-perm.no .state{display:flex}
.onb-perm.ok .state{color:var(--move-deep,#8E2F1E)}
.onb-perm.no .state{color:var(--b-mute,#6F697D)}
.onb-perm.busy .b-btn{opacity:.6;pointer-events:none}
@keyframes onb-in{from{opacity:0}to{opacity:1}}
@keyframes onb-out{from{opacity:1;transform:none}to{opacity:0;transform:scale(1.02)}}
@keyframes onb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes onb-ring{to{stroke-dashoffset:167}}
@media (min-height:760px){.onb-hero{min-height:200px}}
@media (max-height:700px){.onb-ring{width:180px;height:180px}.onb-h1{font-size:24px}.onb-hero{min-height:120px}}
@media (prefers-reduced-motion:reduce){.onb-slide.active .onb-ring .fg{animation:none;stroke-dashoffset:167}.onb-board .row{opacity:1;transform:none}.onb-slide.active .onb-hero.float .mascot{animation:none}}

@media (min-height:760px){.onb-slide{justify-content:center;padding-top:8px}}