/* EchoWx r169 Phase 2 — professional desktop/mobile layout polish
   Scope: UI/layout only. Does not alter radar frames, manifests, ingest, or map placement. */
:root {
  --echowx-phase2-bg: rgba(7, 10, 14, 0.82);
  --echowx-phase2-bg-strong: rgba(8, 11, 16, 0.94);
  --echowx-phase2-card: rgba(17, 22, 30, 0.82);
  --echowx-phase2-card-strong: rgba(17, 22, 30, 0.96);
  --echowx-phase2-line: rgba(255, 255, 255, 0.11);
  --echowx-phase2-line-soft: rgba(255, 255, 255, 0.075);
  --echowx-phase2-text: rgba(255, 255, 255, 0.92);
  --echowx-phase2-muted: rgba(255, 255, 255, 0.62);
  --echowx-phase2-dim: rgba(255, 255, 255, 0.42);
  --echowx-phase2-accent: #ff8a1f;
  --echowx-phase2-accent-2: #3bb7ff;
  --echowx-phase2-radius: 16px;
  --echowx-phase2-shadow: 0 18px 50px rgba(0,0,0,.36);
  --echowx-phase2-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html.echowx-phase2-layout,
html.echowx-phase2-layout body {
  font-family: var(--echowx-phase2-font);
}

html.echowx-phase2-layout body {
  background: #080a0d;
}

html.echowx-phase2-layout .mapboxgl-map,
html.echowx-phase2-layout .maplibregl-map,
html.echowx-phase2-layout .weather-map,
html.echowx-phase2-layout .persistent-weather-map {
  background-color: #090c10;
}

/* Make the map chrome feel intentional instead of boxed-in. */
html.echowx-phase2-layout .mapboxgl-ctrl-group,
html.echowx-phase2-layout .maplibregl-ctrl-group,
html.echowx-phase2-layout .map-control,
html.echowx-phase2-layout .map-control-button,
html.echowx-phase2-layout .map-time-badge,
html.echowx-phase2-layout .map-frame-time,
html.echowx-phase2-layout [class*="time-badge"] {
  background: rgba(6, 9, 13, .82) !important;
  border: 1px solid var(--echowx-phase2-line) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.28) !important;
  color: var(--echowx-phase2-text) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

html.echowx-phase2-layout .mapboxgl-ctrl-attrib,
html.echowx-phase2-layout .maplibregl-ctrl-attrib {
  opacity: .28;
  transform: scale(.9);
  transform-origin: right bottom;
}

/* Bottom navigation and dock polish. */
html.echowx-phase2-layout .workspace-bottom-nav,
html.echowx-phase2-layout .workspace-nav,
html.echowx-phase2-layout .app-bottom-nav,
html.echowx-phase2-layout .bottom-nav {
  background: linear-gradient(180deg, rgba(10,13,18,.88), rgba(7,9,13,.96)) !important;
  border-top: 1px solid var(--echowx-phase2-line) !important;
  box-shadow: 0 -18px 42px rgba(0,0,0,.36) !important;
  color: var(--echowx-phase2-muted) !important;
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

html.echowx-phase2-layout .workspace-bottom-nav button,
html.echowx-phase2-layout .workspace-nav button,
html.echowx-phase2-layout .app-bottom-nav button,
html.echowx-phase2-layout .bottom-nav button {
  border-radius: 12px !important;
  transition: background .16s ease, color .16s ease, transform .16s ease, border-color .16s ease;
}

html.echowx-phase2-layout .workspace-bottom-nav button:hover,
html.echowx-phase2-layout .workspace-nav button:hover,
html.echowx-phase2-layout .app-bottom-nav button:hover,
html.echowx-phase2-layout .bottom-nav button:hover {
  background: rgba(255,255,255,.07) !important;
  color: var(--echowx-phase2-text) !important;
}

html.echowx-phase2-layout .workspace-bottom-nav button.active,
html.echowx-phase2-layout .workspace-bottom-nav button[aria-current="page"],
html.echowx-phase2-layout .workspace-bottom-nav button[aria-pressed="true"],
html.echowx-phase2-layout .workspace-nav button.active,
html.echowx-phase2-layout .app-bottom-nav button.active,
html.echowx-phase2-layout .bottom-nav button.active {
  background: linear-gradient(180deg, rgba(255,138,31,.18), rgba(255,138,31,.08)) !important;
  border-color: rgba(255,138,31,.45) !important;
  color: #fff !important;
}

/* Radar bottom quick row becomes a compact professional dock. */
html.echowx-phase2-layout .workspace-bottom-radar-quick,
html.echowx-phase2-layout #echowx-radar-quick-slot > *,
html.echowx-phase2-layout .radar-quick-row,
html.echowx-phase2-layout .radar-control-footer,
html.echowx-phase2-layout .map-page-toolbar,
html.echowx-phase2-layout .workspace-bottom-controls {
  background: linear-gradient(180deg, rgba(13,17,24,.88), rgba(8,11,16,.94)) !important;
  border: 1px solid var(--echowx-phase2-line) !important;
  box-shadow: var(--echowx-phase2-shadow) !important;
  color: var(--echowx-phase2-text) !important;
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

html.echowx-phase2-layout .workspace-bottom-radar-quick {
  gap: 10px !important;
}

html.echowx-phase2-layout .workspace-bottom-segment,
html.echowx-phase2-layout .workspace-bottom-loop-segment,
html.echowx-phase2-layout .workspace-bottom-product-control,
html.echowx-phase2-layout .workspace-bottom-speed-control,
html.echowx-phase2-layout .workspace-bottom-radar-quick select,
html.echowx-phase2-layout .workspace-bottom-radar-quick button,
html.echowx-phase2-layout .radar-control-panel select,
html.echowx-phase2-layout .radar-control-panel button,
html.echowx-phase2-layout .map-page-toolbar select,
html.echowx-phase2-layout .map-page-toolbar button {
  background: rgba(255,255,255,.055) !important;
  border: 1px solid var(--echowx-phase2-line) !important;
  color: var(--echowx-phase2-text) !important;
  border-radius: 13px !important;
  box-shadow: none !important;
}

html.echowx-phase2-layout .workspace-bottom-loop-segment,
html.echowx-phase2-layout .workspace-bottom-segment {
  padding: 4px !important;
}

html.echowx-phase2-layout .workspace-bottom-loop-segment button,
html.echowx-phase2-layout .workspace-bottom-segment button {
  min-height: 34px !important;
  padding: 0 12px !important;
  font-weight: 760 !important;
  letter-spacing: .01em !important;
}

html.echowx-phase2-layout .workspace-bottom-loop-segment button.active,
html.echowx-phase2-layout .workspace-bottom-loop-segment button[aria-pressed="true"],
html.echowx-phase2-layout .workspace-bottom-segment button.active,
html.echowx-phase2-layout .workspace-bottom-segment button[aria-pressed="true"],
html.echowx-phase2-layout .workspace-bottom-radar-quick button.active,
html.echowx-phase2-layout .workspace-bottom-radar-quick button[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(255,138,31,.30), rgba(255,138,31,.14)) !important;
  border-color: rgba(255,138,31,.58) !important;
  color: #fff !important;
}

html.echowx-phase2-layout .workspace-bottom-radar-quick label,
html.echowx-phase2-layout .workspace-bottom-product-control label,
html.echowx-phase2-layout .workspace-bottom-speed-control label,
html.echowx-phase2-layout .radar-control-label {
  color: var(--echowx-phase2-dim) !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
}

html.echowx-phase2-layout .workspace-bottom-radar-quick select {
  height: 36px !important;
  padding: 0 34px 0 12px !important;
  font-weight: 750 !important;
}

/* Timeline polish */
html.echowx-phase2-layout .map-timeline,
html.echowx-phase2-layout .timeline-panel,
html.echowx-phase2-layout .timeline-bar,
html.echowx-phase2-layout .playback-bar {
  background: linear-gradient(180deg, rgba(7,10,14,.62), rgba(8,11,16,.92)) !important;
  border-top: 1px solid var(--echowx-phase2-line-soft) !important;
  color: var(--echowx-phase2-text) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

html.echowx-phase2-layout .timeline-play,
html.echowx-phase2-layout .timeline-button,
html.echowx-phase2-layout .play-button,
html.echowx-phase2-layout .playback-buttons button,
html.echowx-phase2-layout button[aria-label*="Play" i],
html.echowx-phase2-layout button[aria-label*="Pause" i] {
  border-radius: 999px !important;
  border: 1px solid var(--echowx-phase2-line) !important;
  background: rgba(255,255,255,.055) !important;
  color: var(--echowx-phase2-text) !important;
}

html.echowx-phase2-layout .timeline-play:hover,
html.echowx-phase2-layout .timeline-button:hover,
html.echowx-phase2-layout .play-button:hover,
html.echowx-phase2-layout .playback-buttons button:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.095) !important;
}

html.echowx-phase2-layout input[type="range"] {
  accent-color: var(--echowx-phase2-accent);
}

html.echowx-phase2-layout .latest-badge,
html.echowx-phase2-layout [class*="latest"] {
  border-radius: 999px !important;
  background: rgba(255,138,31,.14) !important;
  border: 1px solid rgba(255,138,31,.38) !important;
  color: #ffd4af !important;
  font-weight: 850 !important;
}

/* Desktop: make drawers/cards more premium. */
html.echowx-phase2-layout .workspace-settings-drawer,
html.echowx-phase2-layout .radar-control-panel,
html.echowx-phase2-layout .weather-detail-modal,
html.echowx-phase2-layout .detail-card,
html.echowx-phase2-layout .alert-popup,
html.echowx-phase2-layout .map-popup,
html.echowx-phase2-layout .mapboxgl-popup-content,
html.echowx-phase2-layout .maplibregl-popup-content {
  background: var(--echowx-phase2-card-strong) !important;
  color: var(--echowx-phase2-text) !important;
  border: 1px solid var(--echowx-phase2-line) !important;
  border-radius: var(--echowx-phase2-radius) !important;
  box-shadow: var(--echowx-phase2-shadow) !important;
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

html.echowx-phase2-layout .mapboxgl-popup-tip,
html.echowx-phase2-layout .maplibregl-popup-tip {
  border-top-color: rgba(17,22,30,.96) !important;
  border-bottom-color: rgba(17,22,30,.96) !important;
}

html.echowx-phase2-layout .workspace-settings-drawer header,
html.echowx-phase2-layout .radar-control-panel-header,
html.echowx-phase2-layout .detail-header,
html.echowx-phase2-layout .modal-header {
  border-bottom: 1px solid var(--echowx-phase2-line-soft) !important;
}

html.echowx-phase2-layout .workspace-settings-section-heading strong,
html.echowx-phase2-layout .radar-control-panel-header strong,
html.echowx-phase2-layout .detail-header strong,
html.echowx-phase2-layout .modal-header strong {
  color: var(--echowx-phase2-text) !important;
  letter-spacing: -.01em;
}

/* Larger, more readable city/place labels when labels are rendered by DOM overlays. */
html.echowx-phase2-layout .city-label,
html.echowx-phase2-layout .place-label,
html.echowx-phase2-layout [class*="city"][class*="label"],
html.echowx-phase2-layout [class*="place"][class*="label"] {
  color: #fff !important;
  font-weight: 850 !important;
  text-shadow: 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 2px 5px rgba(0,0,0,.9) !important;
}

/* Remove decorative loaders without hiding actual error/status text. */
html.echowx-phase2-layout .loading-sprite,
html.echowx-phase2-layout .radar-loading-sprite,
html.echowx-phase2-layout .loader-sprite,
html.echowx-phase2-layout .weather-loader-graphic,
html.echowx-phase2-layout .radar-loader-graphic,
html.echowx-phase2-layout [class*="loading-sprite"],
html.echowx-phase2-layout [class*="radar-loading"],
html.echowx-phase2-layout [class*="loader-graphic"] {
  display: none !important;
}

/* Mobile: map-first layout and bottom-sheet behavior. */
@media (max-width: 820px) {
  html.echowx-phase2-layout {
    --echowx-phase2-radius: 18px;
  }

  html.echowx-phase2-layout body {
    overscroll-behavior: none;
  }

  html.echowx-phase2-layout .workspace-bottom-radar-quick,
  html.echowx-phase2-layout .map-page-toolbar,
  html.echowx-phase2-layout .workspace-bottom-controls {
    max-width: calc(100vw - 14px) !important;
    margin-left: 7px !important;
    margin-right: 7px !important;
    border-radius: 18px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  html.echowx-phase2-layout .workspace-bottom-radar-quick::-webkit-scrollbar,
  html.echowx-phase2-layout .map-page-toolbar::-webkit-scrollbar,
  html.echowx-phase2-layout .workspace-bottom-controls::-webkit-scrollbar {
    display: none;
  }

  html.echowx-phase2-layout .workspace-bottom-radar-quick select,
  html.echowx-phase2-layout .workspace-bottom-radar-quick button,
  html.echowx-phase2-layout .workspace-bottom-loop-segment button,
  html.echowx-phase2-layout .workspace-bottom-segment button {
    min-height: 40px !important;
    font-size: 13px !important;
    flex: 0 0 auto;
  }

  html.echowx-phase2-layout .workspace-bottom-loop-segment,
  html.echowx-phase2-layout .workspace-bottom-segment,
  html.echowx-phase2-layout .workspace-bottom-product-control,
  html.echowx-phase2-layout .workspace-bottom-speed-control {
    flex: 0 0 auto;
  }

  html.echowx-phase2-layout .map-timeline,
  html.echowx-phase2-layout .timeline-panel,
  html.echowx-phase2-layout .timeline-bar,
  html.echowx-phase2-layout .playback-bar {
    min-height: 58px !important;
    padding-left: max(8px, env(safe-area-inset-left)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
  }

  html.echowx-phase2-layout .timeline-play,
  html.echowx-phase2-layout .timeline-button,
  html.echowx-phase2-layout .play-button,
  html.echowx-phase2-layout .playback-buttons button {
    min-width: 42px !important;
    min-height: 42px !important;
  }

  html.echowx-phase2-layout .workspace-settings-backdrop,
  html.echowx-phase2-layout .detail-backdrop,
  html.echowx-phase2-layout .modal-backdrop {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    background: rgba(0,0,0,.52) !important;
  }

  html.echowx-phase2-layout .workspace-settings-drawer,
  html.echowx-phase2-layout .weather-detail-modal,
  html.echowx-phase2-layout .official-text-section,
  html.echowx-phase2-layout .detail-modal,
  html.echowx-phase2-layout .modal,
  html.echowx-phase2-layout .alert-popup,
  html.echowx-phase2-layout .map-popup {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: min(84vh, 720px) !important;
    border-radius: 22px 22px 0 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  html.echowx-phase2-layout .workspace-settings-drawer::before,
  html.echowx-phase2-layout .weather-detail-modal::before,
  html.echowx-phase2-layout .detail-modal::before,
  html.echowx-phase2-layout .modal::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    margin: 10px auto 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
  }

  html.echowx-phase2-layout .workspace-settings-scroll,
  html.echowx-phase2-layout .weather-detail-modal,
  html.echowx-phase2-layout .detail-body,
  html.echowx-phase2-layout .modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html.echowx-phase2-layout .mapboxgl-popup,
  html.echowx-phase2-layout .maplibregl-popup {
    max-width: calc(100vw - 20px) !important;
  }

  html.echowx-phase2-layout .mapboxgl-popup-content,
  html.echowx-phase2-layout .maplibregl-popup-content {
    border-radius: 18px !important;
    max-height: 58vh;
    overflow-y: auto;
  }
}

@media (max-width: 520px) {
  html.echowx-phase2-layout .workspace-bottom-nav,
  html.echowx-phase2-layout .workspace-nav,
  html.echowx-phase2-layout .app-bottom-nav,
  html.echowx-phase2-layout .bottom-nav {
    font-size: 11px !important;
  }

  html.echowx-phase2-layout .workspace-bottom-nav button,
  html.echowx-phase2-layout .workspace-nav button,
  html.echowx-phase2-layout .app-bottom-nav button,
  html.echowx-phase2-layout .bottom-nav button {
    min-width: 54px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  html.echowx-phase2-layout .workspace-bottom-radar-quick label,
  html.echowx-phase2-layout .workspace-bottom-product-control label,
  html.echowx-phase2-layout .workspace-bottom-speed-control label {
    font-size: 9px !important;
  }
}