/* Scoped to the touch layout; desktop and read-only preview keep their own UI. */
.mobile-top,.mobile-nav,.mobile-sheet,.mobile-quick,.mobile-draft-quick{display:none}
body.mobile-editor{--mobile-green:#286658;--mobile-line:#dce4dd;--mobile-paper:#fffdf9;--mobile-bottom:calc(64px + env(safe-area-inset-bottom));font-size:14px}
.mobile-editor .app{display:block;position:relative;height:100dvh;padding:0;background:#f5f4ed}
.mobile-editor .app>header,.mobile-editor .app>footer{display:none}
.mobile-editor #stage{position:absolute;inset:110px 0 var(--mobile-bottom);width:auto;height:auto;min-width:0}
.mobile-editor .mobile-top{display:flex;position:absolute;inset:0 0 auto;flex-direction:column;gap:4px;padding:8px 12px;background:var(--mobile-paper);border-bottom:1px solid var(--mobile-line);height:110px;padding-top:max(8px,env(safe-area-inset-top))}
.mobile-title-row{display:flex;align-items:center;gap:12px;min-width:0}
.mobile-plan-name{min-width:0;flex:1;overflow:hidden}
.mobile-editor #studioName{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:#294c3e}
/* Share grid cells between labels and the selected background: no pixel offsets. */
.mobile-editor #viewSeg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(44px,auto);gap:2px;align-self:center;width:280px;max-width:100%;box-sizing:border-box;border-color:var(--mobile-line);margin:0;padding:1px;height:auto;flex-shrink:0;isolation:isolate}
.mobile-editor #viewSeg .btn{grid-row:1;min-width:0;width:100%;min-height:44px;box-sizing:border-box;padding:8px 10px;line-height:1.4;text-align:center}
.mobile-editor #viewSeg [data-view="2d"]{grid-column:1}
.mobile-editor #viewSeg [data-view="3d"]{grid-column:2}
.mobile-editor #viewSeg .pill{position:relative;grid-row:1;grid-column:1;inset:auto;align-self:stretch;width:auto;min-width:0;transform:none;pointer-events:none;transition:none}
.mobile-editor.m3d #viewSeg .pill{grid-column:2;transform:none}
.mobile-editor .btn,.mobile-editor .s-btn,.mobile-button{min-height:44px;min-width:44px;font-size:14px;touch-action:manipulation}
.mobile-editor button:active{filter:brightness(.92)}
.mobile-editor button:focus-visible,.mobile-editor summary:focus-visible{outline:2px solid var(--mobile-green);outline-offset:2px}
.mobile-editor [hidden]{display:none!important}
.mobile-editor .mobile-quick{display:flex;position:absolute;top:122px;left:10px;right:10px;gap:6px;z-index:4;pointer-events:none}
.mobile-quick>button{pointer-events:auto;background:#fffdf9!important;color:#294c3e!important;border:1px solid var(--mobile-line);box-shadow:0 2px 8px #263d3310}
.mobile-quick>button:last-child{margin-left:auto}
.mobile-nav{position:absolute;bottom:0;left:0;right:0;z-index:25;display:flex;align-items:stretch;padding:4px 4px max(4px,env(safe-area-inset-bottom));height:var(--mobile-bottom);border-top:1px solid var(--mobile-line);background:var(--mobile-paper)}
.mobile-nav .mobile-button{flex:1;border:0;background:none;color:#5b6c60;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;min-width:0;border-radius:10px;font-size:12px}
.mobile-nav svg{width:22px;height:22px}
.mobile-nav .on{color:var(--mobile-green);background:#e7efe7;font-weight:600}
.mobile-sheet{display:block;position:absolute;bottom:var(--mobile-bottom);left:0;right:0;z-index:24;border:1px solid var(--mobile-line);border-bottom:0;border-radius:20px 20px 0 0;background:var(--mobile-paper);box-shadow:0 -8px 28px #203e311a;max-height:52%;overflow:hidden;color:#263d33}
.mobile-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:6px 16px 0;touch-action:none;min-height:52px;border-bottom:1px solid var(--mobile-line)}
.mobile-sheet-head:before{content:'';position:absolute;top:5px;left:calc(50% - 16px);width:32px;height:3px;border-radius:4px;background:#b7c9bc}
.mobile-sheet-title{font-size:16px}
.mobile-collapse{border:0;background:transparent;color:var(--mobile-green)}
.mobile-sheet-page{padding:12px 16px 20px;overflow:auto;max-height:calc(48dvh - 52px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mobile-sheet-page>.btn,.mobile-sheet-page>.s-btn{margin:0 6px 8px 0;border:1px solid var(--mobile-line);background:#fff;border-radius:10px}
.mobile-note{font-size:13px;line-height:1.7;color:#526a5b;margin:8px 0}
.mobile-sheet-page .grp{flex-wrap:wrap;gap:6px;margin-bottom:12px;justify-content:flex-start}
.mobile-sheet-page .menu{width:100%}
.mobile-sheet-page .menu-pop{position:static;width:100%;box-shadow:none;display:grid;gap:8px}
.mobile-sheet-page .menu-pop .btn{text-align:left}
.mobile-sheet-page aside.lib,.mobile-sheet-page aside.right{position:static!important;display:block!important;transform:none!important;width:100%!important;max-width:none;max-height:none;border:0;overflow:visible;box-shadow:none}
.mobile-editor .mobile-sheet-page section{padding:8px 0;border:0}
.mobile-editor .mobile-sheet-page h3{margin:4px 0 12px;font-size:15px}
.mobile-editor .mobile-sheet-page input:not([type=range]),.mobile-editor .mobile-sheet-page select{font-size:16px;min-height:44px;max-width:100%}
.mobile-editor .lib-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0}
.mobile-editor .item{min-height:84px;padding:10px 4px}
.mobile-categories{display:flex;gap:8px;overflow:auto;padding-bottom:12px;position:sticky;top:-12px;background:var(--mobile-paper);z-index:2}
.mobile-categories button{flex-shrink:0;border:1px solid var(--mobile-line);border-radius:24px;padding:0 14px;background:#fff;color:#526a5b}
.mobile-categories button.on{background:var(--mobile-green);color:#fff;border-color:var(--mobile-green)}
.mobile-editor #fab{bottom:10px;max-width:calc(100% - 16px);overflow:auto;justify-content:flex-start;gap:2px;padding:4px;border-radius:12px}
.mobile-editor #fab .name,.mobile-editor #fab .sep{display:none}
.mobile-sheet-open #fab{display:none}
.mobile-editor .modehint{top:64px;max-width:calc(100% - 24px);font-size:12px}
.mobile-editor #hint3d{top:62px;bottom:auto;max-width:calc(100% - 24px);font-size:12px}
.mobile-editor #scalebar{bottom:76px;left:12px}
.mobile-editor .studio-dialog{max-width:100vw;max-height:100dvh;width:100vw;border-radius:0;margin:auto;padding:0}
.mobile-editor .studio-head{padding:12px;gap:8px}
.mobile-editor .studio-head h1{font-size:20px}
.mobile-editor .studio-head p{font-size:13px}
.mobile-editor .studio-head .studio-eyebrow{display:none}
.mobile-editor .studio-head .studio-actions{gap:6px;flex-wrap:wrap}
.mobile-editor .studio-body{padding:14px}
.mobile-editor .plan-grid{grid-template-columns:1fr}
.mobile-editor .studio-section{flex-wrap:wrap;gap:8px}
.mobile-editor .studio-foot{flex-wrap:wrap;gap:8px;padding:10px;font-size:12px}
.mobile-editor #studioEditor{height:100dvh;max-height:100dvh;width:100vw;max-width:100vw;position:fixed;inset:0;margin:0;padding:0 0 var(--mobile-bottom);overflow:hidden}
.mobile-editor #studioEditor .studio-head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:8px 10px;min-height:62px;border-bottom:1px solid var(--mobile-line)}
.mobile-editor #draftTitle{font-size:16px;margin:0}
.mobile-editor #studioEditor .draft-pill{display:none}
.mobile-editor #studioEditor .studio-actions .s-btn{padding:6px 10px;font-size:13px}
.mobile-editor #draftTools,.mobile-editor .draft-sidebar,.mobile-editor .draft-workflow,.mobile-editor .draft-save{display:none}
.mobile-draft-quick{display:flex;flex:none;gap:4px;padding:6px 8px;overflow-x:auto;border-bottom:1px solid var(--mobile-line);background:#fffdf9}
.mobile-draft-quick button{flex-shrink:0;padding:5px 10px;font-size:13px!important}
.mobile-editor #studioEditor .draft-layout{display:block;position:relative;flex:1;min-height:0;overflow:hidden}
.mobile-editor #studioEditor .draft-canvas{position:absolute;inset:0;min-height:0}
.mobile-editor #studioEditor .draft-help{left:8px;right:8px;bottom:8px;max-height:44px;overflow:auto;white-space:normal;padding:8px;font-size:12px;line-height:1.4;pointer-events:none}
.mobile-editor #studioEditor .canvas-navigation{right:8px;bottom:68px;gap:4px;padding:4px}
.mobile-editor #studioEditor .canvas-navigation button{padding:4px 8px;font-size:12px}
.mobile-editor #canvasZoomLabel{display:none}
.mobile-editor #canvasInspector{position:static!important;display:flex;flex-wrap:wrap;max-width:100%;width:100%;box-shadow:none;border:0;transform:none!important;padding:8px 0;margin-top:8px}
.mobile-editor #canvasInspector small{display:none}
.mobile-editor #canvasInspector input{width:100px}
.mobile-editor #studioEditor .mobile-sheet-page section{margin:0}
.mobile-editor #studioEditor .mobile-sheet-page label{display:flex;flex-direction:column;gap:6px;margin:0 0 12px;font-size:13px}
.mobile-editor #studioEditor .mobile-sheet-page input:not([type=range]),.mobile-editor #studioEditor .mobile-sheet-page select{width:100%;border:1px solid var(--mobile-line);border-radius:8px;padding:8px;background:white}
.mobile-settings summary{padding:12px 0;min-height:44px;cursor:pointer;color:#286658}
.mobile-editor .calibration-panel{padding:8px;gap:6px;max-height:150px;overflow:auto;flex:none;font-size:13px}
.mobile-editor .calibration-note{display:none}
.mobile-editor .calibration-panel label{display:flex;gap:6px;align-items:center}
.mobile-editor .calibration-panel input{font-size:16px;width:90px;min-height:44px}
.mobile-editor #draftNotice{font-size:13px;padding:8px 12px;max-height:92px;overflow:auto;flex:none}
.mobile-editor .publish-row{flex-wrap:wrap}
.mobile-editor .publish-row input{min-width:0;width:100%;font-size:16px}
@media(max-height:500px){.mobile-editor .mobile-top{height:62px;flex-direction:row;justify-content:space-between}.mobile-editor .mobile-title-row{flex:1}.mobile-editor #stage{top:62px}.mobile-editor .mobile-quick{top:70px}.mobile-editor .mobile-sheet{max-height:70%}.mobile-editor .mobile-sheet-page{max-height:calc(66dvh - 52px)}.mobile-editor .mobile-draft-quick{padding:2px 8px}.mobile-editor #studioEditor .studio-head{min-height:52px;padding:2px 10px}}
@media(prefers-reduced-motion:reduce){.mobile-editor *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Let the OS safe area expand the bar instead of compressing its controls. */
.mobile-editor .mobile-top{height:calc(114px + env(safe-area-inset-top))}
.mobile-editor #stage{top:calc(114px + env(safe-area-inset-top))}
.mobile-editor .mobile-quick{top:calc(126px + env(safe-area-inset-top))}
.mobile-editor #studioName{max-width:none}
.mobile-editor .mobile-sheet-page aside{height:auto;min-width:0}
.mobile-editor #studioEditor .studio-head{padding-top:max(8px,env(safe-area-inset-top))}
.mobile-editor #studioEditor [data-tool=door],.mobile-editor #studioEditor [data-tool=slide],.mobile-editor #studioEditor [data-tool=window]{touch-action:pan-y}
@media(max-height:500px){.mobile-editor .mobile-top{height:calc(66px + env(safe-area-inset-top))}.mobile-editor #stage{top:calc(66px + env(safe-area-inset-top))}.mobile-editor .mobile-quick{top:calc(74px + env(safe-area-inset-top))}}
.mobile-editor.m3d .mobile-quick #fit{display:none}
.mobile-editor .mobile-sheet-page #panel{min-width:0}

.mobile-editor #studioEditor details.canvas-navigation{right:6px;top:50%;bottom:auto;transform:translateY(-50%);padding:0;max-width:110px}.mobile-editor #studioEditor .canvas-navigation-controls .s-btn{min-height:44px;padding:6px 10px}.mobile-editor #canvasZoomLabel{display:block}

@media(max-height:500px){.mobile-editor #viewSeg{width:min(50%,280px);flex-shrink:1}}