A three-moment poster-pickup blueprint with visible/backstage layers and an unresolved ready-notice dependency

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>Poster pickup · service blueprint and readiness gap</title><style>*{box-sizing:border-box}body{margin:0;background:#eff2f4;color:#2c3f4c;font:16px/1.6 system-ui,sans-serif}main{max-width:1120px;margin:auto;padding:28px}h1{font:700 clamp(31px,5vw,48px)/1.12 Georgia,serif;margin:12px 0 18px}h2{font-size:24px;line-height:1.3}h3{font-size:19px}p{margin:8px 0 16px}p,h1,h2,h3,label,button,td,th{overflow-wrap:anywhere}div,section,article{min-width:0}.eyebrow{font-size:16px;letter-spacing:.08em;font-weight:750}.panel{padding:22px;margin:22px 0;background:white;border:1px solid #bccbd2;border-radius:8px}.scope{padding:20px;background:#2f5368;color:white;border-radius:8px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.card{padding:16px;background:#eaf2f5;border-top:5px solid #6f91a4}.warning{padding:16px;background:#fff0d6;border-left:5px solid #b0773a}.draft{background:#fff4df;border:2px solid #ac7636;padding:18px}.draft h3{margin:0 0 10px}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}button,textarea{font:inherit}button{min-height:44px;padding:10px 15px;border:1px solid #64869b;border-radius:5px;background:white;color:inherit;cursor:pointer}button[aria-pressed="true"]{background:#2f5368;color:white}button:hover{box-shadow:inset 0 0 0 1px #2f5368}button:focus-visible,textarea:focus-visible{outline:3px solid #b45a25;outline-offset:3px}table{width:100%;table-layout:fixed;border-collapse:collapse}th,td{padding:12px;border:1px solid #bccbd2;text-align:left;vertical-align:top}th{background:#e0ebf1}.boundary td{font-weight:750;background:#344f60;color:white;border-bottom:4px solid #bcb785}.boundary span{display:block;font-weight:400}.layer{font-weight:750}label{display:block;font-weight:650;margin:14px 0 6px}textarea{display:block;width:100%;min-width:0;min-height:125px;padding:10px;border:1px solid #8199a7;border-radius:4px;background:white;color:inherit;resize:vertical}footer{border-top:1px solid #bccbd2;padding-top:18px;margin-top:26px}[hidden]{display:none!important}@media(max-width:650px){main{padding:16px}.panel{padding:16px}.grid{grid-template-columns:1fr}table,tbody,tr,td{display:block}thead{display:none}tr{margin:16px 0;border:1px solid #bccbd2}td{border:0;border-top:1px solid #d0dce2}td:not(.layer)::before{content:attr(data-label);display:block;font-weight:750;margin-bottom:6px}.boundary td::before{content:none!important}.toolbar button{flex:1 1 140px}}</style></head><body><main><h1>Poster pickup blueprint</h1><p class="overview"><strong>Fictional P01 · 20 A3 posters.</strong> No completed P01 job-ready record is supplied; readiness remains unresolved. The map proposes work, without an actual customer, printing, sent notice, ready package or handover.</p>
<section class="panel" aria-labelledby="map-title"><h2 id="map-title">Align three moments across the service layers</h2><table aria-label="Print-shop service blueprint by layer and moment"><thead><tr><th scope="col">Layer</th><th scope="col">Submit artwork</th><th scope="col">Receive pickup notice</th><th scope="col">Collect posters</th></tr></thead><tbody><tr><td class="layer">Customer actions</td><td data-label="Submit artwork">C1: supply artwork and requested job details.</td><td data-label="Receive pickup notice">C2: read the pickup notice, if actually sent.</td><td data-label="Collect posters">C3: show the job ID.</td></tr><tr class="boundary"><td colspan="4">Line of interaction<span>Customer actions / visible staff interaction</span></td></tr><tr><td class="layer">Visible staff actions</td><td data-label="Submit artwork">F1: check job ID, poster size, and quantity with the customer.</td><td data-label="Receive pickup notice">F2: issue a pickup notice only after readiness is confirmed.</td><td data-label="Collect posters">F3: match the presented job ID to the collection record.</td></tr><tr class="boundary"><td colspan="4">Line of visibility<span>Visible staff activity / work the customer does not directly see</span></td></tr><tr><td class="layer">Backstage work</td><td data-label="Submit artwork">B1: check artwork against the agreed print requirements.</td><td data-label="Receive pickup notice">B2: print and finish; B3: pack and record the job ready.</td><td data-label="Collect posters">B4: retrieve the matching ready package.</td></tr><tr class="boundary"><td colspan="4">Internal handoff boundary<span>Backstage production / supporting processes and records</span></td></tr><tr><td class="layer">Supporting processes and records</td><td data-label="Submit artwork">S1: paper-stock record.</td><td data-label="Receive pickup notice">S2: production queue; S3: job register and job-ready record.</td><td data-label="Collect posters">S3: job register and matching ready-job identity.</td></tr><tr><td class="layer">Service evidence</td><td data-label="Submit artwork">Teaching job card P01.</td><td data-label="Receive pickup notice">Unsent notice preview and the required ready-record reference.</td><td data-label="Collect posters">Matching job ID and package record; no actual handover supplied.</td></tr></tbody></table></section>
<section class="panel" aria-labelledby="dependency-title"><h2 id="dependency-title">Follow a dependency across layers</h2><div class="toolbar" role="group" aria-label="Service moment"><button id="moment-submit" type="button" aria-pressed="false">Submit artwork</button><button id="moment-notice" type="button" aria-pressed="true">Pickup notice</button><button id="moment-collection" type="button" aria-pressed="false">Collection</button></div><h3 id="selected-moment"></h3><p id="dependency" class="card"></p><p id="dependency-gap" class="warning"></p><p id="selection-status" role="status" aria-live="polite">Pickup notice selected. No operational record has changed.</p><div class="draft"><h3>Unsent draft wording / readiness unresolved</h3><p>“Your posters are ready for collection — P01.”</p><p>This is an unsent wording preview. The required same-job ready record is not supplied. It is not a ready-state indicator or a working notification.</p></div><div class="toolbar"><button id="compare" type="button" aria-expanded="false" aria-controls="prerequisite-comparison">Compare prerequisite</button></div><div id="prerequisite-comparison" hidden><div class="grid"><article class="card"><h3>Flawed plan</h3><p>F2 is scheduled after the printing step alone.</p><p>Finishing, packing, and the same-job readiness confirmation have not been established.</p><p class="warning"><strong>P01 ready record: not supplied. Readiness unresolved.</strong></p></article><article class="card"><h3>Proposed prerequisite</h3><p>F2 requires the P01 ready-record reference confirming print/finish and packing readiness through B2 and B3.</p><p>The description of the prerequisite changes; no production or record is completed.</p><p class="warning"><strong>P01 ready record: still not supplied. Readiness unresolved.</strong></p></article></div><p>Which actual same-job record authorizes the ready notice, and who maintains it? The real process must answer before relying on the wording. No timestamp, queue update, approval or sent notice is created.</p></div></section>
<section class="panel" aria-labelledby="evidence-title"><h2 id="evidence-title">Service evidence · keep identity and status explicit</h2><div class="grid"><article class="card"><h3>Teaching job card</h3><p>P01 · 20 A3 posters. Fictional identity for this exercise.</p></article><article class="card"><h3>Required ready-record reference</h3><p>Not supplied. It must identify the same P01 job and its readiness confirmation; no completed record is invented.</p></article><article class="card"><h3>Unsent notice draft</h3><p>The wording preview above remains unsent, with readiness unresolved.</p></article><article class="card"><h3>Collection identity and package record</h3><p>F3 needs S3 and the matching package identity retrieved in B4. No actual handover time or receipt is supplied.</p></article></div></section>
<section class="panel" aria-labelledby="blank-title"><h2 id="blank-title">Blank blueprint and handoff-question scaffold</h2><div class="grid" id="blank-fields"></div><div class="toolbar"><button id="reset" type="button">Clear my blueprint notes</button></div><p id="status" role="status" aria-live="polite">Six writing fields start blank. Moment and prerequisite changes preserve them.</p><div id="confirmation" hidden><p>Clear six blueprint fields? The supplied layers, missing ready record, selected moment and comparison stay unchanged.</p><div class="toolbar"><button id="confirm-reset" type="button">Clear typed blueprint</button><button id="keep" type="button">Keep typed blueprint</button></div></div></section><footer>Notes are temporary in this open page; reloading clears them. No customer information is collected, and no printing, booking, notification, operational update, storage or export occurs.</footer></main>
<script>(()=>{'use strict';const $=id=>document.getElementById(id);const moments={submit:{title:'Submit artwork',dependency:'C1 supplies artwork/details. F1 checks P01, A3 size and quantity 20 with the customer. B1 checks artwork against agreed print requirements; S1 supplies the paper-stock record.',gap:'These are proposed layers. No actual artwork check or production outcome is supplied; the P01 job-ready record remains missing.'},notice:{title:'Pickup notice',dependency:'F2 → B2/B3 → S3: the notice depends on print-and-finish work (B2), packing and recording readiness (B3), and the supporting same-job P01 ready record (S3).',gap:'No completed P01 ready record is supplied. Printing alone cannot establish finishing, packing or same-job readiness. The notice remains an unsent draft.'},collection:{title:'Collection',dependency:'F3 → S3 and B4: match the presented job ID to the job register and the identity of the matching ready package retrieved in B4.',gap:'A customer’s job number alone does not establish that the matching package is available. No collection receipt or actual handover is supplied; the ready record remains missing.'}};function choose(key){for(const id of Object.keys(moments))$('moment-'+id).setAttribute('aria-pressed',String(id===key));const m=moments[key];$('selected-moment').textContent=m.title;$('dependency').textContent=m.dependency;$('dependency-gap').textContent=m.gap;$('selection-status').textContent=m.title+' selected. No operational record has changed.';}for(const key of Object.keys(moments))$('moment-'+key).addEventListener('click',()=>choose(key));$('compare').addEventListener('click',()=>{const open=$('prerequisite-comparison').hidden;$('prerequisite-comparison').hidden=!open;$('compare').setAttribute('aria-expanded',String(open));$('compare').textContent=open?'Hide prerequisite comparison':'Compare prerequisite';});for(const [id,title]of [['scope','Bounded service, customer goal and actual process owners'],['moments','Service moments and customer actions'],['frontstage','Visible staff actions and interaction boundary'],['backstage','Backstage work, support records and their boundaries'],['evidence','Actual service evidence, identities and known gaps'],['questions','Temporary review questions and proposed prerequisites']]){const box=document.createElement('div');const label=document.createElement('label');label.htmlFor='own-'+id;label.textContent=title;const field=document.createElement('textarea');field.id=label.htmlFor;box.append(label,field);$('blank-fields').append(box);}$('reset').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('status').textContent='Kept your six blueprint fields.';$('reset').focus();});$('confirm-reset').addEventListener('click',()=>{for(const field of document.querySelectorAll('textarea'))field.value='';$('confirmation').hidden=true;$('status').textContent='Your blueprint notes were cleared. Supplied layers, record gap and selected view are unchanged.';$('own-scope').focus();});choose('notice');})();</script></body></html>