/* ComTrack guided tour (coach-marks / spotlight). Self-hosted, no dependencies.
   Theme-aware: light by default, dark under html.dark (the app's theme flag). */

#ct-tour { position: fixed; inset: 0; z-index: 99990; }
#ct-tour[hidden] { display: none; }

/* 4-panel mask: dims everything EXCEPT the target rectangle (the "hole"),
   and blocks clicks on the dimmed area while the target stays live. */
.ct-mask {
  position: fixed;
  background: rgba(15, 23, 42, 0.55);
  z-index: 99991;
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease, opacity .2s ease;
  pointer-events: auto;
}
html.dark .ct-mask { background: rgba(2, 6, 23, 0.72); }

/* highlight ring around the hole */
.ct-ring {
  position: fixed;
  z-index: 99992;
  border: 2px solid #3b82f6;
  border-radius: 12px;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.28), 0 8px 30px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  transition: all .25s ease;
}

/* the popover */
.ct-pop {
  position: fixed;
  z-index: 99993;
  width: min(348px, 92vw);
  background: #ffffff;
  color: #0f172a;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(2, 6, 23, 0.35);
  padding: 18px 18px 14px;
  transition: top .25s ease, left .25s ease;
  font: 400 13.5px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html.dark .ct-pop { background: #0f1620; color: #e2e8f0; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); }

.ct-pop-kicker { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #2563eb; margin: 0 0 6px; }
html.dark .ct-pop-kicker { color: #60a5fa; }
.ct-pop-title { font-size: 15.5px; font-weight: 700; margin: 0 0 7px; line-height: 1.3; }
.ct-pop-body { margin: 0; color: #475569; }
html.dark .ct-pop-body { color: #a9b4c2; }
.ct-pop-body b { color: inherit; }

.ct-cta { margin: 10px 0 0; font-size: 12px; font-weight: 600; color: #2563eb; display: flex; align-items: center; gap: 6px; }
.ct-cta::before { content: "👆"; }
html.dark .ct-cta { color: #60a5fa; }
/* pulse the ring when the step needs a click */
@keyframes ct-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(59,130,246,.28), 0 8px 30px rgba(0,0,0,.25); } 50% { box-shadow: 0 0 0 7px rgba(59,130,246,.16), 0 8px 30px rgba(0,0,0,.25); } }
.ct-ring.ct-pulse { animation: ct-pulse 1.4s ease-in-out infinite; }

.ct-pop-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.ct-count { font-size: 12px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.ct-spacer { flex: 1; }

.ct-btn {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border-radius: 9px; padding: 8px 14px; min-height: 38px; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.ct-btn:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.ct-primary { background: #2563eb; color: #fff; }
.ct-primary:hover { background: #1d4ed8; }
.ct-ghost { background: transparent; color: #334155; border-color: #cbd5e1; }
.ct-ghost:hover { background: #f1f5f9; }
html.dark .ct-ghost { color: #cbd5e1; border-color: #334155; }
html.dark .ct-ghost:hover { background: #1e293b; }
.ct-skip { background: transparent; color: #94a3b8; border: 0; padding: 8px 6px; font-weight: 500; }
.ct-skip:hover { color: #64748b; text-decoration: underline; }
html.dark .ct-skip:hover { color: #cbd5e1; }

/* progress dots */
.ct-dots { display: flex; gap: 5px; margin-top: 12px; }
.ct-dot { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; transition: background .2s ease, width .2s ease; }
.ct-dot.on { background: #2563eb; width: 16px; border-radius: 3px; }
html.dark .ct-dot { background: #334155; }
html.dark .ct-dot.on { background: #60a5fa; }

/* the account-menu launcher item mirrors the app's own menu items */
#ct-launch { cursor: pointer; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ct-mask, .ct-ring, .ct-pop { transition: none; }
}