.document-preview-resizer{display:none}
.document-editor.preview-resizable{grid-template-columns:minmax(0,1fr) 32px var(--document-preview-width,330px);column-gap:0}
.preview-resizable>.document-preview-resizer:not([hidden]){display:flex;position:sticky;top:36px;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:26px;height:112px;margin:18px 3px 0;cursor:col-resize;touch-action:none;user-select:none;border:1px solid var(--cyan);border-radius:8px;background:var(--brand-soft);color:var(--navy);outline-offset:1px}
.document-preview-resizer>span{pointer-events:none;line-height:1}
.document-preview-resizer>span:first-child{font-size:22px}
.document-preview-resizer .resize-grip-label{writing-mode:vertical-rl;font-size:12px;font-weight:600;letter-spacing:.3px}
.document-preview-resizer:hover,.document-preview-resizer:focus-visible,.document-preview-resizer.is-dragging{background:var(--cyan);color:var(--navy);border-color:var(--navy)}
.document-preview-resizer:focus-visible{outline:2px solid var(--navy)}
.preview-size-toolbar{margin:0 0 12px}
.preview-size-toolbar .btn{border-color:var(--cyan);background:var(--brand-soft);color:var(--navy);font-weight:600}
.preview-size-controls{padding:14px;margin:0 0 16px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.preview-size-controls label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:13px;color:var(--navy);margin:0 0 8px}
.preview-size-controls output{font-variant-numeric:tabular-nums}
.preview-size-controls input[type=range]{display:block;width:100%;height:32px;min-height:32px;padding:0;margin:0 0 10px;border:0;background:transparent;accent-color:var(--cyan);cursor:ew-resize}
.preview-size-controls .document-hint{margin:10px 0 0}
.preview-size-controls #preview-resize-unavailable{margin:0}
/* Preserve page proportions while the current canvas waits for its sharp redraw. */
.document-preview #document-preview-canvas{height:auto!important}
.preview-resizable .quick-preview-jump,.preview-resizable #close-document-preview{display:none}
@container(max-width:560px){#document-form:not(.quick-document) .preview-resizable .document-styles{grid-template-columns:repeat(3,minmax(0,1fr))}}
body.document-preview-is-resizing,body.document-preview-is-resizing *{cursor:col-resize!important;user-select:none!important}
@media print{.document-preview-resizer,.preview-size-toolbar,.preview-size-controls{display:none!important}}