/* Guided product tour — a spotlight overlay + popover that walks a new user through the
   workspace modules (Home · Dashboard · Director Studio · Storyboard · Films · Files · Analytics)
   and the key actions. Self-contained, no external library. */

#tourOverlay { position: fixed; inset: 0; z-index: 90; }
#tourOverlay[hidden] { display: none !important; }

/* dim everything except the spotlight (four panels around the highlighted rect) */
.tour-dim {
  position: fixed; background: rgba(8, 20, 15, 0.62);
  transition: all .22s cubic-bezier(.4, 0, .2, 1);
}
.tour-ring {
  position: fixed; border-radius: 14px; box-shadow: 0 0 0 3px #16a06a, 0 0 0 9px rgba(22, 160, 106, 0.25);
  transition: all .22s cubic-bezier(.4, 0, .2, 1); pointer-events: none;
}

#tourPop {
  position: fixed; z-index: 92; width: min(340px, calc(100vw - 32px));
  background: #fff; border-radius: 16px; border: 1px solid rgba(16, 41, 31, 0.1);
  box-shadow: 0 18px 50px -12px rgba(8, 20, 15, 0.5); padding: 18px 18px 14px;
  font-family: 'Poppins', -apple-system, sans-serif; color: #12241c;
  transition: top .22s cubic-bezier(.4, 0, .2, 1), left .22s cubic-bezier(.4, 0, .2, 1);
}
#tourPop .tp-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #16a06a; margin: 0 0 6px;
}
#tourPop h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; line-height: 1.25; }
#tourPop p { font-size: 0.86rem; line-height: 1.55; color: #4a6a5b; margin: 0 0 14px; }
#tourPop .tp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#tourPop .tp-dots { display: flex; gap: 5px; }
#tourPop .tp-dot { width: 6px; height: 6px; border-radius: 50%; background: #d2ded8; }
#tourPop .tp-dot.on { background: #10794f; width: 16px; border-radius: 3px; }
#tourPop .tp-btns { display: flex; align-items: center; gap: 8px; }
#tourPop button { font-size: 0.8rem; font-weight: 600; border-radius: 9px; padding: 7px 14px; cursor: pointer; transition: all .15s ease; }
#tourPop .tp-skip { background: transparent; color: #8fa397; padding: 7px 6px; }
#tourPop .tp-skip:hover { color: #4a6a5b; }
#tourPop .tp-back { background: #f0f5f2; color: #12241c; }
#tourPop .tp-back:hover { background: #e2ece6; }
#tourPop .tp-next { background: #10794f; color: #fff; }
#tourPop .tp-next:hover { background: #16a06a; }
/* little arrow pointing at the target */
#tourPop::before {
  content: ""; position: absolute; width: 12px; height: 12px; background: #fff;
  border: 1px solid rgba(16, 41, 31, 0.1); transform: rotate(45deg);
}
#tourPop[data-side="right"]::before { left: -7px; top: 24px; border-right: 0; border-bottom: 0; }
#tourPop[data-side="left"]::before { right: -7px; top: 24px; border-left: 0; border-top: 0; }
#tourPop[data-side="top"]::before { bottom: -7px; left: 28px; border-left: 0; border-top: 0; }
#tourPop[data-side="bottom"]::before { top: -7px; left: 28px; border-right: 0; border-bottom: 0; }
#tourPop[data-side="center"]::before { display: none; }

/* floating "Take a tour" launcher */
#tourLauncher {
  position: fixed; right: 18px; bottom: 18px; z-index: 45;
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px;
  background: #0e241b; color: #fff; font-family: 'Poppins', sans-serif; font-size: 0.8rem; font-weight: 600;
  box-shadow: 0 10px 26px -8px rgba(8, 20, 15, 0.55); cursor: pointer; border: 1px solid rgba(255,255,255,0.08);
  transition: transform .15s ease, background .15s ease;
}
#tourLauncher:hover { transform: translateY(-1px); background: #143225; }
#tourLauncher svg { width: 15px; height: 15px; }
@media (max-width: 640px) { #tourLauncher span { display: none; } #tourLauncher { padding: 11px; } }