/* Editor chrome uses screen pixels even while the designed page is zoomed. */
.canvas-frame{
  --editor-inverse-zoom:1;
  --editor-screen-1px:1px;
  --editor-screen-2px:2px;
  --editor-screen-3px:3px;
  --editor-screen-4px:4px;
  --editor-screen-5px:5px;
  --editor-screen-5_5px:5.5px;
  --editor-screen-6px:6px;
  --editor-screen-8px:8px;
  --editor-screen-10px:10px;
  --editor-screen-11px:11px;
  --editor-screen-30px:30px;
  --editor-stroke:var(--editor-screen-1px);
  --editor-stroke-2:var(--editor-screen-2px);
  --editor-glow:var(--editor-screen-4px);
}

/* Block and component action bars. */
.canvas-frame .section-tools{
  top:var(--editor-screen-5px);
  right:var(--editor-screen-5px);
  transform:scale(var(--editor-inverse-zoom));
  transform-origin:top right;
}
.canvas-frame .component-actions{
  top:calc(0px - var(--editor-screen-30px));
  transform:scale(var(--editor-inverse-zoom));
  transform-origin:top right;
}

/* Block labels and legacy section labels. */
.canvas-frame .block-name-tag{
  top:var(--editor-screen-6px);
  transform:scale(var(--editor-inverse-zoom));
  transform-origin:top left;
}
.canvas-frame .canvas-section:not(.unified-block)>.element-tag{
  left:var(--editor-screen-6px)!important;
  top:var(--editor-screen-6px)!important;
  transform:scale(var(--editor-inverse-zoom));
  transform-origin:top left;
}

/* Locked-state badges. */
.canvas-frame .unified-block.locked::after{
  right:var(--editor-screen-8px);
  bottom:var(--editor-screen-8px);
  transform:scale(var(--editor-inverse-zoom));
  transform-origin:bottom right;
}
.canvas-frame .canvas-component.locked::after{
  transform:scale(var(--editor-inverse-zoom));
  transform-origin:top right;
}

/* Component resize handle. Logical dimensions compensate for parent zoom. */
.canvas-frame .resize-handle{
  right:calc(0px - var(--editor-screen-5_5px));
  bottom:calc(0px - var(--editor-screen-5_5px));
  width:var(--editor-screen-11px);
  height:var(--editor-screen-11px);
  border-width:var(--editor-screen-2px);
  border-radius:var(--editor-screen-3px);
  box-shadow:0 0 0 var(--editor-screen-1px) var(--primary);
}

/* Eight block resize handles keep both their visuals and hit targets usable. */
.canvas-frame .block-resize-handle.edge-top,
.canvas-frame .block-resize-handle.edge-bottom{
  left:var(--editor-screen-10px);
  right:var(--editor-screen-10px);
  height:var(--editor-screen-8px);
}
.canvas-frame .block-resize-handle.edge-top{top:calc(0px - var(--editor-screen-4px))}
.canvas-frame .block-resize-handle.edge-bottom{bottom:calc(0px - var(--editor-screen-4px))}
.canvas-frame .block-resize-handle.edge-top::after,
.canvas-frame .block-resize-handle.edge-bottom::after{
  top:var(--editor-screen-3px);
  height:var(--editor-screen-1px);
}
.canvas-frame .block-resize-handle.edge-left,
.canvas-frame .block-resize-handle.edge-right{
  top:var(--editor-screen-10px);
  bottom:var(--editor-screen-10px);
  width:var(--editor-screen-8px);
}
.canvas-frame .block-resize-handle.edge-left{left:calc(0px - var(--editor-screen-4px))}
.canvas-frame .block-resize-handle.edge-right{right:calc(0px - var(--editor-screen-4px))}
.canvas-frame .block-resize-handle.edge-left::after,
.canvas-frame .block-resize-handle.edge-right::after{
  left:var(--editor-screen-3px);
  width:var(--editor-screen-1px);
}
.canvas-frame .block-resize-handle.edge-top-left,
.canvas-frame .block-resize-handle.edge-top-right,
.canvas-frame .block-resize-handle.edge-bottom-right,
.canvas-frame .block-resize-handle.edge-bottom-left{
  width:var(--editor-screen-10px);
  height:var(--editor-screen-10px);
  border-width:var(--editor-screen-1px);
  border-radius:var(--editor-screen-2px);
}
.canvas-frame .block-resize-handle.edge-top-left{
  left:calc(0px - var(--editor-screen-5px));
  top:calc(0px - var(--editor-screen-5px));
}
.canvas-frame .block-resize-handle.edge-top-right{
  right:calc(0px - var(--editor-screen-5px));
  top:calc(0px - var(--editor-screen-5px));
}
.canvas-frame .block-resize-handle.edge-bottom-right{
  right:calc(0px - var(--editor-screen-5px));
  bottom:calc(0px - var(--editor-screen-5px));
}
.canvas-frame .block-resize-handle.edge-bottom-left{
  left:calc(0px - var(--editor-screen-5px));
  bottom:calc(0px - var(--editor-screen-5px));
}

/* Component selection borders remain readable at every zoom level. */
.canvas-frame .canvas-component:hover{
  outline-width:var(--editor-screen-1px);
  outline-offset:var(--editor-screen-1px);
}
.canvas-frame .canvas-component.selected{
  outline-width:var(--editor-screen-2px);
  outline-offset:var(--editor-screen-2px);
}
.canvas-frame .canvas-section:not(.unified-block):hover{
  outline-width:var(--editor-screen-1px);
  outline-offset:calc(0px - var(--editor-screen-2px));
}
.canvas-frame .canvas-section:not(.unified-block).selected{
  outline-width:var(--editor-screen-2px);
  outline-offset:calc(0px - var(--editor-screen-2px));
}
.canvas-frame .canvas-page.selected-page{
  outline-width:var(--editor-screen-3px);
  outline-offset:var(--editor-screen-3px);
}

/* Drag, resize and divider measurements. */
.canvas-frame .drag-metric{
  transform:scale(var(--editor-inverse-zoom));
  transform-origin:top left;
}
.canvas-frame .region-draw-preview span{
  left:var(--editor-screen-6px);
  top:var(--editor-screen-6px);
  transform:scale(var(--editor-inverse-zoom));
  transform-origin:top left;
}
.canvas-frame .unified-divider>span{
  transform:translateY(-50%) scale(var(--editor-inverse-zoom));
  transform-origin:left center;
}
.canvas-frame .direction-column>.unified-divider>span{
  transform:translateX(-50%) scale(var(--editor-inverse-zoom));
  transform-origin:top center;
}
.canvas-frame .unified-divider::after{
  left:calc(0px - var(--editor-screen-5px));
  right:calc(0px - var(--editor-screen-5px));
}
.canvas-frame .direction-column>.unified-divider::after{
  left:0;
  right:0;
  top:calc(0px - var(--editor-screen-5px));
  bottom:calc(0px - var(--editor-screen-5px));
}

/* Editor-only empty-state messages are interface chrome, not page content. */
.canvas-frame .nested-empty{font-size:var(--editor-screen-10px)}
.canvas-frame .container-hint,
.canvas-frame .empty-canvas>div{
  transform:scale(var(--editor-inverse-zoom));
  transform-origin:center;
}

/* One-screen-pixel editor lines. */
.canvas-frame .snap-guide.guide-x,
.canvas-frame .region-guide-y{height:var(--editor-screen-1px)}
.canvas-frame .snap-guide.guide-y,
.canvas-frame .region-guide-x{width:var(--editor-screen-1px)}
.canvas-frame .region-draw-preview{
  border-width:var(--editor-screen-2px);
  box-shadow:0 0 0 var(--editor-screen-1px) rgba(255,255,255,.7) inset;
}
.canvas-frame .unified-divider::before{width:var(--editor-screen-1px)}
.canvas-frame .direction-column>.unified-divider::before{
  width:auto;
  height:var(--editor-screen-1px);
}
.canvas-frame .nested-empty{border-width:var(--editor-screen-1px)}

/* Preview and export never need editor compensation variables or chrome. */
.preview-document .canvas-frame,
.export-shot .canvas-frame{
  --editor-inverse-zoom:1;
  --editor-screen-1px:1px;
}