.route-loading{position:fixed;z-index:1300;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;width:min(440px,calc(100% - 32px));padding:16px 18px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 32px #10251d33;pointer-events:none}
.route-loading strong{display:block;font-size:16px;line-height:1.4}.route-loading p{margin:4px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
.route-loading.stops-loading{position:static;transform:none;width:100%;margin:4px 0 12px;pointer-events:auto}
.stops-loading button{margin-top:12px;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;cursor:pointer}
.route-spinner{width:26px;height:26px;flex:0 0 26px;border:3px solid var(--line);border-top-color:var(--green);border-right-color:var(--green);border-radius:50%;animation:route-spin .8s linear infinite}
@keyframes route-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.route-spinner{animation:none}}
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){
  .route-loading{bottom:calc(var(--phone-nav) + env(safe-area-inset-bottom) + 12px)}
  .phone-route-card{padding:10px 12px;touch-action:pan-y pinch-zoom}
  .phone-route-top{display:flex;align-items:center;justify-content:space-between;gap:8px;-webkit-user-select:none;user-select:none}
  .phone-route-top>div{min-width:0}.phone-route-label{font-size:14px;margin-bottom:3px}
  #phone-route-summary{font-size:19px;line-height:1.35;overflow-wrap:anywhere}
  #phone-route-label:is([data-choice="shortest"],[data-choice="alternative"]){color:#146da5}
  [data-theme=dark] #phone-route-label:is([data-choice="shortest"],[data-choice="alternative"]){color:#86d3ff}
  #phone-route-label:is([data-choice="shortest"],[data-choice="alternative"]):before{background:repeating-linear-gradient(to right,currentColor 0 6px,transparent 6px 9px);border-radius:0;box-shadow:none}
  .phone-route-toggle{flex:none;min-width:44px;min-height:44px;padding:4px 6px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--ink);font-size:14px;line-height:1.2;font-weight:650}
  .phone-route-swipe-track{--swipe-color:#146da5;--swipe-fill:#edf6fb;--swipe-ink:#fff;position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;width:100%;min-height:30px;margin:8px 0 0;padding:3px;border:1px solid var(--swipe-color);border-radius:10px;background:var(--swipe-fill);color:var(--swipe-color);font-size:14px;line-height:1.3;font-weight:550;text-align:center;cursor:grab;touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none}
  .phone-route-swipe-track:before{content:"";position:absolute;inset:-7px 0}
  .phone-route-swipe-track[hidden]{display:none}
  .phone-route-swipe-track[data-next="green"]{--swipe-color:#6435c9;--swipe-fill:#f3effb}
  [data-theme=dark] .phone-route-swipe-track{--swipe-color:#86d3ff;--swipe-fill:#223944;--swipe-ink:#16241e}
  [data-theme=dark] .phone-route-swipe-track[data-next="green"]{--swipe-color:#ba97ff;--swipe-fill:#302842}
  .phone-route-swipe-thumb{grid-column:1;grid-row:1;width:100%;min-height:22px;display:grid;place-items:center;border-radius:7px;background:var(--swipe-color);color:var(--swipe-ink);pointer-events:none;transition:transform .18s ease}
  #phone-route-swipe-text{grid-column:2;grid-row:1;display:grid;place-items:center;min-width:0;padding:4px 6px;white-space:nowrap;overflow-wrap:normal}
  .phone-route-swipe-thumb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .phone-route-swipe-track:is([data-choice="shortest"],[data-choice="alternative"]) .phone-route-swipe-thumb{transform:translateX(100%)}
  .phone-route-swipe-track:is([data-choice="shortest"],[data-choice="alternative"]) #phone-route-swipe-text{grid-column:1}
  .phone-route-swipe-track:is([data-choice="shortest"],[data-choice="alternative"]) .phone-route-swipe-thumb svg{transform:rotate(180deg)}
  .phone-route-swipe-track:focus-visible{outline:3px solid var(--swipe-color);outline-offset:3px}
  .phone-route-swipe-track:active{cursor:grabbing}
  .phone-route-extra{margin-top:12px;max-height:35dvh;overflow:auto;overscroll-behavior:contain}
  .phone-route-extra .phone-swipe-hint{font-size:14px}
  .phone-route-actions{margin-top:8px}
  .phone-overview{width:100%;margin-top:8px;min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font-size:14px;font-weight:600}
  .phone-route-card .phone-guidance-status{font-size:14px}
}
@media(max-height:500px) and (orientation:landscape) and (min-width:500px) and (max-width:1000px){
  .phone-route-card{left:12px;right:auto;width:270px;max-height:calc(100% - 24px);overflow:auto}
  .phone-route-extra{max-height:none}.map-legend{left:300px;right:12px;bottom:24px;width:auto}
  .map-legend .legend-key{flex-direction:row;min-height:32px;font-size:14px;gap:5px}
  .map-legend .legend-key>i{margin:0}.map-legend .legend-line{width:18px}
}
@media(max-width:499px){.map-legend{left:12px;right:12px}}
@media(prefers-reduced-motion:reduce){.phone-route-swipe-thumb{transition:none}}
.route-direction{border:0;background:none;pointer-events:none}
.route-direction svg{display:block;width:100%;height:100%;overflow:visible}
.route-direction path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.route-direction .direction-halo{stroke:#182c25;stroke-width:6}
.route-direction .direction-ink{stroke:#fff;stroke-width:2.5}
.route-departure circle{fill:#c2f894;stroke:#163e30;stroke-width:1.5}
.route-departure .direction-halo{stroke:#c2f894;stroke-width:5}
.route-departure .direction-ink{stroke:#163e30;stroke-width:2.5}
.leaflet-tooltip.route-start-cue{background:var(--paper);color:var(--ink);border:1px solid var(--green);border-radius:7px;padding:5px 8px;font:600 .75rem/1.3 var(--font,Arial,sans-serif);box-shadow:0 2px 8px #10251d33;pointer-events:none}
.route-start-cue.leaflet-tooltip-right:before{border-right-color:var(--green)}
.route-start-cue.leaflet-tooltip-left:before{border-left-color:var(--green)}
.phone-direction-note{margin:5px 0 0;color:var(--muted);font-size:.8125rem;line-height:1.4}
.route-direction-note{padding:12px;border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:.875rem;line-height:1.5}
/* The primary walking action stays in thumb reach, outside Options. The
   measured stack also reserves room for the legend and any live notice. */
.map-bottom-controls{display:contents}
#phone-start-walk{display:none}
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){
  .map-bottom-controls{display:grid;gap:8px;position:absolute;left:12px;right:12px;bottom:26px;z-index:650;pointer-events:none}
  .map-bottom-controls>*{pointer-events:auto}
  .map-bottom-controls .map-legend{position:static;inset:auto;max-width:none;width:auto;margin:0}
  .map-bottom-controls .phone-notice{position:static;inset:auto;margin:0;max-height:min(30dvh,180px);overflow:auto;overscroll-behavior:contain}
  #phone-start-walk{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin:0;padding:12px 16px;border:1px solid var(--forest);border-radius:11px;background:var(--forest);color:#fff;font-size:1rem;line-height:1.4;font-weight:700;text-align:center;box-shadow:0 3px 12px #10251d26;touch-action:manipulation}
  #phone-start-walk[hidden],body.picking #phone-start-walk{display:none}
  #phone-start-walk[data-active=true]{background:var(--paper);color:var(--ink);border-color:var(--green)}
  #phone-start-walk:focus-visible{outline:3px solid var(--green);outline-offset:3px}
  .large-text #phone-start-walk{font-size:1.125rem}
  .phone-route-actions{grid-template-columns:1fr}
}
@media(max-height:500px) and (orientation:landscape) and (min-width:500px) and (max-width:1000px){
  .map-bottom-controls{left:300px;right:12px;bottom:24px;gap:6px}
  #phone-start-walk{min-height:44px;padding:8px 12px}
}

/* The compass is outside the turning map, alongside the follow control. */
.map-legend .completed-line{height:4.5px;border:0;border-radius:3px;background:#606f7c;box-shadow:0 0 0 1.5px #fff}
[data-theme=dark] .map-legend .completed-line{background:#c0cbd5;box-shadow:0 0 0 1.5px #15211d}
.map-tools .map-heading-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:48px;min-height:48px;line-height:1;padding:3px}
.map-tools .map-heading-toggle svg{width:25.3px;height:25.3px;flex:none;stroke:none;fill:currentColor;transform-origin:center}
.map-tools .map-heading-toggle span{font-size:12px;font-weight:650}
/* Keep active controls dark-on-lime in both themes: --forest turns pale in dark mode. */
.map-tools .phone-follow[aria-pressed=false]{background:var(--paper);color:var(--ink)}
.map-tools .phone-follow{display:grid;place-items:center;padding:0}
.map-tools .phone-follow svg{display:block;width:26.4px;height:26.4px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.map-tools .phone-follow .location-center{fill:currentColor;stroke:none}