/* Atlas tour v3 (approved mockup outputs\atlas-tour-v3-2026-10-21). Positions come from CSS custom properties set by tour.js through the CSSOM.
   Look: white card (20px radius), dark spotlight shadow, white pulse on tap targets, white welcome / outro layers, app font. */
:root{
 --tour-ink:var(--ink,#111111);--tour-ink2:var(--ink-2,#2A2D31);--tour-muted:var(--muted,#5F646B);--tour-line:var(--line,#E4E4DE);
 --tour-dim:rgba(17,17,17,.52);--tour-ease:cubic-bezier(.2,.7,.2,1);--tour-out:.15s;--tour-spot-in:.22s;--tour-card-in:.2s;--tour-cta:.25s;--tour-font:var(--font,Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif);
}
.tour-root{position:fixed;inset:0;z-index:2000;pointer-events:none;font-family:var(--tour-font);color:var(--tour-ink)}
.tour-root[hidden]{display:none}
.tour-dim{position:fixed;inset:0;background:var(--tour-dim);display:none}
.tour-root[data-mode=center] .tour-dim{display:block}
/* Polish 2026-10-28: the dim never drops between spotlight steps. The spotlight's own shadow is the dim while it is live; during out/wait it fades away, so the full-screen
   .tour-dim crossfades in over it (--tour-out) and stays through wait, then fades out over --tour-spot-in while the spotlight grows in: only the hole closes and reopens. */
.tour-root[data-mode=spot] .tour-dim{display:block}
.tour-root[data-mode=spot][data-stage=out] .tour-dim{animation:tour-dim-in var(--tour-out) linear both}
.tour-root[data-mode=spot][data-stage=live] .tour-dim{animation:tour-dim-out var(--tour-spot-in) linear both}
@keyframes tour-dim-in{from{opacity:0}to{opacity:1}}
@keyframes tour-dim-out{from{opacity:1}to{opacity:0}}
.tour-spot{position:fixed;left:var(--tour-x,0);top:var(--tour-y,0);width:var(--tour-w,0);height:var(--tour-h,0);border-radius:var(--tour-radius,14px);box-shadow:0 0 0 200vmax var(--tour-dim);pointer-events:none;display:none}
.tour-root[data-mode=spot] .tour-spot{display:block}
.tour-spot{transform-origin:center}
/* Step choreography (tour.js sets data-stage on the root): out = the previous card + spotlight fade (150 ms), wait = hidden while the page settles once,
   live = the spotlight fades and grows in (220 ms), then the card pops (200 ms, after the spotlight). Individual `scale` so it composes with the centred card's translate. */
.tour-root[data-stage=out] .tour-card,.tour-root[data-stage=out] .tour-spot{opacity:0;transition:opacity var(--tour-out) linear}
.tour-root[data-stage=wait] .tour-card,.tour-root[data-stage=wait] .tour-spot{opacity:0}
.tour-root[data-stage=live] .tour-spot{animation:tour-spot-in var(--tour-spot-in) var(--tour-ease) both}
.tour-root[data-stage=live] .tour-card{animation:tour-card-in var(--tour-card-in) var(--tour-ease) var(--tour-spot-in) both}
.tour-root[data-stage=live][data-mode=center] .tour-card{animation-delay:0s}
.tour-card-inline.tour-card-pop{animation:tour-card-in var(--tour-card-in) var(--tour-ease) both}
@keyframes tour-spot-in{from{opacity:0;scale:.94}to{opacity:1;scale:1}}
@keyframes tour-card-in{from{opacity:0;scale:.96}to{opacity:1;scale:1}}
/* The tap target pulses white (box-shadow only, so the page layout never moves). Several targets at once (the Vitals symbols) get nothing: eight pulses
   read as a flashing box. */
.tour-pulse-el{animation:tour-tapglow 1.8s cubic-bezier(.2,.7,.2,1) infinite;position:relative;z-index:21}
.tour-pulse-el.tour-pulse-still{animation:none;box-shadow:none}   /* no ring at all: the dim + spotlight + "Tap a symbol." already say it */
/* Subtle (2026-10-28): a soft ring that starts only once the typing is done (tour.js pulse), then breathes out and fades. */
@keyframes tour-tapglow{0%{box-shadow:0 0 0 0 rgba(255,255,255,.75)}70%,100%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}
/* The same breath on the spotlight ring of a small control that is pointed at but not tapped (Ask, Data health, the avatar). */
.tour-root[data-ring][data-stage=live] .tour-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;animation:tour-tapglow 1.8s cubic-bezier(.2,.7,.2,1) infinite}

/* Card */
.tour-card{position:fixed;left:var(--tour-card-x,50%);top:var(--tour-card-y,50%);width:min(380px,calc(100vw - 32px));max-height:calc(100vh - 24px);max-height:calc(100svh - 24px);overflow:auto;padding:16px 18px 16px;pointer-events:auto;background:#fff;color:var(--tour-ink);border:0;border-radius:20px;box-shadow:0 24px 60px -20px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.08)}
.tour-root[data-mode=center] .tour-card{left:50%;top:50%;transform:translate(-50%,-50%)}
.tour-root:not([data-mode=center]) .tour-card[data-anchor=bottom]{top:auto;bottom:var(--tour-card-b,12px)}   /* phone card docked to the foot: follows the visible edge when the URL bar resizes the viewport */
.tour-root[data-mode=white] .tour-card,.tour-root[data-mode=white] .tour-spot,.tour-root[data-mode=white] .tour-dim,.tour-root[data-mode=dialog] .tour-card,.tour-root[data-mode=dialog] .tour-spot,.tour-root[data-mode=dialog] .tour-dim{display:none}
.tour-progress{font:600 11px/1.3 var(--tour-font);letter-spacing:.08em;color:var(--tour-muted);text-transform:uppercase}
.tour-track{height:3px;background:#ECECE8;border-radius:2px;margin:8px 0 14px;overflow:hidden}
.tour-track-fill{display:block;height:100%;width:100%;border-radius:inherit;background:var(--tour-ink);transform-origin:left;transform:scaleX(var(--tour-p,0));transition:transform .4s}
.tour-card .tour-h{margin:0 0 6px;font:700 19px/1.25 var(--tour-font);letter-spacing:-.01em;color:var(--tour-ink)}
.tour-card .tour-h:focus{outline:none}
.tour-card .tour-p{margin:0;font:400 15px/1.45 var(--tour-font);color:var(--tour-ink2)}
/* The body is typed: .tour-rest holds the not-yet-typed words (hidden but laid out), so the card is its final size from the first frame. */
.tour-p .tour-rest{visibility:hidden}
.tour-p.typing .tour-typed::after{content:"";display:inline-block;width:2px;height:1em;background:var(--tour-ink);margin-left:2px;vertical-align:-2px;animation:none}
.tour-p.typing.rest .tour-typed::after{animation:tour-blink 1.06s steps(1) infinite}   /* solid while typing, blinks only at rest (2026-10-28) */
.tour-card .tour-tap{margin-top:10px;padding:2px 0 2px 12px;border-left:3px solid var(--tour-ink);font:600 15px/1.4 var(--tour-font);color:var(--tour-ink);opacity:0;transition:opacity var(--tour-cta)}
.tour-card .tour-tap.show{opacity:1}
.tour-card .tour-h:empty,.tour-card .tour-p:empty,.tour-card .tour-tap:empty{display:none}
.tour-foot{display:flex;justify-content:flex-end;margin-top:14px;min-height:44px}
.tour-foot[hidden]{display:none}
.tour-card .tour-next{min-height:44px;padding:0 24px;border:0;border-radius:999px;background:var(--tour-ink);color:#fff;font:700 15px var(--tour-font);cursor:pointer;opacity:0;transform:translateY(4px);transition:opacity var(--tour-cta),transform var(--tour-cta);pointer-events:none}
.tour-card .tour-next.show{opacity:1;transform:none;pointer-events:auto}
.tour-card button:focus-visible{outline:3px solid #004AB5;outline-offset:2px}
/* The card for the Vitals detail step lives INSIDE the native dialog (top layer), under its content, never over its Close button. */
.tour-card-inline{position:static;width:auto;max-height:none;margin:-4px -4px 14px;padding:14px 16px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 12px 28px -18px rgba(0,0,0,.35);border:1px solid var(--tour-line)}
.tour-card-inline .tour-track{margin-bottom:10px}

/* White acts (welcome, reviewer, outro) */
.tour-white{position:fixed;inset:0;z-index:70;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 28px;opacity:0;pointer-events:none;transition:opacity .45s var(--tour-ease)}   /* off = the handoff to the spotlight: .45 s */
.tour-white.on{opacity:1;pointer-events:auto;transition-duration:.7s}
#tour-outro.on{transition-duration:.5s}
.tour-w-stage{display:grid;place-items:center;width:100%}
.tour-w-stage>.tour-w-item{grid-area:1/1}
/* Only the item that is on can be tapped: a faded item still paints above a later sibling (opacity makes a stacking context). */
.tour-w-item{opacity:0;transition:opacity .8s;margin:0;pointer-events:none}
.tour-w-item.on{opacity:1;pointer-events:auto;position:relative;z-index:1}
#tour-w1{width:100%;display:flex;justify-content:center}
#tour-w1 svg{width:min(82%,520px);height:auto;overflow:visible;display:block}
#tour-w1 text{font-family:var(--tour-font);font-weight:600;font-size:118px;letter-spacing:-4px;fill:#111;fill-opacity:0;stroke:#111;stroke-width:1.4;stroke-linejoin:round;stroke-dasharray:var(--tour-dash,440);stroke-dashoffset:var(--tour-dash,440);transition:fill-opacity .9s}
#tour-w1.draw text{animation:tour-draw 2.4s ease-in-out forwards}
#tour-w1.filled text{fill-opacity:1}
@keyframes tour-draw{to{stroke-dashoffset:0}}
.tour-w2{font:600 34px/1.3 var(--tour-font);min-height:44px;color:var(--tour-ink);letter-spacing:-.01em}
.tour-w2.typing::after{content:"";display:inline-block;width:2px;height:1em;background:#111;margin-left:3px;vertical-align:-3px;animation:none}
.tour-w2.typing.rest::after{animation:tour-blink 1.06s steps(1) infinite}
@keyframes tour-blink{50%{opacity:0}}
.tour-w3{display:flex;flex-direction:column;align-items:center;gap:16px;font:400 21px/1.35 var(--tour-font);color:var(--tour-ink2)}
.tour-w3-logo{display:block;width:min(72vw,300px);height:auto}
/* W3 mark (2026-10-28): a copy of the header's animated lockup, large. The seal settles in with a small turn, then the wordmark slides in; the border keeps
   turning and the meridians keep spinning (components.css .atlas-wave / .atlas-mer). Reduced motion and hidden tabs are handled by the .atlas-lockup rules there. */
.tour-w3-mark{display:flex;align-items:center;gap:18px;color:#151515}
.tour-w3-mark .atlas-seal{width:92px;height:92px}
.tour-w3-mark .atlas-wm{height:56px}
.tour-w3.on .tour-w3-mark .atlas-seal{animation:tour-seal-in .9s cubic-bezier(.2,.8,.2,1) both}
.tour-w3.on .tour-w3-mark .atlas-wm{animation:tour-wm-in .7s cubic-bezier(.2,.8,.2,1) .35s both}
@keyframes tour-seal-in{from{opacity:0;transform:scale(.6) rotate(-40deg)}to{opacity:1;transform:none}}
@keyframes tour-wm-in{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
/* The W3 line types into a fixed layout: the not-yet-typed rest is laid out but invisible, so the centred line never reflows; the caret takes no width. */
.tour-w-typed{min-height:1.35em}
.tour-w-rest{visibility:hidden}
.tour-w-typed .typing::after{content:"";display:inline-block;width:2px;height:1em;background:#111;margin:0 -3px 0 1px;vertical-align:-2px;animation:none}
.tour-w-typed .typing.rest::after{animation:tour-blink 1.06s steps(1) infinite}   /* the real Atlas seal + wordmark (assets/atlas/atlas-logo-full.svg, viewBox 690x250), centred above the line */
.tour-w4{display:flex;flex-direction:column;align-items:center;font:400 21px/1.5 var(--tour-font);color:var(--tour-ink2)}
.tour-w4-text{margin:0}
.tour-w-btn{margin-top:28px;min-height:52px;padding:0 30px;border:0;border-radius:999px;background:var(--tour-ink);color:#fff;font:700 16px var(--tour-font);cursor:pointer;opacity:0;transition:opacity .7s;pointer-events:none}
.tour-w-btn.show{opacity:1;pointer-events:auto}
#tour-outro h2{font:700 34px/1.2 var(--tour-font);margin:0;letter-spacing:-.02em;color:var(--tour-ink)}
/* Outro (2026-10-28): it lands like an ending. The white fades in by itself, the animated mark (same lockup as W3, a little smaller) settles in, then the title rises, then the
   body; "Start using Atlas" shows at OUTRO_CTA_MS. Everything holds its first frame (backwards fill) until its delay, and restarts each time .on is added. */
.tour-o-mark{display:flex;align-items:center;gap:14px;color:#151515;margin:0 0 22px}
.tour-o-mark .atlas-seal{width:64px;height:64px}
.tour-o-mark .atlas-wm{height:39px}
.tour-o-logo{display:block;width:min(56vw,230px);height:auto;margin:0 0 22px}
#tour-outro.on .tour-o-mark .atlas-seal{animation:tour-seal-in .9s cubic-bezier(.2,.8,.2,1) .4s both}
#tour-outro.on .tour-o-mark .atlas-wm{animation:tour-wm-in .7s cubic-bezier(.2,.8,.2,1) .75s both}
#tour-outro.on h2{animation:tour-rise .6s cubic-bezier(.2,.8,.2,1) .85s both}
#tour-outro.on p{animation:tour-rise .6s cubic-bezier(.2,.8,.2,1) 1s both}
@keyframes tour-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#tour-outro p strong{font-weight:700;color:var(--tour-ink)}
#tour-outro p{font:400 19px/1.5 var(--tour-font);color:var(--tour-muted);margin:16px 0 0;max-width:420px}

@media(max-width:639px){.tour-card{width:calc(100vw - 24px);padding:14px 16px}.tour-w2{font-size:28px}.tour-w3,.tour-w4{font-size:19px}#tour-outro h2{font-size:30px}.tour-w3-mark{gap:13px}.tour-w3-mark .atlas-seal{width:70px;height:70px}.tour-w3-mark .atlas-wm{height:43px}.tour-o-mark{gap:11px}.tour-o-mark .atlas-seal{width:54px;height:54px}.tour-o-mark .atlas-wm{height:33px}}
/* Short phone viewports (an iframe preview is ~540px tall): a tighter card leaves the target room. */
@media(max-height:620px){.tour-card{padding:10px 14px}.tour-track{margin:6px 0 8px}.tour-card .tour-h{font-size:17px;margin-bottom:4px}.tour-card .tour-p{font-size:14px;line-height:1.35}.tour-card .tour-tap{margin-top:6px;font-size:14px}.tour-foot{margin-top:8px;min-height:40px}.tour-card .tour-next{min-height:40px}}
@media(max-width:600px){.top #tour-replay{font-size:13px;padding:8px}}
@media(prefers-reduced-motion:reduce){
 .tour-pulse-el{animation:none;box-shadow:0 0 0 4px rgba(255,255,255,.9)}
 .tour-root[data-ring] .tour-spot::after{animation:none;box-shadow:0 0 0 3px rgba(255,255,255,.8)}
 .tour-root[data-stage] .tour-card,.tour-root[data-stage] .tour-spot,.tour-card-inline.tour-card-pop{animation:none!important;transition:none!important}
 .tour-p.typing .tour-typed::after{display:none}
 .tour-tap,.tour-card,.tour-spot,.tour-track-fill,.tour-white,.tour-w-item,.tour-w-btn,.tour-next{transition:none!important}
 #tour-w1 text{animation:none;stroke-dashoffset:0;fill-opacity:1}
 .tour-w2.typing::after,.tour-w-typed .typing::after{display:none}
 .tour-w3.on .tour-w3-mark .atlas-seal,.tour-w3.on .tour-w3-mark .atlas-wm,#tour-outro.on .tour-o-mark .atlas-seal,#tour-outro.on .tour-o-mark .atlas-wm,#tour-outro.on h2,#tour-outro.on p{animation:none!important}
 .tour-root[data-mode=spot] .tour-dim{animation:none!important}
 .tour-root[data-mode=spot][data-stage=live] .tour-dim{display:none}
 .tour-p.typing.rest .tour-typed::after{display:none}
}

/* Schedule step (round 4, 2026-10-26). The old step spotlit the Explorer's "Loading this store..." placeholder (forced to 100vh here) and the 1,700 px page then
   replaced it under the live spotlight. The step now waits (patient) for the real chart, so nothing is lit until the data is in. The two sections above the chart
   that fill in from their own late requests (the cost estimate and the 4-week comparison) are not part of the tour, so they are hidden while it runs: they can
   no longer change height above the lit chart after the spotlight is up. */
html[data-tour-active] [data-s2-projection],html[data-tour-active] [data-s2-comparison]{display:none}