/* First-visit guided tour. */

.tour-open {
  overflow: hidden;
}

/* Swallows clicks on the page while the tour is up. Without it the
   highlighted element -- Request, or a nav link -- is still live, and
   clicking it navigates away mid-tour. Sits under the spotlight and card
   so both still render above it. */
.tour-blocker {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1999;
  background: transparent;
}

/* Dim everything, then punch a hole over the current target using a very
   large spread shadow. Cheaper and better supported than clip-path. */
.tour-spotlight {
  position: absolute;
  z-index: 2000;
  border-radius: 0.6rem;
  box-shadow: 0 0 0 9999px rgba(8, 15, 35, 0.62);
  pointer-events: none;
  transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}

/* Used for the opening and closing steps, which have no target. */
.tour-spotlight.tour-spotlight-none {
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 0 9999px rgba(8, 15, 35, 0.72);
}

.tour-card {
  position: absolute;
  z-index: 2001;
  width: min(23rem, calc(100vw - 2rem));
  background: #fff;
  border-radius: 0.7rem;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.35);
  padding: 1rem 1.1rem 0.9rem;

  /* A short viewport -- a tablet in landscape -- must never cut the Next
     button off. Cap the card and let the text scroll instead, keeping the
     title and the buttons pinned. dvh is the visible height on iOS, where
     100vh ignores the Safari toolbars. */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
}

.tour-body {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.tour-card h3 {
  flex: 0 0 auto;
  margin: 0 0 .4rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: #002366;
  padding-right: 1.4rem;
}

.tour-card p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.45;
  color: #27313f;
}

.tour-card p + p {
  margin-top: .5rem;
}

/* Non-interactive likeness of the selection form. */
.tour-preview {
  margin-top: .7rem;
  border: 1px solid #dfe4ee;
  border-radius: .45rem;
  padding: .5rem .55rem .6rem;
  background: #f8fafd;
}

.tour-preview-head {
  font-size: .74rem;
  font-weight: 700;
  color: #002366;
  margin-bottom: .35rem;
}

.tour-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .72rem;
  color: #4a5361;
  padding: .12rem 0;
}

.tour-preview-select {
  flex: 0 0 8.6rem;
  background: #fff;
  border: 1px solid #ccd3e0;
  border-radius: .25rem;
  padding: .12rem .35rem;
  color: #8a929e;
  position: relative;
}

.tour-preview-select::after {
  content: "";
  position: absolute;
  right: .35rem;
  top: 50%;
  margin-top: -.1rem;
  border-left: .22rem solid transparent;
  border-right: .22rem solid transparent;
  border-top: .26rem solid #8a929e;
}

.tour-preview-save {
  margin-top: .45rem;
  display: inline-block;
  background: #0d6efd;
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  border-radius: .25rem;
  padding: .18rem .7rem;
}

.tour-cta {
  margin-top: .7rem !important;
}

.tour-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .9rem;
  flex: 0 0 auto;
}

.tour-step-count {
  font-size: .8rem;
  color: #6b7482;
  margin-right: auto;
}

.tour-close {
  position: absolute;
  top: .45rem;
  right: .5rem;
  border: 0;
  background: none;
  font-size: 1.3rem;
  line-height: 1;
  color: #8a929e;
  cursor: pointer;
  padding: .1rem .3rem;
}

.tour-close:hover {
  color: #27313f;
}

/* Arrow pointing at the highlighted element. */
.tour-card::after {
  content: "";
  position: absolute;
  width: .8rem;
  height: .8rem;
  background: #fff;
  transform: rotate(45deg);
}

.tour-card[data-arrow="top"]::after {
  top: -.4rem;
  left: var(--tour-arrow-x, 1.4rem);
}

.tour-card[data-arrow="bottom"]::after {
  bottom: -.4rem;
  left: var(--tour-arrow-x, 1.4rem);
}

.tour-card[data-arrow="none"]::after {
  display: none;
}

/* On small screens the card is pinned to the bottom rather than chased
   around a cramped viewport. */
@media (max-width: 576px) {
  .tour-card {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    top: auto !important;
    width: auto;
  }

  .tour-card::after {
    display: none;
  }
}

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