/* ============================================================
   Demo-clinic guided walkthrough (spec 2026-07-14)
   ============================================================
   Loaded only on demo clinic pages (server-gated). All colors come from
   tokens.css so the tour adapts to light/dark like the rest of the app;
   the dimming scrim uses rgba() (an alpha wash over the page), which the
   dark-mode guard permits.
   ============================================================ */

/* Full-screen click shield so a mis-click behind the tour can't fire. The
   visible dimming is the spotlight's huge box-shadow, so this stays clear. */
.tour-blocker {
  position: fixed;
  inset: 0;
  z-index: 1190;
  background: transparent;
  cursor: default;
}

/* An INTERACTIVE step (one whose copy invites a click on the highlighted
   thing) lets clicks reach the page — otherwise the shield makes that copy a
   lie. Set per step by clinic-tour.js, never left on. */
.tour-blocker[data-tour-passthrough] {
  pointer-events: none;
}

/* The "hole": a box tracking the highlighted element, whose oversized shadow
   dims everything around it. pointer-events:none so it never blocks the
   popover controls layered above. */
.tour-spotlight {
  position: fixed;
  z-index: 1191;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-primary);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  transition:
    top 0.25s ease,
    left 0.25s ease,
    width 0.25s ease,
    height 0.25s ease;
}

.tour-pop {
  position: fixed;
  z-index: 1192;
  width: min(340px, calc(100vw - 24px));
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 18px 20px 16px;
  transition:
    top 0.2s ease,
    left 0.2s ease;
}

/* Touch-sized (var(--touch-target-min)) rather than glyph-sized: this popover
   is now driven by prospects on a phone via the public /demo tour, and the UX
   audit flags anything under 44x44 as a medium finding. The × stays visually
   small — only its HIT AREA grows. */
.tour-close {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.tour-close:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.tour-pop-title {
  /* Clears the ×'s (now 44px-wide) hit area so a long title can't run under it. */
  margin: 0 var(--touch-target-min) 8px 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.tour-pop-body {
  margin: 0 0 16px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.tour-pop-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tour-pop-progress {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}

.tour-pop-actions {
  display: flex;
  gap: 8px;
}

/* Compact the shared .btn scale for the popover footer — but never below the
   44px touch minimum (Back/Next are the tour's primary controls on a phone). */
.tour-pop-btn.btn {
  min-height: var(--touch-target-min);
  padding: 8px 16px;
  font-size: 0.875rem;
}

/* The "Take the tour" header trigger. Its LOOK is owned by clinic.css
   (`.clin-console-link.clin-demo-action` + `.clin-tour-btn` — an outlined
   primary pill that survives the mobile collapse, spec 2026-08-01 D5); this
   sheet only neutralises the UA <button> defaults the shared look assumes
   away. It deliberately does NOT set border/background any more: doing so
   here silently won (this sheet loads after clinic.css) and flattened the
   trigger back into grey body text between two nav links. */
.clin-tour-btn {
  cursor: pointer;
  font-family: inherit;
}

/* The public demo's in-page cue, on the intake view's back row. A quiet
   outlined pill: visible at a glance next to "← Dashboard" without competing
   with the summary it is pointing at. */
.clin-tour-cue {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.clin-tour-cue:hover {
  background: var(--bg-tertiary);
}

/* Two quick flashes on arrival (clinic-tour.js adds .is-cueing when nothing
   opened by itself): the offer announces itself once and then sits still — a
   looping pulse would compete with the summary for the whole visit. */
@keyframes clin-tour-cue-flash {
  0%,
  100% {
    background: transparent;
    color: var(--color-primary);
    box-shadow: none;
    transform: scale(1);
  }
  25%,
  75% {
    /* Filled + haloed + a touch larger: three cheap cues at once, so it reads
       at a glance on a phone without becoming a second primary button. */
    background: var(--color-primary);
    color: var(--bg-primary);
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-primary) 34%, transparent);
    transform: scale(1.06);
  }
}

.clin-tour-cue.is-cueing {
  animation: clin-tour-cue-flash 0.6s ease-in-out 2;
}

/* An author `display` beats the UA's `display:none` for [hidden] — the engine
   reveals this button by clearing the attribute. */
.clin-tour-cue[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .tour-spotlight,
  .tour-pop {
    transition: none;
  }

  .clin-tour-cue.is-cueing {
    animation: none;
  }
}