/* 9.12.1: predictable phone navigation, independent of the graph drawer. */
#phoneControls,.phone-basic-layers,.phone-window-settings,.phone-station-modes{display:none}
body.v9-map-first.official-data-only #weatherGraphSystem[data-dock-mode]{height:var(--graph-dock-height,142px)!important;min-height:0!important;max-height:none!important}
.graph-time-controls{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding:8px 10px;border-bottom:1px solid #414950;background:#20262b}
.graph-time-controls label{display:flex;align-items:center;gap:6px;font-size:12px;color:#edf1f4;flex:1;min-width:0}
.graph-time-controls select{min-width:0;width:100%;min-height:36px;border:1px solid #4c565f;border-radius:7px;background:#2b3238;color:#fff;font:inherit;padding:6px}
.graph-period-label{padding:4px 10px;font-size:11px;color:#cbd4db;min-height:20px;box-sizing:border-box}
body.v9-map-first :is(.forecast-view,.forecast-card){background:#242c32!important;color:#e8eef2!important;border-color:#48545e!important}
body.v9-map-first :is(.forecast-card header b,.forecast-card header span,.forecast-trust,.forecast-note,.forecast-empty,.forecast-ranges button,.forecast-links button){color:#dbe4ea!important}
body.v9-map-first .forecast-card :is(.forecast-axis,.forecast-speed,.forecast-date){fill:#c7d3dc!important}
body.v9-map-first .forecast-card .forecast-grid line{stroke:#424f58!important}
body.v9-map-first .forecast-card .forecast-cursor{stroke:#fff!important}
body.v9-map-first .forecast-card .forecast-arrow{color:#e4edf2!important}
body.v9-map-first .forecast-toolbar{background:#242c32!important;gap:10px;padding:8px 0}
body.v9-map-first #weatherGraphSystem[data-dock-mode="full"] #dockLead{display:none!important}
@media(max-width:899px){
 body.v9-map-first #phoneControls{position:fixed;z-index:120;top:calc(8px + env(safe-area-inset-top));left:8px;right:8px;display:grid;grid-template-columns:minmax(0,1.2fr) 1fr 1fr;gap:6px;pointer-events:auto}
 #phoneControls button{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;min-height:48px;padding:5px 8px;border:1px solid #515c65;border-radius:10px;background:#20262bf5;color:#f7f9fa;font:600 13px system-ui!important;box-shadow:0 3px 12px #0003}
 #phoneControls small{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:10px;color:#c8d3dc;font-weight:400}
 #phoneControls button[aria-expanded=true]{background:#3a4752;border-color:#b1c2ce}
 body.v9-map-first .layer-rail,body.v9-map-first:has(.weather-graph-system[data-dock-mode]) .layer-rail{display:none!important}
 body.v9-map-first .topbar{display:none!important}
 body.v9-map-first #weatherGraphSystem[data-dock-mode]{bottom:calc(var(--graph-dock-bottom,8px) + var(--atlas-visual-bottom,0px))!important}
 
 body.v9-map-first :is(#informationLayers,#appearancePanel,#stationBrowser,#harbourBrowser,#inspectSheet.station-sheet,#officialPrecipViewer){position:fixed!important;z-index:110!important;left:8px!important;right:8px!important;top:calc(66px + env(safe-area-inset-top))!important;bottom:calc(8px + env(safe-area-inset-bottom) + var(--atlas-visual-bottom,0px))!important;transform:none!important;width:auto!important;max-width:none!important;height:auto!important;max-height:none!important;margin:0!important;border:1px solid #505b64!important;border-radius:14px!important;background:#20262b!important;box-sizing:border-box!important}
 body.v9-map-first :is(#informationLayers,#appearancePanel,#stationBrowser,#harbourBrowser){overflow:auto!important;overscroll-behavior:contain!important;padding:12px!important;touch-action:pan-y}
 body.v9-map-first :is(#informationLayers,#appearancePanel,#stationBrowser,#harbourBrowser)>header{position:sticky;top:-12px;z-index:5;background:#20262b;padding:8px 0 12px;margin-bottom:8px;border-bottom:1px solid #414950}
 body.v9-map-first :is(#informationLayers,#appearancePanel,#stationBrowser,#harbourBrowser)>header button{min-width:44px;min-height:44px}
 body.v9-map-first #minAppearance{display:none!important}
 body.v9-map-first :is(#appearancePanel,#stationBrowser,#harbourBrowser,#inspectSheet) :is(.panel-grip,.panel-resizer,.panel-resize-e){display:none!important}
 body.v9-map-first #appearancePanel.minimized>:not(header){display:revert!important}
 body.v9-map-first #inspectSheet.station-sheet{padding:8px!important;overflow:hidden!important}
 body.v9-map-first #inspectSheet.station-sheet .sheet-close{position:absolute!important;right:10px!important;top:10px!important;z-index:12!important;width:44px!important;height:44px!important;background:#2b3238!important}
 body.v9-map-first #inspectSheet.station-sheet #inspectContent{padding:4px!important;overflow:auto!important}
 body.v9-map-first #inspectSheet.station-sheet .forecast-scroll{max-height:none!important;overflow:visible!important}
 body.v9-map-first #inspectSheet.station-sheet .inspect-head{padding-right:48px!important}
 body.v9-map-first #inspectSheet.station-sheet .station-tabs{position:sticky;top:0;z-index:4;background:#20262b!important;display:flex!important;flex-wrap:wrap!important;gap:6px!important;padding:8px 0!important;margin:8px 0!important}
 body.v9-map-first #inspectSheet.station-sheet .station-tabs button{flex:1 1 calc(50% - 6px);min-height:44px!important;padding:8px!important}
 body.v9-map-first #inspectSheet.station-sheet .station-vi-links>button[data-station-tab=forecast]{min-height:44px;border:1px solid #a9bdcc;background:#394955;color:#fff;border-radius:8px}
 .phone-basic-layers{display:block;margin:12px 0}.phone-layer-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 #informationLayers .phone-basic-layers button{min-height:44px;width:100%;border:1px solid #505d68;border-radius:8px;background:#2c343b;color:#fff;font:600 13px system-ui}
 #informationLayers .phone-basic-layers button[aria-pressed=true]{background:#3b4a55;border-color:#b1c2ce}
 #phoneOverlayToggle{margin-top:8px}
 .phone-window-settings{display:block;border-bottom:1px solid #414950;padding-bottom:10px;margin-bottom:12px}
 .phone-window-settings summary{min-height:44px;display:flex;align-items:center;font-size:14px;cursor:pointer}
 .phone-window-settings summary:after{content:'⌄';margin-left:auto}
 .phone-window-settings label{display:flex;align-items:center;gap:10px;min-height:46px;font-size:13px}
 .phone-window-settings input{width:20px;height:20px;accent-color:#abc0ce}
 .phone-window-settings button{min-height:44px;width:100%;border:1px solid #515c65;border-radius:8px;background:#2b3238;color:#fff}
 .phone-station-modes{display:block;margin:10px 0 16px}.phone-station-modes label{display:flex;align-items:center;gap:12px;font-size:13px}.phone-station-modes select{flex:1;min-height:44px;background:#2b3238;color:#fff;border:1px solid #515c65;border-radius:8px;padding:8px;font-size:14px}
 body.v9-map-first .regional-graph-settings[open]{max-height:200px;overflow:auto;overscroll-behavior:contain}
 .graph-time-controls{gap:8px;padding:6px 8px}.graph-time-controls label{font-size:0}.graph-time-controls select{font-size:12px;min-height:40px}
 body.v9-map-first .regional-graph-settings>summary{min-height:36px;box-sizing:border-box;display:flex;align-items:center;padding:8px;font-size:12px}
 body.v9-map-first #weatherGraphSystem .graph-track-canvas{min-height:130px!important}
 body.v9-map-first #weatherGraphSystem .graph-track-head{display:flex!important;padding:6px 8px!important;gap:5px!important;flex-wrap:nowrap!important;min-height:0!important;height:auto!important;align-items:center!important}
 body.v9-map-first #weatherGraphSystem .graph-track:not(.graph-region-track) .graph-track-title{display:none!important}
 body.v9-map-first #weatherGraphSystem .graph-station-chip{min-width:0!important;max-width:100%;display:grid!important;grid-template-columns:minmax(0,1fr) 28px;gap:3px;padding:4px 6px}
 body.v9-map-first #weatherGraphSystem .graph-station-chip>i{display:none}
 body.v9-map-first #weatherGraphSystem .graph-station-chip>select{grid-column:1/-1;min-height:32px!important;margin:0!important}
 body.v9-map-first #weatherGraphSystem .graph-track-chips{flex:1;min-width:0;max-height:110px;overflow:auto}
 body.v9-map-first #weatherGraphSystem .graph-station-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 body.v9-map-first #surfaceFrameTrust{top:72px!important;max-width:calc(100vw - 84px)!important}
 body.v9-map-first #weatherGraphSystem .timeline-head{padding-bottom:8px!important}
 body.v9-map-first #weatherGraphSystem #timeDock{flex-basis:118px!important;height:118px!important;min-height:118px!important}
 body.v9-map-first #weatherGraphSystem .timeline-head :is(button,select){min-height:36px!important}
 body.v9-map-first #weatherGraphSystem #graphDockHandle{flex-basis:28px!important;height:28px!important;min-height:28px!important}
 body.v9-map-first .official-overlay-status{top:72px!important;max-width:calc(100vw - 84px)!important;font-size:10px!important}
 body.v9-map-first .maplibregl-ctrl-top-right{top:72px!important}
 body.v9-map-first #officialPrecipViewer{max-height:calc(100dvh - 80px)!important}
 #phoneControls button:focus-visible,.graph-time-controls select:focus-visible{outline:2px solid #fff;outline-offset:2px}
}

/* 9.12.2: the familiar controls stay together in the timeline drawer. */
.phone-basic-layers{display:block;margin:10px 0}.phone-layer-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#informationLayers .phone-basic-layers button{min-height:40px;width:100%;border:1px solid #505d68;border-radius:7px;background:#2c343b;color:#fff;font:500 12px system-ui}
body.v9-map-first #weatherGraphSystem #mapLayoutBar{display:flex!important;flex-wrap:nowrap;gap:5px;padding:6px;min-height:48px;overflow:visible;order:0}
body.v9-map-first #phoneControls{position:static!important;display:contents!important}
body.v9-map-first #phoneControls button{display:block;min-height:36px;padding:6px;box-shadow:none;border-radius:6px;font:500 11px system-ui!important}
body.v9-map-first #phoneControls #phoneStations{display:none!important}
body.v9-map-first #mapLayoutBar button{flex:1 1 auto;padding:6px;min-height:36px}
body.v9-map-first #layoutFocusToggle{flex:0 0 32px!important;width:32px;font-size:0!important}
body.v9-map-first #layoutFocusToggle:after{content:'⤢';font-size:18px}
body.v9-map-first #layoutFocusToggle[aria-pressed=true]:after{content:'↙'}
body.v9-map-first #weatherGraphSystem #mapLayoutBar button#layoutFocusToggle{font-size:0!important;min-width:32px!important;max-width:32px!important;overflow:hidden}
body.v9-map-first #weatherGraphSystem[data-dock-mode] #layoutStationPanel[hidden],body.v9-map-first #weatherGraphSystem[data-dock-mode] #officialInsight[hidden]{display:none!important}
body.v9-map-first #weatherGraphSystem[data-dock-mode] #layoutStationPanel:not([hidden]),body.v9-map-first #weatherGraphSystem[data-dock-mode] #officialInsight:not([hidden]){display:block!important;flex:none}
body.v9-map-first:is(.layout-timeline-hidden,.layout-map-only) #weatherGraphSystem[data-dock-mode]{height:auto!important;min-height:48px!important}
body.v9-map-first.layout-timeline-hidden #weatherGraphSystem :is(#graphPanel,#dockLead,#graphDockHandle,#timeDock){display:none!important}
body.v9-map-first #layoutStationPanel>button{min-height:36px;margin:4px 8px;background:#2b3238;color:#fff;border:1px solid #505b64;border-radius:6px}
body.v9-map-first .station-obs-panel{width:100%;min-width:0;box-sizing:border-box;margin:8px 0;padding:8px;background:#242c32;border:1px solid #46525a;border-radius:8px}
body.v9-map-first .station-obs-panel svg{display:block;width:100%!important;min-width:0!important;height:160px!important}
body.v9-map-first .station-chart :is(svg,.station-chart-canvas),body.v9-map-first .forecast-view svg{user-select:none;-webkit-user-select:none;touch-action:pan-y}
body.v9-map-first .station-chart-tooltip{position:sticky!important;top:0;z-index:3;background:#303a42;color:#fff;white-space:normal;min-height:36px;height:auto;padding:8px;flex-wrap:wrap;gap:4px}
body.v9-map-first #inspectSheet.station-sheet .station-chart>header{order:0!important}
body.v9-map-first #inspectSheet.station-sheet .station-chart-tooltip{order:1!important}
body.v9-map-first #inspectSheet.station-sheet .station-chart-canvas{order:2!important}
.point-location-note{font-size:12px;color:#cad6de;line-height:1.5}.point-sheet #pointOpenStation{min-height:40px;background:#34434e;color:#fff;border:1px solid #8298a6;border-radius:7px}
@media(max-width:899px){
 body.v9-map-first :is(#informationLayers,#appearancePanel,#stationBrowser,#harbourBrowser,#inspectSheet.station-sheet,#officialPrecipViewer){top:calc(8px + env(safe-area-inset-top))!important;bottom:calc(8px + env(safe-area-inset-bottom) + var(--atlas-visual-bottom,0px))!important;z-index:130!important}
 body.v9-map-first #weatherGraphSystem #mapLayoutBar button{font-size:10px!important;min-width:0}
 body.v9-map-first #weatherGraphSystem #layoutFocusToggle{font-size:0!important}
 body.v9-map-first #mapLayoutBar button i{display:none}
 body.v9-map-first #surfaceFrameTrust,body.v9-map-first .official-overlay-status{top:12px!important}
 body.v9-map-first .maplibregl-ctrl-top-right{top:12px!important}
 body.v9-map-first #inspectSheet.station-sheet .station-tabs{position:static!important;gap:5px!important}
 body.v9-map-first #inspectSheet.station-sheet .station-tabs button{min-height:36px!important;font-size:11px!important}
 body.v9-map-first #inspectSheet.station-sheet :is(.station-chart,.station-chart-canvas,[data-station-panel],#inspectContent){min-width:0!important;max-width:100%;box-sizing:border-box}
 body.v9-map-first #inspectSheet.station-sheet .station-chart>header{display:flex!important;align-items:start;gap:5px;flex-wrap:wrap}
 body.v9-map-first #inspectSheet.station-sheet .station-chart-tooltip{display:flex!important}
 body.v9-map-first #inspectSheet.station-sheet .station-obs-panel header{display:flex;flex-wrap:wrap;gap:4px}
}

/* v9.13.0 — phone label owns a normal-flow row above playback and the ruler. */
@media(max-width:700px){
 /* v9.13.0 phone dock: label row, actions row, full-width ruler; whole dock sits above #phoneTabs in every dock mode. */
 body.v9-map-first #weatherGraphSystem#weatherGraphSystem:is([data-dock-mode="collapsed"],[data-dock-mode="timeline"]){top:auto!important;bottom:calc(50px + env(safe-area-inset-bottom))!important;height:auto!important;max-height:none!important}
 body.v9-map-first #weatherGraphSystem#weatherGraphSystem #timeDock{position:relative!important;height:auto!important;min-height:0!important;max-height:none!important;flex:0 0 auto!important;display:block!important;padding:5px 6px 6px!important;box-sizing:border-box!important}
 body.v9-map-first #weatherGraphSystem#weatherGraphSystem .timeline-main{position:static!important;display:flex!important;flex-direction:column!important;gap:4px!important;min-width:0!important;height:auto!important;overflow:visible!important}
 body.v9-map-first #weatherGraphSystem#weatherGraphSystem .timeline-head{position:static!important;order:0!important;height:auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;gap:4px!important;padding:0!important;border:0!important}
 body.v9-map-first #weatherGraphSystem#weatherGraphSystem .timeline-live-label{position:static!important;display:block!important;width:100%!important;min-width:0;box-sizing:border-box;padding:6px 10px!important;border-radius:7px;background:#173f59!important;color:#fff!important;pointer-events:none}
 body.v9-map-first #weatherGraphSystem#weatherGraphSystem #timeLabel{display:block!important;color:#fff!important;font-size:24px!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important}
 body.v9-map-first #weatherGraphSystem#weatherGraphSystem #timelineMeta{display:block!important;margin-top:3px!important;color:#e4f1f6!important;font-size:12px!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
 body.v9-map-first #weatherGraphSystem#weatherGraphSystem .timeline-actions{position:static!important;display:flex!important;width:100%!important;height:34px!important;align-items:center;justify-content:center;gap:8px}
 body.v9-map-first #weatherGraphSystem#weatherGraphSystem .timeline-day-select{display:none!important}
 body.v9-map-first #weatherGraphSystem#weatherGraphSystem .timeline-actions :is(#timeNow,#timePlay,#graphDockToggle){position:static!important;display:inline-flex!important;align-items:center;justify-content:center;min-height:34px!important;height:34px!important;margin:0!important;transform:none!important}
 body.v9-map-first #weatherGraphSystem#weatherGraphSystem .timeline-actions :is(#timeNow,#graphDockToggle){flex:1 1 0!important;width:auto!important}
 body.v9-map-first #weatherGraphSystem#weatherGraphSystem .timeline-actions #timePlay{flex:0 0 44px!important;width:44px!important}
 body.v9-map-first #weatherGraphSystem#weatherGraphSystem .timeline-actions #dockColorToggle{display:none!important}
 body.v9-map-first #weatherGraphSystem#weatherGraphSystem #timePrev,body.v9-map-first #weatherGraphSystem#weatherGraphSystem #timeNext{position:absolute!important;top:auto!important;bottom:9px!important;width:40px!important;height:50px!important;margin:0!important;z-index:4}
 body.v9-map-first #weatherGraphSystem#weatherGraphSystem #timePrev{left:6px!important}
 body.v9-map-first #weatherGraphSystem#weatherGraphSystem #timeNext{right:6px!important;left:auto!important}
 body.v9-map-first #weatherGraphSystem#weatherGraphSystem #timelineTouch{position:relative!important;order:1!important;top:auto!important;left:auto!important;width:auto!important;margin:0 44px!important;height:54px!important;min-height:54px!important;flex:0 0 54px!important;overflow:hidden!important;touch-action:none!important}
 body.v9-map-first #weatherGraphSystem#weatherGraphSystem .timeline-track{top:0!important;height:54px!important}
 body.v9-map-first #weatherGraphSystem#weatherGraphSystem .timeline-days{display:none!important}
 body.v9-map-first #weatherGraphSystem#weatherGraphSystem .timeline-cursor{top:0!important}
}

/* 9.14.6: the layer legend must never cover an open station card on phones */
@media (max-width: 760px){
  html body:has(#inspectSheet:not([hidden])) #mapLegend,html body.v9-map-first.detailed-legend-open:has(#inspectSheet:not([hidden])) #mapLegend{display:none !important;}
}

/* 9.14.6: list panels (stations, harbours/cameras) must not cover the phone tab bar */
@media (max-width: 760px){
  html body.v9-map-first #phoneTabs{z-index:140 !important;}
  html body.v9-map-first #stationBrowser,html body.v9-map-first #harbourBrowser{bottom:calc(50px + env(safe-area-inset-bottom)) !important;}
}