/* Online context is behind the locally saved vector map. Interactive map stays on top. */
#mapCanvasSurface{position:relative;isolation:isolate}
#mapCanvasSurface #mapOnlineBackdrop{
 position:absolute;left:50%;top:50%;width:125%;height:auto;aspect-ratio:1;
 transform:translate(-50%,-50%) rotate(var(--map-rotation,0rad));
 z-index:0;overflow:hidden;pointer-events:none;
 background:#e3eaf0;contain:paint;
}
.gsi-background-tile{position:absolute;display:block;object-fit:fill;max-width:none;max-height:none;
 pointer-events:none;user-select:none}
#mapCanvasSurface #offlineCanvas{position:relative;z-index:1;background:transparent!important}
#mapCanvasSurface .map-directions{z-index:2}
#mapStorageStrip{display:flex;align-items:center;gap:5px;padding:4px 5px;margin:0;
 background:#fff;border:1px solid #d6e4ee;border-top:0;border-radius:0 0 7px 7px}
#mapStorageStrip button{width:auto;min-width:0;flex:1;margin:0;padding:4px 5px;
 min-height:34px;height:34px;font:bold 11px system-ui;color:#12517b;
 border:1px solid #a7c6d9;border-radius:6px;background:#f1f8fd}
#mapStorageStrip details{flex:0 0 auto;max-width:90px;min-width:0;font-size:11px;position:relative}
#mapStorageStrip summary{padding:5px 1px;min-height:30px;cursor:pointer}
#mapStorageStrip details[open]{position:static;flex:0 0 100%;max-width:none;order:5}
#mapStorageStrip:has(details[open]){flex-wrap:wrap}
#mapStorageStrip details[open] summary{padding:6px 0}
#mapStorageStrip p{font-size:12px;margin:5px 0}
#mapStorageStrip button:disabled{opacity:.58}
#mapEmpty #mapCoverageOpenEmpty{min-height:43px;background:#e8f3fc}
#mapCoverageDialog{box-sizing:border-box;width:min(97vw,630px);max-width:630px;
 max-height:92dvh;overflow:auto;margin:auto;padding:9px;border:1px solid #9eb3c4;
 border-radius:12px}
#mapCoverageDialog::backdrop{background:#172e4499}
#mapCoverageDialog .map-coverage-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
#mapCoverageDialog h2{font-size:16px;margin:0}
#mapCoverageDialog .map-coverage-head button{min-height:35px;min-width:55px;margin:0;padding:3px 8px;width:auto}
#mapCoverageViewport{height:min(48dvh,330px);min-height:230px;overflow:hidden;
 position:relative;isolation:isolate;touch-action:none;border-radius:8px;
 border:1px solid #a5bbc9;margin:8px 0;background:#e0e8ec;user-select:none}
#mapCoverageTiles{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#mapCoverageAreas{position:absolute;inset:0;z-index:1;pointer-events:none}
#mapCoverageAreas .coverage-boundary{position:absolute;border:2px dashed #a45b21;
 background:#eeb05e35;box-sizing:border-box;pointer-events:none}
#mapCoverageAreas .coverage-boundary[data-saved="true"]{border:3px solid #16825c;background:#0b9d6826}
#mapCoverageAreas .coverage-point{position:absolute;z-index:2;transform:translate(-50%,-50%);
 min-width:38px;min-height:38px;width:auto;max-width:99px;display:flex;flex-direction:column;
 gap:0;align-items:center;justify-content:center;padding:3px 5px;pointer-events:auto;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 border:2px solid #fff;border-radius:8px;background:#9f6220;color:#fff;font-size:10px;
 font-weight:700;line-height:1.15;box-shadow:0 0 0 1px #76522c}
#mapCoverageAreas .coverage-point[data-saved="true"]{background:#136b50;box-shadow:0 0 0 1px #0a553e}
#mapCoverageAreas .coverage-point[data-selected="true"]{outline:3px solid #073fb0;outline-offset:1px}
#mapCoverageAreas .coverage-point .coverage-small{font-size:9px}
.map-coverage-watermark{position:absolute;bottom:3px;right:4px;z-index:3;
 background:#ffffffcb;padding:2px 4px;border-radius:3px;font-size:9px;pointer-events:none}
#mapCoverageDialog .map-coverage-tools{display:flex;gap:5px;margin:2px 0}
#mapCoverageDialog .map-coverage-tools button{width:auto;flex:1;min-width:0;margin:0;
 min-height:36px;padding:4px 6px;font-size:12px}
#mapCoverageNote{margin:6px 0;font-size:12px;color:#345167}
.map-coverage-list{display:grid;gap:4px;max-height:200px;overflow:auto}
.map-coverage-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:5px;
 align-items:center;background:#f5faff;border:1px solid #c8d9e4;padding:5px;border-radius:7px}
.map-coverage-item .coverage-label{font-size:12px;line-height:1.3;min-width:0}
.map-coverage-item .coverage-label small{display:block;color:#536d80;font-size:10px}
#mapCoverageDialog .map-coverage-item button{margin:0;width:auto;min-width:48px;min-height:35px;
 padding:5px;font-size:11px}
#mapCoverageDialog .map-coverage-item button.primary{color:#fff}
#mapCoverageDialog .map-coverage-help{margin:8px 0 0;padding:5px 8px;font-size:12px}
#mapCoverageDialog .map-coverage-help summary{min-height:30px}
#mapCoverageDialog .map-coverage-help p{font-size:12px;margin:4px 0}
@media(max-width:360px){
 #mapStorageStrip{gap:3px;padding:3px}
 #mapStorageStrip button{font-size:10px;padding:3px}
 #mapStorageStrip details{font-size:10px;max-width:83px}
 #mapCoverageDialog .map-coverage-item{gap:3px}
 #mapCoverageDialog .map-coverage-item button{font-size:10px;min-width:43px;padding:3px}
}

#mapSaveFeedback:not([hidden]){flex:0 0 100%;max-width:100%;font-size:11px;color:#165478;padding:3px 5px;line-height:1.4}
#mapStorageStrip:has(#mapSaveFeedback:not([hidden])){flex-wrap:wrap}

#mapStorageStrip{flex-wrap:wrap}
#mapStorageStrip #mapFacilityRefresh,#mapFacilityListRefresh{flex:0 0 auto;min-width:32px;width:32px;padding:3px}
#mapFacilityRefreshStatus{flex:0 0 100%;font-size:11px;margin:0 2px}
#mapFacilityRefreshStatus:empty{display:none}

/* Download prompt offers route creation as an alternative to saving a viewport. */
#mapDownloadChoiceDialog{box-sizing:border-box;width:min(93vw,420px);max-width:420px;
 max-height:85dvh;overflow:auto;margin:auto;padding:15px;border:1px solid #8eb4cb;
 border-radius:16px;background:#fff;color:#163f56;box-shadow:0 8px 27px #0d263d50}
#mapDownloadChoiceDialog::backdrop{background:#0c233c91}
#mapDownloadChoiceDialog h2{margin:0 0 9px;font-size:18px}
#mapDownloadChoiceDescription{margin:0 0 10px;font-size:13px;line-height:1.5}
#mapDownloadChoiceDialog .map-download-route-notice{margin:0 0 12px;padding:10px;
 border-left:4px solid #e38b26;border-radius:8px;background:#fff4df;
 font-size:13px;line-height:1.5;font-weight:700;color:#795017}
#mapDownloadChoiceDialog .map-download-route-notice small{display:block;margin-top:4px;font-size:10px;font-weight:500}
#mapDownloadChoiceDialog .map-download-choice-actions{display:grid;gap:7px}
#mapDownloadChoiceDialog .map-download-choice-actions button{margin:0;width:100%;min-height:42px;
 border:1px solid #8dbdd0;border-radius:10px;font-size:14px;font-weight:800}
#mapDownloadChoiceRoute{background:#e8f5fd;color:#105c85}
#mapDownloadChoiceCancel{background:#f7f8fa;color:#596c77}