/*
  Styling for guided-tour.js's spotlight + step card. Uses the host page's
  own design tokens (--card, --rule, --ink, --ink-soft, --chip-bg,
  --shadow-lg, --ease, Geist/Inter) so it looks native wherever it's
  included -- never its own hardcoded palette.
*/
.gt-overlay {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
}
.gt-spotlight {
  position: fixed; border-radius: 10px; pointer-events: none;
  /* The classic "cutout" trick: a giant box-shadow covers the whole
     viewport except this box's own rect, which stays fully transparent
     (and un-dimmed) so the real, still-interactive element underneath
     reads clearly and stays clickable -- the tour never blocks the
     feature it's explaining. */
  box-shadow: 0 0 0 9999px rgba(11, 12, 14, 0.55);
  transition: top .22s var(--ease), left .22s var(--ease), width .22s var(--ease), height .22s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .gt-spotlight { transition: none; }
}
.gt-card {
  pointer-events: auto;
  background: var(--card); border: 1px solid var(--rule); border-radius: 14px;
  padding: 20px; box-shadow: var(--shadow-lg);
  font-family: 'Inter', system-ui, sans-serif;
}
.gt-progress {
  font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.gt-title {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 650; letter-spacing: -0.01em;
  font-size: 17px; color: var(--ink); margin: 0 0 8px;
}
.gt-body {
  font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 18px;
}
.gt-actions { display: flex; align-items: center; gap: 10px; }
.gt-spacer { flex: 1; }
.gt-skip, .gt-back, .gt-next {
  padding: 8px 14px; border-radius: 8px; border: none; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: transform .15s var(--ease), background .15s var(--ease);
}
.gt-skip { background: none; color: var(--ink-soft); padding-left: 2px; }
.gt-skip:hover { color: var(--ink); }
.gt-back { background: var(--card); color: var(--ink); border: 1.5px solid var(--rule); }
.gt-back:hover { background: var(--paper-2); }
.gt-next { background: var(--chip-bg); color: var(--chip-text); }
.gt-next:hover { background: var(--chip-bg-hover); }
.gt-back:focus-visible, .gt-next:focus-visible, .gt-skip:focus-visible {
  outline: 2.5px solid var(--accent); outline-offset: 2px;
}

@media (max-width: 640px) {
  .gt-card { width: calc(100vw - 28px) !important; left: 14px !important; }
}