/* ═══════════════════════════════════════════════════════════════
   OmicsLab — First-Run Guided Tour
   Spotlight: box-shadow cutout technique (no external library)
   ═══════════════════════════════════════════════════════════════ */

/* ── Backdrop ── */
/* The backdrop is actually rendered by the spotlight's box-shadow,
   so this overlay just blocks pointer events on covered areas. */
.tour-backdrop {
  position: fixed;
  inset: 0;
  z-index: 7999;
  cursor: default;
  /* Pointer events managed in JS — on by default to block bg clicks */
}

/* ── Spotlight "cutout" ── */
.tour-spotlight {
  position: fixed;
  z-index: 8001;
  border-radius: 10px;
  pointer-events: none;
  /* box-shadow creates the darkened overlay around the spotlight area.
     The element itself is transparent so the target shows through. */
  box-shadow:
    0 0 0 3px rgba(63, 185, 80, 0.5),     /* green outline ring  */
    0 0 0 9999px rgba(4, 7, 12, 0.80);    /* dark overlay everywhere else */
  background: transparent;
  opacity: 0;
  /* Animate position changes between steps */
  transition:
    top    0.42s cubic-bezier(0.22, 1, 0.36, 1),
    left   0.42s cubic-bezier(0.22, 1, 0.36, 1),
    width  0.42s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.25s ease,
    opacity 0.28s ease;
}
.tour-spotlight.visible { opacity: 1; }
/* Disable position transitions during scroll-based steps (set by JS) */
.tour-spotlight.no-transition {
  transition: opacity 0.28s ease !important;
}

/* Pulsing border on active step */
.tour-spotlight.visible {
  animation: spotPulse 2.5s ease-in-out infinite;
}
@keyframes spotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(63,185,80,0.5), 0 0 0 9999px rgba(4,7,12,0.80); }
  50%       { box-shadow: 0 0 0 5px rgba(63,185,80,0.7), 0 0 0 9999px rgba(4,7,12,0.80); }
}

/* ── Tooltip card ── */
.tour-tooltip {
  position: fixed;
  z-index: 8002;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 16px;
  padding: 1.4rem 1.5rem 1.3rem;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  opacity: 0;
  transition:
    top    0.42s cubic-bezier(0.22, 1, 0.36, 1),
    left   0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
  pointer-events: all;
  /* prevent overflow from touching screen edge */
  box-sizing: border-box;
}
.tour-tooltip.visible { opacity: 1; }
.tour-tooltip.no-transition {
  transition: opacity 0.28s ease !important;
}

/* Header row: progress dots + close */
.tour-tt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.tour-dots {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.tour-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: #30363d;
  transition: background 0.2s, width 0.2s;
}
.tour-dot.done   { background: rgba(63, 185, 80, 0.45); }
.tour-dot.active { background: #3fb950; width: 20px; }

.tour-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 7px;
  color: #6e7681;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
  padding: 0;
}
.tour-close-btn:hover { background: #30363d; color: #c9d1d9; }

/* Step label */
.tour-step-label {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #3fb950;
  margin-bottom: 0.35rem;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Title */
.tour-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #e6edf3;
  font-family: 'Sora', system-ui, sans-serif;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 0.55rem;
}

/* Body */
.tour-body {
  font-size: 0.85rem;
  color: #8b949e;
  line-height: 1.65;
  font-family: 'Inter', system-ui, sans-serif;
  margin: 0 0 1.2rem;
}

/* Actions row */
.tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.tour-skip-btn {
  background: none;
  border: none;
  color: #484f58;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  padding: 0;
  transition: color 0.15s;
  flex-shrink: 0;
}
.tour-skip-btn:hover { color: #8b949e; }

.tour-next-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  background: #3fb950;
  border: none;
  border-radius: 9px;
  color: #0d1117;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  font-family: 'Sora', system-ui, sans-serif;
  transition: background 0.15s, transform 0.1s;
  margin-left: auto;
}
.tour-next-btn:hover {
  background: #4ac95e;
  transform: translateY(-1px);
}

/* ── Directional arrow (points toward spotlight) ── */
.tour-arrow {
  position: absolute;
  left: 50%;
  width: 0; height: 0;
  border: 9px solid transparent;
  pointer-events: none;
}
/* Arrow pointing UP (tooltip is below spotlight) */
.tour-arrow-up {
  top: -17px;
  border-bottom-color: #30363d;
}
.tour-arrow-up::after {
  content: '';
  position: absolute;
  top: -7px; left: -7px;
  border: 7px solid transparent;
  border-bottom-color: #161b22;
}
/* Arrow pointing DOWN (tooltip is above spotlight) */
.tour-arrow-down {
  bottom: -17px;
  border-top-color: #30363d;
}
.tour-arrow-down::after {
  content: '';
  position: absolute;
  bottom: -7px; left: -7px;
  border: 7px solid transparent;
  border-top-color: #161b22;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .tour-tooltip { width: calc(100vw - 32px); left: 16px !important; }
  .tour-arrow   { display: none; }
  .tour-title   { font-size: 1rem; }
}