/* STORMWATCH 0.9.3: dedicated phone navigation, map-first layout, touch-safe controls.
   Desktop rendering is untouched. Mobile UI deliberately keeps existing panels mounted. */
.mobile-nav,.mobile-scrim,.mobile-sheet-close,.mobile-replay-toggle { display:none; }
@media (max-width:760px) {
  html,body { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
  body { font-size:14px; }
  #app { height:100vh; height:100dvh; min-height:0!important; width:100%; overflow:hidden; }
  .topbar { flex:0 0 54px; height:54px; min-height:54px; padding:0 10px; gap:4px; position:relative; z-index:25; }
  .brand { min-width:0; gap:6px; flex:0 1 auto; }
  .brand-icon, .brand small, .top-mid { display:none!important; }
  .brand strong { font-size:clamp(19px,5.8vw,24px); letter-spacing:.035em; white-space:nowrap; }
  .top-actions { gap:3px; flex:0 0 auto; }
  .top-actions .seg { height:36px; min-width:0; padding:6px 8px; font-size:9px; letter-spacing:0; }
  .top-actions .icon-button { margin-left:2px; min-width:32px; width:32px; height:36px; }
  .top-actions .release-opener { width:32px; min-width:32px; min-height:36px; height:36px; padding:0; font-size:0; letter-spacing:0; gap:0; }
  .top-actions .release-opener::before { content:"✦"; font-size:17px; color:#a5eaf7; }
  .top-actions .release-opener span { display:none; }
  .workarea { display:flex!important; flex-direction:column!important; flex:1 1 auto; min-height:0!important; overflow:hidden; position:relative; }
  .map-main { order:-1; flex:1 1 auto; height:100%; min-height:0!important; overflow:hidden; }
  .map-toolbar { padding:0 8px; height:47px; min-height:47px; flex:0 0 47px; overflow:hidden; }
  .map-toolbar .map-location { display:none!important; }
  .map-modes { min-width:0; width:100%; justify-content:flex-start; overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap!important; scrollbar-width:none; -webkit-overflow-scrolling:touch; gap:7px; }
  .map-modes::-webkit-scrollbar { display:none; }
  .map-modes .mini,.map-modes .map-top-controls .mini { min-height:36px; padding:9px 11px; font-size:10px; flex:0 0 auto; }
  .map-top-controls { flex:0 0 auto; }
  .map-top-controls #mapZoomLevel { display:none; }
  .mobile-replay-toggle { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
  .map-area { flex:1 1 auto; min-height:0!important; height:auto!important; touch-action:none; }
  #earthCanvas { touch-action:none; }
  .topleft { top:17px; left:13px; max-width:65%; }
  .topleft .eyebrow { font-size:8px; }
  .topleft h2 { font-size:clamp(21px,6.5vw,27px); margin:7px 0 6px; letter-spacing:.04em; }
  .topleft #mapSubtitle { max-width:230px; font-size:10px; line-height:1.35; }
  .map-compass { top:15px; right:8px; transform:scale(.85); transform-origin:top right; }
  .map-zoom { right:11px; bottom:90px; gap:7px; }
  .map-zoom button { min-width:44px; min-height:44px; font-size:24px; border-radius:7px; }
  .bottomleft { left:11px; bottom:60px; }
  .coord-bug { margin-bottom:0; font-size:9px; }
  .map-help { display:none; }
  .map-detail-status { left:9px; bottom:28px; max-width:min(55vw,200px); font-size:8px; }
  .map-attribution { right:7px; bottom:8px; max-width:52vw; font-size:8px; padding:3px 5px; }
  .map-info { top:auto; left:12px; right:65px; bottom:145px; max-width:unset; max-height:33vh; overflow:auto; font-size:12px; }
  .leftsidebar,.rightsidebar { position:fixed!important; top:auto; right:0; left:0; bottom:calc(65px + env(safe-area-inset-bottom,0px)); z-index:23; width:100%; height:min(76dvh,710px); max-height:calc(100dvh - 130px); min-height:0!important; max-width:none; border:1px solid #42687d; border-bottom:0; border-radius:15px 15px 0 0; box-shadow:0 -24px 55px #000b; display:flex!important; flex-direction:column; background:#0b1928; transform:translateY(110%); visibility:hidden; pointer-events:none; transition:transform .2s ease,visibility .2s; }
  body.mobile-sheet-open[data-mobile-sheet="left"] .leftsidebar,body.mobile-sheet-open[data-mobile-sheet="right"] .rightsidebar { transform:translateY(0); visibility:visible; pointer-events:auto; }
  .leftsidebar .panel-heading,.rightsidebar .panel-heading { padding:0 14px; height:52px; min-height:52px; gap:10px; background:#132a3b; }
  .panel-heading .small-id { display:none; }
  .mobile-sheet-close { display:inline-flex; margin-left:auto; align-items:center; justify-content:center; height:36px; min-width:44px; background:#1b3b50; border:1px solid #3d6980; border-radius:7px; color:#d4ebf5; font-size:19px; }
  .workspace-nav { display:none!important; }
  .side-content { overflow-y:auto; overscroll-behavior:contain; max-height:none!important; min-height:0!important; flex:1 1 auto; padding:14px 15px 30px; }
  .inspector-scroll { display:block; overflow-y:auto; max-height:none!important; min-height:0; padding:14px 16px 35px; }
  .inspector-scroll #inspector { width:100%; min-width:0; }
  .sidebar-footer { display:none; }
  .workspace-pane { animation:none; }
  .workspace-title { font-size:12px; }
  .storm-item { min-height:65px; padding:12px; }
  .storm-name { font-size:17px; }
  .storm-details { font-size:10px; }
  .inputbox input, .feed-disclosure>summary, .model-row strong, .radar-controls select, .satellite-controls select,.satmap-controls select { font-size:13px; }
  .layer-row { min-height:46px; font-size:13px; }
  .mini,.detail-btn,.large-action { min-height:40px; font-size:11px; }
  .layer-row input { transform:scale(1.2); margin-right:6px; }
  .workspace-pane input:not([type="checkbox"]):not([type="range"]),.workspace-pane select { min-height:40px; }
  .timeline-controls button { min-width:38px; min-height:38px; }
  .mobile-scrim { position:fixed; z-index:21; inset:54px 0 calc(65px + env(safe-area-inset-bottom,0px)); background:rgba(2,9,18,.65); }
  body.mobile-sheet-open .mobile-scrim { display:block; }
  .mobile-nav { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); position:fixed; z-index:30; bottom:0; left:0; right:0; height:calc(65px + env(safe-area-inset-bottom,0px)); padding:5px 4px calc(5px + env(safe-area-inset-bottom,0px)); border-top:1px solid #36566c; background:#0b1928; box-shadow:0 -5px 20px #0005; }
  .mobile-nav-button { min-width:0; min-height:49px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:1px solid transparent; border-radius:7px; background:none; color:#93aebf; padding:5px 0; font:700 9px/1.1 'IBM Plex Mono',monospace; }
  .mobile-nav-button .mobile-icon { font:20px/1.05 system-ui,sans-serif; }
  .mobile-nav-button.active { color:#b4eeff; background:#17374a; border-color:#34627b; }
  .archive-mode .mobile-nav-button.mode-live-only { display:none!important; }
  .archive-mode .mobile-nav { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .release-backdrop { z-index:100; }
  .toast { bottom:calc(79px + env(safe-area-inset-bottom,0px)); left:10px; right:10px; max-width:calc(100vw - 20px); }
  .modal-backdrop { z-index:60; }
}
@media (max-width:355px) {
  .brand strong { font-size:18px; }
  .top-actions .seg { font-size:8px; padding:6px 5px; }
  .mobile-nav-button { font-size:8px; }
  .mobile-nav-button .mobile-icon { font-size:18px; }
}
@media (max-width:760px) and (max-height:460px) {
  .topbar { flex-basis:46px; height:46px; min-height:46px; }
  .map-toolbar { height:40px; min-height:40px; flex-basis:40px; }
  .mobile-scrim { top:46px; }
  .leftsidebar,.rightsidebar { max-height:calc(100dvh - 90px); height:min(72dvh,360px); }
  .topleft #mapSubtitle,.map-compass { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .leftsidebar,.rightsidebar { transition:none; }
}