/* ========================================================================== tool-base.css — the print invariants shared by every tool page Loaded AFTER styles.css and BEFORE the tool's own theme file. Every rule is scoped under `.tool-app`, a class carried alongside the tool's own wrapper:
THE DOUBLED CLASS IS LOAD-BEARING. READ THIS BEFORE EDITING. Inside `@media print` every selector here is written `.tool-app.tool-app`, not `.tool-app`. A media query adds NO specificity, so `.tool-app .grid` (0,2,0) inside `@media print` ties with the tool's own unconditional `.cra-app .grid` (0,2,0) — and the tool's file loads later, so the SCREEN rule wins even when printing. That is not theoretical: the first version of this file printed all three tools in the full dark screen theme, black sheet and all, because every print rule here lost that tie. Each tool's print block used to win only because it sat further down its own file. Doubling the class makes the base's print rules outrank any screen rule. A tool that needs to override one doubles its OWN wrapper class on that rule only — equal specificity, and the tool's file loads later, so the tool wins. Three rules need it today: the planner's light-variable block and its `.grid` gap, and the readiness check's `.print-only h1` colour. Each is commented where it sits. DO NOT double a tool's print selectors wholesale to "be safe". It is not safe. A tool's print rule may be deliberately losing to a MORE specific screen rule, and raising it breaks that: blanket-doubling the planner flipped its positive-savings headline from green to amber, because `.col-app .headline` (print) was never meant to beat `.col-app .headline.good` (screen). Double only what actually collides with a rule in this file, and re-run the pixel diff. If you add a print rule HERE, double the class. If you add one to a tool, double it only if this file styles the same selector. WHAT THIS FILE IS Only the rules that must never drift between tools — the ones where a difference is a defect rather than a design choice. Each carries the failure that produced it, because reading the CSS is not what found any of them. WHAT THIS FILE IS NOT It is deliberately NOT the shared component library that CLAUDE.md's deferred-extraction note anticipated. That note assumed `.chart-*`, `.stat`, `.sub-head` and `.footnote` were common. Measured across the three theme files on 2026-08-05 they are not: only 3 rules in the whole manifest are byte-identical in all three tools, 13 more are present in all three with different values, and `.stat`/`.sub-head` do not exist in the planner at all. Even the two closest siblings — it-budget and cyber-readiness, one modelled on the other — differ on 20 of 25 rules. The tools share class NAMES, not styles: `.chart-track` is 8px/radius-2 in two of them and 6px/radius-3 with `overflow:hidden` in the third, and `.footnote` has three unrelated bodies. Moving those here would mean every tool overriding almost every rule, which is more indirection for no deduplication. They stay per-tool, on purpose. THE PLANNER IS THE ODD ONE OUT, ALSO ON PURPOSE. `cost-of-living.theme.css` prints a cooler, slightly larger document: `--ink #161a20`, `--dim #374151`, `--muted #6b7280`, `--line #d7dce3`, `--raised #fff`, `color #161a20`, `font-size 11px`. Those are Tailwind's cool grey ramp, inherited from the standalone offline planner this page is generated from; the other two use the warm neutrals below. It keeps its own block and overrides this file. Converging them is a VISIBLE change to a shipped tool's printed output, so it belongs in its own change, judged on its own — not folded into a refactor whose whole bar is being pixel-neutral. OUT OF SCOPE: `../../cost-of-living/index.html`, the standalone offline planner, must stay a single self-contained file and does not load this. ========================================================================== */ /* The masthead only exists on paper. */ .tool-app .print-only { display: none; } @media print { /* styles.css paints body dark and its text light. Without this reset the sheet comes out black outside the cards whenever background graphics are on, with near-black text on it. */ body { background: #fff !important; color: #111 !important; } /* `.no-print` alone covers the header, the editor column and the CTA — they all carry the class in the markup. The per-tool blocks that also name them by class are belt-and-braces and harmless. */ .navbar, .footer, .no-print { display: none !important; } .tool-app.tool-app { /* Paper is light. Leaving the screen's dark scheme on makes the engine draw native widget chrome for a dark UI onto a white sheet. */ color-scheme: light; --bg: #fff; --card: #fff; --raised: #f4f4f5; --ink: #111; --dim: #333; --muted: #666; --line: #d4d4d8; --line-strong: #9a9aa2; /* The site's amber, darkened for paper. Every tool prints the same accent: two tools on one site handing clients reports in two different brand colours is the defect this value fixed. */ --accent: #8a6420; --accent-soft: #f7f1e4; color: #111; font-size: 10.5pt; } .tool-app.tool-app .wrap { padding: 0; max-width: none; } .tool-app.tool-app .print-only { display: block; margin-bottom: 14px; border-bottom: 2px solid var(--accent); padding-bottom: 8px; } /* A tool whose own theme does not neutralise the site's editorial typography must also set `color` here: styles.css gives h1 its own light colour for the dark screen theme, and that rule beats the inherited `color: #111` above — so the single most important line on the report, the client's name, printed as pale grey on white. The planner and the estimator dodge it a second way, with `color: inherit` in their `h1, h2, h3, p` neutralising rule. Found by rasterizing page 1. */ .tool-app.tool-app .print-only h1 { margin: 0; font-size: 18px; font-family: var(--font-display); font-weight: 700; } .tool-app.tool-app .print-only .meta { color: #555; font-size: 11px; margin-top: 3px; } /* NOT `display: grid`. Gecko does not fragment grid containers across pages at all: the whole document becomes one unbreakable box, fails to fit after the masthead, moves wholesale to sheet 2 and then overflows — an entirely blank first page, which four rounds of Chromium-only print QA missed on two shipped tools. A column flex box fragments in both engines. `align-items: stretch` is the other half. The screen rule sets `align-items: start` so the sticky sidebar hugs its content; on a COLUMN flex box that same declaration is the cross axis, and it shrink-wrapped every card to a fraction of the sheet width. */ .tool-app.tool-app .grid { display: flex; flex-direction: column; align-items: stretch; gap: 12px; } /* The atoms that must never be split across a page break. Put this on ATOMS, never on cards. `break-inside: avoid` on a card sends any card too tall for the remaining space to a fresh sheet — the estimator printed 4 pages with two of them roughly half empty. Cards may split; these may not. Tools add their own atoms (`.gap-row`, `.sum-line`, `.warn-line`) alongside these. */ .tool-app.tool-app .chart-row, .tool-app.tool-app .stat, .tool-app.tool-app .field, .tool-app.tool-app tr { break-inside: avoid; } /* Bars and tracks need this explicitly: "Background graphics" is a checkbox in the print dialog and it is OFF by default in Firefox's silent-print path, which is exactly how these PDFs get generated. Without it every bar prints as an empty track. The value and share sit beside each bar as text, so no figure is ever reachable only by measuring a segment — but a chart of empty tracks still reads as broken. Any NEW fill or track a tool adds needs this too; it is not inherited by a different class. */ .tool-app.tool-app .chart-track, .tool-app.tool-app .chart-fill { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }