/* ATLAS 9.17.0 basemap picker — monochrome; desktop popover next to the map controls, phone bottom sheet */
.bm-ctrl .bm-btn{display:flex;align-items:center;justify-content:center;color:#e9eef0;}
.bm-pop{position:fixed;z-index:140;width:260px;padding:10px;border-radius:12px;background:rgba(14,18,22,.96);border:1px solid rgba(255,255,255,.14);color:#eef2f4;box-shadow:0 10px 30px rgba(0,0,0,.4);font:500 13px/1.3 system-ui,-apple-system,sans-serif;}
.bm-pop[hidden]{display:none!important;}
.bm-head{font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(238,242,244,.62);margin:0 2px 8px;}
.bm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.bm-pop button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 4px;border-radius:9px;background:transparent;border:1px solid transparent;color:inherit;font:inherit;font-size:12px;cursor:pointer;}
.bm-pop button[aria-pressed="true"]{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.06);}
.bm-sw{display:block;width:100%;height:38px;border-radius:7px;border:1px solid rgba(255,255,255,.12);background:#556;}
.bm-sw-dark{background:linear-gradient(135deg,#0d1114,#2a3036);} .bm-sw-grey{background:linear-gradient(135deg,#6f7377,#a9adb0);} .bm-sw-light{background:linear-gradient(135deg,#e9ecee,#fbfcfc);}
.bm-sw-terrain{background:linear-gradient(135deg,#8ea77a,#d8cfb2 60%,#f4f1ea);} .bm-sw-satellite{background:linear-gradient(135deg,#1d2b1c,#4a5a3a 50%,#c9ccc8);}
.bm-sw-nautical{background:linear-gradient(135deg,#bcd9ea,#f2e9c9);} .bm-sw-road{background:linear-gradient(135deg,#f1efe9,#e7c46f);} .bm-sw-weather{background:linear-gradient(135deg,#1f3440,#4b6b7b);}
.bm-sw-bathymetry,.bm-sw-seafloor,.bm-sw-seabed{background:linear-gradient(135deg,#0d2f55,#3d7fae);}
.bm-more{margin-top:8px;} .bm-more summary{cursor:pointer;font-size:12px;color:rgba(238,242,244,.7);padding:4px 2px;}
.bm-more .bm-grid{margin-top:6px;}
html.atlas-pro-phone .bm-pop{left:8px;right:8px;width:auto;bottom:min(calc(var(--pp-dock,150px) + 8px),calc(100dvh - 300px));top:auto!important;max-height:calc(100dvh - 16px - min(calc(var(--pp-dock,150px) + 8px),calc(100dvh - 300px)));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-radius:16px;padding:12px;}/* 9.17.0 (Codex P2): stays inside the viewport with the dock expanded */
/* 9.18.0 — one-tap layer chips (monochrome), phone + desktop */
.layer-chips{position:absolute;z-index:30;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;pointer-events:auto;top:150px;left:12px;max-width:calc(100% - 90px);}
.layer-chips::-webkit-scrollbar{display:none}
.layer-chips button{flex:0 0 auto;height:34px;padding:0 12px;border-radius:17px;border:1px solid rgba(255,255,255,.22);background:rgba(12,16,20,.82);color:#e9eef0;font:600 13px/1 system-ui,-apple-system,sans-serif;white-space:nowrap;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.layer-chips button.on{background:#f2f5f6;color:#0c1014;border-color:#f2f5f6;}
.layer-chips .chip-iso{border-style:dashed;}
.layer-chips .chip-iso.on{border-style:solid;}
html.atlas-pro-phone .layer-chips{top:calc(env(safe-area-inset-top,0px) + 78px);left:8px;max-width:calc(100% - 96px);}
html.atlas-pro-phone .layer-chips button{height:36px;padding:0 13px;font-size:13px;}

/* 9.18.0 legend scale: ticks at true positions on the colour bar */
.legend-scale{position:relative;height:14px;margin:2px 4px 0;font:600 10px/14px system-ui,-apple-system,sans-serif;color:rgba(238,242,244,.85);}
.legend-scale span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;}
.legend-scale span:first-child{transform:none;}.legend-scale span:last-child{transform:translateX(-100%);}
.legend-scale span::before{content:'';position:absolute;left:50%;top:-3px;width:1px;height:3px;background:rgba(238,242,244,.6);}
.legend-scale span:first-child::before{left:0}.legend-scale span:last-child::before{left:100%}
/* 9.18.0 loop range */
.loop-layer{position:absolute;left:0;top:0;height:100%;width:0;pointer-events:none;z-index:6;will-change:transform}
.loop-layer[hidden]{display:none!important}
.loop-band{position:absolute;top:0;bottom:0;background:rgba(232,237,242,.13);box-shadow:inset 0 1px 0 rgba(232,237,242,.45),inset 0 -1px 0 rgba(232,237,242,.45)}
.loop-band::before{content:attr(data-label);position:absolute;left:6px;bottom:2px;font:700 9px/1 system-ui,sans-serif;letter-spacing:.02em;color:rgba(232,237,242,.75);white-space:nowrap;font-variant-numeric:tabular-nums}
.loop-handle{position:absolute;top:0;bottom:0;width:24px;margin-left:-12px;pointer-events:auto;touch-action:none;cursor:ew-resize}
.loop-handle::after{content:'';position:absolute;left:11px;top:0;bottom:0;width:2px;border-radius:1px;background:#e8edf2;box-shadow:0 0 0 1px rgba(10,16,22,.45)}
.loop-in{left:0}.loop-out{left:100%}
.loop-handle.drag::after{width:3px;left:10.5px}
body.v9-map-first #weatherGraphSystem#weatherGraphSystem .timeline-actions :is(.loop-toggle,.loop-speed,.loop-clear){display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 auto!important;width:auto!important;min-width:30px!important;max-width:40px!important;padding:0 6px!important;font:700 11px/1 system-ui,sans-serif!important;font-variant-numeric:tabular-nums;position:static!important}
body.v9-map-first #weatherGraphSystem#weatherGraphSystem .timeline-actions :is(.loop-speed,.loop-clear)[hidden]{display:none!important}
body.v9-map-first #weatherGraphSystem#weatherGraphSystem .timeline-actions .loop-toggle.on{background:#e8edf2!important;color:#11181f!important;border-color:#e8edf2!important}
body[data-loop="loading"] #loopToggle{opacity:.6}
/* 9.18.0 UX: the day and time get their own full-width row. */
html body.v9-map-first #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #timeDock#timeDock .timeline-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;height:auto!important;gap:4px!important}
html body.v9-map-first #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem .timeline-live-label{width:100%!important;min-width:0!important;box-sizing:border-box;padding:2px 0!important;background:transparent!important}
html body.v9-map-first #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #timeLabel#timeLabel{font-size:16px!important;line-height:22px!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;width:auto!important;max-width:none!important}
html body.v9-map-first #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #timeDock#timeDock .timeline-actions{width:100%!important;justify-content:flex-end!important;height:30px!important;gap:6px!important}
html body.v9-map-first #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem .timeline-actions :is(.timeline-day-select,#dockColorToggle){display:none!important}
html body.v9-map-first #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem .timeline-actions :is(#timeNow,#graphDockToggle,#timePlay){flex:0 0 auto!important;width:auto!important;min-width:40px!important;height:30px!important;min-height:30px!important}
.layer-chips button.on{background:rgba(91,108,119,.85);color:#f2f5f6;border-color:rgba(255,255,255,.5)}
html.atlas-pro-phone .layer-chips{top:calc(env(safe-area-inset-top,0px) + 108px);max-width:none;left:8px;right:100px;gap:4px;display:flex;flex-wrap:nowrap;overflow:hidden}
html.atlas-pro-phone .layer-chips button{flex:1 1 0;width:auto;min-width:0;height:32px;padding:0 3px;font-size:10px;letter-spacing:-.2px}
html.atlas-pro-phone .layer-chips button:first-child{font-size:10px}
html.atlas-pro-phone .layer-chips .chip-iso{grid-column:auto;flex:1.15 1 0;width:auto;justify-self:stretch;padding:0 3px;height:32px;font-size:10px}
.loop-band::before{display:none}
.loop-tools{position:relative;display:flex;align-items:center;gap:8px;min-height:28px;color:#e8edf2;font:600 11px/1.3 system-ui,sans-serif}
.loop-tools button{color:inherit;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer}
.loop-tools #loopToggle{display:flex;align-items:center;justify-content:center;width:30px;height:28px;padding:4px}
.loop-caption{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.loop-caption button{height:26px;min-width:30px;font:inherit}
.loop-tools [hidden]{display:none!important}
.loop-picker{position:absolute;bottom:calc(100% + 8px);left:0;z-index:180;width:min(340px,calc(100vw - 44px));box-sizing:border-box;padding:12px;border:1px solid #56616a;border-radius:12px;background:rgba(17,23,28,.98);box-shadow:0 8px 30px #0008;color:#eef2f4;font:500 12px/1.4 system-ui,sans-serif}
.loop-picker-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.loop-picker button{padding:6px 9px;min-height:30px;font:inherit}
.loop-picker-head button{padding:2px 9px;font-size:18px}
.loop-days{display:flex;overflow-x:auto;gap:5px;padding:2px 0 8px;scrollbar-width:thin}
.loop-days button{flex:0 0 auto;white-space:nowrap}
.loop-days button[aria-pressed="true"]{background:#47535c;border-color:#a4b0b8}
.loop-hours{display:flex;gap:12px;align-items:center;margin:6px 0 10px}
.loop-hours label{display:flex;align-items:center;gap:6px;flex:1}
.loop-hours select{min-width:78px;width:100%;height:34px;color:#f3f5f7;background:#263039;border:1px solid #66717a;border-radius:6px;font:inherit;padding:0 4px}
.loop-presets{display:flex;gap:6px}.loop-presets button{flex:1;padding:6px 4px;white-space:nowrap}
.loop-picker-note{font-size:11px;color:#c2cbd2;margin:10px 0}
.loop-picker #loopPickerPlay{width:100%;background:#39464f;border-color:#83929e;font-weight:700}
.loop-picker button:disabled{opacity:.4;cursor:default}
/* 9.18.3: a buoy is a small dot plus light text, quieter than a station wind label. */
.buoy-marker{display:inline-flex!important;align-items:center;gap:3px!important;background:none!important;border:0!important;border-radius:0!important;color:rgba(226,234,238,.66)!important;padding:4px 5px!important;min-width:0!important;min-height:0!important;box-shadow:none!important}
.buoy-marker svg{display:none!important}.buoy-marker .buoy-dot{display:block;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);box-shadow:0 0 0 1px rgba(0,0,0,.28);flex:none}.buoy-marker b{font:500 10px/1 system-ui,sans-serif!important;color:rgba(226,234,238,.66)!important;background:none!important;white-space:nowrap;text-shadow:0 1px 1px rgba(0,0,0,.4)}

.loop-picker{position:fixed;left:12px;z-index:5000;max-height:calc(100dvh - 32px);overflow-y:auto}
html body .buoy-marker.buoy-marker.buoy-marker::before{display:none!important;content:none!important}
html body .buoy-marker.buoy-marker.buoy-marker svg{display:none!important;width:0!important;height:0!important}
html body .buoy-marker.buoy-marker.buoy-marker{display:inline-flex!important;align-items:center!important;gap:3px!important;background:none!important;border:0!important;border-radius:0!important;padding:4px 5px!important;min-width:0!important;min-height:0!important;color:rgba(226,234,238,.66)!important;box-shadow:none!important}
html body .buoy-marker.buoy-marker.buoy-marker .buoy-dot{display:block!important;width:6px!important;height:6px!important;border-radius:50%!important;background:rgba(255,255,255,.5)!important;box-shadow:0 0 0 1px rgba(0,0,0,.28)!important;flex:none}
html body .buoy-marker.buoy-marker.buoy-marker b{position:static!important;background:none!important;border-radius:0!important;padding:0!important;font:500 10px/1 system-ui,sans-serif!important;color:rgba(226,234,238,.66)!important;text-shadow:0 1px 1px rgba(0,0,0,.4)!important}
html body .buoy-marker.buoy-marker.buoy-marker b small{font:500 9px/1 system-ui,sans-serif;opacity:.8;margin-left:1px}
html body .buoy-marker.buoy-marker.buoy-marker.is-stale .buoy-dot{background:rgba(180,188,194,.4)!important}
.loop-days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:5px}
.loop-days button{min-width:0;padding:5px 3px}
html body .buoy-marker.buoy-marker.buoy-marker{min-height:0!important;padding:4px 5px!important}
html body .buoy-marker.buoy-marker.buoy-marker b{font-size:10px!important;font-weight:500!important}
@media(min-width:769px){
 html body.v9-map-first #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem{height:auto!important;min-height:164px!important;align-items:stretch!important}
 html body.v9-map-first #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #timeDock#timeDock{height:auto!important;min-height:164px!important;grid-template-rows:auto!important;align-items:center!important}
 html body.v9-map-first #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem .timeline-main{display:flex!important;flex-direction:column!important;justify-content:center!important;height:auto!important;min-width:0!important;gap:4px!important}
 html body.v9-map-first #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem .timeline-head{flex-direction:row!important;align-items:center!important;position:static!important;transform:none!important}
 html body.v9-map-first #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem .timeline-actions{width:auto!important}
}

@media(min-width:901px){html body.v9-map-first.v9-map-first{--dockh:164px}html body.v9-map-first #mapLegend#mapLegend#mapLegend{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:4px!important;max-height:none!important;width:300px!important;padding:8px 10px!important}html body.v9-map-first #mapLegend#mapLegend#mapLegend header{display:flex!important;align-items:center!important;gap:8px}html body.v9-map-first #mapLegend#mapLegend#mapLegend #legendTitle{white-space:nowrap}html body.v9-map-first #mapLegend#mapLegend#mapLegend #legendGradient{width:100%!important;height:8px!important}html body.v9-map-first #mapLegend#mapLegend#mapLegend .legend-scale{display:block!important;height:16px!important}}
.loop-picker button{color:#eef2f4;background:#263039;border:1px solid #596670;border-radius:6px;cursor:pointer;box-shadow:none}
.loop-picker button:focus-visible,.loop-picker select:focus-visible{outline:2px solid #c1cbd2;outline-offset:2px}

html body:has(#inspectSheet:not([hidden])) .layer-chips,html body:has(#stationBrowser:not([hidden])) .layer-chips,html body:has(#harbourBrowser:not([hidden])) .layer-chips{visibility:hidden}
/* Solid translucent surfaces keep software-rendered touch playback responsive. */
html body.v9-map-first #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.layer-chips button{backdrop-filter:none;-webkit-backdrop-filter:none}

@media(max-width:768px){html.atlas-pro-phone body #inspectSheet#inspectSheet#inspectSheet{top:auto!important;bottom:calc(var(--pp-dock,210px) + 8px)!important;height:auto!important;max-height:calc(100dvh - var(--pp-dock,210px) - 80px)!important;overflow-y:auto!important}html.atlas-pro-phone body #inspectContent :is(.camera-views,.camera-tabs){display:grid!important;grid-template-columns:minmax(0,1fr)!important;overflow:visible!important}html.atlas-pro-phone body #inspectContent :is(.camera-views,.camera-tabs) button{width:100%!important;min-width:0!important;white-space:normal!important;height:auto!important;line-height:1.4!important;overflow:visible!important;text-overflow:clip!important}}
/* 9.18.3: a closed legend stays closed, including where an open rule forces display. */
html body.v9-map-first #mapLegend#mapLegend#mapLegend[hidden]{display:none!important}
html body.v9-map-first.detailed-legend-open #mapLegend#mapLegend #closeDetailedLegend{display:inline-flex!important;align-items:center;justify-content:center}
#legendPeek{position:fixed;z-index:120;left:12px;bottom:calc(var(--dockh,164px) + 10px);width:28px;height:22px;margin:0;padding:0;display:grid;place-items:center;border-radius:7px;border:1px solid rgba(255,255,255,.16);background:rgba(12,16,20,.4);box-shadow:none;cursor:pointer}
#legendPeek i{display:block;width:16px;height:4px;border-radius:2px;background:linear-gradient(90deg,#2e7d32,#f9a825,#c62828)}
html body #legendPeek[hidden]{display:none!important}
html body:has(#inspectSheet:not([hidden])) #legendPeek,html body:has(#stationBrowser:not([hidden])) #legendPeek,html body:has(#harbourBrowser:not([hidden])) #legendPeek{display:none!important}