#marine-menu,#marine-mobile-detail{display:none}
@media(max-width:720px){
 body.weather-page[data-weather-mode=marine] .wx-app{grid-template-rows:104px minmax(0,1fr) 128px}
 body.weather-page[data-weather-mode=marine].marine-no-time .wx-app{grid-template-rows:104px minmax(0,1fr)}
 body.weather-page[data-weather-mode=marine].marine-no-time .wx-timeline{display:none}
 body.weather-page[data-weather-mode=marine] #weather-map{left:0;right:0}
 body.weather-page[data-weather-mode=marine] .wx-header{padding:8px 12px;grid-template-rows:32px 48px;gap:6px}
 body.weather-page[data-weather-mode=marine] .wx-header #wx-search{height:48px}
 body.weather-page[data-weather-mode=marine] #wx-results{max-height:46dvh;overflow:auto}
 body.weather-page[data-weather-mode=marine] #wx-results button{min-height:56px;font-size:16px}
 body.weather-page[data-weather-mode=marine] #marine-menu{display:block;position:absolute;top:12px;left:12px;z-index:780;min-height:44px;padding:8px 14px;border:1px solid #a9bfcc;border-radius:8px;background:white;color:#153f56;font-weight:700;font-size:15px;box-shadow:0 2px 8px #173e5220}
 body.weather-page[data-weather-mode=marine] #marine-menu[aria-expanded=true]{background:#e0f1fc;border-color:#0875c9}
 body.weather-page[data-weather-mode=marine] .marine-rail{display:none;inset:64px 12px auto;width:auto;max-height:calc(100% - 80px);border:1px solid #bdced9;border-radius:10px;padding:12px;z-index:900;box-shadow:0 5px 20px #173e5230;overscroll-behavior:contain}
 body.weather-page[data-weather-mode=marine].marine-menu-open .marine-rail{display:block}
 body.weather-page[data-weather-mode=marine] .marine-rail button{font-size:15px;min-height:48px}
 body.weather-page[data-weather-mode=marine] .marine-rail :is(p,label,small,.marine-rail-heading){font-size:14px;line-height:1.6}
 body.weather-page[data-weather-mode=marine] .marine-rail .wx-footer-note{display:flex;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid #bdced9;font-size:13px}
 body.weather-page[data-weather-mode=marine] .marine-rail .wx-footer-note>span{max-width:none;white-space:normal}
 body.weather-page[data-weather-mode=marine] .wx-map-tools{left:auto;right:12px;top:12px;gap:6px}
 body.weather-page[data-weather-mode=marine] .wx-map-tools button{width:44px;height:44px}
 body.weather-page[data-weather-mode=marine] .wx-status{top:auto;left:12px;right:12px;bottom:24px;max-width:none;max-height:54px;font-size:13px;pointer-events:auto}
 body.weather-page[data-weather-mode=marine] .wx-quota{left:12px;right:12px;top:68px;max-width:none}
 body.weather-page[data-weather-mode=marine] .wx-detail,
 body.weather-page[data-weather-mode=marine] #marine-mobile-detail{position:absolute;inset:auto 0 0;width:100%;max-height:58%;overflow:auto;overscroll-behavior:contain;border:1px solid #bdced9;border-radius:16px 16px 0 0;background:white;box-shadow:0 -4px 20px #173e5225;z-index:850;padding:0;box-sizing:border-box}
 body.weather-page[data-weather-mode=marine] #marine-mobile-detail:not([hidden]){display:block}
 body.weather-page[data-weather-mode=marine] #marine-mobile-detail header{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:8px 12px 8px 20px;background:white;border-bottom:1px solid #e0e7ec;z-index:2}
 body.weather-page[data-weather-mode=marine] #marine-mobile-detail header button,
 body.weather-page[data-weather-mode=marine] #wx-detail-close{width:44px;height:44px;min-width:44px;min-height:44px;border:1px solid #bdced9;border-radius:8px;background:white;color:#24495e;font-size:26px}
 body.weather-page[data-weather-mode=marine] #wx-detail-close{position:sticky;float:right;top:8px;margin:8px 12px 0 8px;z-index:2}
 body.weather-page[data-weather-mode=marine] #wx-detail-content{padding:20px;overflow-wrap:anywhere}
 body.weather-page[data-weather-mode=marine] .marine-mobile-content{padding:16px 20px 24px;font-size:16px;line-height:1.65;overflow-wrap:anywhere}
 body.weather-page[data-weather-mode=marine] .marine-mobile-content>strong{display:block;font-size:20px;line-height:1.45}
 body.weather-page[data-weather-mode=marine] .marine-mobile-content small{font-size:14px;line-height:1.6}
 body.weather-page[data-weather-mode=marine] .marine-mobile-content a{display:inline-block;min-height:44px;padding:8px 0;color:#086cba}
 body.weather-page[data-weather-mode=marine].marine-popup-selected :is(.wx-detail,#wx-detail-open),
 body.weather-page[data-weather-mode=marine] .wx-stage:has(.wx-detail.wx-has-selection:not([hidden])) .wx-status,
 body.weather-page[data-weather-mode=marine].marine-popup-selected .wx-status{display:none}
 body.weather-page[data-weather-mode=marine] #wx-detail-open{top:auto;bottom:84px;right:12px;font-size:14px;min-height:44px}
 body.weather-page[data-weather-mode=marine] .leaflet-control-zoom{margin:0 12px 80px 0}
 body.weather-page[data-weather-mode=marine] .wx-stage:has(.wx-detail.wx-has-selection:not([hidden])) .leaflet-control-zoom,
 body.weather-page[data-weather-mode=marine].marine-popup-selected .leaflet-control-zoom{visibility:hidden}
 body.weather-page[data-weather-mode=marine] .wx-time-controls>button{min-width:44px;min-height:44px}
 body.weather-page[data-weather-mode=marine] #wx-time{height:32px}
 body.weather-page[data-weather-mode=marine] :is(#marine-menu,.marine-mobile-content a):focus-visible{outline:3px solid #0875c9;outline-offset:2px}
}

.marine-sheet-header{display:none}
@media(max-width:720px){
 body.weather-page[data-weather-mode=marine] #marine-menu{max-width:calc(100% - 142px);font-size:14px;padding:8px 11px;line-height:1.3}
 body.weather-page[data-weather-mode=marine] .wx-map-tools #wx-location{width:64px;font-size:13px;font-weight:650;color:#075f98;border-color:#a9bfcc}
 body.weather-page[data-weather-mode=marine] .marine-sheet-header{display:flex;position:sticky;top:0;align-items:center;gap:8px;padding:8px 12px 8px 20px;background:#fff;border-bottom:1px solid #dce5eb;z-index:3}
 body.weather-page[data-weather-mode=marine] :is(.marine-sheet-header,#marine-mobile-detail header)>strong{flex:1;min-width:0;font-size:15px}
 body.weather-page[data-weather-mode=marine] #marine-mobile-detail header{gap:8px}
 body.weather-page[data-weather-mode=marine] :is(.marine-sheet-header,#marine-mobile-detail header) .marine-sheet-expand{min-height:44px;width:auto;min-width:76px;height:44px;padding:8px;border:1px solid #a9c4d7;border-radius:8px;background:#eff7fd;color:#075f98;font-size:14px;font-weight:650}
 body.weather-page[data-weather-mode=marine] .marine-sheet-header #wx-detail-close{position:static;float:none;margin:0;flex:none}
 body.weather-page[data-weather-mode=marine] :is(.wx-detail,#marine-mobile-detail).marine-sheet-expanded{max-height:88%}
 body.weather-page[data-weather-mode=marine] #wx-detail-content{padding-top:12px}
}