const $=s=>document.querySelector(s);
const fams=[...new Set(TAX.map(t=>t[2]))];
const fsel=$('#fam'),csel=$('#coord');
fams.forEach(f=>fsel.add(new Option(f,f)));
function fillCoords(){csel.length=1;TAX.filter(t=>!fsel.value||t[2]===fsel.value).forEach(t=>csel.add(new Option(t[1],t[0])))}
fillCoords();
let shown=12,list=[];
function esc(s){return String(s).replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]))}
function render(){
 const q=$('#q').value.toLowerCase(),f=fsel.value,c=csel.value,l=$('#lab').value;
 list=ROWS.filter(r=>{
  if(l==='yes'&&!r.d.length)return false; if(l==='no'&&r.d.length)return false;
  if(c&&!r.d.some(d=>d[0]==c))return false;
  if(f&&!r.d.some(d=>TAX[d[0]-1][2]===f))return false;
  if(q&&!r.turns.some(t=>t[1].toLowerCase().includes(q)))return false;
  return true});
 $('#count').textContent=list.length+' of '+ROWS.length+' sampled rows';
 $('#rows').innerHTML=list.slice(0,shown).map(r=>{
  const t=r.turns.map((x,i)=>`<div class="turn ${x[0]} ${i===r.t?'t':''}"><small>Speaker ${x[0]}${i===r.t?' (target)':''}</small>${esc(x[1])}</div>`).join('');
  const ch=r.d.length?r.d.map(d=>`<span class="chip" title="${esc(TAX[d[0]-1][3])}">${esc(TAX[d[0]-1][1])} ${d[1]}</span>`).join(''):'<span class="chip none">no expressed coordinate</span>';
  return `<div class="dlg">${t}<div>${ch}</div><div class="meta">Labels are for speaker ${r.s}, turn ${r.t}. Hover a label for its definition.</div></div>`}).join('')||'<p class="note">No rows match.</p>';
 $('#more').style.display=list.length>shown?'inline-block':'none';
}
['q','coord','lab'].forEach(i=>$('#'+i).addEventListener('input',()=>{shown=12;render()}));
fsel.addEventListener('input',()=>{fillCoords();shown=12;render()});
$('#more').onclick=()=>{shown+=12;render()};
render();
const fam=$('#famgrid');fams.forEach(f=>{const n=TAX.filter(t=>t[2]===f);fam.insertAdjacentHTML('beforeend',`<div><b>${esc(f)}</b><span>${n.length} coordinates, e.g. ${n.slice(0,3).map(x=>esc(x[1])).join(', ')}</span></div>`)});
const io=new IntersectionObserver(e=>e.forEach(x=>x.isIntersecting&&x.target.classList.add('in2')),{threshold:.08});
document.querySelectorAll('section').forEach(s=>{s.classList.add('fade');io.observe(s)});
document.querySelectorAll('.stat b[data-n]').forEach(el=>{const n=+el.dataset.n,d=el.dataset.d||'',s=el.dataset.s||'';let k=0;const id=setInterval(()=>{k+=n/30;if(k>=n){k=n;clearInterval(id)}el.textContent=(d?k.toFixed(+d):Math.round(k).toLocaleString())+s},30)});