/* Coach Leo onboarding tour — coachmark/spotlight. Vanilla CSS, no deps.
   All styling here (CSP: no inline styles). Respects prefers-reduced-motion. */

.leo-overlay{
  position:fixed; inset:0; z-index:2147483000;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  opacity:0; transition:opacity .25s ease; -webkit-tap-highlight-color:transparent;
}
.leo-overlay.leo-in{ opacity:1; }

/* Spotlight: a positioned box whose huge outer shadow darkens everything
   except the box itself (the "hole"). Pointer-events off so taps fall through
   to the overlay (overlay tap = skip). Welcome step hides it (.leo-nospot). */
.leo-spot{
  position:absolute; border-radius:16px; pointer-events:none;
  /* .68: at .62 the light theme stayed too bright around the spotlight */
  box-shadow:0 0 0 9999px rgba(12,26,44,.68);
  outline:3px solid rgba(255,255,255,.95); outline-offset:2px;
  transition:all .3s cubic-bezier(.4,.2,.2,1);
}
.leo-overlay.leo-nospot .leo-spot{ box-shadow:0 0 0 9999px rgba(12,26,44,.68); width:0; height:0; left:50%; top:50%; outline:0; border-radius:0; }

/* Tour card: Leo + speech bubble + buttons */
.leo-card{
  position:absolute; z-index:1; max-width:min(340px,88vw); pointer-events:auto;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:top .3s ease, left .3s ease;
}
.leo-bubble{
  background:#fff; color:#26364a; border-radius:20px; padding:14px 18px;
  box-shadow:0 10px 30px rgba(0,0,0,.28); text-align:center; width:100%;
  font-size:17px; font-weight:800; line-height:1.35;
}
.leo-actions{ display:flex; gap:10px; width:100%; justify-content:center; flex-wrap:wrap; }
.leo-btn{
  border:none; border-radius:14px; font-weight:900; font-size:15px;
  min-height:44px; padding:0 20px; cursor:pointer; font-family:inherit;
}
.leo-btn-primary{ background:linear-gradient(180deg,#4fc46a,#35a04e); color:#fff; box-shadow:0 3px 0 #27793a; }
.leo-btn-skip{ background:rgba(255,255,255,.9); color:#5a6b7d; }
.leo-btn:focus-visible{ outline:3px solid #ffd23f; outline-offset:2px; }
.leo-dots{ display:flex; gap:6px; }
.leo-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.45); }
.leo-dot.on{ background:#fff; }

/* ---- Coach Leo flat-vector quokka (built in JS, animated here) ---- */
.leo-pic{ display:block; }
.leo-svg{ width:118px; height:auto; display:block; filter:drop-shadow(0 7px 12px rgba(20,60,90,.28)); transform-origin:50% 90%; animation:leoBob 1.8s ease-in-out infinite; }
.leo-arm{ transform-origin:74px 60px; animation:leoWave 1.1s ease-in-out infinite; }
@keyframes leoBob{ 0%,100%{ transform:translateY(0) scale(1,1); } 50%{ transform:translateY(-5px) scale(1.02,.98); } }
@keyframes leoWave{ 0%,100%{ transform:rotate(6deg); } 50%{ transform:rotate(-24deg); } }

/* Accessibility: reduced motion — static Leo, instant transitions */
@media (prefers-reduced-motion: reduce){
  .leo-overlay,.leo-spot,.leo-card{ transition:none !important; }
  .leo-svg,.leo-arm{ animation:none !important; }
}
.leo-static .leo-svg,.leo-static .leo-arm{ animation:none !important; }
.leo-static .leo-overlay,.leo-static .leo-spot,.leo-static .leo-card{ transition:none !important; }

/* Replay-tour row injected into Settings */
.leo-replay-btn{
  display:flex; align-items:center; gap:8px; width:100%; min-height:44px;
  background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:15px; font-weight:700; color:var(--text,#26364a); padding:8px 2px;
}
.leo-replay-btn:focus-visible{ outline:3px solid #ffd23f; outline-offset:2px; border-radius:8px; }