Three open requests. Two need overdue follow-up.
HTML for this example
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'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data:; base-uri 'none'; form-action 'none'"><title>Three open requests. Two need overdue follow-up.</title><style>
*{box-sizing:border-box}html{color-scheme:light}body{margin:0;color:#263238;background:#f0f3f5;font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;--accent:#215967;--soft:#e4eff0}main{max-width:1000px;margin:auto;padding:26px}header{margin-bottom:20px}h1{font-size:clamp(25px,4.2vw,36px);line-height:1.15;letter-spacing:-.035em;margin:8px 0 10px}h2{font-size:21px;line-height:1.3;margin:0 0 12px}h3{font-size:17px;line-height:1.4;margin:0 0 7px}p{margin:8px 0 14px}.eyebrow{font-size:12px;text-transform:uppercase;font-weight:750;letter-spacing:.11em;color:var(--accent)}.fiction{font-size:12px;display:inline-block;padding:4px 8px;background:var(--soft);color:#364c53}.lede{max-width:760px;color:#465b64;margin-bottom:10px}.toolbar{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:16px 0 20px;padding:14px;background:#fff;border:1px solid #bdcbd0}.toolbar label{flex:1 1 170px;font-size:13px;font-weight:650;min-width:0}.toolbar label input,.toolbar label select{display:block;width:100%;margin-top:5px}button,input,select,textarea{font:inherit;color:inherit}button,select,input{min-height:44px;border:1px solid #8a9ea7;border-radius:4px;background:#fff;padding:9px 12px;max-width:100%}button{cursor:pointer;font-weight:650}button:hover{background:var(--soft)}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,textarea:focus-visible{outline:3px solid #ad5700;outline-offset:3px}button[aria-pressed=true]{background:var(--accent);color:#fff}select,input,textarea{min-width:0}a{color:var(--accent)}.paper{background:#fff;border:1px solid #bdcbd0;padding:22px}.pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}.pair>*{min-width:0}.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:#bdcbd0;border:1px solid #bdcbd0;margin:14px 0}.metrics>div{background:#fff;padding:16px}.metrics strong{font-size:30px;display:block;letter-spacing:-.04em;color:var(--accent)}.metrics span{display:block;font-size:13px;color:#47616b}.note{padding:15px 18px;background:var(--soft);border-left:4px solid var(--accent);margin:16px 0}.note p{margin:5px 0 0}.warn{background:#fff1d9;border-left-color:#a36300}.pill{display:inline-block;font-size:12px;padding:3px 8px;border:1px solid #a8bbc2;background:#f3f7f7;letter-spacing:0;font-weight:600}.pill.alert{background:#fff1d9;border-color:#cfa55f;color:#704900}.small{font-size:13px;color:#4c626c}.muted{color:#4c626c}.result{min-height:40px}details{border:1px solid #bac9cf;background:#fff;margin:10px 0}summary{padding:12px 16px;cursor:pointer;font-weight:650;min-height:44px}.detail{padding:0 16px 15px}details p:last-child{margin-bottom:0}table{width:100%;border-collapse:collapse;background:#fff;font-size:14px}caption{text-align:left;padding:10px 0;font-weight:650}th,td{padding:12px;text-align:left;vertical-align:top;border-bottom:1px solid #ced8dd;overflow-wrap:anywhere}th{background:var(--soft);font-size:12px}th[scope=row]{font-size:14px}.cell-label{display:none}.empty{padding:24px;background:#fff;border:1px dashed #8197a0}.rule{border-top:1px solid #bac9cf;padding-top:18px;margin-top:24px}footer{border-top:1px solid #bccbd2;margin-top:26px;padding-top:16px;font-size:12px;color:#4c626c}.record{padding:17px 0;border-top:1px solid #bdcbd0}.record:first-child{border-top:0}.record-top{display:flex;gap:10px;align-items:start;justify-content:space-between}.record p{margin:6px 0}.record .channel{font-size:19px;color:var(--accent);overflow-wrap:anywhere}.record .identity{font:12px ui-monospace,monospace}.ledger{background:#fff;border:1px solid #bdcbd0;padding:0 20px}.bar{height:12px;background:#dce5e8;overflow:hidden;margin:10px 0}.bar span{display:block;height:100%;background:var(--accent)}.status-line{font-weight:650;padding:10px 0;color:var(--accent)}[hidden]{display:none!important}svg{max-width:100%;height:auto}textarea{width:100%;min-height:320px;padding:16px;border:1px solid #8a9ea7;background:#172d3b;color:#eff7fc;font:13px/1.6 ui-monospace,Consolas,monospace;resize:vertical}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 ui-monospace,monospace;background:#17313e;color:#fff;padding:18px}.calendar{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.period{padding:9px 5px;border:1px solid #bbc9cd;background:#fff;font-size:12px}.period b{display:block}.period.lost{background:#e5e8ea;color:#53616a;text-decoration:line-through}.period.buffer{background:#fef0c8}.period.review{background:#e8e0f2}.period.project{background:#d9eaf4}.week{margin:16px 0}.week h3{font-size:14px}.receipt{max-width:550px;margin:auto;background:#fffefb;padding:27px;border:1px solid #c8bda7;border-top:5px solid #746242}.receipt h2{font:28px/1.2 Georgia,serif}.receipt .prototype{padding:12px;background:#f1e5c9;font-size:12px;font-weight:750}.receipt dl{display:grid;grid-template-columns:1fr 1fr;font-size:14px}.receipt dd{margin:0 0 8px}.receipt dt{color:#675b47}.receipt .amount{display:flex;justify-content:space-between;align-items:center;border-top:2px solid #6f624c;padding-top:14px;margin-top:16px}.receipt .amount strong{font-size:30px}.news{background:#fffcf5;border-top:4px solid #24241f;padding:22px;font-family:Georgia,serif}.masthead{font:clamp(24px,5vw,39px)/1.2 Georgia,serif;text-align:center;margin:0 0 12px}.issue{font:12px/1.5 system-ui;display:flex;justify-content:space-between;border-block:1px solid #353a35;padding:7px 0;gap:10px}.news-columns{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;margin-top:20px}.news h2{font-size:30px;line-height:1.12}.news .lead{font-size:19px}.news aside{border-left:1px solid #c6bfae;padding-left:20px}.news figure{margin:18px 0 0}.news figcaption{font:12px/1.5 system-ui}.news .editor{font:14px/1.55 system-ui;margin-top:22px}.gradebook{background:#fff;padding:18px;border:1px solid #aabdc5}.grade-table{font-size:13px;table-layout:fixed}.grade-table th{font-weight:650}.grade-table td{height:66px;border:1px solid #aabdc5;text-align:center;font-size:20px}.grade-table th{border:1px solid #aabdc5}.grade-table .cell-label{font-size:12px}.grade-table th span{display:block;font-size:11px;font-weight:400}.grade-table.eight{font-size:11px}.grade-table.eight th{padding:8px}.grade-table .blank-name{width:17%}.grade-legend{display:flex;flex-wrap:wrap;gap:15px;border-block:1px solid #aabdc5;padding:10px 0;margin:15px 0;font-size:13px}.report{background:#fff;padding:24px;border-left:5px solid #396586}.report .stats{display:flex;gap:30px;padding:12px 0;border-bottom:1px solid #bbcbd4;flex-wrap:wrap}.report .stats strong{font-size:36px;color:#2d5774}.report .stats span{display:block;font-size:12px}.count-row{display:grid;grid-template-columns:90px 1fr 30px;gap:12px;align-items:center;margin:14px 0}.count-row .bar{margin:0;height:20px}.timeline-row{margin:18px 0}.timeline-track{position:relative;height:34px;background:repeating-linear-gradient(90deg,#dce5e9 0,#dce5e9 1px,transparent 1px,transparent 14.285%);border-block:1px solid #ccd6dc}.time-block{position:absolute;top:4px;height:24px;background:var(--accent);border-radius:2px}.time-block.conflict{background:#b76427}.timeline-label{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:5px}.scale{display:flex;justify-content:space-between;font-size:11px;color:#47616b}.notice-page{background:#faf7ef;--accent:#775617;--soft:#f4e8c7}.notice-page main{max-width:820px}.service-notice{background:#fffef9;padding:34px;border:1px solid #d9c99c;box-shadow:0 8px 0 #f1e8d5}.service-notice h2{font-size:32px;line-height:1.14;max-width:560px}.notice-icon{display:block;margin-bottom:15px}.update-strip{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:24px 0 0}.update-strip div{border-top:2px solid #c4a95c;padding-top:12px}.update-strip strong{display:block;font-size:23px;color:#684e1b}.delivery li{padding:7px 0}.receipt-page{background:#efece4;--accent:#6a5632;--soft:#e9e0ce}.newspaper-page{background:#eeeae1;--accent:#464836;--soft:#e6e7d9}.report-page{--accent:#305a7a;--soft:#e2ecf4}.pacing-page{--accent:#624579;--soft:#eae2f1}.training-page{--accent:#325d48;--soft:#e3ede7}.booking-page{--accent:#365f82;--soft:#e5edf5}.maintenance-page{--accent:#67523b;--soft:#eee8df}
@media(max-width:720px){main{padding:20px}.pair{gap:14px}.news-columns{gap:17px}.paper{padding:17px}.grade-table.eight th{font-size:10px;padding:5px}.grade-table.eight td{padding:5px}.calendar{gap:4px}.metrics strong{font-size:27px}}
@media(max-width:520px){main{padding:16px}.pair,.news-columns,.update-strip{grid-template-columns:1fr}.news aside{border-left:0;border-top:1px solid #c6bfae;padding:18px 0 0}.news{padding:18px}.news h2{font-size:28px}.issue{flex-wrap:wrap}.toolbar{padding:12px;gap:10px}.toolbar label{flex-basis:100%}.toolbar button{width:100%}.metrics{grid-template-columns:1fr 1fr}.metrics>div{padding:12px}.record-top{display:block}.record-top .pill{margin-top:6px}.calendar{grid-template-columns:repeat(5,minmax(0,1fr))}.period{padding:7px 3px;font-size:10px;overflow-wrap:anywhere}table thead{display:none}table,tbody,tr,td{display:block;width:100%}tr{border-bottom:1px solid #b8cad2;padding:10px 12px}td{border:0;padding:6px 0}.cell-label{display:block;font-size:11px;font-weight:750;color:#4c626c;margin-bottom:3px}.gradebook{padding:12px}.grade-table tr{padding:12px 0}.grade-table td{height:auto;border:0;border-bottom:1px solid #d2dce0;padding:12px;text-align:left;min-height:57px}.grade-table td:first-child{background:#edf2f5}.grade-table .blank-name{width:auto}.grade-table.eight td{padding:12px}.receipt{padding:20px}.receipt dl{grid-template-columns:1fr;gap:0}.receipt dd{margin-bottom:12px}.receipt .amount{gap:12px}.receipt .amount strong{font-size:27px}.report{padding:18px}.count-row{grid-template-columns:76px 1fr 25px;gap:8px}.timeline-label{display:block}.service-notice{padding:24px}.service-notice h2{font-size:28px}h1{font-size:27px}}
@media print{body{background:#fff}main{max-width:none;padding:0}.toolbar,footer{display:none}.grade-table,.grade-table tbody,.grade-table tr{display:table-row-group}.grade-table{display:table}.grade-table thead{display:table-header-group}.grade-table tr{display:table-row}.grade-table th,.grade-table td{display:table-cell;height:48px}.grade-table .cell-label{display:none}.paper,.gradebook{border:0}.note,details{break-inside:avoid}@page{size:letter landscape;margin:12mm}}
</style></head><body class="maintenance-page"><main><header><span class="eyebrow">Office request ledger / as of October 13, 2026</span><h1>Three open requests. Two need overdue follow-up.</h1><p class="lede">M4 needs an owner. M1 needs a vendor update. Scheduled M2 remains open until closure evidence arrives.</p><span class="fiction">Original fictional example · local review copy</span></header><div class="toolbar" aria-label="Local reading controls"><label for="owner">Owner scope<select id="owner"><option value="all">All owners</option><option value="Operations">Operations</option><option value="IT">IT</option><option value="unconfirmed">Owner to confirm</option></select></label><label for="state">Request scope<select id="state"><option value="all">All requests</option><option value="open">Open requests</option><option value="overdue">Overdue-open only</option><option value="closed">Closed requests</option></select></label><button type="button" id="reset">Reset scope</button></div><section id="output" class="result" aria-label="Worked example"><h2>Whole ledger · as of October 13, 2026</h2><div class="metrics"><div><strong>4</strong><span>unique requests</span></div><div><strong>3</strong><span>open</span></div><div><strong>2</strong><span>overdue-open</span></div><div><strong>1</strong><span>closed</span></div></div><p class="status-line" role="status">Selected scope: 4 matching requests · 3 open · 2 overdue-open · 1 closed</p><section class="ledger"><article class="record"><div class="record-top"><div><span class="identity">M1</span><h3>Lobby printer</h3><p><strong>Owner:</strong> Operations</p></div><span class="pill alert">Waiting for vendor · Overdue-open</span></div><p class="small">Due 2026-10-12 · reviewed 2026-10-13</p><p><strong>Next action:</strong> Ask Operations for the next vendor update.</p><details><summary>Inspect M1 evidence</summary><div class="detail"><p>Vendor update needed; no closure note.</p><p>No automatic reopening, dispatch, certification or record change is performed.</p></div></details></article><article class="record"><div class="record-top"><div><span class="identity">M2</span><h3>Meeting-room display</h3><p><strong>Owner:</strong> IT</p></div><span class="pill ">Scheduled</span></div><p class="small">Due 2026-10-14 · reviewed 2026-10-13</p><p><strong>Next action:</strong> Retain scheduled state until actual work and authorized closure evidence arrive.</p><details><summary>Inspect M2 evidence</summary><div class="detail"><p>Appointment planning note; completion not supplied.</p><p>No automatic reopening, dispatch, certification or record change is performed.</p></div></details></article><article class="record"><div class="record-top"><div><span class="identity">M3</span><h3>Desk cable organizer</h3><p><strong>Owner:</strong> Operations</p></div><span class="pill ">Closed October 12</span></div><p class="small">Due 2026-10-12 · reviewed 2026-10-13</p><p><strong>Next action:</strong> Inspect the supplied demonstration closure note.</p><details><summary>Inspect M3 evidence</summary><div class="detail"><p>DEMO-C03: fictional completion note supplied.</p><p>No automatic reopening, dispatch, certification or record change is performed.</p></div></details></article><article class="record"><div class="record-top"><div><span class="identity">M4</span><h3>Copier check</h3><p><strong>Owner:</strong> Owner to confirm</p></div><span class="pill alert">Open · Overdue-open</span></div><p class="small">Due 2026-10-10 · reviewed 2026-10-13</p><p><strong>Next action:</strong> Confirm the owner and next action in the maintained record.</p><details><summary>Inspect M4 evidence</summary><div class="detail"><p>Owner and next action to confirm.</p><p>No automatic reopening, dispatch, certification or record change is performed.</p></div></details></article></section><aside class="note"><strong>Counting rule</strong><p>Overdue-open = not closed and due before October 13, 2026. M3 is closed despite its past due date. M2 is open but not overdue. These counts do not measure reliability, repair success or safety clearance.</p></aside></section><footer>Changes affect this local reading copy only and reset when reloaded. Actual records, decisions and approvals stay in the authorized original workflow. No data is sent or stored.</footer><noscript><p class="note">The worked example remains readable. Local view and filter controls require JavaScript.</p></noscript></main><script>const $=id=>document.getElementById(id); const esc=value => String(value).replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
function listen(id,event,fn){$(id).addEventListener(event,fn)}
function table(headers,rows){return '<table><thead><tr>'+headers.map(h=>'<th scope="col">'+esc(h)+'</th>').join('')+'</tr></thead><tbody>'+rows.map(row=>'<tr>'+row.map((c,i)=>'<td><span class="cell-label">'+esc(headers[i])+'</span>'+c+'</td>').join('')+'</tr>').join('')+'</tbody></table>'}
function metric(value,label){return '<div><strong>'+esc(value)+'</strong><span>'+esc(label)+'</span></div>'}
function note(title,body){return '<aside class="note"><strong>'+title+'</strong><p>'+body+'</p></aside>'}
function details(title,body){return '<details><summary>'+title+'</summary><div class="detail">'+body+'</div></details>'}
const asOf='2026-10-13';const records=[{id:'M1',need:'Lobby printer',due:'2026-10-12',owner:'Operations',state:'Waiting for vendor',closed:false,evidence:'Vendor update needed; no closure note.',action:'Ask Operations for the next vendor update.'},{id:'M2',need:'Meeting-room display',due:'2026-10-14',owner:'IT',state:'Scheduled',closed:false,evidence:'Appointment planning note; completion not supplied.',action:'Retain scheduled state until actual work and authorized closure evidence arrive.'},{id:'M3',need:'Desk cable organizer',due:'2026-10-12',owner:'Operations',state:'Closed October 12',closed:true,evidence:'DEMO-C03: fictional completion note supplied.',action:'Inspect the supplied demonstration closure note.'},{id:'M4',need:'Copier check',due:'2026-10-10',owner:'',state:'Open',closed:false,evidence:'Owner and next action to confirm.',action:'Confirm the owner and next action in the maintained record.'}];
function overdue(r){return !r.closed&&r.due<asOf}function summary(rows){return {total:rows.length,open:rows.filter(r=>!r.closed).length,overdue:rows.filter(overdue).length,closed:rows.filter(r=>r.closed).length}}
function filtered(){return records.filter(r=>($('owner').value==='all'||($('owner').value==='unconfirmed'?!r.owner:r.owner===$('owner').value))&&($('state').value==='all'||($('state').value==='open'?!r.closed:$('state').value==='closed'?r.closed:overdue(r))))}
function view(){let rows=filtered(),s=summary(rows),all=summary(records);return '<h2>Whole ledger · as of October 13, 2026</h2><div class="metrics">'+metric(all.total,'unique requests')+metric(all.open,'open')+metric(all.overdue,'overdue-open')+metric(all.closed,'closed')+'</div><p class="status-line" role="status">Selected scope: '+s.total+' matching requests · '+s.open+' open · '+s.overdue+' overdue-open · '+s.closed+' closed</p>'+(rows.length?'<section class="ledger">'+rows.map(r=>'<article class="record"><div class="record-top"><div><span class="identity">'+r.id+'</span><h3>'+r.need+'</h3><p><strong>Owner:</strong> '+(r.owner||'Owner to confirm')+'</p></div><span class="pill '+(overdue(r)?'alert':'')+'">'+r.state+(overdue(r)?' · Overdue-open':'')+'</span></div><p class="small">Due '+r.due+' · reviewed '+asOf+'</p><p><strong>Next action:</strong> '+r.action+'</p>'+details('Inspect '+r.id+' evidence','<p>'+r.evidence+'</p><p>No automatic reopening, dispatch, certification or record change is performed.</p>')+'</article>').join('')+'</section>':'<div class="empty"><h2>No matching requests</h2><p>The whole-ledger counts remain above. Change or reset the scope.</p></div>')+note('Counting rule','Overdue-open = not closed and due before October 13, 2026. M3 is closed despite its past due date. M2 is open but not overdue. These counts do not measure reliability, repair success or safety clearance.')}
function update(){$('output').innerHTML=view()}listen('owner','change',update);listen('state','change',update);listen('reset','click',()=>{$('owner').value='all';$('state').value='all';update()});update();</script></body></html>