/* Guided walkthrough (MYC-7).
 *
 * A LINKED stylesheet, not an injected <style> block: the SPA shell only
 * carries link[rel=stylesheet] across, so inline styles render as nothing
 * (VERITAS-108, which has bitten this app twice).
 */

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 9600;   /* above the assistant launchers (9500) */
  /* Transparent by default: the spotlight's shadow does the dimming when
     there is a target, and .tour-no-target restores it when there is not.
     Keeping the base transparent means the two never stack. */
  background: transparent;
  /* Not a pointer any more: the backdrop used to advance the tour on click
     and no longer does, and a cursor promising an action that does not happen
     is worse than no affordance at all. */
  cursor: default;
}

.tour-spotlight {
  position: fixed;
  z-index: 9601;
  border-radius: 8px;
  pointer-events: none;
  border: 2px solid var(--myceo-accent-blue);
  /* One enormous shadow is what actually dims everything except the target -
     cheaper and smoother than an SVG mask, and it animates. */
  box-shadow: 0 0 0 9999px rgba(5, 7, 10, 0.72);
  transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
}

.tour-spotlight.tour-hidden { display: none; }

/* Used for one frame while the spotlight is placed before being revealed, so
   it appears ON its target instead of sliding there from wherever it was. */
.tour-spotlight.tour-spot-instant { transition: none; }

/* The card, same idea. visibility rather than display, because _place() has to
   measure the card's height to decide whether it fits below its target - and a
   display:none element measures zero. */
.tour-card.tour-card-placing {
  visibility: hidden;
  transition: none;
}

/* With no target there is no spotlight, so the overlay carries the dimming -
   at the SAME 0.72 the spotlight's shadow uses, so the page is dimmed to one
   depth whichever step you are on. */
.tour-overlay.tour-no-target { background: rgba(5, 7, 10, 0.72); }

.tour-card {
  position: fixed;
  z-index: 9602;
  width: min(24rem, calc(100vw - 2rem));
  padding: 1.25rem 1.25rem 1rem;
  background: var(--myceo-surface-1);
  border: 1px solid var(--myceo-border-mid);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  font-family: var(--myceo-font-body);
  color: var(--myceo-text-primary);
  transition: top 0.3s ease, left 0.3s ease;
}

/* Narrow screens: dock to the bottom rather than squeezing beside a target.
   There is rarely room next to anything on a phone, and a card wedged into a
   sliver is how a tour becomes unreadable. */
.tour-card-docked {
  top: auto !important;
  bottom: 1rem;
  left: 50% !important;
  transform: translateX(-50%);
}

/* The card no longer fades and Next is never disabled - a step whose
   spotlight is still resolving is still readable and still skippable. */
.tour-next:disabled { opacity: 0.5; cursor: default; }

.tour-step-count {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--myceo-text-dim);
  margin-bottom: 0.4rem;
}

.tour-title {
  margin: 0 0 0.5rem;
  font-family: var(--myceo-font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--myceo-text-primary);
}

.tour-body {
  margin: 0 0 1.1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--myceo-text-secondary);
}

.tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.tour-actions button {
  font-family: inherit;
  font-size: 0.88rem;
  border-radius: 6px;
  cursor: pointer;
  /* Comfortably tappable: these are the controls a phone user needs most. */
  min-height: 2.6rem;
  padding: 0 1.1rem;
}

.tour-skip {
  background: none;
  border: none;
  color: var(--myceo-text-dim);
  padding: 0 0.25rem;
}

.tour-skip:hover { color: var(--myceo-text-secondary); }

.tour-next {
  background: var(--myceo-accent-blue);
  border: none;
  color: var(--myceo-bg-core);
  font-weight: 500;
}

/* Replay control, parked out of the way. */
.tour-replay {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 3000;
  padding: 0.5rem 0.9rem;
  min-height: 2.4rem;
  background: var(--myceo-surface-2);
  border: 1px solid var(--myceo-border-mid);
  border-radius: 999px;
  color: var(--myceo-text-secondary);
  font-family: var(--myceo-font-body);
  font-size: 0.8rem;
  cursor: pointer;
}

.tour-replay:hover {
  color: var(--myceo-text-primary);
  border-color: var(--myceo-accent-blue);
}

@media (max-width: 720px) {
  /* Clear of the sidebar hamburger and the assistant launcher. */
  .tour-replay { bottom: 0.75rem; left: 0.75rem; font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tour-spotlight, .tour-card { transition: none; }
}

/* The assistant launchers sit bottom-right, which on a phone is exactly where
   the docked tour card's Next button lands - they covered it. Hidden while the
   tour runs, and brought back for the step that spotlights one. */
@media (max-width: 720px) {
  body.tour-active .aw-fab { display: none; }
  body.tour-active.tour-show-fab .aw-fab { display: flex; }
  /* Keep the replay control clear of the docked card too. */
  body.tour-active .tour-replay { display: none; }
}

/* ── The coach card (MYC-36) ───────────────────────────────────────────────
   The tour's second act, shown while the visitor is asking Scarlett
   questions. Unlike a walkthrough step it must NOT take over the page: there
   is no dimmed overlay and no spotlight, because the whole point is that they
   can keep typing while it is up. Narrower and lighter than a tour step, so
   it reads as a note beside the conversation rather than a modal in front of
   it. */
.tour-card.tour-coach {
  max-width: 340px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.tour-card.tour-coach .tour-step-count {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* The body carries a blank line between the description and the instruction
   ("Now change it: ..."), which is only visible if newlines are honoured. */
.tour-card.tour-coach .tour-body {
  white-space: pre-line;
}