/* ═══════════════════════════════════════════════════════════════════
   NorthShore CTE — GUIDED TOUR
   Spotlight coachmarks for first-time users (auto) and refreshers
   (Settings ▸ Help & onboarding ▸ Start tour).
   Matches the platform design DNA: white card, Mustang red, Outfit +
   JetBrains Mono, film-checker accent. Honors body.reduce-motion.
   ═══════════════════════════════════════════════════════════════════ */

/* full-screen click shield (transparent — the ring's shadow does the dim) */
.nstour-shield {
  position: fixed; inset: 0; z-index: 9500;
  cursor: default; opacity: 0;
  transition: opacity .25s ease;
}
.nstour-shield.show { opacity: 1; }

/* the lit "hole" over the target — a giant box-shadow dims everything else */
.nstour-ring {
  position: fixed; z-index: 9501; pointer-events: none;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(11,12,16,0.66),
              0 0 0 2px var(--red, #C8102E),
              0 0 0 7px rgba(200,16,46,0.25);
  transition: top .32s cubic-bezier(.5,.1,.25,1),
              left .32s cubic-bezier(.5,.1,.25,1),
              width .32s cubic-bezier(.5,.1,.25,1),
              height .32s cubic-bezier(.5,.1,.25,1),
              box-shadow .25s ease;
}
.nstour-ring::after {
  content: ''; position: absolute; inset: -2px; border-radius: 12px;
  box-shadow: 0 0 0 2px var(--red, #C8102E);
  animation: nstourPulse 1.8s ease-in-out infinite;
}
@keyframes nstourPulse {
  0%, 100% { opacity: .9; transform: scale(1); }
  50%      { opacity: .35; transform: scale(1.018); }
}

/* coachmark card */
.nstour-pop {
  position: fixed; z-index: 9502;
  width: 332px; max-width: calc(100vw - 32px);
  background: #fff; color: var(--text, #1a1d23);
  border: 1px solid var(--border, #e6e6e9);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.34), 0 2px 0 rgba(255,255,255,0.5) inset;
  overflow: hidden;
  opacity: 0; transform: translateY(8px) scale(.985);
  transition: opacity .28s cubic-bezier(.22,1,.36,1),
              transform .28s cubic-bezier(.22,1,.36,1),
              top .32s cubic-bezier(.5,.1,.25,1),
              left .32s cubic-bezier(.5,.1,.25,1);
}
.nstour-pop.in { opacity: 1; transform: translateY(0) scale(1); }
.nstour-pop.centered { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) scale(.985); }
.nstour-pop.centered.in { transform: translate(-50%, -50%) scale(1); }

/* film-checker top accent strip */
.nstour-strip {
  height: 6px;
  background-image:
    linear-gradient(135deg, var(--red,#C8102E) 25%, transparent 25%) 0 0 / 10px 10px,
    linear-gradient(225deg, var(--red,#C8102E) 25%, transparent 25%) 0 0 / 10px 10px;
  background-color: #14161c;
}
.nstour-body { padding: 20px 22px 8px; }
.nstour-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--red, #C8102E); margin-bottom: 9px;
  display: flex; align-items: center; gap: 8px;
}
.nstour-eyebrow .nstour-ico {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--red-glow, rgba(200,16,46,0.08)); font-size: 11px;
}
.nstour-title {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.22;
  margin-bottom: 7px;
}
.nstour-text {
  font-size: 13.5px; line-height: 1.58; color: var(--muted2, #4b5563);
  text-wrap: pretty;
}
.nstour-text b { color: var(--text, #1a1d23); font-weight: 700; }

/* footer: progress + controls */
.nstour-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px 18px;
}
.nstour-dots { display: flex; align-items: center; gap: 6px; margin-right: auto; }
.nstour-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border-light, #d6d6dc); transition: all .25s cubic-bezier(.4,0,.2,1);
}
.nstour-dot.on { background: var(--red, #C8102E); width: 18px; border-radius: 6px; }
.nstour-dot.done { background: rgba(200,16,46,0.4); }

.nstour-btn {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 13px; font-weight: 600; cursor: pointer;
  border-radius: 8px; padding: 8px 14px;
  border: 1px solid var(--border, #e6e6e9); background: #fff; color: var(--text,#1a1d23);
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .15s, border-color .15s, color .15s, transform .12s, box-shadow .15s;
}
.nstour-btn:hover { background: var(--off, #f7f7f8); border-color: var(--border-light, #d6d6dc); }
.nstour-btn:active { transform: scale(.97); }
.nstour-btn.primary { background: var(--red, #C8102E); border-color: var(--red, #C8102E); color: #fff; }
.nstour-btn.primary:hover { background: var(--red-dark, #8f0b20); border-color: var(--red-dark, #8f0b20); transform: translateY(-1px); box-shadow: 0 5px 16px rgba(200,16,46,0.28); }
.nstour-btn.primary:active { transform: translateY(0) scale(.98); }
.nstour-btn.ghost { border: none; background: transparent; color: var(--muted, #6b7280); padding: 8px 6px; }
.nstour-btn.ghost:hover { color: var(--text, #1a1d23); background: transparent; }

/* skip / close in the card corner */
.nstour-skip {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid var(--border, #e6e6e9); background: rgba(255,255,255,0.9);
  color: var(--muted2, #4b5563); cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .12s;
}
.nstour-skip:hover { background: var(--off, #f7f7f8); color: var(--text,#1a1d23); }
.nstour-skip:active { transform: scale(.9); }

/* ── Settings help card ── */
.nstour-help { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nstour-help-ico {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  background: var(--red-glow, rgba(200,16,46,0.08)); color: var(--red, #C8102E);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.nstour-help-tx { flex: 1; min-width: 180px; }
.nstour-help-tx .t { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.nstour-help-tx .s { font-size: 12.5px; color: var(--muted, #6b7280); line-height: 1.5; margin-top: 2px; }

/* reduced-motion: drop the pulse + slide, keep instant placement */
body.reduce-motion .nstour-ring,
body.reduce-motion .nstour-pop,
body.reduce-motion .nstour-ring::after { transition: none !important; animation: none !important; }

/* phone tweaks */
@media (max-width: 600px){
  .nstour-pop { width: calc(100vw - 24px); }
  .nstour-foot { flex-wrap: wrap; }
}