/* =============================================================================
   tutorial-gw.css — gifts.wtf first-run SPOTLIGHT COACH-MARK tour (build #5).

   A faithful port of Intel Maps' terminal tour styling (web_terminal/tutorial.css)
   restyled to the gifts.wtf theme: a dimming SPOTLIGHT cutout (.gwt-hole) whose
   giant box-shadow darkens the whole viewport EXCEPT the highlighted element,
   ringed in the brand sky-blue; a small tooltip card (.gwt-card) that anchors
   below/above the target with a pointer arrow; progress dots; and a
   [Skip] ... [Back][Next] footer. A step with no on-page target centers its card
   (data-center) with no spotlight.

   Theme-aware: every colour is a SHARED theme.css var (--void/--panel/--raised/
   --hairline*/--ink-*/--p100…--p700/--on-accent) so it re-themes for free in
   dark / light / hashtag. CSP-safe (no external anything). Compositor-only
   motion; prefers-reduced-motion honored. Owns ONLY the #gwTut subtree.

   Companion: tutorial-gw.js  ·  root #gwTut  ·  launcher #gwTutStart (styled in
   market.css — not touched here).
   ========================================================================== */

/* per-theme dim behind the spotlight (the hole's box-shadow uses this var) */
:root, :root[data-theme="dark"]{ --gwt-dim:rgba(3,6,12,.74); }
:root[data-theme="light"]{ --gwt-dim:rgba(12,26,44,.44); }
:root[data-theme="hashtag"]{ --gwt-dim:rgba(6,52,92,.52); }

/* ---- overlay root (hidden until data-open) -------------------------------- */
#gwTut{
  position:fixed; inset:0;
  z-index:230;                 /* above the tester FAB / toasts, below nothing critical */
  display:none;
  pointer-events:none;         /* children opt back in */
}
#gwTut[data-open]{ display:block; }

/* transparent click-capture backdrop (dim is painted by .gwt-hole) */
#gwTut .gwt-back{
  position:absolute; inset:0;
  pointer-events:auto; cursor:pointer;
  z-index:1;
}

/* ---- the spotlight cutout ------------------------------------------------- *
 * A positioned rect whose enormous box-shadow dims the whole viewport EXCEPT
 * its own area, then layers a soft sky-blue ring + glow on top. */
#gwTut .gwt-hole{
  position:absolute; left:0; top:0; width:0; height:0;
  border-radius:12px;
  pointer-events:none;         /* clicks fall through to the backdrop */
  z-index:2;
  box-shadow:
    0 0 0 9999px var(--gwt-dim),
    0 0 0 2px var(--p400),
    0 0 26px 8px rgba(77,169,238,.42);
  transition:left .28s ease, top .28s ease, width .28s ease, height .28s ease;
}
/* centered step: no target, so no spotlight */
#gwTut[data-center] .gwt-hole{ display:none; }
#gwTut[data-center] .gwt-back{
  background:var(--gwt-dim);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}

/* ---- tooltip card --------------------------------------------------------- */
#gwTut .gwt-card{
  position:absolute; z-index:3;
  pointer-events:auto; box-sizing:border-box;
  width:300px; max-width:calc(100vw - 16px);
  padding:15px 16px 13px;
  background:var(--panel);
  color:var(--ink-mid);
  border:1px solid var(--hairline-2);
  border-radius:14px;
  box-shadow:
    0 14px 44px rgba(0,0,0,.5),
    0 0 0 1px rgba(0,0,0,.28),
    0 0 22px rgba(77,169,238,.22);
  transition:left .24s ease, top .24s ease, opacity .18s ease;
}
/* accent hairline along the top edge of the card */
#gwTut .gwt-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  border-radius:14px 14px 0 0;
  background:linear-gradient(90deg,var(--p300),var(--p400),var(--p500));
  opacity:.9;
}
/* centered step: drop the card in the middle of the viewport */
#gwTut[data-center] .gwt-card{
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(360px,calc(100vw - 32px));
}

#gwTut .gwt-title{
  margin:2px 0 5px;
  font:800 15px/1.25 var(--font-ui,system-ui,sans-serif);
  letter-spacing:-.005em;
  color:var(--ink-hi);
}
#gwTut .gwt-body{
  margin:0 0 11px;
  font:450 13px/1.5 var(--font-ui,system-ui,sans-serif);
  color:var(--ink-mid);
}

/* progress dots */
#gwTut .gwt-dots{ display:flex; gap:6px; margin:0 0 12px; }
#gwTut .gwt-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--hairline-2);
  transition:transform .2s ease, background .2s ease;
}
#gwTut .gwt-dot.on{ background:var(--p400); transform:scale(1.3); }

/* footer / buttons */
#gwTut .gwt-foot{ display:flex; align-items:center; gap:8px; }
#gwTut .gwt-sp{ flex:1 1 auto; }
#gwTut .gwt-btn{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  font:600 12.5px/1 var(--font-ui,system-ui,sans-serif);
  padding:8px 14px; border-radius:9px;
  border:1px solid transparent;
  transition:transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
#gwTut .gwt-btn:active{ transform:translateY(1px); }
#gwTut .gwt-btn--ghost{
  background:transparent; color:var(--ink-lo);
  border-color:var(--hairline-2);
}
#gwTut .gwt-btn--ghost:hover{ color:var(--ink-hi); border-color:var(--p300); background:var(--hover); }
#gwTut .gwt-btn--go{
  background:var(--p400); color:var(--on-accent);
  border-color:var(--p400);
}
#gwTut .gwt-btn--go:hover{ background:var(--p500); border-color:var(--p500); }
#gwTut .gwt-btn:focus-visible{ outline:2px solid var(--p400); outline-offset:1px; }

/* pointer arrow (hidden on centered steps) */
#gwTut .gwt-arrow{
  position:absolute; left:50%;
  width:12px; height:12px;
  background:var(--panel);
  border:1px solid var(--hairline-2);
  transform:translateX(-50%) rotate(45deg);
  pointer-events:none;
}
#gwTut .gwt-card[data-place="below"] .gwt-arrow{ top:-7px; border-right:none; border-bottom:none; }
#gwTut .gwt-card[data-place="above"] .gwt-arrow{ bottom:-7px; border-left:none; border-top:none; }
#gwTut[data-center] .gwt-arrow{ display:none; }

/* subtle entrance for the card (compositor only) */
#gwTut[data-open] .gwt-card{ animation:gwtCardIn .22s ease both; }
@keyframes gwtCardIn{
  from{ opacity:0; transform:translateY(4px); }
  to  { opacity:1; transform:translateY(0); }
}
#gwTut[data-open][data-center] .gwt-card{ animation:gwtCardInC .22s ease both; }
@keyframes gwtCardInC{
  from{ opacity:0; transform:translate(-50%,calc(-50% + 4px)); }
  to  { opacity:1; transform:translate(-50%,-50%); }
}

/* ---- reduced motion ------------------------------------------------------- */
#gwTut[data-motion="reduced"] .gwt-hole,
#gwTut[data-motion="reduced"] .gwt-card,
#gwTut[data-motion="reduced"] .gwt-dot{ transition:none !important; }
#gwTut[data-motion="reduced"][data-open] .gwt-card{ animation:none !important; }

@media (prefers-reduced-motion:reduce){
  #gwTut .gwt-hole,
  #gwTut .gwt-card,
  #gwTut .gwt-dot{ transition:none !important; }
  #gwTut[data-open] .gwt-card{ animation:none !important; }
}