/* ============================================================================= styles/TerraQuickStartPrint.css - the Quick Start guide, as a PDF ----------------------------------------------------------------------------- ⚠️ THE PAGE ITSELF LINKS THIS, with media="print" - so it is what a reader gets when they press Ctrl+P. It used to be loaded only by a build script that made a committed PDF, and the published page had NO print rules at all, so printing the guide gave the raw screen layout. That PDF is gone; this is the guide on paper now. media="print" means a browser fetches it and never applies it on screen, so nothing here can affect what a visitor reads. WHY IT EXISTS: printed straight from the browser the guide ran to fourteen pages, most of it whitespace designed for reading on a screen. A guide that is skimmed rather than studied should not read as homework. It is eight. The reductions are all SPACING and SCALE, never content: every section, table and warning that a reader gets on the web page is in the PDF too. ============================================================================= */ /* ----------------------------------------------------------------------------- PAGE SET-UP -------------------------------------------------------------------------- */ /* ⚠️ THE MARGINS ARE FOR THE BROWSER'S OWN HEADER AND FOOTER, not for anything this file draws. Chromium prints the date, the title and the page number into them, and will not let CSS put a `position: fixed` element there - see the note further down, which cost a day to establish. ⚠️ A4 IS PINNED ON PURPOSE, AND EVERY PAGE BREAK IN THIS FILE DEPENDS ON IT. The breaks below are placed by hand against a known page height. Leave the size to the reader (`size: auto`) and that height becomes whatever paper they happen to have loaded, at which point a break tuned to fall at the foot of a sheet falls halfway down the next one instead. The size that would otherwise turn up is US LETTER - 216 x 279mm against A4's 210 x 297. It is 6mm WIDER and 18mm SHORTER, and the height is what matters: with these margins the text column is 270mm tall on A4 and 252mm on Letter, so a sheet holds about four fewer lines at 10pt. Roughly 3-4% less text overall once the extra width is allowed for. A guide laid out to fill an A4 page would therefore spill a little onto the next sheet on Letter, and every deliberate break after it would compound the drift. The cost of pinning is that a reader printing on Letter gets the A4 layout scaled to fit - about 6% smaller type - rather than a re-flow. That is the right trade for a document whose pagination is hand-placed, and it is the only way the breaks mean the same thing for every reader. ⚠️ AND THE UNITED STATES IS NOT MOVING TO A4. There is no initiative to; the federal government standardised ON Letter in 1980, moving away from its older 8 x 10.5in size rather than toward ISO 216. The US, Canada and Mexico are the main Letter users; essentially everywhere else is A4. So this is a permanent split to design around, not a transition to wait out. */ @page { size: A4; margin: 15mm 13mm 12mm 13mm; } /* ----------------------------------------------------------------------------- SCALE -------------------------------------------------------------------------- */ /* The single biggest saving. The web page sets generous, screen-friendly type; print does not need it, and 10pt on A4 is comfortable for a reference document that is scanned rather than read end to end. */ html, body { font-size: 9.25pt !important; line-height: 1.29 !important; background: #fff !important; color: #111 !important; } /* The guide's own container is sized for a browser window. On A4 the @page margins already do that job, so the padding is pure waste. */ body > *, main, article, .qs-wrap, .wrap { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* ----------------------------------------------------------------------------- SPACING - the second big saving -------------------------------------------------------------------------- */ h1 { font-size: 15pt !important; margin: 0 0 6pt !important; } h2 { font-size: 12pt !important; /* 14pt above: a section that runs on below the one before it needs a clear gap to read as a new section (7pt looked like a sub-heading). */ margin: 14pt 0 2pt !important; /* Keep a heading with the text under it: a section title stranded at the foot of a page is the classic printed-document fault. */ break-after: avoid; page-break-after: avoid; } h3 { font-size: 11pt !important; margin: 5pt 0 1pt !important; break-after: avoid; page-break-after: avoid; } p, li { margin: 0 0 2pt !important; orphans: 3; widows: 3; } ul, ol { margin: 0 0 3pt !important; padding-left: 16pt !important; } /* The section spacers are a screen device - deliberate breathing room between topics. On paper the heading already separates them. */ hr, .qs-spacer, .spacer, [class*='spacer'] { display: none !important; } /* ----------------------------------------------------------------------------- THINGS THAT ONLY MAKE SENSE ON SCREEN -------------------------------------------------------------------------- */ /* The navbar, the return-to-Terra control, the theme switch and anything else clickable. A printed page cannot be clicked, and each costs vertical space. */ nav, .terra-nav, header nav, .qs-nav, .qs-close, .qs-return, button, .small-button, .print-hide { display: none !important; } /* ⚠️ THE WHOLE BRAND BAR, NOT ITS CONTENTS ONE AT A TIME. `.qs-close` above is INSIDE .qs-topbar, and hiding the bar's children while leaving the bar itself is how the wordmark came to be printed: the bar stayed, carrying `.qs-brand` - TERRA at 1.6rem in Days One - into the document flow. And it did not print once. `.qs-topbar` is `position: sticky` on screen, and Chromium's print engine re-anchors a sticky element at each page fragment exactly as it repeats a fixed one. So the wordmark appeared partway down pages, reading as a page break that had gone wrong. The running header at the top of every page is `.pdf-running-header`, injected by scripts/quickstart-pdf.mjs, which does this job deliberately and in the page margin. Two elements were competing to be the header and only one of them knew it. */ .qs-topbar, .qs-brand, .qs-applogo { display: none !important; } /* ----------------------------------------------------------------------------- WHERE A PAGE DELIBERATELY BREAKS -------------------------------------------------------------------------- */ /* The appendix is a REFERENCE, not the next thing to read: somebody looks a warning up in it weeks after reading the guide once. Starting it on a fresh sheet is what lets it be found by flicking, and stops the guide appearing to trail off mid-page into a list. ⚠️ IT IS KEYED ON THE ID, NOT ON POSITION OR ON THE HEADING TEXT. The id already exists because the contents list links to it, so it cannot be renamed without the link breaking loudly - whereas "the last h2" quietly becomes the wrong section the moment anything is appended, and matching the words would need this file edited every time the title is reworded. */ /* ⚠️ ONE RULE, ONE LIST. Every section that starts a fresh sheet is named here, so where the guide breaks is answerable by reading four lines rather than by searching the markup for scattered break properties. Add an id to the heading in TerraQuickStart.html, then add it here. */ /* THE SECTION ORDER (since 2026-10-26): 1 example, 2 building blocks, 3 purchase price, 4 line item (#line-item), 5 action bar (#action-bar), 6 residual value (#residual-value), 7 leases, 8 finance, 9 results, 10 AI assistance, 11 install; then the appendices, the keyboard shortcuts first. The line item and the action bar were moved forward so a new reader meets the everyday pattern and the toolbar before the residual value tool. #line-item (section 4) STARTS A SHEET: its screenshot is tall, and running on below section 3 split it across a page turn in Firefox. The screenshot is also capped in height (img.qs-line-item-shot, below) so it fits that first sheet. Sections 5, 6 and 7 (#action-bar, #residual-value, #leases) also start a sheet each, so the guide's main topics open on a fresh page, as do 10 and 11. The cost is a part-filled sheet before each where the section above ends early - accepted for the clearer starts. ⚠️ #finance AND #results ARE NOT IN THIS LIST, on purpose: each was measured (headless Edge, 2026-10-26) leaving the tail of the section above alone on a sheet (section 7's inflation note on one 11% full; section 8's tail on one 31% full). They run on below the section before them, with the wider h2 gap above; a heading is never left at the foot of a sheet (break-after: avoid, above). ⚠️ THE FIRST BREAK IS BEFORE SECTION 2 (#building-blocks), not section 3: page 1 is full by the end of section 1, and a break before section 3 left the rest of page 2 blank. */ /* ⚠️ #end-period IS NOT IN THIS LIST ANY MORE. It is one field block inside section 4's box-by-box walkthrough - the last of them - and it used to start a sheet of its own, which broke the walkthrough in two for no reason a reader could see: the blocks before it are the same shape and run on. The id stays in the markup (the contents list links to it), and this note stays because the list is meant to answer "where does the guide break?" in one place - including where it deliberately does not. */ #building-blocks, #line-item, #action-bar, #residual-value, #leases, #ai-research, #install, #warnings-appendix, #kpi-appendix, /* The KPI appendix's longer tables each start a sheet, so none is split across a page turn. */ #kpi-returns, #kpi-equity-debt, #kpi-section-totals, #finance-appendix, #definitions-appendix, #shortcuts-appendix { break-before: page; page-break-before: always; /* At the top of a sheet the h2's 14pt gap is wasted paper - it is there only to set a section apart from the one above it on the same sheet. */ margin-top: 0 !important; } /* ⚠️ A CALLOUT THAT INTRODUCES ONE OF THOSE SECTIONS MUST TRAVEL WITH IT, or the forced break strands it on a sheet of its own. Measured when the break sat before section 4: section 3 ended with "...that's the Residual value tool (next)" - a bridge into it. `break-inside: avoid` pushed that callout onto a new page, and the forced break then started section 4 on the page AFTER it. The result was a sheet 2% full carrying one sentence. ⚠️ `break-after: avoid` ON THE CALLOUT DOES NOT FIX IT. A forced break takes precedence over an avoid, so the callout still gets left behind. The break has to MOVE onto the callout - and then be cancelled on the heading, or there are two breaks and the blank page comes back. Both halves, always. */ /* ⚠️ AND A FORCED BREAK CAN STILL LEAVE A THIN PAGE, WHICH IS NOT A BUG TO CHASE. Whatever spills out of the previous section has to land somewhere, and a forced break gives it a page of its own however little of it there is: section 3 currently overruns page 1 by one line, so page 2 carries that line and nothing else. Nothing in CSS can say "break here unless it would waste a sheet" - orphans and widows were tried and cannot help, because a forced break outranks them. The lever is editorial: shorten the section above, or drop the break. */ blockquote:has(+ #building-blocks), blockquote:has(+ #warnings-appendix) { break-before: page; page-break-before: always; } blockquote:has(+ #building-blocks) + #building-blocks, blockquote:has(+ #warnings-appendix) + #warnings-appendix { break-before: auto; page-break-before: auto; } /* ----------------------------------------------------------------------------- BLOCKS THAT MUST NOT SPLIT ACROSS A PAGE -------------------------------------------------------------------------- */ /* A warning callout or a worked example broken over a page turn loses most of its point - the reader sees half a caution. */ blockquote, table, figure, .qs-callout, .callout, /* The box-by-box cards of section 4: each is a heading and a short explanation, a third of a page at most, and one of them broke with its heading alone at the foot of a sheet and the words on the next. */ .qs-field { break-inside: avoid; page-break-inside: avoid; } blockquote { margin: 6pt 0 !important; padding: 5pt 8pt !important; font-size: 9.25pt !important; } table { font-size: 8.75pt !important; border-collapse: collapse !important; width: 100% !important; } th, td { padding: 2pt 4pt !important; } /* ⚠️ A ROW MAY NOT SPLIT ACROSS A PAGE TURN, but a TABLE may. The distinction is the whole rule: the warnings appendix is a long reference table that has to be allowed to run over a page break, while a row broken through the middle of its own cells - the first line of an explanation on one sheet and the rest on the next, with no heading above it - is unreadable in a way no reader can repair. Protecting the row rather than the table gets the first without forbidding the second. The short tables in the walk-through sections (three or four rows) are covered by this too: a table that fits on a page will not be split at all, because there is no row it could break between without breaking a row. */ tr { break-inside: avoid; page-break-inside: avoid; } /* ⚠️ THE SHORTCUTS APPENDIX'S TABLE RUNS ON BELOW ITS INTRODUCTION. Twenty rows do not fit under the opening paragraph, so the `table` rule above (break-inside: avoid) pushed the whole table to the next sheet and left the paragraph alone on the first. The rows are still kept whole by the `tr` rule. And the wrapper's overflow-x: auto (for a narrow screen) is undone: Firefox does not break a scrolling box across pages at all. */ .qs-shortcut-table { break-inside: auto; page-break-inside: auto; } .qs-table-wrap:has(> .qs-shortcut-table) { overflow: visible; } /* Compact on paper, so the whole table fits one sheet with its introduction: the screen's 42px icon boxes made every row three lines tall. */ .qs-shortcut-table td, .qs-shortcut-table th { padding: 1pt 4pt !important; vertical-align: middle; } .qs-shortcut-table .qs-action-icon { width: auto !important; height: auto !important; border: 0 !important; padding: 0 !important; } .qs-shortcut-table .qs-shortcut { padding: 0 4pt; } /* ⚠️ THE GUIDE HAS ONE IMAGE AND IT IS MEANT TO BE READ, NOT GLANCED AT. This rule used to say 26%, on the reasoning that images here are a reminder of something already seen on screen and full width wastes a third of a page. That is right for a decorative screenshot and wrong for this one: it is the annotated line item that section 4 spends four pages explaining, every label in it is referred to by name in the text beside it, and at 26% the labels were simply too small to read on paper. ⚠️ THE SIZE COST A PAGE, AND THE PAGINATION WAS RE-CUT TO PAY FOR IT. Section 5 now needs most of two sheets, so the forced break that used to start section 6 was removed - section 6 runs on below it - and the break moved to section 7. That left room to spare below section 6, which is what paid for the second increase, from 52% to 78%; the section 7 break has since gone as well, leaving more. Changing this percentage again means re-checking the pagination, not just re-printing. Should a second, genuinely illustrative image ever be added, give it a class and size that class down rather than lowering this. */ img { max-width: 78% !important; height: auto !important; break-inside: avoid; page-break-inside: avoid; } /* The section 4 line-item screenshot prints at three quarters of that. */ /* ⚠️ AND NEVER TALLER THAN FITS ONE SHEET BELOW THE SECTION 4 HEADING. Firefox splits a tall image across a page turn despite break-inside: avoid, which put the top of the line item on one sheet and the rest on the next. The height cap (section 4 starts a sheet of its own, so the heading and the intro above it are all that share the page) keeps it whole; the width follows the height so the picture is not stretched. */ img.qs-line-item-shot { max-width: 50% !important; max-height: 170mm !important; width: auto !important; } /* ⚠️ AN INLINE IS NOT AN AND THE RULE ABOVE DOES NOT REACH IT. The guide carries nine of them - the action-bar icons, drawn inline so they inherit the text colour, plus the Terra mark in the bar - against a single tag. Sizing "the images" and leaving these at their screen size is the obvious half-fix, and it is invisible in a page count because an icon sits on a line of text. They are sized in `em` so they scale with whatever the surrounding type does, which is the whole reason the type scale above works at all. */ svg { max-width: 100% !important; height: auto; } .qs-action-icon svg { width: 1.15em !important; height: 1.15em !important; } /* ----------------------------------------------------------------------------- THE RUNNING HEADER AND FOOTER ARE THE BROWSER'S JOB -------------------------------------------------------------------------- */ /* ⚠️ THERE IS DELIBERATELY NOTHING HERE, AND A HAND-ROLLED ONE MUST NOT COME BACK. This file used to draw its own running header - a `position: fixed` element carrying the logo - because Chromium repeats fixed elements on every printed page. It does. What it will not do is put one in the @page MARGIN: top: -11mm -> the element printed at the BOTTOM of every sheet bottom: -9mm -> the element printed at the TOP, over the first heading transform: translateY(...) -> the same inversion Measured, all three, page by page. Each also LOST one page at an end - the header appeared on pages 1-7 and the footer on 2-8 of an eight-page document, because an element displaced outside its own page box is assigned to the neighbouring fragment. Anything that leaves the content box flips; anything that stays inside it overlaps the text. The browser already does this properly. Its own print header and footer sit in the paper margin, on every sheet, and carry the page number, the date and the page's real address - none of which CSS can supply, because counter(page) only works inside the @page margin boxes that no browser implements. The reader can also switch it off in the print dialog, which is their decision and not ours. ⚠️ AND IT IS WHY THE GENERATED PDF NEEDS `--no-pdf-header-footer`. The same browser furniture is helpful when a person prints the live page (it names terra-appraisal.com) and wrong when scripts/quickstart-pdf.mjs prints it, because that renders from a throwaway local server - so the PDF carried "http://127.0.0.1:55173/print" across the foot of all eight pages. */ /* ----------------------------------------------------------------------------- THE COLOPHON - print only -------------------------------------------------------------------------- */ /* A printed copy leaves the site behind, so it has to say which build it is and where the current one lives. It is the last thing in the document rather than a running element, which is the honest shape for it: it is a colophon, not a footer, and the page numbering it would otherwise be competing with comes from the browser. Hidden on screen simply by living only in this stylesheet. */ .qs-print-colophon { display: flex !important; justify-content: space-between; gap: 12pt; margin: 14pt 0 0 !important; padding-top: 4pt; border-top: 0.4pt solid #d8ddd6; font-size: 7.5pt !important; color: #5c6b64 !important; /* It belongs with whatever ends the guide; a colophon alone on a ninth page is worse than a slightly fuller eighth. */ break-inside: avoid; page-break-inside: avoid; } /* ----------------------------------------------------------------------------- LINKS -------------------------------------------------------------------------- */ /* On paper a link is just words, so it needs to read as ordinary text rather than as something that failed to be clickable. The addresses that matter are spelled out in the copy already. */ a { color: inherit !important; text-decoration: none !important; }