/* ==========================================================================
   workspace-tour.css  —  first-time guided tour (Phase C)
   --------------------------------------------------------------------------
   A 4-step spotlight-coachmark tour for the V2 workspace. The whole mechanism
   is the box-shadow trick: a transparent fixed box positioned over the current
   target, with a huge spread-shadow that dims everything else. A popover sits
   next to it with [Back · Skip · Next] + progress dots.

   Prefix: wt-   ·   Owner: window.WorkspaceTour (js/workspace-tour.src.js)

   Design tokens: reuses the global brand tokens (--parchment / --forest /
   --sienna / --ink / --rule) with hard fallbacks — the overlay is body-level
   (outside #workspace-pane-root) so it can't depend on the --wsp-* aliases.
   ========================================================================== */

:root {
  --wt-paper:   var(--parchment, #FAF7F2);
  --wt-ink:     var(--ink, #1f2a24);
  --wt-ink-2:   var(--ink-2, #3a4a42);
  --wt-ink-3:   var(--ink-3, #6a7770);
  --wt-forest:  var(--forest, #2D6A4F);
  --wt-forest-d:var(--forest-dk, #1B4332);
  --wt-sienna:  var(--sienna, #C4532B);
  --wt-rule:    var(--rule, #e3decf);
  --wt-rule-2:  var(--rule-2, #d3ccba);
  --wt-font-display: "Fraunces", Georgia, serif;
  --wt-font-body:    "DM Sans", system-ui, -apple-system, sans-serif;
  --wt-font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --wt-pop-shadow: 0 18px 48px -8px rgba(20,28,24,.28), 0 4px 12px rgba(20,28,24,.12);
}

/* The whole overlay — only present in the DOM while a tour is running. */
.wt-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;          /* above the workspace pane (which is ~ < 1000) */
  pointer-events: none;   /* the dim doesn't catch clicks; only the popover does */
}

/* B1 fix: while the tour is active, drop the sticky back-strip's z-index to 0
   within its own stacking context. The strip lives inside #workspace-pane-root
   (position:fixed, z-index:40). The tour overlay (position:fixed, z-index:1100)
   is appended to document.body and paints above the pane root, but the strip's
   position:sticky + z-index:5 was creating a stacking-context layer that bled
   through the spotlight cut-out, painting a green bar across the dimmed overlay.
   Setting it to z-index:0 collapses it to the root's base layer; the fixed
   z-index:1100 overlay always wins. The class is toggled by WorkspaceTour. */
body.wsp-tour-active .wsp-back-strip {
  z-index: 0;
}

/* The spotlight: a transparent box over the target, dimming the rest of the
   screen via the spread of the box-shadow. pointer-events:none so the target
   stays "behind glass" but the click still goes nowhere harmful (we don't act
   on it). */
.wt-spotlight {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(20, 28, 24, .55);
  transition: left .28s cubic-bezier(.22,1,.36,1),
              top .28s cubic-bezier(.22,1,.36,1),
              width .28s cubic-bezier(.22,1,.36,1),
              height .28s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}

/* The coachmark popover. */
.wt-pop {
  position: fixed;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--wt-paper);
  border: 1px solid var(--wt-rule);
  border-radius: 14px;
  box-shadow: var(--wt-pop-shadow);
  padding: 20px 20px 14px;
  pointer-events: auto;
  transition: left .28s cubic-bezier(.22,1,.36,1),
              top .28s cubic-bezier(.22,1,.36,1);
  outline: none;
}
.wt-pop:focus-visible { box-shadow: var(--wt-pop-shadow), 0 0 0 3px rgba(45,106,79,.35); }

/* A little arrow pointing from the popover toward the spotlight. */
.wt-pop::before {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  background: var(--wt-paper);
  border-left: 1px solid var(--wt-rule);
  border-bottom: 1px solid var(--wt-rule);
}
.wt-pop[data-arrow="left"]::before  { left: -8px;  top: 28px; transform: rotate(45deg); }
.wt-pop[data-arrow="right"]::before { right: -8px; top: 28px; transform: rotate(225deg); }
.wt-pop[data-arrow="top"]::before   { top: -8px;  left: 28px; transform: rotate(135deg); }
.wt-pop[data-arrow="bottom"]::before{ bottom: -8px;left: 28px; transform: rotate(-45deg); }
.wt-pop[data-arrow="none"]::before  { display: none; }

.wt-pop__step {
  font-family: var(--wt-font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--wt-sienna);
  margin-bottom: 8px;
}
.wt-pop__title {
  font-family: var(--wt-font-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  color: var(--wt-ink);
  margin: 0 0 8px;
}
.wt-pop__body {
  font-family: var(--wt-font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--wt-ink-2);
  margin: 0 0 18px;
}
.wt-pop__body strong { color: var(--wt-ink); font-weight: 600; }

.wt-pop__foot {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wt-pop__dots { display: inline-flex; gap: 6px; }
.wt-pop__dots i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--wt-rule-2);
  display: inline-block;
}
.wt-pop__dots i.is-on { background: var(--wt-forest); }

.wt-pop__skip {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--wt-ink-3);
  font-family: var(--wt-font-body);
  font-size: 13px;
  padding: 8px 8px;
  cursor: pointer;
  border-radius: 6px;
  min-height: 32px;
}
.wt-pop__skip:hover { color: var(--wt-ink-2); }
.wt-pop__skip:focus-visible { outline: 2px solid var(--wt-forest); outline-offset: 1px; }

.wt-pop__back {
  background: transparent;
  border: 1px solid var(--wt-rule);
  color: var(--wt-ink-2);
  font-family: var(--wt-font-body);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  min-height: 34px;
}
.wt-pop__back:hover { background: rgba(0,0,0,.03); }
.wt-pop__back:focus-visible { outline: 2px solid var(--wt-forest); outline-offset: 1px; }

.wt-pop__next {
  background: var(--wt-forest);
  border: 0;
  color: #fff;
  font-family: var(--wt-font-body);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  min-height: 34px;
}
.wt-pop__next:hover { background: var(--wt-forest-d); }
.wt-pop__next:focus-visible { outline: 2px solid var(--wt-forest-d); outline-offset: 2px; }

/* ── Mobile (<820px) ───────────────────────────────────────────────────── */
@media (max-width: 819px) {
  .wt-pop {
    width: calc(100vw - 32px);
    left: 16px !important;
    right: 16px;
  }
  /* On mobile the popover always sits below its target (or, when there's no
     room, top-anchored) — the arrow points up. JS sets data-arrow="top". */
}

/* ── Reduced motion — no transitions, instant repositioning ────────────── */
@media (prefers-reduced-motion: reduce) {
  .wt-spotlight, .wt-pop { transition: none !important; }
}