/* =====================================================================
   GUIDED TOUR : HUD
   A spotlight on the thing being explained, everything else dimmed and
   click blocked, with the highlighted element left clickable.
   ===================================================================== */

/* ------------------------------------------------------- launch button */
.tour-fab {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 48px;
  padding: 0 1.1rem 0 .9rem;
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  border: 1.5px solid var(--accent-deep);
  border-radius: 26px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform .18s cubic-bezier(.4, 0, .2, 1), box-shadow .18s, background .18s;
}

.tour-fab:hover { transform: translateY(-2px) scale(1.03); background: var(--accent-deep); }
.tour-fab:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.tour-fab .fab-ico { font-size: 1.05rem; line-height: 1; }

.tour-fab.nudge { animation: tour-nudge 2.4s ease-in-out infinite; }

@keyframes tour-nudge {
  0%, 100% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(255, 212, 0, .55); }
  50%      { box-shadow: var(--shadow-md), 0 0 0 14px rgba(255, 212, 0, 0); }
}

/* first visit hint above the button */
.tour-hint {
  position: fixed;
  right: 1.4rem;
  bottom: 4.6rem;
  z-index: 900;
  max-width: 230px;
  padding: .7rem .9rem;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--accent-deep);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  animation: tour-rise .35s ease-out;
}

.tour-hint strong { display: block; font-weight: 700; margin-bottom: .1rem; }

.tour-hint button {
  display: block;
  margin-top: .55rem;
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.tour-hint button:hover { color: var(--ink); }

@keyframes tour-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------ blockers */
.tour-block {
  position: fixed;
  z-index: 950;
  background: rgba(6, 8, 14, .72);
  transition: all .28s cubic-bezier(.4, 0, .2, 1);
}

html[data-theme="dark"] .tour-block { background: rgba(0, 0, 0, .8); }

/* ----------------------------------------------------------- spotlight */
.tour-spot {
  position: fixed;
  z-index: 960;
  border: 2px solid var(--accent);
  border-radius: 12px;
  pointer-events: none;
  box-shadow: 0 0 0 4px rgba(255, 212, 0, .28), 0 0 26px 6px rgba(255, 212, 0, .22);
  transition: all .28s cubic-bezier(.4, 0, .2, 1);
}

.tour-spot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  border: 2px solid var(--accent);
  animation: tour-pulse 1.8s ease-out infinite;
}

@keyframes tour-pulse {
  0%   { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); }
}

/* --------------------------------------------------------------- card */
.tour-card {
  position: fixed;
  z-index: 970;
  width: min(340px, calc(100vw - 2rem));
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
  padding: 1.1rem 1.2rem 1rem;
  transition: top .28s cubic-bezier(.4, 0, .2, 1), left .28s cubic-bezier(.4, 0, .2, 1);
}

.tour-card::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--surface);
  border-left: 1.5px solid var(--line-strong);
  border-top: 1.5px solid var(--line-strong);
  transform: rotate(45deg);
}

.tour-card[data-arrow="top"]::before    { top: -7px; left: var(--arrow-x, 28px); }
.tour-card[data-arrow="bottom"]::before { bottom: -7px; left: var(--arrow-x, 28px); transform: rotate(225deg); }
.tour-card[data-arrow="none"]::before   { display: none; }

.tour-step-n {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: .35rem;
}

.tour-card h3 {
  font-size: 1.02rem;
  font-weight: 750;
  line-height: 1.3;
  margin-bottom: .35rem;
  color: var(--ink);
}

.tour-card p {
  font-size: .88rem;
  line-height: 1.62;
  color: var(--ink-soft);
}

.tour-card .tour-do {
  display: inline-block;
  margin-top: .6rem;
  padding: .28rem .6rem;
  font-size: .78rem;
  font-weight: 650;
  color: var(--accent-ink);
  background: var(--accent-wash);
  border: 1px solid var(--accent-deep);
  border-radius: 6px;
}

html[data-theme="dark"] .tour-card .tour-do { color: var(--ink); }

.tour-foot {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--line);
}

.tour-dots { display: flex; gap: 4px; margin-right: auto; }

.tour-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background .2s, transform .2s;
}

.tour-dot.on { background: var(--accent-deep); transform: scale(1.35); }

.tour-btn {
  font: inherit;
  font-size: .83rem;
  font-weight: 700;
  padding: .42rem .85rem;
  border-radius: 8px;
  cursor: pointer;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  transition: all .15s;
}

.tour-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.tour-btn:focus-visible { outline: 3px solid var(--accent-wash); outline-offset: 2px; }

.tour-btn.primary {
  background: var(--accent);
  border-color: var(--accent-deep);
  color: var(--accent-ink);
}

.tour-btn.primary:hover { background: var(--accent-deep); }

.tour-close {
  position: absolute;
  top: .55rem;
  right: .6rem;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.tour-close:hover { color: var(--ink); background: var(--surface-3); }

/* --------------------------------------------------------- responsive */
@media (max-width: 640px) {
  .tour-fab { right: 1rem; bottom: 1rem; height: 44px; padding: 0 .9rem; }
  .tour-fab .fab-label { display: none; }
  .tour-fab { padding: 0; width: 44px; justify-content: center; }
  .tour-hint { right: 1rem; left: 1rem; bottom: 4rem; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tour-spot::after, .tour-fab.nudge { animation: none; }
  .tour-block, .tour-spot, .tour-card { transition: none; }
}

@media print { .tour-fab, .tour-hint, .tour-block, .tour-spot, .tour-card { display: none !important; } }

/* while the page is scrolling to the next target, the spotlight tracks it
   frame by frame, so the easing is switched off to stop it trailing behind */
body.tour-instant .tour-block,
body.tour-instant .tour-spot,
body.tour-instant .tour-card { transition: none !important; }