Workshop issue review: fictional worked example and reusable blank template.

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>Workshop issue review</title><style>:root{--accent:#6244a0;--paper:#fbf9fe}*{box-sizing:border-box}body{margin:0;color:#202b32;background:var(--paper);font:16px/1.55 Arial,sans-serif}main{max-width:1060px;margin:auto;padding:34px 40px 45px}.eyebrow{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 10px}h1{font:500 clamp(28px,4.2vw,42px)/1.12 Georgia,serif;letter-spacing:-.025em;margin:0 0 14px;max-width:850px}h2{font-size:20px;line-height:1.3;margin:0 0 12px}h3{font-size:12px;line-height:1.4;letter-spacing:.03em;color:var(--accent);margin:0 0 6px}p{margin:0 0 12px}.context,small{color:#5f6d76;font-size:13px}.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 26px}button,select{font:inherit;font-size:13px;border:1px solid #c3cbd0;background:white;border-radius:5px;padding:9px 14px;color:#26323a;cursor:pointer}button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:white}button:focus-visible,select:focus-visible{outline:3px solid #d5ad29;outline-offset:3px}[hidden]{display:none!important}section{min-width:0}main>header{border-bottom:1px solid #d7dbdc;padding-bottom:2px}main>footer{border-top:1px solid #d7dbdc;margin-top:28px;padding-top:13px;font-size:12px;color:#66747b}.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}.pair{padding:14px 0;border-bottom:1px solid #dfe2e2;break-inside:avoid}.pair p:last-child{margin:0}.note{margin:26px 0 0;padding:16px 18px;border-left:3px solid var(--accent);background:#fff;font-size:14px}.number{font:600 16px/1 Arial;color:var(--accent)}.risk{display:grid;grid-template-columns:65px 1fr;gap:18px;padding:23px 0;border-bottom:1px solid #cfc9bd}.risk-id{font-size:15px;font-weight:700;color:var(--accent)}.risk-id span{display:block;margin-top:9px;font-size:10px;letter-spacing:.08em}.statement{font-size:18px}.action{margin-top:18px;background:#f3eee6;padding:0 18px}.status{font-size:12px;color:var(--accent);margin:16px 0 0}.column-label,.compare-row{display:grid;grid-template-columns:100px 1fr 1fr}.column-label{padding:15px 0;border-bottom:3px solid var(--accent);align-items:end}.column-label h2{font-size:22px;margin:0;padding-left:18px}.column-label span{font-size:10px;color:#66747b}.compare-row h3,.compare-row p{padding:18px;margin:0;border-bottom:1px solid #d0d9e2}.compare-row h3{padding-left:0;color:#485c6d}.compare-row p{border-left:1px solid #d0d9e2}.mobile-label{display:none}.decision{padding:22px;background:#edf2f8;margin:24px 0}.decision p{margin:0}.passage{padding-left:25px;margin:0}.passage li{padding:0 0 15px 7px}.passage li::marker{font-size:12px;color:var(--accent);font-weight:700}.chain{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:20px 0}.chain>div{padding:18px;border:1px solid #dfd7c7}.chain .number{display:block;margin-bottom:15px}.chain .arrow{color:var(--accent);font-size:25px;margin:3px 0}.step{display:grid;grid-template-columns:42px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid #c9d6d2}.step .number{padding-top:5px}.step h2{margin-bottom:14px}.expected strong,.stop strong{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}.stop{font-size:14px;background:#fff0df;border-left:3px solid #b77930;padding:10px 14px}.issue-filter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;margin-bottom:20px}.issue-filter output{margin-left:auto;color:var(--accent)}.issue{border:1px solid #d5cfe4;border-radius:6px;padding:22px;margin:20px 0;background:white}.issue-heading{display:flex;justify-content:space-between;gap:10px;margin-bottom:12px;font:700 12px Arial;color:var(--accent)}.tag{font-weight:400;background:#eee9f6;padding:4px 7px;border-radius:3px}.closure{font-size:13px;padding-top:16px;color:#785329}.student-voice{font:italic 24px/1.35 Georgia,serif;color:var(--accent);margin:0 0 18px}.goal{max-width:800px}.opportunities{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:20px}.opportunities>div{border:1px solid #cadde2;padding:18px}.opportunities .number{display:block;margin-bottom:12px}.story-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:35px}.story-layout>.story-map{border-left:1px solid #e1d2c4;padding-left:26px}.source-sheet{border-top:3px solid var(--accent)}.sample{margin-top:22px}.sample blockquote{margin:0;padding:20px;background:#f8ecef;font:18px/1.6 Georgia,serif}.revision{padding:5px 20px;background:#eef4ee;margin:22px 0}.rubrics{margin-top:30px}.criterion{border-top:1px solid #cbd1db;padding:18px 0}.criterion>h3{font-size:16px}.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.levels p{font-size:13px;margin:0}.levels strong{display:block;font-size:11px;margin-bottom:5px;color:var(--accent)}.sources{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.sources>h2{grid-column:1/-1}.sources .pair{padding:18px;background:#fff;border:1px solid #d2d9e6}.sources .pair p{font-size:14px}.thread{max-width:800px}.post{padding:0 18px;border-left:3px solid #a897c3}.reply{margin:12px 0 18px 25px;padding:0 18px;border-left:3px solid var(--accent)}.reply-switch{margin:20px 0 0 25px;display:flex;gap:8px}.feedback{font-size:13px;color:var(--accent);padding-bottom:15px}.write-space{height:62px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 29px,#d5d9dc 30px,#d5d9dc 31px)}.blank-fields>section{margin:22px 0}.blank-fields h3{font-size:14px}.empty-chart{border:1px solid #c4cbd1;margin-top:20px}.empty-chart .two{gap:0}.empty-chart .two>div{padding:20px;border-right:1px solid #c4cbd1}.empty-chart .write-space{height:340px}.mode-label{font-size:11px;color:#63717a;margin:0 0 12px}body[data-kind=story],body[data-kind=rubric]{font-family:Georgia,serif}body[data-kind=story] h3,body[data-kind=rubric] h3{font-family:Arial,sans-serif}.comparison-table{width:100%;border-collapse:collapse;table-layout:fixed}.comparison-table caption{text-align:left;font-size:12px;color:#63717a;margin-bottom:10px}.comparison-table th,.comparison-table td{text-align:left;vertical-align:top;padding:16px 12px;border-bottom:1px solid #d0d9e2;overflow-wrap:anywhere}.comparison-table thead th{border-bottom:3px solid var(--accent);color:var(--accent)}.comparison-table th:first-child{width:23%;font-size:12px}.comparison-table tbody td{font-size:15px}@media(max-width:620px){main{padding:22px 18px 32px}h1{font-size:30px}.two,.story-layout,.levels,.chain,.sources,.opportunities{grid-template-columns:1fr}.sources>h2{grid-column:auto}.risk{grid-template-columns:1fr;gap:10px}.risk-id span{display:inline;margin-left:12px}.risk .two{gap:0}.story-layout>.story-map{border-left:0;border-top:1px solid #e1d2c4;padding:20px 0 0}.column-label{grid-template-columns:1fr 1fr}.column-label span{display:none}.column-label h2{padding-left:0;font-size:20px}.compare-row{grid-template-columns:1fr 1fr}.compare-row h3{grid-column:1/-1;border:0;padding:12px 0 0;font-size:11px}.compare-row p{border-left:0;padding:10px 10px 14px 0;font-size:14px}.compare-row p:last-child{padding-left:12px;border-left:1px solid #d0d9e2}.step{grid-template-columns:25px 1fr;gap:10px}.issue{padding:16px}.issue-heading{align-items:start}.levels p{padding:8px 0;border-bottom:1px solid #eee}.note{padding:13px}.empty-chart .two{grid-template-columns:1fr 1fr}.empty-chart .two>div{padding:12px}.empty-chart .write-space{height:240px}}@media print{body{background:white}main{max-width:none;padding:0}.toolbar,.issue-filter,.reply-switch,footer{display:none!important}.pair,.step,.criterion,.risk,.issue{break-inside:avoid}.two,.story-layout{grid-template-columns:1fr 1fr}.levels{grid-template-columns:repeat(3,1fr)}button{display:none}}</style></head><body data-kind="issues"><main><header><p class="eyebrow">Fictional worked example · Reusable template</p><h1>Workshop issue review</h1><p class="context" id="review-date">Review date: November 6, 2026</p><p>Review the next action, the decision needed, and the closure evidence.</p></header><nav class="toolbar" aria-label="Choose version"><button type="button" data-mode="worked" aria-pressed="true">Worked example</button><button type="button" data-mode="blank" aria-pressed="false">Blank template</button></nav><div id="worked"><section class="issue-filter"><label for="status">Show issues</label><select id="status"><option value="all">All open issues</option><option value="In progress">In progress</option><option value="Waiting for decision">Waiting for decision</option></select><output id="issue-count" aria-live="polite">2 issues</output></section><section class="issue" data-status="In progress"><div class="issue-heading"><span>ISS-01</span><span class="tag">In progress</span></div><h2>Registration shows the old venue</h2><p class="context">Raised November 4 · High: registration is open and the address is wrong now.</p><p>Readers may plan travel to the wrong location.</p><div class="two"><div class="pair"><h3>Owner / next action</h3><p>Avery, registration lead. Replace the address; compare the public page with the confirmed booking.</p></div><div class="pair"><h3>Due / decision</h3><p>November 4, before the next invitation. No decision needed: booking is confirmed.</p></div></div><div class="closure">Closure evidence not yet recorded.</div></section><section class="issue" data-status="Waiting for decision"><div class="issue-heading"><span>ISS-02</span><span class="tag">Waiting for decision</span></div><h2>Presentation connector does not fit</h2><p class="context">Raised November 4 · Medium in this example: a loan laptop is available, pending speaker approval.</p><p>The planned presentation setup cannot be used as tested.</p><div class="two"><div class="pair"><h3>Owner / next action</h3><p>Jordan, event producer. Ask the speaker to test the presentation on the loan laptop.</p></div><div class="pair"><h3>Due / decision</h3><p>November 6. Speaker confirms the alternative setup or requests another arrangement.</p></div></div><div class="closure">Closure evidence not yet recorded.</div></section><aside class="note">Do not close a row because someone proposed a fix. Record the checked outcome. If earlier invitations contained the wrong address, decide who needs a separate correction.</aside></div><div id="blank" hidden><p class="mode-label">BLANK WORKING COPY · Replace the fields for your task</p><section class="blank-fields"><p class="context">Use your own task and evidence. Leave unconfirmed details unfilled.</p><section><h3>01 / Issue ID / date raised</h3><div class="write-space" aria-label="Space to write Issue ID / date raised"></div></section><section><h3>02 / Observed problem</h3><div class="write-space" aria-label="Space to write Observed problem"></div></section><section><h3>03 / Project impact</h3><div class="write-space" aria-label="Space to write Project impact"></div></section><section><h3>04 / Priority and reason</h3><div class="write-space" aria-label="Space to write Priority and reason"></div></section><section><h3>05 / Owner</h3><div class="write-space" aria-label="Space to write Owner"></div></section><section><h3>06 / Next action</h3><div class="write-space" aria-label="Space to write Next action"></div></section><section><h3>07 / Action due</h3><div class="write-space" aria-label="Space to write Action due"></div></section><section><h3>08 / Decision or help needed</h3><div class="write-space" aria-label="Space to write Decision or help needed"></div></section><section><h3>09 / Status / last update</h3><div class="write-space" aria-label="Space to write Status / last update"></div></section><section><h3>10 / Closure evidence / date</h3><div class="write-space" aria-label="Space to write Closure evidence / date"></div></section></section></div><footer>Original illustrative material. Keep official records in your approved system.</footer></main><script>const modes=document.querySelectorAll("[data-mode]");modes.forEach(b=>b.addEventListener("click",()=>{const mode=b.dataset.mode;modes.forEach(x=>x.setAttribute("aria-pressed",String(x===b)));document.querySelector("#worked").hidden=mode!=="worked";document.querySelector("#blank").hidden=mode!=="blank";}));document.querySelectorAll("[data-reply]").forEach(b=>b.addEventListener("click",()=>{document.querySelectorAll("[data-reply]").forEach(x=>x.setAttribute("aria-pressed",String(x===b)));document.querySelector("#reply-a").hidden=b.dataset.reply!=="a";document.querySelector("#reply-b").hidden=b.dataset.reply!=="b";}));const filter=document.querySelector("#status");if(filter)filter.addEventListener("change",()=>{let n=0;document.querySelectorAll(".issue").forEach(x=>{x.hidden=filter.value!=="all"&&x.dataset.status!==filter.value;if(!x.hidden)n++});document.querySelector("#issue-count").textContent=n+" issue"+(n===1?"":"s")});</script></body></html>