Tables and data display
Studio Settlement Sheet Mobile Card Table

Complete the mobile card table for a studio payout sheet scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Tables and data displayMobile card tableHTML TableCSSJavaScript
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>Studio Settlement Sheet Mobile Card Table</title>
  <style>
    :root { --ink:#30231f; --paper:#f9efe5; --accent:#8b6fb0; --secondary:#d7a971; --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:"Songti SC","Noto Serif SC",Georgia,serif; background:linear-gradient(90deg,transparent 49.7%,color-mix(in srgb,var(--ink) 7%,transparent) 50%,transparent 50.3%),var(--paper); }
    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(1180px,calc(100% - 40px));margin:auto;padding:7vw 0}.mast{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(180px,.4fr);gap:5vw;align-items:end;margin-bottom:38px}.mast h1{font-family:"Songti SC",Georgia,serif;font-weight:800;font-size:clamp(42px,9vw,92px);max-width:920px;margin:0;line-height:.94}.eyebrow{display:block;margin-bottom:14px;color:var(--accent);font:800 11px/1 ui-monospace,monospace;letter-spacing:.24em}.intro{max-width:58ch;line-height:1.9}.scenario{align-self:start;padding-top:10px;border-top:1px solid var(--ink);font-style:italic}.demo{border-radius:0;border-width:2px;box-shadow:14px 14px 0 color-mix(in srgb,var(--ink) 18%,transparent);position:relative;overflow:hidden;min-height:420px;padding:clamp(22px,4vw,48px);background:var(--paper)}@media(max-width:700px){.page{width:calc(100% - 22px);padding:26px 0}.mast{grid-template-columns:1fr}.demo{min-height:340px;padding:18px}}
    .panel{padding:30px;border:0;border-radius:42px 12px;background:color-mix(in srgb,var(--secondary) 18%,var(--paper))}.row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}.stack{display:flex;flex-direction:column;gap:20px}.action{min-height:48px;padding:12px 22px;border:0;border-radius:50% 50% 18px 18px;background:color-mix(in srgb,var(--secondary) 42%,transparent);font-weight:800}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.muted{color:color-mix(in srgb,var(--ink) 64%,transparent);line-height:1.7}.status{min-height:25px;margin-top:16px;color:var(--accent)}.metric{font-size:clamp(32px,7vw,66px);font-weight:800}.meter{height:11px;border-radius:50%;background:color-mix(in srgb,var(--ink) 10%,transparent)}.meter>i{display:block;height:100%;border-radius:inherit;background:var(--accent)}.chip{padding:8px 12px;border-radius:50%;background:var(--paper)}
    .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}}
    .special-table{width:100%;border-collapse:collapse;background:var(--paper)}.special-table caption{padding:14px 16px;text-align:left;font-weight:800}.special-table th,.special-table td{padding:13px 16px;border-top:1px solid var(--line);text-align:left}.special-table tbody tr:hover{background:color-mix(in srgb,var(--secondary) 14%,transparent)}.special-table-shell{overflow:auto;border:1px solid var(--line);border-radius:18px;background:var(--paper)}.table-special-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}.table-special-tools select,.table-special-tools input{min-height:40px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--paper)}.responsive-table-demo{display:grid;gap:14px}.responsive-table-demo h2{margin:.35em 0}.responsive-cell-label{display:none}.responsive-record-table.force-cards{border:0;background:transparent}.responsive-record-table.force-cards table,.responsive-record-table.force-cards tbody,.responsive-record-table.force-cards tr,.responsive-record-table.force-cards td{display:block}.responsive-record-table.force-cards thead{position:absolute;clip:rect(0 0 0 0)}.responsive-record-table.force-cards tbody{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.responsive-record-table.force-cards tr{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}.responsive-record-table.force-cards td{display:grid;grid-template-columns:90px 1fr;border:0;padding:7px}.responsive-record-table.force-cards .responsive-cell-label{display:block;font-weight:900}@media(max-width:620px){.responsive-record-table{border:0;background:transparent}.responsive-record-table table,.responsive-record-table tbody,.responsive-record-table tr,.responsive-record-table td{display:block}.responsive-record-table thead{position:absolute;clip:rect(0 0 0 0)}.responsive-record-table tbody{display:grid;gap:12px}.responsive-record-table tr{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}.responsive-record-table td{display:grid;grid-template-columns:90px 1fr;border:0;padding:7px}.responsive-record-table .responsive-cell-label{display:block;font-weight:900}}.workflow-session{display:grid;gap:14px}.session-command{display:grid;grid-template-columns:1fr auto minmax(170px,.45fr) auto;gap:16px;align-items:end;padding:18px;border-block:4px double var(--ink)}.session-command h2{margin:.2em 0}.session-command output{font:900 clamp(28px,5vw,54px)/1 ui-monospace,monospace}.session-command label{display:grid;grid-template-columns:1fr auto;gap:7px;font-size:12px}.session-command input{grid-column:1/-1;width:100%}#workflowSessionProgress{height:12px;overflow:hidden;border-radius:2px;background:var(--line)}#workflowSessionProgress i{display:block;width:0;height:100%;background:var(--accent)}.session-stage{min-width:0;transition:filter .25s,transform .25s}.session-stage[data-session-phase="running"]{transform:translateY(-3px)}.session-stage[data-session-phase="paused"]{filter:grayscale(.65)}.session-stage[data-session-phase="complete"]{filter:contrast(.78);opacity:.72}.session-log{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}.session-log ol{display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0;list-style:none}.session-log li{padding:5px 8px;border:1px solid var(--line);font-size:12px}@media(max-width:900px){.session-stage{order:-1}.session-command{grid-template-columns:1fr auto}.session-command label{grid-column:1/-1}.session-log{grid-template-columns:1fr}}.atlas-shell{--atlas-zoom:100;display:grid;gap:18px;padding:clamp(18px,4vw,30px);border:1px solid var(--line);border-radius:34px;background:linear-gradient(165deg,color-mix(in srgb,var(--secondary) 10%,transparent),color-mix(in srgb,var(--paper) 96%,transparent));box-shadow:var(--shadow)}.atlas-head{display:flex;justify-content:space-between;gap:20px;align-items:end}.atlas-head h2{margin:.18em 0}.atlas-controls{display:grid;gap:10px;justify-items:end}.atlas-modes{display:flex;flex-wrap:wrap;gap:8px;justify-content:end}.atlas-controls output{padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-weight:900}.atlas-body{display:grid;grid-template-columns:minmax(240px,.56fr) minmax(0,1.44fr);gap:16px}.atlas-index{display:grid;align-content:start;gap:14px;padding:18px;border-radius:26px;color:var(--paper);background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 88%,#071310),color-mix(in srgb,var(--ink) 72%,#21110f))}.atlas-index label{display:grid;gap:8px}.atlas-index input,.atlas-index select{width:100%;padding:10px;border:1px solid #ffffff2e;border-radius:10px;color:inherit;background:#ffffff12}.atlas-chapters{display:grid;gap:10px;margin:0;padding:0;list-style:none}.atlas-chapters button{display:grid;gap:6px;width:100%;padding:14px;border:1px solid #ffffff24;border-radius:18px;color:inherit;background:#ffffff0e;text-align:left}.atlas-chapters button[aria-pressed="true"]{border-color:var(--secondary);background:#ffffff18;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--secondary) 28%,transparent)}.atlas-chapters span{font:800 11px/1 ui-monospace,monospace;letter-spacing:.16em}.atlas-chapters small{line-height:1.5;opacity:.76}.atlas-meta{display:grid;gap:10px;margin:0}.atlas-meta div{display:grid;gap:4px;padding:12px;border:1px solid #ffffff1f;border-radius:14px;background:#ffffff10}.atlas-meta dt{font:700 11px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.72}.atlas-meta dd{margin:0;font-weight:900}.atlas-stage{display:grid;gap:14px;min-width:0}.atlas-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.atlas-summary article{display:grid;gap:6px;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}.atlas-summary article[data-active="true"]{background:color-mix(in srgb,var(--secondary) 14%,var(--paper));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}.atlas-summary span{font:800 11px/1 ui-monospace,monospace;letter-spacing:.16em}.atlas-core-shell{min-width:0;padding:clamp(14px,3vw,22px);overflow:auto;border:1px solid var(--line);border-radius:26px;background:radial-gradient(circle at top right,color-mix(in srgb,var(--accent) 8%,transparent),transparent 35%),color-mix(in srgb,var(--paper) 94%,transparent)}.atlas-core-shell>*{display:block;width:calc(10000%/var(--atlas-zoom));max-width:none;transform:scale(calc(var(--atlas-zoom)/100));transform-origin:top left}.atlas-log{display:grid;gap:8px;margin:0;padding-left:18px}.atlas-log li{line-height:1.55}.atlas-shell[data-atlas-mode="trace"] .atlas-core-shell{outline:4px solid color-mix(in srgb,var(--accent) 24%,transparent);outline-offset:3px}.atlas-shell[data-atlas-mode="handoff"] .atlas-index{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 82%,#28120f),color-mix(in srgb,var(--ink) 68%,#11201d))}@media(max-width:960px){.atlas-body{grid-template-columns:1fr}.atlas-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.atlas-head{align-items:stretch;flex-direction:column}.atlas-controls{justify-items:start}.atlas-modes{justify-content:start}.atlas-summary{grid-template-columns:1fr}.atlas-core-shell>*{width:100%;transform:none}}
  </style>
</head>
<body data-aesthetic="editorial" data-composition="split-note">
  <main class="page">
    <header class="mast"><div><span class="eyebrow">editorial / Mobile Card Table / INTERMEDIATE</span><h1>Studio Settlement Sheet Mobile Card Table</h1><p class="intro">Complete the mobile card table for a studio payout sheet scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.</p></div><span class="scenario">Studio payout sheet</span></header>
    <div class="composition-split"><aside class="split-note"><b>CASE 02</b><span>Mastering the semantic structure, responsive layout, keyboard interactions, and state synchronization of mobile card tables.</span></aside><section class="demo" aria-label="Studio payout sheet mobile card table interaction area"><section id="atlasShell" class="atlas-shell" data-atlas-mode="brief"><header class="atlas-head"><div><span class="eyebrow">Studio Settlement Sheet / ATLAS DOSSIER</span><h2>Mobile Card Table Sample Atlas</h2><p>Rewrap the main case with a graph-style sample page, separating sample index, tracking view, handoff notes, and field records.</p></div><div class="atlas-controls"><div class="atlas-modes"><button class="action primary" type="button" data-atlas-mode="brief">Briefing</button><button class="action" type="button" data-atlas-mode="trace">Track</button><button class="action" type="button" data-atlas-mode="handoff">Handoff</button></div><output id="atlasState">Waiting to create sample</output></div></header><div class="atlas-body"><aside class="atlas-index"><ol class="atlas-chapters"><li><button type="button" data-atlas-card="0" aria-pressed="true"><span>01</span><strong>Studio Payout Sheet Reminder</strong><small>Check whether the status change is visible</small></button></li><li><button type="button" data-atlas-card="1" aria-pressed="false"><span>02</span><strong>Studio settlement sheet collection</strong><small>Confirm keyboard and click entry points are consistent</small></button></li><li><button type="button" data-atlas-card="2" aria-pressed="false"><span>03</span><strong>Studio Settlement Statement Overview</strong><small>Check whether the layout falls back on narrow screens</small></button></li><li><button type="button" data-atlas-card="3" aria-pressed="false"><span>04</span><strong>Studio Settlement Plan</strong><small>Record current review conclusion</small></button></li></ol><label>Layout scale<input id="atlasZoom" type="range" min="82" max="132" value="100"><output id="atlasZoomValue">100%</output></label><label>Sampling focus<select id="atlasFocus"><option value="0">Studio Payout Sheet Reminder</option><option value="1">Studio settlement sheet collection</option><option value="2">Studio Settlement Statement Overview</option><option value="3">Studio Settlement Plan</option></select></label><button id="atlasCapture" class="action primary" type="button">Featured sample</button><dl class="atlas-meta"><div><dt>Number of Entries</dt><dd id="atlasCount">0</dd></div><div><dt>Current focus</dt><dd id="atlasCurrent">Studio Payout Sheet Reminder</dd></div><div><dt>Review Mode</dt><dd id="atlasModeLabel">Briefing</dd></div></dl></aside><section class="atlas-stage"><div class="atlas-summary"><article data-active="true"><span>Sample</span><strong>Studio Payout Sheet Reminder</strong><p>Check whether the status change is visible</p></article><article><span>Trace</span><strong>Studio settlement sheet collection</strong><p>Confirm keyboard and click entry points are consistent</p></article><article><span>Signal</span><strong>Studio Settlement Statement Overview</strong><p>Check whether the layout falls back on narrow screens</p></article><article><span>Handoff</span><strong>Studio Settlement Plan</strong><p>Record current review conclusion</p></article></div><div id="atlasCoreShell" class="atlas-core-shell"><div class="workflow-session"><header class="session-command"><div><span class="eyebrow">Studio settlement sheet SESSION</span><h2>Studio Settlement Sheet Timing Station</h2></div><output id="workflowSessionClock">00:45</output><label>Round Duration<input id="workflowSessionLength" type="range" min="15" max="90" step="15" value="45"><span>sec</span></label><button id="workflowSessionToggle" class="action primary" type="button">Apply View</button></header><div id="workflowSessionProgress" role="progressbar" aria-label="Studio payout sheet progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><i></i></div><section id="workflowCore" class="workflow-core session-stage" data-session-phase="ready" tabindex="-1"><!-- 11DZ_CORE_START:tables-data-table-to-cards --><div class="responsive-table-demo"><header class="table-special-tools"><div><span class="eyebrow">RESPONSIVE RECORDS</span><h2>Studio Settlement Sheet Responsive Record</h2></div><button id="tableCardModeToggle" class="action" type="button" aria-pressed="false" data-core-bridge="tables-data-table-to-cards">Preview Card Mode</button></header><div id="responsiveRecordTable" class="responsive-record-table special-table-shell"><table class="special-table"><caption>Studio Settlement Sheet Responsive Record</caption><thead><tr><th>Project</th><th>Value</th><th>Status</th></tr></thead><tbody><tr><td><span class="responsive-cell-label" aria-hidden="true">Project</span><span class="responsive-cell-value">Studio Payout Sheet Reminder</span></td><td><span class="responsive-cell-label" aria-hidden="true">Value</span><span class="responsive-cell-value">18</span></td><td><span class="responsive-cell-label" aria-hidden="true">Status</span><span class="responsive-cell-value">To be processed</span></td></tr><tr><td><span class="responsive-cell-label" aria-hidden="true">Project</span><span class="responsive-cell-value">Studio settlement sheet collection</span></td><td><span class="responsive-cell-label" aria-hidden="true">Value</span><span class="responsive-cell-value">31</span></td><td><span class="responsive-cell-label" aria-hidden="true">Status</span><span class="responsive-cell-value">In Progress</span></td></tr><tr><td><span class="responsive-cell-label" aria-hidden="true">Project</span><span class="responsive-cell-value">Studio Settlement Statement Overview</span></td><td><span class="responsive-cell-label" aria-hidden="true">Value</span><span class="responsive-cell-value">44</span></td><td><span class="responsive-cell-label" aria-hidden="true">Status</span><span class="responsive-cell-value">Completed</span></td></tr><tr><td><span class="responsive-cell-label" aria-hidden="true">Project</span><span class="responsive-cell-value">Studio Settlement Plan</span></td><td><span class="responsive-cell-label" aria-hidden="true">Value</span><span class="responsive-cell-value">57</span></td><td><span class="responsive-cell-label" aria-hidden="true">Status</span><span class="responsive-cell-value">To be processed</span></td></tr><tr><td><span class="responsive-cell-label" aria-hidden="true">Project</span><span class="responsive-cell-value">Studio payout sheet inspiration</span></td><td><span class="responsive-cell-label" aria-hidden="true">Value</span><span class="responsive-cell-value">70</span></td><td><span class="responsive-cell-label" aria-hidden="true">Status</span><span class="responsive-cell-value">In Progress</span></td></tr><tr><td><span class="responsive-cell-label" aria-hidden="true">Project</span><span class="responsive-cell-value">Studio Payout Sheet Records</span></td><td><span class="responsive-cell-label" aria-hidden="true">Value</span><span class="responsive-cell-value">83</span></td><td><span class="responsive-cell-label" aria-hidden="true">Status</span><span class="responsive-cell-value">Completed</span></td></tr></tbody></table></div></div><!-- 11DZ_CORE_END --></section><footer class="session-log"><strong id="workflowSessionScore">0 interaction checkpoints</strong><ol id="workflowSessionLaps" aria-label="Round Log"></ol></footer></div></div><ol id="atlasLog" class="atlas-log"><li>Waiting for the first graph sample</li></ol></section></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:tables-data-table-to-cards */
const cardMedia=matchMedia('(max-width:620px)');const responsiveRecordTable=document.querySelector('#responsiveRecordTable');const tableCardModeToggle=document.querySelector('#tableCardModeToggle');function announceTableMode(){const forced=responsiveRecordTable.classList.contains('force-cards');announce(forced||cardMedia.matches?'Table converted to card records':'Using desktop table view');}tableCardModeToggle.addEventListener('click',()=>{const forced=responsiveRecordTable.classList.toggle('force-cards');tableCardModeToggle.setAttribute('aria-pressed',String(forced));tableCardModeToggle.textContent=forced?'Restore auto layout':'Preview Card Mode';announceTableMode();});cardMedia.addEventListener?.('change',announceTableMode);announceTableMode();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"tables-data-table-to-cards","selector":"[data-core-bridge=\"tables-data-table-to-cards\"]","mode":"click","key":"Enter"};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.addEventListener("click",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 workflowSessionCore=document.querySelector('#workflowCore');const workflowSessionToggle=document.querySelector('#workflowSessionToggle');const workflowSessionLength=document.querySelector('#workflowSessionLength');const workflowSessionState={phase:'ready',elapsed:0,limit:Number(workflowSessionLength.value),checkpoints:[],timer:null};function workflowSessionFormat(seconds){return String(Math.floor(seconds/60)).padStart(2,'0')+':'+String(seconds%60).padStart(2,'0');}function workflowSessionDrive(){const percent=Math.min(100,Math.round(workflowSessionState.elapsed/workflowSessionState.limit*100));document.querySelector('#workflowSessionClock').textContent=workflowSessionFormat(Math.max(0,workflowSessionState.limit-workflowSessionState.elapsed));const progress=document.querySelector('#workflowSessionProgress');progress.setAttribute('aria-valuenow',String(percent));progress.querySelector('i').style.width=percent+'%';workflowSessionCore.dataset.sessionPhase=workflowSessionState.phase;document.querySelector('#workflowSessionScore').textContent=workflowSessionState.checkpoints.length+' interactive checkpoints';}function workflowSessionLap(label){workflowSessionState.checkpoints.push({label,at:workflowSessionState.elapsed});const item=document.createElement('li');item.textContent=label+' · '+workflowSessionFormat(workflowSessionState.elapsed);document.querySelector('#workflowSessionLaps').append(item);workflowSessionDrive();}function workflowSessionStop(complete=false){clearInterval(workflowSessionState.timer);workflowSessionState.timer=null;workflowSessionState.phase=complete?'complete':'paused';workflowSessionToggle.textContent=complete?'Restart':'Continue round';workflowSessionToggle.setAttribute('aria-pressed','false');workflowSessionDrive();announce(complete?'Studio payout sheet round complete':'Round paused');}function workflowSessionStart(){if(workflowSessionState.phase==='complete'){workflowSessionState.elapsed=0;workflowSessionState.checkpoints=[];document.querySelector('#workflowSessionLaps').replaceChildren();}workflowSessionState.phase='running';workflowSessionToggle.textContent='Pause round';workflowSessionToggle.setAttribute('aria-pressed','true');const bridge=workflowBridgeActivate();workflowSessionLap(bridge.summary);clearInterval(workflowSessionState.timer);workflowSessionState.timer=setInterval(()=>{workflowSessionState.elapsed+=1;if(workflowSessionState.elapsed>=workflowSessionState.limit){workflowSessionStop(true);return;}workflowSessionDrive();},1000);workflowSessionDrive();announce('Studio settlement cycle has started · '+bridge.summary);}workflowSessionToggle.addEventListener('click',()=>workflowSessionState.phase==='running'?workflowSessionStop():workflowSessionStart());workflowSessionLength.addEventListener('input',()=>{workflowSessionState.limit=Number(workflowSessionLength.value);workflowSessionState.elapsed=Math.min(workflowSessionState.elapsed,workflowSessionState.limit);workflowSessionDrive();});workflowSessionCore.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){workflowSessionLap('Keyboard Interaction');}});workflowSessionCore.addEventListener('click',event=>{if(event.target.closest('[data-core-bridge]'))workflowSessionLap('Core action · '+workflowBridgeSummary());});document.addEventListener('visibilitychange',()=>{if(document.hidden&&workflowSessionState.phase==='running')workflowSessionStop();});workflowSessionDrive();
workflowBridgeReset();
const atlasShell=document.querySelector('#atlasShell');const atlasState=document.querySelector('#atlasState');const atlasZoom=document.querySelector('#atlasZoom');const atlasZoomValue=document.querySelector('#atlasZoomValue');const atlasFocus=document.querySelector('#atlasFocus');const atlasCurrent=document.querySelector('#atlasCurrent');const atlasCount=document.querySelector('#atlasCount');const atlasModeLabel=document.querySelector('#atlasModeLabel');const atlasCards=[...document.querySelectorAll('[data-atlas-card]')];const atlasSummary=[...document.querySelectorAll('.atlas-summary article')];const atlasLog=document.querySelector('#atlasLog');const atlasModeButtons=[...atlasShell.querySelectorAll('[data-atlas-mode]')];const atlasNotes=["Studio Payout Sheet Reminder","Studio settlement sheet collection","Studio Settlement Statement Overview","Studio Settlement Plan"];const atlasCore=document.querySelector('#workflowCore');let atlasCaptures=0;function atlasSetActive(index){atlasCards.forEach((button,buttonIndex)=>button.setAttribute('aria-pressed',String(buttonIndex===index)));atlasSummary.forEach((card,cardIndex)=>{if(cardIndex===index)card.setAttribute('data-active','true');else card.removeAttribute('data-active');});atlasCurrent.textContent=atlasNotes[index]||atlasNotes[0]||'Unnamed Focus';}function atlasRender(reason){const version=atlasCore?.dataset.workflowVersion||'0';const zoom=Number(atlasZoom.value);const active=Math.min(atlasNotes.length-1,Number(atlasFocus.value)||0);atlasShell.style.setProperty('--atlas-zoom',String(zoom));atlasZoomValue.textContent=zoom+'%';atlasCount.textContent=String(atlasCaptures);atlasSetActive(active);atlasModeLabel.textContent={brief:'Briefing',trace:'Track',handoff:'Handoff'}[atlasShell.dataset.atlasMode]||'Briefing';atlasState.textContent=reason+' · Core Version '+version;}atlasModeButtons.forEach(button=>button.addEventListener('click',()=>{atlasModeButtons.forEach(item=>item.classList.toggle('primary',item===button));atlasShell.dataset.atlasMode=button.dataset.atlasMode;atlasRender('Switched to'+button.textContent);announce('Chart Mode:'+button.textContent);}));atlasCards.forEach((button,index)=>button.addEventListener('click',()=>{atlasFocus.value=String(index);atlasRender('Sample focus switched');announce('Chart focus:'+atlasNotes[index]);}));atlasZoom.addEventListener('input',()=>{atlasRender('Layout scale updated');announce('Graph Magnification '+atlasZoom.value+'%');});atlasFocus.addEventListener('change',()=>{atlasRender('Sampling Focus Switched');announce('Sampling Focus:'+atlasNotes[Number(atlasFocus.value)||0]);});document.querySelector('#atlasCapture').addEventListener('click',()=>{const index=Math.min(atlasNotes.length-1,Number(atlasFocus.value)||0);const note=atlasNotes[index]||atlasNotes[0]||'Unnamed Focus';const version=atlasCore?.dataset.workflowVersion||'0';atlasCaptures+=1;const item=document.createElement('li');item.textContent='Sample '+atlasCaptures+' · '+note+' · Core Version '+version;const empty=atlasLog.querySelector('li')?.textContent==='Waiting for the first graph sample';if(empty)atlasLog.replaceChildren(item);else atlasLog.prepend(item);while(atlasLog.children.length>6)atlasLog.lastElementChild.remove();atlasRender('Included in sample '+atlasCaptures);announce('Included in sample '+atlasCaptures+' · '+note);});atlasCore?.addEventListener('focusin',()=>atlasRender('Main Case Gets Focus'));atlasCore?.addEventListener('click',()=>atlasRender('Primary example interaction'));atlasRender('Waiting to create sample');
  </script>
</body>
</html>