/* print.css — a SEPARATE flat layout for print/PDF, not a forced-visible version of the floating callouts (15 simultaneously-open absolutely positioned cards would collide with each other and with page breaks). Triggered two ways: real @media print, and an on-screen ?print=1 flag (see main.js) for previewing without the OS print dialog. */ .print-sheet { display: none; /* Reserves room for the now-fixed-position .print-footer below, which no longer takes up space in normal flow — without this, a client with content that runs close to the page's bottom margin could have their last row of cards sit underneath the footer instead of above it. */ padding-bottom: 30px; } .print-header { font-family: var(--font-serif); font-size: 1.1rem; margin-bottom: var(--space-3); } /* flex-wrap, not CSS Grid — Chrome's print engine sometimes pushes an entire grid container onto the next page rather than starting it mid-page when the grid doesn't quite fit the remaining space, leaving a near-blank leading page. Flexbox paginates far more reliably and produces the identical 3-column visual result. Sizing throughout this file runs noticeably tighter than the on-screen equivalents (smaller padding/gaps/fonts) — aiming to fit all 15 cards on one printed page where the content allows. Whether that actually holds depends on how long the real per-client text ends up being (practitioner free-text fields especially) — it'll overflow to a second page gracefully if a client's data runs long, which is expected, not a bug. */ .print-grid { display: flex; flex-wrap: wrap; gap: 10px; } .print-card { flex: 0 0 calc((100% - 2 * 10px) / 3); border: 1px solid var(--border); border-radius: 10px; padding: var(--space-2); break-inside: avoid; } .print-card-title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 6px; } .print-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex-shrink: 0; } .print-card-name { font-family: var(--font-serif); font-size: 0.95rem; } /* Print-only compaction of the shared field markup (see callout.css) — the on-screen hover card keeps its own roomier sizing untouched. */ .print-card .node-field { font-size: 0.75rem; line-height: 1.25; } .print-card .node-field-label { font-size: 0.65rem; } .print-card .node-field + .node-field { margin-top: 6px; } /* Pinned to the physical bottom of the page, not flowing right after the card content — position:fixed repeats at the same spot on every printed page (a standard CSS print technique), matching how a normal document footer behaves rather than trailing the content with a gap after it. Only ever visible inside .print-sheet (print or ?print=1), so no extra scoping needed here. */ .print-footer { position: fixed; left: 0; right: 0; bottom: 0; padding-top: 3mm; border-top: 1px solid var(--border); background: var(--bg); text-align: center; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } /* .node-field-label/-value markup is shared with the dark hover callout (see callout.css) — these give it print-appropriate colors on the light .print-card instead. */ .print-card .node-field-label { color: var(--muted); } .print-card .node-field-value { color: var(--text); } /* Tighter than the browser's default print margins (~19mm) to reclaim real page space toward fitting on one sheet. */ @page { margin: 12mm; } /* Print always renders light-on-white, regardless of which theme is active on screen — redeclaring the tokens overrides them for the whole subtree (custom properties resolve from the nearest ancestor that sets them), so every var(--bg)/var(--text)/etc. below this point picks up these values even if [data-theme="dark"] is still set on . Pure white, not the light theme's cream --bg, so the background needs no ink at all, not just a lighter fill. Targets BOTH html and body, not just body — print engines can source a page's canvas color from either element, and if any content overflows onto a near-empty second page, that page's fill needs to come from somewhere too. Overriding only one left the other free to show through. */ @media print { html, body { --bg: #ffffff !important; --bg-alt: #ffffff !important; --text: #1a1712 !important; --muted: #726a5e !important; --border: rgba(26, 23, 18, 0.12) !important; background: #ffffff !important; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .page-header, .chart-frame { display: none; } .print-sheet { display: block; } } /* On-screen preview of the print layout via ?print=1, mirrors the rules above (including the forced light-on-white) without needing the browser's print dialog. !important here too, belt-and-braces against any cascade ambiguity — this is the one part of the stylesheet whose whole job is to override the active theme, so it needs to win outright. */ body.force-print { --bg: #ffffff !important; --bg-alt: #ffffff !important; --text: #1a1712 !important; --muted: #726a5e !important; --border: rgba(26, 23, 18, 0.12) !important; background: #ffffff !important; } body.force-print .page-header, body.force-print .chart-frame { display: none; } body.force-print .print-sheet { display: block; }