/* ===================================================================== * Editor chrome. * * Two rules govern this file: * 1. Nothing here may live inside .page — all chrome is in #ed-bar and * #ed-layer, which are fixed-position children of . * 2. Selection affordances use `outline`, never `border` or `padding`: * outline is painted outside the box model and cannot shift the * layout by even a fraction of a point. * ===================================================================== */ :root { --ed-gold: #BB9653; --ed-bg: #1c1d21; --ed-fg: #e9e9ec; --ed-mut: #9a9aa3; --ed-warn: #d9822b; --ed-err: #d64545; --ed-ok: #3d9a5c; } body { padding-bottom: calc(var(--ed-barh, 44px) + 16px); } /* ---------- the scaled stage ---------- * #ed-fit / #ed-stage are created at RUNTIME by editor.js, never by * bake.php, so app/template.html stays byte-identical. * * overflow:hidden on #ed-fit is required: a transform leaves the layout * box at its full 720px and that phantom keeps contributing to the * document's scrollable overflow, bringing the horizontal scrollbar * straight back. It clips nothing real — #ed-fit is sized to exactly the * scaled visual width. * * display:flow-root on #ed-stage is required: .page has margin:14pt auto, * and without a BFC those margins collapse through the wrappers into * , so offsetHeight under-reports by 28pt. * * Never add will-change/filter/contain here — they create a containing * block even when transform is none, so they can outlive the print reset. */ #ed-fit { margin: 0 auto; overflow: hidden; } #ed-stage { width: 540pt; display: flow-root; transform-origin: top left; } /* ---------- bottom toolbar ---------- */ #ed-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--ed-bg); color: var(--ed-fg); font: 13px/1.3 "Segoe UI", system-ui, sans-serif; box-shadow: 0 -2px 12px rgba(0,0,0,.35); flex-wrap: wrap; row-gap: 6px; } .ed-brand { font-weight: 700; color: var(--ed-gold); letter-spacing: .3px; margin-right: 2px; } .ed-sep { flex: 1; } .ed-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; border: 1px solid #55565e; flex: none; } .ed-dot.on { background: var(--ed-warn); border-color: var(--ed-warn); } .ed-btn { font: inherit; color: var(--ed-fg); background: #2a2b31; border: 1px solid #3a3b43; border-radius: 5px; padding: 5px 11px; cursor: pointer; white-space: nowrap; } .ed-btn:hover { background: #35363e; } .ed-btn:active { transform: translateY(1px); } .ed-primary { background: var(--ed-gold); border-color: var(--ed-gold); color: #1b1b1b; font-weight: 600; } .ed-primary:hover { background: #c9a463; } .ed-picker-btn { max-width: min(320px, 42vw); overflow: hidden; text-overflow: ellipsis; } /* ---------- zoom ---------- */ .ed-zoomgrp { display: flex; align-items: center; gap: 4px; flex: none; } .ed-zoom { max-width: 170px; } /* a native