/* Guided tour (js/tour.js): a dim layer with a spotlight hole per target (an SVG path, fill-rule evenodd: clicks in a
   hole reach the page, clicks on the dim don't), a ring around the main target, and a small card. js/tour.js places
   the ring and the card with --x/--y/--w/--h (el.style.setProperty); everything else is here. Both themes come from
   base.css tokens; base.css turns the motion off for reduced motion. */
/* Above the page, its sticky bar and toasts, and above the calculator's growing popup (calc.css .grow, z-index 90),
   which the loading step points at; native <dialog>s still open on top. */
.tour { position: relative; z-index: 95; }
.tour-dim {
  position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%;
  pointer-events: none;   /* the svg box itself lets clicks through; its painted path takes them */
}
.tour-dim path { fill: rgba(5, 4, 3, .62); pointer-events: visiblePainted; }
:root[data-theme="light"] .tour-dim path { fill: rgba(40, 28, 16, .52); }
.tour-ring {
  position: fixed; z-index: 2; left: var(--x, 0); top: var(--y, 0); width: var(--w, 0); height: var(--h, 0);
  border: 2px solid var(--accent); border-radius: calc(var(--radius) + 2px); pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent);
}
.tour-card {
  position: fixed; z-index: 3; left: var(--x, 50%); top: var(--y, 50%);
  width: min(360px, calc(100vw - 24px)); padding: .85rem .95rem .8rem;
  border: 1px solid var(--line-strong); border-top: 2px solid var(--accent); border-radius: var(--radius);
  background: url(../img/noise.svg), var(--panel-solid); color: var(--text); box-shadow: var(--shadow-lg);
}
.tour-card.is-new { animation: tour-in .18s ease-out; }
.tour-head { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .35rem; }
.tour-title {
  flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1.05rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.tour-count { flex: none; color: var(--muted); font-size: .75rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tour-text { margin: 0 0 .75rem; text-wrap: pretty; }
.tour-extra { margin: -.25rem 0 .75rem; }
.tour-btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .45rem; }
.tour-btns .tour-skip { margin-right: auto; border-color: transparent; color: var(--muted); padding-inline: .4rem; }
.tour-btns .tour-skip:hover { color: var(--text); }
.tour-btns .btn-accent { min-width: 5.5rem; }
@keyframes tour-in { from { opacity: 0; transform: translateY(6px); } }

@media (forced-colors: active) {
  .tour-dim path { fill: Canvas; opacity: .7; }
  .tour-ring { border-color: Highlight; }
}
@media print {
  .tour { display: none !important; }
}