/* Mobile navigation and a portrait-only phone workspace. */
#nav-toggle,#nav-close,#nav-backdrop,#rotate-phone{display:none}
@media(max-width:900px){
 html,body{max-width:100%;overflow-x:clip}
 main{margin:0;padding:0 16px 20px;min-width:0}
 header{height:auto;min-height:68px;gap:12px;padding:10px 0;justify-content:flex-start}
 #nav-toggle{display:grid;place-items:center;flex:0 0 44px;height:44px;background:#12251a;border:1px solid #34573e;color:var(--lime);border-radius:4px;font-size:25px}
 header .breadcrumbs{display:none}
 header .account{min-width:0;max-width:none;margin-left:auto;gap:8px}
 .account #account-name{font-size:12px;overflow-wrap:anywhere;line-height:1.4}
 .account i{flex-shrink:0}.mobile-logout{min-height:44px;white-space:nowrap}
 #sidebar{position:fixed;inset:0 auto 0 0;width:min(320px,86vw);height:100dvh;padding:22px 18px;z-index:41;transform:translateX(-100%);visibility:hidden;transition:transform .2s ease,visibility .2s;overflow-y:auto;overscroll-behavior:contain;border-top:0}
 .nav-open #sidebar{transform:translateX(0);visibility:visible}
 #sidebar .brand{display:flex;margin:12px 35px 24px 0}
 #sidebar .section-name{display:none}
 #sidebar .aside-bottom{display:block;margin-top:auto;padding-top:24px}
 #sidebar .aside-bottom button{min-height:44px;font-size:14px}
 #sidebar nav{display:flex;flex-direction:column;gap:6px;margin:0 0 20px}
 #sidebar nav button{flex:none;width:100%;min-height:48px;padding:12px 14px;text-align:left;font-size:14px;white-space:normal}
 #sidebar nav button span{display:none}
 #nav-close{display:block;position:absolute;right:12px;top:12px;width:44px;height:44px;color:var(--ink)}
 #nav-backdrop:not([hidden]){display:block;position:fixed;inset:0;width:100%;height:100dvh;border:0;background:#000a;z-index:40}
 body.nav-open{overflow:hidden}
 .page-heading{margin:24px 0 20px;flex-wrap:wrap}.page-heading h1{font-size:30px;overflow-wrap:anywhere}
 .unit-grid,.module-grid,.command-slots,.form-grid,.device-summary{grid-template-columns:minmax(0,1fr)}
 .person-row,.section-command{flex-direction:column;align-items:stretch}
 .person-row>div,.panel-title>div,.unit-heading>div{min-width:0}
 .person-row strong,.person-row small,.panel h3,.module-card p{overflow-wrap:anywhere}
 .table-actions{width:100%;gap:8px;flex-wrap:wrap}.table-actions button{flex:1 1 auto;min-height:44px}
 .page-tools button,.page-actions button,.secondary,.primary{min-height:44px;white-space:normal}
 .page-actions{max-width:none}.structure-toolbar,.panel-title,.unit-heading{flex-wrap:wrap;gap:12px}
 .view-tabs{flex-wrap:wrap}.toolbar input{width:100%;margin-left:0}
 input,select,textarea{font-size:16px;min-width:0;max-width:100%}
 .panel-title{padding:16px}.module-card{padding:20px}.field-note{font-size:12px}
 dialog{padding:20px;max-height:calc(100dvh - 24px);overflow:auto;overflow-wrap:anywhere}
 dialog .icon-button{min-width:44px;min-height:44px}.dialog-actions{flex-wrap:wrap}
 #toast{bottom:18px;left:16px;right:16px;max-width:none}
}
body.phone-landscape{overflow:hidden}
body.phone-landscape>:not(#rotate-phone){display:none!important}
body.phone-landscape #rotate-phone{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--paper);padding:24px;text-align:center;z-index:100}
#rotate-phone>span{font-size:52px;color:var(--lime)}#rotate-phone h2{margin:8px 0}#rotate-phone p{margin:0}
@media(prefers-reduced-motion:reduce){#sidebar{transition:none}}