/* The guided tour's furniture.
 *
 * Same language as the panels — warm near-black card, one accent, monospace for
 * anything that is a label rather than prose, 3px radii, one easing curve —
 * because the tour is pointing at the instrument and must not look like it was
 * bolted on from a different product.
 *
 * The dim is a 9999px box-shadow on #tour-spot rather than a scrim with a
 * cut-out, so the highlight can glide from one control to the next in a single
 * transition. #tour-scrim sits above it purely to swallow clicks; it is
 * transparent except on the centred steps, where there is no spotlight to paint
 * the dim.
 */

#tour {
  position: fixed; inset: 0; z-index: 250;
  transition: opacity .4s ease;
  --tour-dim: rgba(10, 9, 8, 0.66);
}
#tour[data-dim="full"]  { --tour-dim: rgba(10, 9, 8, 0.86); }
#tour[data-dim="light"] { --tour-dim: rgba(10, 9, 8, 0.34); }
#tour.over { opacity: 0; pointer-events: none; }

#tour-scrim {
  position: absolute; inset: 0;
  background: transparent;
  transition: background .35s ease;
}
/* With no spotlight — the centred steps, and the one about the model itself —
   the scrim is what dims the screen. */
#tour.nospot #tour-scrim { background: var(--tour-dim); }

#tour-spot {
  position: fixed; pointer-events: none;
  border-radius: var(--r2);
  box-shadow:
    0 0 0 9999px var(--tour-dim),
    0 0 0 1px rgba(217, 84, 46, 0.6),
    0 0 26px 2px rgba(217, 84, 46, 0.18);
  transition:
    left .42s var(--ease), top .42s var(--ease),
    width .42s var(--ease), height .42s var(--ease),
    box-shadow .35s ease;
}
#tour-spot[hidden] { display: none; }

/* ------------------------------------------------------------------- card */

#tour-card {
  position: fixed; width: 340px; max-width: calc(100vw - 32px);
  background: var(--panel-solid);
  border: 1px solid var(--line-ctl);
  border-radius: var(--r2);
  padding: 20px 22px 16px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s var(--ease),
              left .34s var(--ease), top .34s var(--ease);
}
#tour-card.in { opacity: 1; transform: none; }

#tour-kicker {
  margin: 0 0 12px; font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent);
}
#tour-kicker[hidden] { display: none; }

/* The step title is the one serif in the card. It is a name for the thing being
   pointed at, and the panels set names in serif everywhere else. */
#tour-title {
  margin: 0 0 12px; font-family: var(--serif); font-weight: 400;
  font-size: 24px; line-height: 1.15; letter-spacing: -.005em; color: var(--t0);
}

#tour-body { font-size: 12.5px; line-height: 1.7; color: var(--t4); text-wrap: pretty; }
#tour-body b { color: var(--t1); font-weight: 500; }
#tour-body kbd {
  font-family: var(--mono); font-size: 10px; color: var(--t1);
  background: rgba(237, 231, 220, .06);
  border: 1px solid var(--line-ctl); border-radius: 2px;
  padding: 1px 5px; margin: 0 1px;
}

/* The arrow. A rotated square poking out of the card edge, positioned in JS on
   the target's centre line rather than the card's, so on a clamped card it still
   points at the control. */
#tour-arrow {
  position: absolute; width: 10px; height: 10px;
  background: var(--panel-solid);
  border-left: 1px solid var(--line-ctl);
  border-bottom: 1px solid var(--line-ctl);
  transform: rotate(45deg);
}
#tour-arrow[data-side="right"]  { transform: rotate(45deg);  margin-top: -5px; }
#tour-arrow[data-side="left"]   { transform: rotate(225deg); margin-top: -5px; }
#tour-arrow[data-side="bottom"] { transform: rotate(135deg); margin-left: -5px; }
#tour-arrow[data-side="top"]    { transform: rotate(-45deg); margin-left: -5px; }
#tour-arrow[hidden] { display: none; }

/* ---------------------------------------------------------------- footer */

/* Dots on their own line above the buttons. One row for all of it fitted until
   the step count went into double figures and the labels started wrapping to two
   lines each; a 340px card does not have room for twelve dots and three labels
   side by side. */
#tour-foot {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 20px; padding-top: 14px;
  border-top: 1px solid var(--line);
}

#tour-dots { display: flex; gap: 4px; align-items: center; }
#tour-dots .dot {
  all: unset; box-sizing: border-box; cursor: pointer; width: 5px; height: 5px;
  background: var(--line-ctl); transition: all .2s var(--ease);
}
#tour-dots .dot:hover { background: var(--t6); }
#tour-dots .dot.past { background: rgba(217, 84, 46, .5); }
#tour-dots .dot.on { background: var(--accent); width: 14px; }

#tour-btns { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
#tour-btns button {
  all: unset; box-sizing: border-box; cursor: pointer; white-space: nowrap;
  padding: 9px 18px; border-radius: var(--r);
  font-family: var(--sans); font-size: 13px;
  color: var(--bg); background: var(--t0); border: 1px solid var(--t0);
  transition: all .22s var(--ease);
}
#tour-btns button:hover { background: #FFFFFF; border-color: #FFFFFF; transform: translateY(-1px); }
#tour-btns button:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
#tour-btns button.ghost {
  background: transparent; color: var(--t6); border-color: transparent;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; padding: 9px 8px;
}
#tour-btns button.ghost:hover {
  background: transparent; color: var(--t0); border-color: transparent; transform: none;
}
#tour-btns button[hidden] { display: none; }

/* While the tour is up the panels are lit but not live: every click belongs to
   the tour until it hands over. */
body.tour-running #left,
body.tour-running #side,
body.tour-running #time { pointer-events: none; }
body.tour-running #hover { display: none !important; }

/* ------------------------------------------------------------------ small */

@media (max-width: 900px) {
  #tour-card { width: 300px; }
}

/* A tour is instructional, not cinematic: with reduced motion asked for, it
   still runs, it just stops sliding. */
@media (prefers-reduced-motion: reduce) {
  #tour-spot, #tour-card, #tour-scrim { transition: none; }
  #tour-card { opacity: 1; transform: none; }
}