/* Routing keeps the map visible and pauses the underlying place card. */
html body #app.loom-routing :is(#discovery-tray,.block-property-panel,.living-panel,.hud-bottom,aside,.mobile-map-menu,.map-control-dock,.hud-search,.map-detail-back,.ward-tour-resume,.mirble-feedback-button,#people-drawer,#government-drawer,#today-drawer,#business-tools),html body #app.loom-routing #discovery-tray:has(>.location-step){display:none!important}
html body #app.loom-routing .mapboxgl-marker:not(.loom-route-marker){visibility:hidden!important;pointer-events:none!important}
html body #app.loom-routing #map{right:0}
html body #app .loom-route-panel{position:absolute;z-index:65;box-sizing:border-box;left:20px;bottom:30px;width:min(380px,calc(100% - 40px));max-height:55%;overflow:auto;overscroll-behavior:contain;background:var(--map-surface,#fffdf5);color:var(--map-ink,#244b43);border:1px solid var(--map-border,#a9bcb0);border-top:4px solid #d89752;border-radius:20px;padding:16px;box-shadow:0 8px 30px #0003;font-size:16px}
html body #app .loom-route-panel[hidden],html body #app .loom-route-crosshair[hidden]{display:none!important}
.loom-route-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.loom-route-head p{font-size:14px;margin:0 0 3px}.loom-route-head h2{font-size:20px;line-height:1.3;margin:0;overflow-wrap:anywhere}
html body #app .loom-route-panel button,html body #app .loom-route-button{min-height:44px;padding:9px 12px;border:1px solid var(--map-border,#a9bcb0);border-radius:11px;background:var(--map-surface,#fffdf5);color:var(--map-ink,#244b43);font:inherit;font-size:16px;line-height:1.3;cursor:pointer}
html body #app .loom-route-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;background:var(--map-soft,#dfeddb);font-weight:600}
html body #app .hud-bottom .loom-route-button{float:none;margin-left:0}
.loom-route-button::before{content:'↗';font-size:22px;line-height:1}
html body #app .loom-route-head>button{width:44px;flex:0 0 44px;padding:0;font-size:25px}
.loom-route-modes{display:flex;gap:5px;padding:4px;margin:14px 0 10px;border-radius:14px;background:var(--map-soft,#dfeddb)}
html body #app .loom-route-modes button{flex:1;border-color:transparent;background:transparent;padding-inline:6px}
html body #app .loom-route-modes button[aria-pressed=true],html body #app .loom-route-primary{background:#34554a;border-color:#34554a;color:#fff8e6}
.loom-route-status{font-size:16px;line-height:1.45;margin:12px 0}.loom-route-actions{display:flex;flex-wrap:wrap;gap:8px}.loom-route-actions>button{flex:1}
.loom-route-summary{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:10px 0 2px}.loom-route-summary strong{font-size:28px;line-height:1.25}.loom-route-summary span{font-size:16px}.loom-route-from{font-size:14px;margin:6px 0 12px}
.loom-route-note{font-size:14px;line-height:1.4;margin:12px 0 0}.loom-route-retry{margin-top:8px;width:100%}.loom-route-panel button:disabled{opacity:.55;cursor:wait}
html body #app .loom-route-panel :focus-visible,html body #app .loom-route-button:focus-visible{outline:3px solid #a87529;outline-offset:2px}
.loom-route-marker{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#a73d27;color:#fffdf5;border:3px solid #fff8e6;box-shadow:0 2px 9px #0005;font-size:16px;font-weight:700;pointer-events:none}
.loom-route-crosshair{position:absolute;z-index:10;left:50%;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;border:3px solid #fff8e6;border-radius:50%;box-shadow:0 0 0 2px #a73d27,0 2px 8px #0006;background:#a73d2777;pointer-events:none}
.loom-route-crosshair::after{content:'';position:absolute;left:9px;top:9px;width:6px;height:6px;border-radius:50%;background:#fff8e6}
.park-guide-footer{flex-wrap:wrap}.park-guide-footer .loom-route-button{flex:1 0 100%;margin:0!important}.college-links .loom-route-button{margin:0!important}
@media(max-width:600px){html body #app .loom-route-panel{left:10px;right:10px;bottom:calc(30px + env(safe-area-inset-bottom,0px));width:auto;max-height:53%;padding:13px}.loom-route-modes{margin-top:10px}.loom-route-head h2{font-size:19px}}
@media(max-height:500px){html body #app .loom-route-panel{max-height:calc(100% - 90px);width:min(330px,48%)}.loom-route-note{display:none}}
