/* ============================================================================
   tour.css — the optimizer's "How to use this page" walkthrough (2026-09-29).
   Theme variables only; see home.css for why.

   Robert: "show the entire screen like it did before, and have the arrows and
   highlighted sections like it did before, so that it doesn't look any
   different from them being on the optimizer screen normally except for the
   selections being different as per the tutorial."

   So the spotlight is the same as it always was. What sits under it is a
   full-screen SCREENSHOT of the optimizer part-way through a worked example
   (tools/tour-shots.js makes them), rather than the live page.
   ============================================================================ */

/* The button that starts it, next to the page heading. */
.how-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 9px 16px;
  border: 1px solid var(--hero);
  border-radius: 999px;
  background: var(--hero-dim);
  color: var(--hero);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.how-btn:hover {
  background: var(--hero);
  color: var(--bg);
}
.how-btn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 11px;
  font-weight: 800;
}

/* --------------------------------------------------------------- overlay --- */
.tour-root {
  position: fixed;
  inset: 0;
  z-index: 200; /* above the sticky nav bar (50) and modals' backdrops */
  display: none;
  /* Whatever the window's shape, the bars beside a 16:9 picture read as the
     page's own background rather than as a hole. */
  background: var(--bg);
}
.tour-root.is-open {
  display: block;
}
body.tour-locked {
  overflow: hidden;
}

/* The screenshot, filling the window.
   ⚠️ `contain`, NEVER `cover`. The highlight rectangles are fractions of the
   picture; cropping the picture would move everything under them and the
   spotlight would light the wrong control. tour.js measures the painted box
   (which is not the element's box under `contain`) and positions against it. */
.tour-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 0;
}

/* ⚠️ THE DIMMING IS THIS ELEMENT'S SHADOW, not a separate layer. A 9999px
   spread paints everything outside the box dark, which means the "hole" is
   always exactly the box and there is nothing to keep in sync. Changing this
   to an overlay + clip-path buys nothing and breaks the simple math. */
.tour-spot {
  position: absolute;
  z-index: 1;
  border-radius: 12px;
  border: 2px solid var(--hero);
  box-shadow: 0 0 0 9999px rgba(3, 5, 10, 0.76);
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
  pointer-events: none;
}
.tour-spot[hidden] {
  display: none;
}

.tour-pop {
  position: absolute;
  z-index: 2;
  width: min(400px, calc(100vw - 32px));
  padding: 16px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  transition: top 0.2s ease, left 0.2s ease;
}

/* The arrow. `data-arrow` names the side the popover sits on relative to the
   highlight — "up" means the popover is BELOW and points upward — and
   --tour-arrow is how far along that edge the point goes, set by tour.js so it
   aims at the middle of the highlight. Two triangles, the back one a pixel
   larger, so the arrow keeps the popover's border. */
.tour-pop::before,
.tour-pop::after {
  content: "";
  position: absolute;
  border: 9px solid transparent;
}
.tour-pop[data-arrow="up"]::before {
  bottom: 100%;
  left: var(--tour-arrow, 50%);
  margin-left: -9px;
  border-bottom-color: var(--border-strong);
}
.tour-pop[data-arrow="up"]::after {
  bottom: calc(100% - 1px);
  left: var(--tour-arrow, 50%);
  margin-left: -9px;
  border-bottom-color: var(--panel);
}
.tour-pop[data-arrow="down"]::before {
  top: 100%;
  left: var(--tour-arrow, 50%);
  margin-left: -9px;
  border-top-color: var(--border-strong);
}
.tour-pop[data-arrow="down"]::after {
  top: calc(100% - 1px);
  left: var(--tour-arrow, 50%);
  margin-left: -9px;
  border-top-color: var(--panel);
}
.tour-pop[data-arrow="left"]::before {
  right: 100%;
  top: var(--tour-arrow, 50%);
  margin-top: -9px;
  border-right-color: var(--border-strong);
}
.tour-pop[data-arrow="left"]::after {
  right: calc(100% - 1px);
  top: var(--tour-arrow, 50%);
  margin-top: -9px;
  border-right-color: var(--panel);
}
.tour-pop[data-arrow="right"]::before {
  left: 100%;
  top: var(--tour-arrow, 50%);
  margin-top: -9px;
  border-left-color: var(--border-strong);
}
.tour-pop[data-arrow="right"]::after {
  left: calc(100% - 1px);
  top: var(--tour-arrow, 50%);
  margin-top: -9px;
  border-left-color: var(--panel);
}

.tour-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.tour-title {
  margin: 6px 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}
.tour-text {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
}
.tour-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tour-spacer {
  flex: 1;
}
.tour-btns button {
  padding: 8px 15px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  color: var(--text);
}
.tour-btns button:hover:not(:disabled) {
  border-color: var(--hero);
  color: var(--hero);
}
.tour-next {
  border-color: var(--hero) !important;
  background: var(--hero) !important;
  /* --bg, not white: on the lighter themes white on the accent fails contrast
     (the same reasoning as home.css's primary button). */
  color: var(--bg) !important;
}
.tour-skip {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text-faint) !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}
.tour-btns button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Step dots double as jump-to-step buttons.
   ⚠️ SELECTED AS `.tour-btns .tour-dot`, NOT `.tour-dot`. They live inside
   .tour-btns, so `.tour-btns button` (class + type = higher specificity) beat a
   bare .tour-dot and the dots rendered as full-size pills with 8px/15px
   padding. Keep the `.tour-btns` prefix on every one of these. */
.tour-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tour-btns .tour-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.tour-btns .tour-dot.is-on {
  background: var(--hero);
  border-color: var(--hero);
  transform: scale(1.25);
}

@media (max-width: 760px) {
  .tour-pop {
    /* Pinned to the bottom on a phone: at that width the picture is a thin
       strip and there is rarely room beside a highlight, so a popover that
       chases it just overlaps it. */
    top: auto !important;
    left: 8px !important;
    right: 8px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: auto;
  }
  .tour-pop::before,
  .tour-pop::after {
    display: none; /* the arrow has nothing to point at once it is pinned */
  }
  /* Back/Next and the step counter already say where you are. */
  .tour-dots {
    display: none;
  }
}

/* Respect the OS setting. ⚠️ THIS BLOCK MUST STAY AT THE END OF THE FILE:
   these have the same specificity as the rules above, so source order is what
   makes them win. Placed earlier, `.tour-pop`'s own `transition` overrode it
   and the popover never moved while the spotlight did.

   It also makes the tour deterministic to test: headless Chrome does not
   advance CSS transitions under virtual time, so a transitioning element reads
   as frozen at its previous state — for geometry AND for computed colour,
   which is why journey 17 asserts inline styles and classes rather than
   rects and paint. Screenshots pass --force-prefers-reduced-motion.

   ⚠️ `.tour-btns .tour-dot`, matching the rule it overrides. Written as a bare
   `.tour-dot` it loses on specificity and the dots freeze showing the PREVIOUS
   step as active, which looks exactly like a broken indicator. */
@media (prefers-reduced-motion: reduce) {
  .tour-spot,
  .tour-pop,
  .how-btn {
    transition: none;
  }
  .tour-btns .tour-dot {
    transition: none;
  }
}