/* The product tour: a vertical list of steps, text beside a sticky picture from 1024px. tour.js adds is-enhanced,
   is-active and the progress bar; without it every step is a block with its own picture. */

.tourBar {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: var(--sp2) 0;
  border-bottom: 1px solid var(--border);
  background: var(--panel-bg);
}

.tourBar[hidden] {
  display: none;
}

.tourBar-meter {
  display: block;
  width: 100%;
  height: 8px;
  accent-color: var(--accent);
}

.tourStep {
  display: grid;
  gap: var(--sp5);
  padding: var(--sp7) 0;
  border-bottom: 1px solid var(--border);
}

.tourStep:focus {
  outline: none;
}

.tourStep:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.tourStep-count {
  margin: 0 0 var(--sp2);
  color: var(--text-faint);
  font-size: var(--fs-sm);
}

.tourStep-text p {
  color: var(--text-dim);
}

.tourStep-legend {
  margin: 0 0 var(--sp4);
  padding-left: var(--sp5);
  color: var(--text-dim);
}

.tourStep-legend li {
  margin-bottom: var(--sp2);
}

.tourStep-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp3);
}

.tourStep-manual {
  min-height: var(--h-ctl);
  display: inline-flex;
  align-items: center;
}

.tourStep-fig {
  margin: 0;
  min-width: 0;
}

.tourStep-frame {
  position: relative;
}

.tourStep-frame .shotWeb {
  display: block;
  width: 100%;
  height: auto;
}

.tourStep-spots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tourStep-dot {
  fill: var(--accent-btn);
  stroke: var(--panel-bg);
  stroke-width: 6;
}

.tourStep-num {
  fill: var(--on-accent);
}

.is-enhanced .tourStep.is-active {
  border-bottom-color: var(--accent);
}

.tourEnd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp3);
}

@media (min-width: 1024px) {
  .tourStep {
    grid-template-columns: 5fr 7fr;
    gap: var(--sp7);
    min-height: 90vh;
    align-items: start;
  }

  .tourStep-fig {
    position: sticky;
    top: 96px;
  }
}

/* The tab strip (moved from components.css: only the tour and the product page use it). */
.tour {
  display: grid;
  gap: var(--sp5);
}
.tour > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tour-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp2);
}
.tour-tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-ctl);
  padding: 0 var(--sp4);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-pill);
  background: var(--panel-bg);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
}
.tour-tab:hover {
  background: var(--selection-bg);
}
.tour-panel {
  display: none;
}
#t1:checked ~ .tour-tabs [for="t1"],
#t2:checked ~ .tour-tabs [for="t2"],
#t3:checked ~ .tour-tabs [for="t3"],
#t4:checked ~ .tour-tabs [for="t4"] {
  border-color: var(--accent-btn);
  background: var(--accent-btn);
  color: var(--on-accent);
}
#t1:focus-visible ~ .tour-tabs [for="t1"],
#t2:focus-visible ~ .tour-tabs [for="t2"],
#t3:focus-visible ~ .tour-tabs [for="t3"],
#t4:focus-visible ~ .tour-tabs [for="t4"] {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
#t1:checked ~ .tour-stage #p1,
#t2:checked ~ .tour-stage #p2,
#t3:checked ~ .tour-stage #p3,
#t4:checked ~ .tour-stage #p4 {
  display: block;
  animation: tour-in 0.35s var(--ease);
}
@keyframes tour-in {
  from { opacity: 0; translate: 0 8px; }
  to   { opacity: 1; translate: 0 0; }
}
.tour-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp1) var(--sp3);
  margin: var(--sp4) 0 0;
  color: var(--text-dim);
  font-size: var(--fs-sm);
}
.tour-caption strong {
  color: var(--text-primary);
  font-size: var(--fs-md);
}