/**
 * GT_MOBILE_UI_FIX — mobile overlay (≤720). Desktop ≥721 untouched.
 * expand1: restore music look; force-open collapsibles; keep Tools sheet stack.
 */

/* —— Tools above Brief dock when sheet open (all viewports — sheet is mobile-only) —— */
body.gt-sheet-open #gt-tools-backdrop {
  z-index: 9400 !important;
}
body.gt-sheet-open #gt-tools-sheet {
  z-index: 9410 !important;
}
body.gt-sheet-open #gt-persist-chrome {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 720px) {
  /* Keep original music dock sizes (do NOT override 32px buttons here) */

  #gt-tools-fab {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  #gt-tools-sheet .gt-tools-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  #gt-main-tab-dd select,
  #gt-main-tab-dd .gt-view-select,
  #gt-main-tab-dd button {
    min-height: 44px !important;
  }

  /* Weather Maps: keep collapse toggle (Hide ▴ / Layers ▾) — do NOT force always-open */
  .weather-layer-menu.gt-weather-collapsible {
    z-index: 9250 !important;
  }
  .weather-layer-menu.gt-weather-collapsible .gt-weather-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0.35rem 0.85rem !important;
    font-size: 0.75rem !important;
  }
  .weather-layer-menu.gt-weather-collapsible .gt-weather-bar {
    display: flex !important;
    visibility: visible !important;
  }

  /* Hide Browse Show/Hide — content stays open for page scroll; Pull up stays */
  button.gt-mobile-hide-browse-toggle {
    display: none !important;
  }

  #root main .gt-pull-up-hint {
    min-height: 48px !important;
  }

  /* Flow Direction chips elsewhere — NOT map key pills (dock / Storms / Mapbox) */
  #root main .map-interactive .flex.gap-2 > span:not(.gt-mapbox-legend-chip),
  #root main .map-interactive span[class*="text-[9px]"]:not(.gt-mapbox-legend-chip),
  #root main .map-interactive span[class*="py-0.5"]:not(.gt-mapbox-legend-chip) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 0.45rem 0.85rem !important;
    font-size: 0.75rem !important;
    box-sizing: border-box !important;
  }

  /* Keep Storms / flat-map / Mapbox dock key pills compact */
  #root main .map-interactive .cyclone-map-view__legend span,
  #root main .map-interactive .climate-satellite-view__legend span,
  #root main .map-interactive .flat-map-leaflet-view .absolute.bottom-2.left-2 span,
  #root main .map-interactive .absolute.bottom-2.left-2 span,
  #root main .map-interactive .gt-mapbox-legend span,
  #root main .map-interactive .gt-mapbox-legend-chip,
  #gt-map-legend-dock span,
  #gt-map-legend-dock .gt-map-legend-clone span,
  #gt-map-legend-dock .gt-mapbox-legend-chip {
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0.12rem 0.35rem !important;
    font-size: 0.58rem !important;
    line-height: 1.2 !important;
  }

  #gt-map-legend-dock:not([hidden]) {
    display: flex !important;
    visibility: visible !important;
  }

  #root main .map-interactive button[class*="min-h-[28px]"],
  #root main .map-interactive button[class*="min-w-[36px]"] {
    min-height: 44px !important;
    min-width: 44px !important;
    font-size: 0.75rem !important;
  }

  #root main [class*="tab-nav-scroll"] button,
  #root main [class*="tab-nav-scroll"] a {
    min-height: 44px !important;
  }

  #gt-map-legend-dock {
    font-size: 0.58rem !important;
    line-height: 1.25 !important;
  }

  /* Snapshot status pills — mobile hide (PC keeps them) */
  #root main .map-interactive .gt-map-period--snapshot {
    display: none !important;
  }

  /* Page scroll outside map — reinforce shell */
  html,
  body {
    overflow-y: auto !important;
    height: auto !important;
    touch-action: pan-y !important;
  }
  #root,
  #root > div {
    overflow: visible !important;
    height: auto !important;
  }
  #root main .map-interactive,
  #root main .map-interactive canvas,
  #root main .leaflet-container {
    touch-action: none !important;
  }

  /* Compact Mini header only */
  html.wead-mini-embed #root > div > header,
  html[data-wead-mini-embed="1"] #root > div > header {
    min-height: 0 !important;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
  }
}

/* Non-Mini home indicator only — do not restyle music buttons */
html:not(.wead-mini-embed):not([data-wead-mini-embed="1"]) #gt-persist-chrome {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

@media (max-width: 820px) {
  body.gt-news-active .gt-news-stage,
  html.gt-news-active body .gt-news-stage {
    bottom: var(--gt-persist-chrome-h, 110px) !important;
  }
}

html.wead-mini-embed #wead-risk-panel,
html[data-wead-mini-embed="1"] #wead-risk-panel,
html.wead-mini-embed #wead-alerts-drawer,
html[data-wead-mini-embed="1"] #wead-alerts-drawer {
  height: 100% !important;
  max-height: 100dvh !important;
}

html.wead-mini-embed #root,
html[data-wead-mini-embed="1"] #root,
html.wead-mini-embed #root > div,
html[data-wead-mini-embed="1"] #root > div {
  min-height: 100% !important;
}

/* Hide Leaflet Mapbox attribution (flat tabs) + Mapbox GL wordmark */
.leaflet-control-attribution,
.leaflet-control-attribution a {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Hide Mapbox wordmark + compact attribution "i" (Mini + wead.live, all viewports) */
.gt-mapbox-globe-root .mapboxgl-ctrl-logo,
.gt-mapbox-globe-root a.mapboxgl-ctrl-logo,
.gt-mapbox-globe-root .mapboxgl-ctrl-attrib,
.gt-mapbox-globe-root .mapboxgl-ctrl-attrib-button,
.mapboxgl-ctrl-logo,
a.mapboxgl-ctrl-logo,
.mapboxgl-ctrl-attrib,
.mapboxgl-ctrl-attrib-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}