/* ============================================================
   walkthrough.css — MAKR-style guided tour. Self-contained,
   dependency-free, brand-token driven. Spotlight (box-shadow
   ring) + popover + progress. Sits above everything (z 100k+).
   ============================================================ */

.wt-root {
  position: fixed;
  inset: 0;
  z-index: 100000;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.wt-root[hidden] { display: none; }

/* Full-screen click catcher. Transparent for targeted steps
   (dim comes from the ring's box-shadow); tinted for centered. */
.wt-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: transparent;
  cursor: default;
}
.wt-root.wt-centered .wt-backdrop {
  background: rgba(4, 6, 14, .72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Spotlight ring — a positioned box whose massive box-shadow
   dims everything around it, leaving the target "lit". */
.wt-ring {
  position: fixed;
  z-index: 100001;
  border-radius: var(--r-md, 12px);
  pointer-events: none;
  box-shadow:
    0 0 0 9999px rgba(4, 6, 14, .70),
    0 0 0 2px var(--primary, #2a93c1),
    0 0 24px 2px rgba(42, 147, 193, .55);
  transition: top .32s cubic-bezier(.4, 0, .2, 1),
              left .32s cubic-bezier(.4, 0, .2, 1),
              width .32s cubic-bezier(.4, 0, .2, 1),
              height .32s cubic-bezier(.4, 0, .2, 1),
              opacity .2s ease;
}
.wt-root.wt-centered .wt-ring { opacity: 0; }

/* Popover card */
.wt-pop {
  position: fixed;
  z-index: 100002;
  width: min(340px, calc(100vw - 28px));
  background: var(--surface, #0e111c);
  border: 1px solid var(--line-2, rgba(255,255,255,.14));
  border-radius: var(--r-lg, 18px);
  box-shadow: var(--shadow-lg, 0 20px 50px rgba(0,0,0,.5));
  padding: 18px 18px 14px;
  color: var(--ink, #f4f6fb);
  opacity: 0;
  transform: translateY(6px);
  animation: wt-pop-in .28s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes wt-pop-in { to { opacity: 1; transform: translateY(0); } }
.wt-root.wt-centered .wt-pop {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) scale(.98);
  width: min(440px, calc(100vw - 32px));
  animation: wt-pop-in-c .3s cubic-bezier(.2, .7, .3, 1) forwards;
  text-align: center;
  padding: 30px 28px 22px;
}
@keyframes wt-pop-in-c { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* Accent hairline at the top of the card */
.wt-pop::before {
  content: "";
  position: absolute;
  left: 18px; right: 18px; top: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--accent-grad, linear-gradient(135deg,#f1420b,#ed6626));
  opacity: .9;
}
.wt-root.wt-centered .wt-pop::before { left: 28px; right: 28px; }

.wt-kicker {
  font-family: var(--font-head, 'Oswald', sans-serif);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary, #2a93c1);
  margin: 2px 0 6px;
  font-weight: 600;
}
.wt-title {
  font-family: var(--font-head, 'Oswald', sans-serif);
  font-size: 20px;
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--ink, #f4f6fb);
}
.wt-root.wt-centered .wt-title { font-size: 26px; }
.wt-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2, #aeb6c7);
  margin: 0 0 14px;
}
.wt-body b { color: var(--ink, #f4f6fb); font-weight: 600; }

/* Footer: progress + controls */
.wt-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.wt-progress {
  font-family: var(--mono, monospace);
  font-size: 11px;
  color: var(--ink-3, #6b7488);
  letter-spacing: .04em;
  white-space: nowrap;
}
.wt-spacer { flex: 1 1 auto; }

.wt-dots {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  margin: 0 0 16px;
}
.wt-root:not(.wt-centered) .wt-dots { display: none; }
.wt-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--line-2, rgba(255,255,255,.14));
  transition: background .2s, transform .2s;
}
.wt-dot.on { background: var(--primary, #2a93c1); transform: scale(1.35); }

.wt-btn {
  font-family: var(--font-body, sans-serif);
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--r-sm, 8px);
  padding: 8px 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .14s, border-color .14s, color .14s, transform .1s;
  line-height: 1;
}
.wt-btn:active { transform: translateY(1px); }
.wt-btn-ghost {
  background: transparent;
  color: var(--ink-2, #aeb6c7);
  border-color: var(--line, rgba(255,255,255,.08));
}
.wt-btn-ghost:hover { background: var(--surface-2, #141826); color: var(--ink, #f4f6fb); }
.wt-btn-primary {
  background: var(--accent-grad, linear-gradient(135deg,#f1420b,#ed6626));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(241,66,11,.28);
}
.wt-btn-primary:hover { filter: brightness(1.06); }

/* Skip (x) top-right */
.wt-skip {
  position: absolute;
  top: 10px; right: 10px;
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ink-3, #6b7488);
  cursor: pointer;
  border-radius: var(--r-sm, 8px);
  transition: background .14s, color .14s;
}
.wt-skip:hover { background: var(--surface-2, #141826); color: var(--ink, #f4f6fb); }
.wt-root.wt-centered .wt-skip { top: 12px; right: 12px; }

/* The persistent help button in the topbar */
.wt-help-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-pill, 999px);
  border: 1px solid var(--line-2, rgba(255,255,255,.14));
  background: var(--surface-2, #141826);
  color: var(--ink-2, #aeb6c7);
  font-family: var(--font-body, sans-serif);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
  white-space: nowrap;
}
.wt-help-btn:hover {
  background: var(--surface-3, #1b2032);
  color: var(--ink, #f4f6fb);
  border-color: var(--line-glow, rgba(42,147,193,.35));
}
.wt-help-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.wt-help-btn .wt-help-label { display: inline; }
@media (max-width: 720px) {
  .wt-help-btn .wt-help-label { display: none; }
  .wt-help-btn { padding: 0 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .wt-ring, .wt-pop { transition: none; animation: none; opacity: 1; transform: none; }
  .wt-root.wt-centered .wt-pop { transform: translate(-50%, -50%); }
}