/* route-log.css -- the stop list on /routes/<slug> and the guide pages (/395).
   A road log on a 2px pine spine: Space Mono index, Archivo place name, one body line.
   The spine "draws" with scroll and the stop you are reading gets .is-here (route-log.js).
   Without JS, or with prefers-reduced-motion, the log is fully static and fully readable. */
.log{list-style:none;margin:30px 0 0;padding:0;position:relative}
.log::before{content:"";position:absolute;left:15px;top:6px;bottom:6px;width:2px;background:var(--pine)}
.log-spine{position:absolute;left:15px;top:6px;width:2px;height:0;overflow:visible;pointer-events:none}
.log-spine path{stroke:var(--pine-line);stroke-width:2;fill:none}
.ls{position:relative;padding:0 0 30px 48px}
.ls:last-child{padding-bottom:6px}
.ls-leg{margin:0 0 8px;font-family:var(--mono);font-size:12.5px;line-height:1.4;color:var(--faint)}
.ls-i{position:absolute;left:0;width:32px;margin-top:-2px;padding:2px 0 5px;background:var(--dusk);text-align:center;
  font-family:var(--mono);font-size:15px;line-height:1.2;color:var(--ink-soft);transition:color .18s var(--ease-out,ease-out)}
.ls-n{margin:0;font-family:var(--display);font-weight:600;font-size:21px;line-height:1.2;letter-spacing:-.01em;color:var(--bright)}
.ls.is-here .ls-i{color:var(--gold)}
.ls-d{margin:3px 0 0;color:var(--ink-soft);font-size:15px;line-height:1.45;max-width:60ch}
.ls .ph{display:block;width:100%;height:auto;border-radius:6px;margin:12px 0 0;background:var(--pine)}
.ls .cap{margin:4px 0 0;font-size:13px;color:var(--faint)}
.ls h3{margin:14px 0 2px;font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink-soft)}
.ls ul{margin:0;padding-left:18px}.ls li{margin:6px 0;font-size:15px;line-height:1.45}
.ls a.src{margin-left:4px;font-size:13px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.ls-maps{display:inline-flex;align-items:center;min-height:44px;margin-top:2px;font-weight:600;font-size:15px;
  color:var(--gold);text-decoration:underline;text-underline-offset:3px}
/* badges are type, not pills */
.tag{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--free);margin-left:6px;white-space:nowrap}
.tag.detour{color:var(--gold)}
/* sticky Maps button: appears after the first-screen button scrolls away, names the leg you are reading */
.stick{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));z-index:40;width:min(648px,calc(100% - 32px));
  transform:translate(-50%,160%);visibility:hidden;transition:transform .2s var(--ease-out,ease-out),visibility 0s linear .2s}
.stick.on{transform:translate(-50%,0);visibility:visible;transition:transform .2s var(--ease-out,ease-out),visibility 0s}
.stick a{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 16px;border-radius:14px;
  background:var(--gold);color:var(--dusk);font-family:var(--display);font-weight:700;font-size:17px;text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.45)}
.stick a:focus-visible{outline:2.5px solid var(--bright);outline-offset:3px}
.stick span{transition:opacity .12s linear}
.stick span.swap{opacity:0}
@media (prefers-reduced-motion: reduce){
  .log-spine{display:none}
  .ls-i,.stick,.stick span{transition:none}
}