globals.css sets html,body { height:100%; overflow:hidden; background:#0a0a1a }
with no media query. In print mode this clips all slides to one viewport
height (explaining the 2-page limit) and renders a black background.
Override with height:auto, overflow:visible, background:white in @media print.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Firefox doesn't honor height on flex containers in print mode — the
container collapses to content height, causing all slides to fit on 2
pages. Moved the authoritative height to the display:block wrapper
(.print-page-break) and changed .print-page to height:100% so it
fills its reliably-sized block parent.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
page: slide-page on each block wrapper forces Firefox to allocate a new
physical page per slide — the spec-correct approach. break-before: page
is belt-and-suspenders. Switched from break-after to break-before via
adjacent sibling selector to avoid a blank trailing page.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
-moz-print-color-adjust: exact ensures Firefox doesn't strip background
colors from headers, badges, and accent elements when printing.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Chrome's print engine silently ignores break-after/page-break-after on
flex containers. Wrapping each .print-page (flex) in a plain block
.print-page-break element gives Chrome a reliable page break anchor.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Inline <style> tags in React body are unreliable for @media print in
Chrome. Move all print CSS to app/pitch-print/print.css imported via
a layout.tsx — Next.js injects this as a proper <link> in <head>,
which is guaranteed to be applied before print rendering.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sharang Parnerkar