/* ATLAS 9.15.8 phone shell. Every rule that changes the map is under html.atlas-phone,
   so a desktop viewport that never receives that class stays pixel-identical. */

.m-switch{
  position:fixed;z-index:2147483000;left:50%;top:calc(104px + env(safe-area-inset-top));
  transform:translateX(-50%);min-height:44px;padding:0 16px;border:0;border-radius:999px;
  background:#1d2328;color:#fff;font:600 14px/1 system-ui,sans-serif;
  box-shadow:0 8px 24px #0006;
}

html.atlas-phone,html.atlas-phone body{height:100%;margin:0;background:var(--bg);color:var(--ink);}
/* Day/night theme uses the same tokens as .marine-stage.day on the desktop. */
html.atlas-phone body.day-mode{--panel:rgba(247,252,251,.97);--panel-solid:#f7fcfb;--panel-soft:rgba(238,248,247,.97);--ink:#102b32;--muted:#536d72;--line:rgba(32,79,87,.2);--shadow:0 16px 44px rgba(15,51,56,.2);}
html.atlas-phone body{overflow:hidden;}
html.atlas-phone .app-shell,html.atlas-phone .marine-stage{height:100dvh;min-height:100dvh;}
html.atlas-phone .marine-stage{
  position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;margin:0!important;padding:0!important;
}
html.atlas-phone #marineMap,html.atlas-phone #marineMap .maplibregl-map{width:100%!important;height:100%!important;}

/* Desktop chrome stays in the DOM (shared data boot) but is not the phone UI. */
html.atlas-phone .topbar,
html.atlas-phone .phone-tabs,
html.atlas-phone .bottom-nav,
html.atlas-phone #weatherGraphSystem,
html.atlas-phone #quickExtremes,
html.atlas-phone #overviewPanel,
html.atlas-phone #appBootSplash,
html.atlas-phone .layer-rail,
html.atlas-phone #mapLayoutBar,
html.atlas-phone #phoneMenuButton,
html.atlas-phone #phoneControls,
html.atlas-phone #officialInsight,
html.atlas-phone #layoutStationPanel,
html.atlas-phone #layoutMenu,
html.atlas-phone #toolsMenu,
html.atlas-phone #informationLayers,
html.atlas-phone #appearancePanel,
html.atlas-phone #stationBrowser,
html.atlas-phone #harbourBrowser,
html.atlas-phone #landUi,
html.atlas-phone #proDrawer,
html.atlas-phone #routeLayerDrawer,
html.atlas-phone #routeTools,
html.atlas-phone #officialPrecipViewer,
html.atlas-phone .atlas-compass-ctrl,
html.atlas-phone .maplibregl-ctrl-zoom-in,
html.atlas-phone .maplibregl-ctrl-zoom-out,
html.atlas-phone .maplibregl-ctrl-attrib,
html.atlas-phone .maplibregl-ctrl-logo,
html.atlas-phone .maplibregl-ctrl-bottom-left,
html.atlas-phone .maplibregl-ctrl-bottom-right{display:none!important;}

html.atlas-phone #particleCanvas{visibility:hidden;pointer-events:none;}
html.atlas-phone.m-particles #particleCanvas{visibility:visible;}

html.atlas-phone #toast{
  position:fixed!important;z-index:90!important;left:50%!important;right:auto!important;top:auto!important;
  bottom:calc(var(--m-dock, 120px) + 12px)!important;transform:translateX(-50%)!important;
  max-width:calc(100vw - 32px);
}

/* Station window: about 60% so the tabs and the first graph are on screen. */
html.atlas-phone body.v9-map-first #inspectSheet#inspectSheet:not([hidden]){
  position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;
  width:100%!important;height:60dvh!important;max-height:60dvh!important;min-width:0!important;margin:0!important;
  transform:none!important;z-index:80!important;border-radius:18px 18px 0 0!important;
  box-shadow:0 -12px 40px #0004;overflow:auto!important;overflow-x:hidden!important;padding-top:8px;
}
html.atlas-phone body.v9-map-first #inspectSheet#inspectSheet #inspectContent{
  overflow:visible!important;max-height:none!important;height:auto!important;
}
html.atlas-phone body.v9-map-first #inspectSheet#inspectSheet[data-snap="full"]:not([hidden]){
  top:0!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;
}
html.atlas-phone #inspectSheet #pointSheetHandle{display:flex!important;height:28px;width:100%;align-items:center;justify-content:center;}
html.atlas-phone #inspectClose{
  width:44px!important;height:44px!important;min-width:44px!important;top:8px!important;right:8px!important;z-index:5!important;
}

/* Night veil follows the selected time. Chrome stays above it. */
html.atlas-phone .m-night{position:fixed;inset:0;z-index:4;pointer-events:none;background:#041018;opacity:0;}

/* ---- phone chrome: desktop tokens, finger-sized ---- */
html.atlas-phone .m-passive{pointer-events:none;}

html.atlas-phone .m-card{
  position:fixed;z-index:30;left:12px;top:calc(8px + env(safe-area-inset-top));
  width:auto;max-width:calc(100vw - 76px);height:44px;padding:0 4px;border-radius:12px;
  border:1px solid rgba(180,222,225,.2);background:rgba(8,29,37,.88);color:var(--ink);
  box-shadow:0 6px 18px rgba(0,9,13,.22);
  display:flex;align-items:center;
}
html.atlas-phone .m-hilow{display:flex;flex-wrap:nowrap;gap:0;margin:0;height:44px;}
html.atlas-phone .m-hilow button{
  pointer-events:auto;display:flex;align-items:center;gap:6px;height:44px;min-height:44px;
  padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--ink);
  font:750 14px/1 inherit;text-align:left;white-space:nowrap;
}
html.atlas-phone .m-hilow button b{font-size:15px;font-weight:800;}
html.atlas-phone .m-hilow button small{font-weight:850;color:var(--accent);letter-spacing:.04em;font-size:11px;}
html.atlas-phone .m-place-name{margin:4px 0 0;font:800 22px/1.2 inherit;color:var(--ink);}
html.atlas-phone .m-big{margin:4px 0 8px;font:800 56px/1 inherit;color:var(--accent);letter-spacing:-.03em;}

html.atlas-phone .m-pill-map{
  position:fixed;z-index:28;min-width:44px;min-height:44px;padding:0 8px;
  border:1px solid rgba(180,222,225,.2);border-radius:12px;
  background:rgba(8,29,37,.92);color:var(--ink);font:800 14px/1 inherit;
  box-shadow:0 6px 18px rgba(0,9,13,.22);
  transform:none;
}

html.atlas-phone .m-fab,html.atlas-phone .m-more,html.atlas-phone .m-info{
  position:fixed;z-index:32;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel-solid);color:var(--ink);box-shadow:var(--shadow);font:750 16px/1 inherit;
}
html.atlas-phone .m-fab{right:12px;}
html.atlas-phone #mTheme{top:calc(12px + env(safe-area-inset-top));}
html.atlas-phone #mTheme[aria-pressed="true"]{border-color:rgba(67,214,207,.55);background:var(--accent-soft);color:var(--accent);}
html.atlas-phone #mLocate{top:calc(64px + env(safe-area-inset-top));}
html.atlas-phone #mCompass{top:calc(116px + env(safe-area-inset-top));}
html.atlas-phone .m-more{
  right:12px;bottom:calc(var(--m-dock, 120px) + 12px);width:auto;min-width:72px;padding:0 14px;
  border-radius:12px;font-size:13px;font-weight:800;
}
html.atlas-phone .m-info{left:12px;bottom:calc(var(--m-dock, 120px) + 12px);}
html.atlas-phone.m-station #mAbout,
html.atlas-phone.m-station #mMore,
html.atlas-phone.m-station #mLocate{display:none!important;}

html.atlas-phone .m-dock{
  position:fixed;z-index:35;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));
  padding:4px 8px 2px;border:1px solid var(--line);border-radius:14px;
  background:var(--panel);color:var(--ink);box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:0;
}
html.atlas-phone #mPlayer{
  display:flex;align-items:center;justify-content:center;
  width:44px;min-width:44px;height:44px;margin:0;padding:0;
  border:1px solid rgba(67,214,207,.45);border-radius:11px;
  background:var(--accent-soft);color:var(--accent);
  font:800 16px/1 inherit;
}
html.atlas-phone .m-legend{
  display:flex;align-items:center;gap:8px;min-height:36px;width:100%;padding:0 4px;border:0;background:transparent;color:var(--ink);touch-action:manipulation;cursor:pointer;/* 9.15.8: 36px finger target */
}
html.atlas-phone .m-legend i{
  flex:1;height:8px;border-radius:999px;display:block;
}
html.atlas-phone .m-legend span{font:650 11px/1 inherit;min-width:22px;color:var(--muted);}
html.atlas-phone .m-time{
  display:flex;align-items:center;gap:6px;
}
html.atlas-phone .m-time > button{
  flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:11px;background:transparent;color:var(--ink);
  font:650 20px/1 inherit;
}
html.atlas-phone #mPill{
  flex:1;width:auto;min-width:0;height:44px;border:1px solid var(--line);border-radius:11px;
  background:var(--accent-soft);color:var(--accent);
  font:800 13px/1.15 inherit;padding:0 8px;
}
html.atlas-phone #mPlay{font-size:15px;background:var(--accent-soft);color:var(--accent);}
html.atlas-phone .m-slider{
  width:100%;height:28px;margin:0;background:transparent;accent-color:var(--accent);
}
html.atlas-phone .m-slider::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:rgba(172,214,217,.28);}
html.atlas-phone .m-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--accent);border:2px solid var(--ink);}

/* ---- sheets ---- */
html.atlas-phone .m-sheet{
  position:fixed;z-index:70;inset:0;display:flex;flex-direction:column;
  background:var(--panel-solid);color:var(--ink);
  padding-top:env(safe-area-inset-top);
}
html.atlas-phone .m-sheet[hidden]{display:none!important;}
html.atlas-phone .m-handle{
  flex:none;width:100%;height:28px;border:0;background:transparent;touch-action:none;
}
html.atlas-phone .m-handle::before{
  content:"";display:block;width:40px;height:4px;margin:12px auto 0;border-radius:999px;background:var(--line);
}
html.atlas-phone .m-sheet-head{
  flex:none;display:flex;align-items:center;gap:8px;min-height:52px;padding:0 8px 0 16px;
  border-bottom:1px solid var(--line);
}
html.atlas-phone .m-sheet-head h2{flex:1;margin:0;font:800 20px/1.2 inherit;color:var(--ink);}
html.atlas-phone .m-x{
  width:44px;height:44px;border:0;border-radius:9px;background:rgba(130,170,177,.1);color:var(--ink);font:500 28px/1 inherit;
}
html.atlas-phone .m-body{flex:1;overflow:auto;padding:4px 16px calc(24px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;}
html.atlas-phone .m-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
html.atlas-phone .m-grid button,html.atlas-phone .m-row,html.atlas-phone .m-chip,html.atlas-phone .m-body select,html.atlas-phone .m-body input[type="search"]{
  min-height:44px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font:750 15px/1.2 inherit;
  text-align:left;padding:8px 12px;
}
html.atlas-phone .m-grid button small{display:block;font-weight:650;color:var(--muted);}
html.atlas-phone .m-grid button[aria-pressed="true"],html.atlas-phone .m-chip[aria-pressed="true"]{background:var(--accent-soft);border-color:rgba(67,214,207,.45);color:var(--ink);outline:none;}
html.atlas-phone .m-group{margin:16px 0 8px;font:850 12px/1 inherit;letter-spacing:.08em;color:var(--accent);text-transform:uppercase;}
html.atlas-phone .m-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px;}
html.atlas-phone .m-row{display:flex;width:100%;align-items:center;justify-content:space-between;margin:0 0 8px;}
html.atlas-phone .m-row b{font-size:16px;color:var(--accent);}
html.atlas-phone .m-note{color:var(--muted);font-size:13px;line-height:1.4;}
html.atlas-phone .m-search{width:100%;box-sizing:border-box;margin:0 0 8px;}
html.atlas-phone .m-shift{display:flex;align-items:center;gap:8px;margin:8px 0;}
html.atlas-phone .m-shift button{
  box-sizing:border-box;flex:0 0 44px;width:44px;min-width:44px;max-width:44px;
  height:44px;min-height:44px;max-height:44px;padding:0;margin:0;border:1px solid var(--line);border-radius:11px;
  background:transparent;color:var(--ink);font-size:18px;font-weight:650;line-height:44px;font-family:inherit;text-align:center;
}
html.atlas-phone .m-shift button[data-shift="0"]{font-size:15px;font-weight:600;}
html.atlas-phone #mOpenStation{flex:1 1 auto;width:auto;min-width:9em;max-width:none;padding:0 18px;font-size:16px;line-height:44px;white-space:nowrap;}
html.atlas-phone .m-shift b{flex:1;text-align:center;font-size:14px;}
html.atlas-phone .m-readout{min-height:24px;margin:6px 0;font:750 14px/1.3 inherit;color:var(--ink);}
html.atlas-phone .m-graph{background:rgba(3,18,24,.55);border:1px solid var(--line);border-radius:11px;padding:8px;overflow:hidden;}
html.atlas-phone .m-graph svg{width:100%;height:auto;touch-action:pan-y;}
html.atlas-phone .m-graph .sc-graph text{fill:#effafa;}
html.atlas-phone .m-graph .sc-graph .grid,html.atlas-phone .m-graph .sc-graph .vgrid{stroke:rgba(172,214,217,.18);}
html.atlas-phone .m-graph .sc-graph .day{stroke:rgba(154,176,181,.7);}
html.atlas-phone .m-graph .nowline{stroke:#e9f27a;stroke-width:1.6;}
html.atlas-phone .m-graph .sc-graph .nowlab{fill:#e9f27a;}
html.atlas-phone .m-days{display:flex;flex-direction:column;gap:8px;}
html.atlas-phone .m-day{
  display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;
  background:transparent;border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-height:44px;color:var(--ink);
}
html.atlas-phone .m-day b{font-size:16px;}
html.atlas-phone .m-day span{color:var(--accent);font-weight:800;}
html.atlas-phone .m-sort{display:flex;gap:8px;margin:0 0 8px;}
html.atlas-phone .m-sort button{flex:1;min-height:44px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted);font:750 14px/1 inherit;}
html.atlas-phone .m-sort button[aria-pressed="true"]{background:var(--accent-soft);border-color:rgba(67,214,207,.45);color:var(--ink);outline:none;}

/* Buoys and harbours stay small dots; the button is the tap target. */
html.atlas-phone .buoy-marker.buoy-marker,
html.atlas-phone .harbour-marker.harbour-marker{
  width:44px!important;height:44px!important;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;display:grid!important;place-items:center;position:absolute;
}
html.atlas-phone .buoy-marker.buoy-marker::before,
html.atlas-phone .harbour-marker.harbour-marker::before{
  content:'';width:8px;height:8px;border-radius:50%;background:#e0a106;border:1.5px solid #10202a;box-shadow:none;
}
html.atlas-phone .harbour-marker.harbour-marker::before{background:#3d7ea6;}
html.atlas-phone .buoy-marker.buoy-marker svg,
html.atlas-phone .harbour-marker.harbour-marker svg,
html.atlas-phone .harbour-marker.harbour-marker>*:not(.m-dot-value){display:none!important;}
/* Phone station card: keep the compass, conditions, tabs and the first graph inside 60dvh. */
html.atlas-phone #inspectSheet .sc-head{margin-bottom:4px;padding-right:48px;}
html.atlas-phone #inspectSheet .sc-head h2{font-size:18px;margin:0 0 2px;}
html.atlas-phone #inspectSheet .sc-kind{font-size:9px;}
html.atlas-phone #inspectSheet .sc-status{font-size:11px;gap:4px;}
html.atlas-phone #inspectSheet .sc-chip{height:18px;font-size:10px;}
html.atlas-phone #inspectSheet .sc-hero{grid-template-columns:88px 1fr!important;gap:6px;margin:0 0 4px;}
html.atlas-phone #inspectSheet .sc-compass svg{width:84px;height:84px;}
html.atlas-phone #inspectSheet .sc-compass figcaption{margin-top:1px;font-size:10px;}
html.atlas-phone #inspectSheet .station-card .sc-grid{grid-template-columns:1fr 1fr;gap:3px;}
html.atlas-phone #inspectSheet .station-card .sc-grid>div{padding:3px 6px;}
html.atlas-phone #inspectSheet .station-card .sc-grid small{
  white-space:normal;overflow:visible;text-overflow:clip;letter-spacing:0;line-height:1.15;font-size:10px;text-transform:none;
}
html.atlas-phone #inspectSheet .station-card .sc-grid b{font-size:13px;margin-top:0;}
html.atlas-phone #inspectSheet .station-card .sc-tabs{
  flex-wrap:nowrap!important;gap:4px;padding:2px 0 4px;margin-bottom:2px;
}
html.atlas-phone #inspectSheet .station-card .sc-tabs button{
  min-height:36px!important;height:36px;padding:0 10px;font-size:12px;
}
html.atlas-phone #inspectSheet #stationCard .sc-graph-nav{margin:0 0 2px;min-height:0;}
html.atlas-phone #inspectSheet #stationCard .sc-graph-nav button{height:32px;min-height:32px;}

html.atlas-phone .buoy-marker.buoy-marker b,
html.atlas-phone .harbour-marker.harbour-marker .m-dot-value{
  position:absolute;left:24px;top:15px;display:block!important;
  font:600 9px/1 system-ui,sans-serif!important;color:#f4fbff!important;letter-spacing:0;
  text-shadow:0 0 2px #000,0 0 3px #000,0 1px 1px #000;background:none!important;padding:0!important;
}

/* Beat the 9.14 phone rules (double IDs, !important) so the desktop chrome stays off this shell. */
html.atlas-phone body.v9-map-first #weatherGraphSystem#weatherGraphSystem,
html.atlas-phone body.v9-map-first #mapLegend#mapLegend,
html.atlas-phone body.v9-map-first #phoneTabs#phoneTabs,
html.atlas-phone body.v9-map-first #quickExtremes#quickExtremes,
html.atlas-phone body.v9-map-first #overviewPanel#overviewPanel,
html.atlas-phone body.v9-map-first #mapLayoutBar#mapLayoutBar,
html.atlas-phone body.v9-map-first #phoneMenuButton#phoneMenuButton,
html.atlas-phone body.v9-map-first #toolsMenu#toolsMenu,
html.atlas-phone body.v9-map-first #phoneControls#phoneControls,
html.atlas-phone body.v9-map-first .topbar,
html.atlas-phone body.v9-map-first .bottom-nav,
html.atlas-phone body.v9-map-first .layer-rail,
html.atlas-phone body.v9-map-first #viImageStatus,
html.atlas-phone body.v9-map-first #surfaceFrameTrust,
html.atlas-phone body.v9-map-first #pastFrameNote,
html.atlas-phone body.v9-map-first #layerStateNote,
html.atlas-phone body.v9-map-first .maplibregl-ctrl-bottom-left,
html.atlas-phone body.v9-map-first .maplibregl-ctrl-bottom-right,
html.atlas-phone body.v9-map-first .atlas-compass-ctrl,
html.atlas-phone body.v9-map-first #openReferencePlayer{display:none!important;}
/* The full VÍ player stays the desktop viewer. On the phone it opens from the main-screen button. */
html.atlas-phone body.v9-map-first #officialPrecipViewer.atlas-player:not([hidden]){
  display:grid!important;z-index:500!important;
}
/* 9.15.0 review: card content (camera images, Myndavélar tab) must scroll clear of the time bar */
html.atlas-phone body.v9-map-first #inspectSheet#inspectSheet:not([hidden]){padding-bottom:calc(var(--m-dock, 120px) + env(safe-area-inset-bottom) + 12px)!important;}
/* 9.15.0 review: tab scrollIntoView scrolled the whole card sideways (scrollLeft≈179); clip blocks that */
html.atlas-phone body.v9-map-first #inspectSheet#inspectSheet:not([hidden]){overflow-x:clip!important;}
html.atlas-phone #inspectSheet #stationCard{max-width:100%;min-width:0;}
html.atlas-phone #inspectSheet .station-card .sc-tabs{overflow-x:auto!important;overscroll-behavior-x:contain;max-width:100%;min-width:0;}
html.atlas-phone #inspectSheet .station-card .sc-tabs button{min-height:40px!important;height:40px;}
/* 9.15.1 review: the map's locate control sat under ◐; put it below with the same gap */
html.atlas-phone .maplibregl-ctrl-top-right{top:calc(66px + env(safe-area-inset-top))!important;right:6px!important;}
/* 9.15.1 review: day mode — high/low bar, map pills and time pill were dark with dark text */
html.atlas-phone body.day-mode{--accent:#0f7c78;--accent-soft:rgba(15,124,120,.12);}
html.atlas-phone body.day-mode .m-card,html.atlas-phone body.day-mode .m-pill-map{background:var(--panel);border-color:var(--line);color:var(--ink);box-shadow:var(--shadow);}
html.atlas-phone body.day-mode .m-hilow button,html.atlas-phone body.day-mode .m-hilow button b{color:var(--ink);}
html.atlas-phone body.day-mode #mPill,html.atlas-phone body.day-mode #mPlay{background:var(--accent-soft);color:var(--accent);}
html.atlas-phone body.day-mode .maplibregl-ctrl-top-right .maplibregl-ctrl-group,html.atlas-phone body.day-mode .maplibregl-ctrl-top-right button{background:var(--panel)!important;color:var(--ink)!important;border-color:var(--line)!important;}

/* ===== 9.15.8 design round (phone) ===== */
/* right-hand stack: eye (clean map) · day/night · locate, all the same 44px tile with an even 8px gap */
html.atlas-phone #mClean{top:calc(12px + env(safe-area-inset-top));display:grid;place-items:center;}
html.atlas-phone #mTheme{top:calc(64px + env(safe-area-inset-top));display:grid;place-items:center;}
html.atlas-phone .maplibregl-ctrl-top-right{top:calc(116px + env(safe-area-inset-top))!important;right:12px!important;}
html.atlas-phone .maplibregl-ctrl-top-right .maplibregl-ctrl{margin:0!important;}
html.atlas-phone .maplibregl-ctrl-top-right .maplibregl-ctrl-group{border-radius:12px!important;overflow:hidden;background:var(--panel-solid)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow)!important;}
html.atlas-phone .maplibregl-ctrl-top-right .maplibregl-ctrl-group button{width:44px!important;height:44px!important;background-color:transparent!important;}
html.atlas-phone body:not(.day-mode) .maplibregl-ctrl-top-right .maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{filter:invert(1) brightness(1.4);}
html.atlas-phone #mClean[aria-pressed="true"]{border-color:rgba(67,214,207,.6);background:var(--accent-soft);color:var(--accent);}
html.atlas-phone #mTheme svg,html.atlas-phone #mClean svg{display:block}
/* per-group hiding */
html.atlas-phone.m-hide-hilow .m-card,html.atlas-phone.m-hide-hilow #mHi,html.atlas-phone.m-hide-hilow #mLo{display:none!important;}
html.atlas-phone.m-hide-legend #mLegend{display:none!important;}
html.atlas-phone.m-hide-marine .buoy-marker,html.atlas-phone.m-hide-marine .harbour-marker{display:none!important;}
html.atlas-phone.m-hide-buttons #mAbout,html.atlas-phone.m-hide-buttons #mTheme,html.atlas-phone.m-hide-buttons .maplibregl-ctrl-top-right{display:none!important;}
/* clean map: only the eye and the time bar stay */
html.atlas-phone.m-clean .m-card,html.atlas-phone.m-clean #mHi,html.atlas-phone.m-clean #mLo,html.atlas-phone.m-clean #mLegend,
html.atlas-phone.m-clean #mAbout,html.atlas-phone.m-clean #mMore,html.atlas-phone.m-clean #mTheme,html.atlas-phone.m-clean .maplibregl-ctrl-top-right,
html.atlas-phone.m-clean .buoy-marker,html.atlas-phone.m-clean .harbour-marker,html.atlas-phone.m-clean #mNight{display:none!important;}
html.atlas-phone.m-clean .m-dock{background:color-mix(in srgb,var(--panel) 80%,transparent);}
/* settings chips for the groups wrap neatly */
html.atlas-phone .m-vis{flex-wrap:wrap;}
html.atlas-phone .m-vis .m-chip[aria-pressed="false"]{opacity:.6;text-decoration:line-through;text-decoration-thickness:1px;}
/* hi/lo pills: a small pointer tail toward the station they describe */
html.atlas-phone .m-pill-map{min-height:32px;min-width:44px;padding:0 9px;border-radius:9px;font-size:13px;}
html.atlas-phone .m-pill-map.m-hi{box-shadow:inset 0 -3px 0 #ff7a59,0 4px 12px rgba(0,9,13,.25);}
html.atlas-phone .m-pill-map.m-lo{box-shadow:inset 0 -3px 0 #59a8ff,0 4px 12px rgba(0,9,13,.25);}
html.atlas-phone .m-pin{position:fixed;z-index:27;width:2px;background:currentColor;opacity:.8;pointer-events:none;color:var(--ink);transform-origin:top center;}
html.atlas-phone .m-pin::after{content:'';position:absolute;left:-3px;bottom:-4px;width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 2px rgba(0,0,0,.45);}
html.atlas-phone.m-hide-hilow .m-pin,html.atlas-phone.m-clean .m-pin{display:none!important;}
html.atlas-phone body.v9-map-first #marineMap .maplibregl-ctrl-top-right>.maplibregl-ctrl.maplibregl-ctrl-group.maplibregl-ctrl-group:has(.maplibregl-ctrl-geolocate){border-radius:12px!important;overflow:hidden!important;border:1px solid var(--line)!important;box-shadow:var(--shadow)!important;width:44px;height:44px}
html.atlas-phone body.v9-map-first #marineMap .maplibregl-ctrl-top-right>.maplibregl-ctrl-group>button.maplibregl-ctrl-geolocate{background:transparent!important;width:42px!important;height:42px!important;border:0!important}
/* ===== 9.15.8: weather at a glance ===== */
html.atlas-phone .m-card-old{display:none!important;}
html.atlas-phone .m-sum{position:fixed;z-index:31;left:10px;right:64px;top:calc(10px + env(safe-area-inset-top));
  padding:8px 10px 6px;border-radius:16px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--panel-solid) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,8,14,.28);color:var(--ink);}
html.atlas-phone .m-sum-top{display:flex;align-items:center;gap:6px;}
html.atlas-phone .m-sum-place{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:32px;padding:0 4px;border:0;background:none;color:var(--ink);font-family:inherit;font-weight:800;font-size:16px;line-height:1;text-align:left;}
html.atlas-phone .m-sum-place span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html.atlas-phone .m-sum-place svg{color:var(--accent);flex:none}
html.atlas-phone .m-sum-place i{font-style:normal;color:var(--muted);font-size:12px;}
html.atlas-phone .m-sum-fold{width:36px;height:32px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:14px;}
html.atlas-phone .m-sum-now{display:flex;align-items:center;gap:10px;margin:2px 0 4px;}
html.atlas-phone .m-sum-ico svg{width:44px;height:44px;display:block}
html.atlas-phone .m-sum-t{font-family:inherit;font-weight:800;font-size:42px;line-height:1;letter-spacing:-.03em;color:#ff9a6b;}
html.atlas-phone .m-sum-t.is-cold{color:#6fb6ff;}
html.atlas-phone .m-sum-meta{display:flex;flex-direction:column;gap:3px;font-size:13px;min-width:0}
html.atlas-phone .m-sum-meta small{color:var(--muted);font-size:11px;font-weight:600}
html.atlas-phone .m-sum-meta b{font-weight:800}
html.atlas-phone .m-arr{display:inline-block;font-style:normal;font-weight:900;color:var(--accent);}
html.atlas-phone .m-sum-hours{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -4px;padding:2px 4px 4px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;}
html.atlas-phone .m-sum-hours::-webkit-scrollbar{display:none}
html.atlas-phone .m-hr{flex:0 0 44px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0;border:1px solid transparent;border-radius:10px;background:rgba(255,255,255,.04);color:var(--ink);}
html.atlas-phone .m-hr:active{border-color:var(--accent);}
html.atlas-phone .m-hr small{font-size:11px;color:var(--muted);font-weight:700}
html.atlas-phone .m-hr span svg{width:22px;height:22px;display:block}
html.atlas-phone .m-hr b{font-size:13px;font-weight:800}
html.atlas-phone .m-hr em{font-style:normal;font-size:10px;color:var(--muted)}
html.atlas-phone .m-hr u{text-decoration:none;font-size:10px;color:#3fa7ff;min-height:10px;font-weight:700}
html.atlas-phone .m-sum-note{margin:4px;color:var(--muted);font-size:12px}
html.atlas-phone .m-sum-src{margin:2px 2px 0;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.atlas-phone .m-sum #mHilow{height:30px;margin:2px -4px 0;border-top:1px solid var(--line);padding-top:2px}
html.atlas-phone .m-sum #mHilow button{height:28px;min-height:28px;padding:0 8px;font-size:12px}
html.atlas-phone .m-sum #mHilow button b{font-size:13px}
html.atlas-phone .m-sum.is-collapsed .m-sum-hours,html.atlas-phone .m-sum.is-collapsed .m-sum-src,html.atlas-phone .m-sum.is-collapsed #mHilow,html.atlas-phone .m-sum.is-collapsed .m-sum-meta span:nth-child(n+2){display:none}
html.atlas-phone .m-sum.is-collapsed .m-sum-now{margin:0}
html.atlas-phone .m-sum.is-collapsed .m-sum-ico svg{width:30px;height:30px}
html.atlas-phone .m-sum.is-collapsed .m-sum-t{font-size:26px}
html.atlas-phone body.day-mode .m-sum{background:color-mix(in srgb,#fff 92%,transparent);}
html.atlas-phone body.day-mode .m-hr{background:rgba(0,40,60,.05)}
html.atlas-phone body.day-mode .m-sum-t{color:#e0612e}
html.atlas-phone body.day-mode .m-sum-t.is-cold{color:#1f7fd6}
html.atlas-phone.m-hide-hilow .m-sum #mHilow{display:none!important}
html.atlas-phone.m-clean .m-sum,html.atlas-phone.m-station .m-sum{display:none!important;}
/* VÍ maps: one tap, labelled */
html.atlas-phone #mPlayer{width:auto!important;min-width:64px!important;padding:0 10px!important;gap:6px;font-family:inherit;font-weight:800;font-size:12px;background:var(--accent-soft)!important;color:var(--accent)!important;}
html.atlas-phone #mPlayer svg{width:18px;height:18px}
html.atlas-phone body.v9-map-first #marineMap .maplibregl-ctrl-top-right>.maplibregl-ctrl-group:not(:has(.maplibregl-ctrl-geolocate)){display:none!important}
html.atlas-phone .m-sum-src{display:none}
html.atlas-phone #mPill{white-space:nowrap;font-size:13px;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
html.atlas-phone.m-clean body.v9-map-first #marineMap .maplibregl-ctrl-top-right,html.atlas-phone.m-hide-buttons body.v9-map-first #marineMap .maplibregl-ctrl-top-right{display:none!important}
/* menu sheet: size to its content instead of a mostly empty full-height page */
html.atlas-phone #mSheet[data-kind="menu"]{max-height:none;height:auto;}
html.atlas-phone #mTheme[aria-pressed="true"]{border-color:var(--line)!important;background:var(--panel-solid)!important;color:var(--ink)!important;}
html.atlas-phone body.day-mode.v9-map-first #marineMap .maplibregl-ctrl-top-right>.maplibregl-ctrl-group{background:rgba(250,252,252,.97)!important}
html.atlas-phone body.day-mode .maplibregl-ctrl-top-right .maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{filter:none!important}
html.atlas-phone #mPrev,html.atlas-phone #mNext{width:40px!important;min-width:40px!important}
html.atlas-phone #mPill{font-size:12.5px;padding:0 6px!important;letter-spacing:-.01em}
html.atlas-phone .m-sum-place{height:40px}html.atlas-phone .m-sum-fold{width:40px;height:40px}
/* 9.15.8: Meira lives in the dock (no floating ⓘ / Meira over the map) */
html.atlas-phone #mAbout{display:none!important}
html.atlas-phone .m-legrow{display:flex;align-items:center;gap:8px}
html.atlas-phone .m-legrow .m-legend{flex:1;min-width:0}
html.atlas-phone .m-dock .m-more{position:static!important;flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;min-width:0;padding:0 12px;box-shadow:none;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font:800 13px/1 system-ui,sans-serif}
html.atlas-phone .m-dock .m-more[aria-expanded="true"]{background:var(--accent-soft);color:var(--accent)}
/* 9.15.8: menu is a bottom sheet sized to content */
html.atlas-phone #mSheet[data-kind="menu"]{top:auto;bottom:0;max-height:88vh;border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.35)}
html.atlas-phone #mSheet[data-kind="menu"] .m-body{flex:none}
html.atlas-phone .m-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 12px}
html.atlas-phone .m-quick button{min-height:48px;border:1px solid var(--line);border-radius:12px;background:var(--accent-soft);color:var(--ink);font:750 13px/1.2 system-ui,sans-serif;padding:6px}
/* Hi/Lo chips in summary: 40px targets */
html.atlas-phone #mSum .m-hilow button{min-height:40px}