:root{font-family:system-ui,-apple-system,sans-serif;color:#172235;background:#eef3f7}
*{box-sizing:border-box}
body{margin:0}
main{max-width:1500px;margin:auto;padding:24px}
header{margin-bottom:20px}
h1{margin:.15rem 0;font-size:clamp(1.8rem,4vw,3rem)}
header p{margin:.25rem 0;color:#526173}
.eyebrow{color:#00789f;font-weight:700}
form{display:grid;grid-template-columns:1fr auto 1fr auto;gap:14px;align-items:end;background:white;padding:18px;border-radius:16px;box-shadow:0 8px 28px #17324d18}
label{display:grid;gap:7px;font-weight:700}
input,button{font:inherit;border-radius:9px;padding:12px 14px}
input{border:1px solid #aab6c2;width:100%}
input:focus{outline:3px solid #09c5ff66;border-color:#00789f}
button{border:0;background:#007fa9;color:white;font-weight:800;cursor:pointer}
#swap{font-size:1.4rem;background:#e4eef3;color:#17465a}
.map-card,.directions{margin-top:20px;background:white;padding:12px;border-radius:16px;box-shadow:0 8px 28px #17324d18}
.map-viewport{overflow-x:auto;overflow-y:hidden;max-height:none;overscroll-behavior-x:contain;overscroll-behavior-y:auto;touch-action:pan-x pan-y}
.map-wrap{position:relative;width:100%;max-width:none}
.map-wrap img{display:block;width:100%;height:auto}
.map-wrap svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.map-tools{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.map-tools button{padding:8px 12px}
.halo{fill:none;stroke:white;stroke-width:17;stroke-linejoin:round;stroke-linecap:round}
.route{fill:none;stroke:#006cff;stroke-width:9;stroke-linejoin:round;stroke-linecap:round}
.start{fill:#14a44d;stroke:white;stroke-width:6}
.finish{fill:#e02424;stroke:white;stroke-width:6}
.error{background:#fff0f0;color:#a40000;padding:12px;border-radius:9px;font-weight:700}
.nearest-result{margin:14px 0 0;padding:12px 14px;border-radius:9px;background:#e6f6fb;color:#17465a}
.directions{padding:18px 28px}
.directions h2{margin-top:0}
.directions li{padding:.25rem 0}
.eyebrow a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
.field-control{position:relative;display:block}
.input-clear{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:6px;align-items:stretch}
.clear-field{padding:4px;background:#e4eef3;color:#526173;font-size:1.35rem;line-height:1}
.clear-field:hover{background:#e4eef3}
.suggestions{position:absolute;z-index:20;top:calc(100% + 4px);left:0;right:48px;max-height:280px;overflow:auto;padding:5px;background:white;border:1px solid #aab6c2;border-radius:9px;box-shadow:0 8px 24px #17324d33}
.suggestions[hidden]{display:none}
.suggestion{display:block;width:100%;padding:9px 10px;border-radius:6px;background:white;color:#172235;text-align:left;font-weight:500}
.suggestion:hover,.suggestion:focus{background:#e4eef3;outline:none}
footer{margin-top:24px;padding:16px 4px 4px;color:#526173;text-align:right}
@media(max-width:760px){main{padding:12px}
form{grid-template-columns:1fr}
#swap{justify-self:start;transform:rotate(90deg)}
.map-card{padding:6px}
.map-viewport{max-height:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;overscroll-behavior-y:auto;touch-action:pan-x pan-y}
}