/* home: the route drawn as a narrowing sequence of stops, top to bottom */
[data-role="route"] { list-style: none; margin: 1.25rem 0 0; padding: 0; }
[data-role="route-step"] {
  display: grid; gap: 0.2rem; margin: 0 auto; padding: 0.9rem 1rem;
  background: var(--wash); border-radius: 10px;
}
[data-role="route-step"]:nth-child(1) { width: 100%; }
[data-role="route-step"]:nth-child(3) { width: 97%; }
[data-role="route-step"]:nth-child(5) { width: 94%; }
[data-role="route-step"]:nth-child(7) { width: 91%; }
[data-role="route-step"]:nth-child(9) { width: 88%; }
[data-role="route-step"]:nth-child(11) { width: 85%; }
[data-role="step-tag"] { font: 400 1rem/1.4 var(--mono); color: var(--grey); }
[data-role="step-name"] { font-weight: 700; font-size: 1.125rem; color: var(--ink); }
a[data-role="step-name"] { display: flex; align-items: center; min-height: 44px; text-decoration-color: var(--accent); }
[data-role="route-step"][data-state="focus"] { background: var(--accent); color: #fff; }
[data-role="route-step"][data-state="focus"] [data-role="step-tag"],
[data-role="route-step"][data-state="focus"] [data-role="step-name"] { color: #fff; text-decoration-color: #fff; }
[data-role="route-gap"] {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  font: 400 1rem/1.4 var(--mono); color: var(--grey); padding: 0.35rem 0;
}
[data-role="route-gap"]::before, [data-role="route-gap"]::after {
  content: ""; width: 2px; height: 0.75rem; background: var(--rule);
}
@media (min-width: 48rem) {
  [data-role="route-step"] { grid-template-columns: 6.5rem 1fr; column-gap: 1rem; align-items: baseline; }
  [data-role="step-text"] { grid-column: 2; }
  [data-role="route-step"]:nth-child(3) { width: 93%; }
  [data-role="route-step"]:nth-child(5) { width: 86%; }
  [data-role="route-step"]:nth-child(7) { width: 79%; }
  [data-role="route-step"]:nth-child(9) { width: 72%; }
  [data-role="route-step"]:nth-child(11) { width: 65%; }
}