/* Sheet page: locked to the viewport, the dossier fills everything below the top bar */
html, body { height: 100%; overflow: hidden; }

body { height: 100vh; height: 100dvh; }
.page-main { padding-bottom: var(--sp-3); }
.dossier--sheet { flex: 1; min-height: 0; }

.sheet-viewport {
    position: relative;
    flex: 1;
    min-height: 0;
    margin: 14px; /* clears the 6px inset + 2.5px dashed border */
    border-radius: 8px;
    overflow: hidden;
    background: var(--tint);
}

/* Sits behind the iframe; the published sheet paints over it once loaded */
.sheet-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
}

/* --sheet-zoom comes from the route's `zoom` (default: sheetZoom in metadata.default.json).
   A cross-origin iframe can't be zoomed from inside, so enlarge its box by
   1/zoom and scale it back down: the sheet renders zoomed out, clicks still map */
.sheet-viewport iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% / var(--sheet-zoom));
    height: calc(100% / var(--sheet-zoom));
    transform: scale(var(--sheet-zoom));
    transform-origin: 0 0;
    border: none;
}