/* Desktop editor shell: keep the canvas visible while the tool rail scrolls. */
@media (min-width:901px) and (min-height:650px){
  body:has(#editor:not(.hidden)){overflow:hidden}
  body:has(#editor:not(.hidden)) .workspace{
    position:fixed;
    z-index:50;
    inset:72px 4vw 12px;
    margin:0;
    min-height:0;
    background:#faf8f2;
  }
  #editor:not(.hidden){
    height:100%;
    min-height:0;
    grid-template-columns:minmax(420px,1.08fr) minmax(480px,.92fr);
    grid-template-rows:auto minmax(0,1fr);
    overflow:hidden;
  }
  #editor .upload-toolbar{grid-row:1;grid-column:1/-1;min-height:58px}
  #editor .preview-panel{
    grid-row:2;
    grid-column:1;
    min-height:0;
    overflow:hidden;
    padding:24px;
  }
  #editor .image-stage{
    flex:1 1 auto;
    height:auto;
    min-height:0;
  }
  #editor .image-stage img{width:100%;height:100%;object-fit:contain}
  #editor .file-meta{flex:0 0 auto}
  #editor .controls{
    grid-row:2;
    grid-column:2;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    padding:28px 30px 70px;
    border-left:1px solid var(--line);
  }
  #editor .controls::-webkit-scrollbar{width:11px}
  #editor .controls::-webkit-scrollbar-track{background:#e9e5db}
  #editor .controls::-webkit-scrollbar-thumb{background:#23231f;border:3px solid #e9e5db}
  #editor .controls::-webkit-scrollbar-thumb:hover{background:#718200}
}

@media (min-width:901px) and (max-height:649px){
  #editor .preview-panel{position:sticky;top:12px;align-self:start;max-height:calc(100vh - 24px)}
  #editor .image-stage{height:calc(100vh - 135px);min-height:300px}
}