/* FM-198 — what the app looks like on paper.
*
* Before this file, Ctrl-P on any page printed the APP: the fixed header, the
* navigation drawer, the notification bell, the four floating tool buttons, the
* Coach avatar and a white circle over the content. Three sheets of paper, and
* the thing the contractor actually wanted to hand a client was somewhere in
* the middle of it.
*
* The rule this file applies is one line long: THINGS THAT DO SOMETHING DO NOT
* PRINT; THINGS THAT SAY SOMETHING DO. A button, a drawer, a bell, a floating
* tool, a toast — none of them mean anything on paper. Numbers, names, tables
* and headings do.
*
* The one place that rule needs care is form fields, because in this app a form
* field is often where the DATA is — the draw labels in the payment schedule
* are s. Hiding controls wholesale would silently delete content from
* the page. So inputs are FLATTENED, not hidden: the box, border and background
* go, the value stays and prints as text.
*
* Everything here is inside @media print. Nothing in this file can affect the
* screen.
*/
@media print {
/* ── Page box ───────────────────────────────────────────────────────────
* Letter portrait with a half-inch margin. The browser's own header/footer
* (date, title, URL, page count) is a BROWSER setting, not ours — it lives
* under "More settings > Headers and footers" in the print dialog and no
* stylesheet can remove it. The printed document header below is ours.
*/
@page {
size: letter portrait;
margin: 0.5in;
}
/* ── 1. The app chrome ──────────────────────────────────────────────────
* Measured on a live page, not guessed: these are every fixed/sticky
* element that paints, plus the shell's header, footer and bottom nav.
* fm-print-coverage.spec.js reads the shell and the FAB partials and fails
* if a new one appears that is not covered here.
*/
.fm-sidebar,
#fmDrawer,
.fm-mobile-topbar,
#fmMobileTopbar,
.fm-mobile-overlay,
#fmMobileOverlay,
.fm-bottom-nav,
.fm-header,
.fm-app-footer,
.fm-render-stamp,
.fm-debug-card,
.fm-impersonation-banner,
.fm-billing-alert,
/* floating tools + the Coach avatar */
#coach-fab-root,
#fmcalc-root,
#fmfit-root,
#fmspace-root,
#fmbf-root,
#fm-tools-fab,
/* transient UI that can be on screen when Print is pressed */
.fm-toast-stack,
.fm-toast,
.fm-cd-backdrop,
.fm-command-palette,
#fmCommandPalette,
/* anything a page has already marked, including money.ejs's own convention */
.fm-noprint,
.ms-noprint,
[data-noprint] {
display: none !important;
}
/* The mobile shell fights back, and it fights with a bigger stick.
* fm-theme.css carries
*
* @media (max-width: 900px) {
* body.fm-is-mobile #fmDrawer.fm-drawer { display: flex !important; }
* }
*
* — one id and two classes, with !important. The plain `#fmDrawer` above is
* one id and no classes, so it LOSES: !important with higher specificity
* beats !important alone, and the hide-list is not enough on its own.
*
* This matters more than it looks. A print sheet is about 7.5in wide, which
* is ~720 CSS px, so that 900px media query is ACTIVE on paper; and
* `fm-is-mobile` is a class JavaScript put on from the window size,
* which does not change just because the page is being printed. So printing
* from a narrow window kept the whole navigation drawer on the page while
* printing the same page from a wide one did not — measured, not reasoned.
*
* The fix matches that selector's specificity exactly rather than escalating
* past it. fm-print.css loads last, and an equal-specificity tie goes to the
* later rule.
*/
body.fm-is-mobile #fmDrawer.fm-drawer,
body.fm-is-mobile .fm-drawer,
body.fm-is-mobile .fm-sidebar,
body.fm-is-mobile .fm-mobile-topbar,
body.fm-is-mobile .fm-mobile-overlay,
body.fm-is-mobile .fm-bottom-nav,
body.fm-is-mobile .fm-header {
display: none !important;
}
/* ── 2. Controls ────────────────────────────────────────────────────────
* Buttons and links-as-buttons say "click me" to someone holding paper.
* A plain is left alone — it is usually a name, not an action.
*/
button,
[role="button"],
.fm-btn,
.fm-icon-btn,
.money-section__action,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"] {
display: none !important;
}
/* Anchors styled as actions. A