Customer service • preparation guide SOP — Clarify the exact missing instruction and requested format, consult the authorized reference, draft a bounded response or escalation, and…

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>Customer service • preparation guide SOP</title><style>*{box-sizing:border-box}body{margin:0;background:var(--bg,#eef3f6);color:#172a39;font:16px/1.5 system-ui,sans-serif}main{max-width:1200px;margin:auto;padding:28px}h1{font-size:clamp(27px,4vw,42px);line-height:1.12;margin:8px 0 12px;letter-spacing:-.035em}h2{font-size:23px;line-height:1.2;margin:0 0 18px}h3{font-size:17px;margin:14px 0 8px}p{margin:8px 0 16px}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.15em;font-weight:800;color:var(--accent,#176b71)}.lead{max-width:75ch;color:#405568}.panel{background:#fff;border:1px solid #cdd9e1;border-radius:14px;padding:24px;margin:18px 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.wide{grid-template-columns:1.6fr 1fr}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.metric{border-left:4px solid var(--accent,#176b71);background:#f4f8fa;padding:18px}.big{display:block;font-size:36px;font-weight:800;line-height:1.2}.muted,small{color:#536879;font-size:14px}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}button{background:var(--accent,#176b71);color:white;border:2px solid transparent;border-radius:8px;padding:10px 16px;min-height:44px;cursor:pointer;font:inherit;font-weight:650}button.secondary{background:#e8eff4;color:#172a39}button:disabled{opacity:.48;cursor:default}button[aria-pressed=true]{outline:3px solid #172a39;outline-offset:2px}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #de7616;outline-offset:3px}label{display:block;font-weight:650;margin:12px 0 6px}input,select,textarea{font:inherit;color:inherit;border:1px solid #8b9eae;border-radius:6px;background:white;padding:10px;width:100%;min-height:44px}textarea{resize:vertical;min-height:110px}input[type=checkbox]{width:22px;min-height:22px;vertical-align:middle}table{border-collapse:collapse;width:100%;font-size:14px}th{text-align:left;background:#eff4f7;color:#3d5261}th,td{padding:12px;border-bottom:1px solid #dce5eb;vertical-align:top}.scroll{overflow-x:auto}caption{text-align:left;margin-bottom:12px;font-weight:700}.notice{background:#eef5f9;border-left:4px solid #628ba1;padding:14px;margin:14px 0}.error{color:#9c2924;font-weight:650}.pill{display:inline-block;border-radius:30px;padding:4px 10px;background:#e5f3ee;color:#17614f;font-size:13px;font-weight:750}.draft{white-space:pre-wrap;font:17px/1.65 Georgia,serif}.rule{display:block;width:100%;text-align:left;margin:10px 0}.rule strong{font-size:26px}details{margin:18px 0}summary{cursor:pointer;font-weight:700;padding:12px;background:#e9eff3;border-radius:6px;min-height:44px}footer{margin:30px 0;color:#536879;font-size:14px}ol,ul{padding-left:23px}.time-input{max-width:90px}.section-no{font-size:52px;color:#b5c8d5;font-weight:800;line-height:1}.tag{font-weight:700;color:var(--accent,#176b71)}[hidden]{display:none!important}@media(max-width:760px){main{padding:18px}.grid,.wide{grid-template-columns:1fr}.metric-grid{grid-template-columns:1fr}.panel{padding:18px}.big{font-size:30px}th,td{padding:9px}}:root{--accent:#315e8b;--bg:#eef2f7}blockquote{margin:0 0 20px;border-left:3px solid #aec1d4;padding-left:14px}.draft{padding:20px;background:#f6f9fc;border-top:4px solid #315e8b}</style></head><body><main>
<span class="eyebrow">Service desk / fictional ticket Q1</span><h1>Find the right preparation guide.</h1><p class="lead">Clarify the session, match the authorized resource, then confirm whether it helped.</p>
<div class="grid wide"><section class="panel"><span class="pill" id="ticket-state"></span><h2 id="draft-title"></h2><div id="draft" class="draft" aria-live="polite"></div><label for="draft-text">Exact review draft — manual copy only</label><textarea id="draft-text" readonly></textarea><button type="button" id="select-draft-text" class="secondary">Select text</button><p id="draft-text-status" class="muted">Select the text, then use your device’s copy command. Nothing is saved.</p><p class="muted">Resource IDs below are illustrative identifiers, not attachments or links. Location and version must be verified before sending.</p></section>
<aside class="panel"><h2>01 / Clarify the request</h2><blockquote>“I cannot find the preparation guide.”</blockquote><label for="workshop">Workshop</label><select id="workshop"><option value="">Not yet clarified</option><option value="A">Workshop A</option><option value="B">Workshop B</option></select><label for="session-date">Session date</label><input id="session-date" type="date" value=""><label for="format">Expected format</label><select id="format"><option value="">Not yet clarified</option><option value="PDF">PDF</option><option value="DOCX">DOCX</option></select><label for="tried">Where the customer has already tried</label><input id="tried" type="text" value=""><label for="instruction">Preparation instruction needing help</label><input id="instruction" type="text" value=""><p class="muted">Use a fictional clarified scenario to rehearse the branch:</p><div class="row"><button type="button" id="scenario-match">B · DOCX</button><button type="button" id="scenario-mismatch" class="secondary">B · PDF</button><button type="button" id="reset" class="secondary">Unclarified Q1</button></div></aside></div>
<section class="panel"><h2>02 / Authorized resource list</h2><table><thead><tr><th>ID</th><th>Workshop</th><th>Session date</th><th>Format</th></tr></thead><tbody><tr><td>GuideA</td><td>A</td><td>2026-10-20</td><td>PDF</td></tr><tr><td>GuideB</td><td>B</td><td>2026-11-03</td><td>DOCX</td></tr></tbody></table><p id="match-evidence" class="notice"></p><label for="resource-version">Verified resource version / location (actual evidence)</label><input id="resource-version" type="text" value=""></section>
<section class="panel"><h2>03 / Handoff and follow-up record</h2><div class="grid"><div><label for="escalation-owner">Actual authorized escalation owner</label><input id="escalation-owner" type="text" value=""><label for="accepted-step">Accepted next step</label><input id="accepted-step" type="text" value=""><label for="return-timing">Confirmed return timing</label><input id="return-timing" type="text" value=""></div><div><label for="sent-evidence">Evidence of actual sending (leave blank until it exists)</label><textarea id="sent-evidence"></textarea><label for="opens">Customer confirms the resource opens?</label><select id="opens"><option value="">No response recorded</option><option value="yes">Yes — customer response recorded</option><option value="no">No — customer response recorded</option></select><label for="answers">Customer confirms it answers the preparation question?</label><select id="answers"><option value="">No response recorded</option><option value="yes">Yes — customer response recorded</option><option value="no">No — customer response recorded</option></select><label for="remaining">Remaining question / customer response evidence</label><textarea id="remaining"></textarea></div></div><p id="follow-state" class="notice" aria-live="polite"></p><label for="ticket-text">Maintained ticket record</label><textarea id="ticket-text" readonly></textarea><button type="button" id="select-ticket-text" class="secondary">Select text</button><p id="ticket-text-status" class="muted">Select the text, then use your device’s copy command. Nothing is saved.</p></section>
<footer>This local companion cannot attach or send resources, confirm a PDF alternative, close a live ticket or store records. Real authorization and delivery remain in the approved service workflow.</footer></main><script>const $=id=>document.getElementById(id);const on=(id,fn)=>$(id).addEventListener('click',fn);const text=(id,value)=>$(id).textContent=value;const bind=(id,fn,event='input')=>$(id).addEventListener(event,fn);const selectText=id=>{if(!$(id).value){text(id+'-status','Complete the required fields before selecting text.');return;}$(id).focus();$(id).select();text(id+'-status','Text selected. Use your device’s copy command; nothing has been sent or saved.');};
const resources=[{id:'GuideA',workshop:'A',date:'2026-10-20',format:'PDF'},{id:'GuideB',workshop:'B',date:'2026-11-03',format:'DOCX'}];const clarify='Which workshop and session date are you preparing for? What format are you looking for, and where have you already tried to find the guide? Please also tell us which preparation instruction you need help locating.';const matched='The authorized preparation resource listed for Workshop B on November 3, 2026 is GuideB in DOCX format. Please confirm whether it opens in the format you need and whether it answers your preparation question. If it does not, tell us what remains unclear so we can route that request appropriately.';const mismatch='The request is for Workshop B on November 3, 2026 in PDF format. The authorized list currently supplies GuideB as DOCX. Please confirm whether an authorized PDF alternative is available and how it may be provided. No alternative has been promised to the customer.';function match(w,d,f){if(!w||!d||!f)return {kind:'clarify'};const r=resources.find(x=>x.workshop===w&&x.date===d);return !r?{kind:'unlisted'}:r.format!==f?{kind:'mismatch',resource:r}:{kind:'match',resource:r};}function update(){const w=$('workshop').value,d=$('session-date').value,f=$('format').value,m=match(w,d,f);let draft=clarify,title='Clarification draft';if(m.kind==='match'){title='Matched-resource review draft';draft=w==='B'?matched:'The authorized preparation resource listed for Workshop A on October 20, 2026 is GuideA in PDF format. Please confirm whether it opens in the format you need and whether it answers your preparation question. If it does not, tell us what remains unclear so we can route that request appropriately.';}else if(m.kind==='mismatch'){title='Escalation draft · alternative not promised';draft=w==='B'&&f==='PDF'?mismatch:'The requested format is '+f+'. The authorized list supplies '+m.resource.id+' as '+m.resource.format+'. Ask the authorized role [TO CONFIRM] whether an approved alternative exists. No alternative has been promised.';}else if(m.kind==='unlisted'){title='No authorized match';draft='No resource is listed for Workshop '+w+' on '+d+'. Ask the authorized resource owner [TO CONFIRM] to verify the session and resource. Do not promise a resource or format.';}text('draft-title',title);text('draft',draft);$('draft-text').value=draft;text('ticket-state',m.kind==='clarify'?'Clarification required':m.kind==='match'?'Resource matched · draft only':'Authorized review required');text('match-evidence',m.resource?m.resource.id+' · '+m.resource.date+' · '+m.resource.format+' · location and version not supplied.':m.kind==='clarify'?'Missing workshop, session date or format blocks matching. No resource has been selected.':'No entry in the authorized list.');const sent=$('sent-evidence').value.trim(),opens=$('opens').value,answers=$('answers').value;let state=!sent?'Draft only — no actual send evidence recorded.':!opens||!answers?'Awaiting confirmation — sending alone does not establish resolution.':opens==='no'||answers==='no'?'Further support needed — record the remaining issue and route it to an authorized owner.':'Both customer confirmations recorded — review the actual evidence and remaining question before any closure in the service system.';if(m.kind!=='match'&&sent)state+=' The request still requires authorized resource review.';text('follow-state',state);$('ticket-text').value='Q1 — local draft record\nWorkshop: '+(w||'[unknown]')+'\nSession date: '+(d||'[unknown]')+'\nExpected format: '+(f||'[unknown]')+'\nAlready tried: '+($('tried').value||'[not supplied]')+'\nInstruction: '+($('instruction').value||'[not supplied]')+'\nListed resource: '+(m.resource?.id||'[none matched]')+'\nVersion / location: '+($('resource-version').value||'[unverified]')+'\nDraft:\n'+draft+'\nActual send evidence: '+(sent||'[none supplied]')+'\nOpens: '+(opens||'[no response]')+'\nAnswers question: '+(answers||'[no response]')+'\nRemaining question / response: '+($('remaining').value||'[not supplied]')+'\nEscalation owner: '+($('escalation-owner').value||'[TO CONFIRM]')+'\nAccepted next step: '+($('accepted-step').value||'[not supplied]')+'\nReturn timing: '+($('return-timing').value||'[not supplied]')+'\nState: '+state;}['workshop','format','opens','answers'].forEach(k=>bind(k,update,'change'));['session-date','tried','instruction','resource-version','escalation-owner','accepted-step','return-timing','sent-evidence','remaining'].forEach(k=>bind(k,update));function scenario(f){$('workshop').value='B';$('session-date').value='2026-11-03';$('format').value=f;['sent-evidence','opens','answers','remaining','resource-version','escalation-owner','accepted-step','return-timing'].forEach(k=>$(k).value='');update();}on('scenario-match',()=>scenario('DOCX'));on('scenario-mismatch',()=>scenario('PDF'));on('reset',()=>{['workshop','session-date','format','tried','instruction','resource-version','escalation-owner','accepted-step','return-timing','sent-evidence','opens','answers','remaining'].forEach(k=>$(k).value='');update();});on('select-draft-text',()=>selectText('draft-text'));on('select-ticket-text',()=>selectText('ticket-text'));update();globalThis.app={match,get:()=>match($('workshop').value,$('session-date').value,$('format').value)};</script></body></html>