/* Coach marks (web/js/ui/coach.js, founder rule 2026-11-08): a soft dim with a gold-ringed spotlight on the target, a
   cream ticket bubble with an arrow touching it, one sentence, "2 of 5", Skip and a gold 3D Next. Above sheets (41),
   below toasts (60). Motion: the spotlight glides between steps, the bubble springs out of its arrow; reduced motion or
   Effects off (html[data-motion] not "full") = instant. */
.coach { position: fixed; inset: 0; z-index: 55; opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.coach.on { opacity: 1; }
.coach.out { opacity: 0; transition-duration: var(--dur-exit); pointer-events: none; }
.coach-catch { position: absolute; inset: 0; }
.coach-hole {
  position: fixed; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(242, 178, 51, .95), 0 0 22px 4px rgba(242, 178, 51, .35), 0 0 0 200vmax rgba(5, 8, 16, .66);
  transition: left var(--dur-slow) var(--ease-out), top var(--dur-slow) var(--ease-out), width var(--dur-slow) var(--ease-out), height var(--dur-slow) var(--ease-out);
}
.coach.on .coach-hole { animation: coach-breathe 2.8s ease-in-out infinite; }
@keyframes coach-breathe {
  50% { box-shadow: 0 0 0 3px rgba(242, 178, 51, .95), 0 0 30px 8px rgba(242, 178, 51, .22), 0 0 0 200vmax rgba(5, 8, 16, .66); }
}
.coach-arrow {
  position: fixed; width: 22px; height: 12px; background: var(--cream); pointer-events: none; z-index: 1;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transition: left var(--dur) var(--ease-out), top var(--dur) var(--ease-out);
}
.coach-arrow[data-place="above"] { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.coach-bubble {
  position: fixed; box-sizing: border-box; padding: var(--s4) var(--s4) var(--s3);
  background: var(--cream); color: var(--text-inverse); border-radius: 18px;
  box-shadow: 0 5px 0 var(--gold-edge), 0 18px 40px rgba(0, 0, 0, .45);
  transform-origin: var(--coach-ox, 50%) 0; outline: none;
}
.coach-bubble[data-place="above"] { transform-origin: var(--coach-ox, 50%) 100%; }
.coach-bubble.in { animation: coach-pop var(--dur-pop) var(--ease-spring) both; }
@keyframes coach-pop { from { opacity: 0; transform: translateY(6px) scale(.86); } to { opacity: 1; transform: none; } }
.coach-bubble[data-place="above"].in { animation-name: coach-pop-up; }
@keyframes coach-pop-up { from { opacity: 0; transform: translateY(-6px) scale(.86); } to { opacity: 1; transform: none; } }
.coach-text { margin: 0; font: 700 var(--fs-lg)/1.3 var(--font-display); letter-spacing: .005em; text-wrap: pretty; }
.coach-foot { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.coach-count { flex: 1; font: 700 var(--fs-xs)/1 var(--font-display); color: var(--red); letter-spacing: .08em; text-transform: uppercase; }
.coach-skip {
  min-height: 44px; padding: 0 var(--s3); border: 0; background: none; color: #5b6275;
  font: 600 var(--fs-sm)/1 var(--font-body); cursor: pointer; border-radius: 10px;
}
.coach-skip:hover { color: var(--text-inverse); }
.coach-skip:focus-visible, .coach-next:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.coach-next { min-height: 44px; min-width: 92px; }

html:not([data-motion="full"]) :is(.coach, .coach-hole, .coach-arrow, .coach-bubble) { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  :is(.coach, .coach-hole, .coach-arrow, .coach-bubble) { transition: none !important; animation: none !important; }
}