/* Small-screen editor navigation and persistent save actions. */
@media(max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  .appbar{height:auto!important;min-height:62px;flex-wrap:wrap;padding:8px 12px!important;gap:8px}
  .appbar .logo{min-width:0;max-width:100%}
  .appbar .logo strong{font-size:clamp(16px,4vw,21px)}
  .appbar .nav{display:flex!important;order:4;flex:1 1 100%;width:100%;max-width:100%;overflow-x:auto;white-space:nowrap;scrollbar-width:thin}
  .appbar .nav .navbtn{flex-shrink:0}
  #editorPage.active .editor-shell{min-width:0;width:100%;grid-template-columns:minmax(0,1fr)}
  #editorPage.active .editor-main,#editorPage.active .editor-left,#editorPage.active .editor-right{min-width:0;max-width:100%}
  #editorPage.active .editor-top{position:sticky;top:0;z-index:110;background:#fffdf8;display:flex;flex-wrap:wrap;gap:7px;padding:9px 8px;border-bottom:1px solid #e6dccb;max-width:100%}
  #editorPage.active .editor-top .grow{display:none}
  #editorPage.active #saveBtn,#editorPage.active #duplicateDesignBtn,#editorPage.active #downloadBtn{display:inline-flex!important;visibility:visible!important;flex:1 1 125px;justify-content:center;white-space:normal;min-height:42px}
  #editorPage.active #saveStatus{flex:1 1 100%;order:3}
  #editorPage.active .canvas-wrap{max-width:100%;overflow-x:auto}
  #editorPage.active #editorDirectNavigation{bottom:calc(69px + env(safe-area-inset-bottom,0px))}
}

@media(max-width:760px){
 body:has(#editorPage.active) .mobile-dock{display:none!important}
 #editorPage.active .editor-shell{display:flex!important;flex-direction:column;gap:0}
 #editorPage.active .editor-main{order:2;width:100%;overflow:visible}
 #editorPage.active .editor-left,#editorPage.active .editor-right{display:none!important;order:3;width:100%;max-height:68dvh;overflow-y:auto;overscroll-behavior:contain;background:#fff;border-top:1px solid #dfcfad}
 #editorPage.active.mobile-panel-tools .editor-left{display:block!important}
 #editorPage.active.mobile-panel-customize .editor-right{display:block!important}
 #editorPage.active .editor-left .toolbtn{font-size:14px;min-height:44px}
 #editorPage.active .canvas-wrap{padding:8px 4px!important;overflow-x:hidden!important;min-height:0!important}
 #editorPage.active .canvas-card{margin-inline:auto;max-width:100%;height:auto}
 #editorPage.active #artboard{display:block;max-width:100%;height:auto}
 #editorPage.active .editor-top{top:0;max-height:45dvh;overflow-y:auto}
 #editorPage.active #editorDirectNavigation{bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:230}
 #editorPage.active .mobile-editor-switcher{order:1;position:sticky;top:0;z-index:115;display:flex;gap:7px;padding:9px;background:#fffaf0;border-bottom:1px solid #d9c59d}
 #editorPage.active .mobile-editor-switcher button{flex:1;min-height:43px;padding:7px 8px;border:1px solid #cdb783;border-radius:8px;background:#fff;font-weight:800;font-size:13px}
 #editorPage.active .mobile-editor-switcher button[aria-expanded=true]{background:#1c5246;color:#fff}
 #editorPage.active .mobile-editor-switcher button:focus-visible{outline:3px solid #9e7433}
 #editorPage.active .editor-top #saveBtn,#editorPage.active .editor-top #downloadBtn{position:relative}
 #editorPage.active .object-library{max-width:100%;overflow-x:hidden}
}
@media(min-width:761px){.mobile-editor-switcher{display:none!important}}

/* 2026-10-13 mobile canvas corrective patch: old artboard rule uses 55vw. */
@media (max-width:760px){
  #editorPage.active .editor-shell{display:flex!important;flex-direction:column!important;width:100%!important;min-width:0!important;min-height:0!important;overflow:visible!important}
  #editorPage.active .editor-main{display:block!important;width:100%!important;min-width:0!important;max-width:100vw!important;padding:10px!important;overflow:visible!important}
  #editorPage.active .canvas-wrap{position:relative!important;top:auto!important;display:flex!important;width:100%!important;min-width:0!important;justify-content:center!important;padding:12px 0!important;overflow:visible!important}
  #editorPage.active .canvas-card{display:block!important;width:100%!important;max-width:min(100%,540px)!important;min-width:0!important;padding:6px!important;height:auto!important}
  #editorPage.active svg#artboard{width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;aspect-ratio:4/5;display:block!important}
  #editorPage.active .editor-left,#editorPage.active .editor-right{width:100%!important;min-width:0!important;max-width:100%!important;flex:0 0 auto}
  #editorPage.active #editorDirectNavigation{position:relative!important;left:auto!important;top:auto!important;bottom:auto!important;margin:10px!important;display:flex!important;flex-wrap:wrap!important;width:calc(100% - 20px)!important;z-index:10!important}
  #editorPage.active .mobile-editor-switcher{width:100%!important;flex:0 0 auto!important}
  #editorPage.active .editor-top{position:relative!important;top:auto!important;max-height:none!important;overflow:visible!important;z-index:12!important}
  #editorPage.active .editor-top #saveBtn,#editorPage.active .editor-top #duplicateDesignBtn,#editorPage.active .editor-top #downloadBtn{min-width:0!important}
  body:has(#editorPage.active) .mobile-dock{display:none!important}
}

@media(min-width:761px){.mobile-photo-replace{display:none!important}}
@media(max-width:760px){
 #editorPage.active .mobile-photo-replace{display:flex;flex-direction:column;gap:5px;padding:10px 5px;align-items:stretch;background:#fffaf0;border:1px solid #ddc793;border-radius:10px;margin:9px 2px}
 #editorPage.active #mobileReplacePhoto{background:#235a50;color:white;border:0;border-radius:8px;min-height:48px;padding:12px;font-weight:800;font-size:15px}
 #editorPage.active .mobile-photo-replace span{font-size:12px;color:#655a45;line-height:1.4}
}