/* Guided tour overlay for storystak.com/demo.
   Uses the suite skin's own tokens (--coffee, --accent, --paper, --serif …)
   so the tour never introduces a second visual system on top of the page. */

/* The dim is ONE svg with an even-odd path: an outer rect minus a rounded
   inner rect. Four positioned panels (the previous approach) can only ever
   cut a square hole, so the sharp corners showed through the rounded cards
   underneath. Even-odd also gives click-through for free — the hole is
   unpainted, so it receives no pointer events and the page below stays live. */
/* width/height are NOT optional: <svg> is a replaced element, so `inset:0`
   alone leaves it at its intrinsic 2:1 ratio (1440x720 on a 1440x900
   viewport) and the bottom fifth of the page never gets dimmed. */
.dt-veil{position:fixed;inset:0;width:100%;height:100%;z-index:9000;
  pointer-events:none;opacity:0;transition:opacity .18s var(--ease,ease)}
.dt-on .dt-veil{opacity:1}
.dt-veil path{fill:rgba(33,15,7,.62);pointer-events:auto}

.dt-ring{position:fixed;z-index:9001;pointer-events:none;
  box-shadow:0 0 0 2px var(--accent,#C45D2C),0 12px 40px rgba(33,15,7,.28)}
/* On a step waiting for a click, the outline breathes so the eye lands on it. */
.dt-ring.wait{animation:dt-pulse 1.8s var(--ease,ease) infinite}
@keyframes dt-pulse{
  0%,100%{box-shadow:0 0 0 2px var(--accent,#C45D2C),0 0 0 0 rgba(196,93,44,.38)}
  55%{box-shadow:0 0 0 2px var(--accent,#C45D2C),0 0 0 12px rgba(196,93,44,0)}
}

/* ---- the dock: the step card, and beneath it the mock Claude session ----
   One fixed element holds both, so there is one box to place, one box the
   cue arrow avoids, one box the sheet media query pins. The chat is only
   shown on highlight steps that carry a `chat` scenario, and only when the
   dock fits beside the spotlight (demo-tour.js decides). */
.dt-dock{position:fixed;z-index:9002;width:min(360px,calc(100vw - 32px));
  max-height:calc(100vh - 32px);display:flex;flex-direction:column;gap:12px;
  transition:top .22s var(--ease,ease),left .22s var(--ease,ease)}

.dt-tip{position:relative;flex:none;
  background:var(--snow,#FCF7F5);border:1px solid var(--border,#E2DDD7);
  border-radius:16px;padding:18px 20px 16px;
  box-shadow:0 18px 50px rgba(33,15,7,.22);outline:none}
.dt-tip h3{font-family:var(--serif,Georgia,serif);font-weight:550;
  font-size:21px;line-height:1.2;margin:0 0 8px;color:var(--ink,#0F0F0F)}
.dt-tip p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted,#6B6560)}
.dt-foot{display:flex;align-items:center;gap:10px;margin-top:16px}
.dt-count{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.04em;
  color:var(--faint,#98918B);margin-right:auto;font-variant-numeric:tabular-nums}
.dt-btn{font:inherit;font-size:13px;font-weight:600;border-radius:999px;
  padding:8px 16px;cursor:pointer;border:1px solid transparent;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.dt-btn.go{background:var(--accent,#C45D2C);color:#fff}
.dt-btn.go:hover{background:var(--accent-light,#E8724A)}
.dt-btn.quiet{background:transparent;color:var(--muted,#6B6560);
  border-color:var(--border,#E2DDD7)}
.dt-btn.quiet:hover{color:var(--ink,#0F0F0F);border-color:var(--faint,#98918B)}
.dt-btn i{font-size:15px}
/* the sheet-only "See it in Claude" toggle; desktop shows the chat beside */
.dt-btn.chat{display:none}
.dt-skip{position:absolute;top:14px;right:16px;background:none;border:0;
  cursor:pointer;color:var(--faint,#98918B);font:inherit;font-size:12px;
  padding:2px 4px;line-height:1}
.dt-skip:hover{color:var(--ink,#0F0F0F)}
/* screen-reader announcement of each step; sighted visitors get the card */
.dt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* ---- the mock Claude session ----
   Ported from the homepage's vmcp card (storystak-agency/index.html) with the
   same dark palette, scoped here so the tour's light card and the page's own
   light transcript on /connect keep their own tokens. The card is a fixed
   flex box: the feed scrolls inside it, so its height never depends on how
   much of the scenario has played. */
.dt-chat{
  --dtc-card:#1a130d;--dtc-soft:rgba(247,227,218,.06);--dtc-ink:#f3eae3;
  --dtc-muted:#a8988c;--dtc-dim:#756657;
  --dtc-bronze:var(--accent,#C45D2C);--dtc-bronze-bright:var(--accent-light,#E8724A);
  flex:0 1 480px;min-height:300px;display:flex;flex-direction:column;
  background:var(--dtc-card);border-radius:18px;padding:16px 18px 14px;
  box-shadow:0 18px 50px rgba(33,15,7,.35);
  font-family:var(--sans,system-ui,sans-serif);line-height:1.55;color:var(--dtc-ink)}
.dt-chat[hidden]{display:none}
.dt-chat *,.dt-chat *::before,.dt-chat *::after{box-sizing:border-box;margin:0;padding:0}
.dt-chat-bar{display:flex;align-items:center;justify-content:center;gap:8px;
  padding-bottom:14px;flex:none}
.dt-chat-mark{width:16px;height:16px;flex:none}
.dt-chat-title{font-size:13px;font-weight:600;color:var(--dtc-ink)}
.dt-chat-title span{font-weight:400;color:var(--dtc-dim)}
.dt-chat-feed{flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;
  overflow-y:auto;scrollbar-width:none}
.dt-chat-feed::-webkit-scrollbar{display:none}
.dt-chat-msg:not(.on){display:none}
.dt-chat-msg.on{animation:dt-chat-up .6s var(--ease,ease)}
@keyframes dt-chat-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dt-chat-user{align-self:flex-end;max-width:90%;background:var(--dtc-soft);
  border-radius:14px;padding:11px 14px;font-size:14px;line-height:1.5;color:var(--dtc-muted)}
.dt-chat-tool{align-self:flex-start;display:flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dtc-dim);flex-wrap:wrap}
.dt-chat-tool .dt-chat-lbl{color:var(--dtc-dim)}
.dt-chat-tool.working .dt-chat-lbl{
  background:linear-gradient(100deg,var(--dtc-dim) 35%,var(--dtc-ink) 50%,var(--dtc-dim) 65%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;animation:dt-chat-shimmer 1.5s linear infinite}
@keyframes dt-chat-shimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}
.dt-chat-chev{font-size:12px;color:var(--dtc-dim)}
.dt-chat-check{font-size:11.5px;letter-spacing:.04em;text-transform:none;
  color:var(--dtc-bronze-bright);opacity:0;transition:opacity .5s var(--ease,ease)}
.dt-chat-check.on{opacity:1}
.dt-chat-status{align-self:flex-start;max-width:95%;font-size:13.5px;line-height:1.55;
  color:var(--dtc-muted)}
.dt-chat-num{color:var(--dtc-ink);font-weight:500}
.dt-chat-reply{align-self:flex-start;max-width:95%;font-size:14px;line-height:1.55;
  color:var(--dtc-ink)}
/* the refusal: the Stak saying no is the beat that sells it */
.dt-chat-refuse{border-left:3px solid var(--dtc-bronze);padding-left:12px}
.dt-chat-refuse .dt-chat-tag{display:block;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dtc-bronze-bright);
  margin-bottom:4px}
.dt-chat-file{align-self:flex-start;display:flex;align-items:center;gap:12px;
  max-width:95%;background:var(--dtc-soft);border:1px solid rgba(247,227,218,.1);
  border-radius:12px;padding:10px 14px}
.dt-chat-file svg{width:22px;height:22px;color:var(--dtc-bronze-bright);flex:none}
.dt-chat-fname{font-family:var(--mono,monospace);font-size:12.5px;color:var(--dtc-ink);
  line-height:1.4}
.dt-chat-fmeta{font-size:12px;color:var(--dtc-muted);line-height:1.4}
.dt-chat-input{flex:none;display:flex;align-items:center;gap:10px;margin-top:14px;
  background:var(--dtc-soft);border-radius:12px;padding:11px 14px;
  font-size:13px;color:var(--dtc-dim)}
.dt-chat-input svg{width:16px;height:16px;color:var(--dtc-dim);flex:none}
.dt-chat-send{margin-left:auto;width:26px;height:26px;border-radius:50%;
  background:var(--dtc-bronze);display:flex;align-items:center;justify-content:center;flex:none}
.dt-chat-send svg{width:12px;height:12px;color:#fcf7f5}
.dt-chat-cap{flex:none;margin-top:10px;font-size:11.5px;line-height:1.4;
  color:var(--dtc-dim);text-align:center}

/* ---- the pointer on a step that waits for a real click ---- */
.dt-arrow{position:fixed;z-index:9003;pointer-events:none;
  display:flex;align-items:center;gap:8px;
  background:var(--coffee,#210F07);color:#FCF7F5;
  border-radius:999px;padding:9px 15px;white-space:nowrap;
  font-size:13px;font-weight:600;line-height:1;
  box-shadow:0 10px 30px rgba(33,15,7,.32)}
.dt-arrow[hidden]{display:none}
.dt-arrow i{font-size:15px;color:var(--accent-light,#E8724A)}
/* the nudge points at the target and bobs toward it */
.dt-arrow[data-dir="down"]{animation:dt-bob-y 1.25s ease-in-out infinite}
.dt-arrow[data-dir="up"]{animation:dt-bob-y-up 1.25s ease-in-out infinite}
.dt-arrow[data-dir="right"]{animation:dt-bob-x 1.25s ease-in-out infinite}
.dt-arrow[data-dir="left"]{animation:dt-bob-x-left 1.25s ease-in-out infinite}
@keyframes dt-bob-y{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes dt-bob-y-up{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes dt-bob-x{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
@keyframes dt-bob-x-left{0%,100%{transform:translateX(0)}50%{transform:translateX(-7px)}}

/* ---- corner pills ---- */
.dt-pills{position:fixed;right:18px;bottom:18px;z-index:8000;
  display:flex;align-items:center;gap:10px}
.dt-pill{display:inline-flex;align-items:center;gap:8px;
  border:0;cursor:pointer;font:inherit;font-size:13px;font-weight:600;
  border-radius:999px;padding:11px 18px;
  box-shadow:0 10px 30px rgba(33,15,7,.28)}
.dt-pill.replay{background:var(--coffee,#210F07);color:#FCF7F5}
.dt-pill.replay:hover{background:#31190C}
.dt-pill.resume{background:var(--accent,#C45D2C);color:#fff}
.dt-pill.resume:hover{background:var(--accent-light,#E8724A)}
.dt-pill[hidden]{display:none}
.dt-on .dt-pills{display:none}

/* Under 900px the nav pill collapses to a hamburger and precise spotlighting
   stops being useful — the dock becomes a bottom sheet and the target is
   scrolled into the band the sheet leaves free. There is no side to put the
   chat on, so it lives behind a toggle in the sheet: "See it in Claude"
   swaps the step copy for the card, height-capped so the band survives. */
@media (max-width:900px){
  .dt-dock{left:12px!important;right:12px;width:auto;bottom:12px;top:auto!important;
    max-height:none;gap:0}
  .dt-tip{border-radius:18px;padding:18px 18px 16px}
  .dt-tip h3{font-size:20px;margin-bottom:8px}
  .dt-tip p{font-size:14px}
  /* The footer on a phone: the toggle takes its own full-width row above
     Back / Next, nothing wraps mid-label, and the count keeps to one line. */
  .dt-foot{flex-wrap:wrap;gap:8px 10px;margin-top:14px}
  .dt-btn{white-space:nowrap;padding:9px 16px}
  .dt-count{white-space:nowrap}
  .dt-dock.has-chat .dt-btn.chat{flex:1 0 100%;order:-1;justify-content:center;
    margin-bottom:2px}
  .dt-chat{display:none}
  .dt-dock.has-chat .dt-btn.chat{display:inline-flex}
  .dt-dock.chat-open .dt-tip>h3,.dt-dock.chat-open .dt-tip>p{display:none}
  .dt-dock.chat-open .dt-tip{padding-top:44px}
  .dt-dock.chat-open .dt-chat{display:flex;order:-1;flex:none;height:min(52vh,420px);
    min-height:0;margin:0 0 8px;box-shadow:none;border:1px solid rgba(247,227,218,.08)}
  .dt-dock.chat-open .dt-foot{margin-top:0}
  .dt-pills{right:12px;bottom:12px}
  .dt-pill{padding:10px 15px;font-size:12.5px}
  .dt-arrow{font-size:12.5px;padding:8px 13px}
}
@media (prefers-reduced-motion:reduce){
  .dt-veil,.dt-dock,.dt-chat-check{transition:none}
  .dt-ring.wait,.dt-arrow,.dt-chat-msg.on{animation:none}
  .dt-chat-tool.working .dt-chat-lbl{animation:none;background:none;color:var(--dtc-dim)}
}