/* ===== OBLIGATION 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-obligation`, so it needs
   nothing from home.css and can't collide with other mocks. */
function HomeObligationMock() {
  return (
    <div dangerouslySetInnerHTML={{__html: `
<style>
  .ptmock-home-obligation { 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-obligation .pt-mock-hdr { padding:13px 18px; border-bottom:1px solid #EEE4DC; display:flex; align-items:center; gap:9px; }
  .ptmock-home-obligation .pt-mock-hdr-dot { width:9px; height:9px; border-radius:50%; background:#4A8C68; flex-shrink:0; }
  .ptmock-home-obligation .pt-mock-hdr-dot--ac { background:#5A45DE; }
  .ptmock-home-obligation .pt-mock-hdr-title { font-size:13.5px; font-weight:600; color:#6B6259; }
  .ptmock-home-obligation .pt-mock-hdr-count { margin-left:auto; font-size:11.3px; font-weight:700; color:#6B6259; }
  .ptmock-home-obligation .pt-mock-hdr-count--gr { color:#2F6B47; }
  .ptmock-home-obligation .pt-obl-row { display:flex; align-items:center; gap:10px; padding:11px 18px; border-bottom:1px solid #F1E9E2; }
  .ptmock-home-obligation .pt-obl-row:last-child { border-bottom:none; }
  .ptmock-home-obligation .pt-obl-name { font-size:14px; font-weight:600; flex:1; min-width:0; }
  .ptmock-home-obligation .pt-obl-risk { display:inline-flex; align-items:center; gap:5px; font-size:11.3px; font-weight:700; width:58px; }
  .ptmock-home-obligation .pt-obl-risk-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
  .ptmock-home-obligation .pt-obl-risk--gr  { color:#2F6B47; }
  .ptmock-home-obligation .pt-obl-risk--am  { color:#B07A1F; }
  .ptmock-home-obligation .pt-obl-risk--red { color:#B4452F; }
  .ptmock-home-obligation .pt-obl-risk-dot--gr  { background:#4A8C68; }
  .ptmock-home-obligation .pt-obl-risk-dot--am  { background:#C98A3C; }
  .ptmock-home-obligation .pt-obl-risk-dot--red { background:#B4452F; }
  .ptmock-home-obligation .pt-obl-badge { font-size:11.3px; font-weight:700; padding:4px 10px; border-radius:999px; width:84px; text-align:center; }
  .ptmock-home-obligation .pt-obl-badge--res  { color:#2F6B47; background:#DBEBDF; }
  .ptmock-home-obligation .pt-obl-badge--rem  { color:#5A45DE; background:#CEC2EF; }
  .ptmock-home-obligation .pt-activity { border-top:1px solid #EEE4DC; background:#F7F1EC; padding:13px 18px; }
  .ptmock-home-obligation .pt-activity-hdr { font-size:10.8px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#A89E95; margin-bottom:10px; }
  .ptmock-home-obligation .pt-activity-row { display:flex; align-items:baseline; gap:9px; padding:3px 0; }
  .ptmock-home-obligation .pt-activity-dot { flex:none; width:6px; height:6px; border-radius:50%; align-self:center; }
  .ptmock-home-obligation .pt-activity-dot--ac { background:#5A45DE; }
  .ptmock-home-obligation .pt-activity-dot--gr { background:#4A8C68; }
  .ptmock-home-obligation .pt-activity-dot--gy { background:#C9BBB0; }
  .ptmock-home-obligation .pt-activity-text { flex:1; min-width:0; font-size:12.4px; color:#5A514A; line-height:1.35; }
  .ptmock-home-obligation .pt-activity-text strong { color:#2A2420; font-weight:600; }
  .ptmock-home-obligation .pt-activity-time { font-size:11.3px; color:#A89E95; white-space:nowrap; flex-shrink:0; }
</style>
<div class="ptmock-home-obligation">
  <div class="pt-mock-hdr">
    <span class="pt-mock-hdr-dot"></span>
    <span class="pt-mock-hdr-title">Obligation register</span>
    <span class="pt-mock-hdr-count pt-mock-hdr-count--gr">12 / 12 evidenced</span>
  </div>
  <div>
    <div class="pt-obl-row">
      <span class="pt-obl-name">Super Guarantee · pay day</span>
      <span class="pt-obl-risk pt-obl-risk--gr"><span class="pt-obl-risk-dot pt-obl-risk-dot--gr"></span>Low</span>
      <span class="pt-obl-badge pt-obl-badge--res">Resolved</span>
    </div>
    <div class="pt-obl-row">
      <span class="pt-obl-name">Award rate review</span>
      <span class="pt-obl-risk pt-obl-risk--am"><span class="pt-obl-risk-dot pt-obl-risk-dot--am"></span>Med</span>
      <span class="pt-obl-badge pt-obl-badge--res">Resolved</span>
    </div>
    <div class="pt-obl-row">
      <span class="pt-obl-name">Underpayment · casual loading</span>
      <span class="pt-obl-risk pt-obl-risk--red"><span class="pt-obl-risk-dot pt-obl-risk-dot--red"></span>High</span>
      <span class="pt-obl-badge pt-obl-badge--rem">Remediating</span>
    </div>
    <div class="pt-obl-row">
      <span class="pt-obl-name">STP finalisation</span>
      <span class="pt-obl-risk pt-obl-risk--gr"><span class="pt-obl-risk-dot pt-obl-risk-dot--gr"></span>Low</span>
      <span class="pt-obl-badge pt-obl-badge--res">Resolved</span>
    </div>
  </div>
  <div class="pt-activity">
    <div class="pt-activity-hdr">Activity log · audit trail</div>
    <div class="pt-activity-row"><span class="pt-activity-dot pt-activity-dot--ac"></span><span class="pt-activity-text"><strong>K. Lewis</strong> attached evidence to Award rate review</span><span class="pt-activity-time">10:42am</span></div>
    <div class="pt-activity-row"><span class="pt-activity-dot pt-activity-dot--gr"></span><span class="pt-activity-text"><strong>M. Brown</strong> marked Super Guarantee · pay day paid</span><span class="pt-activity-time">Yest 4:15pm</span></div>
    <div class="pt-activity-row"><span class="pt-activity-dot pt-activity-dot--gy"></span><span class="pt-activity-text"><strong>J. Murphy</strong> opened remediation · casual loading</span><span class="pt-activity-time">Mon 9:08am</span></div>
  </div>
</div>
`}}/>
  );
}

window.HomeObligationMock = HomeObligationMock;