/* route: numbered stops in a row that light up one after another when you press Run.
     <div class="route" data-route>
       <ol class="route-steps"><li class="route-step"><span class="route-n">1</span><b>Name</b><span class="route-d">what happens</span></li> …</ol>
       <div class="route-foot"><button class="route-btn">Run it</button></div>
     </div>
   route.js sets .is-on (current) and .is-done. Two columns on a phone. */
.route { margin: 0; }
.route-steps { list-style: none; margin: 0; padding: 12px 0 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.route-step { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 16px 12px 12px; border-radius: var(--radius); background: var(--surface); box-shadow: 0 0 0 1px rgb(var(--shadow) / 0.08); transition: box-shadow 200ms ease-out, transform 200ms cubic-bezier(.23, 1, .32, 1); }
.route-n { position: absolute; top: -9px; left: 10px; padding: 3px 7px; border-radius: 999px; background: var(--gray-1200); color: var(--on-ink); font: 11px/1 var(--mono); transition: background 200ms ease-out; }
.route-step b { font-size: var(--text-ui); font-weight: 600; line-height: var(--leading-heading); }
.route-d { font-size: 12.5px; line-height: 1.4; color: var(--gray-1100); }
.route-live { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--gray-400); vertical-align: 1px; transition: background 200ms ease-out; }
.route-step.is-on { box-shadow: 0 0 0 1.5px var(--gray-1200), 0 4px 12px rgb(var(--shadow) / 0.08); transform: translateY(-2px); }
.route-step.is-done .route-n { background: var(--kind-script); }
.route-step.is-done .route-live { background: var(--kind-script); }
.route-foot { margin-top: var(--s-3); }
.route-btn { border: 0; border-radius: 6px; background: var(--gray-1200); color: var(--on-ink); padding: 8px 14px; font: var(--weight-medium) var(--text-ui)/1 var(--font); cursor: pointer; transition: transform 120ms cubic-bezier(.23, 1, .32, 1), background 150ms ease-out; }
.route-btn:hover { background: var(--ink-hover); }
.route-btn:active { transform: scale(.97); }
.route-btn:focus-visible { outline: 2px solid var(--kind-config); outline-offset: 2px; }
.route-btn:disabled { opacity: .4; cursor: default; transform: none; }
@media (max-width: 640px) { .route-steps { grid-template-columns: 1fr 1fr; gap: 16px 10px; } }
@media (prefers-reduced-motion: reduce) { .route-step, .route-n, .route-btn, .route-live { transition: none; } .route-step.is-on { transform: none; } }