/* eZephyr v2 — the route: a local-train line of the journey's stops.
 * Markup: generated into index.html by tools/build-home.js. Behaviour: js/route.js.
 *   - No JS: a plain row of in-page links at the top of the journey.
 *   - Journey (desktop): a panel over the underground strip; a small train rides
 *     the line with progress.
 *   - Stacked with JS (phones, portrait tablets): a compact bar docked to the
 *     bottom of the screen while the journey is in view.
 * Built stops are links; planned stops are shown, muted and unlinked.
 */

.route {
  --route-ink: var(--ink-strong);
  --route-lilac: #a69ccc;  /* local train (tokens.css --ez-lilac) */
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 16px;
  padding: 10px 16px 8px;
  border-bottom: 2px solid var(--route-ink);
  background: var(--paper);
  color: var(--route-ink);
}
.route__now { display: none; }

/* The line and its stops */
.route__track { position: relative; container-type: inline-size; }
.route__line { position: relative; display: grid; grid-template-columns: repeat(var(--stops), minmax(0, 1fr)); }
.route__line::before {
  content: '';
  position: absolute;
  left: calc(50% / var(--stops));
  right: calc(50% / var(--stops));
  top: 13px;
  height: 4px;
  border-radius: 2px;
  background: var(--route-ink);
}
.route__stop { display: flex; justify-content: center; min-width: 0; }
.route__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 24px;
  min-height: 44px;
  padding: 0 2px;
  color: inherit;
  text-decoration: none;
  text-align: center;
}
.route__dot {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  margin-top: 6px;
  border: 3px solid var(--route-ink);
  border-radius: 50%;
  background: #fff;
}
.route__place {
  max-width: 100%;
  font: 400 0.75rem/1.1 var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.route__label { display: none; }
a.route__link:hover .route__place,
a.route__link:focus-visible .route__place { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 3px; }
a.route__link[aria-current="step"] .route__dot { background: var(--yellow); transform: scale(1.2); }
a.route__link[aria-current="step"] .route__place { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--route-ink); text-underline-offset: 3px; }
/* Planned stops: on the map, not yet on the line. */
.route__stop--planned .route__link { color: var(--ink); cursor: default; }
.route__stop--planned .route__dot { border-style: dashed; border-color: var(--ink); background: transparent; }

/* The train: rides the line from the first stop to the last (transform only). */
.route__train {
  position: absolute;
  left: calc(50cqw / var(--stops) - 13px);
  top: 7px;
  z-index: 2;
  width: 26px;
  height: 16px;
  border: 2px solid var(--route-ink);
  border-radius: 4px 7px 4px 4px;
  background: var(--route-lilac);
  box-shadow: inset 0 -4px 0 var(--yellow);
  transform: translateX(calc(var(--progress, 0) * (100cqw - 100cqw / var(--stops))));
  pointer-events: none;
  display: none;
}
.js .route__train { display: block; }

.route__pause {
  min-height: 32px;
  padding: 4px 12px;
  border: 2px solid var(--route-ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--route-ink);
  font: 600 0.875rem/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
}
.route__pause[hidden] { display: none; }
.route :focus-visible { outline: 3px solid var(--route-ink); outline-offset: 2px; }

/* Narrow screens: stop names give way to the current stop's name, shown above
 * the line beside the pause button. */
@media (max-width: 899px) {
  .js .route__now { grid-column: 1; grid-row: 1; }
  .route__pause { grid-column: 2; grid-row: 1; }
  .route__track { grid-column: 1 / -1; grid-row: 2; }
  .route__dot { width: 15px; height: 15px; border-width: 2.5px; margin-top: 7px; }
  .route__place {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .js .route__now {
    display: block;
    font: 400 0.875rem/1.2 var(--font-display);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .route__now-label { font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: 0; }
}

/* ---------- Journey (desktop): a panel over the underground strip ---------- */
.is-journey .route {
  position: absolute;
  left: 50%;
  bottom: calc(16 * var(--a));
  width: min(94vw, 1080px);
  padding: 8px 14px 6px;
  border: 2px solid var(--route-ink);
  border-radius: 10px;
  background: rgba(255, 250, 240, 0.95);
  box-shadow: 0 4px 0 var(--route-ink);
  transform: translateX(-50%);
}
.is-journey .route__now {
  display: block;
  grid-column: 1 / -1;
  font: 400 0.8125rem/1.2 var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.is-journey .route__now-label { font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: 0; }

/* ---------- Stacked with JS: docked to the bottom of the screen ---------- */
.js:not(.is-journey) .route {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 6px 10px 4px;
  border: 2px solid var(--route-ink);
  border-radius: 10px;
  background: rgba(255, 250, 240, 0.96);
  box-shadow: 0 3px 0 var(--route-ink);
  transition: transform 0.3s ease, visibility 0.3s;
}
.js:not(.is-journey) .route:not(.route--docked) { visibility: hidden; transform: translateY(calc(100% + 16px)); }
.js:not(.is-journey) .journey { padding-bottom: 96px; }

@media (prefers-reduced-motion: reduce) {
  .route__train, .js:not(.is-journey) .route { transition: none; }
  a.route__link[aria-current="step"] .route__dot { transform: none; }
}