/* ---------- the guided tour ---------------------------------------------------------------
 * Prominence: a full-screen veil under each popup so the tour cannot be missed. The veil, the
 * lifted target, and the popup all live inside #ide-root (a fixed, z-index:70, will-change
 * stacking context), so within that one context the veil (330), the lifted target (335) and the
 * popup (340) order the way the numbers intend. A veil at document.body level would paint over the
 * whole panel and the target could never rise above it.
 *
 * Every selector is scoped under #ide-root so these rules beat the older tour styles that still
 * live in dominion-ide.css by specificity, whatever the load order.
 */

/* The veil is now ONLY a click-catcher: fully transparent. The dimming moved to the spot
 * below, which has a genuine hole over the target. The old full dim + tour-lift approach went
 * black over everything on the phone: a lifted target cannot escape an intermediate stacking
 * context (the v97 grid work added several), so z:335 never actually rose above the veil.
 * A hole needs no z-index cooperation from anybody (Fred, layout pass 07-23). */
#ide-root .ide-tour-veil {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 330;
  pointer-events: auto;   /* absorbs stray taps; only the popup stays live */
}

/* The spotlight: sized and placed over the target by place(); everything OUTSIDE it is dimmed
 * by the giant box-shadow, so the pointed-at control stays fully visible and lit. */
#ide-root .ide-tour-spot {
  position: fixed;
  z-index: 331;
  pointer-events: none;
  border-radius: 8px;
  box-shadow: 0 0 0 200vmax rgba(2, 6, 12, 0.62);
  outline: 2px solid rgba(212, 130, 60, 0.9);
  outline-offset: 2px;
  transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
}

/* A flex column: the BODY scrolls inside the clamp, the buttons pin below it, and the X sits
 * in the corner. Text can never run past the container again (Fred's phone, round two), and
 * the card is centered by place() rather than hugging the target's left edge. Solid background:
 * a translucent card over a blurred veil read as wonky on the phone. */
#ide-root .ide-tour-pop {
  position: fixed;
  z-index: 340;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(16, 34, 54, 0.98), rgba(6, 14, 26, 0.99));
  border: 1px solid rgba(185, 107, 50, 0.55);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 193, 138, 0.2);
  max-height: 70vh;
}

#ide-root .ide-tour-pop .tp-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 24px;   /* room for the X */
}

#ide-root .ide-tour-pop .tp-x {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 28px;
  height: 28px;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted, #8ba0ae);
}
#ide-root .ide-tour-pop .tp-x:hover { color: var(--ink, #e8f6ff); }

/* The guide pointer: no veil, lighter frame, the app stays fully touchable. */
#ide-root .ide-tour-pop.guide {
  background: linear-gradient(180deg, rgba(24, 16, 8, 0.97), rgba(10, 8, 4, 0.98));
  border-color: rgba(118, 255, 104, 0.4);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 20px rgba(118, 255, 104, 0.15);
}

/* Last-resort placement when neither above nor below fits: dead center, no arrow. */
#ide-root .ide-tour-pop.floating::before { display: none; }

#ide-root .ide-tour-pop::before {
  content: "";
  position: absolute;
  left: var(--ax, 24px);
  top: -9px;
  width: 18px;
  height: 18px;
  background: inherit;
  border: 2px solid rgba(212, 130, 60, 1);
  border-right: none;
  border-bottom: none;
  transform: translateX(-50%) rotate(45deg);
}

#ide-root .ide-tour-pop.above::before {
  top: auto;
  bottom: -9px;
  transform: translateX(-50%) rotate(225deg);
}

#ide-root .ide-tour-pop .tp-num {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--copper-hot, #d4823c);
  margin-bottom: 4px;
}

#ide-root .ide-tour-pop h4 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 800;
  color: var(--ink, #e8f6ff);
}

#ide-root .ide-tour-pop p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--ink, #e8f6ff);
}

#ide-root .ide-tour-pop .tp-guide {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #e8f6ff);
}

#ide-root .ide-tour-pop .tp-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}

#ide-root .ide-tour-pop .tp-btns button {
  font: inherit;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 3px;
  border: 1px solid rgba(118, 255, 104, 0.3);
  background: transparent;
  color: rgba(118, 255, 104, 0.8);
  transition: all 0.2s ease;
}

#ide-root .ide-tour-pop .tp-btns button:hover {
  background: rgba(118, 255, 104, 0.1);
  border-color: rgba(118, 255, 104, 0.6);
  color: rgba(118, 255, 104, 1);
}

#ide-root .ide-tour-pop .tp-btns .tp-next {
  border-color: rgba(118, 255, 104, 0.45);
}

#ide-root .ide-tour-pop .tp-btns .tp-skip {
  color: var(--muted, #8ba0ae);
  border-color: rgba(139, 160, 174, 0.3);
}

#ide-root .ide-tour-pop .tp-btns .tp-skip:hover {
  border-color: rgba(139, 160, 174, 0.6);
  background: rgba(139, 160, 174, 0.05);
}

#ide-root .tour-hi {
  outline: 2px solid rgba(212, 130, 60, 1);
  outline-offset: 3px;
  border-radius: 3px;
  box-shadow: 0 0 0 4px rgba(212, 130, 60, 0.25), 0 0 24px rgba(212, 130, 60, 0.45);
}

#ide-root .tour-lift {
  position: relative;
  z-index: 335;
}

#ide-root #ide-tour-btn {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  border: 1px solid rgba(185, 107, 50, 0.3);
  border-radius: 3px;
  background: transparent;
  color: var(--ink, #e8f6ff);
  transition: all 0.2s ease;
}

#ide-root #ide-tour-btn:hover {
  color: var(--copper-hot, #d4823c);
  border-color: rgba(185, 107, 50, 0.55);
}