Find the rows that need checking.

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

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data:; connect-src 'none'; form-action 'none'; base-uri 'none'"><title>Find the rows that need checking.</title><style>:root{--accent:#31546a;--wash:#e7eef1;--paper:#f7f9fa}
*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:var(--paper,#f6f4ee);color:#222b32;font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:1040px;margin:0 auto;padding:32px}header{padding-bottom:20px;border-bottom:2px solid var(--accent);margin-bottom:24px}.eyebrow{font-size:12px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}h1{font:600 clamp(28px,4.5vw,40px)/1.13 Georgia,serif;letter-spacing:-.025em;margin:0 0 12px;max-width:760px}h2{font-size:21px;line-height:1.3;margin:0 0 12px}h3{font-size:17px;line-height:1.4;margin:0 0 8px}p{margin:0 0 12px}p:last-child{margin-bottom:0}.lede{max-width:740px;color:#47545c}.small{font-size:13px;line-height:1.5;color:#53616b}.tag{display:inline-block;font:700 12px/1.4 system-ui,sans-serif;letter-spacing:.02em;padding:4px 8px;background:var(--wash);color:var(--accent)}.split{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:28px}.split>*{min-width:0}.panel{padding:22px;background:#fff;border:1px solid #cbd1d1}.callout{padding:16px 20px;border-left:4px solid var(--accent);background:var(--wash);margin-bottom:20px}.warning{background:#fff2df;border-left-color:#8a4c17}.section{margin-top:26px}.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}button,input,select,textarea{font:inherit}button,select,summary{min-height:44px}button{background:#fff;color:#24313c;border:1px solid #9aa6aa;border-radius:5px;padding:9px 13px;cursor:pointer;text-align:left;line-height:1.4}button:hover{background:var(--wash)}button[aria-pressed=true],button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}:is(button,input,select,textarea,summary,a):focus-visible{outline:3px solid #bb5b1d;outline-offset:3px}select{width:100%;padding:9px;border:1px solid #859397;background:white;color:#222b32;border-radius:4px}textarea{width:100%;padding:12px;min-height:100px;border:1px solid #859397;border-radius:4px}label{cursor:pointer}input[type=radio]{width:20px;height:20px;accent-color:var(--accent);vertical-align:middle}fieldset{min-width:0;border:1px solid #c4cece;margin:0 0 16px;padding:18px}legend{font-weight:700;padding:0 7px}.choice{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;min-height:44px;border:1px solid #cbd1d1;background:white;margin-right:8px;margin-bottom:8px;border-radius:4px}.choice:has(input:checked){border-color:var(--accent);background:var(--wash)}.feedback{padding:10px 12px;background:#edf1f3;font-size:14px;margin-top:12px;min-height:44px}.feedback[data-state=correct]{background:#e4f1e9;color:#194c35}.feedback[data-state=incorrect]{background:#fff0e3;color:#79451f}details{border-top:1px solid #cbd1d1;margin-top:14px}summary{padding:10px 0;font-weight:650;cursor:pointer}details>div,details>p{padding-bottom:12px}.list{list-style:none;padding:0;margin:0}.list>li{padding:13px 0;border-bottom:1px solid #d2d9da}.list b{display:block}dl{margin:0}dt{font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.07em;color:#53616b;margin-top:14px}dt:first-child{margin-top:0}dd{margin:3px 0 0}table{width:100%;border-collapse:collapse;font-size:14px}caption{text-align:left;font-weight:700;margin-bottom:10px}th,td{padding:12px 9px;border-bottom:1px solid #cbd1d1;text-align:left;vertical-align:top}th{font-size:12px;color:#52616c;letter-spacing:.04em;background:var(--wash)}td .mobile-label{display:none}.rule{padding:16px 0;border-top:1px solid #cbd1d1;margin-top:24px}footer{margin-top:30px;padding-top:16px;border-top:1px solid #bac7cb;font-size:13px;color:#53616b}[hidden]{display:none!important}svg{display:block;max-width:100%;height:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.number{font-variant-numeric:tabular-nums}.empty{color:#754d23;font-weight:650}.row-button{width:100%;border:0;border-bottom:1px solid #cbd1d1;border-radius:0;padding:14px;background:transparent}.row-button[aria-pressed=true]{background:var(--wash);color:var(--accent);border-left:4px solid var(--accent)}.row-button small{display:block;font-size:12px;margin-bottom:4px}.rows{border-top:1px solid #cbd1d1}.timeline{list-style:none;padding:0;margin:0}.timeline li{padding:12px 0 12px 18px;border-left:2px solid #b8c5ca;position:relative}.timeline li:before{content:'';position:absolute;width:8px;height:8px;left:-5px;top:23px;background:var(--accent);border-radius:50%}.timeline time{font-size:12px;font-weight:750;color:var(--accent);display:block}main>*{overflow-wrap:break-word}
@media(max-width:760px){main{padding:24px}.split{grid-template-columns:1fr;gap:20px}h1{font-size:31px}}@media(max-width:480px){main{padding:18px 16px}h1{font-size:28px}.panel{padding:16px}header{margin-bottom:18px}table.responsive,table.responsive tbody,table.responsive tr,table.responsive td{display:block;width:100%}table.responsive thead{display:none}table.responsive tr{border-bottom:1px solid #aebec2;padding:10px 0}table.responsive td{border:0;padding:4px 0}td .mobile-label{display:inline;font-weight:650}fieldset{padding:14px}.toolbar button{flex:1 1 auto}}@media print{body{background:white}main{max-width:none;padding:0}button{color:black!important;background:white!important}.panel{break-inside:avoid}footer{margin-top:18px}}
.stock-summary{display:flex;gap:28px;padding-bottom:20px;border-bottom:1px solid #cbd1d1}.stock-summary b{font-size:32px;display:block;line-height:1.1;color:var(--accent)}.stock-summary span{font-size:13px}.stock-row{padding:18px 0;border-bottom:1px solid #b9c7ca}.stock-name>*{display:block}.stock-values{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.stock-values dt{font-size:10px;letter-spacing:.02em}.stock-values dd{font-size:18px;font-weight:650}.stock-row button{font-size:13px}.stock-bar{height:14px;background:#dfe7ea;position:relative;margin:10px 0 14px}.stock-bar i{display:block;background:#3e697c;height:100%}.stock-bar em{position:absolute;top:-3px;height:20px;border-left:2px solid #794e1c}.stock-layout{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}@media(max-width:620px){.stock-layout{grid-template-columns:1fr}}@media(max-width:480px){.stock-summary{gap:18px}.stock-summary span{font-size:12px}}</style></head><body><main><header><p class="eyebrow">Supply room A · Snapshot October 13, 2026</p><h1>Find the rows that need checking.</h1><p class="lede">Fictional item counts. Available = on hand − reserved. Queue rule: available strictly below the supplied threshold.</p></header>
<div class="stock-summary"><div><b>2</b><span>below threshold</span></div><div><b>1</b><span>count needed</span></div><div><b>5</b><span>source rows</span></div></div>
<div class="toolbar" role="group" aria-label="filter"><button type="button" data-filter="0" aria-pressed="true">All items</button><button type="button" data-filter="1" aria-pressed="false">Below threshold</button><button type="button" data-filter="2" aria-pressed="false">Missing count</button></div><p id="queue-count" class="small" aria-live="polite"></p><p class="small">Bar fill: available. Vertical marker: threshold. Each row uses its own item-unit scale.</p><div class="split stock-layout"><section id="stock-rows" aria-label="Filtered inventory"></section><aside><h2>Item comparison</h2><div id="stock-detail" class="panel" aria-live="polite"></div><p class="small section">Count date: October 13, 2026 for supplied counts. S05 has no supplied count date. Mixed units are never added into a stock total.</p></aside></div><footer>Original illustrative example · Local controls only. Changes are temporary and clear when this page is reloaded. Keep actual records in your approved source tools.</footer></main><script>const $=s=>document.querySelector(s);const $$=s=>Array.from(document.querySelectorAll(s));function pressed(attr,i){$$('[data-'+attr+']').forEach(b=>b.setAttribute('aria-pressed',String(Number(b.dataset[attr])===i)));}

const stock=[["G01","Glue sticks","individual sticks",18,12,10,1],["P02","Paper","unopened reams",9,2,5,2],["M03","Markers","complete sets",5,2,4,3],["T04","Tape","rolls",4,0,4,4],["S05","Scissors","pairs",null,1,6,5]];let selected='G01';const available=r=>r[3]===null?null:r[3]-r[4];const state=r=>available(r)===null?'Count needed':available(r)<r[5]?'Below threshold':available(r)===r[5]?'At threshold':'Above threshold';
function detail(id){selected=id;const r=stock.find(r=>r[0]===id),a=available(r);$$('[data-item]').forEach(b=>b.setAttribute('aria-pressed',String(b.dataset.item===id)));$('#stock-detail').innerHTML='<span class="tag">'+r[0]+' · Source row '+r[6]+'</span><h3 style="margin-top:12px">'+r[1]+'</h3><p>'+ (a===null?'On-hand count unknown; available cannot be calculated. Reservation: '+r[4]+' '+r[2]+'. Threshold: '+r[5]+'. Request a count; do not infer a shortage.':r[3]+' on hand − '+r[4]+' reserved = <b>'+a+' available</b> '+r[2]+'. Threshold: '+r[5]+'. '+(a<r[5]?'Shortfall to threshold: '+(r[5]-a)+' '+r[2]+'.':a===r[5]?'Equality is excluded from the below-threshold queue.':'Available is above threshold.'))+'</p><dl><dt>Next action</dt><dd>'+(id==='G01'?'Verify the count and reservation, then decide replenishment under the stockroom procedure.':id==='M03'?'Verify that the unit means a complete marker set; a partial set is not one usable set.':a===null?'Ask the coordinator for an on-hand count and count date.':'Check against the maintained inventory record before acting.')+'</dd><dt>Not supplied</dt><dd>Supplier lead time and order quantity.</dd></dl>';}
function filter(i){pressed('filter',i);const rows=stock.filter(r=>i===0||i===1&&available(r)!==null&&available(r)<r[5]||i===2&&available(r)===null);$('#queue-count').textContent=rows.length+' of 5 source rows · '+['All items','Available strictly below threshold','Missing count; comparison unavailable'][i];$('#stock-rows').innerHTML=rows.map(r=>{const a=available(r),max=Math.max(r[5]*2,a||0,1);return '<article class="stock-row"><div class="stock-name"><b>'+r[0]+' · '+r[1]+'</b><span class="small">'+r[2]+' · Source row '+r[6]+'</span></div><dl class="stock-values"><div><dt>On hand</dt><dd>'+(r[3]??'Unknown')+'</dd></div><div><dt>Reserved</dt><dd>'+r[4]+'</dd></div><div><dt>Available</dt><dd>'+(a??'Unknown')+'</dd></div><div><dt>Threshold</dt><dd>'+r[5]+'</dd></div></dl>'+(a===null?'<p class="small">No bar: count unknown</p>':'<div class="stock-bar" aria-hidden="true"><i style="width:'+a/max*100+'%"></i><em style="left:'+r[5]/max*100+'%"></em></div>')+'<button data-item="'+r[0]+'" aria-pressed="false" aria-controls="stock-detail">'+state(r)+' · inspect</button></article>';}).join('');$$('[data-item]').forEach(b=>b.addEventListener('click',()=>detail(b.dataset.item)));detail(rows.some(r=>r[0]===selected)?selected:rows[0][0]);}$$('[data-filter]').forEach(b=>b.addEventListener('click',()=>filter(Number(b.dataset.filter))));filter(1);</script></body></html>