/* ═══════════════════════════════════════════════════════════════════════════ PRINT RULES — loaded twice on purpose ─────────────────────────────────────────────────────────────────────────── Every rule that only matters on paper lives here, and the file carries no @media print wrapper of its own. index.html links it with media="print" so it applies to real printing; the Print Setup preview links the same file with no media attribute inside its measuring iframe, so the sheet on screen is laid out by these exact rules. Why not read the rules out of document.styleSheets instead? Because cssRules throws a SecurityError whenever the stylesheet is not readable — opening the app from a file:// path, or serving the CSS from a different origin than the page. The preview then silently fell back to the on-screen styles and ignored every print setting, which is precisely the bug this split fixes. A needs no read access, so it works everywhere. ═══════════════════════════════════════════════════════════════════════════ */ @page { size: A3 landscape; margin: 14mm 16mm; } /* ── Force light variables ── Skipped when the user picks Colors → Match screen in the Options menu (adds .print-colors-screen to ), so a dark board can print dark. */ :root:not(.print-colors-screen), [data-theme="dark"]:not(.print-colors-screen) { --bg: #fff !important; --surface: #fff !important; --surface-2: #f5f6f8 !important; --border: #d1d5db !important; --border-2: #9ca3af !important; --text-1: #0d1117 !important; --text-2: #374151 !important; --text-3: #6b7280 !important; --hdr-bg: #fff !important; --spine: #9ca3af !important; --c-default-bg: #fff !important; --c-default-bd: #d1d5db !important; --c-purple-bg: #f5f3ff !important; --c-purple-bd: #c4b5fd !important; --c-purple-tx: #5b21b6 !important; --c-pickup-bg: #fff7ed !important; --c-pickup-bd: #fed7aa !important; --c-pickup-tx: #9a3412 !important; --c-skill-bg: #f0fdf4 !important; --c-skill-bd: #bbf7d0 !important; --c-skill-tx: #166534 !important; --sn-blue-bg: #eff6ff !important; --sn-blue-bd: #93c5fd !important; --sn-blue-tx: #1e40af !important; --sn-yel-bg: #fefce8 !important; --sn-yel-bd: #fde68a !important; --sn-yel-tx: #78350f !important; --tag-mwf-bg: #eff6ff !important; --tag-mwf-tx: #1d4ed8 !important; --tag-tth-bg: #f0fdf4 !important; --tag-tth-tx: #166534 !important; --tag-sk-bg: #fff7ed !important; --tag-sk-tx: #9a3412 !important; --accent: #2563eb !important; --accent-lo: #eff6ff !important; --shadow-sm: none !important; } *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } html, body { background: #fff !important; font-size: 9pt !important; } /* Hide chrome */ .header-actions, .header-meta, .brand-logo, /* Phone-only chrome. mobile.css already hides these on wide screens, but the preview deliberately skips that file, so they are hidden here too. */ .m-menu-btn, .m-jump, .edit-banner, .rte-toolbar, .cl-panel, .cl-overlay, .del-btn, .ghost-btn, .ghost-inline-btn, .add-title-btn, .banner-add-title-btn, .add-tag-btn, .tag-color-row, .tag-add-ref-btn, .card-color-row, .ref-size-ctrl, .ref-drag-cell, .drag-handle, .insert-above, .insert-below, .add-slot-row, .add-ref-row, .export-dropdown, .ref-resize-handle { display: none !important; } /* Header */ .site-header { position: static !important; height: auto !important; border-bottom: 2.5pt solid #0d1117 !important; padding-bottom: 6pt !important; background: #fff !important; } .header-inner { padding: 0 !important; } .site-title { font-size: 22pt !important; font-weight: 900 !important; color: #0d1117 !important; } .site-subtitle { font-size: 9pt !important; color: #6b7280 !important; } /* Layout */ .main-layout { display: flex !important; flex-direction: row !important; gap: 0 !important; min-height: 0 !important; padding-top: 8pt !important; } .timeline-section { flex: 1 !important; min-width: 0 !important; padding: 0 14pt 0 0 !important; border-right: 1pt solid #d1d5db !important; } .ref-section { /* width set dynamically by JS to match on-screen resize */ padding: 0 0 0 12pt !important; position: static !important; max-height: none !important; overflow: visible !important; min-width: 0 !important; } /* Avoid page breaks inside cards/rows */ .card, .timeline-row, .sticky-note { page-break-inside: avoid !important; break-inside: avoid !important; } /* ── Anti-clipping ────────────────────────────────────────────────────── On screen, cards can carry inline height/width from the resize handles and the sidebar is a scroll container. Both clip their contents when the page is flattened for print, so release every fixed dimension. */ .card, .card-list, .free-card, .sticky-note, .timeline-row, .ref-section, .main-layout, #printArea { height: auto !important; max-height: none !important; overflow: visible !important; } /* Multi-column card lists must not clip a facility mid-name */ .card-list { column-fill: auto !important; } .card-list > * { break-inside: avoid !important; page-break-inside: avoid !important; } /* Quick Reference: repeat the header on every page, never split a row */ .ref-table { break-inside: auto !important; page-break-inside: auto !important; } .ref-table thead { display: table-header-group !important; } .ref-table tbody tr { break-inside: avoid !important; page-break-inside: avoid !important; } /* Keep the last row off the very edge of the sheet */ .ref-section { padding-bottom: 6pt !important; } /* Time chip print style */ .time-chip { background: transparent !important; border: none !important; font-weight: 700 !important; color: #374151 !important; } .ref-table { font-size: 8.5pt !important; } html.print-colors-screen, html.print-colors-screen body { background: var(--bg) !important; } html.print-colors-screen .site-header { background: var(--hdr-bg) !important; border-bottom-color: var(--text-1) !important; } html.print-colors-screen .site-title { color: var(--text-1) !important; } html.print-colors-screen .site-subtitle { color: var(--text-2) !important; } html.print-colors-screen .timeline-section { border-right-color: var(--border) !important; } html.print-colors-screen .time-chip { color: var(--text-1) !important; } [data-status="inactive"] { display: none !important; } .fac-item:has(> span[data-status="inactive"]) { display: none !important; } .fac-type-badge { border-color: #ccc; } .live-launcher { display: none !important; } .header-actions { overflow: visible; } .pickup-group { break-inside: avoid; page-break-inside: avoid; } /* No hanging indent on paper — see (1) above */ .fac-item { margin-left: 0 !important; padding-left: 0 !important; } /* Text, not the drag handles, decides the box size when printing */ .card { height: auto !important; min-height: 0 !important; } html:not(.print-cards-fixed) .card { width: auto !important; max-width: 100% !important; } .card-list, .fac-item, .fac-item > span { min-width: 0 !important; } /* ── Font choice ── */ html.print-font-humanist body, html.print-font-humanist body * { font-family: Verdana, 'DejaVu Sans', Tahoma, sans-serif !important; } html.print-font-serif body, html.print-font-serif body * { font-family: Georgia, 'Times New Roman', serif !important; } html.print-font-cond body, html.print-font-cond body * { font-family: 'Arial Narrow', 'Roboto Condensed', 'Liberation Sans Narrow', sans-serif !important; } html.print-font-mono body, html.print-font-mono body * { font-family: 'Courier New', 'DejaVu Sans Mono', monospace !important; } /* ── Knobs the dialog turns. Defaults match the tuned layout. Declared on html (not html.print-fit) so every calc() still resolves when only some of the option classes are present. ── */ html { --pf-s: 1; /* text scale */ --pf-d: 1; /* density scale */ --pf-refw: 28%; /* reference column share of the sheet */ --pf-refcols: 2; } html.print-text-xs { --pf-s: .82; } html.print-text-s { --pf-s: .91; } html.print-text-m { --pf-s: 1; } html.print-text-l { --pf-s: 1.12; } html.print-text-xl { --pf-s: 1.28; } html.print-dens-tight { --pf-d: .55; } html.print-dens-roomy { --pf-d: 1.6; } html.print-ref-narrow { --pf-refw: 23%; } html.print-ref-wide { --pf-refw: 36%; } html.print-refcols-1 { --pf-refcols: 1; } html.print-refcols-2 { --pf-refcols: 2; } html.print-refcols-3 { --pf-refcols: 3; } html.print-refcols-4 { --pf-refcols: 4; } /* The facility name — the largest block of text on the sheet — is sized on the inner span (13px from the screen rules), not on .fac-item. Without a rule that reaches the span directly, changing "Text size" moved the chips and headings but left every facility name untouched, which reads as the setting doing nothing at all. 9.75pt is the screen size (13px), so a text size of M reproduces the tuned layout exactly and the other sizes scale from there. */ .fac-item > span:first-child { font-size: calc(9.75pt * var(--pf-s)) !important; } html.print-fit .fac-item > span:first-child { font-size: calc(9.75pt * var(--pf-s)) !important; } html.print-fit-2 .fac-item > span:first-child { font-size: calc(8.8pt * var(--pf-s)) !important; } /* ── Stacked layout: reference underneath instead of beside ── */ html.print-layout-stacked .main-layout { display: block !important; } html.print-layout-stacked .timeline-section { padding: 0 !important; border-right: none !important; } html.print-layout-stacked .ref-section { width: 100% !important; flex: none !important; padding: 6pt 0 0 !important; border-top: .6pt solid #9ca3af !important; border-left: none !important; } html.print-fit body { font-size: calc(8pt * var(--pf-s)) !important; } /* ── Header: one compact band ── */ html.print-fit .site-header { padding-bottom: 3pt !important; border-bottom-width: 1.2pt !important; } html.print-fit .site-title { font-size: calc(13pt * var(--pf-s)) !important; } html.print-fit .site-subtitle { font-size: calc(6.5pt * var(--pf-s)) !important; } html.print-fit .active-sched-badge { font-size: 5.5pt !important; padding: 0 2pt !important; } /* ── Layout: timeline left, reference right ── */ html.print-fit .main-layout { padding-top: 5pt !important; } html.print-fit .timeline-section { padding: 0 7pt 0 0 !important; border-right-width: .5pt !important; } html.print-fit .ref-section { /* Overrides the pixel width JS copies from the on-screen sidebar */ width: auto !important; flex: 0 0 var(--pf-refw) !important; padding: 0 0 0 7pt !important; } /* ── Time slots ── */ html.print-fit .timeline-row { /* 52pt fits "11:30 AM" at 8pt without clipping the leading digit */ grid-template-columns: calc(52pt * var(--pf-s)) 1fr !important; /* spine column removed */ padding: calc(2.5pt * var(--pf-d)) 0 !important; border-bottom: .4pt solid #d1d5db !important; gap: 0 4pt !important; } html.print-fit .timeline-spine, html.print-fit .cutoff-countdown, html.print-fit .card-resize-handle { display: none !important; } html.print-fit .timeline-row::before { display: none !important; } /* spine line */ html.print-fit .time-chip { font-size: calc(8pt * var(--pf-s)) !important; padding: 0 !important; letter-spacing: 0 !important; } html.print-fit .time-col { padding-top: 1pt !important; overflow: visible !important; } /* The PICKUP badge is wider than the time column at print sizes; without a cap it renders past the left edge of the sheet. */ html.print-fit .pickup-badge { font-size: 5pt !important; padding: 0 1.5pt !important; max-width: 100% !important; box-sizing: border-box !important; letter-spacing: 0 !important; } html.print-fit .pickup-group-label { font-size: 5.5pt !important; padding: 0 2pt !important; } /* ── Cards become compact chips ── */ html.print-fit .cards-col { gap: calc(3pt * var(--pf-d)) !important; padding-left: 0 !important; } html.print-fit .card { width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; padding: calc(2pt * var(--pf-d)) calc(4pt * var(--pf-s)) !important; border-radius: 3pt !important; border-width: .5pt !important; box-shadow: none !important; font-size: calc(7.5pt * var(--pf-s)) !important; line-height: 1.25 !important; } /* Facility names flow inline instead of stacking in columns */ html.print-fit .card-list { column-count: 1 !important; display: flex !important; flex-wrap: wrap !important; gap: 0 calc(7pt * var(--pf-s)) !important; margin: 0 !important; } html.print-fit .fac-item { padding: 0 !important; border: none !important; font-size: calc(7.5pt * var(--pf-s)) !important; line-height: 1.3 !important; break-inside: avoid !important; } html.print-fit .card-title { font-size: calc(2pt * var(--pf-s)) !important; margin-bottom: .5pt !important; } html.print-fit .card-tag { font-size: 6pt !important; padding: 1pt 3pt !important; line-height: 1.1 !important; min-height: 0 !important; } html.print-fit .card-tags { gap: 2pt !important; margin-bottom: .8pt !important; } html.print-fit .tag { font-size: calc(4pt * var(--pf-s)) !important; padding: 0 2pt !important; line-height: 1.3 !important; border-radius: 2pt !important; } html.print-fit .fac-item > span:not(:first-child) { font-size: calc(5pt * var(--pf-s)) !important; } /* ── Quick Reference: two narrow columns of wrapped one-line entries ── A table cannot flow into CSS columns, so the rows are turned into blocks and the two cells run inline: "FACILITY SNF M-F 1:00 PM · Sa&Su 7:00 PM". Times must be allowed to wrap here — forcing them onto one line in a column this narrow pushes them straight over the next column. */ html.print-fit .ref-title-row { margin-bottom: 4pt !important; padding-bottom: 2pt !important; border-bottom-width: 1pt !important; } html.print-fit .ref-title { font-size: calc(8pt * var(--pf-s)) !important; } html.print-fit .ref-drag-cell, html.print-fit .ref-table thead { display: none !important; } html.print-fit .ref-table, html.print-fit .ref-table tbody { display: block !important; } html.print-fit .ref-table tbody { column-count: var(--pf-refcols) !important; column-gap: 10pt !important; column-fill: balance !important; } html.print-fit .ref-table tr { display: block !important; padding: calc(.7pt * var(--pf-d)) 0 !important; border-bottom: .3pt solid #e5e7eb !important; break-inside: avoid !important; page-break-inside: avoid !important; line-height: 1.25 !important; } html.print-fit .ref-table td { display: inline !important; border: none !important; padding: 0 !important; text-align: left !important; } html.print-fit .ref-name { font-size: calc(6.6pt * var(--pf-s)) !important; } html.print-fit .ref-type { font-size: calc(5pt * var(--pf-s)) !important; margin-left: 1.5pt !important; } html.print-fit .ref-times { font-size: calc(6.2pt * var(--pf-s)) !important; white-space: normal !important; margin-left: 3pt !important; } /* Placed last: the generic "td { display: inline }" rule above outranks the shared print rule that hides drag handles, so re-hide it here. */ html.print-fit td.ref-drag-cell { display: none !important; } /* ── Tier 2: same layout, tighter ── */ html.print-fit-2 .site-title { font-size: calc(11pt * var(--pf-s)) !important; } html.print-fit-2 .timeline-row { padding: calc(1.5pt * var(--pf-d)) 0 !important; } html.print-fit-2 .card { padding: calc(1.5pt * var(--pf-d)) 3pt !important; font-size: calc(6.8pt * var(--pf-s)) !important; } html.print-fit-2 .fac-item { font-size: calc(6.8pt * var(--pf-s)) !important; } html.print-fit-2 .card-list { gap: 0 calc(5pt * var(--pf-s)) !important; } html.print-fit-2 .time-chip { font-size: calc(7pt * var(--pf-s)) !important; } html.print-fit-2 .timeline-row { grid-template-columns: calc(48pt * var(--pf-s)) 1fr !important; } html.print-fit-2 .ref-name { font-size: calc(5.9pt * var(--pf-s)) !important; } html.print-fit-2 .ref-times { font-size: calc(5.6pt * var(--pf-s)) !important; } html.print-fit-2 .ref-table tr { padding: calc(.3pt * var(--pf-d)) 0 !important; } .ps-overlay { display: none !important; }