#viewport[data-tool=select]{cursor:default}
#frameLayer,#objectLayer{position:absolute;left:0;top:0;width:1px;height:1px}
#frameLayer{z-index:0}#connections{z-index:1}#objectLayer{z-index:2}
#frameLayer .board-node.frame{pointer-events:none}
#frameLayer .frame-label,#frameLayer .resize-handle{pointer-events:auto}
.frame-entry-actions{flex-wrap:wrap}.frame-entry-actions .icon-button{flex-shrink:0}
.frame-style-preview{height:88px;display:grid;place-items:center;border:1px solid var(--border);border-radius:10px;margin:12px 0;color:#81758c;text-shadow:0 1px #ffffff80;font:600 12px Arial,sans-serif}
.frame-style-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}.frame-style-fields label{display:grid;gap:8px;font-size:12px}.frame-style-fields input,.frame-style-fields select{width:100%;min-width:0;min-height:44px;padding:4px;border:1px solid var(--border);border-radius:6px}
.frame-shade-label{display:flex;justify-content:space-between;font-size:12px}#frameShade{width:100%;height:44px;accent-color:var(--purple)}
.frame-setting-section{border-top:1px solid var(--border);margin-top:18px;padding-top:12px}.frame-setting-section h3{font-size:13px}.frame-setting-section h3 span{float:right;color:var(--muted)}
.frame-order-buttons{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.frame-order-buttons .button{min-height:38px;font-size:12px;padding:8px 10px}.frame-order-buttons button:disabled{opacity:.4;cursor:default}
.frame-layer-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border:1px solid transparent;border-radius:7px;text-align:start;color:inherit;min-height:44px}.frame-layer-row.active{border-color:var(--purple);background:#a688cc18}.frame-layer-row strong{flex:1;overflow:hidden;text-overflow:ellipsis}.frame-layer-row span,.frame-layer-row small{color:var(--muted);font-size:11px}
@media(max-width:700px){.frame-order-buttons .button{min-height:44px}.frame-entry-actions .icon-button{min-width:34px;min-height:34px}#frameSettingsSelected{display:flex!important}#frameSettingsSelected[hidden]{display:none!important}}
#viewport[data-tool=frame]{cursor:crosshair}#viewport[data-tool=frame] .frame-create-button{background:#eee7ff;color:#6d4fb9;border-color:#c8b9ea}
.frame-label{cursor:grab;pointer-events:auto}.frame-label:active{cursor:grabbing}
.frame-entry{display:flex;align-items:center;gap:2px}.frame-entry .frame-row{min-width:0;flex:1;padding:9px 3px;gap:7px}.frame-entry .frame-preview{width:33px;height:29px}.frame-entry .frame-row-text{min-width:0}.frame-entry .frame-row-text strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.frame-entry-actions{display:flex;flex-direction:column;gap:1px;padding-right:3px}.frame-entry-actions .icon-button{width:25px;height:24px}.frame-entry-actions svg{width:13px;height:13px}
@media(max-width:550px){.canvas-top-actions{gap:8px}.canvas-top-actions .frame-create-button{display:flex;padding:6px}.frame-create-button span:last-child{display:none}.frame-entry-actions{flex-direction:row}.frame-entry-actions .icon-button{width:34px;height:34px}}
#selectionBox{pointer-events:none;border:1.5px solid #8062d1;background:#a88be52b;border-radius:3px;z-index:14}
.board-node.list-box{border-radius:10px;border:1px solid #d9d4e3;box-shadow:0 4px 14px #3b315b0c;text-align:start;padding:16px!important}
.board-node.note.list-box .node-content{text-align:start;font-family:'DM Sans',Arial,sans-serif;max-height:100%;overflow-y:auto;touch-action:none}
.list-box-items{display:flex;flex-direction:column;gap:6px}.list-box-row{display:flex;align-items:flex-start;gap:9px;min-height:26px;line-height:1.5}
.list-checkbox{flex:0 0 20px;width:20px;height:20px;margin-top:2px;border:1.5px solid #a391bc;border-radius:4px;background:#fff;position:relative;cursor:pointer}
.list-checkbox[aria-checked=true]{background:#8165c4;border-color:#8165c4}.list-checkbox[aria-checked=true]:after{content:'✓';position:absolute;inset:0;color:#fff;font:15px Arial;line-height:18px;text-align:center}
.list-checkbox:focus-visible{outline:2px solid #8260d1;outline-offset:3px}.list-item-text{flex:1;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text}.list-box-row.checked .list-item-text{text-decoration:line-through;opacity:.55}.list-empty{color:#a59aaf;font-size:12px}
.list-marker{min-width:20px;flex-shrink:0;color:#8b72ba;text-align:center;unicode-bidi:isolate}
.list-remove-item{width:24px;height:24px;flex:0 0 24px;display:grid;place-items:center;padding:4px;border-radius:5px;color:#947d8c;visibility:hidden;pointer-events:none}
.list-remove-item svg{width:16px;height:16px;pointer-events:none}
.board-node.selected .list-remove-item,.list-box-row:hover>.list-remove-item,.list-box-row:focus-within>.list-remove-item,.list-editor-items .list-remove-item{visibility:visible;pointer-events:auto}
.list-remove-item:hover{color:#b84052;background:#fcecf0}
/* Canvas dimensions belong to the board, so wrapping is identical on every
   device. Larger touch controls belong in the phone's separate list editor. */
@media(pointer:coarse){.list-editor-items .list-remove-item{width:44px;height:44px;flex-basis:44px;padding:12px}.list-editor-items .list-checkbox{width:44px;height:44px;flex-basis:44px}.list-editor-items .list-checkbox[aria-checked=true]:after{line-height:40px}}
.list-box.editing .node-content{overflow:visible;max-height:none}
.list-item-editor{min-height:1.5em;line-height:inherit}
.list-editor-items{max-height:max(60px,calc(var(--visible-height,100dvh) - 220px));overflow-y:auto;overscroll-behavior:contain;padding:3px}
.list-editor-items .list-box-row{font-size:inherit}
@media(max-width:700px){#listStyleSelected{padding:0 6px}#addListItemSelected{min-height:44px;flex-shrink:0}.toolbox .tool[data-tool=list]{display:flex}}
.shape-picker-heading{padding:13px 14px 0;font-size:12px;font-weight:600;color:#615172}
.shape-choice[aria-pressed=true]{background:#eee8fb;box-shadow:inset 0 0 0 1px #b4a3da}
.shape-picker-hint{max-width:250px;padding:0 14px 12px;margin:0;font-size:11px;line-height:1.5;color:#81728e}
@media(max-width:700px){.change-shape-button{display:none!important}}
#canvasGuides{position:absolute;inset:0;width:1px;height:1px;overflow:visible;pointer-events:none;z-index:12}
#connectionHandles{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none;z-index:13}
.alignment-guide{stroke:#a476df;stroke-width:1;stroke-dasharray:5 4;vector-effect:non-scaling-stroke;pointer-events:none}
#creationPreview{position:absolute;border:1.5px solid #8771c4;background:#e0d6f755;border-radius:8px;pointer-events:none;z-index:11;box-shadow:0 4px 18px #6d51a21a}
#creationPreview[data-kind=note]{background:#fae9a499;border-radius:2px}#creationPreview[data-kind=text]{background:#ffffff70;border-style:dashed}
#creationPreview[data-shape=ellipse]{border-radius:50%}#creationPreview[data-shape=diamond]{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.creation-size{position:absolute;left:0;top:calc(100% + 12px * var(--inverse-zoom,1));transform:scale(var(--inverse-zoom,1));transform-origin:top left;padding:5px 9px;border:1px solid #ded5ef;background:white;border-radius:6px;white-space:nowrap;font:11px Arial,sans-serif;color:#6d558d}
.connection-endpoint-hit{pointer-events:all;cursor:grab;touch-action:none;fill:transparent}.connection-endpoint{pointer-events:none;fill:#fff;stroke:#7160d8;vector-effect:non-scaling-stroke;stroke-width:2}
.connection-endpoint-hit:focus-visible+.connection-endpoint,.connection-endpoint-hit:hover+.connection-endpoint{fill:#e0d6f7;stroke-width:3}
.connection-bend-hit{pointer-events:all;cursor:move;touch-action:none;fill:transparent}
.connection-bend-dot{pointer-events:none;fill:#f9f7ff;stroke:var(--connection-color,#8272bb);stroke-width:1.5;vector-effect:non-scaling-stroke}
.connection-bend-dot.selected,.connection-bend-hit:hover+.connection-bend-dot,.connection-bend-hit:focus-visible+.connection-bend-dot{fill:var(--connection-color,#a48ae0);stroke:var(--connection-color,#624bb2);stroke-width:2}
.connection.selected{stroke:var(--connection-color,#8272bb)!important}
.connection-toolbar{max-width:calc(100% - 16px);overflow-x:auto}.connection-toolbar>*{flex-shrink:0}
#arrowColorButton .arrow-color-swatch{width:15px;height:15px;border-radius:50%;background:var(--connection-color,#8272bb);border:1px solid #0002}
@media(max-width:700px){.connection-toolbar .context-button{min-height:44px}.connection-toolbar-title{display:none}}
.connecting-gesture .board-node:not(.editing)>.connect-handle{opacity:1;visibility:visible;pointer-events:auto}
.connect-handle.port-snapped:after{background:#7160d8;box-shadow:0 0 0 5px #dcd0f790;transform:scale(1.25)}
/* Compact selection handles sit outside the box; only explicit Connect mode
   uses generous targets, so zoomed-out boxes remain easy to select. */
#viewport .connect-handle{--port-scale:min(var(--inverse-zoom,1),var(--port-cap,1));--port-offset:13px;width:18px;height:18px;transform:translate(-50%,-50%) scale(var(--port-scale)) translate(var(--port-x,0px),var(--port-y,0px));opacity:0;visibility:hidden;pointer-events:none}
#viewport .connect-handle:after{width:7px;height:7px;border-width:1.5px}
#viewport .connect-handle:hover:after,#viewport .connect-handle:focus-visible:after{width:9px;height:9px;box-shadow:0 0 0 2px #e8e0f9}
#viewport .port-top{--port-y:calc(0px - var(--port-offset))}
#viewport .port-right{--port-x:var(--port-offset)}
#viewport .port-bottom{--port-y:var(--port-offset)}
#viewport .port-left{--port-x:calc(0px - var(--port-offset))}
#viewport .board-node.selected:not(.editing)>.connect-handle,#viewport[data-tool=connector] .board-node:not(.editing)>.connect-handle,.connecting-gesture #viewport .board-node:not(.editing)>.connect-handle{opacity:1;visibility:visible;pointer-events:auto}
#viewport[data-tool=connector] .connect-handle{--port-scale:var(--inverse-zoom,1);--port-offset:16px;width:24px;height:24px}
#viewport[data-tool=connector] .connect-handle:after{width:8px;height:8px}
@media(pointer:coarse){#viewport[data-tool=connector] .connect-handle{--port-offset:26px;width:44px;height:44px}}
.drag-moving .board-node.selected{cursor:grabbing;filter:drop-shadow(0 5px 8px #38245918)}
.board-node.just-created{animation:canvas-arrive .24s ease-out}.tool{transition:background .15s,color .15s,box-shadow .15s,translate .15s}.tool:hover{translate:0 -1px;box-shadow:0 3px 7px #59428c10}.tool:active{translate:0 0}
#world.camera-easing{transition:transform .2s cubic-bezier(.2,.75,.25,1)}
.object-toolbar,.connection-toolbar{animation:toolbar-arrive .14s ease-out}
#objectToolbar{z-index:60}
#connectionToolbar{z-index:55}
@keyframes canvas-arrive{from{opacity:.35;filter:drop-shadow(0 0 8px #9c82cc66)}to{opacity:1;filter:none}}
@keyframes toolbar-arrive{from{opacity:0;margin-top:4px}to{opacity:1;margin-top:0}}
@media(prefers-reduced-motion:reduce){#world.camera-easing{transition:none}.board-node.just-created,.object-toolbar,.connection-toolbar{animation:none}.tool{transition:none}}

@media(max-width:550px){.topbar-actions .export-button span:last-child:after{content:"Export"}.board-identity{min-width:0}.board-title{max-width:105px}.topbar-actions{flex-shrink:0}}

/* Keep text history available by mouse and touch without leaving the editor. */
.editing-bar{gap:8px}.editing-bar>span{margin-right:12px}.editing-bar .history-button{min-height:36px;padding:0 8px;font-size:12px;gap:5px}
.bottom-controls .history-label{font-size:11px}.bottom-controls #undoButton,.bottom-controls #redoButton{width:auto;gap:5px;padding:0 8px;display:flex;align-items:center}
.list-box-row{cursor:text}.list-item-text{display:block}.list-item-editor{width:100%}
@media(max-width:700px){.bottom-controls .history-label{display:none}.editing-bar>span{display:none}.editing-bar .history-button{min-height:44px;flex:1;justify-content:center}.editing-bar .button{padding:0 12px}.editing-bar{gap:5px}.editing-bar .history-button svg{width:17px;height:17px}}

/* Canvas objects form one layer; fixed editor chrome always sits above it. */
#viewport{isolation:isolate}#world{z-index:0}
.canvas-topline,.canvas-bottom-left,.minimap-wrap,.phone-frame-nav{z-index:30}
.toolbox,.bottom-controls{z-index:40}.overview-panel{z-index:45}.tool-hint{z-index:35;pointer-events:none}.resize-panel,.phone-note-editor{z-index:50}#editingBar{z-index:65}
.list-inline-add{display:flex;align-items:center;justify-content:center;gap:5px;min-height:28px;margin-block-start:5px;padding:2px 8px;border:1px dashed #b7a7d5;border-radius:6px;color:#775da5;background:#ffffffc9;font:11px 'DM Sans',Arial,sans-serif;cursor:pointer;white-space:nowrap}
.list-inline-add>span:first-child{font-size:21px;line-height:1}.list-inline-add:hover{background:#eee7fa;border-style:solid}.list-inline-add:focus-visible{outline:2px solid #8870d8;outline-offset:2px}
@media(pointer:coarse){.list-inline-add{min-height:44px;min-width:44px;padding:3px 12px}}
html[data-theme=night] .list-inline-add{background:#1b2230;color:#d3c0f4;border-color:#786690}

/* Hand mode must pan through boxes, lists, arrow handles and frame contents. */
#viewport[data-tool=hand] #nodes,#viewport[data-tool=hand] #nodes *,#viewport[data-tool=hand] #connections *,#viewport[data-tool=hand] #connectionHandles *{pointer-events:none!important}
#viewport[data-tool=hand]{cursor:grab}#viewport[data-tool=hand].panning{cursor:grabbing}

/* Phone hit targets are needed for tap selection; gesture intent is deferred in JS. */
@media(max-width:700px){
  #viewport[data-tool=hand] #nodes,#viewport[data-tool=hand] #nodes *{pointer-events:auto!important}
  #viewport[data-tool=hand] #connections .connection-hit{pointer-events:stroke!important}
  #viewport[data-tool=hand] #connections .connection-label,#viewport[data-tool=hand] #connections .connection-label *,#viewport[data-tool=hand] #connectionHandles .connection-bend-hit,#viewport[data-tool=hand] #connectionHandles .connection-endpoint-hit{pointer-events:all!important}
  .touch-hold-ready #viewport{cursor:grabbing}
  .touch-hold-ready .board-node.selected{outline:3px solid #8f78df;outline-offset:5px}
}

@media(max-width:700px){.toolbox{justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain}.toolbox .tool{flex:1 0 44px;width:auto}}