/* Steps: an <ol class="steps"> drawn as waypoints on a caravan route. Use it only when the order matters.
   Vertical by default: a gold line down the left with a numbered stop per step.
   .steps-row: on wide containers the route runs left to right across the top.
   .route (V2-SHELL): the I-II-III caravan road for home and download. A featured window of stops joined by a
   dashed road; horizontal when its container is 760px or wider, vertical below. Each stop:
     <ol class="route window featured">
       <li class="route-stop"><span class="medal numeral" aria-hidden="true">I</span>
         <div><h3 class="route-title">Create an account</h3><p>One line.</p><a class="text-link" href="..">Action</a></div></li>
     </ol>
   Wrap it in a .cq (or any size container) so it switches by its own width. */

.steps { counter-reset: step; display: grid; gap: 0; margin-top: var(--s-5); }
.step {
  counter-increment: step;
  position: relative;
  padding: 0 0 var(--s-6) calc(2.75rem + var(--s-4));
}
.step:last-child { padding-bottom: 0; }
/* The numbered stop. */
.step::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.2rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--accent-hi);
  background: radial-gradient(circle at 50% 30%, var(--ink-3), var(--ink-1) 75%);
  border: 1px solid var(--accent);
  border-radius: 50%;
  box-shadow: var(--edge), 0 0 0 5px var(--ink-0);
  z-index: 1;
}
/* The road between stops. */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1.375rem - 0.5px);
  top: 2.75rem;
  bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(180deg, var(--line-strong) 0 6px, transparent 6px 11px);
}
.step-title {
  margin-bottom: var(--s-1);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--text);
}
.step p { color: var(--text-2); max-width: 60ch; }

@container (min-width: 760px) {
  .steps-row { grid-template-columns: repeat(var(--steps, 4), 1fr); gap: var(--s-5); }
  .steps-row .step { padding: calc(2.75rem + var(--s-5)) 0 0; }
  .steps-row .step::before { top: 0; }
  .steps-row .step:not(:last-child)::after {
    left: 2.75rem;
    right: calc(var(--s-5) * -1);
    top: 1.375rem;
    bottom: auto;
    width: auto;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 11px);
  }
}

/* ---------- The caravan route ---------- */
.route { display: grid; gap: var(--s-5); padding: var(--s-5); margin: 0; list-style: none; }
.route-stop { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.route-stop .medal { --m: 56px; }
.route-stop:not(:last-child)::after { /* the road down to the next stop */
  content: "";
  position: absolute;
  left: 27.5px;
  top: 64px;
  bottom: calc(-1 * var(--s-5) + 4px);
  width: 1px;
  background: repeating-linear-gradient(180deg, var(--gold) 0 5px, transparent 5px 10px);
  opacity: 0.7;
}
.route-title { margin: 0 0 var(--s-2); font-size: var(--fs-xl); color: var(--text); }
.route-stop p { color: var(--text-2); font-size: var(--fs-sm); }
.route-stop .text-link { margin-top: var(--s-3); }
/* Wide: each stop is its own centred column, medallion on top, the road running from medallion to medallion,
   and the actions on one line at the foot of the window whatever the text length. */
@container (min-width: 760px) {
  .route { grid-template-columns: repeat(var(--stops, 3), minmax(0, 1fr)); gap: 0; padding: var(--s-6) 0 var(--s-5); }
  .route-stop { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: 0 var(--s-6); text-align: center; }
  .route-stop > div { flex: 1; display: flex; flex-direction: column; align-items: center; }
  .route-stop p { max-width: 40ch; text-wrap: balance; }
  .route-stop .text-link { margin-top: auto; padding-top: var(--s-3); }
  .route-stop:not(:last-child)::after {
    left: calc(50% + 28px + 12px);
    right: calc(-50% + 28px + 12px);
    top: 28px;
    bottom: auto;
    width: auto;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--gold) 0 5px, transparent 5px 10px);
    z-index: 1;
  }
}

/* .route.route-v: always a vertical road, at any width (download, mac): stops with whole sentences in a
   column beside other windows. Smaller medallions on phones. */
.route.route-v { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5); }
.route-v .route-stop { padding: 0; border: 0; grid-template-columns: auto minmax(0, 1fr); }
.route-v .route-stop .medal { --m: 48px; }
.route-v .route-stop:not(:last-child)::after {
  left: 23.5px;
  right: auto;
  top: 58px;
  bottom: calc(-1 * var(--s-5) + 6px);
  width: 1px;
  height: auto;
  background: repeating-linear-gradient(180deg, var(--gold) 0 5px, transparent 5px 10px);
}
.route-v .route-title { margin-bottom: var(--s-1); padding-top: var(--s-2); font-size: var(--fs-lg); line-height: 1.25; }
.route-v .route-stop p { font-size: var(--fs-base); }
@container view (max-width: 599px) {
  .route.route-v { padding: var(--s-4); gap: var(--s-4); }
  .route-v .route-stop { gap: var(--s-3); }
  .route-v .route-stop .medal { --m: 38px; }
  .route-v .route-stop:not(:last-child)::after { left: 18.5px; top: 48px; bottom: calc(-1 * var(--s-4) + 6px); }
  .route-v .route-title { padding-top: var(--s-1); }
}