Print stylesheet or print-friendly layout is available

Without a print stylesheet, printing an invoice, receipt, blog post, or documentation page produces output with the full site chrome: navigation, hamburger menus, footers, chat widgets, and hover-state buttons — all wasting ink and pushing the content onto extra pages. Users expecting to save a clean PDF or print a receipt get a page of noise. This is low-severity because most web apps don't ship printable surfaces, but every content-heavy site (docs, blogs, transactional receipts) benefits.

Add a @media print block to src/app/globals.css that hides UI chrome and normalizes typography for paper. In Tailwind, use the print: variant on elements that should not appear in print output.

@media print {
  nav, header, footer, .sidebar, button, .no-print { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  a[href]::after { content: ' (' attr(href) ')'; }
}

• ID: mobile-responsiveness.mobile-ux.print-stylesheet

• Severity: info

• Note: Print stylesheets are included in this audit because @media print is part of the CSS media query landscape. Projects that handle responsive breakpoints with media queries should also consider print media. This check is severity info to reflect its supplementary nature.

• What to look for: Check for @media print rules in CSS files, a linked print stylesheet (<link rel="stylesheet" media="print">), or print-specific Tailwind classes (print: variant). Check if navigation, sidebars, and interactive elements would be hidden in print mode.

• Pass criteria: Count all @media print rule blocks and <link rel="stylesheet" media="print"> references in the project. At least 1 print CSS mechanism must exist. The print styles must hide at least 2 non-content element types (navigation, buttons, sidebars, footers, or decorative elements). Count all Tailwind print: variant usages if present.

• Fail criteria: 0 print CSS mechanisms found — no @media print rules, no print stylesheet link, and no Tailwind print: variants. Printing the page would include navigation, buttons, and all interactive UI chrome.

• Skip (N/A) when: Project is clearly a web application (SaaS dashboard, admin panel, interactive tool) where printing is not a reasonable use case. Skip if there are no content-focused pages (blog, documentation, invoice, report) that users would reasonably want to print — 0 printable content pages found.

• Detail on fail: "0 print CSS mechanisms found — no @media print rules, no print stylesheet link, and no Tailwind print: variants — printing will include all UI chrome".

• Remediation:

  @media print {
    nav, header, footer, .sidebar, button, .no-print { display: none !important; }
    body { font-size: 12pt; color: #000; background: #fff; }
    a[href]::after { content: ' (' attr(href) ')'; }
  }
  

  In Tailwind:

  <nav class="print:hidden">...</nav>