/* ============================================================ What the Affordability Report becomes on PAPER. Linked media="print". Hand-authored for the same reason report.css is: a `print:` Tailwind utility that was never compiled fails silently, and a print stylesheet is the one place nobody looks until it is wrong in front of a customer. ============================================================ */ @page { size: A4 portrait; margin: 15mm; } @media print { /* --- the page itself --- */ html, body, .demo-root, .rpt { background: #fff !important; } body { font-size: 10.5pt; line-height: 1.45; } /* Home's wrapper is a centred 1120px column with generous padding. On paper the @page margin IS the margin. */ .rpt-page { max-width: none !important; padding: 0 !important; margin: 0 !important; } .rpt { max-width: none; } /* --- what does not belong on paper --- `.demo-root > header` and NOT `header`: the site's sticky bar is a direct child of the root, and the report's own A1 block is a
too. The bar is position:sticky, which prints as static - so without this it lands at the top of page one, above the report. */ .rpt-noprint, .demo-root > header, .demo-root footer, .tabbar { display: none !important; } /* --- SPACING, PRINT ONLY --- report.css is tuned for a screen and this file previously overrode none of it, so the document printed at screen density. Measured at 96dpi against a 267mm content box (1009px), the applicant layer came to about 1165px for a manual approve - 156px over, which is why "What happens next" and "What this report covers" landed on a second page that was two-thirds empty. Every number below is a reduction in WHITESPACE, not in type size. The budget it is sized from: 5 section margins 26 -> 14px 60px 6 chain rows 7 -> 5px 24px 6 table rows 7 -> 5px 24px 5 headings 8+6 -> 5+4px 20px callout padding 16 -> 12px 8px 4 notes 8 -> 6px 8px h1 26 -> 22px 5px name line 16 -> 12px 4px meta margin 14 -> 10px 4px ----- 157px That brings the layer inside one page. It does NOT leave room for Chrome's "Headers and footers", which is on by default and takes roughly 12mm at each edge - about another 100px. The screen view tells the user to turn it off, which is right for this document anyway: it stamps the browser's own date and the page URL onto a report that carries its own reference and assessment time. */ .rpt-sec { margin-top: 14px; } .rpt-h1 { font-size: 22px; } .rpt-h2 { margin-bottom: 5px; padding-bottom: 4px; } .rpt-h3 { margin: 10px 0 4px; } .rpt-lede { margin-top: 4px; } .rpt-note { margin-top: 6px; } .rpt-meta { margin-top: 10px; } .rpt-meta dt, .rpt-meta dd { padding-top: 1px; padding-bottom: 1px; } .rpt-nameline { margin-top: 12px; } .rpt-callout { padding: 12px 16px; } .rpt-chain { margin-top: 8px; } .rpt-chain-row { padding: 5px 0; } .rpt-table { margin-top: 8px; } .rpt-table td { padding: 5px 0; } .rpt-table.is-kv td { padding-top: 1px; padding-bottom: 1px; } /* It starts a fresh page, so the space above its border rule is wasted at the top of a sheet. */ .rpt-layer { margin-top: 0; padding-top: 0; } /* NO RUNNING HEAD. It was position:fixed lifted into a reserved band by a negative offset, and it printed at the FOOT of the page instead - two coupled magic numbers relying on undocumented Chromium behaviour in the page-margin band. Each LAYER identifies itself at its own top instead: A1 carries the reference, the date and the applicant line, and the reviewer layer's opening block repeats all three. What this gives up: a page that overflows WITHIN a layer carries no identifier. The only mechanism Chromium actually documents for per-page repetition is table-header-group, which would mean wrapping the whole document in a table. Traded deliberately - a header that is always in the right place beats one that is sometimes on every page. */ /* --- the layer break --- */ .rpt-break { break-before: page; page-break-before: always; } /* --- what must not be split --- Each of these is one unit of meaning. A bar orphaned from its label, or a code split from its description, is worse than a short page. SMALL BOUNDED BLOCKS ONLY. These were on whole
s, and A4's money chain is the tallest thing in the applicant layer - when it did not fit after A3 the entire section jumped to page two and A5, A6 and A7 followed it, leaving half of page one empty. break-inside on a container is only ever as good as the container is small. */ .rpt-keep, .rpt-callout, .rpt-chain, .rpt-nameline, .rpt-table tr, .rpt-sec > .rpt-h2 { break-inside: avoid; page-break-inside: avoid; } /* A heading alone at the foot of a page. */ .rpt-h2, .rpt-h3 { break-after: avoid; page-break-after: avoid; } /* Repeat column headers when a table spans pages. This is why the report uses real table semantics rather than the flex rows the screen settled for. */ thead { display: table-header-group; } tfoot { display: table-footer-group; } /* --- colour-carried signals --- Browsers drop backgrounds when printing. Everything below says something BY COLOUR - the verdict band, the evidence bars, the severity chips - and would print as blank boxes without this. */ .rpt-callout, .rpt-callout.is-approve, .rpt-callout.is-refer, .rpt-callout.is-decline, .gauge-track, .gauge-fill, .code-chip, .src-chip { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* Chrome appends href text to links by default in some configurations. */ a[href]::after { content: none !important; } /* ON A SELECTOR. These were loose declarations sitting directly inside the @media block where a rule is expected - a parse error, whose recovery read them as a prelude hunting for a `{` and swallowed the block's closing brace. They have never applied; the malformed tail was tolerated only because it was at end of file. Inherited from .rpt, so one rule reaches every paragraph and cell. 2 rather than 3: most blocks here are two- and three-line paragraphs, and a widow count of 3 is simply unsatisfiable for them - the browser then ignores it or moves the whole block, which is the behaviour being avoided. 2 still prevents the single stranded line. */ .rpt { orphans: 2; widows: 2; } }