Tour Tooltip

<!-- Tour Tooltip — tooltip with progress, copy, skip + next CTA -->
<div class="nuda-tour" role="dialog" aria-label="Onboarding step">
  <span class="nuda-tour__step">2 / 5</span>
  <h4>Set your workspace</h4>
  <p>Choose a name and slug for your team.</p>
  <div class="nuda-tour__actions">
    <button class="nuda-tour__skip" type="button">Skip</button>
    <button class="nuda-tour__next" type="button">Next →</button>
  </div>
</div>

/* Tour Tooltip
   Onboarding tooltip with arrow, step counter, copy + actions.
   Position absolutely near a target element in your layout.
   Customize: --tour-accent, arrow side via the ::after rule. */

.nuda-tour {
  --tour-accent: #e4ff54;
  position: relative;
  width: 100%;
  max-width: 280px;
  padding: 14px;
  background: rgba(20, 20, 24, 0.95);
  border: 1px solid rgba(228, 255, 84, 0.25);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  box-shadow:
    0 12px 32px -8px rgba(0, 0, 0, 0.6),
    0 0 16px rgba(228, 255, 84, 0.1);
  animation: nuda-tour-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Arrow — pointing down by default; flip via reordering or a modifier class */
.nuda-tour::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: rgba(20, 20, 24, 0.95);
  border-right: 1px solid rgba(228, 255, 84, 0.25);
  border-bottom: 1px solid rgba(228, 255, 84, 0.25);
  transform: rotate(45deg);
}

.nuda-tour__step {
  font: 800 0.625rem ui-sans-serif, system-ui, sans-serif;
  color: var(--tour-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nuda-tour h4 {
  font: 700 0.95rem ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  margin: 4px 0 4px;
}

.nuda-tour p {
  font: 500 0.85rem ui-sans-serif, system-ui, sans-serif;
  color: #a1a1aa;
  margin: 0 0 12px;
  line-height: 1.4;
}

.nuda-tour__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.nuda-tour__skip {
  background: transparent;
  border: none;
  color: #a1a1aa;
  font: 500 0.8rem ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}

.nuda-tour__skip:hover { color: #fafafa; }

.nuda-tour__next {
  padding: 6px 12px;
  background: var(--tour-accent);
  color: #09090b;
  border: none;
  border-radius: 6px;
  font: 700 0.8rem ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  transition: transform 0.2s;
}

.nuda-tour__next:hover { transform: translateX(2px); }

@keyframes nuda-tour-in {
  from { opacity: 0; transform: scale(0.92) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-tour { animation: none; }
}