/* EarthWatch shell redesign, stage 5: responsive breakpoints.
   Loads after every other ew-shell-*.css stage.

   No max-width cap exists on #app anywhere in the codebase (checked),
   so 1080p/1440p/4K/ultrawide need no special-casing -- the rail/sidebar/
   feed stay fixed-width and the map (minmax(0,1fr)) just gets more room,
   which is the correct behaviour for a monitoring dashboard. This file
   only needs to handle viewports NARROWER than the 1440px design width
   (iPad and small laptop windows), by shrinking --cmd/--intel so nothing
   overflows or gets forced off-screen.

   Several older, now-partially-dead responsive rules exist from earlier
   #app layouts (a 3-column flex/grid structure that predates the current
   var(--cmd) minmax(0,1fr) grid -- see inline-2.css's max-width:1400/
   1100/900px blocks). Most of their declarations are already inert
   (beaten by !important rules elsewhere), but one is NOT and is worth
   guarding against explicitly: inline-2.css's
   `@media(max-width:900px){.live{display:none}}` has no !important and
   would hide the LIVE pill (#dataHealthButton) on a narrow/portrait
   device with nothing else currently stopping it. */

@media (max-width:1280px){
  :root{--intel:300px!important;}
}

@media (max-width:1000px){
  /* --cmd stays at the rail's own 60px -- #missionSidebar is permanently
     hidden now (region/hazard layers moved to panels), so there's no
     sidebar content left to make room for at any width. */
  :root{--intel:260px!important;}
}

@media (max-width:900px){
  #dataHealthButton{display:inline-flex!important;} /* guard against inline-2.css's .live{display:none} */
}

@media (max-width:860px){
  :root{--intel:0px!important;}
  .main>.side,.side{display:none!important;}
}