/* Google Maps-inspired mobile navigation arrangement. All map data remains the site's own. */ #mapRouteTopCard[hidden],#mapNavBanner[hidden],#mapNavSummary[hidden],#mapRightControls button[hidden],#mapNavSummary button[hidden],#miniNavFallback[hidden]{display:none!important} #mapRouteTopCard{position:relative;z-index:3;box-sizing:border-box;width:100%;min-height:50px;margin:0 0 3px; display:flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid #cadde9;border-radius:9px; background:#f9fcff;color:#25323f;box-shadow:0 1px 4px #1b324b1c;pointer-events:auto} #mapRouteTopCard .map-navigation-stops{display:grid;gap:4px;min-width:0;flex:1} #mapRouteTopCard .map-navigation-stops>div{display:flex;align-items:center;gap:9px;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:650} #mapRouteTopCard .map-navigation-stops>div>span:last-child{overflow:hidden;text-overflow:ellipsis} #mapRouteTopCard .map-stop-dot{display:block;flex:none;width:10px;height:10px;border-radius:50%;background:#1a79e8;border:2px solid white;box-shadow:0 0 0 1px #79baf5} #mapRouteTopCard .map-stop-pin{display:flex;align-items:center;justify-content:center;flex:none;width:15px;height:15px;color:#e44347;font-size:15px} #mapRouteTopCard #mapRouteTopEdit{display:block;flex:none;width:45px;min-width:45px;min-height:35px;margin:0;padding:4px 2px; border:1px solid #d5e2eb;border-radius:18px;background:#f4f8fc;color:#175a88;font-size:11px;font-weight:750} #mapNavBanner{position:absolute;z-index:6;top:7px;left:8px;right:67px;display:flex;align-items:center;gap:12px; box-sizing:border-box;min-height:76px;padding:9px 13px;border-radius:17px 17px 17px 4px; background:#075b56;color:#fff;box-shadow:0 3px 12px #142b2b4d;pointer-events:none} #mapNavBanner .map-navigation-arrow{font-size:42px;font-weight:850;line-height:1;flex:none} #mapNavBanner>div{min-width:0;display:grid;gap:4px} #mapNavBanner strong{font-size:17px;line-height:1.18;overflow-wrap:anywhere} #mapNavBanner #mapNavBannerInstruction{font-size:12px;line-height:1.25;opacity:.94;overflow-wrap:anywhere} #mapNavBanner[data-warning="true"]{background:#a34218} #mapLandmarkCard[hidden]{display:none!important} #mapLandmarkCard{position:absolute;z-index:10;left:8px;right:62px;bottom:8px;display:grid;gap:5px; box-sizing:border-box;padding:10px 11px;border:1px solid #b7d6e5;border-radius:13px; background:#fffffffa;color:#173b50;box-shadow:0 3px 12px #14354c52;pointer-events:auto} #mapLandmarkCard>strong{font-size:15px;line-height:1.25;overflow-wrap:anywhere} #mapLandmarkCard>span{font-size:11px;line-height:1.35;color:#506979} #mapLandmarkCard>div{display:flex;align-items:center;gap:6px;flex-wrap:wrap} #mapLandmarkCard button,#mapLandmarkCard a{display:inline-flex;align-items:center;justify-content:center; width:auto;min-height:31px;margin:0;padding:5px 8px;border:1px solid #9ec6d9;border-radius:13px; background:#e8f6fb;color:#14567a;font-size:11px;font-weight:750;text-decoration:none} #mapLandmarkCard #mapLandmarkClose{margin-left:auto;padding:4px 9px;background:#fff} #mapTopViewport #mapRightControls{inset:8px 7px 8px auto;gap:7px;justify-content:flex-start} #mapTopViewport #mapRightControls button{box-sizing:border-box;flex:none;width:43px;min-width:43px;height:43px;min-height:43px; display:flex;align-items:center;justify-content:center;gap:0;margin:0;padding:2px;border:1px solid #ccdce7; border-radius:50%;box-shadow:0 2px 7px #20364b38;background:#ffffffed;color:#1e4561;font-size:21px;white-space:nowrap} /* Compass switch inspired by the familiar white red-needle/N round control. */ #mapTopViewport #mapRightControls #mapOrientationToggle{ flex-direction:column;gap:0;width:52px;min-width:52px;height:52px;min-height:52px; padding:3px 1px 2px;background:#fff;border:2px solid #d2d7dc;color:#555; box-shadow:0 2px 6px #102d4250 } #mapTopViewport #mapRightControls #mapOrientationToggle #mapCompassNeedle{ display:block;flex:none;width:23px;height:27px;transform-origin:center center;line-height:1 } #mapTopViewport #mapRightControls #mapOrientationToggle #mapCompassNeedle svg{display:block;width:100%;height:100%} #mapTopViewport #mapRightControls #mapOrientationLabel{display:block;color:#596168;font-size:15px;font-weight:900;line-height:1} #mapTopViewport #mapRightControls #mapOrientationToggle[aria-pressed="true"]{ background:#fff;color:#596168;border-color:#7faec8;box-shadow:0 0 0 2px #a2d1ee99,0 2px 6px #102d4250 } #mapTopViewport #mapRightControls #mapSearchToggle{ flex-direction:column;gap:0;background:#fff;color:#343c42;border-color:#ccd3da } #mapTopViewport #mapRightControls #mapSearchToggle svg{width:23px;height:23px;flex:none} #mapTopViewport #mapRightControls #mapSearchToggle small{font-size:9px;font-weight:800;line-height:1} #mapTopViewport #mapRightControls #mapSearchToggle[aria-expanded="true"]{ background:#e1f2ff;color:#125886;border-color:#6baccd } #mapTopViewport #mapSearchPanel{ position:absolute;z-index:7;top:67px;left:7px;right:59px; display:grid;gap:5px;align-content:start;max-height:min(62dvh,470px); overflow-y:auto;pointer-events:auto;padding:1px } #mapTopViewport #mapSearchPanel[hidden]{display:none!important} #mapTopViewport #mapSearchPanel .map-tools{position:static;inset:auto;display:block; margin:0;padding:0;pointer-events:auto} #mapTopViewport #mapSearchPanel #mapPlaceForm{ display:flex;width:100%;min-width:0;height:43px;max-width:none; border:2px solid #237eb7;border-radius:23px;background:#fff; box-shadow:0 2px 7px #183f6050;overflow:hidden } #mapTopViewport #mapSearchPanel #mapPlaceForm input{ min-width:0;flex:1;padding-left:12px;font-size:16px;background:transparent } #mapTopViewport #mapSearchPanel #mapPlaceForm button{ width:41px;height:41px;min-height:41px;color:#17669b } #mapTopViewport #mapSearchPanel #mapPlaceChoices:not([hidden]){ margin:0!important;max-height:min(33dvh,240px);overflow-y:auto } #mapTopViewport #mapSearchPanel #mapPlaceStatus:not([hidden]){ margin:0;padding:5px 7px;font-size:11px;line-height:1.35;max-height:78px;overflow-y:auto } #mapTopViewport #mapSearchPanel #mapExternalSearch:not([hidden]){margin:0} #mapTopViewport #mapSearchPanel #mapExternalSearch a{padding:5px;font-size:10px} #mapTopViewport #mapRightControls #mapLayersToggle{color:#126d7a;font-size:13px;font-weight:850;line-height:1} #mapTopViewport #mapRightControls #mapLayersToggle[aria-expanded="true"]{background:#c9f3f4;border-color:#168a93} #mapTopViewport #mapRightControls #mapFullscreenToggle{flex-direction:column;gap:0; font-size:21px;font-weight:800;line-height:1;background:#f4f9fd} #mapTopViewport #mapRightControls #mapFullscreenToggle svg{display:block;width:21px;height:21px;flex:none} #mapTopViewport #mapRightControls #mapFullscreenToggle small{font-size:9px;line-height:1.1;letter-spacing:-.02em} #mapTopViewport #mapRightControls #mapFullscreenToggle[aria-pressed="true"]{background:#e7f3fd;color:#075eb1;border-color:#8ab6dd} #mapTopViewport #mapRightControls #mapNavRecalculate{font-size:28px;font-weight:900;color:#116b92;background:#ebf6ff} #mapTopViewport #mapRightControls #mapHomeShortcut{flex-direction:column;gap:0;font-size:22px;font-weight:800;color:#136a86;background:#f0fbff} #mapTopViewport #mapRightControls #mapHomeShortcut small{font-size:9px;line-height:1} #mapTopViewport #mapRightControls #walkNavToggle{flex-direction:column;gap:0; font-size:19px;background:#edf6fe;color:#12619d;border-color:#a2c8e3} #mapTopViewport #mapRightControls #walkNavToggle svg{display:block;width:21px;height:21px;flex:none} #mapTopViewport #mapRightControls #walkNavToggle small{font-size:9px;font-weight:850;line-height:1.1} #mapTopViewport #mapRightControls #walkNavToggle[aria-pressed="true"]{background:#c45024;color:#fff;border-color:#a53d16} #mapTopViewport #mapRightControls #walkNavVoice{font-size:20px;line-height:1} #mapTopViewport #mapRightControls #walkNavVoice[aria-pressed="true"]{background:#e3f5ee;border-color:#76b99c;color:#125b3c} #mapTopViewport #mapRightControls #mapHereShortcut{font-size:0;margin-top:auto;background:#fff;color:#176dde;border:1px solid #cbdde9} #mapTopViewport #mapRightControls #mapHereShortcut span{font-size:26px;line-height:1} #mapNavSummary{box-sizing:border-box;padding:10px 13px 11px;border:1px solid #d9e2e9;border-top:0; border-radius:0 0 20px 20px;background:#fff;box-shadow:0 2px 7px #23435c14;color:#27323b} #mapNavSummary .map-summary-heading{display:flex;align-items:center;justify-content:space-between;gap:8px} #mapNavSummary .map-summary-heading>strong{font-size:17px;white-space:nowrap} #mapNavSummary .map-summary-heading label{display:flex;align-items:center;gap:5px;min-width:0;font-size:12px;color:#536978;font-weight:700} #mapNavSummary #mapWalkingPace{width:auto;min-width:116px;max-width:52vw;min-height:36px;margin:0;padding:3px 23px 3px 7px; border:1px solid #9fc4db;border-radius:16px;background:#eef7fe;color:#174d79;font-size:12px;font-weight:700} #mapNavSummary .map-summary-time{display:flex;align-items:baseline;gap:11px;margin:8px 0 6px} #mapNavSummary .map-summary-time strong{font-size:27px;font-weight:850;line-height:1.1;font-variant-numeric:tabular-nums;color:#20313c} #mapNavSummary .map-summary-time span{font-size:13px;color:#506675;font-weight:600} #mapNavSummary .map-summary-bottom{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap} #mapNavSummary #mapWalkingDistance{font-size:12px;color:#596e7c;white-space:nowrap} #mapNavSummary .map-summary-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap} #mapNavSummary .map-summary-actions button{width:auto;min-height:35px;margin:0;padding:4px 10px;border:1px solid #aacbdd; border-radius:18px;background:#e5f5fb;color:#145c7c;font-size:12px;font-weight:750;white-space:nowrap} #mapNavSummary .map-summary-actions #mapSummaryNavToggle{background:#056f78;border-color:#056f78;color:#fff} #mapNavSummary .map-summary-actions #mapSummaryMini{background:#0b617c;border-color:#0b617c;color:#fff} #miniNavFallback{position:fixed;z-index:31000;right:11px;bottom:max(90px,env(safe-area-inset-bottom)); display:flex;align-items:center;gap:10px;box-sizing:border-box;min-width:188px;max-width:min(78vw,295px); min-height:74px;padding:8px 12px;border:2px solid #c0e3e7;border-radius:17px; background:#075b56;color:white;box-shadow:0 6px 22px #122d3488;text-align:left; cursor:grab;user-select:none;touch-action:none;overscroll-behavior:contain} #miniNavFallback:active{cursor:grabbing} #miniNavFallbackArrow{flex:none;width:53px;text-align:center;font-size:44px;font-weight:900;line-height:1} #miniNavFallback>span:last-child{display:grid;gap:4px;min-width:0} #miniNavFallback strong{font-size:17px;line-height:1.1} #miniNavFallback small{font-size:12px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .map-route-replan-dialog{box-sizing:border-box;width:min(92vw,430px);max-height:80dvh;overflow:auto; border:1px solid #8dbdd2;border-radius:19px;padding:17px;background:white;color:#1b4056;box-shadow:0 7px 27px #092d4780} .map-route-replan-dialog::backdrop{background:#071e2c88} .map-route-replan-dialog h3{margin:0 0 9px;font-size:18px} .map-route-replan-dialog p{margin:0 0 12px;font-size:13px;line-height:1.5} .map-route-replan-dialog>div{display:grid;gap:9px} .map-route-replan-dialog>div button{width:100%;min-height:48px;border:1px solid #91c6db;border-radius:12px; background:#e4f4fb;color:#12506b;font-size:14px;font-weight:800} .map-route-replan-dialog form button{display:block;width:auto;margin:13px 0 0 auto;padding:7px 17px; border:1px solid #d8e1e7;border-radius:11px;background:#f5f7f8;color:#395062} #mapNavSummary .map-summary-caution{display:block;margin-top:8px;color:#847052;font-size:10px;line-height:1.4} #mapNavSummary #mapRejoinStatus:not([hidden]){display:block;margin-top:6px;padding:5px 8px;border-radius:8px;background:#ecf7ef;color:#245b3b;font-size:11px;font-weight:750} #mapTopViewport #mapBottomToolbar[data-collapsed="true"]{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-end!important; align-items:center!important;height:41px!important;min-height:41px!important;padding:3px 7px!important} #mapTopViewport #mapBottomToolbar[data-collapsed="true"]>button{display:none!important} #mapTopViewport #mapBottomToolbar[data-collapsed="true"] #mapZoomControls{display:flex!important;flex:none!important;width:auto!important;margin:0!important; height:35px!important;min-height:35px!important} #mapTopViewport #mapBottomToolbar[data-collapsed="true"] #mapZoomControls button{display:grid!important;place-items:center;width:40px!important;height:34px!important;min-height:34px!important} #mapTopViewport #mapBottomToolbar[data-collapsed="true"]::before{content:'右側の「表示」で切替';margin-right:auto;color:#708595;font-size:11px} /* In turn-by-turn navigation, the map itself fills the device viewport. */ body.map-fullscreen{overflow:hidden!important} body.map-fullscreen #mapTopViewport{ position:fixed!important;z-index:30000!important;inset:0!important;display:flex!important;flex-direction:column; width:100vw!important;height:100dvh!important;max-width:none!important;min-height:0!important; margin:0!important;padding:0!important;background:#fff;box-shadow:none!important;overflow:hidden!important} body.map-fullscreen #mapRouteTopCard{order:0;flex:none;margin:0;border:0;border-bottom:1px solid #cadde9;border-radius:0;box-shadow:none} body.map-fullscreen #mapCanvasSurface{position:relative;flex:1 1 auto;min-height:0;height:auto!important;overflow:hidden!important;background:#e7edf1} body.map-fullscreen #mapCanvasSurface #offlineCanvas{position:absolute!important;inset:0;display:block; width:100%!important;height:100%!important;max-height:none!important;border:0!important;border-radius:0!important} body.map-fullscreen #mapCanvasSurface #mapOnlineBackdrop{width:250%!important;max-width:none!important} body.map-fullscreen #mapNavSummary{position:relative;z-index:11;order:3;flex:none;margin:0; padding-bottom:max(10px,env(safe-area-inset-bottom));border:0;border-top:1px solid #d7e2e9; border-radius:21px 21px 0 0;box-shadow:0 -4px 15px #142e3c29} body.map-fullscreen #mapBottomToolbar{position:absolute!important;z-index:9;right:7px!important;left:auto!important; bottom:160px!important;width:auto!important;max-width:min(90vw,350px)!important; background:#ffffffef!important;border:1px solid #c8dce9!important;border-radius:19px!important;box-shadow:0 2px 7px #2b3e5730} body.map-fullscreen #mapBottomToolbar[data-collapsed="true"]{width:auto!important;min-width:0!important} body.map-fullscreen #mapBottomToolbar[data-collapsed="true"]::before{display:none!important} body.map-fullscreen #mapDisplayedRoute,body.map-fullscreen #mapTravelProgress, body.map-fullscreen #mapFacilityRefreshStatus{display:none!important} body.map-fullscreen #mapRouteOverview{display:none!important} body.map-fullscreen.map-route-details-open #mapRouteOverview:not([hidden]){display:block!important;position:absolute; z-index:12;left:7px;right:7px;bottom:150px;max-height:55dvh;overflow:auto;overscroll-behavior:contain; box-sizing:border-box;margin:0;padding:11px;border:1px solid #a4c5dc;border-radius:16px; background:#fff;box-shadow:0 -3px 25px #153a5080} body.map-fullscreen #mapTopViewport .map-directions{z-index:4} @media(max-width:400px){#mapTopViewport #mapRightControls{gap:4px} #mapTopViewport #mapRightControls button{width:39px;min-width:39px;height:39px;min-height:39px} #mapTopViewport #mapRightControls #mapLayersToggle{font-size:12px} body.map-fullscreen #mapBottomToolbar{bottom:157px!important}} @media(max-width:380px){#mapRouteTopCard{padding:5px 6px;font-size:12px} #mapNavBanner{left:6px;right:61px;padding:8px;gap:7px} #mapNavBanner strong{font-size:15px}#mapNavBanner .map-navigation-arrow{font-size:36px} #mapNavSummary{padding:9px 8px}#mapNavSummary .map-summary-actions button{padding:4px 8px;font-size:11px} #mapNavSummary .map-summary-time strong{font-size:24px}#mapNavSummary #mapWalkingPace{min-width:106px}} /* Same route-condition menu is reachable in the regular map and live nav. */ #mapRouteConditionsOpen{flex:none;min-height:40px;padding:7px 9px;white-space:nowrap;font-size:13px} #walkNavPopup .walk-nav-grip{display:none} .map-route-conditions-dialog{box-sizing:border-box;width:min(94vw,440px);max-height:80dvh;overflow-y:auto;padding:16px;border:2px solid #608eaf;border-radius:12px;box-shadow:0 16px 36px #0b213c44} .map-route-conditions-dialog::backdrop{background:#122f4a88} .map-route-conditions-dialog h3{font-size:18px;color:#164a70;margin:0 0 8px} .map-route-conditions-dialog p{font-size:13px;line-height:1.45;margin:7px 0 12px} .map-route-conditions-dialog [role="group"]{display:grid;gap:10px;background:#f0f7fd;border-radius:9px;padding:12px} .map-route-conditions-dialog label{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;line-height:1.4} .map-route-conditions-dialog label input{width:21px;height:21px;flex:none} .map-route-conditions-dialog .map-route-conditions-note{color:#704e1f;font-size:12px} .map-route-conditions-dialog .map-route-conditions-actions{display:flex;gap:7px;flex-wrap:wrap} .map-route-conditions-dialog .map-route-conditions-actions button{flex:1 1 45%;min-height:42px;padding:7px 8px;font-size:13px} @media(max-width:440px){#walkNavPopup .walk-nav-controls{gap:2px}#walkNavPopup .walk-nav-controls button{padding:2px 4px;font-size:10px}} /* Compact route picker lives on the map; the list appears only on demand. */ #mapRouteQuickBar{position:absolute;z-index:38;top:7px;left:7px;right:74px;display:flex;align-items:flex-start;gap:4px;pointer-events:none} #mapRouteQuickBar>button{pointer-events:auto;box-sizing:border-box;flex:none;min-height:36px;max-width:calc(100% - 130px);margin:0;padding:5px 8px;border:1px solid #95b4ce;border-radius:8px;background:#fffffff0;color:#194968;font-size:12px;font-weight:800;box-shadow:0 2px 7px #18354a36;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #mapRouteQuickBar #mapRouteQuickChoose{flex:1;min-width:76px;text-align:left} #mapRouteQuickBar #mapRouteQuickCreate,#mapRouteQuickBar #mapRouteQuickConditions{max-width:none} #mapRouteQuickBar[data-navigation="true"]{top:76px} #mapRouteQuickList{pointer-events:auto;position:absolute;top:41px;left:0;width:min(370px,calc(100vw - 93px));max-height:min(50dvh,320px);overflow:auto;box-sizing:border-box;border:2px solid #8cbbd8;border-radius:9px;padding:8px;background:#fff;box-shadow:0 8px 20px #173c5b55} #mapRouteQuickList[hidden]{display:none!important} #mapRouteQuickList strong{display:block;margin:3px 4px 5px;font-size:12px;color:#34546b} #mapRouteQuickList button{display:block;width:100%;text-align:left;margin:0 0 4px;padding:9px 8px;border:1px solid #c8dbe8;border-radius:7px;background:#f8fbff;color:#173e5f;font-size:13px;font-weight:650;line-height:1.3;overflow-wrap:anywhere} #mapRouteQuickList button[aria-current="true"]{border-color:#1470ab;background:#e2f2ff} #mapRouteQuickList .route-quick-empty{padding:7px;font-size:13px;color:#4f6778} @media(max-width:380px){#mapRouteQuickBar{right:66px;gap:3px}#mapRouteQuickBar>button{padding:5px 6px;font-size:11px}#mapRouteQuickBar #mapRouteQuickChoose{min-width:69px}#mapRouteQuickList{width:calc(100vw - 83px)}} /* Collapsible route details and newest-first list immediately below the map. */ #mapDisplayedRoute:not([hidden]),#mapBelowRouteList{display:block;box-sizing:border-box;margin:5px 4px;padding:0;border:1px solid #aac9dd;border-radius:9px;background:#f7fbff;color:#193f58} #mapDisplayedRoute[hidden]{display:none!important} #mapDisplayedRoute>summary,#mapBelowRouteList>summary{min-height:38px;display:list-item;cursor:pointer;padding:9px 11px;font-size:13px;font-weight:800;line-height:1.35} #mapDisplayedRouteSummary{display:inline;color:#46708a;font-weight:650;font-size:12px} #mapDisplayedRoute .map-displayed-route-content{display:grid;gap:6px;padding:8px 11px 11px;border-top:1px solid #d4e6f1} #mapDisplayedRouteName{display:block;min-width:0;overflow-wrap:anywhere;font-size:14px;color:#143e5c;line-height:1.5} #mapDisplayedRouteDates{display:block;color:#617789;font-size:11px} #mapBelowRouteCount{color:#4c6b83;font-weight:600} #mapBelowRouteList[open]{background:#fff} #mapBelowRouteList #favoriteRouteHub{margin:0;padding:8px 9px 11px;border:0;border-top:1px solid #d4e6f1;border-radius:0;box-shadow:none} #mapBelowRouteList #favoriteRouteHub .favorite-description{font-size:12px} #mapBelowRouteList #favoriteRouteDetails{margin:5px 0} body.map-fullscreen #mapDisplayedRoute,body.map-fullscreen #mapBelowRouteList{flex:none;max-height:24dvh;overflow:auto} body.map-fullscreen #mapBelowRouteList:not([open]){max-height:42px} #mapRoutePdfCreate{display:block;width:100%;min-height:40px;padding:9px 12px;border:1px solid #207ca9;border-radius:9px;background:#096b9c;color:white;font-size:13px;font-weight:750;box-shadow:0 1px 3px #143b561c} #mapRoutePdfCreate:disabled{opacity:.55;cursor:wait} #mapRoutePdfStatus{display:block;font-size:11px;color:#526d80;line-height:1.4} .map-route-pdf-options{display:flex;flex-wrap:wrap;gap:4px 12px;padding:4px 2px} .map-route-pdf-options label{display:inline-flex;gap:4px;align-items:center;font-size:11px;color:#294a60;white-space:normal} .map-route-pdf-options input{width:16px;height:16px;margin:0;accent-color:#0879b2} #mapRiskSettingsDialog{max-width:min(94vw,560px);width:calc(100vw - 30px);max-height:86dvh;overflow:auto;border:1px solid #aac5d7;border-radius:15px;padding:12px;background:#fff;color:#203d51;box-shadow:0 12px 42px #132b4866} #mapRiskSettingsDialog::backdrop{background:#112a4160} #mapRiskLayersDialogHost #mapRiskLayers{margin:8px 0;padding:10px;border:1px solid #d1e4ef;border-radius:9px;display:grid;gap:8px} #mapRiskLayersDialogHost #mapRiskLayers label{display:flex;gap:7px;align-items:center;font-size:13px} #mapRiskLayersDialogHost #mapRiskLayers input[type="checkbox"]{width:17px;height:17px;accent-color:#1571a6;flex:none} #mapRiskLayersDialogHost .unavailable-risk-option{opacity:.7} #mapPostQuakeCongestion{margin:7px 0;border:1px solid #e3b27a;border-radius:10px;background:#fffaf1;color:#683d16;font-size:12px} #mapPostQuakeCongestion>summary{padding:9px 10px;font-weight:750;line-height:1.5;cursor:pointer} #mapPostQuakeCongestion .quake-congestion-content{padding:1px 10px 12px} #mapPostQuakeCongestion .quake-wait-first{background:#ffebdf;border-left:4px solid #d34328;padding:9px;border-radius:5px;line-height:1.55;margin:6px 0 10px} #mapPostQuakeCongestion .quake-impact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:7px} #mapPostQuakeCongestion article{border:1px solid #e8d5ba;background:white;border-radius:8px;padding:8px;color:#473627} #mapPostQuakeCongestion article strong{color:#9a3d1a;font-size:12px} #mapPostQuakeCongestion article p{line-height:1.6;margin:5px 0 0} #mapPostQuakeCongestion .quake-car-switch{margin:8px 0;border:1px solid #e4c8aa;border-radius:7px;background:#fff;padding:8px} #mapPostQuakeCongestion .quake-car-switch>summary{font-weight:700;color:#90450a} #mapPostQuakeCongestion .quake-car-switch li{line-height:1.6;margin:4px 0} #mapPostQuakeCongestion .quake-old-simulation{color:#715a42;font-size:11px;line-height:1.55} #mapPostQuakeCongestion .quake-source-links{display:flex;gap:8px;flex-wrap:wrap} body.map-fullscreen #mapPostQuakeCongestion{display:none!important} #mapPostQuakeCongestion .quake-abandoned-car{padding:9px;background:#fff5e7;border-left:3px solid #cb7722;line-height:1.65;color:#593f28} /* 2026-11: one route-title toolbar above the map, no duplicate start/goal card and no map-covering route action overlay. */ #mapTopViewport > #mapRouteQuickBar{ position:relative;top:auto;left:auto;right:auto;z-index:38; display:flex;box-sizing:border-box;align-items:center;gap:4px; width:100%;min-height:39px;margin:0;padding:4px 5px; border:1px solid #bfd6e5;border-radius:9px 9px 0 0; background:#eef7fc;pointer-events:auto } #mapTopViewport > #mapRouteQuickBar[data-navigation="true"]{top:auto} #mapTopViewport > #mapRouteQuickBar > button{ flex:0 0 auto;max-width:none;min-height:32px;margin:0;padding:4px 6px; border:1px solid #adc6d9;border-radius:7px;background:#fff; box-shadow:none;color:#174c70;font-size:11px;font-weight:800 } #mapTopViewport > #mapRouteQuickBar #mapRouteQuickChoose{ flex:1 1 0;min-width:0;max-width:none;text-align:left;font-size:12px } #mapTopViewport > #mapRouteQuickBar #mapRouteTopEdit{display:inline-flex;align-items:center;justify-content:center} #mapTopViewport > #mapRouteQuickBar #mapRouteQuickList{ top:100%;left:3px;right:3px;width:auto;max-height:min(48dvh,310px); border-radius:0 0 9px 9px } @media(max-width:385px){ #mapTopViewport > #mapRouteQuickBar{gap:2px;padding:3px} #mapTopViewport > #mapRouteQuickBar > button{font-size:10px;padding:3px 4px} #mapTopViewport > #mapRouteQuickBar #mapRouteQuickChoose{font-size:11px} } /* The visible title strip above replaces the secondary route selector row. */ #mapTopViewport:not([hidden]) + #mapRouteTools{margin:0;padding:0;border:0;background:transparent} #mapTopViewport:not([hidden]) + #mapRouteTools > .map-route-bar{display:none!important} #mapTopViewport:not([hidden]) + #mapRouteTools #routeBuildStep:not([hidden]){ margin:4px 0 7px;padding:8px;border:1px solid #c0d8e8;border-radius:9px; background:#f2f9fe } /* A single always-visible legend control sits at the bottom-left of the map. */ #mapCanvasSurface > #mapLegendToggle{ position:absolute;left:7px;bottom:29px;z-index:25; display:inline-flex;align-items:center;justify-content:center; width:auto;min-width:65px;min-height:29px;margin:0;padding:4px 7px; border:1px solid #80a9c3;border-radius:17px; background:#fffffff2;color:#19577c; box-shadow:0 1px 6px #0d345744;font-size:11px;font-weight:800; white-space:nowrap } /* Keep only walking speed and ETA in the low-profile navigation strip. Navigation/fullscreen remain directly on the map; detailed directions remain in the collapsible disclosure below it. */ #mapNavSummary:not([hidden]){ display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center; gap:3px 7px;padding:6px 8px 7px;border-radius:0 0 10px 10px } #mapNavSummary .map-summary-heading{ display:flex;align-items:center;justify-content:flex-start;gap:5px;min-width:0 } #mapNavSummary .map-summary-heading > strong{font-size:12px} #mapNavSummary .map-summary-heading label{gap:4px;font-size:11px;white-space:nowrap} #mapNavSummary #mapWalkingPace{ min-width:0;max-width:min(45vw,155px);min-height:32px;margin:0; padding:3px 20px 3px 6px;border-radius:9px;font-size:12px } #mapNavSummary .map-summary-time{ display:flex;flex-direction:column;align-items:flex-end; justify-content:center;gap:1px;margin:0;white-space:nowrap } #mapNavSummary .map-summary-time strong{font-size:20px;line-height:1.05} #mapNavSummary #mapWalkingArrival{display:none!important} #mapNavSummary .map-summary-bottom, #mapNavSummary .map-summary-caution{display:none!important} #mapNavSummary #mapRejoinStatus:not([hidden]){ grid-column:1/-1;display:block;font-size:10px;line-height:1.3 } body.map-fullscreen #mapTopViewport > #mapRouteQuickBar{order:-1;flex:none} body.map-fullscreen #mapNavSummary:not([hidden]){ grid-template-columns:minmax(0,1fr) auto;padding:6px 8px max(8px,env(safe-area-inset-bottom)) } /* Fullscreen = map-first layout. The title/menu floats over the map rather than consuming a separate row; primary controls become a compact bottom cluster so the turn arrow and streets have vertical breathing room. */ body.map-fullscreen #mapTopViewport > #mapRouteQuickBar{ position:absolute;top:5px;left:5px;right:5px;bottom:auto; width:auto;min-height:35px;margin:0;padding:3px 4px; border-radius:9px;background:#f7fbffe9;box-shadow:0 2px 8px #112b4350; z-index:30 } body.map-fullscreen #mapTopViewport > #mapRouteQuickBar[data-navigation="true"]{top:5px} body.map-fullscreen #mapTopViewport #mapNavBanner{top:47px} body.map-fullscreen #mapTopViewport #mapRightControls{ inset:auto 6px 55px auto;display:flex;flex-direction:row; flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px; width:auto;max-width:calc(100vw - 70px);pointer-events:none } body.map-fullscreen #mapTopViewport #mapRightControls button{ flex:0 0 auto;width:37px;min-width:37px;height:37px;min-height:37px; margin:0;padding:2px;font-size:17px;pointer-events:auto } body.map-fullscreen #mapTopViewport #mapRightControls #mapOrientationToggle{ width:40px;min-width:40px;height:40px;min-height:40px;padding:2px } body.map-fullscreen #mapTopViewport #mapRightControls #mapCompassNeedle{ width:18px;height:21px } body.map-fullscreen #mapTopViewport #mapRightControls #mapOrientationLabel{ font-size:11px } body.map-fullscreen #mapBottomToolbar{ left:6px!important;right:auto!important;bottom:107px!important; max-width:min(90vw,340px)!important } body.map-fullscreen.map-route-details-open #mapRouteOverview:not([hidden]){ bottom:53px;max-height:60dvh } @media(max-width:360px){ body.map-fullscreen #mapTopViewport #mapRightControls{gap:3px;max-width:calc(100vw - 55px)} body.map-fullscreen #mapTopViewport #mapRightControls button{ width:34px;min-width:34px;height:34px;min-height:34px } } /* Small Android map: all controls fit into a short, uniform two-column cluster. */ #mapTopViewport #mapCanvasSurface #mapRightControls{ inset:6px 6px auto auto;display:grid!important; grid-template-columns:repeat(2,36px);grid-auto-flow:row;grid-auto-rows:36px; justify-content:end;justify-items:center;align-items:center;align-content:start; width:76px;height:auto;max-height:calc(100% - 12px);gap:4px } #mapTopViewport #mapCanvasSurface #mapRightControls button, #mapTopViewport #mapCanvasSurface #mapRightControls #mapOrientationToggle, #mapTopViewport #mapCanvasSurface #mapRightControls #mapHereShortcut{ flex:none;box-sizing:border-box;width:36px;min-width:36px;max-width:36px; height:36px;min-height:36px;max-height:36px; margin:0!important;padding:2px;border-radius:50%;font-size:17px;line-height:1 } #mapTopViewport #mapCanvasSurface #mapRightControls #mapOrientationToggle #mapCompassNeedle{ width:16px;height:18px } #mapTopViewport #mapCanvasSurface #mapRightControls #mapOrientationLabel{ font-size:10px;line-height:1 } #mapTopViewport #mapCanvasSurface #mapRightControls #mapSearchToggle svg, #mapTopViewport #mapCanvasSurface #mapRightControls #mapFullscreenToggle svg, #mapTopViewport #mapCanvasSurface #mapRightControls #walkNavToggle svg{ width:17px;height:17px } #mapTopViewport #mapCanvasSurface #mapRightControls :is(#mapSearchToggle,#mapFullscreenToggle,#walkNavToggle,#mapHereShortcut,#mapHomeShortcut){ flex-direction:column;gap:0 } #mapTopViewport #mapCanvasSurface #mapRightControls small{ font-size:8px;line-height:1.05;font-weight:850 } #mapTopViewport #mapCanvasSurface #mapRightControls #mapHereShortcut{ background:#fff;color:#176dde } #mapTopViewport #mapCanvasSurface #mapRightControls #mapHereShortcut span{ font-size:17px;line-height:1 } #mapTopViewport #mapCanvasSurface #mapRightControls #mapFitRouteButton{ color:#0f5d92;background:#f0f8fe;font-size:10px;font-weight:850;white-space:nowrap } #mapTopViewport #mapCanvasSurface #mapRightControls #mapLayersToggle{font-size:11px} /* The small bar just below the map is for zoom only; no obsolete dot grip. */ #mapTopViewport #mapBottomToolbar[data-collapsed="true"]{ height:34px!important;min-height:34px!important; justify-content:flex-end!important;padding:1px 5px!important } #mapTopViewport #mapBottomToolbar[data-collapsed="true"]::before{ display:none!important;content:none!important } #mapTopViewport #mapBottomToolbar #mapZoomControls{ margin:0 0 0 auto!important;height:31px!important;min-height:31px!important } #mapTopViewport #mapBottomToolbar #mapZoomControls button, #mapTopViewport #mapBottomToolbar[data-collapsed="true"] #mapZoomControls button{ width:36px!important;min-width:36px!important; height:30px!important;min-height:30px!important;font-size:21px!important } #mapTopViewport #mapBottomToolbar #mapZoomControls #mapControlDragHandle{ display:none!important } #mapCanvasSurface > #mapLegendToggle{ min-width:0;padding:4px 7px } #mapLegend{max-height:calc(100dvh - 28px);overflow-y:auto} #mapLegend .legend-route{border-top:5px solid #1a73e8} #mapLegend .legend-area{ width:23px;height:11px;border:1px solid #b65235; background:linear-gradient(90deg,#e4e8a8,#eda66d,#b82038) } #mapLegend .legend-risk{ display:inline-block;flex:none;width:23px;height:12px; border:1px solid #6e97ad;border-radius:2px } #mapLegend .legend-flood{background:linear-gradient(90deg,#b8e8f7,#2e7bbb)} #mapLegend .legend-inland{background:linear-gradient(90deg,#b9e6ff,#4886ce)} #mapLegend .legend-storm{background:linear-gradient(90deg,#c7e7f2,#3480b6)} #mapLegend .legend-tsunami{background:linear-gradient(90deg,#a1d2e3,#1c6d9c)} #mapLegend .legend-landslide{background:linear-gradient(90deg,#efd25b,#d95439)} #mapLegend .legend-overlap{ background:repeating-linear-gradient(135deg,#ca4d40 0 5px,#f4d767 5px 10px,#6ab2d8 10px 15px) } #mapLegend li span.legend-risk,#mapLegend li span.legend-area{width:23px} /* Fullscreen: compact controls wrap above the lower edge and remain tappable. */ body.map-fullscreen #mapTopViewport #mapCanvasSurface #mapRightControls{ inset:auto 6px 57px auto;display:flex!important; flex-direction:row;flex-wrap:wrap;align-content:end;align-items:center; justify-content:flex-end;gap:4px; width:auto;max-width:calc(100vw - 88px);max-height:calc(100dvh - 120px) } body.map-fullscreen #mapTopViewport #mapCanvasSurface #mapRightControls button, body.map-fullscreen #mapTopViewport #mapCanvasSurface #mapRightControls #mapOrientationToggle, body.map-fullscreen #mapTopViewport #mapCanvasSurface #mapRightControls #mapHereShortcut{ width:35px;min-width:35px;max-width:35px; height:35px;min-height:35px;max-height:35px } body.map-fullscreen #mapTopViewport #mapBottomToolbar{ left:7px!important;right:auto!important;bottom:52px!important; padding:1px 3px!important;max-width:82px!important } body.map-fullscreen #mapCanvasSurface > #mapLegendToggle{bottom:76px} @media(max-width:360px){ #mapTopViewport #mapCanvasSurface #mapRightControls{ grid-template-columns:repeat(2,34px);grid-auto-rows:34px;width:72px;gap:4px } #mapTopViewport #mapCanvasSurface #mapRightControls button, #mapTopViewport #mapCanvasSurface #mapRightControls #mapOrientationToggle, #mapTopViewport #mapCanvasSurface #mapRightControls #mapHereShortcut{ width:34px;min-width:34px;max-width:34px; height:34px;min-height:34px;max-height:34px } body.map-fullscreen #mapTopViewport #mapCanvasSurface #mapRightControls{ max-width:calc(100vw - 83px) } } /* Display-density controls: one switch for place names + disaster facilities. */ #mapTopViewport #mapBottomToolbar[data-collapsed="true"] #mapLayerControlsPanel{ display:none!important } #mapTopViewport #mapBottomToolbar[data-collapsed="false"]{ display:grid!important;grid-template-columns:minmax(0,1fr) auto!important; align-items:end!important;gap:5px!important; width:100%!important;max-width:none!important; height:auto!important;min-height:0!important; padding:5px!important;box-sizing:border-box!important; background:#f5f9fc!important } #mapTopViewport #mapBottomToolbar[data-collapsed="false"] #mapLayerControlsPanel{ display:block!important;min-width:0!important; margin:0!important;padding:5px 6px!important; border:1px solid #b8d0df;border-radius:10px; background:#fff;box-shadow:0 1px 3px #1b405616; } #mapLayerControlsPanel .map-display-heading{ display:flex;align-items:center;gap:5px;margin:0 0 5px; min-height:23px;color:#254e66 } #mapLayerControlsPanel .map-display-heading strong{ flex:1 1 auto;min-width:0;font-size:12px;font-weight:850;line-height:1.2 } #mapTopViewport #mapLayerControlsPanel .map-display-heading button{ flex:0 0 auto!important;min-width:0!important; min-height:25px!important;height:25px!important; width:auto!important;margin:0!important;padding:2px 6px!important; font-size:10px!important;font-weight:750!important; color:#416375;background:#eff5f8;border:1px solid #c4d7e1;border-radius:6px } #mapTopViewport #mapLayerControlsPanel .map-display-grid{ display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:5px!important;min-width:0 } #mapTopViewport #mapLayerControlsPanel .map-display-grid button{ display:flex!important;justify-content:center;align-items:center; box-sizing:border-box!important;min-width:0!important;width:100%!important; min-height:35px!important;height:auto!important;margin:0!important; padding:5px 3px!important;border-radius:7px!important; font-size:clamp(10px,2.65vw,12px)!important;font-weight:800!important; line-height:1.2!important;white-space:normal!important; overflow-wrap:anywhere!important; color:#205270;background:#eef5fa;border:1px solid #a9c7db } #mapTopViewport #mapLayerControlsPanel .map-display-grid button[aria-pressed="true"]{ background:#d9f0fb!important;color:#11578c!important;border-color:#5daccd!important } #mapTopViewport #mapLayerControlsPanel .map-display-grid button[aria-pressed="false"]{ background:#f0f2f5!important;color:#687988!important;border-color:#c2cbd2!important } #mapTopViewport #mapLayerControlsPanel #mapSheltersToggle{ display:none!important } #mapTopViewport #mapBottomToolbar[data-collapsed="false"] #mapZoomControls{ display:flex!important;grid-column:2!important;align-self:end!important; flex:none!important;width:auto!important;min-width:0!important; height:32px!important;min-height:32px!important;margin:0!important } #mapTopViewport #mapBottomToolbar[data-collapsed="false"] #mapZoomControls button{ width:34px!important;min-width:34px!important;height:32px!important; min-height:32px!important;font-size:20px!important } body.map-fullscreen #mapTopViewport #mapBottomToolbar[data-collapsed="false"]{ position:absolute!important;z-index:15!important; left:auto!important;right:7px!important;bottom:151px!important; width:min(96vw,420px)!important;max-width:min(96vw,420px)!important; box-shadow:0 4px 20px #11354d52 } @media(max-width:360px){ #mapTopViewport #mapLayerControlsPanel .map-display-grid button{ font-size:10px!important;min-height:38px!important } #mapTopViewport #mapBottomToolbar[data-collapsed="false"] #mapLayerControlsPanel{ padding:4px!important } } /* Fullscreen map: permanent actions live OUTSIDE the canvas, leaving roads visible. The controls are moved into #mapFullscreenDock in offline.js while active. */ #mapFullscreenDock{display:none} body.map-fullscreen #mapTopViewport #mapCanvasSurface{ order:0;flex:1 1 auto;min-height:0 } body.map-fullscreen #mapTopViewport > #mapRouteQuickBar{ position:relative!important;order:1;flex:0 0 auto; inset:auto!important;top:auto!important;bottom:auto!important; width:100%!important;min-height:38px;margin:0!important; padding:3px 5px!important;border-radius:0!important; border-left:0;border-right:0;box-shadow:none!important; background:#eef7fc!important;z-index:15 } body.map-fullscreen #mapTopViewport > #mapRouteQuickBar[data-navigation="true"]{ top:auto!important } body.map-fullscreen #mapTopViewport > #mapRouteQuickBar #mapRouteQuickList{ top:auto!important;bottom:calc(100% + 2px)!important; left:4px;right:4px;max-height:min(50dvh,340px); box-shadow:0 -3px 16px #14375255 } #mapTopViewport > #mapRouteQuickBar #mapRouteQuickReset{ color:#8a4126;background:#fff6f0;border-color:#c9a994 } #mapTopViewport > #mapRouteQuickBar #mapRouteQuickReset:disabled{ color:#8b9ca7;background:#f1f4f6;border-color:#d1dce3;opacity:.7 } @media(max-width:390px){ #mapTopViewport > #mapRouteQuickBar{gap:2px!important;padding:3px!important} #mapTopViewport > #mapRouteQuickBar > button{ font-size:10px!important;padding:3px!important;letter-spacing:-.03em } #mapTopViewport > #mapRouteQuickBar #mapRouteQuickChoose{font-size:10px!important} } body.map-fullscreen #mapTopViewport #mapFullscreenDock{ order:2;display:flex;flex:0 0 auto;flex-direction:column; box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0; border-top:1px solid #cbdce8;background:#f7fafc;z-index:13 } body.map-fullscreen #mapTopViewport #mapFullscreenDock #mapRightControls{ position:static!important;inset:auto!important; display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important; justify-content:space-between!important;align-items:center!important; align-content:center!important;box-sizing:border-box; width:100%!important;max-width:none!important;height:40px!important; max-height:none!important;margin:0!important;padding:3px 4px!important; gap:3px!important;pointer-events:auto } body.map-fullscreen #mapTopViewport #mapFullscreenDock #mapRightControls button, body.map-fullscreen #mapTopViewport #mapFullscreenDock #mapRightControls #mapOrientationToggle, body.map-fullscreen #mapTopViewport #mapFullscreenDock #mapRightControls #mapHereShortcut{ flex:1 1 0!important;box-sizing:border-box; width:auto!important;min-width:0!important;max-width:none!important; height:34px!important;min-height:34px!important;max-height:34px!important; margin:0!important;padding:1px!important;border-radius:8px!important; box-shadow:none!important;font-size:15px!important } body.map-fullscreen #mapTopViewport #mapFullscreenDock #mapRightControls #mapOrientationToggle{ gap:0!important } body.map-fullscreen #mapTopViewport #mapFullscreenDock #mapRightControls #mapCompassNeedle{ width:15px;height:17px } body.map-fullscreen #mapTopViewport #mapFullscreenDock #mapRightControls #mapOrientationLabel{ font-size:9px } body.map-fullscreen #mapTopViewport #mapFullscreenDock #mapRightControls :is(#mapSearchToggle,#mapFullscreenToggle,#walkNavToggle) svg{ width:15px;height:15px } body.map-fullscreen #mapTopViewport #mapFullscreenDock #mapRightControls small{ font-size:8px;line-height:1;font-weight:850 } body.map-fullscreen #mapTopViewport #mapFullscreenDock #mapRightControls #mapFitRouteButton{ font-size:9px!important;letter-spacing:-.04em } body.map-fullscreen #mapTopViewport #mapFullscreenDock #mapRightControls #mapLayersToggle{ font-size:10px!important } body.map-fullscreen #mapTopViewport #mapFullscreenDock #mapRightControls #mapHereShortcut span{ font-size:16px } body.map-fullscreen #mapTopViewport #mapFullscreenDock #mapBottomToolbar{ position:relative!important;inset:auto!important;top:auto!important;bottom:auto!important; left:auto!important;right:auto!important;box-sizing:border-box!important; width:100%!important;max-width:none!important;min-height:35px!important; height:auto!important;margin:0!important;padding:2px 5px!important; border:0!important;border-top:1px solid #e1e9ee!important; border-radius:0!important;box-shadow:none!important;background:#f7fafc!important } body.map-fullscreen #mapTopViewport #mapFullscreenDock #mapBottomToolbar[data-collapsed="true"]{ display:flex!important;height:35px!important;min-height:35px!important; justify-content:space-between!important;align-items:center!important } body.map-fullscreen #mapTopViewport #mapFullscreenDock #mapBottomToolbar > #mapLegendToggle{ display:inline-flex!important;position:static!important;inset:auto!important; flex:none!important;grid-column:1;grid-row:2;justify-self:start; box-sizing:border-box;width:auto!important;min-width:65px; height:29px!important;min-height:29px!important; margin:0!important;padding:2px 8px!important; border:1px solid #95bbd0;border-radius:14px; background:#fff;color:#205676;font-size:10px;font-weight:800 } body.map-fullscreen #mapTopViewport #mapFullscreenDock #mapBottomToolbar #mapZoomControls{ position:static!important;inset:auto!important; margin:0 0 0 auto!important;height:30px!important;min-height:30px!important } body.map-fullscreen #mapTopViewport #mapFullscreenDock #mapBottomToolbar[data-collapsed="false"]{ position:relative!important;display:grid!important; grid-template-columns:minmax(0,1fr) auto!important;gap:4px!important; width:100%!important;max-width:none!important;min-height:0!important; box-shadow:none!important } body.map-fullscreen #mapTopViewport #mapFullscreenDock #mapBottomToolbar[data-collapsed="false"] #mapLayerControlsPanel{ grid-column:1 / -1!important;grid-row:1!important } body.map-fullscreen #mapTopViewport #mapFullscreenDock #mapBottomToolbar[data-collapsed="false"] #mapZoomControls{ grid-column:2!important;grid-row:2!important } body.map-fullscreen #mapTopViewport #mapNavBanner{ top:8px!important;right:8px } body.map-fullscreen #mapTopViewport #mapNavSummary{ order:3;flex:none;z-index:13 } /* "Show no route" is an explicit first choice in the saved route list too. */ #favoriteRouteList .favorite-route-none{ display:block;box-sizing:border-box;width:100%;min-height:36px; margin:0 0 7px;padding:7px 11px;text-align:left; border:1px solid #9bc0d7;border-radius:8px; background:#eef7fd;color:#155a80;font-size:12px;font-weight:800 } #favoriteRouteList .favorite-route-none[aria-pressed="true"]{ background:#d9f2e8;border-color:#63b299;color:#116149 } /* Map-overlay controls use translucent backgrounds; labels and icons stay opaque. The fullscreen dock is outside the map, so its controls remain solid. */ #mapTopViewport #mapCanvasSurface #mapRightControls button:not([aria-pressed="true"]):not([aria-expanded="true"]), #mapTopViewport #mapCanvasSurface #mapRightControls #mapOrientationToggle[aria-pressed="true"]{ background-color:rgba(255,255,255,.73) } #mapTopViewport #mapCanvasSurface #mapRightControls #mapFitRouteButton{ background-color:rgba(240,248,254,.76) } #mapTopViewport #mapCanvasSurface > #mapLegendToggle{ background-color:rgba(255,255,255,.74) } #mapTopViewport #mapCanvasSurface .map-directions span{ background-color:rgba(255,255,255,.72); border-color:rgba(109,143,164,.88) } /* Saved routes: readable full names and explicit actions on narrow phones. */ #mapRouteQuickList .map-route-list-row{ display:grid;gap:3px;margin:0 0 6px;padding:5px; border:1px solid #bed5e3;border-radius:9px;background:#f7fbff; } #mapRouteQuickList .map-route-list-row[data-active="true"]{ border-color:#2683b6;background:#e7f5ff; } #mapRouteQuickList .map-route-list-row .route-row-open{ box-sizing:border-box;width:100%;margin:0;padding:5px 4px; border:0;border-radius:5px;background:transparent; font-size:12px;line-height:1.35;color:#163f5b; } #mapRouteQuickList .route-row-open .route-row-title{ display:block;font-weight:800;overflow-wrap:anywhere; } #mapRouteQuickList .route-row-open small{ display:block;margin:2px 0 0;font-size:11px;font-weight:600;color:#4d697b; } #mapRouteQuickList .route-row-actions{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px; } #mapRouteQuickList .route-row-actions button{ box-sizing:border-box;width:100%;min-height:34px;margin:0;padding:6px 3px; text-align:center;font-size:12px;font-weight:750; border-color:#91b9d0;background:#e8f5fc; } #mapRouteQuickList .route-row-actions button:last-child{ color:#a12e29;border-color:#dcb0ad;background:#fff4f3; } #mapRouteQuickList .route-row-actions button:disabled{opacity:.48} #favoriteRouteHub .favorite-route-row{ display:flex;flex-direction:column;align-items:stretch;gap:5px; } #favoriteRouteHub .favorite-route-row .favorite-buttons{ display:flex;flex-wrap:wrap;justify-content:flex-start;gap:4px; } #favoriteRouteHub .favorite-route-row .favorite-buttons button{ min-height:32px;padding:5px 7px;min-width:48px;font-size:11px; } #favoriteRouteHub .favorite-route-row .favorite-remove{ color:#a12e29;background:#fff1f0;border-color:#dcb0ad; } .route-quick-delete-dialog{ box-sizing:border-box;width:min(92vw,440px);max-height:82dvh; padding:17px;border:2px solid #9dbccc;border-radius:12px; color:#1c3b52;background:#fff;box-shadow:0 13px 38px #172a4055; } .route-quick-delete-dialog::backdrop{background:#112c48a8} .route-quick-delete-dialog h2{margin:0 0 10px;font-size:18px} .route-quick-delete-dialog #routeQuickDeleteName{ margin:0;padding:9px;border-radius:7px;background:#eef6fc; font-size:13px;font-weight:700;overflow-wrap:anywhere; } .route-quick-delete-dialog .route-delete-note{ font-size:12px;line-height:1.55;color:#6a4a40; } .route-quick-delete-dialog .route-delete-actions{ display:flex;gap:8px;justify-content:flex-end; } .route-quick-delete-dialog .route-delete-actions button{ min-height:43px;padding:7px 13px;border:1px solid #8daec2; border-radius:7px;background:#eaf4fa;color:#16425b;font-weight:800; } .route-quick-delete-dialog .route-delete-actions .route-delete-confirm{ color:#fff;background:#ad2929;border-color:#ad2929; } /* Larger interactive map on phones. Canvas backing pixels are resized by offline.js to match its actual aspect ratio; geography is never vertically stretched. */ @media(max-width:700px){ #mapTopViewport:not([hidden]) #mapCanvasSurface{ height:clamp(430px,65dvh,670px)!important; min-height:430px; } #mapTopViewport:not([hidden]) #mapCanvasSurface #offlineCanvas{ width:100%!important;height:100%!important; max-height:none!important;display:block;box-sizing:border-box; } } #mapCanvasSurface #mapRainRadarLayer{ position:absolute;inset:0;z-index:3;overflow:hidden; pointer-events:none;opacity:.73; } #mapCanvasSurface #mapRainRadarLayer[hidden]{display:none!important} #mapRainRadarLayer .map-rain-radar-plane{ position:absolute;inset:0;transform-origin:center center; will-change:transform;pointer-events:none; } #mapRainRadarLayer .map-rain-radar-tile{ position:absolute;display:block;max-width:none!important;max-height:none!important; object-fit:fill;pointer-events:none;user-select:none; } #mapTopViewport #mapRainRadarControls:not([hidden]){ box-sizing:border-box;width:100%;display:grid;gap:3px; padding:6px 7px;margin:0; border:1px solid #a4c5d7;border-radius:0; background:#f0faff;color:#153c54; } #mapTopViewport #mapRainRadarControls[hidden]{display:none!important} #mapRainRadarControls .radar-playing-row{ display:flex;align-items:center;gap:5px;min-width:0; } #mapRainRadarControls .radar-playing-row input{ flex:1 1 auto;min-width:65px;max-width:100%;width:auto; margin:0;accent-color:#247bb2; } #mapTopViewport #mapRainRadarControls .radar-playing-row button{ flex:0 0 auto;width:auto;min-width:0;height:32px;min-height:32px; padding:3px 7px;margin:0;border:1px solid #8ab8d3;border-radius:7px; background:#fff;color:#15567f;font:bold 12px system-ui; } #mapRainRadarControls #mapRainRadarTime{ flex:0 0 auto;min-width:90px;font-size:11px;white-space:nowrap; } #mapRainRadarControls .radar-source-row{ display:flex;justify-content:space-between;gap:4px 12px;flex-wrap:wrap; line-height:1.35; } #mapRainRadarControls .radar-source-row small{font-size:10px;color:#476375} #mapRainRadarControls .radar-source-row a{color:#16638c} #mapRainRadarControls #mapRainRadarStatus{overflow-wrap:anywhere} #mapTopViewport #mapLocalWeatherRefresh{ min-height:28px;height:28px;width:auto;min-width:52px; padding:3px 7px;border:1px solid #9ebfd3;border-radius:7px; background:#fff;color:#155777;font:bold 11px system-ui; } #mapTopViewport #mapRainRadarToggle{ min-height:35px;width:auto;padding:3px 8px; border:1px solid #98c2d8;border-radius:7px; background:#e8f7fc;color:#155a7c;font-size:11px;font-weight:800; } #mapTopViewport #mapRainRadarToggle[aria-pressed="true"], .header-radar-link[aria-pressed="true"]{ background:#b9e5fb!important;color:#094d75!important;border-color:#54a6cb!important; } .header-radar-link{ cursor:pointer;font:inherit; } body.map-fullscreen #mapTopViewport #mapCanvasSurface{ height:auto!important;min-height:0!important; } body.map-fullscreen #mapTopViewport #mapRainRadarControls:not([hidden]){ position:absolute;z-index:14;left:0;right:0;top:auto; bottom:110px;padding:4px 6px;background:#f5fbffed; } @media(max-width:375px){ #mapRainRadarControls .radar-playing-row{gap:3px} #mapTopViewport #mapRainRadarControls .radar-playing-row button{padding:3px 5px;font-size:11px} #mapRainRadarControls #mapRainRadarTime{font-size:10px;min-width:83px} } /* Show the active route preferences next to the Conditions action without squeezing the route title or putting controls over the map. */ #mapTopViewport > #mapRouteQuickBar{flex-wrap:wrap} #mapTopViewport > #mapRouteQuickBar > :is(#mapRouteQuickChoose,#mapRouteQuickCreate,#mapRouteQuickReset,#mapRouteTopEdit){order:0} #mapTopViewport > #mapRouteQuickBar .map-route-condition-inline{ order:1;flex:1 0 100%;display:flex;align-items:center;gap:6px;min-width:0; box-sizing:border-box;padding:0 2px } #mapTopViewport > #mapRouteQuickBar .map-route-condition-inline #mapRouteQuickConditions{ flex:0 0 auto;box-sizing:border-box;width:auto;min-height:26px;margin:0;padding:3px 8px; border:1px solid #95b7d0;border-radius:7px;background:#fff;color:#175378; font-size:11px;font-weight:800;white-space:nowrap;cursor:pointer } #mapTopViewport > #mapRouteQuickBar #mapRouteConditionSummary{ flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis; color:#204c66;font-size:10.5px;font-weight:750;line-height:1.3;white-space:nowrap } @media(max-width:420px){ #mapTopViewport > #mapRouteQuickBar #mapRouteConditionSummary{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; white-space:normal;overflow:hidden } } /* The primary route creation action should be immediately recognizable. */ #mapTopViewport > #mapRouteQuickBar #mapRouteQuickCreate{ background:#126fc7;color:#fff;border-color:#07599f; font-weight:900;box-shadow:0 1px 3px #0b4c8755 } #mapTopViewport > #mapRouteQuickBar #mapRouteQuickCreate:focus-visible{ outline:3px solid #f4a630;outline-offset:2px } /* The map display settings are modal: no off-screen panel below the map. */ #mapDisplayDialog{ box-sizing:border-box;width:min(430px,calc(100vw - 24px)); max-height:calc(100dvh - 28px);overflow-y:auto;overscroll-behavior:contain; margin:auto;padding:12px;border:2px solid #2676a2;border-radius:16px; background:#fff;color:#123f5b;box-shadow:0 12px 38px #092b4659; z-index:99999 } #mapDisplayDialog::backdrop{background:#0f294c8c} #mapDisplayDialog:not([open]){display:none!important} #mapDisplayDialog #mapLayerControlsPanel{ display:block!important;width:100%!important;min-width:0!important; margin:0!important;padding:0!important;border:0!important;background:transparent!important; box-shadow:none!important } #mapDisplayDialog .map-display-heading{ display:flex;align-items:center;gap:7px;margin-bottom:12px;padding-bottom:8px; border-bottom:1px solid #c4d9e5 } #mapDisplayDialog .map-display-heading strong{font-size:17px!important;color:#134562} #mapDisplayDialog #mapLayerControlsPanel .map-display-heading button{ min-height:40px!important;height:auto!important;padding:7px 9px!important; font-size:12px!important } #mapDisplayDialog #mapLayerControlsPanel .map-display-grid{ display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important } #mapDisplayDialog #mapLayerControlsPanel .map-display-grid button{ min-height:48px!important;min-width:0!important;padding:9px 6px!important; font-size:13px!important;border-radius:10px!important;white-space:normal!important } #mapDisplayDialog #mapLayerControlsPanel .map-display-grid button[hidden]{display:none!important} #mapDisplayDialog .map-distance-grid-setting{ grid-column:1/-1;padding:8px 10px;border:1px solid #a7c4d7; border-radius:10px;background:#f0f7fb } #mapDisplayDialog .map-distance-grid-setting label{ display:flex;align-items:center;justify-content:space-between;gap:10px; margin:0;font-size:13px;font-weight:750;color:#174868 } #mapDisplayDialog #mapGridSpacing{ box-sizing:border-box;width:auto;max-width:55%;min-width:112px;min-height:39px; padding:5px 6px;border:1px solid #6c9dbb;border-radius:7px;background:#fff; font-size:13px;color:#173d57 } #mapDisplayDialog #mapGridHint{ display:block;margin-top:5px;font-size:11px;line-height:1.4;color:#3e647c } #mapCanvasSurface #mapGpsFeedback:not([hidden]){ position:absolute;z-index:50;top:53px;left:8px;right:56px; display:flex;align-items:flex-start;gap:6px; max-width:340px;padding:9px 7px 9px 10px;box-sizing:border-box; border:2px solid #1976a1;border-radius:10px;background:#eef8ffed; color:#164966;box-shadow:0 3px 14px #142f4c50; font-size:12px;font-weight:750;line-height:1.35 } #mapCanvasSurface #mapGpsFeedback[data-kind="loading"]{ border-color:#e6ac36;background:#fffbebf5;color:#75500b } #mapCanvasSurface #mapGpsFeedback[data-kind="success"]{ border-color:#16865b;background:#effcf3f5;color:#0b5e3c } #mapCanvasSurface #mapGpsFeedback[data-kind="error"]{ border-color:#be393c;background:#fff3f0f5;color:#842423 } #mapGpsFeedbackText{flex:1;min-width:0} #mapGpsFeedbackClose{ flex:none;min-width:24px!important;width:24px!important; min-height:25px!important;height:25px!important;padding:0!important; border:1px solid currentColor;border-radius:5px;background:transparent;color:inherit;font-size:18px } #mapHereShortcut[aria-busy="true"]{background:#ffce63!important;color:#402400!important} body.map-fullscreen #mapCanvasSurface #mapGpsFeedback:not([hidden]){top:53px;right:55px} /* Accessible legend: distinctly colored type keys, expanded criteria. */ #mapLegend{width:min(555px,calc(100vw - 16px));max-height:calc(100dvh - 18px)!important} #mapLegend .map-legend-heading{position:sticky;top:-12px;z-index:2; margin:-12px -12px 8px;padding:12px 12px 8px;background:#fff; border-bottom:1px solid #dbe5ec} #mapLegend .map-legend-heading h2{font-size:17px} #mapLegend .legend-intro{font-size:12px;line-height:1.4;color:#375d75;margin:5px 0!important} #mapLegend ul{gap:6px!important} #mapLegend li{display:block;min-height:0;min-width:0} #mapLegend li:has(>.legend-entry[open]){grid-column:1/-1} #mapLegend .legend-entry{ display:block;min-width:0;height:100%;border:1px solid #bdd0db; border-radius:8px;background:#f8fbff;overflow:hidden } #mapLegend .legend-entry[open]{border-color:#1d76a8;background:#fff; box-shadow:0 2px 8px #1b476b23} #mapLegend .legend-entry>summary{ display:flex;align-items:center;gap:5px;box-sizing:border-box; min-width:0;min-height:43px;padding:6px 7px;font-size:12px; font-weight:650;line-height:1.35;cursor:pointer;list-style:none } #mapLegend .legend-entry>summary::-webkit-details-marker{display:none} #mapLegend .legend-detail-cue{margin-left:auto!important;flex:none!important; width:auto!important;font-size:21px;line-height:1;color:#2c709a} #mapLegend .legend-entry[open] .legend-detail-cue{transform:rotate(90deg)} #mapLegend .legend-explainer{ padding:10px;border-top:1px solid #d3e4ee;background:#fff; font-size:12px;line-height:1.65;color:#243f52;font-weight:500 } #mapLegend .legend-explainer a{display:block;color:#075b9e; text-decoration:underline;margin-top:5px;overflow-wrap:anywhere} #mapLegend .legend-route{border-top:5px solid #1a73e8} #mapLegend .legend-original{border-top:4px dashed #078c9e} #mapLegend .hazard-legend-high{display:inline-grid;place-items:center; width:22px;height:22px;border-radius:50%;background:#c4511c;color:#fff} #mapLegend .legend-risk{ display:inline-grid!important;place-items:center;flex:none!important; width:25px!important;height:25px!important; border:2px solid #fff!important;outline:1px solid #567387; border-radius:6px!important;color:#fff!important; font-size:12px;font-weight:900;text-shadow:0 1px 2px #142b5d55 } #mapLegend .legend-flood{background:#0a5fce!important} #mapLegend .legend-flood::before{content:"洪"} #mapLegend .legend-inland{background:#703bb2!important} #mapLegend .legend-inland::before{content:"内"} #mapLegend .legend-storm{background:#b65b11!important} #mapLegend .legend-storm::before{content:"高"} #mapLegend .legend-tsunami{background:#087a78!important} #mapLegend .legend-tsunami::before{content:"津"} #mapLegend .legend-landslide{background:#b73140!important} #mapLegend .legend-landslide::before{content:"土"} #mapLegend .legend-overlap{ background:repeating-linear-gradient(135deg,#c13d42 0 6px,#f0ce47 6px 12px,#247cc3 12px 18px)!important } #mapLegend .legend-overlap::before{content:"重";color:#111;background:#fffaf4db; border-radius:3px;padding:1px} @media(max-width:370px){#mapLegend .legend-entry>summary{font-size:11px;padding:5px}} /* GPS-centred live advisories. The fixed map button does not shrink the map. */ #mapCanvasSurface #mapLiveAlertsOpen{ position:absolute;left:7px;bottom:68px;z-index:26; box-sizing:border-box;width:auto;min-width:0;min-height:36px; margin:0;padding:5px 10px;border:2px solid #b54731; border-radius:18px;background:#fff9ebf0;color:#8c2f1b; box-shadow:0 2px 7px #1c344d55;font-size:12px;font-weight:900 } body.map-fullscreen #mapCanvasSurface #mapLiveAlertsOpen{bottom:117px} #mapLiveAlertsDialog{ box-sizing:border-box;width:min(570px,calc(100vw - 18px));max-height:calc(100dvh - 20px); margin:auto;padding:12px;overflow:auto;overscroll-behavior:contain; border:2px solid #b75829;border-radius:15px;background:#fff;color:#143b50; box-shadow:0 12px 38px #11253a75 } #mapLiveAlertsDialog::backdrop{background:#14283b99} #mapLiveAlertsDialog .map-legend-heading{position:sticky;top:-12px;z-index:2; margin:-12px -12px 8px;padding:12px;background:#fff;border-bottom:1px solid #d9e6ec} #mapLiveAlertsDialog h2{margin:0;font-size:17px} #mapLiveAlertsDialog .map-legend-heading button{min-height:39px} #mapLiveAlertsStatus{display:block;padding:8px;border-radius:8px; background:#edf6fb;border:1px solid #b8d3e2;font-size:12px} #mapLiveAlertsStatus[data-state="error"]{background:#fff1ec;color:#933d27;border-color:#d79c8c} .live-alert-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:9px 0} .live-alert-actions button{min-height:48px;padding:6px;font-size:12px; border:1px solid #90b2c8;border-radius:8px;color:#15577c;background:#e8f5ff} .live-alert-actions #mapLiveAlertsRefresh{background:#0e689c;color:#fff;border-color:#0e689c} #mapLiveAlertsWarnings,#mapLiveAlertsLocal{margin:10px 0} #mapLiveAlertsWarnings h3,#mapLiveAlertsLocal h3,.live-alert-official h3{ margin:8px 0;font-size:14px;color:#153d55 } #mapLiveAlertsWarnings ul,#mapLiveAlertsLocal ul{list-style:none;margin:5px 0;padding:0;display:grid;gap:6px} #mapLiveAlertsWarnings li,#mapLiveAlertsLocal li{border:1px solid #ccdae2;border-left:5px solid #b09a69; border-radius:7px;padding:7px 9px;font-size:12px;line-height:1.5;background:#f9fbfe} #mapLiveAlertsWarnings li[data-severity="danger"]{border-left-color:#c12834;background:#fff2f1} #mapLiveAlertsWarnings li[data-severity="warning"]{border-left-color:#dc6a24;background:#fff8ee} #mapLiveAlertsWarnings li strong,#mapLiveAlertsLocal li strong{display:block;font-size:13px} #mapLiveAlertsWarnings li small,#mapLiveAlertsLocal li small{display:block;color:#576b7a;margin-top:3px} .live-alert-official{border-top:1px solid #d0dfe9;padding-top:5px} .live-alert-official a{display:block;margin:5px 0;min-height:36px;padding:8px 9px; background:#eef5fb;border:1px solid #c2d6e6;border-radius:7px;color:#165e93; font-size:12px;font-weight:750;text-decoration:none} #mapLiveAlertsDialog>.note{font-size:11px;line-height:1.55} #tsunamiTopAlert:not([hidden]){ position:sticky;top:0;z-index:45000;display:flex;flex-wrap:wrap; align-items:center;gap:6px 10px;box-sizing:border-box; margin:0;padding:9px 12px;border-bottom:4px solid #78151c; background:#d51829;color:white;box-shadow:0 2px 12px #40182290; font-size:13px;line-height:1.4 } #tsunamiTopAlert strong{font-size:17px} #tsunamiTopAlert span{flex:1 1 100%;font-weight:700} #tsunamiTopAlert a{color:#fff;background:#7d1725;padding:5px 10px; border:1px solid #ffcbca;border-radius:6px;text-decoration:none;font-weight:800} #tsunamiTopAlert[data-grade="advisory"]{background:#d78b09;border-color:#985900;color:#252018} #tsunamiTopAlert[data-grade="advisory"] a{background:#fff1d0;color:#673b00;border-color:#a57623} /* Map search sheet: opaque, full-width and readable with the mobile keyboard open. */ #mapTopViewport #mapSearchPanel:not([hidden]){ position:absolute!important;z-index:90!important; top:6px!important;left:5px!important;right:5px!important; display:grid!important;grid-template-columns:minmax(0,1fr) 40px!important; align-items:start;align-content:start;gap:7px!important; max-height:min(76dvh,590px)!important;padding:9px!important; overflow-y:auto!important;overscroll-behavior:contain; border:2px solid #1d638e;border-radius:13px; background:#f8fcff!important; box-shadow:0 8px 28px rgba(4,25,45,.53)!important; } #mapTopViewport #mapSearchPanel .map-tools{ grid-column:1;grid-row:1;width:100%!important;min-width:0; } #mapTopViewport #mapSearchPanel #mapSearchClose{ grid-column:2;grid-row:1; display:flex;align-items:center;justify-content:center; height:44px;min-height:44px;width:40px;margin:0!important;padding:0!important; border:2px solid #8aaec8;border-radius:9px;background:#e4eef7; color:#163c5b;font-size:23px;font-weight:800;cursor:pointer; } #mapTopViewport #mapSearchPanel #mapPlaceChoices, #mapTopViewport #mapSearchPanel #mapPlaceStatus, #mapTopViewport #mapSearchPanel #mapExternalSearch{grid-column:1/-1;min-width:0;} #mapTopViewport #mapSearchPanel #mapPlaceForm{ height:44px!important;box-shadow:none!important; border:2px solid #176995!important; } #mapTopViewport #mapSearchPanel #mapPlaceForm input{ color:#102c42!important;font-weight:650!important; } #mapTopViewport #mapSearchPanel #mapPlaceChoices:not([hidden]){ margin:0!important;max-height:min(51dvh,425px)!important; overflow-y:auto!important;padding:8px!important; background:#dfedfa!important;border:2px solid #4c8cb4!important; } #mapTopViewport #mapSearchPanel #mapPlaceChoices button{ min-height:52px!important;padding:9px 11px!important; font-size:15px!important;line-height:1.45!important; background:#fff!important;color:#103e60!important; border:1.5px solid #7eabc8!important; border-left:5px solid #176b9a!important; box-shadow:0 1px 2px rgba(17,51,74,.12); } #mapTopViewport #mapSearchPanel #mapPlaceChoices .place-result-sub{ font-size:12px!important;color:#36566e!important;line-height:1.35; } #mapTopViewport #mapSearchPanel #mapPlaceStatus:not([hidden]){ padding:8px 10px!important;font-size:13px!important;line-height:1.5!important; max-height:120px!important;overflow-y:auto!important; background:#e9f5ff!important;color:#17405e!important; } #mapTopViewport #mapSearchPanel #mapExternalSearch:not([hidden]){ display:flex;gap:6px;flex-wrap:wrap;overflow-wrap:anywhere; } #mapTopViewport #mapSearchPanel #mapExternalSearch a{ padding:7px 9px!important;font-size:12px!important; } @media(max-width:380px){ #mapTopViewport #mapSearchPanel:not([hidden]){top:4px!important;left:3px!important;right:3px!important;padding:6px!important;gap:5px!important} #mapTopViewport #mapSearchPanel #mapPlaceChoices button{font-size:14px!important;min-height:48px!important} } /* Place suggestions can have three lines; fixed-height map buttons used to cut off their last line. */ #mapTopViewport #mapSearchPanel #mapPlaceChoices button.place-search-result{ display:block!important;height:auto!important;min-height:66px!important; max-height:none!important;white-space:normal!important; overflow:visible!important;box-sizing:border-box!important; padding:9px 11px!important;text-align:left!important; } #mapTopViewport #mapSearchPanel #mapPlaceChoices .place-result-body{ display:grid!important;grid-template-columns:minmax(0,1fr)!important; width:100%;gap:4px!important;overflow:visible!important; } #mapTopViewport #mapSearchPanel #mapPlaceChoices .place-result-main{ font-size:15px!important;line-height:1.35!important;font-weight:800!important; color:#143b57!important; } #mapTopViewport #mapSearchPanel #mapPlaceChoices .place-result-category{ font-size:11px!important;color:#0a4976!important; } #mapTopViewport #mapSearchPanel #mapPlaceChoices .place-result-description, #mapTopViewport #mapSearchPanel #mapPlaceChoices .place-result-foot{ font-size:12px!important;line-height:1.4!important; color:#36566e!important; } /* Search mode makes room for the on-screen keyboard and its suggestions. */ #mapTopViewport.map-search-open > #mapRouteQuickBar{display:none!important} #mapTopViewport.map-search-open .map-directions, #mapTopViewport.map-search-open #mapRightControls{display:none!important} #mapTopViewport.map-search-open #mapSearchPanel:not([hidden]){ max-height:min(76dvh,var(--map-search-visible-height,590px))!important } #mapTopViewport.map-search-open #mapSearchPanel .map-tools{ position:sticky!important;top:0;z-index:2 } /* Map regulation route tap card: road name, plan status and live lookup. */ #mapRegulationCard[hidden]{display:none!important} #mapCanvasSurface #mapRegulationCard{ position:absolute;left:8px;right:57px;bottom:10px;z-index:75; box-sizing:border-box;max-height:min(60%,270px);overflow-y:auto; padding:10px;border:2px solid #71119d;border-radius:12px; background:#fffefa;color:#18364c;box-shadow:0 5px 20px #132d4e6b; pointer-events:auto } #mapRegulationCard .map-regulation-head{display:flex;align-items:center;gap:6px} #mapRegulationCard .map-regulation-head strong{ flex:1;min-width:0;font-size:14px;line-height:1.35;overflow-wrap:anywhere } #mapRegulationCard #mapRegulationClose{ flex:none;width:32px;min-width:32px;min-height:32px;padding:0;margin:0; border:1px solid #b3a0c3;border-radius:7px;background:#f5effa; color:#542076;font-size:19px } #mapRegulationCard #mapRegulationState{ margin:5px 0 8px;padding:6px 7px;border-radius:7px; background:#fff4e5;color:#694019;font-size:11px;line-height:1.4 } #mapRegulationCard .map-regulation-actions{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px } #mapRegulationCard .map-regulation-actions :is(button,a){ display:flex;align-items:center;justify-content:center;min-width:0; min-height:40px;margin:0;padding:5px 6px;border:1px solid #a88bc0; border-radius:7px;background:#f6f0fc;color:#55147a;text-align:center; text-decoration:none;font-size:11px;font-weight:800;line-height:1.25 } #mapRegulationCard #mapRegulationDetails{ grid-column:1/-1;background:#71119d;border-color:#71119d;color:#fff } #mapLegend .legend-road{ display:inline-block!important;flex:none!important;width:40px;height:12px; border:2px solid #273746;border-radius:3px; background:repeating-linear-gradient(to right,#71119d 0 15px,#fff 15px 27px); box-shadow:0 0 0 1px #cbd7df } /* Distinct place cards remain legible when Android's keyboard covers the map. */ #mapTopViewport #mapSearchPanel #mapPlaceChoices:not([hidden]){ display:grid!important;gap:9px!important; padding:10px!important;scroll-padding:8px!important } #mapTopViewport #mapSearchPanel #mapPlaceChoices button.place-search-result{ display:block!important;min-height:80px!important; margin:0!important;padding:12px!important; border:2px solid #80a9c6!important;border-left:6px solid #186ca5!important; border-radius:11px!important;box-shadow:0 2px 5px #153e5d20!important; background:#fff!important } #mapTopViewport #mapSearchPanel #mapPlaceChoices button.place-search-result:active{ background:#eaf6ff!important;border-color:#075da0!important } #mapTopViewport #mapSearchPanel #mapPlaceChoices .place-result-body{ gap:6px!important } #mapTopViewport #mapSearchPanel #mapPlaceChoices .place-result-headline{ display:flex!important;flex-wrap:wrap!important;align-items:center!important; gap:5px 7px!important } #mapTopViewport #mapSearchPanel #mapPlaceChoices .place-result-main{ flex:1 1 180px!important;font-size:15px!important;color:#103551!important } #mapTopViewport #mapSearchPanel #mapPlaceChoices .place-result-category{ border:1px solid #abc8dd;border-radius:6px;padding:2px 5px!important; background:#edf5fb!important;color:#144b74!important;font-size:11px!important } #mapTopViewport #mapSearchPanel #mapPlaceChoices .place-result-address{ display:block!important;font-size:12px!important;line-height:1.5!important; color:#164d73!important;font-weight:700!important;overflow-wrap:anywhere } #mapTopViewport #mapSearchPanel #mapPlaceChoices .place-result-description{ display:block!important;font-size:12px!important;line-height:1.45!important; color:#344b5c!important;overflow-wrap:anywhere } #mapTopViewport #mapSearchPanel #mapPlaceChoices .place-result-foot{ display:flex!important;flex-wrap:wrap!important;align-items:center!important; gap:4px 8px!important;font-size:10px!important;color:#516474!important } #mapTopViewport #mapSearchPanel #mapPlaceChoices .place-result-distance{ display:inline-block!important;padding:3px 6px!important;border-radius:5px!important; background:#e1f2e7!important;color:#166341!important; font-size:11px!important;font-weight:800!important } #mapTopViewport #mapSearchPanel #mapPlaceChoices .place-result-source{ color:#577084!important;font-size:10px!important } #mapTopViewport #mapSearchPanel #mapPlaceChoices .place-result-action{ display:block!important;justify-self:end!important;text-align:right!important; color:#07689e!important;font-size:12px!important;font-weight:900!important } @media(max-width:380px){ #mapTopViewport #mapSearchPanel #mapPlaceChoices button.place-search-result{ padding:9px!important } #mapTopViewport #mapSearchPanel #mapPlaceChoices .place-result-main{ font-size:14px!important } } /* Coarse network location hint in the compact map search sheet. */ #mapTopViewport #mapSearchPanel #mapSearchRegion{ grid-column:1/-1!important; display:flex!important;flex-wrap:wrap!important;align-items:center; justify-content:space-between;gap:4px 7px; min-width:0;margin:0!important;padding:5px 7px!important; border:1px solid #c2d2dd;border-radius:7px; background:#f1f7fa;color:#284b62 } #mapTopViewport #mapSearchPanel #mapSearchRegionText{ flex:1 1 155px;font-size:11px!important;line-height:1.35!important; font-weight:800;overflow-wrap:anywhere } #mapTopViewport #mapSearchPanel #mapSearchRegionSwitch:not([hidden]){ flex:0 1 auto;width:auto!important;min-height:28px!important; padding:3px 7px!important;margin:0!important; border:1px solid #7ba3b7;border-radius:6px; background:#fff!important;color:#075679!important;font-size:10px!important; line-height:1.2!important;font-weight:800 } #mapTopViewport #mapSearchPanel #mapPlaceChoices button.place-search-show-all{ min-height:42px!important;display:block!important; border:2px solid #28709c!important;border-radius:8px!important; padding:8px!important;background:#f5faff!important;color:#0d5c86!important; text-align:center!important;font-size:12px!important;font-weight:900!important } /* The global button rule uses !important display and can override [hidden]. */ #mapTopViewport #mapSearchPanel #mapSearchRegionSwitch[hidden]{ display:none!important } #mapTopViewport #mapSearchPanel #mapSearchRegionSwitch:not([hidden]){ min-width:105px!important;white-space:nowrap!important; flex-shrink:0!important } /* Prominent official latest-road-status shortcut above the 30 km alerts chip. */ #mapCanvasSurface #mapRoadNowOpen{ position:absolute;left:7px;bottom:57px;z-index:27; display:flex;align-items:center;justify-content:center; box-sizing:border-box;min-height:40px;max-width:min(220px,calc(100% - 78px)); margin:0;padding:6px 11px;border:2px solid #ae5c0b;border-radius:20px; background:#fff3ccf5;color:#7a3905; box-shadow:0 2px 9px #193f6655; text-decoration:none;font-size:12px;font-weight:900;line-height:1.25 } #mapCanvasSurface #mapRoadNowOpen:focus-visible{ outline:3px solid #197ec2;outline-offset:2px } body.map-fullscreen #mapCanvasSurface #mapRoadNowOpen{bottom:59px} /* Compact Android map controls: one foldable action menu, with independent GPS. */ #mapTopViewport #mapCanvasSurface > #mapRightControls{ position:absolute!important;inset:8px 7px auto auto!important; z-index:52!important;display:flex!important;flex-direction:column!important; flex-wrap:nowrap!important;align-items:flex-end!important;justify-content:flex-start!important; gap:4px!important;width:auto!important;height:auto!important;max-width:120px!important; max-height:calc(100% - 16px)!important;margin:0!important;padding:0!important } #mapTopViewport #mapCanvasSurface > #mapRightControls[data-expanded="false"] > button:not(#mapToolsToggle){ display:none!important } #mapTopViewport #mapCanvasSurface > #mapRightControls > #mapToolsToggle{ display:flex!important;align-items:center!important;justify-content:center!important; box-sizing:border-box!important;width:70px!important;min-width:70px!important;max-width:none!important; height:38px!important;min-height:38px!important;max-height:38px!important; margin:0!important;padding:4px 7px!important;border-radius:9px!important; font:bold 12px system-ui!important;white-space:nowrap!important; color:#fff!important;background:#145b83!important;border:1px solid #0c4364!important; box-shadow:0 2px 6px #153f5850!important } #mapTopViewport #mapCanvasSurface > #mapRightControls[data-expanded="true"]{ display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-auto-flow:row!important;grid-auto-rows:auto!important; align-items:center!important;justify-items:center!important;align-content:start!important; box-sizing:border-box!important;width:116px!important;max-width:116px!important; height:auto!important;max-height:calc(100% - 16px)!important; gap:4px!important;margin:0!important;padding:5px!important; overflow-y:auto!important;overscroll-behavior:contain; border:1px solid #79a6bf!important;border-radius:12px!important; background:rgba(244,250,253,.96)!important;box-shadow:0 4px 16px #113e5b66!important } #mapTopViewport #mapCanvasSurface > #mapRightControls[data-expanded="true"] > #mapToolsToggle{ grid-column:1/-1!important;justify-self:stretch!important; width:100%!important;min-width:0!important } #mapTopViewport #mapCanvasSurface > #mapRightControls[data-expanded="true"] > button:not(#mapToolsToggle):not([hidden]){ display:flex!important;align-items:center!important;justify-content:center!important; box-sizing:border-box!important;flex:none!important; width:45px!important;min-width:45px!important;max-width:45px!important; height:43px!important;min-height:43px!important;max-height:43px!important; margin:0!important;padding:2px!important;border-radius:9px!important } #mapTopViewport #mapCanvasSurface > #mapRightControls[data-expanded="true"] > #mapLegendToggle:not([hidden]){ grid-column:1/-1!important;justify-self:stretch!important; width:100%!important;max-width:none!important;min-width:0!important; height:36px!important;min-height:36px!important;max-height:36px!important; font-size:11px!important;white-space:nowrap!important } #mapTopViewport #mapCanvasSurface > #mapHereShortcut{ position:absolute!important;right:8px!important;bottom:8px!important;left:auto!important;top:auto!important; z-index:53!important;display:flex!important;flex-direction:column!important; align-items:center!important;justify-content:center!important;gap:1px!important; box-sizing:border-box!important;width:52px!important;min-width:52px!important; height:52px!important;min-height:52px!important;margin:0!important;padding:3px!important; border:2px solid #2876b2!important;border-radius:50%!important; color:#125b97!important;background:rgba(255,255,255,.97)!important; box-shadow:0 3px 10px #143e5860!important } #mapTopViewport #mapCanvasSurface > #mapHereShortcut span{font-size:25px!important;line-height:1!important} #mapTopViewport #mapCanvasSurface > #mapHereShortcut small{font-size:9px!important;line-height:1!important;font-weight:850!important} #mapTopViewport #mapCanvasSurface .map-directions{display:none!important} #mapTopViewport #mapCanvasSurface.map-tools-open .map-directions{display:block!important} #mapTopViewport.map-search-open #mapCanvasSurface > #mapRightControls, #mapTopViewport.map-search-open #mapCanvasSurface .map-directions{display:none!important} body.map-fullscreen #mapTopViewport #mapCanvasSurface > #mapRightControls{ position:absolute!important;inset:8px 7px auto auto!important; display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important; justify-content:flex-start!important;align-items:flex-end!important; width:auto!important;max-width:120px!important;height:auto!important; max-height:calc(100% - 16px)!important } body.map-fullscreen #mapTopViewport #mapCanvasSurface > #mapRightControls[data-expanded="true"]{ display:grid!important;width:116px!important;max-width:116px!important;height:auto!important; max-height:calc(100% - 16px)!important;grid-template-columns:repeat(2,minmax(0,1fr))!important } #mapTopViewport #mapCanvasSurface > #mapHereShortcut[aria-busy="true"]{ background:#ffce63!important;color:#402400!important } body.map-fullscreen #mapTopViewport.map-search-open #mapCanvasSurface > #mapRightControls{ display:none!important } /* Clear, tappable multi-hazard details; level and symbol stay legible on Android. */ #mapCanvasSurface #mapRiskTapCard[hidden]{display:none!important} #mapTopViewport #mapCanvasSurface #mapRiskTapCard{ position:absolute;z-index:61;left:7px;right:67px;bottom:9px; box-sizing:border-box;max-height:min(62%,390px);overflow-y:auto; padding:10px 10px 9px;border:2px solid #307da9;border-radius:12px; color:#163c57;background:rgba(255,255,255,.98); box-shadow:0 6px 22px #0c304978;overscroll-behavior:contain } #mapRiskTapCard .map-risk-tap-head{ display:flex;align-items:center;justify-content:space-between;gap:8px; margin-bottom:3px;padding-bottom:6px;border-bottom:1px solid #c8dce9 } #mapRiskTapCard .map-risk-tap-head strong{ font-size:15px;font-weight:850;line-height:1.25;color:#12435e } #mapRiskTapCard #mapRiskTapClose{ width:auto!important;min-width:57px;min-height:32px;margin:0;padding:3px 6px; border:1px solid #8baec4;border-radius:7px;background:#edf4f8;color:#234e69; font-size:11px;font-weight:800;white-space:nowrap } #mapRiskTapLocation{display:block;color:#4a677a;font-size:11px;margin-bottom:6px} #mapRiskTapRows{display:grid;gap:7px} #mapRiskTapRows .map-risk-tap-row{ display:grid;grid-template-columns:29px minmax(0,1fr);gap:8px;align-items:start; padding:7px;border:1px solid #c3d9e6;border-radius:9px;background:#f6fafc } #mapRiskTapRows .map-risk-tap-swatch{ display:flex;align-items:center;justify-content:center;width:29px;height:29px; box-sizing:border-box;border:2px solid #fff;border-radius:7px; font-size:15px;line-height:1;box-shadow:0 0 0 1px #829fb3; text-shadow:0 1px 2px #0008 } #mapRiskTapRows .map-risk-tap-swatch.road{ background:repeating-linear-gradient(135deg,#71119d 0 7px,#fff 7px 11px)!important } #mapRiskTapRows .map-risk-tap-detail{min-width:0;overflow-wrap:anywhere} #mapRiskTapRows .map-risk-tap-type{ display:block;font-size:16px;font-weight:900;line-height:1.3;color:#113a55 } #mapRiskTapRows .map-risk-tap-level{ display:inline-block;margin:4px 0 2px;padding:3px 7px; border-radius:6px;border:1px solid #b3cddf;background:#e7f2fc; color:#114b78;font-size:13px;font-weight:850;line-height:1.4 } #mapRiskTapRows .map-risk-tap-description{ display:block;margin:3px 0 0;color:#2a4d63;font-size:13px;line-height:1.55 } #mapRiskTapCard .map-risk-tap-foot{display:grid;gap:4px;margin-top:8px;padding-top:7px;border-top:1px solid #c8dce9} #mapRiskTapCard .map-risk-tap-foot a{ display:inline-block;color:#075b92;font-size:12px;font-weight:800;overflow-wrap:anywhere } #mapRiskTapCard .map-risk-tap-foot small{font-size:10.5px;line-height:1.45;color:#536e7e} #mapRiskTapRows .map-risk-tap-source{ display:inline-block;margin-top:5px;color:#0a5f96;font-size:11px; line-height:1.4;font-weight:800 } #mapRiskTapRows .map-risk-tap-warning{ margin:0;padding:7px;border-radius:7px;border:1px solid #e0b071; background:#fff6e8;color:#795020;font-size:11px;line-height:1.45 } /* Independent, large, high-contrast map search right above GPS. */ #mapTopViewport #mapCanvasSurface > #mapSearchToggle{ position:absolute!important;right:8px!important;bottom:68px!important;left:auto!important;top:auto!important; z-index:54!important;display:flex!important;flex-direction:column!important; align-items:center!important;justify-content:center!important;gap:0!important; box-sizing:border-box!important;width:52px!important;min-width:52px!important; height:52px!important;min-height:52px!important;margin:0!important;padding:2px!important; border:2px solid #155c7d!important;border-radius:50%!important; background:#fffffffa!important;color:#164d75!important;box-shadow:0 3px 10px #143e5860!important } #mapTopViewport #mapCanvasSurface > #mapSearchToggle svg{width:27px!important;height:27px!important;flex:none!important} #mapTopViewport #mapCanvasSurface > #mapSearchToggle small{font-size:10px!important;font-weight:900!important;line-height:1!important} #mapTopViewport #mapCanvasSurface > #mapSearchToggle[aria-expanded="true"]{ background:#d7f1ff!important;border-color:#0d78ae!important;color:#095680!important } #mapTopViewport #mapCanvasSurface > #mapSearchToggle:focus-visible{outline:3px solid #fcce57!important;outline-offset:1px!important} /* Compact, non-map status showing the actual spaced grid interval. */ #mapTopViewport > #mapGridStatus{ display:flex;align-items:center;justify-content:center; box-sizing:border-box;min-height:25px;flex:none; margin:0;padding:3px 8px;border-top:1px solid #bdd3e1;border-bottom:1px solid #c7dce9; background:#eef8fc;color:#124f72;font-size:12px;font-weight:850;line-height:1.3;text-align:center } body.map-fullscreen #mapTopViewport > #mapGridStatus{order:2;min-height:23px;font-size:11px} /* Variable radius is selected inside the alert details; no false default-only label. */ #mapLiveAlertsDialog .live-alert-radius{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:8px 10px;margin:8px 0;border:1px solid #a4bdce;border-radius:9px; background:#eff7fc;font-size:13px;font-weight:800;color:#164361 } #mapLiveAlertsDialog #mapLiveAlertsRadius{ box-sizing:border-box;min-width:126px;width:auto;max-width:56%;min-height:40px; padding:5px 8px;margin:0;border:1px solid #527f9c;border-radius:7px; background:#fff;color:#154768;font:750 14px system-ui } /* Permanent, compact map search in the top-left corner of the map canvas. */ #mapTopViewport #mapCanvasSurface > #mapSearchPanel{ position:absolute!important;top:7px!important;left:7px!important;right:auto!important; z-index:55!important;width:min(300px,calc(100% - 90px))!important;max-width:none!important; box-sizing:border-box!important;max-height:calc(100% - 14px)!important; overflow-y:auto;overscroll-behavior:contain;padding:0!important; background:transparent;border:0;border-radius:12px } #mapTopViewport #mapCanvasSurface > #mapSearchPanel[data-active="false"] > :not(.map-tools){display:none!important} #mapTopViewport #mapCanvasSurface > #mapSearchPanel[data-active="true"]{ width:min(360px,calc(100% - 72px))!important;padding:4px!important; background:rgba(248,252,255,.98);border:1px solid #7dacc8; box-shadow:0 4px 16px #0b344d62 } #mapTopViewport #mapCanvasSurface > #mapSearchPanel[data-active="true"] #mapSearchClose{ position:relative;display:inline-flex;align-items:center;justify-content:center; width:32px;height:29px;min-height:29px;margin:0 0 0 auto;padding:0; border:1px solid #92b4c9;border-radius:7px;background:#eaf5fb;color:#215873;font-size:18px } #mapTopViewport #mapCanvasSurface > #mapSearchPanel #mapPlaceForm{ min-height:46px;height:46px;border-color:#176c9c;border-width:2.5px; background:#fff;box-shadow:0 2px 9px #0a355870 } #mapTopViewport #mapCanvasSurface > #mapSearchPanel #mapPlaceForm input{font-size:14px;padding-left:10px} #mapTopViewport #mapCanvasSurface > #mapSearchPanel #mapPlaceForm button{min-width:41px} /* Split metropolitan offline map packs: Android-friendly selection and progress. */ #mapStorageStrip{display:flex;flex-wrap:wrap;align-items:center;gap:5px} #mapStorageStrip #metroPackOpen{ display:flex;align-items:center;justify-content:center;flex:1 1 165px; width:auto;min-width:0;min-height:37px;margin:0;padding:5px 7px; border:1.5px solid #177596;border-radius:8px;background:#e3f5f9; color:#15526d;font-size:12px;font-weight:850;line-height:1.2;text-align:center } #mapStorageStrip #mapDownloadInfo{flex:1 1 152px;min-width:0} #metroPackDialog{ box-sizing:border-box;width:min(620px,calc(100vw - 14px)); max-height:calc(100dvh - 18px);margin:auto;padding:11px; border:2px solid #22668a;border-radius:14px; background:#fff;color:#1c3e53;overflow-y:auto;overscroll-behavior:contain } #metroPackDialog::backdrop{background:rgba(8,33,48,.7)} #metroPackDialog .map-legend-heading{position:sticky;top:-11px;z-index:3; display:flex;justify-content:space-between;align-items:center; margin:-11px -11px 8px;padding:10px;background:#eef8fe;border-bottom:1px solid #b7d2e0} #metroPackDialog h2{font-size:16px;margin:0;line-height:1.35} #metroPackDialog .map-legend-heading button{width:auto;min-width:62px;min-height:36px;margin:0;padding:4px 8px;font-size:12px} #metroPackDialog .metro-pack-lead{font-size:12px;line-height:1.45;margin:5px 0} #metroPackDialog .metro-pack-wifi{margin:6px 0 8px;padding:9px; border:2px solid #de9226;border-radius:9px;background:#fff0c7;color:#774609; font-size:12px;line-height:1.4} #metroPackDialog .metro-pack-wifi strong{font-size:15px;color:#8a330a} #metroPackChoices{display:grid;grid-template-columns:1fr;gap:4px;max-height:34dvh;overflow-y:auto; border:1px solid #bfd5e0;border-radius:9px;padding:5px;background:#f8fbfd} #metroPackChoices .metro-pack-choice{display:grid;grid-template-columns:22px minmax(0,1fr) auto; align-items:center;column-gap:6px;margin:0;padding:5px 6px;border-radius:6px; background:#fff;color:#204e68;font-size:12px;font-weight:750;line-height:1.35;cursor:pointer} #metroPackChoices .metro-pack-choice input{width:19px;height:19px;margin:0;accent-color:#126c98} #metroPackChoices .metro-pack-choice small{color:#596e7c;font-size:10px;font-weight:600;white-space:nowrap} #metroPackDialog .metro-pack-estimate{margin:9px 0 4px;padding:8px; background:#eaf5fc;border:1px solid #75b3d3;border-radius:8px; color:#0d4e73;font-size:13px;font-weight:850;line-height:1.5} #metroPackDialog #metroPackStorage{margin:3px 0;font-size:10px;color:#4f6573} #metroPackDialog .metro-pack-facility-label{display:flex;align-items:center;gap:6px; margin:7px 0;font-size:12px;font-weight:700;color:#284b61} #metroPackDialog .metro-pack-facility-label input{width:18px;height:18px;margin:0;accent-color:#0879a3} #metroPackDialog #metroPackProgress{display:block;width:100%;height:16px;margin:8px 0 4px;accent-color:#1482aa} #metroPackDialog #metroPackStatus{min-height:38px;margin:3px 0;padding:6px; background:#f5f9fd;border-radius:6px;font-size:12px;line-height:1.45} #metroPackDialog .metro-pack-actions{display:grid;grid-template-columns:1fr 100px;gap:7px} #metroPackDialog .metro-pack-actions button{min-height:45px;margin:0;padding:5px 6px;font-size:13px} #metroPackDialog .note{margin:8px 0 0;font-size:11px;line-height:1.45} @media(max-width:390px){#metroPackChoices .metro-pack-choice{grid-template-columns:22px minmax(0,1fr)} #metroPackChoices .metro-pack-choice small{grid-column:2;white-space:normal}} /* Custom center/radius picker: clear, compact and touch-friendly. */ #metroPackDialog .metro-custom-area{margin:6px 0 9px;padding:8px; border:1.5px solid #63a4bb;border-radius:9px;background:#f1f9fd} #metroPackDialog .metro-custom-title{display:flex;align-items:center;gap:6px; margin:0;font-size:13px;font-weight:850;color:#174e71} #metroPackDialog .metro-custom-title input{flex:none;width:20px;height:20px;margin:0;accent-color:#087ba5} #metroPackDialog .metro-custom-body{margin-top:7px} #metroPackDialog .metro-custom-body[hidden]{display:none} #metroPackDialog .metro-custom-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(86px,0.8fr);gap:7px} #metroPackDialog .metro-custom-row label{display:grid;gap:3px;min-width:0; font-size:11px;font-weight:750;color:#426577} #metroPackDialog .metro-custom-row input, #metroPackDialog .metro-custom-row select, #metroPackDialog .metro-custom-search input{box-sizing:border-box;width:100%;min-height:38px; margin:0;padding:5px 8px;border:1px solid #84b1c6;border-radius:7px;background:#fff; color:#143f59;font-size:13px} #metroPackDialog .metro-custom-search{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:5px} #metroPackDialog #metroCustomGpsWrap,#metroPackDialog #metroCustomSearchWrap{margin-top:7px} #metroPackDialog #metroCustomGps,#metroPackDialog #metroCustomFind, #metroPackDialog #metroOnlyCustom{min-height:37px;margin:0;padding:5px 8px; font-size:12px;border:1px solid #5f9dbd;border-radius:7px;background:#fff;color:#12577d} #metroPackDialog .metro-custom-feedback{font-size:11px;line-height:1.45;margin:7px 0 4px;color:#24556f} #metroPackDialog .metro-custom-directions{padding:7px;margin:5px 0 8px; border:1px solid #a4cbd9;border-radius:7px;background:#fff;font-size:11px;line-height:1.55} #metroPackDialog .metro-custom-directions[hidden]{display:none} #metroPackDialog .metro-custom-directions strong{display:block;font-size:12px;margin-bottom:3px} #metroPackDialog .metro-direction-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 9px} #metroPackDialog .metro-custom-results{max-height:180px;overflow:auto;margin:5px 0} #metroPackDialog .metro-custom-results .place-search-result{width:100%;margin:1px 0;min-height:41px;text-align:left} #metroPackDialog .metro-only-button{font-weight:750} #metroPackDialog .metro-preset-heading{font-size:12px;font-weight:850;margin:8px 0 5px;color:#1d5877} #metroPackDialog #metroPackChoices{max-height:26dvh} /* Search is permanently available at the map's upper left. * Keep the legacy focus button in DOM for compatibility, but not on screen. */ #mapTopViewport #mapCanvasSurface > #mapSearchToggle{display:none!important} /* GPS stays independent of the foldable tools, at the right midpoint. */ #mapTopViewport #mapCanvasSurface > #mapHereShortcut{ position:absolute!important;top:50%!important;bottom:auto!important; right:8px!important;left:auto!important;transform:translateY(-50%)!important; z-index:54!important;display:flex!important;flex-direction:column!important; align-items:center!important;justify-content:center!important;gap:1px!important; box-sizing:border-box!important;width:56px!important;min-width:56px!important; height:56px!important;min-height:56px!important;margin:0!important;padding:5px 3px!important; border:2px solid #fff!important;border-radius:50%!important; background:linear-gradient(145deg,#1288ec 0%,#0756ae 100%)!important; color:#fff!important; box-shadow:0 0 0 2px #0861a8,0 4px 13px rgba(4,40,83,.58)!important; cursor:pointer;touch-action:manipulation } #mapTopViewport #mapCanvasSurface > #mapHereShortcut svg{ display:block!important;flex:none!important;width:29px!important;height:29px!important; stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round } #mapTopViewport #mapCanvasSurface > #mapHereShortcut small{ display:block!important;color:inherit!important;font-size:10px!important; font-weight:900!important;line-height:1.1!important;letter-spacing:.01em } #mapTopViewport #mapCanvasSurface > #mapHereShortcut:focus-visible{ outline:3px solid #fbc32f!important;outline-offset:4px!important } #mapTopViewport #mapCanvasSurface > #mapHereShortcut:active{ filter:brightness(1.13) } /* 2026-11-15: Prevent the expanded map actions from covering the fixed search. */ #mapTopViewport #mapCanvasSurface.map-tools-open > #mapSearchPanel, #mapTopViewport #mapCanvasSurface.map-tools-open > #mapSearchPanel[data-active="true"]{ width:min(300px,calc(100% - 141px))!important; max-width:calc(100% - 141px)!important } /* The GPS target is thumb-sized but visually secondary to the map and route. */ #mapTopViewport #mapCanvasSurface > #mapHereShortcut{ width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important; padding:3px 2px!important;gap:0!important;border:1.5px solid #6d9fbc!important; background:rgba(237,247,252,.95)!important;color:#155e88!important; box-shadow:0 1px 5px rgba(12,61,94,.24)!important } #mapTopViewport #mapCanvasSurface > #mapHereShortcut svg{width:22px!important;height:22px!important;stroke-width:2.3!important} #mapTopViewport #mapCanvasSurface > #mapHereShortcut small{ font-size:8.5px!important;font-weight:750!important;line-height:1!important } /* During menu expansion, park GPS below the menu rather than covering a menu tile. */ #mapTopViewport #mapCanvasSurface.map-tools-open > #mapHereShortcut{ top:auto!important;bottom:9px!important;transform:none!important } /* Translucent idle map chrome: let the map show through, keep labels fully legible. */ #mapTopViewport #mapCanvasSurface > #mapSearchPanel[data-active="false"] #mapPlaceForm{ background:rgba(255,255,255,.88)!important; box-shadow:0 2px 6px rgba(10,53,88,.25)!important } #mapTopViewport #mapCanvasSurface > #mapSearchPanel[data-active="false"] #mapPlaceForm button{ background:rgba(242,250,255,.87)!important } #mapTopViewport #mapCanvasSurface > #mapRightControls > #mapToolsToggle{ background:rgba(20,91,131,.88)!important; box-shadow:0 2px 5px rgba(21,63,88,.28)!important } #mapTopViewport #mapCanvasSurface > #mapHereShortcut:not([aria-busy="true"]){ background:rgba(237,247,252,.86)!important; box-shadow:0 1px 4px rgba(12,61,94,.19)!important } #mapCanvasSurface #mapRoadNowOpen{ background:rgba(255,243,204,.88)!important; box-shadow:0 2px 6px rgba(25,63,102,.23)!important } #floatingScrollNav:not([hidden]){background:rgba(18,59,93,.66)!important} #floatingScrollNav button{opacity:.91} #floatingScrollNav button:focus-visible{opacity:1} /* Expanded search results and live warnings stay easy to read. */ #mapTopViewport #mapCanvasSurface > #mapSearchPanel[data-active="true"] #mapPlaceForm{ background:rgba(255,255,255,.97)!important } /* Google Maps-inspired search results: upper map stays visible, lower half lists places. */ #mapSearchResultsSheet[hidden]{display:none!important} #mapSearchResultsSheet{ position:fixed;z-index:860;inset:auto 0 0 0; box-sizing:border-box;display:flex;flex-direction:column; width:100%;height:min(52dvh,510px);max-height:calc(100dvh - 155px); padding:5px 0 max(8px,env(safe-area-inset-bottom)); border:1px solid #a9c5d7;border-radius:18px 18px 0 0; background:rgba(250,253,255,.985);color:#183d55; box-shadow:0 -5px 22px rgba(13,45,66,.26); font:14px/1.45 system-ui,-apple-system,"Noto Sans JP",sans-serif; overscroll-behavior:contain } #mapSearchResultsSheet .map-search-sheet-handle{ flex:none;width:43px;height:5px;margin:1px auto 8px;border-radius:10px;background:#a4b6c2 } #mapSearchResultsSheet .map-search-sheet-heading{ flex:none;display:flex;align-items:center;justify-content:space-between; gap:10px;padding:1px 13px 7px;border-bottom:1px solid #dbe6ee } #mapSearchResultsSheet .map-search-sheet-heading>div{display:grid;min-width:0;gap:1px} #mapSearchResultsSheet #mapSearchSheetTitle{ font-size:17px;font-weight:850;line-height:1.25;white-space:nowrap; overflow:hidden;text-overflow:ellipsis } #mapSearchResultsSheet #mapSearchSheetCount{font-size:11px;color:#526f80} #mapSearchResultsSheet #mapSearchSheetClose{ flex:none;width:36px;height:36px;min-height:36px;margin:0;padding:0; border:0;border-radius:50%;background:#edf3f7;color:#254b63;font-size:21px } #mapSearchResultsSheet #mapSearchSheetStatus{ flex:none;max-height:51px;overflow-y:auto;margin:0;padding:5px 13px; color:#496c80;background:#f5f9fc;font-size:11px;line-height:1.35 } #mapSearchResultsSheet #mapSearchSheetStatus:empty{display:none} #mapSearchResultsSheet #mapSearchSheetStatus[data-tone="error"]{color:#a33028;background:#fff0ea} #mapSearchResultsSheet #mapSearchSheetList{ flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain; scrollbar-width:thin;background:#fff } #mapSearchResultsSheet .map-search-sheet-card{ display:block;padding:9px 12px 10px;margin:0;border-bottom:1px solid #e3eaf0;background:#fff } #mapSearchResultsSheet .map-search-sheet-card.is-selected{background:#edf8ff;box-shadow:inset 4px 0 #267bb5} #mapSearchResultsSheet .map-search-sheet-main{ display:grid;width:100%;min-height:0;margin:0;padding:0;text-align:left;gap:3px; border:0;border-radius:0;background:transparent;color:#193d54 } #mapSearchResultsSheet .map-search-sheet-main strong{ font-size:15px;font-weight:850;line-height:1.36;overflow-wrap:anywhere } #mapSearchResultsSheet .map-search-sheet-meta{font-size:11px;font-weight:750;color:#306789} #mapSearchResultsSheet .map-search-sheet-address, #mapSearchResultsSheet .map-search-sheet-description{ display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical; font-size:12px;color:#526a78;line-height:1.4;overflow-wrap:anywhere } #mapSearchResultsSheet .map-search-sheet-provider{ font-size:10px;color:#697c87;overflow-wrap:anywhere } #mapSearchResultsSheet .map-search-sheet-actions{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:7px } #mapSearchResultsSheet .map-search-sheet-actions button{ display:flex;align-items:center;justify-content:center;box-sizing:border-box; min-width:0;min-height:38px;margin:0;padding:5px 3px; border:1px solid #a7d7e6;border-radius:20px; background:#dff6fb;color:#145471;font-size:11.5px;font-weight:800;white-space:nowrap } #mapSearchResultsSheet .map-search-sheet-actions button.is-saved{ background:#fff0cd;border-color:#d9ac54;color:#795015 } #mapSearchResultsSheet .map-search-sheet-main:focus-visible, #mapSearchResultsSheet button:focus-visible{outline:3px solid #edb63c;outline-offset:2px} #mapSearchResultsSheet #mapSearchSheetMore{ flex:none;min-height:38px;padding:6px 10px;margin:0; border:0;border-top:1px solid #d7e8f2;background:#eef7fd; color:#235979;font-size:12px;font-weight:800 } @media(min-width:700px){ #mapSearchResultsSheet{ inset:auto auto 12px max(12px,calc((100vw - 1080px)/2)); width:min(465px,calc(100vw - 28px));height:min(58dvh,520px); border-radius:17px } } /* Map-style GPS and navigation shortcuts stay independently accessible at the lower right in both regular and fullscreen maps. */ #mapTopViewport #mapCanvasSurface > :is(#mapHereShortcut,#walkNavToggle){ position:absolute!important;top:auto!important;left:auto!important; right:max(13px,env(safe-area-inset-right))!important; z-index:55!important;display:flex!important;flex-direction:column!important; align-items:center!important;justify-content:center!important;gap:0!important; box-sizing:border-box!important;width:54px!important;min-width:54px!important; max-width:54px!important;height:54px!important;min-height:54px!important; max-height:54px!important;margin:0!important;padding:0!important; border-radius:50%!important;transform:none!important; box-shadow:0 2px 9px rgba(22,53,75,.28)!important; touch-action:manipulation;cursor:pointer } #mapTopViewport #mapCanvasSurface > #mapHereShortcut, #mapTopViewport #mapCanvasSurface.map-tools-open > #mapHereShortcut{ top:auto!important;bottom:91px!important;transform:none!important; border:1px solid rgba(199,213,225,.94)!important; background:rgba(255,255,255,.93)!important;color:#2478ea!important } #mapTopViewport #mapCanvasSurface > #mapHereShortcut svg{ display:block!important;flex:none!important; width:30px!important;height:30px!important;stroke:none!important;fill:none!important } #mapTopViewport #mapCanvasSurface > #mapHereShortcut[aria-busy="true"]{ background:rgba(255,222,136,.97)!important;border-color:#d7a443!important } #mapTopViewport #mapCanvasSurface > #walkNavToggle{ bottom:15px!important;border:1px solid rgba(0,110,123,.72)!important; background:rgba(0,121,133,.94)!important;color:#fff!important } #mapTopViewport #mapCanvasSurface > #walkNavToggle svg{ display:block!important;flex:none!important;width:29px!important;height:29px!important } #mapTopViewport #mapCanvasSurface > #walkNavToggle[aria-pressed="true"]{ background:rgba(187,69,39,.96)!important;border-color:#a13d23!important } #mapTopViewport #mapCanvasSurface > :is(#mapHereShortcut,#walkNavToggle) small{ display:none!important } #mapTopViewport #mapCanvasSurface > :is(#mapHereShortcut,#walkNavToggle):focus-visible{ outline:3px solid #f4b72d!important;outline-offset:3px!important } /* Reserve room for the fixed shortcuts even when the actions menu is open. */ #mapTopViewport #mapCanvasSurface > #mapRightControls[data-expanded="true"], body.map-fullscreen #mapTopViewport #mapCanvasSurface > #mapRightControls[data-expanded="true"]{ max-height:calc(100% - 165px)!important } #mapTopViewport #mapCanvasSurface > #mapHereShortcut:not([aria-busy="true"]){background:rgba(255,255,255,.93)!important} /* Location availability: match the familiar gray, slashed Google Maps-style icon when GPS is off. */ #mapTopViewport #mapCanvasSurface > #mapHereShortcut .map-gps-off-icon{display:none!important} #mapTopViewport #mapCanvasSurface > #mapHereShortcut[data-gps-state="off"]{ color:#858b91!important;background:rgba(248,249,250,.92)!important; border-color:rgba(207,213,218,.95)!important;box-shadow:0 2px 7px rgba(34,48,58,.20)!important } #mapTopViewport #mapCanvasSurface > #mapHereShortcut[data-gps-state="off"]:not([aria-busy="true"]){ background:rgba(248,249,250,.92)!important } #mapTopViewport #mapCanvasSurface > #mapHereShortcut[data-gps-state="off"] .map-gps-on-icon{display:none!important} #mapTopViewport #mapCanvasSurface > #mapHereShortcut[data-gps-state="off"] .map-gps-off-icon{display:block!important} /* Local saved-pin styling and editable category list; all controls remain touch friendly. */ #mapSavedPinEditor{ box-sizing:border-box;width:min(94vw,430px);max-width:430px; max-height:min(88dvh,780px);overflow-y:auto;overscroll-behavior:contain; padding:16px;border:1.5px solid #8fb6c9;border-radius:16px; background:#f9fcfe;color:#173c56;box-shadow:0 8px 30px rgba(9,35,54,.35) } #mapSavedPinEditor::backdrop{background:rgba(9,28,46,.66)} #mapSavedPinEditor *{box-sizing:border-box} #mapSavedPinEditor h2{margin:0 0 12px;font-size:19px;line-height:1.3;color:#114b73} #mapSavedPinEditor label{display:block;font-size:13px;font-weight:750;margin-bottom:9px} #mapSavedPinEditor :is(input[type="text"],input:not([type]),textarea,select){ display:block;width:100%;min-height:41px;padding:8px;margin:4px 0 0; font-size:15px;border:1px solid #9bbacb;border-radius:8px; background:#fff;color:#183c55 } #mapSavedPinEditor textarea{min-height:56px;resize:vertical} #mapSavedPinEditor fieldset{ margin:9px 0;padding:9px 7px 7px;border:1px solid #b9ceda;border-radius:10px } #mapSavedPinEditor legend{font-size:13px;font-weight:850;padding:0 4px} #mapSavedPinEditor .map-pin-color-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px} #mapSavedPinEditor .map-pin-shape-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px} #mapSavedPinEditor :is(.map-pin-color-choice,.map-pin-shape-choice){ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:2px;position:relative;margin:0;padding:5px 2px 4px;min-height:51px; border:1.5px solid #d4e1ea;border-radius:9px;background:#fff;cursor:pointer } #mapSavedPinEditor :is(.map-pin-color-choice,.map-pin-shape-choice):has(input:checked){ border-color:#1470b0;background:#e7f5ff;box-shadow:inset 0 0 0 1px #1470b0 } #mapSavedPinEditor :is(.map-pin-color-choice,.map-pin-shape-choice) input{ position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:.01;cursor:pointer } #mapSavedPinEditor .map-pin-color-dot{ width:23px;height:23px;border:2px solid #fff;border-radius:50%; box-shadow:0 0 0 1px rgba(33,61,79,.25) } #mapSavedPinEditor .map-pin-shape-choice > span{font-size:23px;line-height:1.1;color:#285e82} #mapSavedPinEditor :is(.map-pin-color-choice,.map-pin-shape-choice) small{font-size:10px;font-weight:800} #mapSavedPinCategoriesEditor{ margin:8px 0 11px;padding:7px 9px;border:1px solid #c4d7e4; border-radius:9px;background:#f0f7fc } #mapSavedPinCategoriesEditor summary{cursor:pointer;font-size:13px;font-weight:850;color:#176b9b} #mapSavedPinCategoriesEditor[open] summary{margin-bottom:8px} #mapSavedPinCategoriesEditor label{margin:0 0 6px} #mapSavedPinEditor .map-pin-category-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px} #mapSavedPinEditor button{min-height:40px;padding:7px 9px;border:1px solid #93b5c9;border-radius:8px;font-size:13px;font-weight:800} #mapSavedPinCategoriesEditor button{background:#fff;color:#205575;padding:5px 3px} #mapSavedPinCategoryStatus{display:block;min-height:15px;margin-top:6px;color:#255c7e;font-size:11px} #mapSavedPinEditor .map-pin-style-preview{ display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid #cadfe9; border-radius:9px;background:#edf6fb;font-size:12px } #mapSavedPinEditor .map-pin-preview-glyph{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:26px;height:30px;font-size:28px;line-height:1} #mapSavedPinEditor .map-pin-preview-glyph[data-shape="pin"]{ width:24px;min-width:24px;height:24px;border-radius:50% 50% 50% 0; transform:rotate(-45deg);position:relative } #mapSavedPinEditor .map-pin-preview-glyph[data-shape="pin"]::after{ content:"";position:absolute;left:8px;top:8px;width:8px;height:8px; background:#fff;border-radius:50% } #mapSavedPinEditor .map-pin-editor-status{min-height:16px;margin:7px 0;color:#b33428;font-size:12px} #mapSavedPinEditor .map-pin-editor-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px} #mapSavedPinEditor #mapSavedPinSubmit{background:#0877ad;color:#fff;border-color:#086794} #mapSavedPinEditor #mapSavedPinCancel{background:#e5eef3;color:#21475e} #mapSavedPinEditor #mapSavedPinDelete{margin-right:auto;background:#fff2ed;color:#a02c20;border-color:#dfb7a7} #mapSavedPinEditor button[hidden]{display:none!important} #mapSavedPinEditor :is(button,input,textarea,select,summary):focus-visible{ outline:3px solid #e9ad35;outline-offset:2px } #mapPinActions > button:not([hidden]){min-height:42px} @media(max-width:360px){ #mapSavedPinEditor{padding:11px} #mapSavedPinEditor .map-pin-category-actions button{font-size:11px} #mapSavedPinEditor .map-pin-color-options{gap:3px} }