/* =====================================================================
   Onboarding component layer — .snk-ob-* (overlay engine) + .snk-ck-* (checklist)
   Ported verbatim from _mockups/onboarding/assets/ob-mock.css (line-height-hardened,
   contrast-audited, animated). Token-driven (var(--snk-*)/var(--rr-*)) → auto light/dark.
   NB: production body is `line-height:26px;font-size:16px` (header.php:110-114); every text
   rule here sets its own explicit line-height (+ tight root line-height on the card) so the
   26px strut never bleeds into small text. Signature: gold rotating "raid-ring" + energy track.
   ===================================================================== */

/* ---- overlay shell -------------------------------------------------- */
.snk-ob{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:1rem}
.snk-ob[hidden]{display:none}
.snk-ob-back{position:absolute;inset:0;background:rgba(9,11,18,.58);backdrop-filter:blur(4px)}
html[data-bs-theme=dark] .snk-ob-back{background:rgba(2,4,10,.66)}

.snk-ob-card{position:relative;width:100%;max-width:408px;max-height:min(94vh,716px);display:flex;flex-direction:column;
  line-height:1.45;
  background:var(--snk-surface);border:1px solid var(--snk-border);border-radius:var(--snk-radius);
  box-shadow:0 24px 64px rgba(0,0,0,.34);overflow:hidden;
  animation:obIn .34s cubic-bezier(.2,.85,.25,1)}
@keyframes obIn{from{transform:translateY(14px) scale(.985);opacity:0}to{transform:none;opacity:1}}
/* scrollable content region so richer copy never overflows; footer stays pinned */
.snk-ob-scroll{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}

.snk-ob-x{position:absolute;top:.55rem;right:.55rem;z-index:3;width:34px;height:34px;display:grid;place-items:center;
  border:0;border-radius:50%;background:transparent;color:var(--snk-text-muted);cursor:pointer;transition:background .15s,color .15s}
.snk-ob-x:hover{background:var(--snk-border);color:var(--snk-text)}
.snk-ob-x:focus-visible{outline:2px solid var(--snk-accent);outline-offset:2px}
.snk-ob-x i,.snk-ob-x svg{width:1.05rem;height:1.05rem}

/* ---- hero: the gold "raid-ring" (signature) ------------------------- */
.snk-ob-hero{display:flex;justify-content:center;padding:1.9rem 1rem .5rem;
  background:radial-gradient(120% 84% at 50% 0%, color-mix(in srgb,var(--rr-gold) 15%,transparent), transparent 62%);
  animation:obPop .44s cubic-bezier(.2,.8,.2,1)}
.snk-ob-ring{position:relative;width:116px;height:116px;border-radius:50%;display:grid;place-items:center;
  color:var(--rr-gold);animation:obGlow 3.4s ease-in-out infinite}
/* rotating gold energy ring (the signature animation) */
.snk-ob-ring::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,var(--rr-gold),var(--rr-star),var(--rr-gold),var(--rr-star),var(--rr-gold));
  animation:obSpin 7s linear infinite}
/* inner surface disc (leaves a thin rotating annulus) + soft top tint */
.snk-ob-ring::after{content:"";position:absolute;inset:5px;border-radius:50%;
  background:radial-gradient(84% 84% at 50% 26%, color-mix(in srgb,var(--rr-gold) 11%,var(--snk-surface)), var(--snk-surface) 72%)}
.snk-ob-ring img{position:relative;z-index:1;width:72px;height:72px;object-fit:contain;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.24));animation:obFloat 4.2s ease-in-out infinite}
.snk-ob-ring i,.snk-ob-ring svg{position:relative;z-index:1;width:46px;height:46px;color:var(--rr-gold);stroke-width:1.75}
@keyframes obSpin{to{transform:rotate(360deg)}}
@keyframes obGlow{0%,100%{box-shadow:0 6px 20px color-mix(in srgb,var(--rr-gold) 24%,transparent)}
  50%{box-shadow:0 9px 30px color-mix(in srgb,var(--rr-gold) 46%,transparent)}}
@keyframes obFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ---- step copy (re-rendered per step → entrance animations replay) --- */
.snk-ob-step{padding:.35rem 1.5rem 0;text-align:center;animation:obFadeUp .5s .05s both}
.snk-ob-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rr-gold)}
.snk-ob-title{font-size:1.36rem;font-weight:700;line-height:1.16;letter-spacing:-.015em;
  margin:.34rem 0 .5rem;color:var(--snk-text)}
.snk-ob-body{font-size:.925rem;line-height:1.6;color:var(--snk-ink-600);margin:0 auto;max-width:34ch}
.snk-ob-body b{color:var(--snk-text);font-weight:700}
/* highlight chips — concrete, motivating benefits per step */
.snk-ob-chips{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin:.9rem 1.2rem 0;
  animation:obFadeUp .5s .12s both}
.snk-ob-chip{display:inline-flex;align-items:center;gap:.32rem;font-size:.735rem;font-weight:600;
  color:var(--rr-amber);background:color-mix(in srgb,var(--rr-gold) 12%,var(--snk-surface));
  border:1px solid color-mix(in srgb,var(--rr-gold) 30%,transparent);border-radius:999px;padding:.26rem .58rem}
.snk-ob-chip i,.snk-ob-chip svg{width:.82rem;height:.82rem;color:var(--rr-gold)}
@keyframes obPop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
@keyframes obFadeUp{from{transform:translateY(9px);opacity:0}to{transform:none;opacity:1}}

/* a highlighted "why" note reusing the alert token vocabulary (fairness/USP steps) */
.snk-ob-note{display:flex;gap:.6rem;text-align:left;align-items:flex-start;margin:.95rem 1.4rem 0;
  padding:.65rem .8rem;border:1px solid color-mix(in srgb,var(--rr-gold) 26%,var(--snk-border));border-radius:var(--rr-r-md);
  background:color-mix(in srgb,var(--rr-gold) 9%,var(--snk-surface));animation:obFadeUp .5s .1s both}
.snk-ob-note i,.snk-ob-note svg{flex:0 0 auto;width:1.05rem;height:1.05rem;color:var(--rr-gold);margin-top:.05rem}
.snk-ob-note span{font-size:.84rem;line-height:1.5;color:var(--snk-text)}

/* ---- progress: slim gold energy track (not generic dots) + step count */
.snk-ob-prog{display:flex;gap:.3rem;justify-content:center;padding:1.25rem 1.4rem .1rem}
.snk-ob-seg{height:4px;flex:1 1 0;max-width:32px;border-radius:2px;background:var(--snk-border);transition:background .35s}
.snk-ob-seg.on{background:var(--rr-gold)}
.snk-ob-seg.cur{background:var(--rr-star);box-shadow:0 0 0 1px color-mix(in srgb,var(--rr-star) 40%,transparent)}
.snk-ob-count{text-align:center;font-size:.72rem;font-weight:600;letter-spacing:.02em;color:var(--snk-ink-500);
  padding:.5rem 1.4rem 0}

/* ---- footer (pinned below the scroll region) ----------------------- */
.snk-ob-foot{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:.7rem;
  padding:.9rem 1.15rem 1.15rem;border-top:1px solid var(--snk-border-subtle)}
.snk-ob-skip{background:none;border:0;color:var(--snk-ink-500);font-weight:600;font-size:.85rem;
  cursor:pointer;padding:.4rem .2rem;border-radius:8px}
.snk-ob-skip:hover{color:var(--snk-text)}
.snk-ob-skip:focus-visible{outline:2px solid var(--snk-accent);outline-offset:2px}
.snk-ob-nav{display:flex;gap:.5rem;align-items:center}
/* final step: always stack CTAs full-width (primary on top) so a long label
   ("Turn on notifications") never wraps or crowds a second button */
.snk-ob-foot.is-final{flex-direction:column-reverse;align-items:stretch;gap:.5rem}
.snk-ob-foot.is-final>*{width:100%;justify-content:center;white-space:nowrap}

/* mobile: rise as a bottom-sheet, thumb-reachable footer */
@media(max-width:640px){
  .snk-ob{align-items:flex-end;padding:0}
  .snk-ob-card{max-width:none;border-radius:20px 20px 0 0;border-bottom:0;
    animation:obUp .36s cubic-bezier(.2,.85,.25,1);padding-bottom:env(safe-area-inset-bottom)}
  @keyframes obUp{from{transform:translateY(100%)}to{transform:none}}
  .snk-ob-hero{padding-top:2.1rem}
}

/* respect reduced motion — kill every overlay animation (spin/glow/float/entrance) */
@media(prefers-reduced-motion:reduce){
  .snk-ob-card,.snk-ob-hero,.snk-ob-step,.snk-ob-chips,.snk-ob-note,
  .snk-ob-ring,.snk-ob-ring::before,.snk-ob-ring img{animation:none!important}
}
html.snk-reduce-motion .snk-ob-card,html.snk-reduce-motion .snk-ob-hero,
html.snk-reduce-motion .snk-ob-step,html.snk-reduce-motion .snk-ob-chips,
html.snk-reduce-motion .snk-ob-note,html.snk-reduce-motion .snk-ob-ring,
html.snk-reduce-motion .snk-ob-ring::before,html.snk-reduce-motion .snk-ob-ring img{animation:none!important}

/* ---- getting-started checklist card (.snk-ck-*) --------------------- */
.snk-ck{border:1px solid var(--snk-border);border-radius:var(--snk-radius);background:var(--snk-surface);
  padding:1.05rem 1.1rem;box-shadow:0 6px 22px rgba(0,0,0,.05);max-width:520px;line-height:1.45}
.snk-ck-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.snk-ck-title{font-size:1.05rem;font-weight:700;color:var(--snk-text);display:flex;align-items:center;gap:.5rem}
.snk-ck-title i,.snk-ck-title svg{width:1.1rem;height:1.1rem;color:var(--rr-gold)}
.snk-ck-count{font-size:.8rem;font-weight:700;color:var(--snk-text-muted);white-space:nowrap}
.snk-ck-bar{height:6px;border-radius:3px;background:var(--snk-border);margin:.7rem 0 .2rem;overflow:hidden}
.snk-ck-bar span{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--rr-gold),var(--rr-star))}
.snk-ck-list{list-style:none;margin:.55rem 0 0;padding:0}
.snk-ck-row{display:flex;align-items:center;gap:.75rem;padding:.62rem .35rem;border-radius:var(--rr-r-md);
  text-decoration:none;transition:background .15s}
.snk-ck-row+.snk-ck-row{border-top:1px solid var(--snk-border)}
.snk-ck-row:hover{background:color-mix(in srgb,var(--rr-gold) 7%,var(--snk-surface))}
.snk-ck-ic{flex:0 0 auto;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--snk-border);color:var(--snk-text-muted)}
.snk-ck-ic i,.snk-ck-ic svg{width:15px;height:15px}
.snk-ck-row.done .snk-ck-ic{background:var(--rr-ok);border-color:var(--rr-ok);color:#fff}
.snk-ck-tx{flex:1;min-width:0}
.snk-ck-tx b{display:block;font-size:.92rem;font-weight:600;color:var(--snk-text);line-height:1.3}
.snk-ck-row.done .snk-ck-tx b{color:var(--snk-text-muted);text-decoration:line-through}
.snk-ck-tx span{font-size:.8rem;color:var(--snk-text-muted)}
.snk-ck-go{flex:0 0 auto;color:var(--snk-text-muted);display:grid;place-items:center}
.snk-ck-go i,.snk-ck-go svg{width:1.05rem;height:1.05rem}
.snk-ck-row.done .snk-ck-go{visibility:hidden}
/* the 100% collapsed "all set" state */
.snk-ck.is-done{display:flex;align-items:center;gap:.85rem}
.snk-ck-trophy{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--rr-gold) 16%,var(--snk-surface));color:var(--rr-gold)}
.snk-ck-trophy i,.snk-ck-trophy svg{width:22px;height:22px}
.snk-ck-done-tx{flex:1;min-width:0}
.snk-ck-done-tx b{display:block;font-size:.98rem;font-weight:700;color:var(--snk-text)}
.snk-ck-done-tx span{font-size:.82rem;color:var(--snk-text-muted)}

/* ---- the quiet re-open pill ("How it works") ----------------------- */
.snk-ob-pill{display:inline-flex;align-items:center;gap:.42rem;padding:.4rem .8rem;
  border:1px solid var(--snk-border);border-radius:999px;background:var(--snk-surface);
  color:var(--snk-text-muted);font-weight:600;font-size:.82rem;cursor:pointer;transition:border-color .15s,color .15s}
.snk-ob-pill:hover{border-color:var(--rr-gold);color:var(--snk-text)}
.snk-ob-pill:focus-visible{outline:2px solid var(--snk-accent);outline-offset:2px}
.snk-ob-pill i,.snk-ob-pill svg{width:.92rem;height:.92rem;color:var(--rr-gold)}