/* Route-specific, isolated WXRadar navigation (all same-tab) */
#wxPortalNav{
 position:fixed;z-index:100050;display:flex;align-items:center;gap:3px;
 padding:6px;border:1px solid rgba(125,148,170,.35);border-radius:13px;
 background:rgba(245,248,252,.96);box-shadow:0 8px 24px #0002;
 backdrop-filter:blur(16px);font:700 12px/1.25 "DM Sans",system-ui,sans-serif;
 max-width:calc(100vw - 18px)
}
#wxPortalNav a{color:#30465b;text-decoration:none;border-radius:9px;padding:10px 12px;white-space:nowrap;
 transition:background .2s,color .2s;outline-offset:2px}
#wxPortalNav a:is(:hover,:focus-visible){background:#dae7ef;color:#132d40}
#wxPortalNav a.active{background:#d5eafa;color:#134f74}
body.ui-dark #wxPortalNav{
 background:rgba(11,21,34,.95);border-color:#394759;box-shadow:0 9px 24px #0006}
body.ui-dark #wxPortalNav a{color:#d1dce9}
body.ui-dark #wxPortalNav a.active{background:#1a486f;color:#eaf7ff}
body.ui-dark #wxPortalNav a:hover{background:#30455b}
/* RADAR desktop: selector below MAP TYPE and COUNTIES, top-right */
html[data-wx-page="radar"] #wxPortalNav{top:105px;right:18px;left:auto;transform:none}
/* METEOGRAMS + NWP: nav centered horizontally on all devices */
html[data-wx-page="meteograms"] #wxPortalNav,
html[data-wx-page="nwp"] #wxPortalNav{top:8px;left:50%;right:auto;transform:translateX(-50%)}
/* Meteograms: ONLY plain basemap + genuine original forecast launcher and graph */
html[data-wx-page="meteograms"] :is(#topbar,.tools-wrap,#quickMapTools,#legendDock,
 .timeline-panel,#attributionsControl,.radar-site-indicator,.radar-site-marker,
 .radar-marker,.radar-site-label,.radar-site-badge,#radarSiteStatusDock,
 #radar3dViewer,#satelliteLegend,#reflectivityLegend,.boundary-settings-panel,
 #wxWeatherModelsButton,.location-marker,.storm-tracking-panel){display:none!important}
html[data-wx-page="meteograms"] .meteogram-launcher{top:72px!important}
html[data-wx-page="meteograms"] .meteogram-panel:not(.is-hidden){
 width:min(1420px,calc(100vw - 28px))!important;
 height:min(820px,calc(100dvh - 94px))!important;
 max-height:calc(100dvh - 88px)!important;min-width:0!important}
/* NWP: exact original full-screen cassette, with space reserved for navigation */
html[data-wx-page="nwp"] :is(#topbar,.tools-wrap,#quickMapTools,.timeline-panel,
 #legendDock,#attributionsControl){display:none!important}
html[data-wx-page="nwp"] #wxWeatherModelsPanel.wx-open{padding-top:48px!important}
/* No extra native Meteograms Home control on desktop. */
#wxPortalHomeMobile{display:none}
@media(max-width:760px){
  #wxPortalNav{gap:1px;padding:4px;border-radius:11px;font-size:clamp(9px,2.65vw,11px)}
  #wxPortalNav a{padding:9px clamp(5px,1.6vw,9px)}
  html[data-wx-page="radar"] #wxPortalNav{display:none!important}
  #wxPortalHomeMobile{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
    height:auto;min-height:44px;max-height:57px;width:auto;min-width:64px;padding:0 12px;
    border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);
    background:rgba(241,245,249,.88);color:#152e41;font:800 12px/1.2 "DM Sans",system-ui,sans-serif;
    text-decoration:none;transition:background .2s,color .2s}
  body.ui-dark #wxPortalHomeMobile{background:#172334;color:#e5edf8;border-color:#485166}
  /* ensure it stays beside native Meteograms quick tool */
  body.meteogram-mode-active #wxPortalHomeMobile{opacity:1!important;width:auto!important;max-width:none!important;
    min-width:64px!important;padding:0 12px!important;transform:none!important;pointer-events:auto!important}
  html[data-wx-page="meteograms"] .meteogram-launcher{top:65px!important}
  html[data-wx-page="meteograms"] .meteogram-panel:not(.is-hidden){
    width:calc(100vw - 10px)!important;height:calc(100dvh - 82px)!important;
    max-height:calc(100dvh - 82px)!important}
  html[data-wx-page="nwp"] #wxWeatherModelsPanel.wx-open{padding-top:46px!important}
}

/* v8: lift navigation out of the main model toolbar; compact while keeping touch targets. */
html[data-wx-page="radar"] #wxPortalNav{top:86px!important;right:18px!important}
html[data-wx-page="nwp"] #wxPortalNav,
html[data-wx-page="meteograms"] #wxPortalNav{top:2px!important;left:50%!important;transform:translateX(-50%)!important}
html[data-wx-page="nwp"] #wxPortalNav a,
html[data-wx-page="meteograms"] #wxPortalNav a{padding-block:7px}
html[data-wx-page="nwp"] #wxWeatherModelsPanel.wx-open{padding-top:56px!important}
@media(max-width:760px){
 html[data-wx-page="radar"] #wxPortalNav{display:none!important}
 html[data-wx-page="nwp"] #wxPortalNav a,
 html[data-wx-page="meteograms"] #wxPortalNav a{padding:9px clamp(5px,1.5vw,9px)}
 html[data-wx-page="nwp"] #wxWeatherModelsPanel.wx-open{padding-top:54px!important}
}
/* Card styles are supplied by the Home document (not by this route CSS). */

/* v9.3: meteograms only — put the Leaflet provider credit at the bottom on phones.
   Retain the attribution and its links; never obscure the location picker. */
@media (max-width:760px) {
  html[data-wx-page="meteograms"] .leaflet-control-attribution,
  html[data-wx-page="meteograms"] .leaflet-bottom .leaflet-control-attribution {
    position:fixed !important;
    top:auto !important;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 7px) !important;
    left:calc(env(safe-area-inset-left, 0px) + 7px) !important;
    right:auto !important;
    width:max-content !important;
    max-width:calc(100vw - 18px) !important;
    max-height:64px !important;
    padding:3px 7px !important;
    overflow-wrap:anywhere;
    overflow-y:auto;
    font-size:9px !important;
    line-height:1.25 !important;
    text-align:left;
    z-index:1100 !important;
  }
}