@page {
    /* Browsers may ignore CSS vars in @page; PDF size is controlled by generator */
    margin: 0;
}

/* Base */
html, body {
    height: 100%;
}

html, body {
    margin: 0;
    padding: 0;
}

/* Use border-box sizing everywhere to keep dimensions predictable */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* Screen preview: render a page at exact CSS inches and center it */
@media screen {
    body {
        background: #eeeeee;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 1rem;
        box-sizing: border-box;
    }

    #page {
        width: var(--page-w, 5.5in);
        height: var(--page-h, 8.5in);
        background: white;
        box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.18);
    }
}

/* Print-specific sizing to ensure exact physical dimensions */
@media print {
    html, body {
        width: var(--page-w, 5.5in);
        height: var(--page-h, 8.5in);
        margin: 0;
        padding: 0;
        overflow: hidden; /* Never spill to a second page */
    }

    #page {
        width: 100%;
        height: 100%;
        max-width: var(--page-w, 5.5in);
        max-height: var(--page-h, 8.5in);
        margin: 0;
        padding: 0;
        overflow: hidden; /* Clip any overflow just in case */
        page-break-inside: avoid; /* Legacy */
        break-inside: avoid-page; /* Modern */
    }

    /* Avoid browser-added headers/footers if possible (user may need to disable in print dialog) */
    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        box-sizing: border-box;
        background: white;
    }
}