:root{font-family:system-ui,sans-serif;color:#153333;background:#f5f7f5;font-size:18px}*{box-sizing:border-box}body{margin:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}header{background:#103b39;color:white;display:flex;align-items:center;gap:1rem;padding:12px 16px}header strong{font-size:26px}header span{font-size:13px;letter-spacing:1px}.safety{font-size:14px;line-height:1.4;margin:0;padding:10px 16px;background:#fff1cf}#map{height:52dvh;min-height:230px;z-index:0}main>section,#status{padding:12px 16px;margin:0}#status{background:#e6efec;min-height:48px;font-weight:600}label{display:block;margin:12px 0}input,select,textarea,button{font:inherit;max-width:100%}input:not([type=checkbox]),select,textarea{width:100%;padding:12px;border:1px solid #869c98;border-radius:8px;min-height:48px}input[type=checkbox]{width:24px;height:24px;vertical-align:middle;margin-right:8px}button{min-height:48px;min-width:48px;padding:12px 16px;border:0;border-radius:8px;background:#12645c;color:white;margin:4px 0;cursor:pointer}button:disabled{opacity:.55;cursor:default}#calculate,#start,#stop,#resume,#opinion button{width:100%}#stop{background:#883327}details{margin:16px 0}summary{min-height:48px;padding:12px 0;cursor:pointer}.suggestions button{display:block;text-align:left;width:100%;background:#e1ebe8;color:#153333;border:1px solid #b3c6c1}#guidance h1{font-size:27px;line-height:1.25;margin:8px 0}#maneuver{font-size:24px;font-weight:700}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}[hidden]{display:none!important}:focus-visible{outline:3px solid #d98d13;outline-offset:3px}@media(min-width:800px){main{max-width:1000px;margin:auto}#map{height:55dvh}main>section{max-width:650px;margin:auto}}@media(max-width:360px){:root{font-size:16px}header{padding:8px 12px}main>section{padding:10px 12px}#map{height:45dvh}}@media(max-height:500px){#map{height:45dvh;min-height:160px}}
/* Navigation: full viewport map, compact overlays, unrotated controls. */
.leaflet-bar a,.leaflet-touch .leaflet-bar a{width:48px;height:48px;line-height:48px}
#map-frame{position:relative;overflow:hidden}
body.navigating{height:100vh;height:100dvh;overflow:hidden;padding:0}
body.navigating header,body.navigating .safety{display:none}
body.navigating main{position:relative;width:100%;height:100%;max-width:none;margin:0}
body.navigating #map-frame{position:absolute;inset:0}
body.navigating #map{position:absolute;left:50%;top:50%;min-height:0;max-width:none;transform-origin:center}
body.navigating #guidance{position:absolute;z-index:500;top:calc(env(safe-area-inset-top) + 8px);left:calc(env(safe-area-inset-left) + 8px);right:calc(env(safe-area-inset-right) + 8px);padding:10px 12px;margin:0;max-width:none;border-radius:12px;background:#fffffff2;box-shadow:0 2px 12px #103b3933}
body.navigating #guidance h1{font-size:21px;line-height:1.2;margin:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.navigating #guidance p{margin:4px 0}
body.navigating #maneuver{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.navigating #remaining{font-size:15px}
body.navigating #guidance .device-notice{font-size:14px;color:#782518}
body.navigating .nav-controls{display:flex;gap:6px;flex-wrap:wrap}
body.navigating .nav-controls button{flex:1;padding:8px;font-size:15px;white-space:nowrap;width:auto}
body.navigating #status{position:absolute;z-index:500;bottom:calc(env(safe-area-inset-bottom) + 24px);left:8px;right:8px;min-height:0;padding:6px 10px;border-radius:8px;font-size:13px;background:#e6efeced;pointer-events:none}
body.navigating #planning{position:absolute;inset:0;z-index:600;overflow:auto;background:#f5f7f5}
body.navigating #planning:not([hidden])~#guidance{display:none}
body.navigating .leaflet-control-attribution{font-size:10px}
@media(max-height:500px){body.navigating #guidance{right:auto;width:min(44%,360px)}body.navigating #guidance h1{font-size:18px}body.navigating #maneuver{font-size:17px}}

.map-attribution{position:absolute;z-index:400;right:0;bottom:env(safe-area-inset-bottom);font-size:11px;background:#ffffffdc;color:#153333;padding:2px 5px}

.suggestions strong,.suggestions span{display:block}.suggestions span{font-size:14px;margin-top:4px}#cartographic-status{overflow-wrap:anywhere;font-size:14px}