/**
 * The page: the sheets, the wrap that scales them, and which view is on screen.
 */

html {
    background: var(--bg-page);
    min-height: 100vh;
}

/* No min-height here: the first child's top margin would collapse out of body
   and push the document past the viewport, so the Vorschau could never quite
   fit. html already paints the full-height background. */
body {
    font-family: var(--font-ui);
    color: var(--vo-ink);
    -webkit-font-smoothing: antialiased;
}

/* `max-content` plus auto margins centres the pair when the window is wide
   enough and overflows to the right when it is not, so the form stays
   reachable by scrolling instead of being clipped on the left. */
.vo-wrap {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-7);
    width: max-content;
    margin: 0 auto;
    /* Room for the page's drop shadow only. The rail's clearance is body
       padding, not padding here: `zoom` would scale it away exactly when the
       form is scaled down, which is when the two are closest. */
    padding: var(--sp-7) var(--sp-9);
    /* Vo.Fit computes the factor so the Vorschau fills the window rather than
       scrolling. `zoom` reflows, so no empty scroll area is left behind. */
    zoom: var(--form-scale);
}

.vo-page {
    position: relative;
    width: var(--vo-page-width);
    height: var(--vo-page-height);
    background: var(--vo-paper);
    box-shadow: var(--shadow-sheet);
    overflow: hidden;
    flex-shrink: 0;
}

.vo-slot {
    position: relative;
    flex-shrink: 0;
}

body[data-view="fill"] .vo-page {
    display: none;
}

/* A sheet with no section manifest has no friendly form to show instead, so it
   stays printed in both views. */
body[data-view="fill"] .vo-slot:not(.vo-slot--friendly) .vo-page {
    display: block;
}

body[data-view="fill"] .vo-fill {
    display: block;
    background: var(--bg-surface);
    color: var(--text);
    font-family: var(--font-ui);
}

/* Export pins the zoom to 1, so a hairline is a true pixel again. */
body.rendering-pdf {
    --vo-hairline: 1px;
}

body.rendering-pdf .vo-page {
    display: block !important;
}

/* The fitted preview is a screen convenience; exporting at that zoom would
   rasterize a shrunken Vordruck into the PDF. */
body.rendering-pdf .vo-wrap {
    display: flex !important;
    zoom: 1 !important;
}

body.rendering-pdf .vo-fill {
    display: none !important;
}

/* The rasteriser can neither parse `color-mix` nor clip `background-clip:
   text` — it threw on the first and drew nothing for the second, which is why
   an export produced no file at all. An export carries the face, the size and
   the colour; the ribbon's unevenness is a screen effect. */
body.rendering-pdf .vo-in,
body.rendering-pdf .vo-cell {
    background-image: none;
    color: var(--ink1);
    -webkit-text-fill-color: var(--ink1);
    opacity: var(--ink-alpha);
    filter: none;
}

@media (min-width: 769px) {
    /* Computed from the properties the rail is sized from, so the two cannot
       drift, and outside the zoomed wrap, so the gap survives a scaled-down
       preview. */
    body {
        padding-left: calc(var(--rail-inset) + var(--rail-width) + var(--rail-gap));
        padding-right: var(--rail-gap);
    }

    /* The same box as the sheet it stands for, so switching between Ausfüllen
       and Vorschau moves nothing. */
    body[data-view="fill"] .vo-fill {
        width: var(--vo-page-width);
        height: var(--vo-page-height);
        flex-shrink: 0;
        overflow: auto;
        padding: var(--sp-9);
        box-shadow: var(--shadow-sheet);
        align-self: flex-start;
    }
}

@media (max-width: 768px) {
    html,
    body {
        overflow: auto;
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        color: var(--text);
    }

    body {
        padding-top: calc(var(--bar-height) + env(safe-area-inset-top));
    }

    body[data-view="preview"] .vo-wrap {
        position: static;
        padding: var(--sp-4) var(--sp-4) var(--sp-7);
        gap: var(--sp-4);
        pointer-events: auto;
        justify-content: flex-start;
        transform: none;
        width: max-content;
        min-width: 100%;
    }

    /* Vo.Friendly moves the fill roots into body flow here, so the wrap has
       nothing left to show — but it stays rendered for PDF export, which
       re-shows it through `body.rendering-pdf`. */
    body[data-view="fill"] .vo-wrap {
        display: none;
    }

    body[data-view="fill"] .vo-fill {
        padding: var(--sp-7) var(--sp-7) calc(var(--sp-9) + env(safe-area-inset-bottom));
        max-width: var(--measure);
        margin: 0 auto;
    }
}