.slide-layout:has(>.layout-surface){display:block;position:relative}
.layout-surface{position:relative;width:100%;height:100%;container-type:inline-size;overflow:hidden;background:#f4f2ec;color:#292d27;font-family:Arial,sans-serif}
.layout-block{position:absolute;overflow:hidden;box-sizing:border-box}
.layout-block img,.layout-block video{width:100%;height:100%;object-fit:contain;margin:0;display:block}
.layout-text{width:100%;height:100%;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.35;font-weight:400}
.editor-canvas:has(.layout-surface){aspect-ratio:16/9;min-height:0;display:block}
.editor-canvas .layout-block{cursor:move;touch-action:none;outline:1px dashed transparent}
.editor-canvas .layout-block.is-selected{outline:2px solid #6a725b;outline-offset:-2px}
.editor-canvas .layout-block video,.editor-canvas .layout-block img{pointer-events:none}
.layout-resize{display:none;position:absolute;right:0;bottom:0;width:18px;height:18px;background:#6a725b;border:2px solid white;cursor:nwse-resize;touch-action:none}
.is-selected>.layout-resize{display:block}
.layout-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;font-size:12px}
.layout-properties{display:flex;align-items:start;gap:10px;flex-wrap:wrap;padding:14px 0;font-size:12px}
.layout-properties label{display:flex;flex-direction:column;gap:5px}
.layout-properties input[type=number]{width:72px}
.layout-properties textarea{width:min(440px,70vw);min-height:90px}
.layout-properties [hidden]{display:none!important}
.layout-properties input,.layout-properties textarea,.layout-properties select{padding:7px;border:1px solid #ccc;background:#fff}
.layout-properties .layout-source{width:min(350px,70vw)}
.layout-help{font-size:12px;line-height:1.6;color:#696d62}

.layout-surface [hidden]{display:none!important}
.layout-video-fallback{position:absolute;inset:0}
.layout-video-error{position:absolute;bottom:8px;left:8px;padding:5px 8px;background:#ffffffde;color:#292d27;font-size:14px}

.editor-canvas .layout-text.is-editing{cursor:text;user-select:text;touch-action:auto;outline:2px solid #6a725b;outline-offset:-2px;overflow:auto}
.editor-canvas .layout-block:has(.is-editing){cursor:text;touch-action:auto}
.editor-canvas .layout-block:has(.is-editing)>.layout-resize{display:none}
#block-overflow{width:100%;color:#925a24}

.editor-canvas.has-layout-grid .layout-surface::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,#6a725b30 1px,transparent 1px),linear-gradient(to bottom,#6a725b30 1px,transparent 1px);background-size:5% 5%;z-index:1}

/* Editing must not change the text content box relative to published layouts. */
.editor-canvas .layout-text[contenteditable]{border:0;padding:0}
#layout-block-select{max-width:260px;padding:8px}

.crop-controls{display:flex;gap:10px;align-items:start;flex-wrap:wrap;width:100%;padding:12px;background:#efeee8}
.crop-controls .crop-help,.crop-controls [role=status]{width:100%;line-height:1.6}
.crop-controls input[type=range]{width:180px}
.editor-canvas .layout-block.is-cropping{cursor:grab;outline:2px solid #ae742d}
.editor-canvas .layout-block.is-cropping>.layout-resize{display:none}
.editor-canvas .layout-block.is-cropping:active{cursor:grabbing}
#block-crop-mode[aria-pressed=true]{background:#292d27;color:#fff}

.layout-selection{max-width:300px}
.layout-selection summary{cursor:pointer;padding:8px}
.layout-selection select{width:100%;min-width:220px;margin-top:6px}
.layout-selection p{font-size:11px;line-height:1.5;margin-top:6px}
#layout-selection-status{align-self:center;font-size:11px}
.editor-canvas.has-multi-selection .layout-resize{display:none}
.layout-properties:has(#block-w:disabled) #block-x,.layout-properties:has(#block-w:disabled) #block-y{border-color:#6a725b}
.layout-arrangement{width:100%;border-top:1px solid #d6d6cc;padding-top:10px}
.layout-arrangement summary{cursor:pointer}
.layout-arrangement>div{display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin-top:8px}
.layout-arrangement>p{font-size:11px;color:#696d62;line-height:1.6;margin-top:8px}
.editor-canvas .layout-block.is-locked{cursor:default;outline-style:dotted}
.editor-canvas .layout-block.is-locked>.layout-resize{display:none}
.layout-marquee{position:absolute;border:1px solid #6a725b;background:#6a725b20;pointer-events:none;z-index:10}

.recovery-panel{margin-top:20px;padding-top:12px;border-top:1px solid #c3c7b7;font-size:11px;line-height:1.6}
.recovery-panel summary{cursor:pointer;font-size:12px}
.recovery-panel p{margin:10px 0;overflow-wrap:anywhere}
.recovery-panel label{display:block;margin:8px 0}
.recovery-panel button{font-size:11px;padding:7px;margin:4px 0}
.recovery-panel select{max-width:100%;display:block;margin-top:6px}
/* One image toolbar beside the canvas, wrapping within narrow editor columns. */
.editor-main>.crop-controls{box-sizing:border-box;max-width:100%;margin-top:12px;font-size:12px;gap:8px}
.crop-controls label{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:100%}
.crop-controls input{box-sizing:border-box;max-width:100%;padding:6px;border:1px solid #ccc;background:#fff}
.crop-controls input[type=number]{width:72px}
.crop-controls button{max-width:100%;white-space:normal;padding:8px}
.crop-controls .crop-help,.crop-controls [role=status]{flex-basis:100%;overflow-wrap:anywhere}
.crop-controls [hidden]{display:none!important}
.layout-help summary{cursor:pointer}
.layout-help>p{margin-top:6px}

/* Native video controls own input only in explicit playback preview mode. */
.editor-canvas .layout-block.is-video-preview video{pointer-events:auto}
.editor-canvas .layout-block:has(video){cursor:move}
.editor-canvas .layout-block.is-video-preview{cursor:default}
.editor-canvas .layout-block:has(video)>.layout-resize{width:28px;height:28px;z-index:5;border:3px solid white;box-shadow:0 0 0 1px #263a30}
.editor-canvas .layout-block.is-video-preview>.layout-resize{display:none}
.video-edit-hint{position:absolute;top:0;left:0;right:0;padding:6px 9px;background:#203328df;color:white;font-size:12px;line-height:1.4;pointer-events:none;z-index:2}
.is-video-preview>.video-edit-hint{display:none}

.layout-autoplay-hint{position:absolute;top:8px;left:8px;max-width:90%;padding:6px 9px;background:#ffffffde;color:#222;font-size:14px;pointer-events:none}

.layout-video-tools{position:absolute;bottom:8px;left:8px;display:flex;gap:8px;z-index:4}.layout-video-tools button{padding:6px 10px;background:#fffffff0;color:#222;border:1px solid #777;font:inherit;font-size:13px;cursor:pointer}

/* Public playback has one control, independent of video crop. */
.layout-surface .layout-video-tools{inset:auto 16px 16px auto}
.layout-surface .layout-video-tools button{position:static;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid #ffffffaa;border-radius:50%;background:#1119;color:white;font:22px Arial,sans-serif;line-height:1}
@media(hover:hover) and (pointer:fine){.layout-video-tools{opacity:0;transition:opacity 160ms}.layout-block:hover>.layout-video-tools,.layout-block:focus-within>.layout-video-tools{opacity:1}}
@media(prefers-reduced-motion:reduce){.layout-video-tools{transition:none}}