/* Keep canvas controls in stable single rows on small windows. The canvas
   camera handles content scaling, while controls retain useful touch size. */
body.workspace-canvas #canvasFullscreen{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;font-size:20px;line-height:1;touch-action:manipulation}
body.workspace-canvas #canvasFullscreen[aria-pressed="true"]{background:var(--soft,#e5f4ed);color:var(--accent,#087c58)}

@media(min-width:701px) and (max-width:1180px){
  body.workspace-canvas > header{height:92px;min-height:92px;grid-template-rows:38px 38px;align-content:center}
  .workspace-canvas .header-left{grid-row:1}
  .workspace-canvas .mode-switch{grid-row:1;position:static;left:auto;transform:none}
  .workspace-canvas .canvas-primary-actions{grid-row:1}
  .workspace-canvas .canvas-secondary-actions{grid-row:2;grid-column:1/-1;justify-self:stretch;min-width:0;width:100%;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;justify-content:safe center}
  .workspace-canvas #stage{top:92px;bottom:calc(var(--workspace-footer-height,50px) + 18px)}
}
@media(min-width:701px) and (max-width:900px){
  .workspace-canvas > footer{left:6px;right:6px;width:auto;max-width:none;transform:none;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;white-space:nowrap}
}

@media(max-width:700px){
  body.workspace-canvas > header{
    height:92px;min-height:92px;
    display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:38px 40px;
    align-content:center;gap:2px 6px;padding:4px 8px;
  }
  .workspace-canvas .header-left{grid-column:1;grid-row:1;min-width:0;overflow:hidden;white-space:nowrap}
  .workspace-canvas .mode-switch{grid-column:2;grid-row:1;position:static;left:auto;transform:none;justify-self:end}
  .workspace-canvas .canvas-actions{
    grid-column:1/-1;grid-row:2;display:flex!important;align-items:center;
    width:100%;min-width:0;gap:5px;overflow-x:auto;overflow-y:hidden;
    flex-wrap:nowrap;justify-content:flex-start;white-space:nowrap;
    overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x;
  }
  .workspace-canvas .canvas-primary-actions,
  .workspace-canvas .canvas-secondary-actions{display:flex;flex:0 0 auto;align-items:center;gap:5px;flex-wrap:nowrap;min-width:max-content}
  .workspace-canvas .canvas-primary-actions #workspaceSettingsButton{order:-1}
  .workspace-canvas .canvas-actions :is(button,a),
  .workspace-canvas .header-left :is(button,a),
  .workspace-canvas .mode-switch :is(button,a){display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:38px;padding:6px 8px;font-size:11px;white-space:nowrap}
  .workspace-canvas #stage{top:var(--workspace-header-height,92px);bottom:calc(var(--workspace-footer-height,52px) + 12px)}
  .workspace-canvas .stats{top:8px;left:8px;max-width:calc(100% - 16px);font-size:10px;padding:6px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .workspace-canvas > footer{
    left:6px;right:6px;bottom:max(6px,env(safe-area-inset-bottom));
    width:auto;max-width:none;height:52px;max-height:52px;
    display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;
    gap:3px;padding:5px 6px;overflow-x:auto;overflow-y:hidden;
    white-space:nowrap;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;touch-action:pan-x;
  }
  .workspace-canvas > footer > *{flex:0 0 auto}
  .workspace-canvas > footer button{min-width:40px;min-height:40px;padding:6px 8px;touch-action:manipulation}
  .workspace-canvas > footer .dock-separator{display:none}
  .workspace-canvas > footer .layout-tools:not([hidden]){display:flex;flex:0 0 auto;flex-wrap:nowrap}
}

/* On browsers without Fullscreen API, focus view still gives the canvas the
   available screen while keeping the dock visible for exit and editing. */
body.workspace-canvas.canvas-focus > header{display:none!important}
body.workspace-canvas.canvas-focus #stage{top:0!important;bottom:calc(var(--workspace-footer-height,52px) + 12px)}
body.workspace-canvas.canvas-focus #toast{top:8px!important}

/* A narrow screen is an overview, not a clipped strip of controls. Keep the
   complete dock and both header action groups visible without side scrolling. */
@media (max-width:700px){
  body.workspace-canvas > header{
    height:130px;min-height:130px;
    grid-template-rows:38px 38px 38px;
    align-content:start;row-gap:2px;padding:5px 8px;
  }
  .workspace-canvas .canvas-actions{
    grid-column:1/-1;grid-row:2/4;
    display:grid!important;grid-template-rows:38px 38px;
    row-gap:2px;overflow:visible;touch-action:auto;
  }
  .workspace-canvas .canvas-primary-actions,
  .workspace-canvas .canvas-secondary-actions{
    display:flex;min-width:0;width:100%;max-width:100%;
    overflow:visible;justify-content:flex-start;
  }
  .workspace-canvas .canvas-primary-actions{grid-row:1}
  .workspace-canvas .canvas-secondary-actions{grid-row:2}
  .workspace-canvas #stage{top:130px;bottom:104px}
  .workspace-canvas > footer{
    bottom:max(6px,env(safe-area-inset-bottom));
    display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
    grid-auto-rows:40px;gap:2px;
    height:auto;max-height:none;min-height:94px;
    padding:5px 6px;overflow:visible;white-space:normal;
  }
  .workspace-canvas > footer > *{min-width:0}
  .workspace-canvas > footer button,
  .workspace-canvas > footer .dock-add{
    width:100%;min-width:0;height:40px;min-height:40px;
    padding:3px 1px;font-size:10px;line-height:1.1;white-space:normal;
  }
  .workspace-canvas > footer #zoomLabel{display:grid;place-items:center;font-size:10px}
  .workspace-canvas > footer .layout-tools:not([hidden]){
    grid-column:1/-1;grid-row:span 2;display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;
  }
  .workspace-canvas > footer .layout-tools button{font-size:19px;line-height:1}
  body.workspace-canvas:has(> footer #groupSelected:not([hidden])) #stage{bottom:146px}
  body.workspace-canvas:has(> footer #layoutTools:not([hidden])) #stage{bottom:230px}
  body.workspace-canvas.canvas-focus #stage{top:0!important;bottom:104px!important}
  body.workspace-canvas.canvas-focus:has(> footer #groupSelected:not([hidden])) #stage{bottom:146px!important}
  body.workspace-canvas.canvas-focus:has(> footer #layoutTools:not([hidden])) #stage{bottom:230px!important}
}

@media (min-width:701px) and (max-width:900px){
  .workspace-canvas > footer{gap:3px;padding:5px 6px}
  .workspace-canvas > footer .dock-separator{display:none}
  .workspace-canvas > footer .selection-label{display:none}
}