/**
* iPad editor shell — html.tg-ipad-editor-shell from js/ipad-shell-detect.js
* Fixes iPadOS desktop UA (pointer:fine) missing coarse-pointer tablet media queries.
* Phone + laptop/desktop untouched (class only on iPad 601–1440px).
*
* CRITICAL: Page classes (sketch-page, magic-blend-page, etc.) live on , NOT .
* Selectors must use html.tg-ipad-editor-shell body.sketch-page (page class on body).
*/
html.tg-ipad-editor-shell .qe-sidebar,
html.tg-ipad-editor-shell .qe-panel-right,
html.tg-ipad-editor-shell .tg-sidebar.qe-sidebar {
display: none !important;
}
html.tg-ipad-editor-shell .desktop-only {
display: none !important;
}
html.tg-ipad-editor-shell .mobile-only {
display: flex !important;
}
html.tg-ipad-editor-shell #qe-mobile-tool-strip,
html.tg-ipad-editor-shell body.magic-blend-page #mp-mobile-tool-strip {
display: flex !important;
flex-direction: column !important;
position: fixed !important;
top: 64px !important;
left: 0 !important;
bottom: 0 !important;
width: 60px !important;
justify-content: space-evenly !important;
align-items: center !important;
padding: 4px 0 !important;
z-index: 50 !important;
overflow-y: auto !important;
visibility: visible !important;
background: rgba(6, 23, 16, 0.65) !important;
border-right: 1px solid rgba(16, 185, 129, 0.15) !important;
}
/* sketch.css mobile band stops at 1024px — u-hidden on tool strip must not win on iPad shell */
html.tg-ipad-editor-shell #qe-mobile-tool-strip.u-hidden,
html.tg-ipad-editor-shell body.magic-blend-page #mp-mobile-tool-strip.u-hidden {
display: flex !important;
visibility: visible !important;
}
html.tg-ipad-editor-shell .qe-layer-fab {
display: inline-flex !important;
position: fixed !important;
top: 72px !important;
right: 12px !important;
z-index: 13010 !important;
}
/* Landscape iPad width is often 1025–1366px — sketch.css mobile band stops at 1024px */
html.tg-ipad-editor-shell #qe-mobile-composer.tg-composer {
display: block !important;
position: fixed !important;
bottom: 0 !important;
left: 60px !important;
right: 0 !important;
width: auto !important;
min-height: 0 !important;
padding: 8px !important;
z-index: 9999 !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
max-width: none !important;
overflow: visible !important;
}
html.tg-ipad-editor-shell .qe-layout {
display: block !important;
height: 100% !important;
min-height: 100vh !important;
position: relative !important;
}
html.tg-ipad-editor-shell .qe-panel-center {
position: fixed !important;
top: 64px !important;
left: 60px !important;
right: 0 !important;
bottom: 80px !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
z-index: 10 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
html.tg-ipad-editor-shell body.sketch-page .qe-panel-center,
html.tg-ipad-editor-shell body.talk-create-page .qe-panel-center,
html.tg-ipad-editor-shell body.magic-blend-page .qe-panel-center,
html.tg-ipad-editor-shell body.stencil-page .qe-panel-center,
html.tg-ipad-editor-shell body.quick-edit-page .qe-panel-center {
background: #000 !important;
}
html.tg-ipad-editor-shell #qe-canvas-container {
width: 100% !important;
height: 100% !important;
}
/* Desktop bucket hides canvas without input at 901px+ — iPad always uses mobile shell */
html.tg-ipad-editor-shell body.quick-edit-page #canvas-base,
html.tg-ipad-editor-shell body.quick-edit-page #canvas-mask,
html.tg-ipad-editor-shell body.quick-edit-page .qe-canvas-generating,
html.tg-ipad-editor-shell body.sketch-page #canvas-base,
html.tg-ipad-editor-shell body.sketch-page #canvas-mask,
html.tg-ipad-editor-shell body.sketch-page #canvas-preview,
html.tg-ipad-editor-shell body.talk-create-page #canvas-base,
html.tg-ipad-editor-shell body.talk-create-page #canvas-mask,
html.tg-ipad-editor-shell body.talk-create-page #canvas-preview,
html.tg-ipad-editor-shell body.magic-blend-page #canvas-base,
html.tg-ipad-editor-shell body.magic-blend-page #canvas-mask,
html.tg-ipad-editor-shell body.magic-blend-page #canvas-preview,
html.tg-ipad-editor-shell body.stencil-page #canvas-base,
html.tg-ipad-editor-shell body.stencil-page #canvas-mask {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
html.tg-ipad-editor-shell body.magic-blend-page #qe-canvas-container,
html.tg-ipad-editor-shell body.talk-create-page #qe-canvas-container,
html.tg-ipad-editor-shell body.sketch-page #qe-canvas-container {
opacity: 1 !important;
}
/* Stencil only: quick-edit.css tablet portrait transform:none breaks viewport positioning */
html.tg-ipad-editor-shell body.stencil-page .qe-canvas-wrap canvas {
transform: unset !important;
top: unset !important;
left: unset !important;
right: unset !important;
bottom: unset !important;
margin: unset !important;
max-width: none !important;
max-height: none !important;
}
html.tg-ipad-editor-shell .main-header,
html.tg-ipad-editor-shell .main-header *,
html.tg-ipad-editor-shell .sketch-recents-strip,
html.tg-ipad-editor-shell .sketch-recents-strip *,
html.tg-ipad-editor-shell .tryon-result-history,
html.tg-ipad-editor-shell .tryon-result-history * {
touch-action: manipulation !important;
}
html.tg-ipad-editor-shell body.sketch-page,
html.tg-ipad-editor-shell body.talk-create-page,
html.tg-ipad-editor-shell body.magic-blend-page,
html.tg-ipad-editor-shell body.stencil-page,
html.tg-ipad-editor-shell body.try-on-page,
html.tg-ipad-editor-shell body.quick-edit-page {
touch-action: manipulation !important;
}
html.tg-ipad-editor-shell body.quick-edit-page .qe-panel-center,
html.tg-ipad-editor-shell body.quick-edit-page #qe-canvas-container,
html.tg-ipad-editor-shell body.quick-edit-page #qe-mobile-tool-strip,
html.tg-ipad-editor-shell body.quick-edit-page #qe-mobile-composer {
touch-action: none !important;
}
/* Beat quick-edit portrait :not(.qe-has-input) hide + empty-state brown bleed */
html.tg-ipad-editor-shell body.quick-edit-page:not(.qe-has-input) #canvas-base,
html.tg-ipad-editor-shell body.stencil-page:not(.stencil-has-input) #canvas-base {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}