/* ══════════════════════════════════════════════════════════════
   ONBOARDING WALKTHROUGH (869e5605p) — spotlight tour, dependency-free.
   ══════════════════════════════════════════════════════════════ */

.bi-tour-open { overflow: hidden; }

/* (13-08 rework) The backdrop is a transparent click-catcher; the visible
   dimming lives in four .bi-tour__shade panels positioned by tour.js AROUND
   the spotlight hole — the highlighted element itself is never covered, so
   it stays fully sharp and undimmed while the rest is blurred and only
   slightly darkened. */
.bi-tour__backdrop {
  position: fixed;
  inset: 0;
  z-index: 9990;
}
.bi-tour__shade {
  position: fixed;
  z-index: 9990;
  background: hsl(var(--bg-hsl) / .45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: none;
  transition: top 220ms ease, left 220ms ease, width 220ms ease, height 220ms ease;
}

.bi-tour__spot {
  position: fixed;
  z-index: 9991;
  border-radius: var(--bi-radius, 0);
  box-shadow: 0 0 0 2px var(--gold), 0 0 36px hsl(var(--gold-hsl) / .3);
  /* Steady subtle lift while highlighted... */
  background: hsl(var(--gold-hsl) / .08);
  pointer-events: none;
  transition: top 220ms ease, left 220ms ease, width 220ms ease, height 220ms ease;
}
/* ...and a bright flash for the first moment of each step. */
.bi-tour__spot.is-flash {
  animation: bi-tour-flash 950ms ease-out both;
}
@keyframes bi-tour-flash {
  0%   { background: hsl(var(--fg-hsl) / .3); }
  100% { background: hsl(var(--gold-hsl) / .08); }
}
.bi-tour__spot[hidden] { display: none; }

.bi-tour__card {
  position: fixed;
  z-index: 9992;
  width: min(360px, calc(100vw - 32px));
  background: var(--sur2);
  border: 1px solid var(--gold-dim);
  border-radius: 0;
  padding: 20px 20px 16px;
  box-shadow: 0 20px 60px hsl(220 45% 2% / .55);
  color: var(--fg);
  font-family: var(--f-label), system-ui, sans-serif;
}
.bi-tour__card.is-centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.bi-tour__card.is-anchored { transform: none; }

@media (max-width: 640px) {
  .bi-tour__card,
  .bi-tour__card.is-anchored,
  .bi-tour__card.is-centered {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    top: auto !important;
    width: auto;
    transform: none;
    max-height: 60vh;
    overflow-y: auto;
  }
}

.bi-tour__close {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 0;
}
.bi-tour__close:hover,
.bi-tour__close:focus-visible { color: var(--fg); background: hsl(var(--gold-hsl) / .12); }

.bi-tour__eyebrow {
  font-size: 11px;
  letter-spacing: var(--bi-ls-overline, 1px);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.bi-tour__title {
  font-family: var(--f-display), Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--fg);
  padding-inline-end: 20px;
}

.bi-tour__body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 18px;
}

.bi-tour__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bi-tour__skip {
  background: none;
  border: 0;
  color: var(--muted2);
  font-size: 13px;
  cursor: pointer;
  padding: 6px 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bi-tour__skip:hover, .bi-tour__skip:focus-visible { color: var(--muted); }
.bi-tour__skip[hidden] { visibility: hidden; }

.bi-tour__actions { display: flex; gap: 8px; margin-inline-start: auto; }

.bi-tour__back {
  background: none;
  border: 1px solid var(--gold-dim);
  color: var(--fg);
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 0;
  cursor: pointer;
}
.bi-tour__back:hover, .bi-tour__back:focus-visible { border-color: var(--gold); }
.bi-tour__back[hidden] { display: none; }

.bi-tour__next {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--bg);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 0;
  cursor: pointer;
}
.bi-tour__next:hover, .bi-tour__next:focus-visible { background: var(--gold-light); }

/* Persistent trigger (header icon + footer link) */
.bi-tour-trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 0;
  /* It's a <button> — border:0 replaces the removed gold-dim border AND
     resets the browser's own default button border, which would otherwise
     show through once the gold-dim declaration is gone (869ehnavq). */
  border: 0;
  color: var(--fg);
  background: none;
  cursor: pointer;
  font-family: var(--f-label), system-ui, sans-serif;
  /* (task 1638) Was a hardcoded 13px — 18% larger than the header row's own
     --bi-size-button token (11px), a real oversize on this "?" trigger that
     was only masked in practice by a higher-specificity global
     `body.bi-brand-skin button` reset elsewhere that already uses the
     token. Using the token directly here removes that reliance. */
  font-size: var(--bi-size-button, 11px);
  line-height: 1;
}
/* Round 6 (869ehnavq): no ring at rest or on hover, same as .bi-nav__icon —
   drops the round-5 patch that only masked this via a body.bi-brand-skin
   override elsewhere. */
.bi-tour-trigger-icon:hover, .bi-tour-trigger-icon:focus-visible { color: var(--gold); }
/* 3001: phone widths drop this icon from the crowded mobile bar — it
   reappears relabelled "Help" inside the fullscreen overlay instead (see
   .bi-nav-overlay__help in nav.css). Desktop/tablet keep this exact icon,
   unchanged. Only usage in the codebase is header.php's bar button. */
@media (max-width: 640px) {
  .bi-tour-trigger-icon { display: none; }
}

.site-footer__tour-trigger {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-family: var(--f-label);
  font-size: .6875rem;
  letter-spacing: var(--bi-ls-button, 1px);
  text-transform: uppercase;
  font-weight: 500;
  color: hsl(var(--fg-hsl) / 0.35);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer__tour-trigger:hover,
.site-footer__tour-trigger:focus-visible { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .bi-tour__spot { transition: none; animation: none; }
  .bi-tour__shade { transition: none; }
}