/*
  Workstride site demo styles: product-tour
  Styles the stepper controls site/assets/js/demos/product-tour.js reveals
  (.tour__controls, unhidden on mount) below each tour's steps. The steps,
  captions and transcripts themselves are static and styled in
  site/assets/css/pages/core.css so they look right with or without this
  module. Tokens only.
*/
.tour__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}

.tour__nav {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.tour__dots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tour__dot {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 24px;
  min-height: 24px;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--r-pill);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;
  cursor: pointer;
}

.tour__dot:hover {
  border-color: var(--ink);
}

.tour__dot[aria-current="step"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

@media (max-width: 26.24rem) {
  .tour__controls {
    justify-content: center;
    text-align: center;
  }
}