/* ===== CHECKLIST MOCK — fully self-contained =====
   Markup AND styling live in this one file. The CSS is in the <style> block
   below, scoped under the unique root class `.ptmock-home-checklist`, so it needs
   nothing from home.css / governance.css / payops.css and can't collide with
   other mocks.

   To update: design the component in isolation (e.g. Claude design) as plain
   HTML + a <style> block, scope every rule under one root class, then paste
   the whole thing between the backticks below. Keep the function name and the
   `window.HomeChecklistMock = HomeChecklistMock` line. No JSX conversion needed. */
function HomeChecklistMock() {
  return (
    <div dangerouslySetInnerHTML={{__html: `
<style>
  .ptmock-home-checklist { background:#FCFAF8; border:1px solid #E6DBD2; border-radius:18px; box-shadow:0 30px 60px -40px rgba(26,22,19,.4); overflow:hidden; font-family:'Hanken Grotesk',-apple-system,system-ui,sans-serif; }
  .ptmock-home-checklist .hdr { padding:13px 18px; border-bottom:1px solid #EEE4DC; display:flex; align-items:center; gap:9px; }
  .ptmock-home-checklist .dot { width:9px; height:9px; border-radius:50%; background:#4A8C68; flex-shrink:0; }
  .ptmock-home-checklist .htitle { font-size:13.5px; font-weight:700; color:#2A2420; }
  .ptmock-home-checklist .count { margin-left:auto; font-size:11.3px; font-weight:700; color:#2F6B47; }
  .ptmock-home-checklist .list { padding:14px 18px; display:flex; flex-direction:column; }
  .ptmock-home-checklist .row { display:flex; align-items:center; gap:11px; padding:7px 0; border-bottom:1px solid #F2EAE3; }
  .ptmock-home-checklist .row:last-child { border-bottom:none; }
  .ptmock-home-checklist .cdot { flex:none; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
  .ptmock-home-checklist .cdot.done { background:#4A8C68; color:#fff; font-size:10.8px; font-weight:800; }
  .ptmock-home-checklist .cdot.live { border:2px solid #5A45DE; }
  .ptmock-home-checklist .cdot-inner { width:6px; height:6px; border-radius:50%; background:#5A45DE; }
  .ptmock-home-checklist .cdot.empty { border:1.5px solid #C9BBB0; }
  .ptmock-home-checklist .cname { font-size:14px; font-weight:600; white-space:nowrap; flex:1; min-width:0; color:#2A2420; }
  .ptmock-home-checklist .cname.mute { color:#8A8078; }
  .ptmock-home-checklist .cmeta { font-size:11.9px; color:#8A8078; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ptmock-home-checklist .cst { font-size:11.3px; font-weight:700; flex-shrink:0; }
  .ptmock-home-checklist .cst.done { color:#2F6B47; }
  .ptmock-home-checklist .cst.live { color:#5A45DE; }
  .ptmock-home-checklist .cst.q { color:#A89E95; }
  .ptmock-home-checklist .ahdr { font-size:10.3px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#A89E95; margin:12px 0 2px; padding-top:12px; border-top:1px solid #EEE4DC; }
  .ptmock-home-checklist .arow { display:flex; align-items:flex-start; gap:11px; padding:9px 0; border-bottom:1px solid #F2EAE3; }
  .ptmock-home-checklist .arow:last-child { border-bottom:none; }
  .ptmock-home-checklist .grow { flex:1; min-width:0; }
  .ptmock-home-checklist .aicon { flex:none; width:18px; height:18px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:11.9px; font-weight:800; margin-top:1px; }
  .ptmock-home-checklist .aicon.red { background:#F6E2DB; color:#B4452F; }
  .ptmock-home-checklist .aicon.ac { background:#CEC2EF; color:#3A2E78; }
  .ptmock-home-checklist .atitle { font-size:14px; font-weight:600; color:#2A2420; line-height:1.25; }
  .ptmock-home-checklist .asub { font-size:11.9px; color:#8A8078; margin-top:2px; }
  .ptmock-home-checklist .ast { font-size:11.3px; font-weight:700; flex-shrink:0; margin-top:1px; }
  .ptmock-home-checklist .ast.done { color:#2F6B47; }
  .ptmock-home-checklist .ast.ac { color:#5A45DE; }
</style>
<div class="ptmock-home-checklist">
  <div class="hdr">
    <span class="dot"></span>
    <span class="htitle">Pay run #143 · June 2026</span>
    <span class="count">9 of 12 done</span>
  </div>
  <div class="list">
    <div class="row"><span class="cdot done">✓</span><span class="cname">Timesheets imported &amp; locked</span><span class="cmeta">A. Chen · 8:42am</span><span class="cst done">Done</span></div>
    <div class="row"><span class="cdot done">✓</span><span class="cname">Award interpretation reviewed</span><span class="cmeta">A. Chen · 10:03am</span><span class="cst done">Done</span></div>
    <div class="row"><span class="cdot live"><span class="cdot-inner"></span></span><span class="cname">Calculate pay run #143</span><span class="cmeta">S. Patel · 10:30am</span><span class="cst live">62%</span></div>
    <div class="row"><span class="cdot empty"></span><span class="cname mute">STP lodgement &rarr; ATO</span><span class="cmeta" style="color:#A89E95">due Wed 10</span><span class="cst q">Queued</span></div>
    <div class="ahdr">Employee adjustments · 2</div>
    <div class="arow"><span class="aicon red">&#8615;</span><div class="grow"><div class="atitle">WorkCover payment &mdash; R. Okafor</div><div class="asub">Workers' comp top-up · 2 weeks · D. Wong · 9:48am</div></div><span class="ast done">Approved</span></div>
    <div class="arow"><span class="aicon ac">&#10554;</span><div class="grow"><div class="atitle">Leave adjustment &mdash; T. Nguyen</div><div class="asub">10 days parental leave · J. Murphy · 10:21am</div></div><span class="ast ac">Applied</span></div>
  </div>
</div>
`}}/>
  );
}

window.HomeChecklistMock = HomeChecklistMock;