Give each item a home or an open decision

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"><title>Give each item a home or an open decision</title>
<style>
:root{color-scheme:light;--ink:#1e2f3c;--accent:#214f77;--wash:#e9f0f5;--paper:#fff;--line:#b7c8d2}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--wash);color:var(--ink);font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;padding:24px 16px}main{max-width:960px;margin:auto;background:var(--paper);border:1px solid var(--line);border-top:7px solid var(--accent);box-shadow:0 12px 32px #1624320d}header{padding:26px 30px 20px;border-bottom:1px solid var(--line)}.kicker{font-weight:750;letter-spacing:.06em;color:var(--accent);margin:0 0 6px}h1{font-size:clamp(26px,5vw,38px);line-height:1.15;margin:0 0 12px;letter-spacing:-.025em}h2{font-size:22px;line-height:1.3;margin:0 0 16px}h3{font-size:18px;margin:0 0 10px}p{margin:0 0 14px}p:last-child{margin-bottom:0}.content{padding:26px 30px}.panel{padding:22px 0;border-bottom:1px solid var(--line)}.panel:first-child{padding-top:0}.panel:last-child{border-bottom:0}.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}label{display:block;font-weight:650;margin:10px 0}input,textarea{display:block;font:inherit;width:100%;min-width:0;background:#fff;color:var(--ink);padding:11px 12px;border:1px solid #7f94a5;border-radius:5px;margin-top:6px}textarea{resize:vertical}button{font:inherit;font-weight:700;border:2px solid var(--accent);border-radius:5px;color:var(--accent);background:var(--paper);padding:10px 16px;min-height:46px;cursor:pointer}button:hover,button[aria-pressed="true"]{background:var(--accent);color:#fff}button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #c77700;outline-offset:3px}.result{padding:16px 18px;border-left:5px solid var(--accent);background:var(--wash);margin:16px 0;white-space:pre-line}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:16px 0}.metric{border-top:4px solid var(--accent);padding:12px;background:var(--wash)}.big{font-size:28px;font-weight:780;display:block;line-height:1.2;font-variant-numeric:tabular-nums}.rows{display:grid;gap:12px}.record{border:1px solid var(--line);padding:16px;border-radius:4px}.record h3{color:var(--accent)}.muted{color:#445867}.tag{display:inline-block;padding:3px 10px;background:var(--wash);border:1px solid var(--line);border-radius:30px}.route{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.chip{display:inline-block;border:2px solid var(--accent);border-radius:10px;padding:9px 14px;background:white;font-weight:750}.prime{background:#dff0df}.diagram{padding:20px;background:var(--wash);border:1px solid var(--line);margin:16px 0}summary{cursor:pointer;font-weight:700;padding:12px 0}details{border-top:1px dashed var(--line);margin-top:14px}.board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:16px 0}.cell{font-size:16px;text-align:center;background:var(--wash);padding:6px 0;border:1px solid var(--line)}.cell.hit{background:var(--accent);color:white;font-weight:750}.staff{width:100%;height:auto;display:block;background:white}.staff text{font:18px system-ui;fill:var(--ink)}.shape-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.shape-row button{padding:12px}.shape{display:block;margin:6px auto;background:var(--accent);height:62px;width:62px}.circle{border-radius:50%}.triangle{background:transparent;width:0;height:0;border-left:34px solid transparent;border-right:34px solid transparent;border-bottom:62px solid var(--accent)}.tray{border:2px solid var(--accent);padding:14px;margin:12px 0;border-radius:8px}.counters{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.counter{border:1px solid var(--accent);border-radius:50%;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;background:var(--wash);font-size:16px}.agenda{display:grid;grid-template-columns:1fr;gap:12px}.agenda p{border-left:4px solid var(--accent);padding:8px 14px;margin:0}.bar-row{margin:16px 0}.bar{height:24px;max-width:100%;background:var(--accent);border-radius:3px}.missing{padding:10px;border:2px dashed var(--accent)}.timeline-row{margin:16px 0}.track{position:relative;height:34px;background:var(--wash);border:1px solid var(--line);overflow:hidden}.segment{position:absolute;top:3px;height:26px;background:var(--accent)}.quote{font:26px/1.45 Georgia,serif;border-left:5px solid var(--accent);padding:18px;margin:18px 0;background:var(--wash)}.facts{padding:16px;background:var(--wash);border-top:4px solid var(--accent)}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;font-family:ui-monospace,monospace;background:var(--wash);padding:16px}footer{padding:20px 30px;background:var(--wash);border-top:1px solid var(--line)}section,div,p,label,li{overflow-wrap:anywhere}ul,ol{padding-left:24px}.lesson{--accent:#4b3c79;--wash:#f0edf7}.meter{--accent:#176166;--wash:#e8f3f1}.meter header{background:#153f47;color:white}.meter .kicker{color:#ceebe5}.index{--accent:#3e566c;--wash:#edf1f5}.index .record{border-left:6px solid var(--accent)}.calendar{--accent:#824b25;--wash:#f6efe6}.montessori{--accent:#486047;--wash:#f1f1e5;--paper:#fffef7}.montessori h1,.montessori h2{font-family:Georgia,serif}.music{--accent:#343d75;--wash:#eef0f8}.music h1{font-family:Georgia,serif}.quotation{--accent:#204d79;--wash:#eaf0f7}.station{--accent:#6e522e;--wash:#f5efdf}.dice{--accent:#63398c;--wash:#f3edf9}.groups{--accent:#09685d;--wash:#e6f4ee}.wizard{--accent:#5b4595;--wash:#f1eef8}.wizard main{max-width:720px}.review{--accent:#7d3e4e;--wash:#f8edf0}.review h1{font-family:Georgia,serif}.factor{--accent:#286348;--wash:#e9f4ec}.service{--accent:#875118;--wash:#fcf0de}.statistics{--accent:#325891;--wash:#edf2fa}.hyperbole{--accent:#9a4928;--wash:#fbefe6}.hyperbole h1{font-family:Georgia,serif}@media(max-width:640px){body{padding:10px 8px}header,.content,footer{padding:20px}.cols{grid-template-columns:1fr;gap:16px}.metrics{grid-template-columns:1fr}.fields{grid-template-columns:1fr}.shape-row{gap:8px}.shape-row button{padding:8px}.shape{width:48px;height:48px}.shape.triangle{width:0;height:0;border-left-width:25px;border-right-width:25px;border-bottom-width:48px}.big{font-size:26px}.cell{padding:7px 0}.controls button{flex:1 1 auto}.quote{font-size:24px}}

</style></head><body class="station"><main><header><p class="kicker">SHARED PAPER STATION / DRAFT 5S</p><h1>Give each item a home or an open decision</h1><p>Fictional item ledger. I1 belongs in Tray A; the baseline observation puts it in Tray B. Actual owner approval and effective date are not supplied.</p></header><div class="content"><div class="result" id="placement" aria-live="polite">Ready for an attempt.</div><div class="diagram"><div class="cols"><div class="tray"><h2>Tray A</h2><p>Reference: I1 Instruction cards</p></div><div class="tray"><h2>Tray B</h2><p>Baseline observed: I1 Instruction cards</p></div></div><div class="tray"><h2>ReviewHold / owner decision</h2><p>I2 old flyer: ownership/retention unknown. I3 pencil stub: usefulness unknown. No disposal decision.</p></div></div><div class="controls"><button type="button" id="all">All items</button><button type="button" id="open">Open decisions</button></div><div class="result" id="count" aria-live="polite">Ready for an attempt.</div><div class="rows"><article class="record" id="i1"><h3>I1 · Instruction cards</h3><p>Needed for station task · Declared home Tray A · Confirm actual content and home approval.</p></article><article class="record" id="i2"><h3>I2 · Old flyer</h3><p>ReviewHold · Obtain owner’s ownership/retention decision. Not trash.</p></article><article class="record" id="i3"><h3>I3 · Pencil stub</h3><p>Usefulness unknown · Ask owner what is needed and authorized.</p></article></div><section class="panel "><h2>Compare a later observation</h2><label for="home">Observed home: A or B<input id="home" type="text" value="B" ></label><button type="button" id="compare">Compare home</button><button type="button" id="recheck">Model a Tray A recheck</button><div class="result" id="history" aria-live="polite">Baseline fictional check: I1 in Tray B; reference Tray A → mismatch.</div></section><section class="panel "><h2>Draft SOP and item decisions</h2><p>Blank temporary records; enter actual references only when obtained.</p><label for="sop-id">Actual SOP ID / version<textarea id="sop-id" rows="2"></textarea></label><label for="sop-owner">Approving owner / approval reference<textarea id="sop-owner" rows="2"></textarea></label><label for="sop-date">Effective date<textarea id="sop-date" rows="2"></textarea></label><label for="i1-use">I1 observed use / condition and use basis<textarea id="i1-use" rows="2"></textarea></label><label for="i1-decision">I1 actual owner decision / reference<textarea id="i1-decision" rows="2"></textarea></label><label for="i1-home">I1 approved home or hold / next action<textarea id="i1-home" rows="2"></textarea></label><label for="i2-use">I2 observed use / condition and use basis<textarea id="i2-use" rows="2"></textarea></label><label for="i2-decision">I2 actual owner decision / reference<textarea id="i2-decision" rows="2"></textarea></label><label for="i2-home">I2 approved home or hold / next action<textarea id="i2-home" rows="2"></textarea></label><label for="i3-use">I3 observed use / condition and use basis<textarea id="i3-use" rows="2"></textarea></label><label for="i3-decision">I3 actual owner decision / reference<textarea id="i3-decision" rows="2"></textarea></label><label for="i3-home">I3 approved home or hold / next action<textarea id="i3-home" rows="2"></textarea></label><label for="start-criterion">start checkpoint: item / criterion<textarea id="start-criterion" rows="2"></textarea></label><label for="start-observation">start checkpoint: actual observation / reference and mismatch or unknown<textarea id="start-observation" rows="2"></textarea></label><label for="start-followup">start checkpoint: follow-up owner / action and actual recheck<textarea id="start-followup" rows="2"></textarea></label><label for="end-criterion">end checkpoint: item / criterion<textarea id="end-criterion" rows="2"></textarea></label><label for="end-observation">end checkpoint: actual observation / reference and mismatch or unknown<textarea id="end-observation" rows="2"></textarea></label><label for="end-followup">end checkpoint: follow-up owner / action and actual recheck<textarea id="end-followup" rows="2"></textarea></label><h2>Repeat-check notes</h2><p>Sort → Set in Order → Shine → Standardize → Sustain. Use the owner’s approved condition routine; no chemical or equipment work is supplied.</p><label for="followup">Temporary follow-up: criterion, observed condition, owner question and later recheck<textarea id="followup" rows="3"></textarea></label><p>A matching scenario is one observation, not proof of a sustained routine.</p><button type="button" id="reset">Reset station review</button></section></div><footer><p>This page models a placement comparison. It does not rearrange the station, dispose of items, record an actual inspection or save notes.</p></footer></main><script>
(()=>{'use strict';const $=id=>document.getElementById(id);const text=(id,value)=>{$(id).textContent=value;};const on=(id,event,fn)=>$(id).addEventListener(event,fn);const clear=(ids,fn)=>ids.forEach(id=>on(id,'input',fn));const integer=(s,min,max)=>/^\d+$/.test(s)&&Number(s)>=min&&Number(s)<=max;const money=n=>'$'+n.toFixed(2);const normalize=s=>s.trim().toLowerCase().replace(/[.!?]$/,'');
let checks=[];function compare(){const home=$('home').value.trim().toUpperCase();if(!['A','B'].includes(home)){text('placement','Unresolved: enter home A or B. No placement finding added.');return;}const match=home==='A';text('placement',match?'I1 matches declared Tray A in this scenario. One event does not establish Sustain.':'I1 placement mismatch: observed Tray B, expected Tray A. Not a missing-inventory finding.');checks.push('Scenario recheck: observed Tray '+home+' → '+(match?'matches':'mismatch'));text('history','Baseline fictional check: I1 in Tray B; reference Tray A → mismatch.\n'+checks.join('\n'));}on('compare','click',compare);on('recheck','click',()=>{$('home').value='A';compare();});on('open','click',()=>{$('i1').hidden=true;text('count','Visible: 2 items with unresolved owner decisions.');});on('all','click',()=>{$('i1').hidden=false;text('count','Visible: 3 items; 2 unresolved owner decisions.');});on('reset','click',()=>{checks=[];$('home').value='B';$('followup').value='';["sop-id","sop-owner","sop-date","i1-use","i1-decision","i1-home","i2-use","i2-decision","i2-home","i3-use","i3-decision","i3-home","start-criterion","start-observation","start-followup","end-criterion","end-observation","end-followup"].forEach(id=>$(id).value='');$('i1').hidden=false;text('count','Visible: 3 items; 2 unresolved owner decisions.');text('placement','I1 placement mismatch: observed Tray B, expected Tray A. Not a missing-inventory finding.');text('history','Baseline fictional check: I1 in Tray B; reference Tray A → mismatch.');});text('count','Visible: 3 items; 2 unresolved owner decisions.');text('placement','I1 placement mismatch: observed Tray B, expected Tray A. Not a missing-inventory finding.');on('home','input',()=>text('placement','Observation changed. Compare the current home.'));
})();
</script></body></html>