/*
 * A4 documents. The page is always 210 x 297 mm regardless of viewport;
 * the preview only scales it with transform, it never reflows it.
 */
.a4-page, .invoice-page {
  width: 210mm;
  min-height: 297mm;
  height: 297mm;
  background: #ffffff;
  color: #111111;
  overflow: hidden;
}
.a4-page .doc-svg { display: block; width: 100%; height: 100%; }

/* editor split: form left, live preview right */
.editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
.editor-preview { min-width: 0; }
.editor-preview #previewPane { height: min(85vh, 1100px); }
@media (min-width: 1200px) {
  .editor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .editor-preview { position: sticky; top: 24px; }
  .editor-preview #previewPane { height: calc(100vh - 48px); }
}

/* preview chrome */
.preview { display: flex; flex-direction: column; min-height: 0; }
.preview-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 12px; }
.zoom-ctl { display: inline-flex; align-items: center; gap: 8px; }
.zoom-ctl .btn { min-width: 38px; padding: 0 14px; }
.zoom-val { min-width: 48px; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.page-count { font-size: 13px; }
.preview-scroll { flex: 1; min-height: 0; overflow: auto; background: var(--surface-sunken); border-radius: var(--radius-lg); padding: 14px; }
.preview-stage { display: flex; flex-direction: column; }
.page-slot { position: relative; margin: 0 auto 14px; box-shadow: 0 0 0 1px var(--line); flex: none; }
.page-slot .a4-page { position: absolute; top: 0; left: 0; transform-origin: 0 0; }

.preview-full .preview-scroll { max-height: none; }
.preview-full { min-height: 60vh; }