/* tour.css — styles for the guided-tour engine (tour.js). Self-contained. */
.tour-root { position: fixed; inset: 0; z-index: 9000; }

/* Full-screen click catcher (blocks interaction with the app during the tour). */
.tour-block { position: absolute; inset: 0; }
.tour-root.tour-nofocus .tour-block { background: rgba(18, 20, 30, .55); }

/* The spotlight: a transparent box whose huge shadow dims everything around it. */
.tour-spot {
  position: fixed; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(18, 20, 30, .55), 0 0 0 2px rgba(255, 255, 255, .55);
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease, opacity .2s ease;
}

/* The info card. */
.tour-card {
  position: fixed; width: 360px; max-width: 360px; background: #fff; color: #20232b;
  border-radius: 12px; padding: 18px 18px 14px;
  box-shadow: 0 14px 40px rgba(20, 22, 30, .28);
  font-family: "Inter", system-ui, "Segoe UI", sans-serif;
  transition: left .25s ease, top .25s ease; animation: tour-pop .18s ease-out;
}
@keyframes tour-pop { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }

.tour-step { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #969ca7; }
.tour-title { margin: 6px 0 7px; font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  font-family: "Source Serif 4", Georgia, serif; }
.tour-body { margin: 0; font-size: 13px; line-height: 1.55; color: #4a4f5a; }

.tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.tour-grow { flex: 1; }
.tour-card button {
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
  padding: 6px 13px; border-radius: 6px; border: 1px solid #d8dbe1; background: #fff; color: #20232b;
  transition: background .14s, border-color .14s;
}
.tour-card button:hover { background: #f5f6f8; border-color: #c8ccd4; }
.tour-skip { border-color: transparent; color: #636974; padding: 6px 8px; }
.tour-skip:hover { background: #eceef1; }
.tour-next { background: #20232b; border-color: #20232b; color: #fff; }
.tour-next:hover { background: #14161d; border-color: #14161d; }