Marketing and content scenarios
Podcast Open Day pricing plan page

Complete the pricing plans page in the Podcast Open Day scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.
Marketing and content scenariosPricing PlansHTMLCSSJavaScript
With JavaScript enabled, you can edit, run, and save this example. The fixed source is as follows:
<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Podcast Open Day pricing plan page</title>
  <style>
    :root { --ink:#3a2419; --paper:#fbf3df; --accent:#c66a2d; --secondary:#b5c88d; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
    * { box-sizing:border-box; }
    html { min-width:320px; background:var(--paper); }
    body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:"IBM Plex Sans","PingFang SC",sans-serif; background:linear-gradient(color-mix(in srgb,var(--ink) 5%,transparent) 1px,transparent 1px),var(--paper);background-size:100% 36px; }
    button,input,select,textarea { color:inherit; font:inherit; }
    button,[role="button"],input,select,textarea { accent-color:var(--accent); }
    button { cursor:pointer; }
    button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
    [hidden] { display:none !important; }
    @media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
    @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
    .page{width:min(1280px,calc(100% - 24px));margin:auto;padding:28px 0 64px}.mast{display:flex;justify-content:space-between;padding:18px;border:1px solid var(--line);background:color-mix(in srgb,#fff 60%,transparent);gap:18px;margin-bottom:14px}.mast h1{font-family:"IBM Plex Sans","PingFang SC",sans-serif;font-weight:800;font-size:clamp(34px,6vw,66px);letter-spacing:-.045em;margin:0;line-height:1}.eyebrow{display:block;margin-bottom:6px;color:var(--accent);font:800 10px/1 ui-monospace,monospace;letter-spacing:.16em}.intro{max-width:720px;margin:10px 0 0;font-size:14px;line-height:1.6}.scenario{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font-size:12px}.demo{border-radius:14px;box-shadow:0 14px 40px color-mix(in srgb,var(--ink) 11%,transparent);position:relative;min-height:390px;overflow:hidden;padding:24px;background:color-mix(in srgb,var(--paper) 90%,#fff)}@media(max-width:700px){.page{width:calc(100% - 12px);padding-top:12px}.mast{display:grid}.demo{padding:12px}}
    .stack{display:flex;flex-direction:column;gap:18px}.panel{padding:28px;border-left:7px solid var(--accent);background:color-mix(in srgb,var(--secondary) 12%,var(--paper))}.action{min-height:46px;padding:11px 18px;border:0;border-bottom:3px solid var(--ink);background:transparent;font-weight:900}.action.primary,.action.is-active{color:var(--paper);background:var(--ink)}.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}.metric{font:900 clamp(32px,7vw,64px)/1 ui-monospace,monospace}.status{min-height:22px;padding-top:12px;border-top:1px dashed var(--line)}.muted{color:color-mix(in srgb,var(--ink) 62%,transparent)}.chip{display:inline-block;padding:5px 8px;background:var(--secondary)}.meter{height:12px;border:1px solid var(--ink)}.meter>i{display:block;height:100%;background:var(--ink)}
    .composition-split{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:start}.split-note{position:sticky;top:20px;display:grid;gap:14px;padding:18px 12px;border-block:3px double var(--accent);font-size:13px;line-height:1.65}.split-note b{font:900 12px/1 ui-monospace,monospace;letter-spacing:.12em}.split-note span{writing-mode:vertical-rl;min-height:120px;color:color-mix(in srgb,var(--ink) 60%,transparent)}.composition-split .demo{min-width:0}@media(max-width:900px){.composition-split{grid-template-columns:1fr}.split-note{position:static;grid-template-columns:auto 1fr}.split-note span{writing-mode:horizontal-tb;min-height:0}}
    .campaign{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:22px;align-items:stretch}.campaign-copy{display:grid;align-content:center;min-height:350px;padding:clamp(24px,5vw,60px);border-radius:24px;color:var(--paper);background:var(--ink)}.campaign-copy h2{margin:0;font-size:clamp(30px,5vw,58px);line-height:1.05}.campaign-copy p{max-width:560px;line-height:1.7}.campaign-copy .action{border-color:var(--paper);color:var(--paper)}.campaign-copy .primary{border-color:var(--accent)}.pricing{display:grid;align-content:start;gap:10px}.billing{display:flex;justify-content:space-between}.switch{display:flex;gap:8px;align-items:center}.switch i{width:38px;height:22px;border-radius:999px;background:var(--line)}.pricing article{display:grid;grid-template-columns:1fr auto auto;gap:7px;align-items:baseline;padding:16px;border:1px solid var(--line);border-radius:12px}.pricing .featured{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}.pricing strong{font-size:26px}@media(max-width:760px){.campaign{grid-template-columns:1fr}}.workflow-guide{display:grid;grid-template-columns:190px minmax(0,1fr);grid-template-areas:"rail core" "rail evidence";gap:14px 18px}.guide-rail{grid-area:rail;display:grid;align-content:start;gap:15px;padding:18px;border-right:1px solid var(--line)}.guide-rail ol{display:grid;gap:8px;padding:0;margin:0;list-style:none}.guide-rail li{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;padding:9px;opacity:.5}.guide-rail li[aria-current="step"]{opacity:1;color:var(--paper);background:var(--ink)}.guide-rail li.is-complete{opacity:1;color:var(--accent)}.guide-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.guide-actions .action{padding-inline:8px}#workflowGuideProgress{height:6px;background:var(--line)}#workflowGuideProgress i{display:block;width:0;height:100%;background:var(--accent)}.guide-core{grid-area:core;min-width:0;padding:16px;border:1px solid var(--line)}.guide-core>p{margin:0 0 14px;padding:10px;border-left:4px solid var(--accent);background:color-mix(in srgb,var(--secondary) 12%,transparent)}.guide-core[data-guide-step="1"]{border-radius:28px}.guide-core[data-guide-step="2"]{box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent)}.guide-evidence{grid-area:evidence;display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:start}.guide-evidence details,.guide-evidence form{padding:12px;border:1px solid var(--line)}.guide-evidence label{display:grid;gap:7px}.guide-evidence textarea{width:100%;padding:9px;border:1px solid var(--line);background:var(--paper)}@media(max-width:900px){.workflow-guide{grid-template-columns:1fr;grid-template-areas:"core" "rail" "evidence"}.guide-rail{border-right:0;border-bottom:1px solid var(--line)}.guide-rail ol{grid-template-columns:repeat(3,1fr)}.guide-evidence{grid-template-columns:1fr}}.evidence-shell{--evidence-zoom:100;display:grid;gap:18px;padding:clamp(16px,4vw,26px);border:1px solid var(--line);border-radius:30px;background:linear-gradient(180deg,color-mix(in srgb,var(--secondary) 8%,transparent),color-mix(in srgb,var(--paper) 94%,transparent));box-shadow:var(--shadow)}.evidence-head{display:flex;justify-content:space-between;gap:18px;align-items:end}.evidence-head h2{margin:.2em 0}.evidence-tools{display:grid;gap:10px;justify-items:end}.evidence-tools output{padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-weight:900}.evidence-body{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(230px,.55fr);gap:16px}.evidence-stage{display:grid;gap:12px;min-width:0}.evidence-ribbon{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.evidence-ribbon button{display:grid;gap:6px;min-height:110px;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--paper);text-align:left}.evidence-ribbon button[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}.evidence-ribbon span{font:800 11px/1 ui-monospace,monospace;letter-spacing:.14em}.evidence-ribbon small{opacity:.72;line-height:1.5}.evidence-core-shell{min-width:0;padding:clamp(12px,3vw,20px);overflow:auto;border:1px solid var(--line);border-radius:24px;background:color-mix(in srgb,var(--paper) 92%,transparent)}.evidence-core-shell>*{display:block;width:calc(10000%/var(--evidence-zoom));max-width:none;transform:scale(calc(var(--evidence-zoom)/100));transform-origin:top left}.evidence-rail{display:grid;align-content:start;gap:14px;padding:18px;border-radius:22px;color:var(--paper);background:var(--ink)}.evidence-rail label{display:grid;gap:8px}.evidence-rail input,.evidence-rail select{width:100%;padding:10px;border:1px solid #ffffff2e;border-radius:10px;color:inherit;background:#ffffff12}.evidence-checklist,.evidence-log{display:grid;gap:8px;padding-left:18px;margin:0}.evidence-checklist li.is-active{color:var(--secondary);font-weight:900}.evidence-checklist li.is-done{color:var(--accent);font-weight:900}.evidence-log li{line-height:1.55}.evidence-shell[data-board-mode="proof"] .evidence-core-shell{outline:4px solid color-mix(in srgb,var(--accent) 32%,transparent);outline-offset:2px}.evidence-shell[data-board-mode="handoff"] .evidence-rail{background:color-mix(in srgb,var(--ink) 82%,#0a1512)}@media(max-width:920px){.evidence-body{grid-template-columns:1fr}.evidence-ribbon{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.evidence-head{align-items:stretch;flex-direction:column}.evidence-tools{justify-items:start}.evidence-ribbon{grid-template-columns:1fr}.evidence-core-shell>*{width:100%;transform:none}}
  </style>
</head>
<body data-aesthetic="dashboard" data-composition="split-note">
  <main class="page">
    <header class="mast"><div><span class="eyebrow">dashboard / Pricing Plans Page / INTERMEDIATE</span><h1>Podcast Open Day pricing plan page</h1><p class="intro">Complete the pricing plans page in the Podcast Open Day scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.</p></div><span class="scenario">Podcast Open Day</span></header>
    <div class="composition-split"><aside class="split-note"><b>CASE 02</b><span>Master the semantic structure, responsive layout, keyboard interaction, and state synchronization of pricing plan pages.</span></aside><section class="demo" aria-label="Podcast Open Day pricing plan page interaction area"><section id="evidenceShell" class="evidence-shell" data-board-mode="scan"><header class="evidence-head"><div><span class="eyebrow">Podcast Open Day / EVIDENCE BOARD</span><h2>Pricing Plans Page Monitoring Dashboard</h2><p>Place the main case into an evidence board, using separate observation cards, logs, and mode-switch records to track the current result.</p></div><div class="evidence-tools"><div class="row"><button class="action primary" type="button" data-board-mode="scan">Scan</button><button class="action" type="button" data-board-mode="proof">Verify</button><button class="action" type="button" data-board-mode="handoff">Handoff</button></div><output id="evidenceStatus">Awaiting Sampling</output></div></header><div class="evidence-body"><section class="evidence-stage"><div class="evidence-ribbon"><button type="button" data-evidence-card="0" aria-pressed="true"><span>01</span><strong>Podcast Open Day Records</strong><small>Check whether the status change is visible</small></button><button type="button" data-evidence-card="1" aria-pressed="false"><span>02</span><strong>Podcast Open Day Collaboration</strong><small>Confirm keyboard and click entry points are consistent</small></button><button type="button" data-evidence-card="2" aria-pressed="false"><span>03</span><strong>Podcast Open Day Progress</strong><small>Check whether the layout falls back on narrow screens</small></button><button type="button" data-evidence-card="3" aria-pressed="false"><span>04</span><strong>Podcast Open Day Reminder</strong><small>Record current review conclusion</small></button></div><div id="evidenceCoreShell" class="evidence-core-shell"><div class="workflow-guide"><nav class="guide-rail" aria-label="Podcast Open Day Guide"><span class="eyebrow">Podcast Open Day GUIDE</span><ol><li data-workflow-guide-step="0" aria-current="step"><b>1</b><span>Podcast Open Day Highlights</span></li><li data-workflow-guide-step="1"><b>2</b><span>Podcast Open Day Evidence Addendum</span></li><li data-workflow-guide-step="2"><b>3</b><span>Podcast Open Day conversion action</span></li></ol><div class="guide-actions"><button id="workflowGuideBack" class="action" type="button" disabled>Previous</button><button id="workflowGuideNext" class="action primary" type="button">Complete this step</button></div><div id="workflowGuideProgress" role="progressbar" aria-label="Podcast Open Day Completion" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><i></i></div></nav><section id="workflowCore" class="workflow-core guide-core" data-guide-step="0" aria-describedby="workflowGuideInstruction"><p id="workflowGuideInstruction">Please complete the related actions for the “Podcast Open Day Highlights Introduction” main case.</p><!-- 11DZ_CORE_START:marketing-content-pages-pricing-plans --><div class="campaign"><section class="campaign-copy"><span class="eyebrow">Podcast Open Day / NEW</span><h2>Turn complex experiences into a clear story.</h2><p>This pricing plan page example uses clear hierarchy, trustworthy data, and actionable entry points to organize the conversion path.</p><div class="row"><button id="campaignAction" class="action primary" type="button">Try it now</button><button class="action" type="button">View details</button></div></section><aside class="pricing panel"><div class="billing"><span>Monthly</span><label class="switch"><input id="billingToggle" type="checkbox" data-core-bridge="marketing-content-pages-pricing-plans"><i></i><span>Per year</span></label></div><article><span>Lightweight</span><strong data-price="39">¥39</strong><small>/ mo</small></article><article class="featured"><span>Growth</span><strong data-price="79">¥79</strong><small>/ mo</small></article><article><span>Professional</span><strong data-price="129">¥129</strong><small>/ mo</small></article></aside></div><!-- 11DZ_CORE_END --></section><aside class="guide-evidence"><details id="workflowGuideDetails"><summary>View acceptance requirements</summary><ul><li>Podcast Open Day Highlights Introduction requires a single visible state change</li><li>Podcast Open Day evidence supplement requires one visible state change</li><li>The podcast open day conversion action needs one visible state change</li></ul></details><form id="workflowGuideEvidenceForm"><label>This step evidence<textarea id="workflowGuideEvidence" rows="3" placeholder="Record the observed state"></textarea></label><input class="action" type="submit" value="Save evidence"></form><output id="workflowGuideSummary">0 / 3 Steps Complete</output></aside></div></div></section><aside class="evidence-rail"><label>Canvas Zoom<input id="evidenceZoom" type="range" min="88" max="128" value="100"><output id="evidenceZoomValue">100%</output></label><label>Current sample<select id="evidenceStep"><option value="0">Podcast Open Day Records</option><option value="1">Podcast Open Day Collaboration</option><option value="2">Podcast Open Day Progress</option><option value="3">Podcast Open Day Reminder</option></select></label><ul id="evidenceChecklist" class="evidence-checklist"><li>Podcast Open Day Records</li><li>Podcast Open Day Collaboration</li><li>Podcast Open Day Progress</li><li>Podcast Open Day Reminder</li></ul><button id="evidenceCapture" class="action primary" type="button">Write evidence</button><ol id="evidenceLog" class="evidence-log"><li>Evidence not yet entered</li></ol></aside></div></section><p id="status" class="status" role="status" aria-live="polite"></p></section></div>
  </main>
  <script>
    'use strict';
    const statusOutput = document.querySelector('#status');
    const announce = message => { statusOutput.textContent = message; };
    /* 11DZ_CORE_SCRIPT_START:marketing-content-pages-pricing-plans */
const billingToggle = document.querySelector('#billingToggle'); function updateBilling(){ document.querySelectorAll('[data-price]').forEach(price => { const monthly = Number(price.dataset.price); price.textContent = '¥' + (billingToggle.checked ? Math.round(monthly * 10 / 12) : monthly); }); announce(billingToggle.checked ? 'Switched to annual billing equivalent price' : 'Switched to monthly billing'); } billingToggle.addEventListener('change',updateBilling); document.querySelector('#campaignAction').addEventListener('click',() => announce('Podcast Open Day experience has started'));
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"marketing-content-pages-pricing-plans","selector":"[data-core-bridge=\"marketing-content-pages-pricing-plans\"]","mode":"toggle","key":" "};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · Core Version '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.setAttribute('aria-keyshortcuts',workflowBridgeSpec.key===' '?'Space':workflowBridgeSpec.key);const workflowBridgeToggleKeyMatches=event=>event.key===workflowBridgeSpec.key||event.key==='Spacebar'||event.code==='Space';workflowBridgeControl.addEventListener('keydown',event=>{if(!workflowBridgeToggleKeyMatches(event))return;event.preventDefault();});workflowBridgeControl.addEventListener('keyup',event=>{if(!workflowBridgeToggleKeyMatches(event))return;event.preventDefault();workflowBridgeControl.click();});workflowBridgeControl.addEventListener("change",workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();workflowBridgeControl.click();const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowGuideCore=document.querySelector('#workflowCore');const workflowGuideStages=["Podcast Open Day Highlights","Podcast Open Day Evidence Addendum","Podcast Open Day conversion action"];const workflowGuideState={step:0,completed:new Set(),evidence:new Map(),consumedVersion:0};function workflowGuideDrive(){const step=workflowGuideState.step;workflowGuideCore.dataset.guideStep=String(step);document.querySelector('#workflowGuideInstruction').textContent='Please complete the main example ‘'+workflowGuideStages[step]+'Related actions.”';document.querySelectorAll('[data-workflow-guide-step]').forEach((item,index)=>{item.classList.toggle('is-complete',workflowGuideState.completed.has(index));if(index===step)item.setAttribute('aria-current','step');else item.removeAttribute('aria-current');});document.querySelector('#workflowGuideBack').disabled=step===0;document.querySelector('#workflowGuideNext').textContent=step===workflowGuideStages.length-1?'Save Page':'Complete this step';const percent=Math.round(workflowGuideState.completed.size/workflowGuideStages.length*100);const progress=document.querySelector('#workflowGuideProgress');progress.setAttribute('aria-valuenow',String(percent));progress.querySelector('i').style.width=percent+'%';document.querySelector('#workflowGuideSummary').textContent=workflowGuideState.completed.size+' / '+workflowGuideStages.length+' Step complete · '+workflowBridgeSummary();announce('Current step in Podcast Open Day:'+workflowGuideStages[step]);}function workflowGuideAdvance(direction){if(direction>0){const bridge=workflowBridgeActivate();const version=Number(workflowGuideCore.dataset.workflowVersion||0);if(version<=workflowGuideState.consumedVersion){announce('Please complete the visible state change in the main example first');return;}workflowGuideState.consumedVersion=version;workflowGuideState.completed.add(workflowGuideState.step);announce('Main case changes recorded · '+bridge.summary);}workflowGuideState.step=Math.max(0,Math.min(workflowGuideStages.length-1,workflowGuideState.step+direction));workflowGuideDrive();}document.querySelector('#workflowGuideBack').addEventListener('click',()=>workflowGuideAdvance(-1));document.querySelector('#workflowGuideNext').addEventListener('click',()=>workflowGuideAdvance(1));document.querySelector('#workflowGuideEvidenceForm').addEventListener('submit',event=>{event.preventDefault();const version=Number(workflowGuideCore.dataset.workflowVersion||0);if(version<=workflowGuideState.consumedVersion){announce('Evidence not saved: the main example has no new changes yet');return;}const text=document.querySelector('#workflowGuideEvidence').value.trim();workflowGuideState.evidence.set(workflowGuideState.step,text||'Visible status check completed');workflowGuideState.completed.add(workflowGuideState.step);workflowGuideState.consumedVersion=version;workflowGuideDrive();announce('Evidence for this step has been saved · '+workflowBridgeSummary());});document.querySelector('#workflowGuideDetails').addEventListener('toggle',event=>announce(event.currentTarget.open?'Acceptance requirements expanded':'Acceptance requirements collapsed'));workflowGuideDrive();
workflowBridgeReset();
const evidenceShell=document.querySelector('#evidenceShell');const evidenceStatus=document.querySelector('#evidenceStatus');const evidenceZoom=document.querySelector('#evidenceZoom');const evidenceZoomValue=document.querySelector('#evidenceZoomValue');const evidenceStep=document.querySelector('#evidenceStep');const evidenceChecklistItems=[...document.querySelectorAll('#evidenceChecklist li')];const evidenceCards=[...document.querySelectorAll('[data-evidence-card]')];const evidenceLog=document.querySelector('#evidenceLog');const evidenceModeButtons=[...evidenceShell.querySelectorAll('button[data-board-mode]')];const evidenceNotes=["Podcast Open Day Records","Podcast Open Day Collaboration","Podcast Open Day Progress","Podcast Open Day Reminder"];const evidenceCore=document.querySelector('#workflowCore');let evidenceCaptures=0;function evidenceSetCard(index){evidenceCards.forEach((card,cardIndex)=>{const active=cardIndex===index;card.setAttribute('aria-pressed',String(active));});evidenceChecklistItems.forEach((item,itemIndex)=>{item.classList.toggle('is-active',itemIndex===index);item.classList.toggle('is-done',itemIndex<evidenceCaptures);});}function evidenceRender(reason){const version=evidenceCore?.dataset.workflowVersion||'0';const zoom=Number(evidenceZoom.value);const active=Math.min(evidenceNotes.length-1,Number(evidenceStep.value)||0);evidenceShell.style.setProperty('--evidence-zoom',String(zoom));evidenceZoomValue.textContent=zoom+'%';evidenceSetCard(active);evidenceStatus.textContent=reason+' · Core Version '+version;}evidenceModeButtons.forEach(button=>button.addEventListener('click',()=>{evidenceModeButtons.forEach(item=>item.classList.toggle('primary',item===button));evidenceShell.dataset.boardMode=button.dataset.boardMode;evidenceRender('Switched to'+button.textContent);announce('Evidence mode:'+button.textContent);}));evidenceCards.forEach((card,index)=>card.addEventListener('click',()=>{evidenceStep.value=String(index);evidenceRender('Switched to observation card');announce('Observation card:'+evidenceNotes[index]);}));evidenceZoom.addEventListener('input',()=>{evidenceRender('Canvas zoom updated');announce('Observe scaling '+evidenceZoom.value+'%');});evidenceStep.addEventListener('change',()=>{const index=Number(evidenceStep.value)||0;evidenceRender('Sampling switched');announce('Current sample:'+evidenceNotes[index]);});document.querySelector('#evidenceCapture').addEventListener('click',()=>{const index=Math.min(evidenceNotes.length-1,Number(evidenceStep.value)||0);const note=evidenceNotes[index];const version=evidenceCore?.dataset.workflowVersion||'0';evidenceCaptures+=1;const item=document.createElement('li');item.textContent='Evidence '+evidenceCaptures+' · '+note+' · Core Version '+version;const empty=evidenceLog.querySelector('li')?.textContent==='Evidence not yet entered';if(empty)evidenceLog.replaceChildren(item);else evidenceLog.prepend(item);while(evidenceLog.children.length>6)evidenceLog.lastElementChild.remove();evidenceRender('Evidence written '+evidenceCaptures);announce('Evidence written '+evidenceCaptures+' · '+note);});evidenceCore?.addEventListener('focusin',()=>evidenceRender('Main Case Gets Focus'));evidenceCore?.addEventListener('click',()=>evidenceRender('Primary example interaction'));evidenceRender('Awaiting Sampling');
  </script>
</body>
</html>