Fix tick boxes printing as solid black rectangles

The print stylesheet lightened the body, rows, titles and pills, but never
.item-check, which carries the dark page background. Browsers that print
background graphics (Safari, and any print dialog with the option ticked,
which is common when saving as PDF) therefore filled every box solid black,
leaving nothing to cross by hand. Chrome has the option off by default,
which is why this only showed up for some people.

The boxes are now explicitly blank on paper, checked rows drop their green
fill and keep readable text, and the checkmark uses currentColor so it is
white on screen and black in print.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

packing.php

@@ -292,6 +292,7 @@ $totalItems = count($allItems);
     flex-shrink: 0;
     display: flex; align-items: center; justify-content: center;
     background: var(--bg);
+    color: #fff;
     transition: all .15s;
   }
   .item-row.checked .item-check {
@@ -335,9 +336,22 @@ $totalItems = count($allItems);
   @media print {
     header .btn-row, .share-box, .progress-bar-wrap { display: none !important; }
     body { background: #fff; color: #000; }
-    .item-row { border-color: #ccc; background: none; }
+    .item-row { border-color: #ccc; background: none; break-inside: avoid; }
     .section-title { color: #333; }
     .pill { background: #f5f5f5; color: #333; border-color: #ccc; }
+    /* The tick boxes carry the dark screen background. Browsers that print
+       background graphics (Safari, and any dialog with "Background graphics"
+       ticked – common when saving as PDF) then render them as solid black
+       rectangles, leaving nothing to cross by hand. Keep them blank on paper. */
+    .item-check,
+    .item-row.checked .item-check {
+      background: #fff;
+      border-color: #555;
+      color: #000;
+    }
+    /* Checked items also need to survive without background colours. */
+    .item-row.checked { background: none; border-color: #ccc; }
+    .item-row.checked .item-name { color: #000; }
   }
 </style>
 </head>
@@ -388,7 +402,7 @@ $totalItems = count($allItems);
       <div class="item-row" onclick="toggleItem(this)">
         <div class="item-check">
           <svg width="10" height="8" viewBox="0 0 10 8" fill="none">
-            <path d="M1 4l3 3 5-6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M1 4l3 3 5-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </div>
         <span class="item-name"><?php if ($item['quantity'] > 1): ?><?= (int)$item['quantity'] ?>&times; <?php endif; ?><?= htmlspecialchars($item['name']) ?></span>