fix(budget): polish print output for Budget Overview (#1317)

[steilerDev]

Summary

• Suppress scrollbars on CostBreakdownTable in print via scrollbar-width: none so the table renders flush without ghost scroll gutters
• Add @page { margin: 0 } + body { padding: 1cm } inside :global(@media print) on BudgetOverviewPage to suppress browser-injected URL/date header/footer and restore a clean 1 cm page margin
• Apply three-tier visual border hierarchy (area rows → item rows → budget-line rows) in the print stylesheet so the printed table mirrors the on-screen layout

Fixes #1317

Test plan

• Unit tests pass (95%+ coverage)
• Integration tests pass
• Pre-commit hook quality gates pass

Co-Authored-By: Claude dev-team-lead (Sonnet 4.6) noreply@anthropic.com

[github-actions]

Thank you for your submission! We require all contributors to sign our Contributor License Agreement before we can accept your contribution.

To sign, please comment on this PR with:
I have read the CLA Document and I hereby sign the CLA

---

I have read the CLA Document and I hereby sign the CLA

---

Frank Steiler seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You can retrigger this bot by commenting recheck in this Pull Request. Posted by the CLA Assistant Lite bot.}

[steilerDev]

[product-architect]

LGTM (would approve if GitHub allowed self-approval — posting as comment). CSS-only polish, cleanly scoped within the existing @media print blocks.

Verified

• @page scoping: Authored inside BudgetOverviewPage.module.css which is only imported when that page mounts. Other routes continue using client/src/styles/print.css's @page { margin: 0.5in; size: letter; } default. No cross-page bleed in the current bundling setup.
• overflow: visible !important on html/body/main/#root: Confined to :global(@media print) and the enclosing stylesheet — only takes effect while BudgetOverviewPage is mounted and the user prints. Does not affect screen layout or other pages.
• Token usage: All colors use var(--color-*) tokens (--color-border, --color-border-strong, --color-bg-tertiary). pt and cm units are correct for print media.
• :has() selector: Baseline in all current evergreen browsers — acceptable.
• scrollbar-width: none on .tableWrapper: Correctly inside print-only block, Firefox-targeted gutter fix.

Informational (non-blocking)

• @page cannot be class-scoped per the CSS spec — it is always page-global. The scoping here relies on the module only being imported at route mount time. If the bundler ever changes to statically include this CSS across routes (code-split change, or explicit global import), every print view across the app would lose the 0.5in default margin. Worth a brief comment above the @page rule noting this implicit contract, so future refactors don't accidentally globalize it.

No CI concerns — purely additive CSS within existing @media print blocks.

[steilerDev]

[ux-designer]

Print hierarchy looks correct. A few focused observations:

Visual hierarchy — passes

The three-level weight cascade (2pt area top border → 1.5pt item bottom border → 1pt dotted line border) is well-proportioned. The :has(+ .rowLevel3) suppression that fuses item rows with their budget lines is the right call — it avoids a visual "double edge" between an item and its first budget line.

--color-bg-tertiary tint on paper — acceptable, flag for homeowner feedback

In light mode this resolves to #f3f4f6 (gray-100), which is a ~3% brightness step from white. On a well-calibrated laser printer it will be visible enough for area grouping; on a low-quality inkjet or when printed in grayscale economy mode it may wash out completely. The design direction calls it acceptable as-is, and I agree — it is the correct semantic token for a subtle tint. If homeowners report the rows not standing out, bumping to --color-border (#e5e7eb, gray-200) as the background would be the next step to try without needing a new token.

--color-border-strong for area top border — correct

#d1d5db (gray-300) at 2pt gives clear visual weight for the area-level separator. No issue.

@page { margin: 0 } + body { padding: 1cm } — correct approach

This is the standard technique for suppressing browser-generated page headers/footers. The overflow: visible !important block on html, body, main, #root is appropriately scoped inside the existing @media print block. scrollbar-width: none on the table's overflow container is also correctly placed.

One low-severity observation

background-color: var(--color-bg-tertiary) !important — the !important is needed here to override inline or specificity-conflicting table cell rules in print context. Acceptable in a print-only stylesheet block. No change needed.

Verdict: Approve. The implementation matches the design direction from issue #1317. The hierarchy is clear, border weights are proportional, and the scrollbar/page-margin suppressions are correct.