Two accepted. Which denominator?

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html>
<html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Two accepted. Which denominator?</title><style>
:root{color-scheme:light;--accent:#325f70;--wash:#e3f0f3;--ink:#202d3b;--paper:#fffdf9}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#eeeae2;font:17px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif}main{max-width:980px;margin:auto;padding:28px 24px 40px}header{border-top:6px solid var(--accent);padding:20px 0 24px}.kicker{color:var(--accent);font-weight:750;letter-spacing:.06em;margin:0 0 8px}h1{font:700 clamp(30px,5vw,46px)/1.15 Georgia,serif;margin:0 0 14px;max-width:780px}h2{font-size:23px;line-height:1.3;margin:0 0 14px}h3{font-size:19px;margin:12px 0 8px}p{margin:0 0 16px}button,input,textarea,select{font:inherit}button{background:white;border:1px solid #87949b;color:var(--ink);border-radius:8px;padding:11px 16px;min-height:48px;cursor:pointer;font-weight:650}button:hover{background:var(--wash)}button[aria-pressed=true],button.primary{background:var(--accent);color:white;border-color:var(--accent)}:focus-visible{outline:3px solid #b45a1e;outline-offset:3px}label{display:block;font-weight:650;margin:14px 0 6px}input:not([type=checkbox]):not([type=radio]),textarea,select{display:block;width:100%;min-width:0;max-width:100%;border:1px solid #80909b;border-radius:7px;padding:11px;background:white;color:var(--ink)}input[type=checkbox],input[type=radio]{width:21px;height:21px;accent-color:var(--accent)}textarea{resize:vertical}.panel{background:var(--paper);border:1px solid #ccd2d1;border-radius:12px;padding:24px;margin-bottom:20px}.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.two>.panel{margin:0}.two{margin-bottom:20px}.actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.result{padding:18px;background:var(--wash);border-left:5px solid var(--accent);margin-top:18px;white-space:pre-line;overflow-wrap:anywhere}.note{color:#465565;font-size:16px}.strip{padding:18px;background:var(--wash);border-radius:8px;margin-bottom:18px}table{border-collapse:collapse;width:100%;font-size:16px;table-layout:fixed}th,td{text-align:left;padding:10px 8px;border-bottom:1px solid #cbd0d1;overflow-wrap:anywhere;vertical-align:top}th{background:var(--wash)}ol,ul{padding-left:24px}li+li{margin-top:8px}pre{font-size:16px;white-space:pre-wrap;overflow-wrap:anywhere}code{font-size:16px}.grid{display:grid;gap:5px;max-width:440px}.grid button{padding:5px;min-width:0}.grid input{padding:5px!important;text-align:center;font-weight:750}blockquote{font:500 26px/1.5 Georgia,serif;margin:16px 0}footer{font-size:16px;color:#465565;margin-top:22px}[hidden]{display:none!important}svg{display:block;max-width:100%;height:auto}mark{background:#e0efad;color:var(--ink)}@media(max-width:560px){main{padding:18px 12px 28px}.panel{padding:20px 16px}.two{grid-template-columns:minmax(0,1fr)}h1{font-size:32px}.actions button{flex:1 1 135px}th,td{padding:8px 5px}.grid button{min-height:40px}blockquote{font-size:24px}}
</style></head><body><main><header><p class="kicker">COHORT WORKBENCH · MEMBERSHIP BEFORE SHAPE</p><h1>Two accepted. Which denominator?</h1><p>Practice cohort V1 · fictional IDs only. Counts come from stage membership; rates and widths answer explicitly labeled questions.</p></header><div class="actions"><button type="button" id="v1">V1</button><button type="button" id="v2">V2</button><button type="button" id="v3">V3</button><button type="button" id="v4">V4</button><button type="button" id="v5">V5</button><button type="button" id="v6">V6</button></div><div class="actions"><button type="button" id="original">From original cohort</button><button type="button" id="previous">From previous stage</button><button type="button" id="reset">Reset V1</button></div><section class="panel"><h2>Cohort validation</h2><div id="status" class="result" role="status" aria-live="polite"></div><div id="ledger" class="result" role="status" aria-live="polite"></div></section><section class="panel"><h2>Counts and retention</h2><div id="heading" class="result" role="status" aria-live="polite"></div><div id="chart"></div><div id="rates"></div></section><footer>Read each rate with its denominator. Bar widths continue to show counts relative to the eligible cohort.</footer><noscript>JavaScript is required for the local controls. The accompanying article contains worked examples.</noscript></main><script>
(()=>{'use strict';const $=id=>document.getElementById(id);
const names=['Eligible','Submitted','Reviewed','Accepted'],ids=n=>Array.from({length:n},(_,i)=>'S'+(i+1));let version=1,view='original';function render(){let sets=[ids(8),ids(6),ids(3),ids(2)];if(version===2)sets[2]=['S1','S2','S9'];if(version===3)sets[3]=ids(4);if(version===4)sets=[ids(8),ids(6),[],[]];if(version===5)sets=[[],[],[],[]];if(version===6)sets[2]=null;const issues=[];sets.forEach((s,i)=>{if(s===null)issues.push(names[i]+' membership missing (unknown count)');else if(i&&sets[i-1]!==null){const out=s.filter(x=>!sets[i-1].includes(x));if(out.length)issues.push(names[i]+' subset mismatch: '+out.join(', '));}});$('ledger').textContent='Practice cohort V'+version+' / '+sets.map((s,i)=>names[i]+': '+(s===null?'UNKNOWN':s.join(', ')||'KNOWN EMPTY')).join(' / ');$('chart').replaceChildren();$('rates').replaceChildren();$('heading').textContent=view==='original'?'Retention from original eligible cohort':'Retention from previous stage';if(issues.length){$('status').textContent='HOLD complete funnel and rates: '+issues.join(' / ');return;}$('status').textContent='Coherent membership chain. Counts: '+sets.map(s=>s.length).join('/')+'. Actual owner/window unfilled.';const total=sets[0].length;sets.forEach((s,i)=>{const count=s.length,den=view==='original'?total:i?sets[i-1].length:null;const rate=den===null?'not applicable (no prior stage)':den===0?count+'/0 = undefined':count+'/'+den+' = '+(100*count/den).toFixed(1)+'%';const row=document.createElement('p');row.textContent=names[i]+': '+count+' / '+rate;$('rates').append(row);const group=document.createElement('div');group.style.margin='14px 0';const label=document.createElement('p');label.textContent=names[i]+' · '+count+' / Count share: '+(total?100*count/total+'% of eligible':'undefined; known empty cohort');group.append(label);if(total){const bar=document.createElement('div');bar.style.cssText='height:30px;background:#325f70;margin:0 auto;width:'+(100*count/total)+'%';bar.setAttribute('aria-label',names[i]+' count '+count);group.append(bar);}$('chart').append(group);});}[1,2,3,4,5,6].forEach(n=>$('v'+n).addEventListener('click',()=>{version=n;render();}));['original','previous'].forEach(id=>$(id).addEventListener('click',()=>{view=id;render();}));$('reset').addEventListener('click',()=>{version=1;view='original';render();});render();
})();
</script></body></html>