/* ============================================================================ print.css — the exported/printed Keepsake Chronicle. This is the single screen most likely to justify the product's price on Etsy, so it gets the same care as the wax seal: real @page rules, real color in print, and a hard ban on max-height/overflow tricks (a clipped keepsake is a support ticket and a bad review). Only ever active inside @media print — nothing here leaks into screen rendering. Depends on tokens.css (colors), decor.css (.keepsake and friends), components.css (#awModalOverlay/#awModalPanel/.card/.meter selectors it neutralizes for print). --------------------------------------------------------------------------- CONTRACT --------------------------------------------------------------------------- - The real print flow (js/print.js + app.js's btnExportKeepsake handler): app.js opens #awModalOverlay/#awModalPanel with the keepsake HTML already injected (js/print.js's `.keepsake` article) BEFORE the user ever clicks "Print / Save PDF", so by the time window.print() runs the modal is already unhidden — print.css does not need to fight `hidden`. Its job is purely to stop that modal from behaving like a small, scrollable, fixed-position overlay once it's on paper: below, #awModalOverlay/.modal-overlay and #awModalPanel/.modal-panel are forced to plain, fully-expanding, non-clipped blocks, and `.keepsake` itself (plus every descendant) is forced `overflow: visible`. - Anything that must NEVER appear on paper (header, nav tabs, the particle canvas, toasts, modal close/footer controls — `.modal-foot` already carries `no-print` in app.js's real markup, `.modal-head` does not, so it's hidden explicitly below) gets `class="no-print"` from index.html. Add it liberally — it is pure opt-out, zero behavioral cost on screen. - `.keepsake-export`/`.print-area` are kept as generic fallback hooks with the same forcing behavior, for printing something that isn't routed through the real #awModalOverlay flow (e.g. a lone Character Sheet). ============================================================================ */ @media print { @page { size: A4 portrait; margin: 14mm 12mm; } /* real ink in print — without this most browsers strip our dark surfaces and gold foil down to plain black text on white by default */ * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; } html, body { background: #fff !important; width: auto !important; height: auto !important; } body::before, body::after { display: none !important; } /* screen grain/vignette layer */ /* ---- opt-out chrome ---- .app-header/.nav-tabs/.app-main are the app shell that sits BEHIND the modal in the real DOM (index.html:
,