/* css/designer-tour.css
   ==========================================================================
   The first-run walkthrough. Everything is prefixed #etour / .etour- so it
   cannot collide with the designer, which has a large inline stylesheet of its
   own and no shared component layer.
   ========================================================================== */

#etour{position:fixed;inset:0;z-index:10000;pointer-events:none}

/* The spotlight is a giant box-shadow rather than four dimming panels: one
   element to move, and it animates as one piece. pointer-events stay off so
   the designer underneath is still visible - the tour explains, it does not
   trap. */
#etour-hole{
  position:fixed;border-radius:10px;
  box-shadow:0 0 0 9999px rgba(8,14,20,.62);
  border:2px solid #00a9e0;
  transition:left .34s cubic-bezier(.4,0,.2,1),top .34s cubic-bezier(.4,0,.2,1),
             width .34s cubic-bezier(.4,0,.2,1),height .34s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}

/* The welcome card: dim everything, cut no hole. Collapsing the spotlight to a
   zero-size box lets its 9999px shadow cover the whole viewport, which is what
   a full dim actually is. Border removed too, or a 0x0 box with a 2px cyan
   border shows as an unexplained dot in the middle of the screen. */
#etour.etour-plain #etour-hole{
  width:0;height:0;left:50%;top:50%;border:none;border-radius:0;
}

#etour-bubble{
  position:fixed;width:300px;max-width:calc(100vw - 24px);
  background:#fff;border-radius:12px;padding:16px 17px;
  box-shadow:0 16px 44px rgba(0,0,0,.3);
  pointer-events:auto;
  transition:left .34s cubic-bezier(.4,0,.2,1),top .34s cubic-bezier(.4,0,.2,1);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#0e1620;
}
/* Every step now wraps its contents in .etour-body so the welcome can put a
   full-bleed coloured band above it. Padding moved off the bubble and onto the
   body, or the band would sit inset with white shoulders. */
#etour-bubble{padding:0}
.etour-body{padding:16px 17px}
#etour-bubble h4{margin:0 0 7px;font-size:15px;line-height:1.3}
#etour-bubble p{margin:0;font-size:13px;line-height:1.55;color:#33424e}

/* ── The welcome card ─────────────────────────────────────────────────────
   Wider than a step bubble: it is an introduction, not a label pointing at a
   button, and 300px makes the greeting look cramped. */
#etour-bubble.etour-welcome{width:400px}
.etour-band{
  background:linear-gradient(135deg,#00a9e0,#0079a6);
  color:#fff;padding:20px 22px;border-radius:12px 12px 0 0;
}
.etour-band small{
  display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  opacity:.88;margin-bottom:5px;
}
.etour-band h4{margin:0;font-size:20px;line-height:1.2;color:#fff}
#etour-bubble.etour-welcome .etour-body{padding:19px 22px 20px}
#etour-bubble.etour-welcome p{font-size:13.5px;color:#44525e}

.etour-foot{display:flex;align-items:center;gap:8px;margin-top:14px}
.etour-dots{flex:1;display:flex;gap:4px;align-items:center}
.etour-dots s{width:5px;height:5px;border-radius:50%;background:#dde4e8;text-decoration:none;transition:all .2s}
.etour-dots s.on{background:#00a9e0;width:15px;border-radius:3px}

.etour-btn{border:none;border-radius:7px;padding:7px 14px;font-size:12.5px;
           font-weight:700;cursor:pointer;font-family:inherit}
.etour-go{background:#00a9e0;color:#fff}
.etour-go:hover{background:#0079a6}
.etour-ghost{background:transparent;color:#5d6c76}
.etour-ghost:hover{color:#0e1620}

#etour-skip{
  position:fixed;top:14px;right:16px;pointer-events:auto;
  background:rgba(0,0,0,.5);color:#fff;border:none;border-radius:6px;
  padding:6px 11px;font-size:12px;cursor:pointer;font-family:inherit;
}
#etour-skip:hover{background:rgba(0,0,0,.7)}

/* The way back in. Bottom-right, quiet, permanent - so skipping the tour costs
   nothing and nobody has to clear site data to see it again. */
/* ⚠ bottom:88px, NOT 16px. The chat widget's bubble is fixed at right:20px
   bottom:20px and is 56px tall - at 16px this sat directly underneath it,
   half-covered. 88px clears it with room to breathe.
   IF THE CHAT BUBBLE MOVES OR RESIZES, THIS NEEDS TO FOLLOW. There is no
   shared layout for the bottom-right corner, so the two files have to agree
   by hand. */
/* SITS JUST ABOVE THE COPYRIGHT LINE.
   #designerCopyright in designer.html is position:fixed at right:10px
   bottom:6px and about 14px tall, so it occupies roughly 6-20px from the
   bottom. 26px clears it by a few pixels without floating away from it.

   ⚠ THREE THINGS SHARE THIS CORNER and none of them knows about the others:
   this button, the copyright line, and the chat widget's bubble (right:20px
   bottom:20px, 56px tall). The chat bubble now sits ON TOP of this button's
   old position - so the button moved DOWN and slightly LEFT of it rather than
   stacking above, which would have pushed it into the canvas.
   If any of the three moves, check the other two.

   right/bottom offsets are unaffected by body{zoom} - a fixed corner stays in
   its corner at any zoom. Only left/top computed from a measured rect needed
   correcting; see zoomFactor() in js/designer-tour.js. */
/* Sits inside the "Tools" heading in the left panel - see showReplay() in
   js/designer-tour.js for why it is not a fixed corner button.

   In the panel's own flow, so it scrolls with it and can overlap nothing. */
#etour-replay.etour-inline{
  background:#fff;color:#0079a6;border:1px solid #dde4e8;border-radius:16px;
  padding:3px 9px;font-size:10.5px;font-weight:600;cursor:pointer;
  font-family:system-ui,-apple-system,sans-serif;
  display:inline-flex;align-items:center;gap:5px;flex:none;
  text-transform:none;letter-spacing:normal;line-height:1.5;
  opacity:.85;transition:opacity .15s;
}
#etour-replay.etour-inline:hover{opacity:1}

/* Only used if the Tools heading is ever renamed or removed. */
#etour-replay.etour-floating{
  position:fixed;right:16px;bottom:88px;z-index:9000;
  background:#fff;color:#0079a6;border:1px solid #dde4e8;border-radius:20px;
  padding:5px 11px;font-size:11.5px;font-weight:600;cursor:pointer;
  box-shadow:0 3px 12px rgba(0,0,0,.12);font-family:system-ui,-apple-system,sans-serif;
  display:flex;align-items:center;gap:7px;opacity:.85;
}
#etour-replay.etour-floating:hover{opacity:1;transform:translateY(-1px)}
#etour-replay.etour-inline span{width:13px;height:13px;font-size:9px}
#etour-replay span{
  width:16px;height:16px;border-radius:50%;background:#00a9e0;color:#fff;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
}

/* On a phone the bubble is pinned to the bottom: a floating box beside a
   spotlight has nowhere to go on a 380px screen. */
@media (max-width:640px){
#etour-bubble{
    left:12px !important;right:12px !important;width:auto;
    top:auto !important;bottom:14px;
  }
  /* The welcome overrides the 400px too, or it hangs off a 380px screen. */
  #etour-bubble.etour-welcome{width:auto}
  .etour-band{padding:16px 18px}
  .etour-band h4{font-size:18px}
  /* On a phone the chat bubble is at right:14px bottom:14px, and there is not
     room to sit beside it - so the button goes above instead. */
  /* The inline button lives in the panel flow - nothing to override. */
}

@media (prefers-reduced-motion:reduce){
  #etour-hole,#etour-bubble{transition:none}
  #etour-replay{transition:none}
}