/* =========================================================================
   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;
}
/* While the tour is running the launcher is not an option, it is clutter: it
   floats over the walkthrough it already started, and at the bottom left it
   lands right on top of the card's own Skip control. Hide it for the duration
   and bring it back when the tour stops. */
body.ftour-running .ftour-launch {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

/* ---- Arrival: the welcome, then the pointer ----------------------------
   Two beats before the tour. The welcome says what this is and asks for two
   minutes; it clears itself after a short pause. Then an arrow floats next to
   the tour button and keeps emphasizing itself until it is taken or closed. */
.ftour-welcome-scrim {
  position: fixed;
  inset: 0;
  z-index: 2147483200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background: radial-gradient(120% 100% at 50% 0%, rgba(8, 20, 38, 0.62), rgba(6, 14, 28, 0.86));
  backdrop-filter: blur(3px) saturate(115%);
  -webkit-backdrop-filter: blur(3px) saturate(115%);
  opacity: 0;
  transition: opacity 0.42s ease;
}
.ftour-welcome-scrim.is-in { opacity: 1; }
.ftour-welcome {
  position: relative;
  width: min(520px, 100%);
  padding: 30px 30px 26px;
  border-radius: 22px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 197, 61, 0.16), transparent 62%),
    linear-gradient(160deg, var(--tour-deep, #0E2638), color-mix(in srgb, var(--tour-accent, #2E8FE0) 24%, #0E2638));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 40px 80px -28px rgba(4, 12, 26, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: #fff;
  transform: translateY(16px) scale(0.985);
  transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.28, 1);
}
.ftour-welcome-scrim.is-in .ftour-welcome { transform: none; }
.ftour-welcome-eyebrow {
  display: block;
  font: 700 11px/1 ui-monospace, SFMono-Regular, "JetBrains Mono", monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FFC53D;
  margin-bottom: 12px;
}
.ftour-welcome-title {
  margin: 0 0 12px;
  font: 600 clamp(23px, 4.6vw, 30px)/1.18 ui-serif, Georgia, "Playfair Display", serif;
  letter-spacing: -0.01em;
}
.ftour-welcome-title em {
  font-style: normal;
  color: #FFC53D;
  font-weight: 700;
}
.ftour-welcome-body {
  margin: 0 0 22px;
  font: 400 15px/1.62 ui-sans-serif, system-ui, -apple-system, "Inter", sans-serif;
  color: rgba(255, 255, 255, 0.82);
  max-width: 42ch;
}
.ftour-welcome-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.ftour-welcome-go,
.ftour-welcome-skip {
  font: 700 14px/1 ui-sans-serif, system-ui, -apple-system, "Inter", sans-serif;
  border-radius: 999px;
  cursor: pointer;
  padding: 13px 22px;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease;
}
.ftour-welcome-go {
  color: #0E2638;
  background: linear-gradient(135deg, #FFD979, #FFC53D);
  box-shadow: 0 14px 28px -12px rgba(255, 197, 61, 0.85);
}
.ftour-welcome-go:hover { transform: translateY(-1px); }
.ftour-welcome-go:active { transform: scale(0.98); }
.ftour-welcome-skip {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
.ftour-welcome-skip:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
.ftour-welcome-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.ftour-welcome-x:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* The pointer. Sits just above the launcher in its bottom-left corner and
   floats; every few seconds it swells once so it cannot be tuned out. */
.ftour-point {
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 46px);
  z-index: 2147482900;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  color: #FFC53D;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.36s ease, transform 0.36s ease;
}
.ftour-point.is-in {
  opacity: 1;
  transform: none;
  animation: ftour-float 3.1s ease-in-out infinite;
}
/* The arrow hangs BELOW the bubble and points straight down at the button, so
   the line from "start here" to the thing you press is one unbroken gesture.
   Nudged right so its head lands over the pill's icon rather than its edge. */
.ftour-point-arrow {
  width: 42px;
  height: 54px;
  flex: none;
  margin: -2px 0 0 22px;
  filter: drop-shadow(0 6px 14px rgba(255, 197, 61, 0.4));
}
.ftour-point-bubble {
  max-width: 218px;
  padding: 12px 14px 10px;
  border-radius: 14px;
  background: linear-gradient(150deg, #123A5C, #0E2638);
  border: 1px solid rgba(255, 197, 61, 0.5);
  box-shadow: 0 20px 40px -18px rgba(4, 12, 26, 0.9);
  color: #fff;
  font: 400 12.5px/1.45 ui-sans-serif, system-ui, -apple-system, "Inter", sans-serif;
}
.ftour-point-bubble b {
  display: block;
  font-size: 13.5px;
  color: #FFC53D;
  margin-bottom: 2px;
}
.ftour-point-bubble span { display: block; color: rgba(255, 255, 255, 0.76); }
.ftour-point-x {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.52);
  font: 600 11.5px/1 inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ftour-point-x:hover { color: #fff; }
@keyframes ftour-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
/* The periodic swell on the button the arrow points at. */
.ftour-launch.is-called-out {
  animation: ftour-callout 3.1s ease-in-out infinite;
}
@keyframes ftour-callout {
  0%, 62%, 100% {
    transform: none;
    box-shadow: 0 10px 26px -10px rgba(21, 95, 170, 0.7), 0 0 0 0 rgba(255, 197, 61, 0.5);
  }
  74% {
    transform: scale(1.06);
    box-shadow: 0 14px 32px -10px rgba(21, 95, 170, 0.8), 0 0 0 12px rgba(255, 197, 61, 0);
  }
  68% {
    transform: scale(1.06);
    box-shadow: 0 14px 32px -10px rgba(21, 95, 170, 0.8), 0 0 0 0 rgba(255, 197, 61, 0.45);
  }
}
@media (max-width: 520px) {
  .ftour-point-bubble { max-width: 200px; font-size: 12px; }
  .ftour-point-arrow { width: 34px; height: 44px; margin-left: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ftour-point.is-in,
  .ftour-launch.is-called-out { animation: none; }
  .ftour-welcome { transition: 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;
  }
}