/* ==========================================================================
   Onboarding tour, a first-run spotlight walkthrough

   Runs the moment a brand-new account dismisses the "Welcome to Xoventra!"
   popup (either button), spotlighting the real Publish button, the real Feed
   tab bar, the real Deal Room tabs, not screenshots or mockups.

   Two elements only: a ring around the live target, and a small card
   explaining it. No full-page overlay element, the "everything else is
   dimmed" look is a single oversized box-shadow on the ring itself, which
   also means the ring has pointer-events:none and the real page underneath
   stays fully interactive while the tour is up.

   Runs on both Home (outside .dr-page) and the Deal Room (inside .dr-page),
   so, like the publish page and the edit modal, this carries literal brand
   values rather than the --dr-* custom properties.
   ========================================================================== */

.xvt-ring {
  position: fixed;
  z-index: 999990;
  border-radius: 14px;
  pointer-events: none;
  box-shadow:
    0 0 0 9999px rgba(6, 48, 63, 0.55),
    0 0 0 3px #026282,
    0 0 0 7px rgba(2, 98, 130, 0.22);
  transition:
    top 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .xvt-ring,
  .xvt-card {
    transition: none !important;
  }
}

.xvt-card {
  position: fixed;
  z-index: 999991;
  width: min(320px, calc(100vw - 24px));
  background: #fff;
  border-radius: 16px;
  padding: 18px 20px 16px;
  box-shadow:
    0 2px 6px rgba(14, 20, 23, 0.06),
    0 24px 48px -20px rgba(6, 48, 63, 0.5);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  transition:
    top 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.xvt-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.xvt-step-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a959b;
}

.xvt-close {
  border: 0;
  background: none;
  font-size: 19px;
  line-height: 1;
  color: #8a959b;
  cursor: pointer;
  padding: 2px 4px;
}

.xvt-close:hover {
  color: #026282;
}

.xvt-title {
  margin: 0 0 6px;
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  color: #06303f;
}

.xvt-body {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #33424a;
}

.xvt-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 14px;
}

.xvt-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e6f1f4;
  transition: width 0.2s ease, border-radius 0.2s ease;
}

.xvt-dot.is-current {
  width: 16px;
  border-radius: 4px;
  background: #026282;
}

.xvt-dot.is-done {
  background: #a9cdd8;
}

.xvt-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.xvt-btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(14, 20, 23, 0.14);
  background: #fff;
  color: #026282;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease;
}

.xvt-btn:hover {
  background: #e6f1f4;
}

.xvt-btn-primary {
  background: #06303f;
  border-color: #06303f;
  color: #fff;
}

.xvt-btn-primary:hover {
  background: #013f55;
}

@media (max-width: 480px) {
  .xvt-card {
    padding: 16px 16px 14px;
  }
}