/* 9.19.11: map, one control row, one isobar switch, one small menu. */

html body #openReferencePlayer#openReferencePlayer{display:inline-flex!important;align-items:center;justify-content:center}

html body #isoLegendChip,
html body #isoLegendPop,
html body #legendPeek,
html body #mapLegend#mapLegend{display:none!important}

html.atlas-pro-phone body #surfaceFrameTrust#surfaceFrameTrust#surfaceFrameTrust{
  top:calc(env(safe-area-inset-top,0px) + 4px)!important;left:8px!important;right:calc(8px + var(--atlas-trust-avoid, 0px))!important;
  max-width:none!important;width:auto!important;height:22px!important;max-height:22px!important;box-sizing:border-box;
  padding:3px 22px 3px 8px!important;font-size:11px!important;line-height:16px!important;white-space:nowrap!important;z-index:30!important
}
html.atlas-pro-phone body #openReferencePlayer#openReferencePlayer,
html.atlas-pro-phone body #phoneMenuButton#phoneMenuButton{
  top:calc(env(safe-area-inset-top,0px) + 30px)!important;height:34px!important;min-height:34px!important;
  padding:0 10px!important;font-size:13px!important
}
html.atlas-pro-phone body #openReferencePlayer#openReferencePlayer{left:8px!important;min-width:72px!important;width:auto!important}
html.atlas-pro-phone body #phoneMenuButton#phoneMenuButton{left:88px!important;right:auto!important}
html.atlas-pro-phone body[data-frame-trust="hidden"] #openReferencePlayer#openReferencePlayer,
html.atlas-pro-phone body[data-frame-trust="hidden"] #phoneMenuButton#phoneMenuButton{top:calc(env(safe-area-inset-top,0px) + 8px)!important}

html.atlas-pro-phone body .layer-chips.layer-chips{
  top:calc(env(safe-area-inset-top,0px) + 70px)!important;left:8px!important;right:8px!important;
  max-width:none!important;width:auto!important;display:flex!important;flex-wrap:nowrap!important;
  gap:3px!important;overflow:visible!important;z-index:24
}
html.atlas-pro-phone body[data-frame-trust="hidden"] .layer-chips.layer-chips{top:calc(env(safe-area-inset-top,0px) + 48px)!important}
html.atlas-pro-phone body #layerChips#layerChips button{
  flex:1 1 0!important;width:auto!important;min-width:0!important;height:32px!important;
  padding:0 2px!important;font-size:11px!important;letter-spacing:-.03em!important;
  background:rgba(12,18,24,.9)!important;color:#f4f7f8!important;border:1px solid rgba(255,255,255,.35)!important;
  border-radius:8px!important;overflow:hidden!important;text-overflow:ellipsis!important
}
html.atlas-pro-phone body #layerChips#layerChips .chip-iso{flex:1.45 1 0!important;font-size:10px!important}
html.atlas-pro-phone body #layerChips#layerChips button.on,
html.atlas-pro-phone body #layerChips#layerChips .chip-iso[aria-pressed="true"]{background:#f4f7f8!important;color:#12181d!important;border-color:#f4f7f8!important}
html.atlas-pro-phone body #layerChips#layerChips .chip-iso.is-empty{background:rgba(70,78,84,.55)!important;color:#b7c2c8!important;border-color:rgba(255,255,255,.22)!important;opacity:.72!important}
html.atlas-pro-phone body #isoEmptyNote{position:fixed;z-index:23;top:calc(env(safe-area-inset-top,0px) + 122px);left:8px;right:64px;margin:0;padding:4px 8px;border-radius:8px;background:rgba(244,247,248,.94);color:#1a232b;font:650 11px/1.3 system-ui,sans-serif;pointer-events:none}
html.atlas-pro-phone body #isoEmptyNote[hidden]{display:none!important}

html.atlas-pro-phone body #marineMap .maplibregl-ctrl-top-right{
  top:calc(env(safe-area-inset-top,0px) + 8px)!important;right:8px!important;left:auto!important;bottom:auto!important;
  width:36px!important;height:36px!important;margin:0!important;overflow:visible!important
}
html.atlas-pro-phone body #marineMap .maplibregl-ctrl-top-right .maplibregl-ctrl{margin:0!important}
html.atlas-pro-phone body #marineMap .maplibregl-ctrl-top-right .maplibregl-ctrl-group{
  width:36px!important;height:36px!important;margin:0!important;box-shadow:0 1px 2px rgba(0,0,0,.35)!important
}
html.atlas-pro-phone body #marineMap .maplibregl-ctrl-top-right button.maplibregl-ctrl-geolocate{
  width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important
}
html.atlas-pro-phone body #bmPicker,html.atlas-pro-phone body #marineMap .bm-ctrl,html.atlas-pro-phone body .atlas-compass-ctrl:not(.rotated){display:none!important}
html.atlas-pro-phone body .atlas-compass-peek{display:none!important}
html.atlas-pro-phone body .atlas-compass-ctrl:not(.rotated) .atlas-compass-read{display:none!important}

html.atlas-pro-phone body #graphDockHandle{touch-action:none}

/* One row on every phone width: ‹  day  clock  ……  Tímabil  1×  ›  ▶
   then the slider. The clock is not a control. */
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem{
  left:6px!important;right:6px!important;width:auto!important;
  bottom:calc(48px + env(safe-area-inset-bottom,0px))!important;
  height:auto!important;max-height:none!important;overflow:visible!important;
  padding-bottom:0!important;background:rgba(10,14,18,.94)!important
}
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem[data-dock-mode="collapsed"]{
  height:auto!important;max-height:none!important;overflow:visible!important
}
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem[data-dock-mode="collapsed"] :is(#mapLayoutBar,#layoutStationPanel,#graphPanel,#graphSelectedValues,#officialInsight,#timelineInsight,#graphDockToggle,#dockColorToggle,#timelineMeta,#timeKind,#timeNow,.forecast-ribbon-wrap,.timeline-foot,#dockLead,#pastMeasureHint,#timelineDays,#timelineBubble,.time-ticks){display:none!important}
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem[data-dock-mode="collapsed"] :is(#timePrev,#timeNext,.timeline-day-select,#loopToggle,#loopSpeed,#timePlay,#timeLabel){display:inline-flex!important}
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #timeDock#timeDock{
  display:block!important;height:auto!important;min-height:0!important;grid-template-columns:1fr!important;
  padding:0 6px 8px!important;background:transparent!important;border:0!important
}
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem .timeline-main{
  display:flex!important;flex-direction:column!important;gap:4px!important;height:auto!important;min-height:0!important;grid-template-rows:none!important
}
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem .timeline-head,
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem .timeline-head.atlas-one-row{
  display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;
  justify-content:flex-start!important;gap:4px!important;height:36px!important;min-height:36px!important;max-height:36px!important;
  padding:0!important;width:100%!important;overflow:hidden!important
}
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem .timeline-live-label{display:none!important}
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem .timeline-actions{
  display:contents!important
}
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem .timeline-day-affordance{display:none!important}
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem :is(#timePrev,#timeNext){
  flex:0 0 32px!important;width:32px!important;min-width:32px!important;height:36px!important;min-height:36px!important;max-height:36px!important;
  margin:0!important;padding:0!important;border-radius:9px!important;border:1px solid rgba(255,255,255,.28)!important;
  background:rgba(255,255,255,.16)!important;color:#f4f7f8!important;font-size:20px!important;line-height:34px!important
}
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem .timeline-day-select{
  flex:0 0 68px!important;width:68px!important;min-width:68px!important;max-width:68px!important;height:36px!important;margin:0!important;padding:0!important
}
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #timelineDaySelect{
  display:block!important;width:68px!important;min-width:68px!important;max-width:68px!important;height:36px!important;min-height:36px!important;
  margin:0!important;padding:0 4px!important;border-radius:9px!important;border:1px solid rgba(255,255,255,.28)!important;
  background:rgba(255,255,255,.16)!important;color:#f4f7f8!important;font:650 13px/36px system-ui,sans-serif!important;
  text-overflow:clip!important;appearance:none!important;-webkit-appearance:none!important
}
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #timeLabel#timeLabel{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 52px!important;
  width:52px!important;min-width:52px!important;max-width:52px!important;height:36px!important;margin:0!important;padding:0!important;
  background:transparent!important;color:#f4f7f8!important;font:700 15px/36px ui-monospace,ui-sans-serif,system-ui,sans-serif!important;
  letter-spacing:-.02em!important;pointer-events:none!important;overflow:hidden!important;text-overflow:clip!important;white-space:nowrap!important
}
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem .loop-tools{
  display:flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:flex-start!important;gap:3px!important;
  min-width:0!important;height:36px!important;margin:0!important
}
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #loopToggle#loopToggle,
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #loopSpeed#loopSpeed,
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #timePlay#timePlay{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;height:36px!important;min-height:36px!important;max-height:36px!important;
  margin:0!important;padding:0 6px!important;border-radius:9px!important;border:1px solid rgba(255,255,255,.28)!important;
  background:rgba(255,255,255,.16)!important;color:#f4f7f8!important;font:650 12px/1 system-ui,sans-serif!important
}
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #loopToggle#loopToggle{flex:0 1 70px!important;width:auto!important;min-width:58px!important;max-width:74px!important}
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #loopSpeed#loopSpeed{flex:0 0 36px!important;width:36px!important;min-width:36px!important;padding:0!important}
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #timePlay#timePlay{flex:0 0 36px!important;width:36px!important;min-width:36px!important;padding:0!important;background:#f4f7f8!important;color:#12181e!important;border-color:#f4f7f8!important;position:static!important;top:auto!important;right:auto!important;font-size:0!important;line-height:0!important}
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #timePlay#timePlay svg{width:13px!important;height:13px!important;display:block!important}
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #timePlay#timePlay::before,
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #timePlay#timePlay::after{content:none!important;display:none!important}
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem .loop-caption{display:none!important}
html.atlas-pro-phone body #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #timelineTouch#timelineTouch{
  display:block!important;height:34px!important;min-height:34px!important;flex:0 0 34px!important;margin:0!important;width:auto!important;position:relative!important
}
html.atlas-pro-phone body #openReferencePlayer#openReferencePlayer#openReferencePlayer{
  display:inline-flex!important;z-index:50!important;top:calc(env(safe-area-inset-top,0px) + 8px)!important;left:8px!important;
  height:36px!important;min-height:36px!important;min-width:76px!important;padding:0 10px!important;
  background:#f4f7f8!important;color:#12181e!important;border:0!important;font-weight:750!important
}
html.atlas-pro-phone body #phoneMenuButton#phoneMenuButton{left:92px!important;top:calc(env(safe-area-inset-top,0px) + 8px)!important}
html.atlas-pro-phone body #surfaceFrameTrust#surfaceFrameTrust#surfaceFrameTrust{
  top:calc(env(safe-area-inset-top,0px) + 54px)!important;right:calc(8px + var(--atlas-trust-avoid, 0px))!important
}
html.atlas-pro-phone body .layer-chips.layer-chips{top:calc(env(safe-area-inset-top,0px) + 84px)!important}
html.atlas-pro-phone body[data-frame-trust="hidden"] .layer-chips.layer-chips{top:calc(env(safe-area-inset-top,0px) + 52px)!important}
html.atlas-pro-phone body #marineMap .maplibregl-ctrl-top-right{top:calc(env(safe-area-inset-top,0px) + 8px)!important;right:8px!important;width:36px!important;height:36px!important}

/* Beat the older 8-id column layout. One row, equal 36px controls, slider underneath. */
html.atlas-pro-phone body.v9-map-first #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #timeDock#timeDock .timeline-head.atlas-one-row{
  display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;
  justify-content:flex-start!important;gap:3px!important;height:36px!important;min-height:36px!important;max-height:36px!important;
  width:100%!important;padding:0!important;overflow:hidden!important
}
html.atlas-pro-phone body.v9-map-first #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #timeDock#timeDock .timeline-live-label{display:none!important}
html.atlas-pro-phone body.v9-map-first #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #timeLabel#timeLabel#timeLabel{
  display:inline-flex!important;flex:0 0 48px!important;width:48px!important;min-width:48px!important;max-width:48px!important;
  height:36px!important;margin:0!important;padding:0!important;background:transparent!important;color:#f4f7f8!important;
  font:700 14px/36px ui-monospace,system-ui,sans-serif!important;pointer-events:none!important;overflow:hidden!important;white-space:nowrap!important
}
html.atlas-pro-phone body.v9-map-first #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem :is(#timePrev,#timeNext){
  position:static!important;flex:0 0 30px!important;width:30px!important;height:36px!important;min-height:36px!important;margin:0!important
}
html.atlas-pro-phone body.v9-map-first #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem .timeline-day-select,
html.atlas-pro-phone body.v9-map-first #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #timelineDaySelect{
  display:inline-flex!important;flex:0 0 64px!important;width:64px!important;min-width:64px!important;max-width:64px!important;height:36px!important;min-height:36px!important
}
html.atlas-pro-phone body.v9-map-first #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #timelineDaySelect{display:block!important}
html.atlas-pro-phone body.v9-map-first #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem #timelineTouch#timelineTouch{
  margin:0!important;width:auto!important;height:34px!important;min-height:34px!important
}
html.atlas-pro-phone body.v9-map-first #weatherGraphSystem#weatherGraphSystem#weatherGraphSystem#weatherGraphSystem .timeline-band{
  color:transparent!important;font-size:0!important
}
html.atlas-pro-phone body.measured-time #particleCanvas#particleCanvas{opacity:1!important}

html.atlas-pro-phone body.v9-map-first #toolsMenu#toolsMenu{
  position:fixed!important;z-index:80!important;top:112px!important;bottom:auto!important;left:8px!important;right:auto!important;
  width:min(300px,calc(100vw - 16px))!important;max-height:min(430px,calc(100dvh - 220px))!important;
  border-radius:14px!important;padding-bottom:8px!important
}
html.atlas-pro-phone body #toolsMenu > :not(header):not(#simpleMenu){display:none!important}
#simpleMenu .simple-label{margin:8px 2px 4px;font:700 11px/1.2 system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#9aafb8}
#simpleMenu .simple-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}
#simpleMenu .simple-grid button,
#simpleMenu .simple-list button,
#simpleMenu [data-simple-lang]{
  width:100%;min-height:36px;border:1px solid rgba(180,222,225,.22);border-radius:8px;
  background:rgba(130,170,177,.08);color:#f4f7f8;font:650 12px/1.2 system-ui,sans-serif;text-align:left;padding:6px 8px
}
#simpleMenu .simple-list{display:grid;gap:4px}
#simpleMenu .simple-list small{display:block;font-size:10px;font-weight:500;color:#9aafb8}
#simpleMenu [aria-pressed="true"]{background:#e8eef2!important;color:#12181d!important;border-color:#e8eef2!important}
#simpleMenu [aria-pressed="true"] small{color:#3d4c55}