/* One navigation layer above the workspace; physical flight controls stay below. */
:root{--app-top:calc(52px + env(safe-area-inset-top));--nav-left:max(10px,env(safe-area-inset-left));--nav-right:max(10px,env(safe-area-inset-right))}
[hidden]{display:none!important}
body .topbar,body.compact-flight .topbar{height:var(--app-top);padding:env(safe-area-inset-top) var(--nav-right) 0 var(--nav-left);background:#081218ed;pointer-events:auto;gap:10px;z-index:6}
.topbar .wordmark{flex:none;gap:7px}.topbar .wordmark b{font-size:11px;letter-spacing:1px}.topbar .brand-mark{font-size:27px}.topbar .sector{font-size:9px}
body .topbar nav{display:flex;gap:5px;min-width:0;align-items:center}
body .topbar nav button,body.compact-flight .topbar nav button{position:static;display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;min-width:48px;width:auto;max-width:145px;flex:none;padding:7px 9px;margin:0;font:10px monospace;letter-spacing:0;border-radius:5px;transform:none;overflow-wrap:anywhere;order:0}
.topbar button:before{width:15px;height:15px;flex-basis:15px;margin:0}.topbar button.ready{background:#d5b37c;color:#102026;border-color:#ddc490}.topbar button[aria-pressed=true]{border-color:#d5b37c;color:#edc789}
#depotNav{position:fixed;z-index:5;left:0;right:0;top:var(--app-top);height:48px;display:flex;justify-content:center;gap:5px;padding:2px var(--nav-right) 2px var(--nav-left);background:#102027;border-bottom:1px solid #a3b7a52b}
#depotNav button{flex:1;max-width:200px;min-width:0;min-height:44px;font:11px monospace;display:flex;align-items:center;justify-content:center;gap:6px;padding:4px;border:0}
#depotNav button:before{width:17px;height:17px;margin:0}#depotNav button[aria-pressed=true]{background:#33433c;box-shadow:inset 0 -3px #dfb779;color:#f3d6a8}
body .overlay,body.compact-flight .overlay{inset:var(--app-top) 0 0;padding:16px 12px;z-index:4}
body.at-depot .overlay{top:calc(var(--app-top) + 48px)}
.depot .workshop-tabs:empty{display:none}.depot-heading~.workshop-tabs{flex-wrap:wrap;overflow:visible}.depot-heading~.workshop-tabs button{min-height:44px;flex:1;min-width:0;font-size:10px;white-space:normal}
.lg-groups{display:flex;gap:6px;padding:4px 0;margin-bottom:6px}.lg-groups button{min-height:44px;flex:1;font:11px monospace}.lg-groups button[aria-pressed=true]{background:#31413b;color:#edce9a;border-color:#d6b177}.lg-tabs{margin-top:0}.lg-tabs button{min-height:44px}
.campaign-shortcuts{display:none!important}
body:not(.in-flight) .flight-bottom,body:not(.in-flight) .touch-controls{display:none!important}
.flight-bottom .toolstrip{margin:0}.flight-bottom{width:390px}.flight-bottom .controls{margin:10px 0 0}
#passiveNav{display:none;position:absolute;padding:0;border:1px solid #9abab23b;background:#0d1c22c9;border-radius:8px;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;pointer-events:auto}
#passiveNav canvas{display:block;width:100%;height:auto;min-height:0;pointer-events:none}#passiveLabel{font:7px monospace;color:#9bb8af;letter-spacing:.6px;line-height:12px;margin-top:-8px;pointer-events:none}
body.compact-flight.in-flight #passiveNav{display:flex;top:calc(var(--app-top) + 6px);right:var(--nav-right);width:84px;height:86px}
body.compact-flight #mobileVitals{top:calc(var(--app-top) + 6px);left:var(--nav-left);right:calc(var(--nav-right) + 92px);width:auto;min-height:44px}
body.compact-flight #mobileMessage{top:calc(var(--app-top) + 55px);left:var(--nav-left);right:calc(var(--nav-right) + 92px);width:auto;min-height:36px;max-height:44px;padding:4px 7px;font-size:10px}
.compact-flight #mobileVitals>button:before{width:12px;height:12px;flex-basis:12px}.compact-flight #mobileVitals>button{font-size:7px}.compact-flight #mobileVitals b{font-size:11px}
body .sheet-heading{position:sticky;top:-18px;z-index:3;background:#0d191f;display:flex;align-items:center;padding:10px 0;border-bottom:1px solid #8ba99b30;margin-bottom:12px}
#flightSheet .sheet-heading h2{margin:4px 0;font-size:19px}#flightSheet .sheet-heading #sheetReturn{width:auto;min-width:84px;height:44px;min-height:44px;margin:0;font:11px monospace;padding:8px;display:flex;gap:5px;align-items:center}
#flightSheet .sheet-tabs{position:static}.modal-nav{position:sticky;top:-30px;z-index:3;display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px 0;margin-bottom:12px;background:#111b20;border-bottom:1px solid #a9bfaa33}.modal-nav h2{margin:0;font-size:23px}.modal-nav button{min-height:44px;min-width:80px;font:11px monospace;padding:8px}
@media(max-width:1100px){.topbar .sector{display:none}}
@media(max-width:440px){body .topbar .wordmark b{display:none}body .topbar{gap:5px}body .topbar nav{gap:4px}body .topbar nav button,body.compact-flight .topbar nav button{font-size:9px;min-width:44px;padding:6px;gap:4px}.topbar nav button:before{width:13px;height:13px;flex-basis:13px}#depotNav button{font-size:10px;gap:4px}#depotNav button:before{width:14px;height:14px}}
@media(max-height:500px) and (orientation:landscape){
 body.compact-flight #mobileVitals{left:27%;right:calc(var(--nav-right) + 86px);max-width:480px;top:calc(var(--app-top) + 4px);min-height:38px}
 body.compact-flight #mobileMessage{left:27%;right:calc(var(--nav-right) + 86px);max-width:480px;top:calc(var(--app-top) + 47px);min-height:28px;max-height:32px;font-size:10px}
 body.compact-flight.in-flight #passiveNav{width:76px;height:76px;top:calc(var(--app-top) + 4px)}
 .compact-flight .flight-bottom{left:calc(192px + env(safe-area-inset-left));right:calc(102px + env(safe-area-inset-right));width:auto;bottom:var(--safe-bottom)}
}
@media(max-width:340px){#depotNav button:before{display:none}.compact-flight #mobileVitals .vital-label{font-size:6px}.compact-flight #mobileVitals>button:before{display:none}.compact-flight #mobileVitals:after{display:none}.compact-flight #mobileVitals b{font-size:10px}.compact-flight #mobileMessage:before{display:none}}

body .topbar #mapButton,body.compact-flight .topbar #mapButton{order:0;flex-direction:row}
body .topbar #mobileMenu,body.compact-flight .topbar #mobileMenu{order:1;flex-direction:row}
body .topbar #interact,body.compact-flight .topbar #interact{order:2;flex-direction:row}
body .topbar #navReturn,body.compact-flight .topbar #navReturn{order:3;flex-direction:row}
body .topbar #pause,body.compact-flight .topbar #pause{order:4;flex-direction:row}
body .topbar #mobileMenu,body.compact-flight .topbar #mobileMenu,body .topbar #mapButton,body.compact-flight .topbar #mapButton{width:auto;white-space:nowrap}
body .topbar nav button,body.compact-flight .topbar nav button{white-space:nowrap;max-width:none}
body .topbar #mapButton:before,body .topbar #mobileMenu:before{width:15px;height:15px;flex-basis:15px}
@media(max-width:440px){body .topbar nav button:before{display:none}body .topbar #mapButton:before,body .topbar #mobileMenu:before{display:block;width:13px;height:13px;flex-basis:13px}}
@media(max-width:340px){body.compact-flight #mobileVitals{gap:5px;padding:5px}body.compact-flight #mobileVitals>button{grid-template-columns:1fr;gap:0}body.compact-flight #mobileVitals b{white-space:nowrap}}