/* Keep the desktop workspace intact; small screens get one usable pane. */
#mobileMenu,#mobileActions,#mobileNavHead,#mobileWorkspaceTabs,#mobileBackdrop{display:none}
.mobileSelectionHint{display:none}
main > :is(#page,#left,#right){min-width:0}

@media screen and (max-width:1000px){
  :root,html.railMin{--railw:0px}
  html{height:100%;height:100dvh}
  body{height:100%;min-height:0}
  header{flex:none;gap:8px;padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));padding-top:max(8px,env(safe-area-inset-top));max-height:45dvh;overflow:auto;align-content:flex-start}
  header .brand{font-size:15px;display:flex;align-items:center;margin-right:auto}
  header .brand svg{margin-right:6px!important;width:24px;height:24px}
  header .brand>span,header>.spacer,header>.hdrGap{display:none}
  #mobileMenu{display:grid;place-items:center;width:44px;flex:none;padding:0}
  #mobileActions{display:block;flex:none;order:2}
  #btnAI{order:1;padding-inline:12px}
  #depotBox{order:3;flex:1 0 100%;min-width:0}
  #depotBox select{width:100%;max-width:100%;text-overflow:ellipsis}
  header>:is(.hdrWork,#btnFile,#btnImportRoutes){display:none;order:4}
  body.mobileActionsOpen header>:is(.hdrWork,#btnFile,#btnImportRoutes){display:flex;align-items:center;justify-content:center;flex:1 1 auto}
  body.mobileActionsOpen .hdrTitle{flex-basis:100%}
  body:is(.noFile,.monitoringView) #mobileActions{display:none}
  body.monitoringView :is(#btnFile,#btnImportRoutes){display:none}
  #routeDate{width:100%;text-align:center}
  #mobileActions[aria-expanded=true]{background:var(--accent-soft);border-color:var(--accent)}

  body main,body main.wide,body.noFile main,body.wizard main,body.wizard.wizMap main,body.monitoringView main{
    grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-width:0
  }
  #vsplit{display:none}
  #left{border:0}
  body:not(.wizard):not(.noFile):not(.monitoringView):not([data-mobile-pane=map]) #right{display:none}
  body:not(.wizard):not(.noFile):not(.monitoringView)[data-mobile-pane=map] #left{display:none}
  #mobileWorkspaceTabs{flex:none;display:flex;gap:6px;padding:6px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
  #mobileWorkspaceTabs button{flex:1;background:var(--panel2);color:var(--dim)}
  #mobileWorkspaceTabs button[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
  body:is(.locked,.noFile,.wizard,.monitoringView) #mobileWorkspaceTabs{display:none}

  #rail{position:fixed;inset:0 auto 0 0;width:min(320px,calc(100% - 36px));height:100%;height:100dvh;z-index:1800;visibility:hidden;transform:translateX(-100%);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);box-shadow:12px 0 36px #1b212626;transition:transform 180ms ease,visibility 180ms}
  body.mobileNavOpen #rail{visibility:visible;transform:translateX(0);transition-property:transform}
  #mobileNavHead{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-size:17px}
  #mobileMenuClose{width:44px;padding:0;font-size:25px;font-weight:400}
  #mobileBackdrop{display:block;position:fixed;inset:0;z-index:1700;background:#1b212680;border:0;border-radius:0;padding:0;transform:none}
  #mobileBackdrop:hover{background:#1b212680}
  #railToggle{display:none}
  #rail.min .nm,#rail.min .ar{display:block}
  #rail.min .rSub{display:flex}
  #rail .rSec,#rail.min .rSec{justify-content:flex-start;padding:12px 16px;min-height:48px;font-size:14px}
  #rail .rSub button{min-height:44px;padding:10px 16px 10px 43px;font-size:14px}
  #rail.min #macDownload{justify-content:flex-start;margin-inline:10px}
  #rail.min #macDownload span{display:inline}
  #macDownload{min-height:44px}

  #summary{flex:none;flex-wrap:nowrap;justify-content:flex-start;gap:20px;overflow-x:auto;padding:10px 12px;overscroll-behavior-x:contain}
  .stat{flex:none}
  #sWhoBox b{max-width:180px;overflow:hidden;text-overflow:ellipsis}
  .pgHead{flex-wrap:wrap;gap:8px;padding:14px 16px}
  .pgHead h1{width:100%;font-size:20px;line-height:1.3;overflow-wrap:anywhere}
  .pgHead .sp{display:none}
  .pgBody{padding:16px;min-width:0;overscroll-behavior:contain}
  .pgBody>*,.wizBox>*{max-width:100%}
  .pgNote,.gateHint,.wizWarn,.payBreakdown dt{overflow-wrap:anywhere}
  .pgBody table,.wizBox table{display:block;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
  .pane{overscroll-behavior:contain}
  .desktopSelectionHint{display:none}
  .mobileSelectionHint{display:inline}
  .pane>table{min-width:620px}
  .ordBar input,.searchBox{min-width:0;max-width:100%;width:100%}
  .ordBar{gap:8px}
  .wizField{align-items:stretch}
  .wizField label{min-width:0}
  .wizField input{max-width:100%}
  .integrationGrid,.appearanceFields{grid-template-columns:minmax(0,1fr)}
  .geocoderField{min-width:0}
  .geocoderField select{width:100%}
  .opsGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opsBars{overflow-x:auto}
  .band{flex-wrap:wrap;gap:10px;padding:12px 8px}
  .bandWho{width:100%;white-space:normal}
  .bandCells{flex:1 1 100%}
  .bandMeta{width:100%;text-align:left;display:flex;flex-wrap:wrap;gap:6px 12px}
  .bandMeta span{display:inline}
  .field{flex-wrap:wrap}
  .field input{flex:1 1 160px}
  .addGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .addBtns,.addWrap{flex-wrap:wrap}
  .payCard,.payEdit{padding:16px}
  .payFields{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
  .payResult{flex-wrap:wrap;padding:14px}
  .payUpload{flex-wrap:wrap;max-width:100%;margin-right:0}
  .payUpload input{max-width:100%}
  .secretMeta,.aiSectionTitle,.aiTokenField{flex-wrap:wrap}

  #zoneLayout{flex-direction:column;height:auto;min-height:100%;gap:12px}
  #zoneLayout .zoneCol,#zoneLayout.fleetOverview .zoneCol{width:100%!important;min-width:0;max-height:none;overflow:auto}
  #zoneMapHost{order:-1;flex:none;width:100%;min-width:0;height:clamp(280px,50dvh,480px)}
  #zoneSplit{display:none}
  #monScrub{max-width:calc(100% - 16px);gap:6px;padding:8px;flex-wrap:wrap}
  #monTime{min-width:60px}

  #empty{padding:24px 18px;justify-content:flex-start}
  #emptyLogo{flex:none;margin-top:auto}
  #empty #log{flex:none;margin-bottom:auto}
  #empty h1{font-size:22px;line-height:1.3}
  #empty .hint{font-size:12px}
  .emptyBtns{width:100%;gap:8px}
  .emptyBtns button{flex:1;padding-inline:14px}
  #drop{display:none}
  #resumeBox{flex-wrap:wrap;max-width:100%}
  #steps{flex:none;overflow-x:auto;padding:8px 8px 0}
  .stepBtn{flex:0 0 auto;min-width:100px}
  #stepNav{left:0;gap:8px;padding:8px 12px max(8px,env(safe-area-inset-bottom));box-shadow:0 -4px 18px #1b21260d}
  #stepHint{display:none}
  body.wizard main{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  #statusNotice{left:12px;max-width:calc(100vw - 24px);bottom:calc(76px + env(safe-area-inset-bottom))}
  #ruler{max-height:35%}
  #ruler .tabs{overflow-x:auto;flex:none}
  #pinEditBar{bottom:62px}
  #pinEditBar span{max-width:100%;white-space:normal}
  #btnLock{top:66px}
  #btnZones{top:116px}
  #mapMsg{max-width:calc(100% - 24px);white-space:normal}
  #baseBox{max-width:calc(100% - 70px);overflow-x:auto}
  #pop{max-width:calc(100% - 20px);max-height:70%;overflow:auto}

  .modalWrap{padding:12px;overflow:auto;align-items:flex-start}
  .modal,.modal.mv{padding:20px 16px;max-height:calc(100dvh - 24px);overflow:auto;margin-block:auto}
  .modal h2{font-size:17px;overflow-wrap:anywhere}
  .mBtns{flex-wrap:wrap}
  #gate{padding:16px;overflow:auto;align-items:flex-start}
  .gateBox{margin-block:auto;padding:28px 22px}
  #aiSidebar{inset:0 0 auto auto;width:100%;height:100dvh;height:var(--mobile-viewport-height,100dvh);top:var(--mobile-viewport-top,0px);z-index:2000;overflow-y:auto}
  .aiTop{padding-top:max(16px,env(safe-area-inset-top))}
  #aiChatForm{padding-bottom:max(16px,env(safe-area-inset-bottom))}
  #aiPreview{max-height:25dvh}
  #aiMessages{min-height:0}
  body.mobileShortViewport .aiTop{padding:8px 12px}
  body.mobileShortViewport .aiTop p,body.mobileShortViewport .aiContextNote{display:none}
  body.mobileShortViewport .aiToolbar{padding:6px 12px;gap:6px}
  body.mobileShortViewport #aiChatForm{padding-top:8px}
  button,.rowBtn,.chip,#pinEditBar button,.aiToolbar button{min-height:44px;-webkit-tap-highlight-color:transparent}
  #zoomBox button,.aiTop>button{width:44px;height:44px}
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),select,textarea{font-size:16px!important;min-height:44px;min-width:0;max-width:100%}
  input[type=checkbox],input[type=radio]{width:20px;height:20px;flex:none}
  /* Keep long native option labels inside the field on mobile WebKit. */
  select{height:44px;overflow:hidden;text-overflow:ellipsis}
  button.pointPick{width:44px;height:44px;min-height:44px}
}

@media screen and (max-width:360px){
  header{gap:6px;padding-inline:8px}
  header .brand{font-size:13px}
  header .brand svg{display:none}
  #mobileActions,#btnAI{padding-inline:8px;font-size:12px}
  .pgHead,.pgBody{padding-inline:12px}
  .payCard,.payEdit{padding:12px}
}