/* Guide chrome. The first-open tour lives here so another lab can copy
   guide.js and guide.css and keep the same card, dots, and spotlight. */
.tour-layer { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.tour-layer[hidden] { display: none !important; }
.tour-hole {
  position: fixed;
  z-index: 91;
  border-radius: 18px;
  pointer-events: none;
  box-shadow:
    0 0 0 3px #fde047,
    0 0 0 7px rgba(34, 211, 238, 0.95),
    0 0 22px 4px rgba(34, 211, 238, 0.7),
    0 0 0 9999px rgba(27, 19, 64, 0.28);
}
.tour-card {
  position: fixed;
  z-index: 92;
  pointer-events: auto;
  left: 50%;
  right: auto;
  width: min(440px, calc(100vw - 24px));
  transform: translateX(-50%);
  max-height: min(240px, calc(100vh - 120px));
  max-height: min(240px, calc(100dvh - 120px));
  overflow: auto;
  padding: 16px 16px 14px;
  border-radius: 22px;
  border: 3px solid transparent;
  color: #1b1340;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg, #22d3ee, #a78bfa, #f472b6) border-box;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
html[data-theme="aurora"] .tour-card {
  color: #f8fafc;
  background:
    linear-gradient(#141a30, #0e1324) padding-box,
    linear-gradient(120deg, #22d3ee, #a78bfa, #f472b6) border-box;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.tour-kicker {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5b21b6;
}
html[data-theme="aurora"] .tour-kicker { color: #c4b5fd; }
.tour-lead { min-width: 0; }
.tour-card p { margin: 0 0 12px; line-height: 1.45; }
.tour-actions { display: block; }
.tour-dots {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}
.tour-card .tour-dot {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 50%;
  background: #e0e7ff;
  color: #312e81;
  box-shadow: none;
}
.tour-card .tour-dot.is-done { background: #c4b5fd; color: #1e1b4b; }
.tour-card .tour-dot.is-on {
  background: linear-gradient(140deg, #22d3ee, #a78bfa);
  color: #082f49;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.85);
}
.tour-card .row { display: flex; gap: 8px; flex-wrap: wrap; }
.tour-card button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 999px;
  min-height: 40px;
  padding: 0 16px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.tour-card [data-next] {
  background: linear-gradient(120deg, #22d3ee, #818cf8);
  color: #082f49;
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.55);
}
.tour-card [data-back],
.tour-card [data-skip] {
  background: #ede9fe;
  color: #3b0764;
}
.tour-card [data-back]:disabled {
  opacity: 0.5;
  cursor: default;
}
.tour-card button:focus-visible {
  outline: 3px solid #082f49;
  outline-offset: 2px;
}
html[data-theme="aurora"] .tour-card button:focus-visible { outline-color: #fde047; }
@media (max-width: 800px) {
  .tour-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    width: min(440px, calc(100vw - 24px));
    max-height: none;
    overflow: hidden;
    padding: 8px 10px;
    z-index: 93;
  }
  .tour-lead { display: block; flex: none; }
  .tour-card.is-capped .tour-lead { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .tour-kicker,
  .tour-card .tour-lead p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.25;
  }
  .tour-kicker { margin-bottom: 2px; }
  .tour-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex: none;
  }
  .tour-dots { margin: 0; gap: 4px; flex: none; }
  .tour-card .tour-dot {
    width: 22px;
    height: 22px;
    min-height: 22px;
    font-size: 0.68rem;
  }
  .tour-card .row { flex-wrap: nowrap; gap: 4px; margin: 0; }
  .tour-card .row button {
    min-height: 32px;
    padding: 0 8px;
    font-size: 0.75rem;
  }
  .phone-bar, .bot-dock:not(.is-open) { pointer-events: auto; }
}
.bot-dock[hidden] { display: none !important; }
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Draggable monkey (guide/dragbot.js) */
.bot-dock { perspective: 700px; }
.monkey-btn { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transform-origin: 50% 60%; transition: transform 0.18s ease-out; will-change: transform; }
.bot-dock.is-snapping { transition: left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.bot-dock.is-lifted .monkey-btn { cursor: grabbing; }
.bot-shadow { position: absolute; left: 14%; right: 14%; bottom: -2px; height: 14px; border-radius: 50%; background: rgba(15, 10, 40, 0.45); filter: blur(5px); pointer-events: none; z-index: -1; transform-origin: 50% 50%; transition: transform 0.2s ease-out, opacity 0.2s ease-out; opacity: 0.7; }
.bot-dock.is-lifted .bot-shadow { transform: translateY(14px) scale(0.7); opacity: 0.35; }
.bot-dock.is-open .bot-shadow, .bot-dock.is-open .bot-reset { display: none; }
.bot-reset { position: absolute; top: 0; left: 0; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 2px solid #22d3ee; border-radius: 50%; background: #fff; color: #1b1340; font: 800 15px/1 inherit; cursor: pointer; z-index: 2; }
.bot-reset[hidden] { display: none; }
.bot-reset:focus-visible { outline: 3px solid #082f49; outline-offset: 2px; }
@media (max-width: 800px) { .bot-dock:not(.is-open) .bot-reset { top: -6px; left: 0; } }
@media (prefers-reduced-motion: reduce) {
  .monkey-btn, .bot-shadow { transition: none; }
  .bot-dock.is-snapping { transition: none; }
}
html[data-motion="reduce"] .monkey-btn, html[data-motion="reduce"] .bot-shadow, html[data-motion="reduce"] .bot-dock.is-snapping { transition: none; }
body.drawer-open .bot-dock, body.drawer-open .tour-layer { visibility: hidden; }