:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#14324a;background:#f4f7fb}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}.hidden{display:none!important}.top{height:75px;background:#fff;border-bottom:1px solid #e3eaf0;display:flex;align-items:center;justify-content:space-between;padding:0 26px}.brand{display:flex;gap:11px;align-items:center}.brandmark{width:43px;height:43px;border-radius:13px;background:linear-gradient(145deg,#0d7192,#083354);color:#fff;font-size:27px;font-weight:900;text-align:center;line-height:43px}.brand strong{font-size:24px;letter-spacing:-1px}.brand strong span{color:#0c96ab}.brand small{display:block;color:#74879a;font-size:10px;font-weight:600;letter-spacing:.09em}.brand small b{color:#d17c27}.header-actions{display:flex;align-items:center;gap:13px}.chip,.pill{font-size:11px;font-weight:700;color:#477084;background:#eaf5f6;border-radius:40px;padding:7px 11px}.chip.warning{background:#fff0e6;color:#ad5a15}.icon-btn{border:1px solid #e0e8ed;background:#fff;border-radius:11px;height:36px;min-width:38px;color:#2e5065}.layout{height:calc(100dvh - 75px);display:grid;grid-template-columns:390px minmax(0,1fr)}.side{background:#f6f8fb;overflow:auto;padding:17px 16px 16px 20px;z-index:2;box-shadow:3px 0 16px #162f4014}.panel{background:#fff;border:1px solid #e5ebef;border-radius:16px;padding:21px;margin-bottom:13px;box-shadow:0 5px 18px #123b4908}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:17px}.section-heading h1,.section-heading h2{margin:4px 0 0;letter-spacing:-.035em}.section-heading h1{font-size:24px}.section-heading h2{font-size:18px}.overline{font-weight:800;color:#1186a6;letter-spacing:.15em;font-size:10px}.trip-fields{display:flex;gap:14px;align-items:stretch}.path-dots{width:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.path-dots i{width:12px;height:12px;border-radius:50%;border:3px solid #14869b}.path-dots i:last-child{border:0;background:#ed975a;border-radius:3px}.path-dots span{width:2px;height:35px;border-left:2px dashed #d6dfe4}.fields{flex:1;min-width:0}.field{display:flex;background:#f7f9fb;border:1px solid #dbe6ec;border-radius:10px;margin:0 0 9px;min-height:48px;align-items:center;padding:0 10px}.field:focus-within{border-color:#16a1b4;background:white;box-shadow:0 0 0 3px #16a1b417}.field input{width:100%;border:0;outline:0;background:none;min-width:0;font-size:12px;color:#18354e}.field button{border:0;background:transparent;font-size:23px;color:#1483a1}.planner-options{display:flex;justify-content:space-between;align-items:center;margin:10px 0 16px}.soft,.plain{border:1px solid #dae7ec;background:#f5fafb;border-radius:9px;padding:8px 11px;font-size:12px;color:#2d6376;font-weight:700}.plain{border:0;background:transparent}.option{color:#6e8592;font-size:11px;display:flex;align-items:center;gap:5px}.option span{color:#ab9e8a;font-size:9px}.primary{border:0;border-radius:11px;background:#0d7891;color:#fff;width:100%;padding:14px 15px;display:flex;justify-content:center;gap:12px;font-weight:800;box-shadow:0 7px 12px #0d789122}.primary:hover{background:#075a73}.status-line,.subtle{font-size:11px;color:#81919c;line-height:1.6}.status-line{margin-top:12px;text-align:center}.status-line.error{color:#b53c36}.suggestions{border:1px solid #d8e4eb;border-radius:10px;margin:4px 0;overflow:hidden;max-height:240px;overflow-y:auto}.suggestions button{display:block;text-align:left;border:0;background:#fff;width:100%;padding:11px 12px;border-bottom:1px solid #edf1f5}.suggestions button:hover{background:#e9f6f8}.suggestions strong{display:block;font-size:12px}.suggestions span{font-size:10px;color:#83919d}.shortcut-row{display:flex;gap:7px;flex-wrap:wrap}.shortcut{font-size:12px;color:#456176;font-weight:650;background:#f1f7f9;border:1px solid #e3eef1;border-radius:9px;padding:10px 12px}.divider{border-bottom:1px solid #ebf0f3;margin:20px 0}.report-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.report-header strong{font-size:13px}.report-header p{margin:5px 0;color:#87949c;font-size:11px}.side-footer{font-size:10px;color:#9ca8b3;display:flex;gap:7px;flex-wrap:wrap;padding:4px 10px}.side-footer a{color:#0e8197}.map-area{position:relative;overflow:hidden}.map-area #map{position:absolute;inset:0}.map-tools{position:absolute;right:20px;top:18px;display:flex;flex-direction:column;gap:9px}.map-btn{background:#fff;border:1px solid #dce6eb;box-shadow:0 3px 12px #132b3930;border-radius:11px;width:43px;height:43px;color:#244d67;font-size:20px;font-weight:700}.map-btn.active{color:#0b8296;background:#e8f9fa}.map-status{position:absolute;left:20px;top:20px;background:#fff;border-radius:30px;padding:12px 15px;display:flex;gap:8px;align-items:center;box-shadow:0 3px 15px #132b3926;font-size:11px;font-weight:800;color:#40687d}.live-dot{width:8px;height:8px;background:#159d78;border-radius:50%;box-shadow:0 0 0 4px #159d781c}.map-card{position:absolute;left:20px;bottom:37px;background:#fff;border:1px solid #e2ebef;box-shadow:0 7px 30px #0d213b2c;border-radius:15px;padding:18px 20px;max-width:340px}.map-card strong{font-size:15px}.map-card p{color:#8194a3;font-size:12px;margin:7px 0 0}.map-bottom{position:absolute;right:10px;bottom:7px;display:flex;gap:10px;background:#fffd;border-radius:5px;padding:3px 7px;color:#668092;font-size:9px}.route-choice{border:1px solid #e0e9ee;border-radius:12px;padding:12px;margin-bottom:10px;text-align:left;width:100%;background:#fff}.route-choice.selected{border-color:#0b9db5;background:#ecfafb}.route-choice strong{font-size:14px}.route-choice p{font-size:11px;color:#708696;margin:6px 0 0}.guidance{padding:11px 0}.guidance p{font-size:12px}.modal-cover{position:fixed;inset:0;background:#0b223a70;z-index:20;display:grid;place-items:center;padding:16px}.modal{width:min(100%,460px);background:#fff;border-radius:18px;padding:24px}.modal label{font-size:12px;font-weight:700;display:block;margin:15px 0}.modal select,.modal textarea{margin-top:7px;padding:12px;border:1px solid #d5e2ea;border-radius:9px;width:100%;background:#fafcfd}.maplibregl-popup-content{border-radius:10px!important}.maplibregl-ctrl-attrib{font-size:9px!important}@media(max-width:780px){.top{height:61px;padding:0 13px}.brandmark{height:37px;width:37px;line-height:37px}.brand strong{font-size:21px}.chip{max-width:130px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout{height:calc(100dvh - 61px);display:flex;flex-direction:column-reverse}.side{flex:0 0 auto;height:49%;border-radius:19px 19px 0 0;padding:13px 12px 10px;box-shadow:0 -7px 24px #182c3d22}.map-area{flex:1;min-height:36%}.panel{padding:14px;margin-bottom:9px}.section-heading{margin-bottom:12px}.section-heading h1{font-size:21px}.map-tools{top:14px;right:13px;gap:5px}.map-btn{width:36px;height:36px}.map-status{left:12px;top:14px;padding:9px}.map-card{left:12px;bottom:16px;padding:10px 13px;max-width:240px}.map-card strong{font-size:11px}.map-card p{font-size:10px}.map-bottom{display:none}.side-footer{font-size:9px}}

/* Explicit map failure UI; ensures third-party CDN issues never look like an empty app. */
.map-error { position:absolute; inset:0; z-index:5; padding:25px; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#edf4f8,#d9e7ed); }
.map-error-content { max-width:350px; background:#fff; border:1px solid #dce5ed; box-shadow:0 14px 35px #14334d24; border-radius:18px; padding:27px; text-align:center; }
.map-error-content strong { display:block; font-size:19px; margin:12px 0; color:#153851; }
.map-error-content p { font-size:13px; color:#617d8d; line-height:1.55; }
.map-error-content a { display:inline-block; margin-top:9px; text-decoration:none; padding:12px 17px; }
.map-error-icon { display:flex; align-items:center; justify-content:center; width:43px; height:43px; margin:auto; border-radius:50%; background:#f0b04d; color:white; font-size:24px; font-weight:800; }

/* CPU-only 2D map display for unsupported WebGL browsers. */
.map-area .leaflet-container{background:#e3edf2;font-family:inherit;cursor:grab;}
.map-area .leaflet-container:active{cursor:grabbing;}
.map-area .leaflet-pane .leaflet-tile{outline:none;}
#map.leaflet-bright .leaflet-tile-pane{filter:brightness(1.12) saturate(.70);}
.map-tools,.map-status,.map-card,.map-bottom{z-index:1100;}
.map-error{z-index:1200;}
.map-area .leaflet-control-attribution{background:#ffffffe6;color:#537084;font-size:10px;}
.idealmap-location-marker,.idealmap-hazard-marker{background:none;border:0;}

/* IdealMap active directions and route preview: works in Leaflet (no GPU) and MapLibre. */
#guidance {margin-top:13px;padding:15px;background:#f2f9fc;border:1px solid #cfe4ec;border-radius:12px;display:grid;gap:9px;}
#guidance .nav-panel-head {display:flex;justify-content:space-between;align-items:center;gap:8px;}
.nav-mode-label {font-size:11px;font-weight:800;color:#06768c;letter-spacing:.015em;}
.nav-step-counter {font-size:11px;color:#698092;}
.nav-instruction {font-size:16px;color:#17374e;line-height:1.42;}
.nav-distance {font-size:13px;font-weight:800;color:#06728e;margin:0;}
.nav-detail {font-size:12px;color:#506d7e;line-height:1.5;margin:0;}
.nav-action-grid {display:flex;flex-wrap:wrap;gap:7px;}
.nav-action-grid .soft {flex:1 1 auto;white-space:normal;}
.nav-step-buttons {display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.nav-stop {width:100%;color:#994d44;background:#fff6f4;border-color:#e9cfc9;}
.nav-safety-note {font-size:10px;line-height:1.45;color:#8696a3;margin:0;}
.navigation-hud {position:absolute;top:75px;left:20px;z-index:1100;max-width:min(405px,calc(100% - 96px));min-width:245px;border-radius:13px;padding:14px 17px;box-shadow:0 8px 28px #173a4c39;border:1px solid #d9e9ef;background:#fffc;}
.navigation-hud-top {display:flex;justify-content:space-between;align-items:center;gap:12px;color:#087e92;font-size:11px;font-weight:800;margin-bottom:6px;}
.navigation-hud-top button{background:transparent;border:0;color:#658394;font-size:19px;line-height:1;}
.navigation-hud strong{display:block;font-size:16px;line-height:1.35;color:#17354f;margin-bottom:6px;overflow-wrap:anywhere;}
.navigation-hud #nav-hud-distance {display:block;color:#46697a;font-size:12px;}
.nav-running .map-card{display:none;}
.nav-running .navigation-hud{display:block;}
@media(max-width:780px){
 .navigation-hud{top:50px;left:10px;max-width:calc(100% - 72px);min-width:0;padding:10px 12px;}
 .navigation-hud strong{font-size:13px;}
 .navigation-hud-top{font-size:10px;margin-bottom:4px;}
 .navigation-hud #nav-hud-distance{font-size:10px;}
 .nav-instruction{font-size:15px;}
 .nav-step-buttons{grid-template-columns:1fr 1fr;}
}

/* Navigation-focused following camera layout */
.nav-running .navigation-trip-bar{display:flex;}
.nav-running .map-card{display:none;}
.nav-running .side{background:#f1f6f9;}
.nav-running .planner,.nav-running .extras,.nav-running .side-footer{display:none;}
.nav-running #routes{display:none;}
.nav-running .route-panel{margin:0;}
.nav-running .route-panel>.section-heading{margin-bottom:10px;}
.nav-running .layout{grid-template-columns:340px minmax(0,1fr);}
.nav-running .map-tools{top:20px;}
.nav-running .map-status{top:20px;}
.navigation-trip-bar{
 position:absolute;z-index:1100;bottom:29px;left:20px;right:20px;
 align-items:center;justify-content:space-around;gap:8px;
 padding:14px 12px;border:1px solid #dfe9ee;border-radius:15px;
 box-shadow:0 8px 30px #14354d24;background:#fffffff7;
}
.navigation-trip-bar>div{display:flex;flex-direction:column;gap:2px;align-items:center;min-width:0;}
.navigation-trip-bar strong{font-weight:850;font-size:20px;color:#143d56;white-space:nowrap;}
.navigation-trip-bar span{font-size:10px;color:#668092;white-space:nowrap;}
.nav-recenter{
 position:absolute;z-index:1110;right:19px;bottom:126px;
 padding:11px 15px;background:#fff;border:1px solid #d9e6eb;border-radius:40px;
 color:#0a7d93;font-weight:800;font-size:12px;box-shadow:0 5px 18px #14354d2a;
}
.idealmap-navigation-marker{background:transparent;border:0;}
.idealmap-direction-arrow{width:34px;height:34px;filter:drop-shadow(0 2px 4px #142e4988);
  transform-origin:center center;transition:transform 0.35s linear;}
.idealmap-direction-arrow svg{width:34px;height:34px;}
@media(max-width:780px){
 .nav-running .side{flex:0 0 28%;height:28%;max-height:32%;padding:10px 12px;overflow:auto;}
 .nav-running .map-area{flex:1 1 auto;min-height:68%;}
 .nav-running .side .panel{padding:10px 13px;}
 .nav-running .route-panel>.section-heading{display:none;}
 .nav-running .route-panel #navigate{display:none;}
 .nav-running .navigation-hud{top:48px;}
 .navigation-trip-bar{left:9px;right:9px;bottom:9px;padding:10px 5px;gap:2px;border-radius:12px;}
 .navigation-trip-bar strong{font-size:16px;}
 .navigation-trip-bar span{font-size:9px;}
 .nav-recenter{right:10px;bottom:92px;padding:9px 13px;}
 .nav-running .map-status{top:9px;}
}