/* Print sheet — the doctor report is the only thing anyone prints, so the page is stripped back to that one card in black on white. Loaded with media="print". */ @page { size: A4 portrait; margin: 14mm; } html, body { background: #fff !important; background-image: none !important; color: #000 !important; font-size: 10.5pt; } .topbar, .tabs, .disclaimer .colophon, .toast-root, .modal-root, .hero, .no-print, [data-action="print"], .skip-link, .decor, .install-banner, .splash { display: none !important; } main { padding: 0 !important; } .shell { width: 100% !important; margin: 0 !important; } .stack { gap: 0 !important; } .card, .card-lg, .stat, .table-wrap, .notice { background: #fff !important; border-color: #999 !important; box-shadow: none !important; border-radius: 4px !important; padding: 0 !important; page-break-inside: avoid; } .report-sheet { border: 0 !important; padding: 0 !important; } .report-sheet header { border-bottom: 2px solid #000 !important; } .stat { padding: 6pt 8pt !important; border: 1px solid #bbb !important; } .stat-label, .stat-note { color: #444 !important; } .stat-value { font-size: 13pt !important; color: #000 !important; } .v-brand, .v-accent, .v-mint, .v-amber, .v-danger { color: #000 !important; } h2, h3 { color: #000 !important; page-break-after: avoid; } .muted, .tiny { color: #333 !important; } table { font-size: 9pt !important; } thead th { background: #eee !important; color: #000 !important; } tbody td { border-top: 1px solid #ccc !important; } tbody tr:hover { background: transparent !important; } .tag { border: 1px solid #999 !important; background: #fff !important; color: #000 !important; } .grid { display: grid !important; gap: 6pt !important; } .grid-4 { grid-template-columns: repeat(4, 1fr) !important; } .grid-3 { grid-template-columns: repeat(3, 1fr) !important; } .grid-2 { grid-template-columns: repeat(2, 1fr) !important; } .disclaimer { margin-top: 10pt; page-break-inside: avoid; } .disclaimer-card { border: 1px solid #999 !important; padding: 6pt !important; font-size: 8pt !important; } /* ── Printing a modal (the grocery list) ───────────────────────────────── The rule above hides .modal-root outright, so hitting Print inside the grocery list printed the page *behind* it — the recipe grid — instead of the list. app.js sets .printing-modal on for the duration of the print, and these rules invert that: the panel becomes the whole document. The selectors are two levels deep so they outrank the blanket rule above. */ .printing-modal .topbar, .printing-modal .tabs, .printing-modal main, .printing-modal footer.disclaimer, .printing-modal .decor, .printing-modal .splash, .printing-modal .modal-scrim, .printing-modal .modal-x, .printing-modal .modal-body .hero-actions { display: none !important; } .printing-modal .modal-root { display: block !important; position: static !important; padding: 0 !important; background: none !important; } .printing-modal .modal-panel { position: static !important; width: 100% !important; max-width: none !important; max-height: none !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; } .printing-modal .modal-body { overflow: visible !important; max-height: none !important; padding: 0 !important; } .printing-modal .modal-head { border-bottom: 2pt solid #000 !important; padding: 0 0 6pt !important; margin-bottom: 10pt !important; } .printing-modal .modal-head h2 { font-size: 16pt !important; color: #000 !important; } /* The list itself: roomy checkboxes, aisle headings that stay with their items. */ .printing-modal .modal-body h3 { font-size: 11pt !important; margin: 12pt 0 4pt !important; border-bottom: 1px solid #999 !important; padding-bottom: 2pt !important; page-break-after: avoid; } .printing-modal .modal-body ul { list-style: none !important; margin: 0 !important; } .printing-modal .modal-body li { border-bottom: 1px dotted #bbb !important; padding: 4pt 0 !important; font-size: 10pt !important; page-break-inside: avoid; } .printing-modal .modal-body input[type="checkbox"] { width: 11pt !important; height: 11pt !important; border: 1pt solid #000 !important; -webkit-appearance: none; appearance: none; border-radius: 2pt !important; margin-right: 6pt !important; } .printing-modal .tag { border: 1px solid #666 !important; }