/* Small, interruptible transitions; never animate the map canvas or live turn updates. */
.map-feature-tip{position:absolute;z-index:2;max-width:240px;padding:7px 10px;border-radius:9px;background:#063c2e;color:#fff;box-shadow:0 3px 12px #0002;font:600 13px/1.3 system-ui;pointer-events:none;overflow-wrap:anywhere}
.map-feature-tip[hidden]{display:none}
.route-marker{cursor:pointer}
main:has(.route-panel.is-navigating) .route-marker{cursor:default}
main:has(.route-panel:not([hidden])) .map-motion-button{display:none}
/* Preference resolves the device setting unless the user explicitly chooses Gentle. */
  :root[data-loka-motion="gentle"] button{transition:background-color 140ms ease,border-color 140ms ease,box-shadow 140ms ease}
  :root[data-loka-motion="gentle"] .place-card:not([hidden]),:root[data-loka-motion="gentle"] .route-panel:not([hidden]):not(.is-navigating){animation:loka-reveal 180ms ease-out}
  :root[data-loka-motion="gentle"] .route-body:not([hidden]),:root[data-loka-motion="gentle"] .route-panel.is-collapsed .route-result{animation:loka-reveal 160ms ease-out}
  :root[data-loka-motion="gentle"] .route-directions-sheet[open]{animation:loka-sheet-in 200ms cubic-bezier(.2,.7,.2,1)}
  :root[data-loka-motion="gentle"] .route-directions-sheet::backdrop{animation:loka-reveal 180ms ease-out}
  :root[data-loka-motion="gentle"] .directions-content>ol,:root[data-loka-motion="gentle"] .directions-route,:root[data-loka-motion="gentle"] .route-restore:not([hidden]),:root[data-loka-motion="gentle"] .map-feature-tip:not([hidden]){animation:loka-reveal 140ms ease-out}
@keyframes loka-reveal{from{opacity:0}to{opacity:1}}
@keyframes loka-sheet-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}

.map-motion-button{min-width:48px;min-height:44px;padding:0 7px;border:0;border-radius:10px;background:#fff;color:#063c2e;box-shadow:0 2px 8px #0002;font:600 12px system-ui}
.motion-dialog{border:0;border-radius:16px;padding:20px;width:min(340px,calc(100vw - 32px));color:#063c2e;background:white;box-sizing:border-box}.motion-dialog::backdrop{background:#0005}.motion-dialog header{display:flex;align-items:center;justify-content:space-between}.motion-dialog h2{font-size:20px;margin:0}.motion-dialog button{width:44px;height:44px;border:0;border-radius:8px;color:inherit;background:#edf4ef;font-size:24px}.motion-dialog label{display:grid;gap:8px;margin-top:16px}.motion-dialog select{width:100%;min-height:44px;font:inherit;padding:8px;border:1px solid #c8d5cd;border-radius:8px;background:white;color:inherit}.motion-dialog p{font-size:13px;line-height:1.5}