/* 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;
  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{display:none}

/* The dim is an SVG path with one hole per spot (even-odd), so a step can
   light up several buttons at once - see paintDim() in js/designer-tour.js.
   The old 9999px box-shadow on the cutout could only ever make one hole. */
#etour-dim{position:fixed;left:0;top:0;pointer-events:none;overflow:visible}
#etour-dim path{fill:rgba(8,14,20,.62)}

/* Extra spots on a multi-spot step. Same outline as the main cutout, no slide. */
.etour-ring{position:fixed;border-radius:10px;border:2px solid #00a9e0;pointer-events:none}

#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}

/* The buttons never shrink or leave the card: the progress dots give way
   instead (they wrap onto a second short row), and on a very narrow card the
   buttons drop to their own line. Before (26 Sep 2026) the dots kept their
   full width and pushed "Show me around" past the right edge. */
.etour-foot{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap;justify-content:flex-end}
.etour-dots{flex:1 1 60px;min-width:60px;display:flex;flex-wrap:wrap;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;white-space:nowrap;flex:none}
.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)}
/* Phone only: Skip lives in the bubble, top-right, as a close button. */
#etour-bubble .etour-body{position:relative}
.etour-x{position:absolute;top:6px;right:6px;width:34px;height:34px;border:none;border-radius:50%;
  background:transparent;color:#5d6c76;font-size:22px;line-height:1;cursor:pointer;font-family:inherit}
.etour-x:hover{background:#eef2f4;color:#0e1620}
#etour-bubble .etour-x + h4{padding-right:30px}

/* 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){
/* On a phone the bubble spans the screen. js/designer-tour.js still chooses
   its HEIGHT - above or below the spotlight, whichever has room - because it
   used to be pinned to the bottom, which on the phone designer is exactly
   where the toolbar it was pointing at lives. */
#etour-bubble{width:calc(100vw - 24px);max-width:420px}
  /* The welcome overrides the 400px too, or it hangs off a 380px screen. */
  #etour-bubble.etour-welcome{width:calc(100vw - 24px)}
  .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}
}