/* The thread belongs to the whole exchange; the bottle follows the reader. */
.journey-bottle-control {
  position:absolute;
  z-index:7;
  display:block;
  width:44px;
  min-width:44px;
  min-height:72px;
  margin:0;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  cursor:pointer;
  touch-action:manipulation;
}
.journey-bottle-cue {
  position:absolute;
  right:0;
  bottom:4px;
  display:grid;
  place-items:center;
  width:17px;
  height:17px;
  border:1px solid #c7bdcc;
  border-radius:50%;
  background:#f6f3e9;
  color:#80618e;
  font:11px/1 var(--sans);
  opacity:.65;
  transition:opacity .15s,transform .15s;
}
.journey-bottle-control:hover .journey-bottle-cue,
.journey-bottle-control:focus-visible .journey-bottle-cue {
  opacity:1;
  transform:translateY(-2px);
}
.journey-bottle-control:focus-visible {
  outline:2px solid #9c87ab;
  outline-offset:3px;
}
@media (min-width:901px) {
  .journey-route.route-column{position:sticky;top:20px;align-self:start;padding-top:17px}
  .journey-route .phase-roadmap{--route-h:clamp(340px,48vh,460px)}
  .journey-route .phase-roadmap .phase-stop.active .phase-dot{opacity:1}
  .journey-route .phase-roadmap .phase-stop.bottle-here .phase-dot{opacity:0}
}
@media (min-width:901px) and (max-height:820px){
  .journey-route .phase-roadmap{--route-h:clamp(300px,47vh,360px)}
}

/* A short rail stays with the reader on a phone; the full journey is retained. */
@media (max-width:900px) {
  .journey-route .mobile-route-strip {
    position:relative;
    overflow:visible;
  }
}

@media (prefers-reduced-motion:reduce) {
  .journey-route [data-route-mascot] use {
    animation:none!important;
  }
  .journey-bottle-cue {
    transition:none;
  }
}