Consent-aware measurement

<div class="consent"><div class="head">CONSENT <button id="toggle">GRANTED</button></div><div class="pipeline"><div>VISITOR</div><span id="flow">→</span><div id="id">IDENTIFIER</div><span>→</span><div>MEASURE</div></div><div class="status" id="status">IDENTIFIABLE PATH OPEN</div></div>

.consent{width:min(86%,590px);font:850 clamp(10px,max(2vmin,1vw),14px)/1.2 sans-serif}.head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--fg);padding-bottom:8px}.head button{border:1px solid var(--fg);background:var(--fg);color:var(--bg);font:inherit;padding:clamp(5px,1.5vmin,10px);cursor:pointer}.pipeline{display:flex;align-items:center;justify-content:space-between;gap:clamp(3px,1.5vmin,12px);margin:clamp(22px,7vmin,55px) 0}.pipeline>div{flex:1;text-align:center;padding:clamp(9px,3vmin,20px) 3px;border:1px solid var(--line);font-size:clamp(10px,max(1.6vmin,1vw),13px);background:var(--surface)}.pipeline #id{background:var(--accent);color:var(--bg);border-color:var(--accent);transition:background .15s,color .15s}.pipeline #id.off{background:var(--surface);color:var(--muted);border-style:dashed;text-decoration:line-through}.pipeline span{font-size:clamp(14px,4vmin,30px);color:var(--accent)}.status{text-align:center;color:var(--accent);border-top:1px solid var(--line);padding-top:9px;letter-spacing:.06em}.status.off{color:var(--muted)}

let granted=true;function draw(){document.querySelector('#toggle').textContent=granted?'GRANTED':'DENIED';document.querySelector('#id').classList.toggle('off',!granted);document.querySelector('#status').textContent=granted?'IDENTIFIABLE PATH OPEN':'IDENTIFIABLE PATH CLOSED';document.querySelector('#status').classList.toggle('off',!granted)}document.querySelector('#toggle').onclick=()=>{clearInterval(timer);granted=!granted;draw()};draw();const timer=setInterval(()=>{granted=!granted;draw()},1600);