/* Clause & Effect · product tour (#97). Spotlight ring + one-sentence caption.
   transform/opacity only, no blur or filter (#54). The layer never takes clicks except on the caption card. */
.tour { --tour-accent: var(--ink-btn, var(--accent, #111)); position: fixed; inset: 0; z-index: 140; pointer-events: none; }
.tour-ring {
  position: fixed; left: 0; top: 0; width: 0; height: 0; border-radius: 14px; will-change: transform;
  box-shadow: 0 0 0 2px var(--tour-accent), 0 0 0 100vmax rgb(0 12 31 / .26);
  opacity: 0; transition: opacity .2s ease; /* position and size come from tour.js, one write per frame */
}
.tour-ring.on { opacity: 1; }
/* no spotlight (between targets, the last card): the page stays dimmed */
.tour::before { content: ""; position: fixed; inset: 0; background: rgb(0 12 31 / .26); opacity: 0; transition: opacity .2s ease; }
.tour.dim::before { opacity: 1; }

.tour-card {
  position: fixed; left: 0; top: 0; width: min(360px, calc(100vw - 32px)); box-sizing: border-box; will-change: transform;
  padding: 16px 16px 12px; border-radius: 16px; background: var(--bg, #fff); color: var(--label, var(--ink, #1d1d1f));
  box-shadow: 0 0 0 1px var(--sep-2, var(--line, #e8e8ed)), 0 12px 32px rgb(0 0 0 / .14);
  pointer-events: auto; outline: none; opacity: 0; transition: opacity .2s ease;
}
.tour-card.in { opacity: 1; }
@media (max-width: 639px) { .tour-card { width: min(440px, calc(100vw - 24px)); } }

.tour-text { margin: 0 32px 12px 0; font-size: 17px; line-height: 1.4; font-weight: 500; letter-spacing: -.01em; transition: opacity .15s ease; }
.tour-row { display: flex; align-items: center; gap: 8px; }
.tour-gap { flex: 1; }
.tour-count { font-size: 13px; color: var(--label-2, var(--ink-3, #6e6e73)); font-variant-numeric: tabular-nums; }
.tour-btn {
  min-height: 44px; padding: 0 16px; border-radius: 12px; border: 0; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  background: none; color: var(--tour-accent);
}
.tour-btn.primary { background: var(--tour-accent); color: #fff; }
.tour-btn:focus-visible, .tour-icon:focus-visible { outline: 2px solid var(--tour-accent); outline-offset: 2px; }
.tour-btn[hidden], .tour-icon[hidden] { display: none; }
.tour-icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -6px 0; padding: 0; border: 0; border-radius: 12px;
  background: none; color: var(--label-2, var(--ink-3, #6e6e73)); cursor: pointer;
}
.tour-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-tour-play] svg path[d^="M8"] { fill: currentColor; stroke: none; }
.tour-x { position: absolute; top: 6px; right: 6px; margin: 0; }

/* auto-advance progress: a hairline across the card top */
.tour-bar { position: absolute; left: 16px; right: 16px; top: 0; height: 2px; overflow: hidden; border-radius: 2px; opacity: 0; }
.tour.is-auto .tour-bar { opacity: 1; }
.tour-bar b { display: block; height: 100%; background: var(--tour-accent); transform-origin: 0 50%; transform: scaleX(0); animation: tour-fill var(--tour-ms, 6s) linear forwards; }
@keyframes tour-fill { to { transform: scaleX(1); } }

.tour.closing .tour-ring, .tour.closing .tour-card, .tour.closing::before { opacity: 0; }

/* entry links: quiet text links */
.tour-entry { color: var(--accent, var(--link, #0066cc)); text-decoration: none; font-weight: 500; }
.tour-entry:hover { text-decoration: underline; }
.hero .tour-entry { display: inline-block; margin-top: 16px; font-size: 15px; }

/* while the tour runs: no install nudge, toasts or docked Ask bar over the caption (hidden, not removed: no layout shift) */
html.tour-on .pwa-nudge, html.tour-on #toasts { opacity: 0; pointer-events: none; }
html.tour-on:not(.tour-dock) .ask-dock { visibility: hidden; opacity: 0; pointer-events: none; transition: none; }
/* the sticky header is solid under the dim layer, so no page text shows through it */
html.tour-on .nav { background: #fff !important; }

@media (prefers-reduced-motion: reduce) {
  .tour-ring, .tour-card, .tour-text, .tour::before { transition: none; }
  .tour-bar { display: none; }
}