/* print.css — shared print stylesheet for the CODEX suite. Two activation paths: - User hits Ctrl+P directly: the @media print rules kick in and produce a stripped-down version of whatever is on screen. Workable but not pretty. - User clicks an in-page Print button: JS adds the `printing` class to , which mirrors the @media print rules on screen so the user sees the print layout as a live preview, then calls window.print(). After the dialog closes the class is removed. The `.print-view` element is hidden by default and only revealed by either path. Each page populates that element with the exact content it wants on paper. */ /* ── Print-view container ── always hidden on screen except in print mode ── */ .print-view { display: none; } /* ── Print mode (both media-print and JS-triggered preview) ───────────────── */ @media print { html, body { background: white !important; color: black !important; font-family: Georgia, 'Liberation Serif', serif; font-size: 10pt; line-height: 1.35; margin: 0; padding: 0; } /* Hide all live UI */ header.masthead, nav.section-nav, nav.menu, .container > header.title, .container > p, .container > .config-panel, .container > .capacity-bar, .container > .generate-row, .container > .status-strip, .container > .stats-strip, .container > .security-panel, .container > details, .container > .info, #word-list-info, button, .modal-overlay { display: none !important; } .container { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: white !important; box-shadow: none !important; border: none !important; } .print-view { display: block !important; color: black; } /* Page layout */ @page { size: letter; margin: 0.55in 0.5in 0.6in 0.5in; @top-right { content: string(print-running-header); font-family: Georgia, serif; font-size: 8pt; color: #555; } @bottom-right { content: "page " counter(page) " of " counter(pages); font-family: Georgia, serif; font-size: 8pt; color: #555; } } /* Running header source — set by the page-specific print content */ .print-running-title { string-set: print-running-header content(); /* Don't actually render it inline; the @page top-right pulls the value */ position: absolute; left: -10000px; } /* Page-break helpers (used by the print-view content) */ .pv-page-break { page-break-before: always; break-before: page; } .pv-avoid-break { page-break-inside: avoid; break-inside: avoid; } /* Typography */ .print-view h1 { font-size: 18pt; margin: 0 0 0.4em 0; } .print-view h2 { font-size: 13pt; margin: 1em 0 0.3em 0; page-break-after: avoid; } .print-view h3 { font-size: 11pt; margin: 0.8em 0 0.2em 0; page-break-after: avoid; } .print-view p { margin: 0 0 0.5em 0; text-indent: 0; } /* Code groups are monospaced and slightly tighter so columns line up */ .pv-code, code, .print-view code { font-family: 'Courier New', 'Liberation Mono', monospace; font-size: 9.5pt; letter-spacing: 0.02em; color: black; } /* Multi-column lookup table for code↔token listings */ .pv-cols-2 { column-count: 2; column-gap: 1.4em; } .pv-cols-3 { column-count: 3; column-gap: 1.1em; } .pv-cols-4 { column-count: 4; column-gap: 0.9em; } .pv-cols-2, .pv-cols-3, .pv-cols-4 { column-fill: auto; column-rule: 0.5pt solid #ccc; margin: 0.4em 0; } /* Individual entry: keep code and token on the same line whenever possible */ .pv-entry { display: block; font-size: 9pt; line-height: 1.3; padding: 0.05em 0; break-inside: avoid; page-break-inside: avoid; } .pv-entry .pv-code { display: inline; margin-right: 0.4em; } .pv-entry .pv-arrow { color: #888; margin-right: 0.4em; } .pv-entry .pv-token { font-family: Georgia, serif; font-size: 9.5pt; } .pv-entry .pv-codes { font-family: 'Courier New', monospace; font-size: 8.5pt; } /* Category section header inside a column listing */ .pv-section-head { font-family: Georgia, serif; font-size: 10.5pt; font-weight: bold; margin: 0.6em 0 0.2em 0; padding-bottom: 0.1em; border-bottom: 0.5pt solid #888; page-break-after: avoid; break-after: avoid; column-span: all; /* span across all columns when used inside pv-cols-* */ } /* Header / cover-page block */ .pv-cover { page-break-after: always; break-after: page; } .pv-cover dl { margin: 1em 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.3em 1em; } .pv-cover dt { font-weight: bold; font-family: Georgia, serif; } .pv-cover dd { margin: 0; font-family: 'Courier New', monospace; font-size: 9.5pt; word-break: break-all; } /* Suppress link underlines + visited colors so printed pages stay clean */ a, a:visited { color: black; text-decoration: none; } } /* ── Screen preview mode (JS-triggered via body.printing) ─────────────────── */ /* Mirrors the @media print rules so users see what will actually print before they hit OK in the print dialog. */ body.printing { background: #f4f4f4; } body.printing header.masthead, body.printing nav.section-nav, body.printing nav.menu, body.printing .container > header.title, body.printing .container > p, body.printing .container > .config-panel, body.printing .container > .capacity-bar, body.printing .container > .generate-row, body.printing .container > .status-strip, body.printing .container > .stats-strip, body.printing .container > .security-panel, body.printing .container > details, body.printing .container > .info, body.printing #word-list-info, body.printing button:not(.print-control), body.printing .modal-overlay { display: none !important; } body.printing .container { max-width: 8.5in !important; margin: 1em auto !important; padding: 0.55in 0.5in 0.6in 0.5in !important; background: white !important; color: black !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; border: 1px solid #ccc !important; font-family: Georgia, 'Liberation Serif', serif !important; font-size: 10pt !important; } body.printing .print-view { display: block !important; color: black; } body.printing .print-view h1 { font-size: 18pt; color: black; margin: 0 0 0.4em 0; } body.printing .print-view h2 { font-size: 13pt; color: black; margin: 1em 0 0.3em 0; } body.printing .print-view h3 { font-size: 11pt; color: black; margin: 0.8em 0 0.2em 0; } body.printing .print-view p { margin: 0 0 0.5em 0; color: black; } body.printing .pv-cols-2 { column-count: 2; column-gap: 1.4em; } body.printing .pv-cols-3 { column-count: 3; column-gap: 1.1em; } body.printing .pv-cols-4 { column-count: 4; column-gap: 0.9em; } body.printing .pv-cols-2, body.printing .pv-cols-3, body.printing .pv-cols-4 { column-rule: 0.5pt solid #ccc; column-fill: auto; margin: 0.4em 0; } body.printing .pv-entry { display: block; font-size: 9pt; line-height: 1.3; padding: 0.05em 0; break-inside: avoid; color: black; } body.printing .pv-entry .pv-code, body.printing .pv-entry .pv-codes, body.printing .pv-code, body.printing .print-view code { font-family: 'Courier New', 'Liberation Mono', monospace; font-size: 9.5pt; letter-spacing: 0.02em; color: black; } body.printing .pv-entry .pv-arrow { color: #888; margin: 0 0.4em; } body.printing .pv-entry .pv-token { font-family: Georgia, serif; font-size: 9.5pt; } body.printing .pv-section-head { font-family: Georgia, serif; font-size: 10.5pt; font-weight: bold; margin: 0.6em 0 0.2em 0; padding-bottom: 0.1em; border-bottom: 0.5pt solid #888; column-span: all; color: black; } body.printing .pv-cover { border-bottom: 0.5pt dashed #999; padding-bottom: 1em; margin-bottom: 1em; } body.printing .pv-cover dl { margin: 1em 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.3em 1em; color: black; } body.printing .pv-cover dt { font-weight: bold; font-family: Georgia, serif; } body.printing .pv-cover dd { margin: 0; font-family: 'Courier New', monospace; font-size: 9.5pt; word-break: break-all; } /* Floating exit bar shown only in screen preview mode */ .print-control-bar { display: none; position: fixed; top: 1em; right: 1em; z-index: 9999; background: #2B2B2B; border: 1px solid #909090; border-radius: 4px; padding: 0.5em 0.8em; box-shadow: 0 2px 10px rgba(0,0,0,0.4); font-family: system-ui, sans-serif; font-size: 0.95em; color: #DCDCCC; } body.printing .print-control-bar { display: flex; gap: 0.6em; align-items: center; } .print-control-bar button { font-size: 0.95em; padding: 0.3em 0.8em; background: #5F7F5F; color: #DCDCCC; border: 1px solid #ABCFAB; border-radius: 3px; cursor: pointer; } .print-control-bar button:hover { background: #ABCFAB; color: #2B2B2B; } @media print { .print-control-bar { display: none !important; } }