/**
 * First-run onboarding — coach marks, pulse highlight, skip button.
 * Uses design tokens from builder.css. All classes prefixed pb-.
 */

/* ── Coach mark base ── */
.pb-coach-mark {
  position: fixed;
  z-index: var(--pb-z-popover);
  background: var(--pb-surface-3);
  border: 1px solid var(--pb-accent);
  border-radius: var(--pb-radius-md);
  padding: var(--pb-space-4) var(--pb-space-6);
  box-shadow: var(--pb-shadow-popover);
  pointer-events: none;
  max-width: 240px;
  animation: pb-coach-in var(--pb-transition-slow) both;
}

.pb-coach-mark-text {
  color: var(--pb-text-bright);
  font-size: var(--pb-font-md);
  line-height: 1.4;
}

/* ── Right-side variant (arrow points left) ── */
.pb-coach-mark-right::before {
  content: '';
  position: absolute;
  left: calc(var(--pb-space-4) * -1 + 1px);
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: var(--pb-space-5);
  height: var(--pb-space-5);
  background: var(--pb-surface-3);
  border-left: 1px solid var(--pb-accent);
  border-bottom: 1px solid var(--pb-accent);
}

/* ── Left-side variant (arrow points right) ── */
.pb-coach-mark-left::before {
  content: '';
  position: absolute;
  right: calc(var(--pb-space-4) * -1 + 1px);
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: var(--pb-space-5);
  height: var(--pb-space-5);
  background: var(--pb-surface-3);
  border-right: 1px solid var(--pb-accent);
  border-top: 1px solid var(--pb-accent);
}

/* ── Entrance ── */
@keyframes pb-coach-in {
  from { opacity: 0; transform: translateX(var(--pb-space-4)); }
  to   { opacity: 1; transform: translateX(0); }
}

.pb-coach-mark-left {
  animation-name: pb-coach-in-left;
}
@keyframes pb-coach-in-left {
  from { opacity: 0; transform: translateX(calc(var(--pb-space-4) * -1)); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Exit ── */
.pb-coach-mark-exit {
  animation: pb-coach-out var(--pb-transition) forwards;
}
@keyframes pb-coach-out {
  to { opacity: 0; }
}

/* ── Section list pulse ── */
.pb-onboarding-pulse {
  animation: pb-onboarding-pulse 2s ease-in-out infinite;
  border-radius: var(--pb-radius);
}
@keyframes pb-onboarding-pulse {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--pb-accent-glow); }
  50%      { box-shadow: inset 0 0 0 2px var(--pb-accent); }
}

/* ── Skip button in template modal ── */
.pb-onboarding-skip {
  background: none;
  border: 1px solid var(--pb-border);
  color: var(--pb-text);
  padding: var(--pb-space-2) var(--pb-space-5);
  border-radius: var(--pb-radius);
  font-size: var(--pb-font-sm);
  cursor: pointer;
  margin-right: var(--pb-space-4);
  transition: border-color var(--pb-transition), color var(--pb-transition);
}
.pb-onboarding-skip:hover {
  border-color: var(--pb-text-dim);
  color: var(--pb-text-bright);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .pb-coach-mark,
  .pb-coach-mark-left,
  .pb-coach-mark-exit,
  .pb-onboarding-pulse,
  .pb-skeleton {
    animation: none !important;
  }
  .pb-coach-mark {
    opacity: 1;
  }
  .pb-onboarding-pulse {
    box-shadow: inset 0 0 0 2px var(--pb-accent);
  }
}