Trace two early approaches to the same evidence and inspect what each still needs before detailed design

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>Which concept deserves further design?</title><style>*{box-sizing:border-box}body{margin:0;background:#f5edf0;color:#49313e;font:16px/1.65 system-ui,sans-serif}main{max-width:920px;margin:auto;padding:24px}h1{font-size:clamp(1.8rem,5vw,2.7rem);line-height:1.18}h2{font-size:1.35rem}.eyebrow{font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:#885c73}.panel{background:#fff;border:1px solid #dcc4cf;border-radius:12px;padding:22px;margin:18px 0}.actions{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}button,input,textarea{font:inherit}button{min-height:44px;padding:10px 14px;border:1px solid #96627d;background:#fff;color:#6b3b54;border-radius:7px;cursor:pointer}button[aria-pressed=true],button.primary{background:#804c68;color:#fff}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #297c9f;outline-offset:3px}dt{font-weight:750;margin-top:14px}dd{margin:4px 0}.notice{padding:14px;background:#f7e8ef;border-left:4px solid #ab7691}label{display:block;font-weight:650;margin-top:16px}input,textarea{display:block;width:100%;min-width:0;padding:10px;margin-top:5px;border:1px solid #ac899a;border-radius:6px}textarea{min-height:90px}pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere}[hidden]{display:none!important}@media(max-width:550px){main{padding:16px}.panel{padding:16px}}</style></head><body><main><p class="eyebrow">Before the detailed proposal</p><h1>Which concept deserves further design?</h1><p>Original fictional community advice service. Review the problem before committing to the preferred solution.</p><section class="panel"><h2>The evidence starts small</h2><p><strong>N1:</strong> Posted notice says “Local applicants may attend,” without defining “local.”</p><p>Only the wording ambiguity is documented. Demand size, affected population, travel constraints, and timing barriers are unresearched.</p><div class="actions"><button type="button" id="a" aria-pressed="true">A · Clarify the wording</button><button type="button" id="b" aria-pressed="false">B · Add an evening service</button><button type="button" id="question">Inspect the next questions</button></div><h2 id="approachTitle">Concept A: investigate a clearer eligibility explanation</h2><dl><dt>Core problem and evidence</dt><dd id="problem">N1 leaves “local applicants” undefined. The notice establishes an ambiguity, not its scale or effect.</dd><dt>Strategic approach</dt><dd id="approach">Clarify intended eligibility with the owner, draft an explanation, and investigate reader understanding.</dd><dt>Intended objective</dt><dd id="objective">Intended readers can understand whether the stated eligibility applies. No effect has been demonstrated.</dd><dt>Population and evidence limits</dt><dd>Intended readers; their characteristics and the extent of the issue remain unconfirmed.</dd><dt>Request now</dt><dd id="request">Review whether to investigate this problem and develop the approach further; not fund delivery.</dd></dl><p id="questions" class="notice" role="status">Concept A is closer to N1's documented issue, but still needs clarification and reader evidence. Neither approach is automatically approved.</p></section>
<section class="panel"><h2>What decision is this stage asking for?</h2><div class="actions"><button type="button" id="conceptStage" aria-pressed="true">Concept stage</button><button type="button" id="proposalStage" aria-pressed="false">Later detailed proposal</button></div><p id="stage" class="notice">Concept stage: agree which core problem and broad approach deserve investigation. Retain evidence gaps and the review request.</p></section>
<section class="panel"><h2>Frame your review request</h2><label for="problemInput">Bounded problem · required</label><textarea id="problemInput"></textarea><label for="evidenceInput">Actual evidence and its limits · required</label><textarea id="evidenceInput"></textarea><label for="objectiveInput">Intended objective</label><textarea id="objectiveInput"></textarea><label for="approachInput">Approach and alternative</label><textarea id="approachInput"></textarea><label for="notes">Request now and investigation questions</label><textarea id="notes"></textarea><div class="actions"><button type="button" id="build" class="primary">Build concept record</button><button type="button" id="reset">Reset practice</button></div><p id="notice" class="notice" role="status">Use evidence at its actual scale; keep unknowns open.</p><pre id="output" hidden></pre><div id="resetPanel" hidden><p>Clear the practice concept?</p><button type="button" id="cancel">Keep concept</button> <button type="button" id="confirm">Clear concept</button></div></section><footer><p>Local planning exercise. No funder eligibility score, award, approval, invented budget, or delivery commitment.</p></footer></main><script>
'use strict';const $=s=>document.querySelector(s);let choice='a';const cases={a:['Concept A: investigate a clearer eligibility explanation','N1 leaves “local applicants” undefined. The notice establishes an ambiguity, not its scale or effect.','Clarify intended eligibility with the owner, draft an explanation, and investigate reader understanding.','Intended readers can understand whether the stated eligibility applies. No effect has been demonstrated.','Review whether to investigate this problem and develop the approach further; not fund delivery.','What does the owner intend “local” to mean? Who needs the notice? What reader evidence should be gathered?'],b:['Concept B: investigate an additional evening service','A timing barrier is assumed, not established by N1. The documented evidence concerns eligibility wording.','Proposed additional evening advice service; investigate whether a timing problem exists before detailed design.','Improve access if a relevant timing barrier is established; no effect or demand has been demonstrated.','Review what timing evidence would justify developing this approach. No service delivery or funding approval.','What evidence shows current timing prevents intended users attending? Which other approaches should be considered?']};for(const id of ['a','b'])$('#'+id).addEventListener('click',()=>{choice=id;const d=cases[id];['approachTitle','problem','approach','objective','request'].forEach((key,n)=>$('#'+key).textContent=d[n]);for(const key of ['a','b'])$('#'+key).setAttribute('aria-pressed',String(key===id));$('#questions').textContent=id==='a'?'A matches the documented wording issue more closely, but reader evidence is still needed. Not approved.':'B assumes an unresearched timing barrier. A question for investigation, not automatic rejection or approval.'});$('#question').addEventListener('click',()=>{$('#questions').textContent='Next questions for '+(choice==='a'?'A':'B')+': '+cases[choice][5]});for(const id of ['conceptStage','proposalStage'])$('#'+id).addEventListener('click',()=>{const isConcept=id==='conceptStage';$('#conceptStage').setAttribute('aria-pressed',String(isConcept));$('#proposalStage').setAttribute('aria-pressed',String(!isConcept));$('#stage').textContent=isConcept?'Concept stage: agree which core problem and broad approach deserve investigation. Retain evidence gaps and the review request.':'Later proposal: develop actual scope, staffing, resources, costs, schedule, and evaluation arrangements. None is supplied here. Real reviewer requirements govern what is needed; do not invent details.'});const ids=['problemInput','evidenceInput','objectiveInput','approachInput','notes'];let built=false;for(const id of ids)$('#'+id).addEventListener('input',()=>{$('#output').hidden=true;$('#notice').textContent=built?'Entries changed. Concept record is stale; build again.':'Practice concept changed.';$('#resetPanel').hidden=true});$('#build').addEventListener('click',()=>{const missing=[['problemInput','Bounded problem'],['evidenceInput','Actual evidence and limits']].filter(([id])=>!$('#'+id).value.trim()).map(([,n])=>n);if(missing.length){$('#notice').textContent='Complete: '+missing.join(', ')+'.';$('#output').hidden=true;return}$('#output').textContent='EARLY CONCEPT — not a funded delivery plan\nProblem: '+$('#problemInput').value+'\nEvidence/limits: '+$('#evidenceInput').value+'\nObjective: '+($('#objectiveInput').value||'To clarify')+'\nApproach/alternative: '+($('#approachInput').value||'To investigate')+'\nRequest/questions: '+($('#notes').value||'To develop')+'\nPopulation, demand, budget, and approval: not supplied.';$('#output').hidden=false;$('#notice').textContent='Concept record built. Review its problem and approach before detailed design; no approval implied.';built=true});$('#reset').addEventListener('click',()=>{$('#resetPanel').hidden=false;$('#notice').textContent='Reset requested. Choose whether to keep the concept.'});$('#cancel').addEventListener('click',()=>{$('#resetPanel').hidden=true;$('#notice').textContent='Reset canceled. Concept entries retained.'});$('#confirm').addEventListener('click',()=>{for(const id of ids)$('#'+id).value='';$('#output').hidden=true;$('#output').textContent='';$('#resetPanel').hidden=true;built=false;$('#notice').textContent='Practice concept cleared. N1 and both approaches remain unchanged.'});
</script></body></html>