/* Compact native Schemax view used by the mobility tutorial. */
body.mobility-tutorial-view{padding:8px;gap:8px;min-height:0}
.mobility-tutorial-view #sideMenus,.mobility-tutorial-view .header-actions,
.mobility-tutorial-view .view-cube-nav,
.mobility-tutorial-view #graphSection{display:none!important}
.mobility-tutorial-view #canvasWrapper{padding:10px;box-shadow:none;gap:8px}
.mobility-tutorial-view .canvas-area{display:block}
.mobility-tutorial-view .canvas-stage{width:100%;min-width:0!important;padding:0;box-shadow:none}
.mobility-tutorial-view #cinCanvas{height:280px!important;min-height:0!important;max-height:280px!important;width:100%;flex:none!important;pointer-events:none}
.mobility-tutorial-view .canvas-stage> :not(#cinCanvas){display:none!important}
.mobility-tutorial-view .schemax-brand{font-size:.85rem}
.mobility-tutorial-graph #canvasWrapper{display:none!important}
.mobility-tutorial-graph #graphSection{display:flex!important;padding:8px;box-shadow:none}
.mobility-tutorial-graph #graphSection h3{font-size:.85rem}
.mobility-tutorial-graph #structureGraph{width:100%;height:210px}
.mobility-coaxial-note{font-size:.85rem;line-height:1.5;margin:4px 0;color:var(--text-color)}

.mobility-tutorial-view #viewer3dSection{display:none!important;padding:0!important;box-shadow:none;min-width:0!important;width:100%;margin:0}
.mobility-tutorial-view.mobility-show-3d #viewer3dSection{display:flex!important}
.mobility-tutorial-view.mobility-show-3d .canvas-stage{display:none!important}
.mobility-tutorial-view #viewer3dCanvas{height:320px!important;min-height:320px!important}
.mobility-tutorial-view .viewer3d-zoom-control{display:none}
.mobility-tutorial-view .canvas-header{flex-wrap:wrap;gap:6px}
.mobility-view-tabs{display:flex;gap:6px}
.mobility-view-tabs button{padding:6px 10px;font-size:.85rem}
.mobility-view-tabs button[aria-pressed=true]{background:var(--navy)}
.mobility-tutorial-view #viewer3dInfo{font-size:.8rem;margin:0}
.mobility-multiview .mobility-multi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mobility-multiview .canvas-area{display:none!important}
.mobility-view-frame{min-width:0;padding:10px;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:12px}
.mobility-view-frame h3{font-size:.9rem;margin:0 0 8px}
.mobility-view-frame canvas,.mobility-multiview #cinCanvas{display:block;width:100%!important;height:230px!important;min-height:230px!important;max-height:230px!important;pointer-events:none}
.mobility-multiview #viewer3dSection{display:flex!important;grid-column:span 2;padding:10px!important;border:1px solid var(--panel-border);border-radius:12px}
.mobility-multiview #graphSection{display:flex!important;padding:10px;border:1px solid var(--panel-border);border-radius:12px;box-shadow:none}
.mobility-multiview #structureGraph{width:100%;height:260px}
.mobility-multiview #viewer3dCanvas{height:300px!important;min-height:300px!important}
.mobility-view-frame,.mobility-tutorial-view .canvas-stage,.mobility-tutorial-view #viewer3dCanvas{position:relative}
.mobility-incompatible .mobility-view-frame::after,
.mobility-incompatible:not(.mobility-multiview) .canvas-stage::after,
.mobility-incompatible #viewer3dCanvas::after{content:'✕';position:absolute;right:12px;top:38px;color:#c62828;background:rgba(255,240,240,.94);border:2px solid #c62828;border-radius:12px;width:58px;height:58px;display:grid;place-items:center;font:800 44px/1 Arial,sans-serif;pointer-events:none;z-index:5}
.mobility-motion-status{color:#c62828;font-size:.88rem;font-weight:700}
@media(max-width:650px){.mobility-multiview .mobility-multi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mobility-multiview #viewer3dSection{grid-column:span 1}.mobility-multiview #graphSection{grid-column:span 2}.mobility-multiview #structureGraph{height:180px}.mobility-multiview #viewer3dCanvas{height:230px!important;min-height:230px!important}}

body.mobility-tutorial-graph:has(#structureGraph) #structureGraph{height:340px}