/* ── Onboarding: coach marks + guided tour ────────────────────────────────────
   Both float above everything, so both are built from tokens rather than the panel styles —
   they sit on top of the map as often as on the sidebar and cannot inherit either. */

/* ── Coach mark: one tip, anchored, non-blocking ───────────────────────────── */
#sc-coach{position:fixed;z-index:6000;width:288px;display:none;
  background:var(--glass-bg);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid var(--teal-border);border-radius:var(--r-xl);box-shadow:var(--e4);
  padding:var(--s4) var(--s5) var(--s3)}
#sc-coach.visible{display:block;animation:scPop .22s cubic-bezier(.2,.8,.2,1) both}
/* A small pointer, flipped when the tip sits above its target rather than below. */
#sc-coach::before{content:'';position:absolute;top:-6px;left:22px;width:11px;height:11px;
  background:var(--glass-bg);border-left:1px solid var(--teal-border);border-top:1px solid var(--teal-border);
  transform:rotate(45deg)}
#sc-coach.flip::before{top:auto;bottom:-6px;transform:rotate(225deg)}
.sc-coach-t{font-size:var(--t-base);font-weight:700;color:var(--teal);margin-bottom:4px}
.sc-coach-x{font-size:var(--t-sm);color:var(--text-muted);line-height:1.5}
.sc-coach-acts{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3)}
.sc-coach-off{margin-right:auto;background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:var(--t-2xs);color:var(--text-faint);text-decoration:underline}
.sc-coach-off:hover{color:var(--text-muted)}
.sc-coach-ok{background:var(--brand-grad);border:none;border-radius:var(--r-md);color:#fff;
  font-family:inherit;font-size:var(--t-sm);font-weight:600;padding:5px 14px;cursor:pointer}
.sc-coach-ok:hover{filter:brightness(1.08)}
/* The thing being pointed at gets a ring, so the tip and its subject read as one object. */
.sc-coach-target{outline:2px solid var(--teal);outline-offset:3px;border-radius:var(--r-md)}

/* ── Guided tour ───────────────────────────────────────────────────────────── */
#sc-tour{position:fixed;inset:0;z-index:7000;display:none;pointer-events:none}
#sc-tour.visible{display:block}
/* The spotlight. One element with an enormous spread shadow dims everything outside it —
   cheaper and sharper than four framing divs, and it animates smoothly between targets. */
#sc-tour-hole{position:fixed;border-radius:var(--r-lg);pointer-events:none;
  box-shadow:0 0 0 9999px rgba(6,12,20,.72),0 0 0 2px var(--teal),0 0 22px rgba(45,212,170,.45);
  transition:left .28s cubic-bezier(.2,.8,.2,1),top .28s cubic-bezier(.2,.8,.2,1),
             width .28s cubic-bezier(.2,.8,.2,1),height .28s cubic-bezier(.2,.8,.2,1)}
#sc-tour-card{position:fixed;width:334px;max-width:calc(100vw - 24px);pointer-events:auto;
  background:var(--navy);border:1px solid var(--divider);border-radius:var(--r-xl);
  box-shadow:var(--e4);padding:var(--s5) var(--s5) var(--s4);
  transition:left .28s cubic-bezier(.2,.8,.2,1),top .28s cubic-bezier(.2,.8,.2,1)}
/* Opening and closing steps have no anchor, so the card takes the middle of the screen and the
   scrim is drawn by the card's own backdrop instead of the spotlight. */
#sc-tour-card.centred{left:50%!important;top:50%!important;transform:translate(-50%,-50%);width:390px}
#sc-tour-card.centred::after{content:'';position:fixed;inset:0;z-index:-1;background:rgba(6,12,20,.72)}
#sc-tour-x{position:absolute;top:10px;right:10px;background:none;border:none;cursor:pointer;
  color:var(--text-faint);font-size:var(--t-base);line-height:1;padding:4px}
#sc-tour-x:hover{color:var(--text)}
#sc-tour-step{font-size:var(--t-3xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--teal)}
#sc-tour-t{font-size:var(--t-lg);font-weight:700;color:var(--text);margin:3px 0 6px;line-height:1.25}
#sc-tour-x2{font-size:var(--t-sm);color:var(--text-muted);line-height:1.55}
#sc-tour-x2 strong{color:var(--text)}
#sc-tour-dots{display:flex;gap:4px;margin:var(--s4) 0 var(--s3)}
#sc-tour-dots i{flex:1;height:3px;border-radius:2px;background:var(--divider);transition:background .2s}
#sc-tour-dots i.done{background:var(--teal-border)}
#sc-tour-dots i.on{background:var(--teal)}
#sc-tour-acts{display:flex;gap:var(--s2);justify-content:flex-end}
.sc-t-btn{font-family:inherit;font-size:var(--t-sm);font-weight:600;padding:7px 16px;cursor:pointer;
  border-radius:var(--r-md);border:1px solid var(--divider);background:transparent;color:var(--text-muted)}
.sc-t-btn:hover{border-color:var(--teal);color:var(--teal)}
.sc-t-primary{background:var(--brand-grad);border:none;color:#fff}
.sc-t-primary:hover{filter:brightness(1.08);color:#fff}
#sc-tour-off{display:flex;align-items:center;gap:6px;margin-top:var(--s3);
  font-size:var(--t-2xs);color:var(--text-faint);cursor:pointer}
#sc-tour-off input{accent-color:var(--teal)}
@keyframes scPop{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#sc-tour-hole,#sc-tour-card{transition:none}#sc-coach.visible{animation:none}}