/*
  Gener8 style kit — the tour bar (kit/js/tour.js).

  Sits in the bottom band, centred between the side panels, where anyone at the wall
  can reach it: Back, the tour name, "2 / 6", the step's caption, a dot per step, a thin
  line showing time to the next step (auto-advance), and Next. "Play tour" comes back
  after someone has touched the wall and stopped auto-advance.
*/
.tourbar {
  position: absolute; left: 50%; bottom: calc(var(--u) * 2.5); transform: translateX(-50%); z-index: 6;
  width: min(92vw, calc(var(--u) * 84)); padding: calc(var(--u) * 1) calc(var(--u) * 1.1);
  border-radius: var(--r-lg);
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: calc(var(--u) * 1.2);
}
.tourbar .btn { min-height: calc(var(--u) * 6); padding: 0 calc(var(--u) * 1.6); font-size: calc(var(--tu) * 1.5); }
.tourbar .btn:disabled { opacity: .35; }
.tb-mid { min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * .35); }
.tb-head { display: flex; align-items: baseline; gap: calc(var(--u) * .8); }
.tb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-count { margin-left: auto; }
.tb-caption {
  font-size: calc(var(--tu) * 1.55); line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tb-dots { display: flex; gap: calc(var(--u) * .5); }
.tb-dots i { width: calc(var(--u) * .8); height: calc(var(--u) * .8); border-radius: 50%; background: var(--line); }
.tb-dots i.on { background: var(--accent); }
.tb-progress { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.tb-progress i { display: block; height: 100%; width: 0; background: var(--accent); }

/* While a tour plays, its captions take the place of the saved view's note */
.has-tour .vnote { display: none !important; }
/* G8 Circulation's "Follow a cell" caption moves up above the tour bar */
.has-tour .ride { bottom: calc(var(--u) * 15); }