/* ============================================================================ print.css — what comes out of the printer. Loaded with media="print", so none of this affects the screen. THE THREE-WAY SIZE SWITCH — the piece nothing else in this codebase has. teacher-binder ships Letter-default with an A4 opt-in; Hanami Journal must sell to a buyer who wants A5 (the bullet-journal size Etsy competitor bundles advertise) just as often as A4. html[data-paper] selects the named @page block; the default (no attribute, or "letter") stays Letter. THE TRAP, documented here because it costs an afternoon to rediscover: the future theme engine (js/theme.js, Phase 5) writes the derived palette as INLINE custom properties on :root. Inline style beats any selector, so an override here must carry !important ON THE CUSTOM PROPERTY ITSELF. @media print { :root { --ink: var(--print-ink) !important; } } A `html[data-printing] { --ink: #000 }` selector is NOT specific enough. INVENTORY .no-print .print-cover .print-divider .print-sheet .print-sheet--wide .print-card .print-allow-break .print-h2 .print-h3 .print-note .week-day-body--print .day-print-lines (ruled-line blank-fill treatment) .tracker-print-block .tracker-print-grid .tracker-print-cell .tracker-print-cell--on .print-cover-motif .print-cover-stage .print-cover-owner mood-ring-dot--print (screen's .mood-ring-dot pattern reused statically for print) Set on rather than as classes: [data-printing] a print run is in progress; the live view is hidden [data-paper] 'letter' | 'a4' | 'a5' [data-print-mode] 'ink-saver' | 'color' ============================================================================ */ @page { size: Letter portrait; margin: 0.5in 0.5in 0.5in 0.75in; /* wide left margin for a 3-hole punch */ } @page a4page { size: A4 portrait; margin: 12mm 12mm 12mm 19mm; } @page a5page { size: A5 portrait; margin: 8mm 8mm 8mm 12mm; } /* NEW — no prior art in this repo */ @page landscape { size: Letter landscape; margin: 0.5in 0.75in; } @page a4landscape { size: A4 landscape; margin: 12mm 19mm; } @page a5landscape { size: A5 landscape; margin: 8mm 12mm; } html[data-paper="a4"] body { page: a4page; } html[data-paper="a5"] body { page: a5page; } html[data-paper="a4"] .print-sheet--wide { page: a4landscape; } html[data-paper="a5"] .print-sheet--wide { page: a5landscape; } html:not([data-paper="a4"]):not([data-paper="a5"]) .print-sheet--wide { page: landscape; } /* Ink-saver is the default — a buyer printing at a copy shop pays per page of colour toner. Full colour is one Settings switch away. */ html:not([data-print-mode="color"]) { --ink: var(--print-ink) !important; --ink-soft: var(--print-ink) !important; --ink-faint: var(--print-ink) !important; --surface: var(--print-surface) !important; --surface-2: var(--print-surface) !important; --surface-3: var(--print-surface) !important; --bg: var(--print-surface) !important; --brand: var(--print-ink) !important; --brand-soft: var(--print-line) !important; --brand-tint: var(--print-surface) !important; --line: var(--print-line) !important; --line-strong: var(--print-line) !important; } /* Dot-grid at true 5mm on paper (docs/DESIGN-SYSTEM.md §4) — the 18.9px in components.css is a 96dpi screen approximation and would print at the wrong physical scale if left as-is, since "dpi" is not a fiction on paper the way it is on screen. */ @media print { .paper { background-size: 5mm 5mm; } } html[data-print-mode="color"] * { print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; } body { background: var(--print-surface); font-size: 10.5pt; } /* App chrome never goes on paper. */ .no-print, .topbar, .nav-rail, .tab-bar, .toast-root, .modal-root, .splash, .skip-link, .fx-canvas, .ink-toolbar { display: none !important; } /* During a print run, js/print.js sets data-printing on and fills [data-print-doc]. The live app is hidden; the assembled document shows — screen views are full of inputs/filters/scroll and are never what prints. */ html[data-printing] .app-shell { display: none !important; } html[data-printing] [data-print-doc] { display: block !important; } [data-print-doc] { display: none; } .print-cover { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-4); break-after: page; } .print-cover-title { font-family: var(--font-display); font-size: 34pt; margin: 0; } .print-cover-owner { font-size: 13pt; color: var(--ink-soft); margin: 0; font-style: italic; } .print-cover-motif { width: 45mm; height: 45mm; } .print-cover-motif svg { width: 100%; height: 100%; display: block; } /* .cover-sticker itself (position, rotation, sizing) is defined in pages.css, which — unlike print.css — has no media="print" restriction, so it already applies here; this just gives its absolute children a positioning parent the same size as the printed drawing area. */ .print-cover-stage { position: relative; } .print-divider { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; break-before: page; break-after: page; } .print-divider-title { font-family: var(--font-display); font-size: 22pt; } .print-sheet { break-before: page; padding: 0; } .print-h2 { font-family: var(--font-display); font-size: 16pt; margin: 0 0 8pt; } /* Sub-heading within a printed page (a section inside money.js/trackers.js/ selfcare.js/goals.js/travel.js/bingo.js/reading.js's printRender) — was copy-pasted 22 times as inline style="font-size:11pt" on .print-h2 instead of its own class; consolidated here so the size only lives in one place. */ .print-h3 { font-family: var(--font-display); font-size: 11pt; margin: 0 0 4pt; } .print-note { color: var(--ink-soft); font-size: 9pt; } .print-allow-break { break-inside: auto; } .print-card, table { break-inside: avoid; } thead { display: table-header-group; } h1, h2, h3 { break-after: avoid; } a[href]::after { content: ''; } /* never print a raw URL after a link */ /* Weekly plan on paper: a fixed 7-column grid always, never the screen's scrollable phone-width strip — a printed page has no scroll gesture, so the flex+overflow layout from pages.css would just clip six of the seven days off the edge of the sheet. */ .week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4pt; margin-top: 8pt; } .week-day-col { border: 0.5pt solid var(--print-line); } .week-day-head { text-align: center; font-size: 8pt; padding: 3pt; border-bottom: 0.5pt solid var(--print-line); } /* The blank-fill treatment (contract rule 9): repeating ruled lines make an EMPTY day box read as "write here by hand", the same promise the competitor's printable pages make, rather than as a rendering mistake. Filled-in text simply overlays the same ruling. */ .week-day-body--print, .day-print-lines { padding: 4pt; min-height: 130pt; line-height: 15pt; background-image: repeating-linear-gradient(to bottom, transparent, transparent 14.5pt, var(--print-line) 14.5pt, var(--print-line) 15pt); } .day-print-lines { min-height: 220pt; } /* Tracker grids: numbered 1..31 boxes, filled ones inverted. Multiple trackers stack on one sheet with break-inside:avoid so a grid never splits its own days across two pages. */ .tracker-print-block { break-inside: avoid; margin-bottom: 10pt; } .tracker-print-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2pt; margin-top: 4pt; } .tracker-print-cell { border: 0.5pt solid var(--print-line); text-align: center; font-size: 7pt; padding: 3pt 0; } .tracker-print-cell--on { background: var(--print-ink); color: var(--print-surface); } /* Year in Review grid — ink-saver override, same reasoning as .tracker-print-cell--on just above: a buyer printing at a copy shop pays per page of colour toner, so the default is plain ink regardless of which --sec-N a tracker's card uses on screen. !important because the [data-sec="N"] rules in pages.css (attribute + class) outrank a plain .tracker-year-cell--on selector on specificity alone, the same trap documented earlier in this file for .print-sheet--wide. Full color remains one Settings switch away (data-print-mode="color"). */ html:not([data-print-mode="color"]) .tracker-year-cell--on { background: var(--print-ink) !important; } .tracker-year-row-label { font-size: 6pt; } /* Mood ring, printed: the same radial layout as the screen, but every dot is a plain circle with a real border to color in by hand — this is, deliberately, the exact category of printable the competitor sells, just auto-dated instead of generic. */ .mood-ring-dot--print { position: absolute; transform: translate(-50%, -50%); width: 18pt; height: 18pt; border-radius: 50%; border: 0.75pt solid var(--print-line); font-size: 6pt; display: flex; align-items: center; justify-content: center; } .mood-ring-dot--print.mood-ring-dot--filled { background: color-mix(in oklab, var(--dot-fill) 45%, var(--print-surface)); border-color: var(--dot-fill); } /* Every page must be A5-safe (contract rule 10): a fixed max content width that fits inside an A5 printable area (~120mm at the smallest margin) means it also fits A4 and Letter for free, so this is the ceiling every print-sheet layout designs against rather than "shrinks to fit" tricks. */ .print-sheet, .print-cover, .print-divider { max-width: 118mm; margin: 0 auto; } html[data-paper="a4"] .print-sheet, html[data-paper="a4"] .print-cover, html[data-paper="a4"] .print-divider, html:not([data-paper="a5"]) .print-sheet, html:not([data-paper="a5"]) .print-cover, html:not([data-paper="a5"]) .print-divider { max-width: 180mm; /* A4/Letter printable width gets the roomier layout */ } /* A page marked paper:'landscape' (year.js's 12-month grid, week.js's 7-day row) prints on a landscape sheet, which is genuinely WIDER than a portrait page — capping it at the portrait 118mm ceiling above would waste exactly the room the landscape choice exists to buy. Same "design to the tightest budget" strategy as the portrait rule: A5 landscape's usable width (210mm - 8mm each side = 194mm) is the ceiling, so A4/Letter landscape (270mm+ usable) get extra margin rather than a different layout. !important, deliberately: the two conditional rules above (html[data-paper="a4"] .print-sheet, etc.) carry an attribute selector, so their specificity (0,2,1) beats a plain .print-sheet--wide (0,1,0) regardless of source order — discovered by measuring actual rendered widths in the browser (A5 correctly got 194mm, A4 silently stayed at the portrait 180mm). Matching their specificity with a longer selector chain would work too, but re-breaks the moment those rules are next edited; !important says "a wide sheet's width is never paper-conditional" once, directly — the same tool tokens.css's own header already documents using for exactly this kind of "must always win over an inline/high-specificity rule" case. */ .print-sheet--wide { max-width: 194mm !important; } /* Year-at-a-Glance print fix. First cut (v17) made year.js print LANDSCAPE with 4 columns, because 12 months clearly read wider than tall on screen. The buyer explicitly asked for this page to print vertically instead, like the rest of the journal, one portrait page — so year.js's `paper` is back to the default 'portrait' (see that file) and this targets the plain .print-sheet (118-180mm) instead of .print-sheet--wide (194mm). Portrait width is narrower, so 3 columns (12 months -> 4 rows) replaces the old 4-column layout — still comfortably clears every paper's PORTRAIT height budget (far taller than any landscape orientation ever was), and the SCREEN grid's touch-sized spacing/font-size still needs the same shrink as before since paper doesn't need a 44px touch target. Re-verified with the same forced-print-CSS measurement technique used when this was landscape: see hanami-journal-product.md memory for the actual mm figures from both rounds. */ .print-sheet .year-grid { grid-template-columns: repeat(3, 1fr); gap: 3mm; margin-top: 4mm; } .print-sheet .year-month-card { padding: 2mm; } .print-sheet .year-mini-head { font-size: 10px; margin-bottom: 1mm; } .print-sheet .year-mini-grid { font-size: 8px; gap: 0.5px; } .print-sheet .year-mini-dow { font-size: 7px; padding: 1px 0; } .print-sheet .year-mini-cell { padding: 1px 0; } /* A4/Letter give this page roughly 40% more usable width and 40% more height than A5 — the buyer specifically asked for "cuadrados medianos" filling the page, not the A5-minimum size sitting cramped in a corner with the rest of the sheet blank. Scaled up to use that room instead of reusing A5's tightest-fit numbers everywhere. Re-verified at ~193mm tall against A4 portrait's ~273mm budget and Letter's ~254mm — comfortable fill without overflowing either. */ html:not([data-paper="a5"]) .print-sheet .year-grid { gap: 5mm; margin-top: 8mm; } html:not([data-paper="a5"]) .print-sheet .year-month-card { padding: 4mm; } html:not([data-paper="a5"]) .print-sheet .year-mini-head { font-size: 14px; margin-bottom: 2mm; } html:not([data-paper="a5"]) .print-sheet .year-mini-grid { font-size: 12px; gap: 1px; } html:not([data-paper="a5"]) .print-sheet .year-mini-dow { font-size: 10px; padding: 1px 0; } html:not([data-paper="a5"]) .print-sheet .year-mini-cell { padding: 2px 0; } /* week.js's 7-column grid only turns on above a 900px VIEWPORT width (pages.css's `@media (min-width:900px)`) — below that it's the phone layout, a horizontally-scrolling flex strip. That breakpoint was written for the on-screen browser window, but print `@media` conditions are evaluated against the PAGE BOX, not any browser window, and A5 landscape's page box (~210mm ≈ 794px) sits BELOW 900px — narrower than the exact A4/ Letter landscape pages (~1057-1122px) that happen to clear it. Left alone, that means A5 could print the week view as a clipped horizontal scroll strip with days missing off the edge of the paper, while A4/Letter print fine — a paper-size-dependent bug that would be easy to ship unnoticed since most manual testing defaults to Letter/A4. Forced unconditionally here instead of trusting print-time media-query evaluation: nothing on paper can scroll anyway, and .print-sheet--wide already caps content to a known 194mm regardless of the physical sheet, so the real 7-column grid is always correct in print, independent of paper size. */ .print-sheet--wide .week-grid { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; overflow-x: visible !important; } .print-sheet--wide .week-day-col { min-width: 0 !important; }