/* Colours come from the page: every tool defines these variables in its own
   :root block, so the tour inherits light and dark without knowing about it. */

/* The dim is four panels around the target rather than one huge box-shadow:
   a shadow with a 9999px spread is dropped by Chrome at moderate alpha, and a
   demo that silently stops dimming is worse than no dimming at all. */
.tour-veil{
  position:fixed; inset:0; z-index:9998; cursor:default;
}
/* Dark needs a heavy hand: the tools are already near-black, so a light dim
   reads as no dim at all. */
.tour-veil i{ position:fixed; display:block; background:rgba(2,6,14,.88) }

html[data-theme=light] .tour-veil i{ background:rgba(15,23,36,.42) }

.tour-spot{
  position:fixed; z-index:9999; pointer-events:none; border-radius:10px;
  box-shadow:0 0 0 2px var(--sea,#58a6ff), 0 0 24px rgba(88,166,255,.45);
  transition:top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}
.tour-spot.hidden{ box-shadow:none }

.tour-card{
  position:fixed; z-index:10000; width:380px; max-width:calc(100vw - 24px);
  background:var(--panel,#161b22); color:var(--ink,#e6edf3);
  border:1px solid var(--line,#30363d); border-radius:12px;
  padding:14px 16px 12px;
  box-shadow:0 18px 44px rgba(0,0,0,.45);
  font:14px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

.tour-meta{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--dim,#8b949e); margin-bottom:6px;
}

.tour-card h3{ margin:0 0 6px; font-size:15px; font-weight:600 }

.tour-body{ color:var(--dim,#8b949e); font-size:13px }
.tour-body b, .tour-body strong{ color:var(--ink,#e6edf3); font-weight:600 }
.tour-body p{ margin:0 0 8px }
.tour-body p:last-child{ margin-bottom:0 }

.tour-actions{ display:flex; align-items:center; gap:8px; margin-top:12px }
.tour-spacer{ margin-left:auto }

.tour-card button{
  font:inherit; font-size:12px; cursor:pointer;
  color:var(--ink,#e6edf3); background:var(--bg,#0d1117);
  border:1px solid var(--line,#30363d); border-radius:6px; padding:4px 11px;
}
.tour-card button:hover:not(:disabled){ border-color:var(--sea,#58a6ff) }
.tour-card button:disabled{ opacity:.45; cursor:default }
.tour-card button.primary{
  background:var(--sea,#58a6ff); border-color:var(--sea,#58a6ff); color:#04121f;
  font-weight:600;
}
html[data-theme=light] .tour-card button.primary{ color:#fff }
.tour-card button.ghost{ background:transparent; color:var(--dim,#8b949e) }

.tour-progress{
  display:block; height:2px; margin-top:12px; border-radius:2px;
  background:var(--line,#30363d); overflow:hidden;
}
.tour-progress i{ display:block; height:100%; background:var(--sea,#58a6ff) }

@media (prefers-reduced-motion:reduce){
  .tour-spot{ transition:none }
}