/* Shared Mobilise timeline. Kept independent of the questionnaire stylesheet so
   the same component can be used on the buyer project page. */
.occupy-journey-scroll.mobilise-journey {
  --mobilise-ink: #403451;
  --mobilise-purple: #66508f;
  --mobilise-purple-deep: #514077;
  --mobilise-purple-soft: #f0ebf6;
  --mobilise-purple-line: #cfc2df;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 10px 12px 15px;
  color: var(--mobilise-ink);
  scrollbar-color: #b6a6ce #f1edf6;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.occupy-journey-scroll.mobilise-journey:focus-visible {
  outline: 2px solid #7860ad;
  outline-offset: 3px;
}

.occupy-journey-scroll.mobilise-journey:has(.occupy-destination-address) {
  padding-top: 36px;
}

.mobilise-journey .occupy-introduction-steps {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-width: 720px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobilise-journey .occupy-introduction-steps li {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 114px;
  padding: 0 8px 8px;
  color: #625a6e;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
}

.mobilise-journey .occupy-introduction-steps li:not(:last-child)::after {
  position: absolute;
  z-index: 0;
  top: 21px;
  left: calc(50% + 22px);
  width: calc(100% - 44px);
  height: 2px;
  background: var(--mobilise-purple-line);
  content: "";
}

.mobilise-journey .occupy-introduction-steps li.is-complete:not(:last-child)::after {
  background: var(--mobilise-purple);
}

.mobilise-journey .occupy-step-icon {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: block;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 8px;
  overflow: visible;
  border: 1px solid #d5c9e3;
  border-radius: 50%;
  background: #faf8fc;
  color: #7860ad;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.mobilise-journey .occupy-introduction-steps li.is-complete {
  color: #514077;
}

.mobilise-journey .occupy-introduction-steps li.is-complete .occupy-step-icon {
  border-color: #a895c1;
  background: #eee9f7;
  color: #66508f;
}

.mobilise-journey .occupy-introduction-steps li.is-current {
  color: var(--mobilise-purple-deep);
  font-weight: 800;
}

.mobilise-journey .occupy-introduction-steps li.is-current .occupy-step-icon {
  border: 2px solid #fff;
  background: var(--mobilise-purple-deep);
  color: #fff;
  box-shadow: 0 0 0 4px var(--mobilise-purple-soft);
}

.mobilise-journey .occupy-step-label {
  display: block;
  max-width: 150px;
}

.mobilise-journey .occupy-current-stage {
  display: inline-block;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 12px;
  background: var(--mobilise-purple-deep);
  color: #fff;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.4;
}

.mobilise-journey .occupy-introduction-steps li:last-child {
  gap: 9px;
  padding-top: 0;
}

.mobilise-journey .occupy-destination-address {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 8px;
  right: 8px;
  display: block;
  max-width: 100%;
  color: #665288;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.mobilise-journey .occupy-introduction-steps .occupy-building-image {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: block;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  margin: 0;
  border: 2px solid #eee9f7;
  border-radius: 50%;
  background: #faf8fc;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 0 0 1px #d9cbea;
}

/* Project-page placement is deliberately quieter and shorter than the intro
   timeline, while retaining the same stage order and active-state treatment. */
.mobilise-project-journey {
  width: 100%;
  max-width: 980px;
  margin: 0 auto 24px;
  border: 1px solid #e6dfed;
  border-radius: 14px;
  background: #fbf9fd;
}

.mobilise-project-journey .occupy-journey-scroll.mobilise-journey {
  padding: 12px 12px 8px;
}

.mobilise-project-journey .mobilise-journey .occupy-introduction-steps {
  min-width: 620px;
}

.mobilise-project-journey .mobilise-journey .occupy-introduction-steps li {
  min-height: 84px;
  gap: 7px;
  padding: 0 6px 5px;
  font-size: 11px;
}

.mobilise-project-journey .mobilise-journey .occupy-introduction-steps li:not(:last-child)::after {
  top: 18px;
  left: calc(50% + 18px);
  width: calc(100% - 36px);
}

.mobilise-project-journey .mobilise-journey .occupy-step-icon {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  padding: 7px;
}

.mobilise-project-journey .mobilise-journey .occupy-introduction-steps li:last-child {
  gap: 7px;
}

.mobilise-project-journey .mobilise-journey .occupy-building-image {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}

@media (max-width: 650px) {
  .occupy-wrap:not(.occupy-review-mode) .occupy-journey-scroll.mobilise-journey:has(.occupy-destination-address) {
    padding-top: 10px;
  }
  /* Keep the progress cue visible beside questions, but avoid repeating the
     long introduction and destination already shown in the compact mobile
     building context. The review screen continues to hide the introduction. */
  .occupy-wrap:not(.occupy-review-mode) > .occupy-introduction-container {
    display: block !important;
    max-width: 100%;
    padding-inline: 0;
  }

  .occupy-wrap:not(.occupy-review-mode) .occupy-introduction {
    min-height: 0;
    margin-bottom: 18px;
    padding: 12px 12px 4px;
  }

  .occupy-wrap:not(.occupy-review-mode) .occupy-introduction-top {
    display: none;
  }

  .occupy-wrap:not(.occupy-review-mode) .occupy-introduction .occupy-journey-scroll.mobilise-journey {
    margin: 0;
  }

  .occupy-wrap:not(.occupy-review-mode) .mobilise-journey .occupy-introduction-steps {
    min-width: 640px;
  }

  .occupy-wrap:not(.occupy-review-mode) .mobilise-journey .occupy-introduction-steps li {
    min-height: 91px;
    gap: 7px;
    padding-inline: 5px;
    font-size: 11px;
  }

  .occupy-wrap:not(.occupy-review-mode) .mobilise-journey .occupy-step-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    padding: 7px;
  }

  .occupy-wrap:not(.occupy-review-mode) .mobilise-journey .occupy-introduction-steps li:not(:last-child)::after {
    top: 19px;
    left: calc(50% + 20px);
    width: calc(100% - 40px);
  }

  .occupy-wrap:not(.occupy-review-mode) .mobilise-journey .occupy-destination-address,
  .occupy-wrap:not(.occupy-review-mode) .mobilise-journey .occupy-building-image {
    display: none;
  }

  .mobilise-project-journey {
    margin-bottom: 18px;
  }

  .mobilise-project-journey .mobilise-journey .occupy-introduction-steps {
    min-width: 580px;
  }

  .mobilise-project-journey .mobilise-journey .occupy-introduction-steps li {
    min-height: 77px;
    padding-inline: 4px;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .occupy-journey-scroll.mobilise-journey *,
  .occupy-journey-scroll.mobilise-journey *::before,
  .occupy-journey-scroll.mobilise-journey *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms !important;
  }
}