/* Copyright Ayers Electronics Inc. All rights reserved. */
/* guided tour. */

/* ==== guided tour ====
   The coachmark tour the introduction's "take the tour" choice opens: a
   full-screen click-blocker (#tourDim, transparent - the visible dim is #tourSpot's own oversized
   box-shadow), a spotlight cut-out on the current step's target (#tourSpot) and a small card beside
   it (#tourCard/.tour-card), positioned by js/tips.js (placeTourCard/renderTour). The three are fixed
   to the viewport on the document (pages/tour-layer.html), so a step's target on a page is lit the
   same as one on the stage. Reduced motion:
   no animation is used here at all, so base.css's global guard has nothing to collapse. */
#tourDim {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  pointer-events: auto;
  background: transparent;
}
#tourSpot {
  position: fixed;
  z-index: 51;
  pointer-events: none;
  border: 2px solid var(--accent);
  border-radius: var(--radius-card);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72);
}
/* The width is a token and the ceiling a viewport measure, never a percentage of a container: the
   television WebViews collapse a percentage width to the card's padding, one word a line. */
.tour-card {
  position: fixed;
  z-index: 52;
  width: var(--offer-card-w);
  max-width: calc(100vw - 32px);
  padding: 14px 16px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.tour-card.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.tour-card.phone-bottom {
  top: auto;
  left: 16px;
  right: 16px;
  bottom: calc(16px + var(--safe-bottom));
  width: auto;
}
.tour-step {
  font-size: var(--type-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.tour-title {
  margin-top: 4px;
  font-size: var(--type-body);
  font-weight: 600;
  color: var(--text);
}
.tour-body {
  margin-top: 4px;
  font-size: var(--type-label);
  line-height: 1.45;
  color: var(--text);
}
.tour-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
/* Back leaves the row on the first step and Skip on the last (js/tips.js), so the step is carried on
   every control and taken back off whichever one now stands first. */
.tour-actions > * + * {
  margin-left: 8px;
}
.tour-actions > .hidden + * {
  margin-left: 0;
}

/* 128b: the description line keeps its two-line box so the stack never shifts (the words come from
   js/tuner.js, which paints "Description not available" / "Nothing scheduled next"). */
#hudSynopsis {
  min-height: calc(2 * 1.45em);
}