/* =========================================================================
   FEATURE TOUR, shared, dependency-free guided "New features" walkthrough for
   the Cobbled Works field-service demos. Opt-in: a launcher pill the operator
   toggles when they want to show off what's new. Spotlights the best feature on
   each page, step by step; skip page-to-page, stop anytime. Drop this file +
   feature-tour.js into a demo's app/ folder and call FeatureTour.init({...}).

   Brand: Crisp Azure & Sunshine. Accent is --tour-accent (default pool azure),
   overridable per demo so the spotlight reads in that vertical's palette.
   ========================================================================= */

:root {
  --tour-accent: #2e8fe0;
  --tour-deep: #155faa;
  --tour-ink: #0e2638;
}

/* ---- Launcher pill (the opt-in "switch") -------------------------------- */
.ftour-launch {
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px 10px 12px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--tour-deep), var(--tour-accent));
  color: #fff;
  font: 700 12px/1 ui-sans-serif, system-ui, -apple-system, "Inter", sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 10px 26px -10px rgba(21, 95, 170, 0.7), 0 2px 6px rgba(14, 38, 92, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.25s ease;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.ftour-launch.is-ready {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.ftour-launch:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -10px rgba(21, 95, 170, 0.8);
}
.ftour-launch:active {
  transform: scale(0.97);
}
.ftour-launch .ftour-spark {
  display: inline-flex;
  width: 15px;
  height: 15px;
  line-height: 1;
}
.ftour-launch .ftour-spark svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* "New" pip when the tour has never been taken on this device. */
.ftour-launch .ftour-pip {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #ffc53d;
  box-shadow: 0 0 0 2px #fff;
}
.ftour-launch.is-seen .ftour-pip {
  display: none;
}

/* ---- Overlay + spotlight ----------------------------------------------- */
.ftour-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  /* The dim is painted by a huge ring shadow on the spotlight, so taps on the
     rest of the page are caught here while the cutout stays clear. */
}
.ftour-overlay:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: auto;
}
.ftour-spot {
  position: absolute;
  border-radius: 14px;
  box-shadow:
    0 0 0 3px var(--tour-accent),
    0 0 0 9999px rgba(8, 23, 41, 0.62);
  transition: all 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.ftour-spot.is-center {
  box-shadow: 0 0 0 9999px rgba(8, 23, 41, 0.62);
}

/* ---- Tooltip card ------------------------------------------------------- */
.ftour-card {
  position: absolute;
  z-index: 2147483601;
  width: min(330px, calc(100vw - 28px));
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(21, 95, 170, 0.18);
  box-shadow: 0 24px 60px -20px rgba(8, 23, 41, 0.65);
  overflow: hidden;
  transition: top 0.3s cubic-bezier(0.22, 1, 0.36, 1), left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ftour-card-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--tour-deep), var(--tour-accent), #ffc53d);
}
.ftour-card-body {
  padding: 15px 16px 14px;
}
.ftour-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 10px/1 ui-monospace, "JetBrains Mono", monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tour-deep);
}
.ftour-count {
  color: #6b7b8c;
  letter-spacing: 0.14em;
}
.ftour-title {
  margin: 8px 0 0;
  font: 700 19px/1.25 "Playfair Display", Georgia, serif;
  color: var(--tour-ink);
}
.ftour-title em {
  font-style: normal;
  color: var(--tour-accent);
}
.ftour-text {
  margin: 6px 0 0;
  font: 400 13.5px/1.5 ui-sans-serif, system-ui, -apple-system, "Inter", sans-serif;
  color: #45596b;
}
.ftour-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.ftour-btn {
  border: 1px solid rgba(21, 95, 170, 0.2);
  background: #fff;
  color: var(--tour-deep);
  border-radius: 999px;
  padding: 8px 14px;
  font: 700 11px/1 ui-sans-serif, system-ui, "Inter", sans-serif;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.ftour-btn:hover {
  border-color: var(--tour-accent);
}
.ftour-btn:active {
  transform: scale(0.96);
}
.ftour-btn[disabled] {
  opacity: 0.4;
  cursor: default;
}
.ftour-btn--primary {
  background: var(--tour-deep);
  border-color: var(--tour-deep);
  color: #fff;
}
.ftour-btn--primary:hover {
  background: var(--tour-accent);
}
.ftour-spacer {
  flex: 1;
}
.ftour-skip {
  background: none;
  border: 0;
  color: #6b7b8c;
  font: 600 11px/1 ui-sans-serif, system-ui, "Inter", sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 6px 4px;
}
.ftour-skip:hover {
  color: var(--tour-ink);
}
.ftour-close {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(14, 38, 92, 0.06);
  color: #45596b;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.ftour-close:hover {
  background: rgba(14, 38, 92, 0.12);
  color: var(--tour-ink);
}

/* The launcher's secondary line. */
.ftour-launch-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.ftour-launch-sub {
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ftour-spot,
  .ftour-card,
  .ftour-launch {
    transition: none;
  }
}