/* Keep figure names and the drawing visible together on small screens. */
@media(max-width:600px){
 html body.clp-mobile .app .body{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(140px,34%) minmax(0,1fr)!important;overflow:hidden}
 html body.clp-mobile .app .side{display:grid!important;position:relative!important;inset:auto!important;width:auto!important;z-index:auto!important;grid-template-rows:auto minmax(0,1fr);border-right:0;border-bottom:1px solid var(--line);overflow:hidden}
 html body.clp-mobile .app .component-list{overflow-y:auto;overscroll-behavior:contain;padding:5px 7px;gap:4px}
 html body.clp-mobile .app .component-row{flex-shrink:0;min-height:44px;padding:10px 12px 10px 14px}
 html body.clp-mobile .app .component-row b{font-size:13px;line-height:1.3}
 html body.clp-mobile .app .side-head{padding:5px 7px}
 html body.clp-mobile .app .figure-component-search{height:38px;font-size:16px}
 html body.clp-mobile .app .viewer{min-height:0;width:100%;height:100%}
 html body.clp-mobile .mobile-figure-items{display:none!important}
 html body.clp-mobile .app .zoom{top:6px;right:6px;gap:4px}
 html body.clp-mobile .app .zoom button{min-height:36px;padding:4px 8px}
}
@media(max-width:900px) and (orientation:landscape){
 html body.clp-mobile .app .body{grid-template-columns:minmax(160px,28%) minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important}
}
@media(max-width:600px){
 html body.clp-mobile .app .toolbar{display:flex!important;flex-wrap:nowrap!important;gap:4px!important;padding:6px!important;min-width:0;overflow:hidden!important}
 html body.clp-mobile .app .toolbar .toolbutton{padding:6px!important;gap:4px!important;font-size:11px!important;min-height:44px;white-space:nowrap}
 html body.clp-mobile .app .toolbar .components{flex:1 1 auto!important;min-width:0;margin-left:0;overflow:hidden}
 html body.clp-mobile .app .toolbar .components span{overflow:hidden;text-overflow:ellipsis}
 html body.clp-mobile .app .toolbar .navstep{flex:0 0 44px!important;width:44px!important;min-width:44px!important;height:44px!important;padding:0!important}
 html body.clp-mobile .app .toolbar .counter{flex:0 0 30px!important;min-width:30px!important;font-size:11px}
}
/* Show four component rows and reserve the remaining height for the figure. */
@media(max-width:600px) and (orientation:portrait){
 html body.clp-mobile[data-section="cockpit"] .app{gap:4px}
 html body.clp-mobile[data-section="cockpit"] .app .topbar{padding:3px 6px!important;min-height:48px!important}
 html body.clp-mobile[data-section="cockpit"] .app .toolbar{padding:3px 6px!important;min-height:50px!important}
 html body.clp-mobile[data-section="cockpit"] .app .side-head{padding:3px 7px!important}
 html body.clp-mobile[data-section="cockpit"] .app .figure-component-search{height:34px!important;min-height:34px!important}
 html body.clp-mobile[data-section="cockpit"] .app .body{grid-template-rows:239px minmax(0,1fr)!important}
}