Shipment reading view: optional notes and unchanged row totals

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Compact shipment reading view</title><style>*{box-sizing:border-box}html,body{width:100%;min-width:0}body{font:16px/1.5 system-ui;margin:0;padding:20px;max-width:960px;color:#26333f}h1{font-size:26px;line-height:1.2}button,select,input{font:inherit;padding:7px}button{margin:5px}pre{white-space:pre-wrap;overflow-wrap:anywhere}table{width:100%;border-collapse:collapse}th,td{padding:8px;border-bottom:1px solid #ccd4dc;text-align:left}[hidden]{display:none!important}</style><h1>Compact shipment reading view</h1><p>Fictional example. Local reading controls only; no saved changes or submission.</p><label><input type="checkbox" id="notes" checked> Show internal notes</label><p id="status">3 shipments · 15 units</p><table><caption>Fictional shipment review; notes are not confidential</caption><thead><tr><th scope="col">Shipment</th><th scope="col">Units</th><th scope="col">Status</th><th scope="col" data-column="note">Internal note</th></tr></thead><tbody><tr><th scope="row">S-01</th><td>6</td><td>Ready</td><td data-column="note">Use side entrance</td></tr><tr><th scope="row">S-02</th><td>4</td><td>Held</td><td data-column="note">Confirm carton</td></tr><tr><th scope="row">S-03</th><td>5</td><td>Ready</td><td data-column="note">Collect after noon</td></tr></tbody></table><p>Hiding notes does not remove their text from this file.</p><script>const checkbox=document.querySelector('#notes');function update(){for(const cell of document.querySelectorAll('[data-column="note"]'))cell.hidden=!checkbox.checked;}checkbox.addEventListener('change',update);update();</script></html>