/* =====================================================================
   Makyn Guided Walkthrough — engine styles
   Reusable across every demo (CRM, and later HCM / Marketing Automation).
   Deliberately uses Makyn's own brand system (navy / blue / Inter) rather
   than the visual language of whatever demo it's layered on top of, so it
   reads as "Makyn is guiding you" rather than blending into the client
   demo's own UI.

   Namespacing: every class is prefixed `mktour-` so nothing here can
   collide with the host demo's own CSS.
   ===================================================================== */

:root {
  --mktour-navy-900: #0B1220;
  --mktour-navy-800: #0F172A;
  --mktour-navy-700: #1E293B;
  --mktour-blue-600: #0284C7;
  --mktour-blue-700: #0369A1;
  --mktour-blue-100: #E0F2FE;
  --mktour-teal-500: #14B8A6;
  --mktour-white: #FFFFFF;
  --mktour-off-white: #F8FAFC;
  --mktour-gray-200: #E2E8F0;
  --mktour-text-secondary: #475569;
  --mktour-text-muted: #64748B;
  --mktour-radius-sm: 6px;
  --mktour-radius-md: 12px;
  --mktour-radius-lg: 16px;
  --mktour-shadow-card: 0 20px 60px rgba(2, 6, 23, 0.35), 0 4px 16px rgba(2, 6, 23, 0.15);
  --mktour-z: 2147483000; /* sits above everything in the host app (highest existing z-index there is 80) */
}

.mktour-root,
.mktour-root * {
  box-sizing: border-box;
}

.mktour-root {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ─── Dimming mask (4 slices around the target, so the target itself has
       zero overlay covering it — fully native pointer/keyboard access) ─── */
.mktour-mask {
  position: fixed;
  background: rgba(11, 18, 32, 0.6);
  z-index: var(--mktour-z);
  transition: opacity 0.2s ease;
}
.mktour-mask[hidden] { display: none; }

/* ─── Highlight ring around the target ─── */
.mktour-ring {
  position: fixed;
  z-index: calc(var(--mktour-z) + 1);
  border-radius: 10px;
  box-shadow:
    0 0 0 4px rgba(2, 132, 199, 0.28),
    0 0 0 2px var(--mktour-blue-600),
    0 8px 28px rgba(2, 132, 199, 0.35);
  pointer-events: none;
  transition: top 0.18s ease, left 0.18s ease, width 0.18s ease, height 0.18s ease, opacity 0.2s ease;
}
.mktour-ring[hidden] { display: none; }

@keyframes mktour-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.28), 0 0 0 2px var(--mktour-blue-600), 0 8px 28px rgba(2, 132, 199, 0.35); }
  50%      { box-shadow: 0 0 0 7px rgba(2, 132, 199, 0.16), 0 0 0 2px var(--mktour-blue-600), 0 8px 28px rgba(2, 132, 199, 0.35); }
}
.mktour-ring.mktour-ring--pulse { animation: mktour-pulse 2.2s ease-in-out infinite; }

/* ─── Guidance card ───────────────────────────────────────────────────
   Standardized Makyn Guided Walkthrough card: white surface, dark text,
   blue accent — deliberately separate from whatever visual identity the
   underlying simulated product/demo uses on this page, so it always
   reads as "Makyn is guiding you here" rather than blending in. This is
   the reusable standard other demos (HCM, Marketing Automation) should
   match. ─────────────────────────────────────────────────────────── */
.mktour-card {
  position: fixed;
  z-index: calc(var(--mktour-z) + 2);
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--mktour-white);
  color: var(--mktour-navy-900);
  border-radius: var(--mktour-radius-md);
  box-shadow: var(--mktour-shadow-card);
  border: 1px solid var(--mktour-gray-200);
  transition: top 0.18s ease, left 0.18s ease, opacity 0.2s ease;
}
.mktour-card[hidden] { display: none; }

.mktour-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 12px 0 16px;
}

/* Level 1 — "GUIDED WALKTHROUGH · STEP X OF Y" */
.mktour-progress {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mktour-blue-600);
}

.mktour-close {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--mktour-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.mktour-close:hover { background: var(--mktour-off-white); color: var(--mktour-navy-900); }
.mktour-close svg { width: 14px; height: 14px; }

.mktour-body {
  padding: 8px 16px 4px;
}

/* Level 2 — step title, the strongest text in the card */
.mktour-title {
  margin: 6px 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mktour-navy-900);
}

.mktour-block { margin-bottom: 12px; }
.mktour-block:last-child { margin-bottom: 0; }

/* Level 4 — small "ACTION" section label. Only the action block gets a
   label; the context paragraph above it is intentionally unlabeled so
   it reads as plain narrative, not another documentation-style field. */
.mktour-block-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: var(--mktour-blue-700);
}

/* Level 3 — context paragraph */
.mktour-block p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--mktour-text-secondary);
}

/* Level 5 — the actual action instruction, set apart with a light panel
   so it's immediately scannable as "the thing to do right now". */
.mktour-block--action {
  padding: 10px 12px;
  background: var(--mktour-off-white);
  border: 1px solid var(--mktour-gray-200);
  border-radius: var(--mktour-radius-sm);
}
.mktour-block--action .mktour-block-label { margin-bottom: 6px; }
.mktour-block--action p {
  color: var(--mktour-navy-900);
  font-weight: 500;
}

.mktour-action-list {
  margin: 0;
  padding: 0 0 0 1.1rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--mktour-navy-900);
  font-weight: 500;
}
.mktour-action-list[hidden] { display: none; }
.mktour-action-list li {
  margin-bottom: 0.4rem;
}
.mktour-action-list li:last-child {
  margin-bottom: 0;
}
.mktour-action-list li::marker {
  color: var(--mktour-blue-600);
  font-weight: 700;
}

/* Level 6 — optional explicit action cue, e.g. "› Click 311" */
.mktour-hint {
  margin: 10px 16px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--mktour-blue-700);
}
.mktour-hint[hidden] { display: none; }
.mktour-hint::before {
  content: '\203A';
  font-weight: 700;
  color: var(--mktour-blue-600);
}
.mktour-hint svg { display: none; } /* icon retired in favor of the "›" cue marker */

/* Level 7 — footer controls */
.mktour-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 8px;
  gap: 8px;
  padding: 14px 16px 16px;
  margin-top: 10px;
  border-top: 1px solid var(--mktour-gray-200);
}

.mktour-footer-left,
.mktour-footer-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
  gap: 6px;
}

.mktour-btn {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.5rem 0.8rem;
  border-radius: var(--mktour-radius-sm);
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.mktour-btn[hidden] { display: none; }
.mktour-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.mktour-btn--primary {
  background: var(--mktour-blue-600);
  color: var(--mktour-white);
}
.mktour-btn--primary:hover:not(:disabled) { background: #0369A1; }

.mktour-btn--outline {
  background: var(--mktour-white);
  color: var(--mktour-navy-900);
  border: 1.5px solid var(--mktour-gray-200);
}
.mktour-btn--outline:hover:not(:disabled) { border-color: var(--mktour-blue-600); background: var(--mktour-blue-100); }

.mktour-btn--ghost {
  background: transparent;
  color: var(--mktour-text-muted);
  padding: 0.5rem 0.5rem;
}
.mktour-btn--ghost:hover:not(:disabled) { color: var(--mktour-navy-900); }

/* Focus visibility — meets 3:1 against every surface this ring can appear
   on (the card's navy background, and the host app's light/dark surfaces). */
.mktour-root :focus-visible {
  outline: 2.5px solid var(--mktour-blue-600);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── Floating launcher (visible when no step is currently on screen) ─── */
.mktour-launcher {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: calc(var(--mktour-z) - 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.7rem 1.1rem;
  border-radius: 100px;
  background: var(--mktour-navy-800);
  color: var(--mktour-white);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.35);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.mktour-launcher:hover {
  background: #16213A;
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.4);
}
.mktour-launcher[hidden] { display: none; }
.mktour-launcher svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--mktour-teal-500); }
.mktour-launcher:focus-visible {
  outline: 2.5px solid var(--mktour-blue-600);
  outline-offset: 3px;
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .mktour-mask,
  .mktour-ring,
  .mktour-card,
  .mktour-launcher {
    transition-duration: 0.001ms !important;
  }
  .mktour-ring.mktour-ring--pulse {
    animation: none !important;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.28), 0 0 0 2px var(--mktour-blue-600), 0 8px 28px rgba(2, 132, 199, 0.35) !important;
  }
  .mktour-transition,
  .mktour-transition-card,
  .mktour-transition-check-circle,
  .mktour-transition-check-mark {
    transition-duration: 0.001ms !important;
  }
}

/* ─── Cross-page transition overlay ─── */
.mktour-transition {
  position: fixed;
  inset: 0;
  z-index: calc(var(--mktour-z) + 5);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 18, 32, 0.92);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.mktour-transition[hidden] { display: none; }
.mktour-transition.mktour-transition--show { opacity: 1; }
.mktour-transition.mktour-transition--reduced-motion { transition-duration: 0.001ms; }

.mktour-transition-card {
  text-align: center;
  max-width: 420px;
  padding: 0 24px;
  transform: translateY(10px);
  opacity: 0;
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}
.mktour-transition.mktour-transition--show .mktour-transition-card {
  transform: translateY(0);
  opacity: 1;
}
.mktour-transition.mktour-transition--reduced-motion .mktour-transition-card {
  transition-duration: 0.001ms;
  transition-delay: 0s;
}

.mktour-transition-check {
  width: 68px;
  height: 68px;
  margin: 0 auto 20px;
}
.mktour-transition-check svg { width: 100%; height: 100%; }
.mktour-transition-check-circle {
  fill: none;
  stroke: var(--mktour-teal-500);
  stroke-width: 2.5;
  stroke-dasharray: 151; /* ~ circumference of r=24 circle */
  stroke-dashoffset: 151;
  transition: stroke-dashoffset 0.5s ease 0.15s;
}
.mktour-transition-check-mark {
  fill: none;
  stroke: var(--mktour-teal-500);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34; /* approx length of the checkmark path */
  stroke-dashoffset: 34;
  transition: stroke-dashoffset 0.35s ease 0.55s;
}
.mktour-transition.mktour-transition--show .mktour-transition-check-circle,
.mktour-transition.mktour-transition--show .mktour-transition-check-mark {
  stroke-dashoffset: 0;
}
.mktour-transition.mktour-transition--reduced-motion .mktour-transition-check-circle,
.mktour-transition.mktour-transition--reduced-motion .mktour-transition-check-mark {
  transition-duration: 0.001ms;
  transition-delay: 0s;
}

.mktour-transition-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--mktour-white);
  margin-bottom: 8px;
}
.mktour-transition-ref {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mktour-navy-900);
  background: var(--mktour-teal-500);
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
  margin-bottom: 14px;
}
.mktour-transition-ref[hidden] { display: none; }
.mktour-transition-subtitle {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}
.mktour-transition-persona {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 10px;
}
.mktour-transition-persona[hidden] { display: none; }
.mktour-transition-ack {
  margin-top: 22px;
  font-size: 0.9rem;
  padding: 0.7rem 1.4rem;
  white-space: normal;
}
.mktour-transition-ack[hidden] { display: none; }
.mktour-transition-ack:focus-visible {
  outline: 2.5px solid var(--mktour-blue-600);
  outline-offset: 2px;
}

/* ─── Exit / Restart confirmation overlay — deliberately matches the
   cross-page transition overlay above (same dark backdrop, same Inter
   type, same blue primary button) so every moment where the tour takes
   over the full screen reads as one consistent system. ─── */
.mktour-confirm {
  position: fixed;
  inset: 0;
  z-index: calc(var(--mktour-z) + 10);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 18, 32, 0.92);
  padding: 24px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mktour-confirm[hidden] { display: none; }
.mktour-confirm.mktour-confirm--show { opacity: 1; }
.mktour-confirm.mktour-confirm--reduced-motion { transition-duration: 0.001ms; }

.mktour-confirm-card {
  width: 100%;
  max-width: 420px;
  text-align: center;
  transform: translateY(10px);
  opacity: 0;
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}
.mktour-confirm.mktour-confirm--show .mktour-confirm-card {
  transform: translateY(0);
  opacity: 1;
}
.mktour-confirm.mktour-confirm--reduced-motion .mktour-confirm-card {
  transition-duration: 0.001ms;
  transition-delay: 0s;
}

.mktour-confirm-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--mktour-white);
  margin: 0 0 10px;
}
.mktour-confirm-body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 26px;
}
.mktour-confirm-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.mktour-confirm-actions .mktour-btn {
  font-size: 0.9rem;
  padding: 0.7rem 1.4rem;
  white-space: normal;
}
.mktour-confirm-actions .mktour-btn:focus-visible {
  outline: 2.5px solid var(--mktour-blue-600);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .mktour-confirm,
  .mktour-confirm-card {
    transition-duration: 0.001ms !important;
  }
}

/* ─── Field flash — brief highlight for a value that a guided step just
   changed in the host app's own UI (e.g. an updated Address or Priority),
   so the visitor's eye is drawn to it before the tour moves on. Generic
   utility: any step config can apply/remove this class to any element. ─── */
@keyframes mktour-field-flash-kf {
  0%   { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); background-color: transparent; }
  15%  { box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.35); background-color: rgba(20, 184, 166, 0.14); }
  85%  { box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.35); background-color: rgba(20, 184, 166, 0.14); }
  100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); background-color: transparent; }
}
.mktour-field-flash {
  animation: mktour-field-flash-kf 1.8s ease;
  border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .mktour-field-flash { animation: none; background-color: rgba(20, 184, 166, 0.18); border-radius: 8px; }
}

/* ─── Narrow viewports: card becomes a fixed bottom sheet ─── */
@media (max-width: 640px) {
  .mktour-card {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    top: auto !important;
    width: auto;
    max-width: none;
    max-height: 68vh;
  }
  .mktour-launcher {
    left: 12px;
    bottom: 12px;
    padding: 0.6rem 0.9rem;
    font-size: 0.8rem;
  }
  .mktour-footer {
    flex-wrap: wrap;
  }
}