/* Responsive layer for the whole atlas — loaded on every page via the SEO head.
   Phones: stack the split layout (viz on top, panel scrolling below), free up
   the fixed header/footer, and shrink overlays. Uses !important so it overrides
   each page's desktop styles regardless of stylesheet order. */
@media (max-width: 760px){
  html, body{ overflow-x:hidden !important; overflow-y:auto !important; height:auto !important; }

  /* header */
  header{ height:auto !important; min-height:46px; flex-wrap:wrap; gap:7px; padding:7px 12px !important; }
  header h1{ font-size:12px !important; letter-spacing:.2px; }
  header h1 .a{ display:none !important; }      /* drop the long "› subtitle" on phones */
  header .right{ display:none !important; }
  header nav, header .atlasnav{ flex-wrap:wrap; }

  /* split layouts -> single column */
  #app{ flex-direction:column !important; height:auto !important; min-height:100vh; padding-top:56px !important; padding-bottom:0 !important; }
  #map, #stage, #graph{ flex:none !important; width:100% !important; height:58vh !important; min-height:300px; }
  #panel, #side{ width:100% !important; max-width:100% !important; border-left:none !important; border-top:1px solid var(--line) !important; padding:14px 16px !important; }

  /* landing globe already has its own column breakpoint; just ensure full-width panel */
  #wrap:has(#stage) #panel{ width:100% !important; }
  /* chokepoints: centered doc-flow layout */
  #wrap:has(#ccs){ padding:60px 12px 44px !important; }

  /* footer drops to the end of the document */
  footer{ position:static !important; left:0 !important; right:0 !important; width:100% !important; height:auto !important; white-space:normal !important; line-height:1.5; padding:9px 14px !important; }

  /* on-canvas overlays */
  #hint{ display:none !important; }
  #zoomctl{ right:8px !important; top:auto !important; bottom:62px !important; }
  #legend, #key{ font-size:9px !important; max-width:56%; padding:6px 8px !important; line-height:1.5; }
  #atlasGlobe{ width:50px !important; height:50px !important; }
}