/* Healfie Planner — in-app rondleiding (spotlight-overlay + tooltip-kaart).
 * Vanilla, geen afhankelijkheden. Gebruikt de planner-designtokens uit style.css. */

.hptour-root{position:fixed;inset:0;z-index:99990}
.hptour-root[hidden]{display:none}

/* Spotlight = transparant blok met enorme box-shadow die de rest dimt (cutout-truc). */
.hptour-spot{
  position:fixed;border-radius:12px;
  box-shadow:0 0 0 9999px rgba(16,24,40,.58);
  transition:all .28s cubic-bezier(.4,0,.2,1);
  pointer-events:none;z-index:99991;
}
.hptour-root.is-center .hptour-spot{
  inset:0;width:auto;height:auto;border-radius:0;
  box-shadow:inset 0 0 0 9999px rgba(16,24,40,.58);
}

/* Klikvanger — blokkeert interactie met de pagina tijdens de tour. */
.hptour-catch{position:fixed;inset:0;z-index:99991;background:transparent}

/* Tooltip-kaart */
.hptour-card{
  position:fixed;z-index:99992;
  width:min(340px,calc(100vw - 32px));
  background:var(--card,#fff);color:var(--ink,#101012);
  border:1px solid var(--line,#e4e6e8);border-radius:14px;
  box-shadow:0 16px 46px rgba(16,24,40,.30);
  padding:18px 18px 14px;box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  transition:top .28s cubic-bezier(.4,0,.2,1),left .28s cubic-bezier(.4,0,.2,1);
}
.hptour-card__title{font-size:1.06rem;font-weight:700;letter-spacing:-.01em;margin:0 0 6px}
.hptour-card__body{font-size:.92rem;line-height:1.5;color:var(--muted,#66707a);margin:0 0 14px}

.hptour-foot{display:flex;align-items:center;gap:10px}
.hptour-count{flex:1;font-size:.78rem;font-weight:600;color:var(--muted,#8b9198);font-variant-numeric:tabular-nums}

.hptour-btn{border:none;border-radius:9px;cursor:pointer;font:inherit;font-size:.9rem;font-weight:600;padding:9px 16px;line-height:1}
.hptour-btn--next{background:var(--accent,#101012);color:var(--accent-ink,#fff)}
.hptour-btn--prev{background:var(--soft,#f0f1f2);color:var(--ink,#101012)}
.hptour-btn--next:active,.hptour-btn--prev:active{transform:scale(.96)}

.hptour-skip{position:absolute;top:12px;right:14px;background:none;border:none;cursor:pointer;font:inherit;font-size:.82rem;font-weight:500;color:var(--muted,#8b9198);padding:4px}
.hptour-skip:hover{color:var(--ink,#101012)}

/* Subtiel pijltje naar het doel */
.hptour-card::after{content:"";position:absolute;width:14px;height:14px;background:var(--card,#fff);transform:rotate(45deg);display:none}
.hptour-card.arrow-up::after{display:block;top:-7px;left:50%;margin-left:-7px;box-shadow:-2px -2px 4px rgba(16,24,40,.04)}
.hptour-card.arrow-down::after{display:block;bottom:-7px;left:50%;margin-left:-7px;box-shadow:2px 2px 4px rgba(16,24,40,.04)}

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