/* One consistent layout for mouse, touch and changing device orientation. */
body.immersive {
 --inspector-width:clamp(320px,30vw,400px);
 --sheet-height:clamp(300px,44dvh,460px);
 --safe-top:env(safe-area-inset-top,0px);
 --safe-bottom:env(safe-area-inset-bottom,0px);
 --safe-left:env(safe-area-inset-left,0px);
 --safe-right:env(safe-area-inset-right,0px);
}
.im-panel {width:var(--inspector-width);inset:0 0 0 auto;height:100dvh;border-radius:0}
.im-panel.wide {width:min(850px,100vw)}
.im-drilling .im-view {right:var(--inspector-width);bottom:0}
.im-drawing {inset:0 var(--inspector-width) 0 0}
.im-top {padding:calc(10px + var(--safe-top)) calc(12px + var(--safe-right)) 10px calc(12px + var(--safe-left))}
.im-top-group {gap:6px}
.im-icon {width:44px;height:44px;min-height:44px}
.im-icon.lang {width:58px}
.im-panel-head {min-height:56px;padding:6px 8px;gap:4px}
.im-panel-head .im-prev,.im-panel-head .im-x,.im-panel-head .im-drill-scan {width:44px;height:44px;min-width:44px;min-height:44px;padding:7px;flex-shrink:0}
.im-part-title {font-size:12px;min-height:44px;padding:4px;line-height:1.4}
.im-partcounter {font-size:10px}
.dp-tools {gap:4px;padding:5px 8px;min-height:50px;flex-wrap:wrap}
.dp-tools>button {width:44px;min-width:44px;min-height:44px;font-size:14px}
.dp-dimmodes {flex:1;min-width:100px}
.dp-dimmodes button {min-height:40px;flex:1;font-size:11px;padding:5px}
.dp-facebar button,.dp-filters button {min-height:44px;font-size:11px;padding:8px 10px}
.dp-facebar b {font-size:11px}
.dp-panel-material {font-size:11px;overflow-wrap:anywhere}
.drill-inspector .im-holedetail {font-size:12px}
.im-holes {font-size:11px}
.im-holes th {font-size:10px}
.im-holes tr[data-cad-hole] {height:44px}
.dp-group-header button {min-height:36px;font-size:11px}
.im-panel-body,.im-list-body,.im-menu,.dialog-body {overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.im-panel-bottom {padding:8px 10px calc(8px + var(--safe-bottom))}
.im-panel-bottom button,.im-viewback,.im-action {min-height:44px}
.dp-viewtools {top:calc(10px + var(--safe-top));right:calc(12px + var(--safe-right));gap:5px}
.dp-viewtools button {min-width:44px;min-height:44px;font-size:12px;padding:7px 10px}
.dp-details-toggle {display:none}
.dp-canvas {inset:calc(65px + var(--safe-top)) calc(10px + var(--safe-right)) calc(26px + var(--safe-bottom)) calc(10px + var(--safe-left))}
.dp-hint {bottom:calc(7px + var(--safe-bottom))}
.im-card {max-height:48dvh;overflow:auto;bottom:calc(12px + var(--safe-bottom));left:calc(12px + var(--safe-left))}
.im-card>.im-x {width:40px;height:40px;min-height:40px;right:5px;top:5px}
.im-card h2 {margin-right:34px}
.im-card p {font-size:12px}
.im-card-buttons button {font-size:11px;min-height:44px}
.im-animbar {bottom:calc(12px + var(--safe-bottom));max-width:calc(100vw - 24px);margin:0}
.im-animbar label {margin:0;font-size:12px}
.im-animbar input {min-height:36px}
.im-menu {top:calc(62px + var(--safe-top));right:calc(10px + var(--safe-right));max-height:calc(100dvh - 76px - var(--safe-top) - var(--safe-bottom))}
.im-menu button,.im-menu a,.im-menu-advanced summary {min-height:44px;font-size:13px}
.im-list {top:calc(65px + var(--safe-top));bottom:calc(10px + var(--safe-bottom));right:calc(10px + var(--safe-right));width:min(320px,calc(100vw - 20px))}
.im-search input,.im-scaninput input,.immersive dialog input,.immersive dialog select,.immersive dialog textarea {font-size:16px;min-height:44px}
.im-part,.im-picker-row {min-height:48px;font-size:12px}
.im-part small,.im-picker-row small {font-size:11px}
.im-list-actions button {min-height:40px;font-size:11px}
.im-search input {height:44px}
.im-module-select {min-width:44px;min-height:40px}
.immersive dialog {position:fixed;inset:auto 0 auto;top:calc(var(--im-visual-top,0px) + var(--im-visual-height,100dvh)/2);transform:translateY(-50%);margin:0 auto;max-height:calc(var(--im-visual-height,100dvh) - 24px);overflow:auto;width:520px;max-width:calc(100vw - 24px);padding:20px}
.immersive dialog .close {min-width:44px;min-height:44px}
.immersive .dialog-actions button,.immersive .dialog-actions a {min-height:44px;white-space:normal}
.im-help {width:44px;height:44px;bottom:calc(10px + var(--safe-bottom));right:calc(10px + var(--safe-right))}
.dp-tools button:disabled {opacity:.35;cursor:default}

/* Wide screens keep the model and inspector next to each other. */
@media(min-width:1101px){
 body.immersive:has(.im-card:not([hidden])) .im-animbar {left:auto;right:18px;transform:none;bottom:calc(14px + var(--safe-bottom))}
}

/* Portrait tablets get the same generous drawing area as portrait phones. */
@media(max-width:1100px) and (orientation:portrait){
 .im-panel {inset:auto 0 0;width:100%;height:var(--sheet-height);border-radius:16px 16px 0 0}
 .im-panel.wide,.im-panel.tall {width:100%;height:82dvh}
 .im-drilling .im-view {right:0;bottom:var(--sheet-height)}
 .im-drawing {inset:0 0 var(--sheet-height)}
 .dp-details-toggle {display:block}
 body.immersive.im-details-expanded {--sheet-height:min(78dvh,700px)}
 body.immersive.im-details-collapsed {--sheet-height:calc(58px + var(--safe-bottom))}
 .im-details-collapsed .drill-inspector .im-cadtools,.im-details-collapsed .drill-inspector .im-panel-body,.im-details-collapsed .drill-inspector .im-panel-bottom {display:none}
 .im-details-collapsed .drill-inspector .im-panel-head {padding-bottom:var(--safe-bottom);min-height:var(--sheet-height)}
 .im-card {max-width:calc(100vw - 24px - var(--safe-left) - var(--safe-right));width:480px}
 body.immersive:has(.im-card:not([hidden])) .im-animbar {bottom:calc(var(--im-card-height,220px) + 24px + var(--safe-bottom));width:min(340px,calc(100vw - 24px))}
 .im-qrhint {bottom:calc(16px + var(--safe-bottom))}
}
@media(max-width:620px){
 .im-top {padding-inline:calc(8px + var(--safe-left)) calc(8px + var(--safe-right));gap:4px}
 .im-top-group {gap:4px}
 .im-top [data-im=report] {display:none}
 .im-icon.lang {width:52px;font-size:11px}
 .im-viewcube {top:calc(65px + var(--safe-top));right:8px}
 .im-panel-head .im-prev,.im-panel-head .im-x,.im-panel-head .im-drill-scan {width:40px;min-width:40px;min-height:44px;height:44px}
 .im-part-title {font-size:11px}
 .dp-tools {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
 .dp-dimmodes {grid-column:1/-1;display:flex;margin:0;min-width:0}
 .dp-dimmodes button {min-height:36px}
 .dp-tools>button {width:100%;min-width:0;min-height:44px}
 .dp-facebar,.dp-filters {padding:7px 9px}
 .dp-facebar b {font-size:10px}
 .dp-viewtools {left:8px;right:8px;gap:4px;justify-content:flex-end}
 .dp-viewtools button {font-size:11px;padding:6px 9px}
 .dp-viewtools [data-im=close-panel] {display:none}
 .dp-canvas {inset:calc(62px + var(--safe-top)) 5px calc(24px + var(--safe-bottom))}
 .drill-inspector .im-holedetail {font-size:11px}
 .dp-panel-material {font-size:11px}
 .im-card {padding:12px;max-height:45dvh}
 .im-card p {font-size:12px;line-height:1.4}
 .im-card-buttons {gap:5px}
 .im-card-buttons button {font-size:11px;padding:7px 5px}
 .im-readonly {font-size:10px}
 .im-panel-bottom button {min-height:44px}
}
@media(max-width:350px){
 .im-top [data-im=hidden] {display:none}
 .im-top-group {gap:3px}
 .im-partcounter {display:none}
 .im-card-buttons {flex-wrap:wrap}
 .im-card-buttons button {flex:1 0 40%}
}
@media(max-height:500px) and (min-width:621px){
 body.immersive {--inspector-width:clamp(300px,40vw,340px)}
 .im-panel-head {min-height:48px;padding-block:3px}
 .dp-tools {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:4px 6px}
 .dp-dimmodes {grid-column:1/-1;display:flex;min-width:0;margin:0}
 .dp-dimmodes button {min-height:30px}
 .dp-tools>button {width:100%;min-width:0;min-height:40px}
 .im-panel-bottom {padding:5px 8px}
 .im-card {left:12px;max-width:48vw;max-height:calc(100dvh - 86px);bottom:10px}
 .im-animbar {left:auto;right:12px;transform:none;max-width:43vw}
 .im-viewcube {display:none}
}
@media(pointer:coarse){
 .im-panel-head .im-prev,.im-panel-head .im-x,.im-panel-head .im-drill-scan {min-width:44px;min-height:44px;width:44px;height:44px}
 .dp-facebar button,.dp-filters button,.dp-tools>button,.dp-dimmodes button,.im-menu button,.im-part,.im-module-select {min-height:44px}
}
@media print{.im-drawing{display:none!important}}

/* Public and owner pages share safe, readable forms on small screens. */
@media(max-width:850px){
 .workspace .heading-actions {flex-wrap:wrap}
 .topbar {flex-wrap:wrap;min-height:53px;height:auto;padding-block:8px}
 .crumb {min-width:0;overflow-wrap:anywhere;flex-wrap:wrap}
 dialog {max-height:calc(100dvh - 24px);overflow:auto}
 input,select,textarea {font-size:16px}
 .lp-nav,.lp-hero,.lp-section,.lp-footer {max-width:100%}
 .lp-nav {flex-wrap:wrap;gap:12px}
 .lp-hero>div,.lp-feature>div {min-width:0}
 .lp-hero h1 {overflow-wrap:anywhere}
 .lp-float {max-width:90%;white-space:normal}
}

@media(max-width:280px){.im-top [data-im=blocks]{display:none}.im-icon.lang{width:48px}.im-part-title{font-size:10px}.im-panel-head .im-prev,.im-panel-head .im-drill-scan{width:32px;min-width:32px;padding:5px}}

.drill-inspector{container-type:inline-size;container-name:inspector}
@container inspector (max-width:360px){.dp-tools{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}.dp-dimmodes{grid-column:1/-1;display:flex;min-width:0;margin:0}.dp-tools>button{width:100%;min-width:0;min-height:44px}}

@media(max-width:1100px){body.immersive.im-playing .im-card{display:none}body.immersive.im-playing:has(.im-card:not([hidden])) .im-animbar{bottom:calc(12px + var(--safe-bottom));left:50%;right:auto;transform:translateX(-50%);width:min(340px,calc(100vw - 24px));max-width:calc(100vw - 24px)}}
.landing .lp-hero::before{left:0;right:0}

.im-panel{padding-inline-end:var(--safe-right)}
.im-viewcube{top:calc(64px + var(--safe-top))}
.immersive dialog{left:var(--safe-left);right:var(--safe-right);max-width:calc(100vw - 24px - var(--safe-left) - var(--safe-right))}
@media(max-width:1100px) and (orientation:portrait){.im-panel{padding-inline-start:var(--safe-left)}}
@media(max-height:500px) and (min-width:621px){.im-card{left:calc(12px + var(--safe-left))}}