/* ==========================================================================
   The product tour (tour.html, tour.js).

   Loads after styles.css, heroapp.css and product.css: the app window is the
   hero replica's .ea shell, its views are the tool demos, and the report step
   is the Report writer demo. This file lays the tour out around them and
   turns the replica's stacked, fixed-height views into ordinary ones.
   ========================================================================== */

.tour-main {
  padding-bottom: var(--section-pad);
}

.tour {
  padding-top: clamp(20px, 2.4vw, 32px);
}

.tour-wrap {
  width: min(1400px, 100% - var(--gutter) * 2);
}

.tour-top {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.tour-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-6);
}

.tour-intro .lp-crumb {
  flex-basis: 100%;
  margin-bottom: 0;
}

.tour-intro h1 {
  font-size: var(--t-3xl);
  letter-spacing: -0.03em;
}

.tour-intro p {
  color: var(--ink-3);
  font-size: var(--t-sm);
}

/* The rail: every step, done or not, one click away */
.tour-rail {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tour-rail button {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 0 2px 2px;
  color: var(--ink-3);
  font-size: var(--t-xs);
  font-weight: 650;
  text-align: left;
}

.tour-rail button::before {
  content: "";
  height: 4px;
  border-radius: 99px;
  background: var(--line-2);
  transition: background var(--dur-2) var(--ease);
}

.tour-rail b {
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}

.tour-rail li[data-done] button::before {
  background: color-mix(in srgb, var(--brand) 55%, var(--line-2));
}

.tour-rail button[aria-current="step"] {
  color: var(--brand-ink);
}

.tour-rail button[aria-current="step"]::before {
  background: var(--brand);
}

.tour-rail button:hover {
  color: var(--ink);
}

.tour-grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

/* Coach: what this step shows, and what to do */
.tour-coach {
  position: sticky;
  top: calc(var(--header-h) + var(--s-4));
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow-2);
}

.tour-count {
  color: var(--brand-ink);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tour-title {
  font-size: var(--t-xl);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.tour-title:focus {
  outline: none;
}

.tour-text {
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.6;
}

.tour-tasks {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tour-tasks[hidden] {
  display: none;
}

.tour-tasks button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 4px 10px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--t-sm);
  line-height: 1.4;
  text-align: left;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}

.tour-tasks button:hover {
  border-color: var(--brand);
}

.tour-tasks small {
  grid-column: 2;
  color: var(--ink-3);
  font-size: var(--t-xs);
}

.tour-check {
  width: 20px;
  height: 20px;
  margin-top: 0;
  border: 2px solid var(--line-2);
  border-radius: 50%;
}

.tour-tasks li[data-done] button {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
  background: var(--bg-tint);
}

.tour-tasks li[data-done] .tour-check {
  border-color: var(--brand);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat,
    var(--brand);
}

.tour-status {
  color: var(--brand-ink);
  font-size: var(--t-sm);
  font-weight: 650;
}

.tour-status[hidden] {
  display: none;
}

.tour-real {
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--t-xs);
  line-height: 1.5;
}

.tour-real[hidden] {
  display: none;
}

.tour-btns {
  display: flex;
  gap: var(--s-2);
}

.tour-btns .btn-primary {
  flex: 1;
}

.tour-btns .btn-primary[hidden] {
  display: none;
}

.tour-btns .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tour-end {
  display: grid;
  gap: var(--s-2);
}

.tour-end[hidden] {
  display: none;
}

.tour-end .btn {
  width: 100%;
}

.tour-restart {
  justify-self: center;
  padding: 4px 8px;
  color: var(--ink-3);
  font-size: var(--t-xs);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The app window: the hero replica, made interactive and allowed to grow */
.tour-app {
  -webkit-user-select: text;
  user-select: text;
}

.tour-app .ea-body {
  height: auto;
  min-height: 620px;
}

.tour-app .ea-main {
  display: flex;
  flex-direction: column;
}

.tour-app .ea-view {
  position: static;
  flex: 1;
  opacity: 1;
  visibility: visible;
  transition: none;
}

.tour-app .ea-view[hidden] {
  display: none;
}

.tour-app .ea-nav-item {
  width: 100%;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
}

.tour-app .ea-nav-item:hover:not(.is-active):not(.is-static) {
  background: var(--ea-side-deep);
}

.tour-soon {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ea-amber-soft);
  color: var(--ea-amber-strong);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
}

.tour-pane {
  flex: 1;
  min-width: 0;
  padding: 16px 18px 20px;
}

.tour-pane .px-demo {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.tour-pane-phone .px-demo {
  display: grid;
  place-items: center;
  padding-top: 8px;
}

.tour-app .rwd-win {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.tour-app .rwd-chrome {
  display: none;
}

.tour-app .rwd-body {
  min-height: 540px;
}

/* The hotspot on the control for the next task */
.tour-hot {
  outline: 3px solid #dfa438;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .tour-hot {
    animation: tour-ping 1.6s var(--ease) infinite;
  }

  .tour-btns .btn-primary.is-ready {
    animation: tour-ready 1.8s var(--ease) 2;
  }
}

@keyframes tour-ping {
  0%,
  100% {
    outline-color: rgba(223, 164, 56, 1);
    outline-offset: 2px;
  }

  50% {
    outline-color: rgba(223, 164, 56, 0.35);
    outline-offset: 5px;
  }
}

@keyframes tour-ready {
  0%,
  100% {
    box-shadow: var(--shadow-1);
  }

  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 25%, transparent);
  }
}

@media (max-width: 1100px) {
  .tour-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tour-coach {
    position: static;
  }

  .tour-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--s-3);
  }
}

@media (max-width: 760px) {
  .tour-app .ea-body {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .tour-app .ea-side {
    display: none;
  }

  .tour-pane {
    padding: 12px;
  }

  .tour-intro h1 {
    font-size: var(--t-2xl);
  }
}