Add print-friendly scenario cards with transposed table data

Author: GearUnclear

checklist.html

@@ -461,6 +461,13 @@
             }
         }
 
+        /* =======================
+           PRINT CARDS (Hidden on screen)
+           ======================= */
+        .print-cards {
+            display: none;
+        }
+
         /* =======================
            PRINT STYLES
            ======================= */
@@ -473,27 +480,88 @@
 
             #navbar-placeholder,
             .nav-home,
-            .legend {
+            .legend,
+            .table-container {
                 display: none !important;
             }
 
-            .header-card,
-            .table-container {
+            .header-card {
                 box-shadow: none !important;
-                border: 1px solid #ccc !important;
+                border: 1px solid #bfbfbf !important;
                 page-break-inside: avoid;
+                margin-bottom: 1.5rem;
             }
 
-            .requirements-table thead {
-                background: #333 !important;
+            /* Show print cards */
+            .print-cards {
+                display: block !important;
+                max-width: 800px;
+                margin: 0 auto;
             }
 
-            .requirements-table tbody th {
-                background: #f0f0f0 !important;
+            .scenario-card {
+                border: 2px solid #000;
+                border-radius: 8px;
+                margin-bottom: 1.5rem;
+                page-break-inside: avoid;
+                overflow: hidden;
+            }
+
+            .scenario-card-header {
+                background: #111;
+                color: #fff;
+                padding: 0.75rem 1rem;
+                font-weight: 700;
+                font-size: 1.1rem;
+                border-bottom: 2px solid #000;
+            }
+
+            .scenario-card-body {
+                padding: 0.5rem 1rem 0.75rem 1rem;
+                background: white;
+            }
+
+            .document-item {
+                display: flex;
+                justify-content: space-between;
+                padding: 0.4rem 0;
+                border-bottom: 1px dotted #ccc;
+                font-size: 0.95rem;
+            }
+
+            .document-item:last-child {
+                border-bottom: none;
+            }
+
+            .document-name {
+                font-weight: 500;
+                color: #000;
+                flex: 1;
+                padding-right: 1rem;
+            }
+
+            .document-status {
+                font-weight: 600;
+                white-space: nowrap;
+                color: #000;
+            }
+
+            .document-status.required {
+                color: #000;
             }
 
-            .check-icon {
-                color: #000 !important;
+            .document-status.conditional {
+                color: #555;
+                font-style: italic;
+            }
+
+            .document-status.review {
+                color: #555;
+                font-style: italic;
+            }
+
+            .document-status.not-required {
+                color: #999;
             }
         }
     </style>
@@ -666,6 +734,9 @@ <h3><i class="fas fa-info-circle"></i> How to Use This Checklist</h3>
             </table>
         </div>
 
+        <!-- Print-only scenario cards (generated by JavaScript) -->
+        <div class="print-cards" id="print-cards"></div>
+
         <!-- Navigation -->
         <div class="nav-home">
             <a href="/">← Return to Home</a>
@@ -683,5 +754,79 @@ <h3><i class="fas fa-info-circle"></i> How to Use This Checklist</h3>
                 document.getElementById('navbar-placeholder').innerHTML = data;
             });
     </script>
+
+    <!-- Generate print-friendly scenario cards -->
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const table = document.querySelector('.requirements-table');
+            const printCardsContainer = document.getElementById('print-cards');
+
+            if (!table || !printCardsContainer) return;
+
+            // Extract scenario headers (column headers, excluding first "Required Document/Action")
+            const headerCells = Array.from(table.querySelectorAll('thead th'));
+            const scenarios = headerCells.slice(1).map(th => {
+                // Extract text from potentially linked headers
+                return th.textContent.replace(/\s+/g, ' ').trim();
+            });
+
+            // Extract document names and their status for each scenario
+            const documentRows = Array.from(table.querySelectorAll('tbody tr'));
+            const documents = documentRows.map(row => {
+                const docNameCell = row.querySelector('th');
+                const docName = docNameCell.textContent.trim();
+
+                // Get status for each scenario
+                const statusCells = Array.from(row.querySelectorAll('td'));
+                const statuses = statusCells.map(cell => {
+                    if (cell.querySelector('.check-icon')) {
+                        return { text: 'Required', class: 'required' };
+                    } else if (cell.querySelector('.conditional-icon')) {
+                        return { text: 'Conditional', class: 'conditional' };
+                    } else if (cell.querySelector('.review-icon')) {
+                        return { text: 'Review if Out of Date', class: 'review' };
+                    } else {
+                        return { text: '-', class: 'not-required' };
+                    }
+                });
+
+                return { name: docName, statuses: statuses };
+            });
+
+            // Generate scenario cards
+            scenarios.forEach((scenario, scenarioIdx) => {
+                const card = document.createElement('div');
+                card.className = 'scenario-card';
+
+                const header = document.createElement('div');
+                header.className = 'scenario-card-header';
+                header.textContent = scenario;
+
+                const body = document.createElement('div');
+                body.className = 'scenario-card-body';
+
+                documents.forEach(doc => {
+                    const item = document.createElement('div');
+                    item.className = 'document-item';
+
+                    const name = document.createElement('div');
+                    name.className = 'document-name';
+                    name.textContent = doc.name;
+
+                    const status = document.createElement('div');
+                    status.className = `document-status ${doc.statuses[scenarioIdx].class}`;
+                    status.textContent = doc.statuses[scenarioIdx].text;
+
+                    item.appendChild(name);
+                    item.appendChild(status);
+                    body.appendChild(item);
+                });
+
+                card.appendChild(header);
+                card.appendChild(body);
+                printCardsContainer.appendChild(card);
+            });
+        });
+    </script>
 </body>
 </html>