Seek the next answer

HTML for this example

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"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data:; base-uri 'none'; form-action 'none'"><title>Seek the next answer</title><style>
*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:#f3f4f5;color:#202c38;font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:1040px;margin:auto;padding:28px}header{border-top:5px solid var(--accent);padding:18px 0 14px}h1{font-size:clamp(25px,4vw,38px);line-height:1.16;letter-spacing:-.035em;margin:10px 0 14px;max-width:850px}h2{font-size:20px;line-height:1.35;margin:0 0 12px}h3{font-size:17px;margin:0}p{margin:8px 0 14px}small,.eyebrow{font-size:12px;letter-spacing:.06em;font-weight:650}.eyebrow{display:block;color:#566474}#page-lead{font-size:18px;max-width:850px}.fiction{display:inline-block;background:#e6e9ed;padding:4px 9px;font-size:12px;border-radius:4px;margin:0 0 12px}.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:16px 0}.pair>*{min-width:0}.paper{padding:18px 20px;background:#fff;border:1px solid #d5dce3;border-radius:5px}.paper p{margin-bottom:0}.note,.warning{padding:15px 18px;background:#e8edf2;border-left:4px solid var(--accent);margin:16px 0}.warning{background:#fff2db;border-color:#916120}.note p,.warning p{margin:5px 0 0}.switch{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 16px}button,select,input{font:inherit}button{padding:10px 14px;border:1px solid #9aa9b6;border-radius:5px;background:#fff;color:#26384a;cursor:pointer;min-height:44px}button:hover{background:#e9eef3}button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #bd6b00;outline-offset:3px}input,select{padding:9px;width:100%;border:1px solid #8795a3;background:#fff;border-radius:4px;min-width:0;min-height:44px}.select-label{display:block;max-width:390px}label{font-size:14px;font-weight:600}.views{min-width:0}.panel{padding:4px 0}.panel>.paper{margin:12px 0}[hidden]{display:none!important}details{background:#fff;border:1px solid #cbd4dd;border-radius:5px;margin:10px 0}summary{padding:14px 16px;cursor:pointer;font-weight:650;min-height:48px}.detail-body{padding:0 18px 18px}.detail-body p:last-child{margin-bottom:0}.pill{font-size:12px;display:inline-block;padding:4px 9px;background:#e9edf1;border-radius:5px}.timeline details{border-left:4px solid var(--accent)}.agenda{margin-top:26px;border-top:1px solid #b9c4ce;padding-top:20px}.total{font:13px system-ui;display:inline-block;float:right;color:#526273}.agenda ol,.program{list-style:none;padding:0;margin:0}.agenda li{display:grid;grid-template-columns:68px 1fr 55px;gap:10px;padding:10px 0;border-bottom:1px solid #d8dfe5;align-items:baseline}.time{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:700}.agenda small{font-size:12px;letter-spacing:0;font-weight:400;text-align:right}.program li{display:grid;grid-template-columns:65px 1fr;gap:12px;padding:15px 0;border-bottom:1px solid #cad4dd}.program p{margin:5px 0 0}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:15px 0}.sticky{padding:20px;background:#ffedaa;border-bottom:3px solid #d8c679;transform:rotate(-1deg)}.sticky:nth-child(2){background:#e7edd0;transform:rotate(1deg)}.sticky:nth-child(3){background:#f1dfd2}.sticky p{font-size:18px}.handoff{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#c2ccd5;border:1px solid #c2ccd5;margin:16px 0}.handoff article{background:#fff;padding:20px}.handoff h2{margin:10px 0}.map{margin:0;padding:14px;background:#fff;border:1px solid #cbd4dd}.map figcaption{font-size:13px;font-weight:650}.map svg{width:100%;height:auto;background:#f5f1e8;margin-top:8px}.map text{font:16px system-ui;fill:#263646}.blank{border-bottom:1px dashed #97a5b3;padding:14px 0;color:#536170}.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));background:#fff;border:1px solid #cad4dd;margin:16px 0}.metrics article{padding:17px;border-right:1px solid #e1e6eb}.metrics strong{display:block;font-size:28px;letter-spacing:-.04em;color:var(--accent)}.metrics span{font-size:13px;color:#526273}.capacity{padding:12px 0;background:#dbe3e9;margin:18px 0}.capacity div{padding:10px;background:var(--accent);color:#fff;max-width:100%}.capacity span{display:block;padding:8px 12px}.meeting-bars{border-left:5px solid var(--accent);padding:10px 18px;background:#fff}.register-item{border-top:3px solid var(--accent);background:#fff;padding:20px;margin:14px 0}.register-heading{display:flex;justify-content:space-between;gap:14px;align-items:start}.register-heading .pill{flex-shrink:0}.response{background:#edf1f5;padding:12px 16px;margin-top:10px}.response p{margin:5px 0 0}.time-entry{border:1px solid #cbd4dd;background:#fff;padding:18px;margin:18px 0;min-width:0}.time-entry legend{font-weight:700;padding:0 8px}.input-grid{display:grid;grid-template-columns:1fr 1fr 125px;gap:12px}.input-grid input{display:block;margin-top:6px}.time-entry p{margin:14px 0 0}table{border-collapse:collapse;width:100%;background:#fff;margin:14px 0;font-size:14px}th,td{text-align:left;vertical-align:top;padding:13px 15px;border-bottom:1px solid #d6dde4;overflow-wrap:anywhere}th{background:#e6ecf1;font-size:12px}.field{display:none}footer{border-top:1px solid #bdc8d2;margin-top:28px;padding:18px 0 0;color:#526170;font-size:13px}a{color:var(--accent)}.empty{padding:20px;border:1px dashed #98a6b3}body{--accent:#314f6c}body.sand{--accent:#745738;background:#f6f3ec;color:#302b26}.sand header{border-color:#745738}.sand .paper{background:#fffdfa}.sand .note{background:#ede7dc}.sand h1{font-family:Georgia,serif;letter-spacing:-.025em}.sand .time{color:#745738}body.plum{--accent:#685375;background:#f3f0f5}.plum .note{background:#eae3ef}@media(max-width:720px){main{padding:20px}.pair{gap:12px}.board{grid-template-columns:1fr}.handoff{grid-template-columns:1fr}.input-grid{grid-template-columns:1fr 1fr}.input-grid label:last-child{grid-column:1/-1}.register-heading{display:block}}@media(max-width:520px){main{padding:16px}.pair{grid-template-columns:1fr;gap:12px}h1{font-size:27px}#page-lead{font-size:17px}.metrics{grid-template-columns:1fr 1fr}.metrics strong{font-size:25px}.input-grid{grid-template-columns:1fr}.agenda li{grid-template-columns:54px 1fr 44px;gap:7px}.program li{grid-template-columns:52px 1fr}.total{float:none;margin-left:4px}.paper{padding:16px}.switch button{flex:1 1 auto}thead{display:none}table,tbody,tr,td{display:block;width:100%}tr{padding:8px 12px;border-bottom:1px solid #b9c5cf}td{padding:6px 0;border:0}.field{display:block;font-size:11px;font-weight:700;color:#526273;margin-bottom:2px}.detail-body{padding:0 14px 14px}}@media print{body{background:#fff}main{padding:0}.switch{display:none}.panel[hidden]{display:block!important}details{break-inside:avoid}button{display:none}}
</style></head><body class="ink"><main><header><span class="eyebrow">EXCEL REGISTER SNAPSHOT · AS OF OCT 20, 2026</span><h1>Seek the next answer</h1><p id="page-lead"><strong>R01 overdue for review.</strong> This flag does not mean approval failed. Rating definitions are not supplied.</p><span class="fiction">Original fictional example · local reading copy</span></header><div id="risk-summary" class="metrics"></div><div class="switch" role="group" aria-label="Risk view"><button data-risk="All" aria-pressed="true">All risks</button><button data-risk="Overdue" aria-pressed="false">Overdue review</button><button data-risk="Unknown" aria-pressed="false">Unknown likelihood</button><button data-risk="Proposed" aria-pressed="false">Proposed responses</button><button data-risk="Completed" aria-pressed="false">Completed responses</button></div><p id="risk-message" role="status"></p><div id="risk-rows"></div><aside class="warning"><strong>Workbook remains authoritative</strong><p>Retain supplied High/Medium/Unknown labels. No numeric scores or inferred probabilities. If an uncertain event has occurred, record an issue through the team’s issue process.</p></aside><footer>Use this copy to prepare the discussion. Actual decisions, observations, approvals and corrections belong in the maintained Excel workbook. No automatic collection or synchronization.</footer></main><script>
document.querySelectorAll('[data-view]').forEach(button=>button.addEventListener('click',()=>{
 document.querySelectorAll('[data-view]').forEach(b=>b.setAttribute('aria-pressed',String(b===button)));
 document.querySelectorAll('.panel').forEach(p=>p.hidden=p.id!==button.dataset.view);
}));
const esc=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));const metric=(n,label)=>'<article><strong>'+esc(n)+'</strong><span>'+esc(label)+'</span></article>';const grid=(heads,rows)=>'<table><thead><tr>'+heads.map(h=>'<th scope="col">'+esc(h)+'</th>').join('')+'</tr></thead><tbody>'+rows.map(r=>'<tr>'+r.map((v,i)=>'<td><span class="field">'+esc(heads[i])+'</span>'+esc(v)+'</td>').join('')+'</tr>').join('')+'</tbody></table>';
const SAMPLE_ATTENDANCE=Array.from({length:9},(_,i)=>({id:'P'+String(i+1).padStart(2,'0')+'-V1',session:'V1',scheduled:i<8,status:i<5?'Present':i===5?'Late':i===6?'Absent':i===7?'Unknown':'Not scheduled'}));
const SAMPLE_TIMES=[{id:'T01',start:'2026-10-12T09:00',end:'2026-10-12T17:30',break:30},{id:'T02',start:'2026-10-13T22:00',end:'2026-10-14T02:00',break:15},{id:'T03',start:'2026-10-14T09:00',end:'',break:30}];
const SAMPLE_RISKS=[{id:'R01',event:'Final content approval may arrive after launch cutoff',evidence:'Approval request unanswered',likelihood:'High',impact:'High',owner:'Elena',review:'2026-10-19',response:'Ask approver for a decision; prepare scope option for project lead',state:'Proposed'},{id:'R02',event:'Volunteer may be unavailable for launch checks',evidence:'Availability is an assumption',likelihood:'Medium',impact:'Medium',owner:'Marcus',review:'2026-10-22',response:'Confirm availability and identify cover for agreed checks',state:'Proposed'},{id:'R03',event:'Backup venue may not be available',evidence:'No confirmation supplied',likelihood:'Unknown',impact:'Medium',owner:'Dana',review:'2026-10-21',response:'Ask venue contact to confirm booking status',state:'Proposed'}];
const SAMPLE_QUOTES=[{job:'J01',id:'Q01-R1',amount:900,sent:'2026-10-06',expiry:'2026-10-20',state:'Sent',note:'No response recorded. Ask about Q01-R1, sent October 6 for $900, valid through October 20. Q01-R2 is an unsent draft; discuss separately.'},{job:'J01',id:'Q01-R2',amount:1050,sent:'',expiry:'',state:'Draft',note:'Proposed extra scope. Not sent. Do not replace the historical $900 offer.'},{job:'J02',id:'Q02-R1',amount:600,sent:'',expiry:'',state:'Draft',note:'Confirm scope before sending.'},{job:'J03',id:'Q03-R1',amount:1200,sent:'2026-10-02',expiry:'2026-10-16',state:'Accepted',note:'Fictional acceptance record A03 supplied. Invoice reference NOT SUPPLIED; payment NOT SUPPLIED.'},{job:'J04',id:'Q04-R1',amount:450,sent:'2026-10-01',expiry:'2026-10-10',state:'Expired',note:'No acceptance recorded. Decide whether a new offer is appropriate. Expiry is not rejection.'}];
function duplicate(rows){return rows.some((r,i)=>rows.findIndex(q=>q.id===r.id)!==i)}
function attendance(rows,session){const r=rows.filter(x=>x.session===session);if(duplicate(r))return {error:'Duplicate person-session key: reconcile before totals'};const scheduled=r.filter(x=>x.scheduled),attended=scheduled.filter(x=>['Present','Late'].includes(x.status)).length,unknown=scheduled.filter(x=>x.status==='Unknown').length;return {rows:r,scheduled:scheduled.length,attended,unknown,rate:scheduled.length?attended/scheduled.length*100:null};}
function timestamp(value){if(!/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(value))return NaN;const [date,time]=value.split('T'),[y,m,d]=date.split('-').map(Number),[h,min]=time.split(':').map(Number),dt=new Date(Date.UTC(y,m-1,d,h,min));if(dt.getUTCFullYear()!==y||dt.getUTCMonth()!==m-1||dt.getUTCDate()!==d||h>23||min>59)return NaN;return dt.getTime()+4*3600000;}
function timeRow(r){if(!r.start||!r.end)return {error:!r.start?'Start needed':'End needed'};const a=timestamp(r.start),b=timestamp(r.end);if(!Number.isFinite(a)||!Number.isFinite(b))return {error:'Invalid full date/time'};const elapsed=(b-a)/60000;if(elapsed<0)return {error:'End before start'};if(r.break===''||r.break==null)return {error:'Break needed'};const br=Number(r.break);if(!Number.isFinite(br)||br<0||!Number.isInteger(br))return {error:'Break must be whole nonnegative minutes'};if(br>elapsed)return {error:'Break exceeds elapsed time'};return {elapsed,net:elapsed-br};}
function times(rows){if(duplicate(rows))return {error:'Duplicate row ID'};const checked=rows.map(r=>({...r,...timeRow(r)}));return {rows:checked,total:checked.reduce((a,r)=>a+(r.error?0:r.net),0),complete:checked.filter(r=>!r.error).length};}
function duration(n){return Math.floor(n/60)+'h '+n%60+'m';}
function dateFlag(d,asof){if(!d)return 'Unknown date';if(!/^\d{4}-\d{2}-\d{2}$/.test(d)||!Number.isFinite(timestamp(d+'T00:00')))return 'Invalid date';return d<asof?'Overdue':d===asof?'Due today':'Upcoming';}
function risks(rows,filter,asof){if(duplicate(rows))return {error:'Duplicate risk ID'};return {rows:rows.filter(r=>filter==='All'||filter==='Overdue'&&dateFlag(r.review,asof)==='Overdue'||filter==='Unknown'&&r.likelihood==='Unknown'||filter==='Proposed'&&r.state==='Proposed')};}
function quotes(rows,filter){if(duplicate(rows))return {error:'Duplicate quote/revision key'};return {rows:rows.filter(r=>filter==='All'||r.state===filter),jobs:new Set(rows.map(r=>r.job)).size,revisions:rows.length};}
globalThis.ExampleModel={attendance,timeRow,times,duration,dateFlag,risks,quotes,SAMPLE_ATTENDANCE,SAMPLE_TIMES,SAMPLE_RISKS,SAMPLE_QUOTES};

function renderRisks(filter='All'){const r=risks(SAMPLE_RISKS,filter,'2026-10-20');document.getElementById('risk-summary').innerHTML=metric(3,'Unique risks')+metric(1,'Overdue review')+metric(1,'Unknown likelihood');document.getElementById('risk-message').textContent=r.rows.length+' matching risks · '+filter+' · all responses proposed';document.getElementById('risk-rows').innerHTML=r.rows.map(x=>'<article class="register-item"><div class="register-heading"><h2>'+x.id+' · '+esc(x.event)+'</h2><span class="pill">'+dateFlag(x.review,'2026-10-20')+'</span></div><p><strong>Evidence:</strong> '+esc(x.evidence)+'</p><p><strong>Supplied labels:</strong> '+x.likelihood+' likelihood / '+x.impact+' impact · definitions NOT SUPPLIED</p><div class="response"><strong>'+x.owner+' · '+x.review+'</strong><p>Proposed: '+esc(x.response)+'</p></div></article>').join('')||'<p>No matching risks.</p>';document.querySelectorAll('[data-risk]').forEach(b=>b.setAttribute('aria-pressed',String(b.dataset.risk===filter)));}document.querySelectorAll('[data-risk]').forEach(b=>b.addEventListener('click',()=>renderRisks(b.dataset.risk)));renderRisks();</script></body></html>