/* Coach marks: the app's first-run tour (build_app.py #tour) for the landing page.
   Everything dims except a gold-ringed cut-out around the target; the ring's 9999px
   shadow IS the dim, so the hole needs no clipping maths. The firefly talks in the
   cream bubble (bubble.css) beside it and never covers it. Built by js/components/coach.js. */
.db-coach{position:fixed;inset:0;z-index:1000;display:none;font-family:var(--db-font);-webkit-tap-highlight-color:transparent}
.db-coach.is-on{display:block}
.db-coach__dim{position:absolute;inset:0;background:rgba(8,10,30,.8)}
.db-coach.has-hole .db-coach__dim{display:none}
.db-coach__ring{position:fixed;left:0;top:0;width:0;height:0;display:none;border-radius:18px;pointer-events:none;
  box-shadow:0 0 0 3px var(--db-gold),0 0 20px 5px color-mix(in srgb,var(--db-gold) 42%,transparent),0 0 0 9999px rgba(8,10,30,.8);
  transition:left var(--m-dur) var(--m-ease),top var(--m-dur) var(--m-ease),width var(--m-dur) var(--m-ease),height var(--m-dur) var(--m-ease),border-radius var(--m-dur) var(--m-ease)}
.db-coach.has-hole .db-coach__ring{display:block}
.db-coach.is-scrolling .db-coach__ring{transition:none}
.db-coach__ring.is-pulse{animation:db-coach-pulse var(--m-dur-slow) ease-out}
@keyframes db-coach-pulse{
  0%{box-shadow:0 0 0 3px var(--db-gold),0 0 20px 5px color-mix(in srgb,var(--db-gold) 42%,transparent),0 0 0 0 color-mix(in srgb,var(--db-gold) 75%,transparent),0 0 0 9999px rgba(8,10,30,.8)}
  100%{box-shadow:0 0 0 3px var(--db-gold),0 0 20px 5px color-mix(in srgb,var(--db-gold) 42%,transparent),0 0 0 18px color-mix(in srgb,var(--db-gold) 0%,transparent),0 0 0 9999px rgba(8,10,30,.8)}}

/* the bubble: a .db-bubble placed by JS */
.db-coach__bub{position:fixed;left:0;top:0;width:400px;max-width:calc(100vw - 24px);margin:0}
.db-coach__bub.is-narrow{width:290px}
.db-coach__bub.is-pop{animation:db-coach-pop var(--m-dur) var(--m-ease) both}
@keyframes db-coach-pop{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.db-coach__bub .db-bubble__mascot.is-hop{animation:db-coach-hop var(--m-dur-slow) var(--m-ease-spring)}
@keyframes db-coach-hop{0%{transform:none}35%{transform:translateY(-10px) rotate(-7deg)}70%{transform:translateY(1px) rotate(1deg)}100%{transform:none}}
.db-coach__head{display:flex;align-items:flex-start;gap:8px}
.db-coach__head .db-bubble__title{flex:1;padding-top:2px}
.db-coach__skip{flex:none;min-height:44px;margin:-10px -9px -12px 0;padding:0 9px;border:0;background:none;cursor:pointer;
  color:var(--db-muted-light);font:600 .82rem var(--db-font);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(27,36,64,.4)}
.db-coach__bub .db-bubble__text{margin:.3rem 0 .55rem;color:var(--db-ink-light);opacity:.9}
.db-coach__foot{display:flex;align-items:center;gap:8px}
.db-coach__prog{display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;color:var(--db-muted-light);white-space:nowrap}
.db-coach__dots{display:flex;gap:4px}
.db-coach__dots i{width:6px;height:6px;border-radius:50%;background:rgba(27,36,64,.2)}
.db-coach__dots i.is-on{background:var(--db-gold-2)}
.db-coach__dots i.is-pop{animation:db-coach-dot var(--m-dur) var(--m-ease-spring)}
@keyframes db-coach-dot{0%{transform:scale(.4)}60%{transform:scale(1.6)}100%{transform:scale(1)}}
.db-coach__btns{margin-left:auto;display:flex;gap:7px}
.db-coach__btn{min-height:44px;min-width:44px;padding:0 17px;border:0;border-radius:var(--db-r-pill);cursor:pointer;white-space:nowrap;
  font:700 .95rem var(--db-font);transition:transform var(--m-dur-fast) var(--m-ease)}
.db-coach__btn:active{transform:scale(.94)}
.db-coach__btn--go{background:linear-gradient(135deg,var(--db-gold),var(--db-gold-2));color:var(--db-on-gold);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 8px 18px color-mix(in srgb,var(--db-gold-2) 30%,transparent)}
.db-coach__btn--ghost{background:rgba(27,36,64,.1);color:var(--db-ink-light)}
.db-coach__btn[hidden]{display:none}
.db-coach__btn:focus-visible,.db-coach__skip:focus-visible{outline:2px solid var(--db-ink-light);outline-offset:2px}
.db-coach__bub.is-narrow .db-coach__foot{flex-wrap:wrap;row-gap:2px}
.db-coach__bub.is-narrow .db-coach__dots{display:none}
.db-coach__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* the gold sparkle when the tour is finished */
.db-coach__spark{position:fixed;z-index:1001;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;pointer-events:none;
  background:var(--db-gold);box-shadow:0 0 8px color-mix(in srgb,var(--db-gold) 85%,transparent);animation:db-coach-spark calc(var(--m-dur-slow) * 1.4) ease-out forwards}
@keyframes db-coach-spark{0%{transform:translate(0,0) scale(.3);opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.7);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .db-coach__ring,.db-coach__bub,.db-coach__bub.is-pop,.db-coach__ring.is-pulse,
  .db-coach__bub .db-bubble__mascot.is-hop,.db-coach__dots i.is-pop,.db-coach__btn{transition:none!important;animation:none!important}
  .db-coach__spark{display:none!important}
}