/* =========================================================================
   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 {
  font-size: 14px;
  line-height: 1;
}
/* "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);
}

/* ---- Mobile-first: dock the card as a compact bottom sheet -------------- */
/* On a phone the card is a fixed sheet at the bottom (JS adds .ftour-card--dock
   below 640px) instead of a floating tooltip — so it never sits on top of the
   element it's describing. JS keeps the spotlight in the clear band above it.
   Tighter type keeps the sheet short so most of the screen stays visible. */
.ftour-card--dock {
  position: fixed;
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  top: auto;
  width: auto;
  max-height: 50vh;
  overflow-y: auto;
  border-radius: 18px;
  box-shadow: 0 -10px 40px -12px rgba(8, 23, 41, 0.55), 0 18px 50px -18px rgba(8, 23, 41, 0.6);
  /* The sheet is anchored top/bottom by class, not glided — kill the float
     tooltip's top/left transition so a top⇄bottom flip is instant, never a
     mid-flight frame that overlaps the spotlight. */
  transition: none;
}
/* Flip the sheet to the top when the spotlight target lives at the bottom of
   the screen (a fixed FAB scrolling can't lift), so it's never covered. */
.ftour-card--dock.ftour-card--top {
  top: max(10px, env(safe-area-inset-top));
  bottom: auto;
}
.ftour-card--dock .ftour-card-body {
  padding: 13px 15px 13px;
}
.ftour-card--dock .ftour-title {
  font-size: 17px;
  line-height: 1.22;
}
.ftour-card--dock .ftour-text {
  font-size: 13px;
  line-height: 1.45;
}
.ftour-card--dock .ftour-actions {
  margin-top: 12px;
}
/* keep the action row on one line on the narrowest phones */
.ftour-card--dock .ftour-btn {
  padding: 9px 13px;
}
.ftour-card--dock .ftour-skip {
  padding: 6px 2px;
}

/* 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;
  }
}

/* While the guided tour drives the pages, swap them instantly — no per-view
   entrance slide — so pressing Next jumps to the next section with zero lag and
   the spotlight isn't chasing an animating target. Base state is fully visible,
   so this is never a blank page. */
body.ftour-running .view,
body.ftour-running .proof-page {
  animation: none !important;
}