/* Only editor overlays change. Authored borders, artwork and page spacing keep
   the compiler's geometry in the canvas, preview and exported website. */
html:root .builder-workspace .canvas-document .builder-block { --block-selection:#3268e9; }
html:root .builder-workspace .canvas-document .canvas-block-frame { border-radius:3px; }
html:root .builder-workspace .canvas-document .builder-block:not(.selected-block):not(:focus-visible):not([data-visual-frame=image]):hover>.canvas-block-frame,
html:root .builder-workspace .canvas-document .builder-block:not(.selected-block):not(:focus-visible)[data-visual-frame=image]:has(img:hover,.jr-motion-stage:hover)>.canvas-block-frame { border:1px dashed #8aaad3; box-shadow:none; }
html:root .builder-workspace .canvas-document .builder-block:is(.selected-block,:has([data-editable-block]:focus))>.canvas-block-frame { border:2px solid var(--block-selection); box-shadow:0 0 0 2px #fff,0 0 0 3px #3268e91a; }
/* Corner brackets mark editor selection without resembling resize handles. */
html:root .builder-workspace .canvas-document .builder-block.selected-block>.canvas-block-frame::after { content:''; position:absolute; inset:-4px; background:linear-gradient(var(--block-selection),var(--block-selection)) left top/10px 3px,linear-gradient(var(--block-selection),var(--block-selection)) left top/3px 10px,linear-gradient(var(--block-selection),var(--block-selection)) right top/10px 3px,linear-gradient(var(--block-selection),var(--block-selection)) right top/3px 10px,linear-gradient(var(--block-selection),var(--block-selection)) left bottom/10px 3px,linear-gradient(var(--block-selection),var(--block-selection)) left bottom/3px 10px,linear-gradient(var(--block-selection),var(--block-selection)) right bottom/10px 3px,linear-gradient(var(--block-selection),var(--block-selection)) right bottom/3px 10px; background-repeat:no-repeat; pointer-events:none; }
html:root .builder-workspace .canvas-document .builder-block:focus-visible:not(.selected-block)>.canvas-block-frame { border:2px dashed #5278bc; box-shadow:0 0 0 2px #fff; }
html:root .builder-workspace .canvas-document .builder-section.selected-section>.builder-section-content { outline:2px dashed #3268e9; outline-offset:6px; }
html:root .builder-workspace .canvas-document .builder-column.selected-column { outline:0; }

/* One consistent strip: the selected object, Move, and an explicit Done action.
   Its measured dimensions are shared with canvasToolbarSizes(). */
html:root .builder-workspace .canvas-selection-bar { padding:3px; border:1px solid #b4c8e4; border-radius:8px; background:#fff; box-shadow:0 3px 14px #183e6c26,0 0 0 1px #ffffffa6; }
html:root .builder-workspace .canvas-selection-content { gap:4px; }
html:root .builder-workspace .canvas-selection-bar .canvas-block-label { flex:1 1 auto; height:32px; min-height:32px; padding:0 8px; border-radius:4px; background:#eaf1ff; color:#1d54b7; font-size:13px; font-weight:700; }
html:root .builder-workspace .canvas-selection-bar :is(.canvas-block-name,.rocode-brand-label,.rocode-brand-label>span) { overflow:visible; text-overflow:clip; }
html:root .builder-workspace .canvas-selection-bar .canvas-selection-clear { width:60px; min-width:60px; height:44px; padding:0 8px; border:1px solid #c9d6e8; border-radius:5px; background:#f7faff; color:#2c537f; font-weight:650; }
html:root .builder-workspace .canvas-selection-bar .block-drag-handle { width:76px; min-width:76px; border:1px solid transparent; border-radius:5px; flex-wrap:nowrap; gap:6px; padding:0 7px; }
html:root .builder-workspace .canvas-selection-bar .canvas-control .canvas-control-label { font-size:14px; }
html:root .builder-workspace .canvas-selection-bar .canvas-control>.canvas-move-caption { display:none; }
html:root .builder-workspace .canvas-selection-bar button:hover:not(:disabled) { background:#eaf2ff; border-color:#acc7ef; }
html:root .builder-workspace .canvas-selection-bar .section-toolbar>button:first-child { min-height:44px; height:44px; padding-inline:6px; font-size:13px; font-weight:700; }

html:root .builder-workspace .canvas-selection-bar[data-layout=stacked] .canvas-selection-content>:is(.canvas-block-toolbar,.section-toolbar) { grid-template-columns:76px minmax(0,1fr); }
html:root .builder-workspace .canvas-selection-bar[data-layout=stacked] :is(.canvas-block-label,.section-toolbar>button:first-child) { align-self:center; width:calc(100% - 64px); }
html:root .builder-workspace .canvas-selection-bar[data-layout=stacked] .canvas-selection-clear { right:0; top:0; }
html:root .builder-workspace .canvas-selection-bar[data-layout=stacked] .canvas-selection-content>.section-toolbar { grid-template-columns:44px 44px minmax(0,1fr); }

html:root .builder-workspace .canvas-selection-bar[data-layout=image] .canvas-selection-content { height:128px; align-items:flex-start; }
html:root .builder-workspace .canvas-selection-bar[data-layout=image] .canvas-selection-content>.canvas-block-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 76px 60px; grid-template-rows:44px 80px; gap:4px 3px; height:128px; width:100%; }
html:root .builder-workspace .canvas-selection-bar[data-layout=image] .canvas-block-label { grid-row:1; grid-column:1; align-self:center; padding:0 8px; }
html:root .builder-workspace .canvas-selection-bar[data-layout=image] .block-drag-handle { grid-row:1; grid-column:2; width:76px; min-width:76px; }
html:root .builder-workspace .canvas-selection-bar[data-layout=image] .canvas-selection-clear { position:absolute; top:0; right:0; }
html:root .builder-workspace .canvas-selection-bar[data-layout=image] .canvas-size-control { grid-column:1 / -1; grid-row:2; grid-template-rows:18px 44px 14px; gap:1px; height:80px; padding:1px 6px 0; border-top:1px solid #dbe5f2; }
html:root .builder-workspace .canvas-selection-bar .canvas-size-heading { font-size:13px; line-height:18px; }
html:root .builder-workspace .canvas-selection-bar .canvas-size-cues { font-size:12px; line-height:14px; }
/* Busy interactive blocks already have inspector controls; keep extra helper
   labels off the page so the selection frame has one unambiguous meaning. */
html:root .builder-workspace .canvas-document .canvas-effect-hint { display:none; }
@media(forced-colors:active) {
  html:root .builder-workspace .canvas-document .builder-block.selected-block>.canvas-block-frame { border-color:Highlight; outline:2px solid Canvas; outline-offset:1px; }
  html:root .builder-workspace .canvas-document .builder-block.selected-block>.canvas-block-frame::after { display:none; }
}