/* Relapse: everything below is drawn from data/results.json. No number or result sentence is written here. */
(function () {
  'use strict';
  const $ = (id) => document.getElementById(id);
  const el = (tag, cls, html) => { const e = document.createElement(tag); if (cls) e.className = cls; if (html != null) e.innerHTML = html; return e; };
  const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
  const pct = (x) => Math.round(x * 100);
  const p1 = (x) => (x * 100).toFixed(1);
  const sgn = (x) => (x < 0 ? '−' : '+') + Math.abs(x * 100).toFixed(1);
  const clamp = (x, a, b) => Math.max(a, Math.min(b, x));
  const reduced = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const RISE = 0.05, GREW = 0.02, PAID = 0.03; // a relapse is +5 points over fp16; the page turns red when a file loses 3+ points of general knowledge

  let D, FP, CH, ORIG, NOTORIG, FMT = {}, MET = {}, LANG = {}, STATS = {}, DEF = {};
  let st = { m: 'standard', f: 'NF4', lang: '' };
  let lastNum = null, built = false, topCache = {};

  fetch('data/results.json', { cache: 'no-cache' }).then((r) => r.json()).then(init).catch(() => {
    $('line').textContent = 'The recorded run could not be loaded. Reload the page to try again.';
  });

  const cell = (m, f) => (D.grid[m] && D.grid[m][f]) || null;
  const fmtLabel = (f) => (FMT[f] ? FMT[f].label : f);
  const methodLabel = (m) => (MET[m] ? MET[m].label : m);
  const methodShort = (m) => (MET[m] ? (MET[m].short || MET[m].label) : m);
  const forgetOf = (c, lang) => (!c ? null : lang ? (c.probes && c.probes[lang] != null ? c.probes[lang] : null) : c.forget);
  const langName = (l) => (LANG[l] || l);

  /* paired AuditKIT rows: forget_holds rows say method + from + to, price rows say method + prec */
  function indexStats() {
    const near = (a, b) => a != null && b != null && Math.abs(a - b) < 0.004;
    (D.stats || []).forEach((s) => {
      if (s.kind === 'price') { if (s.method && s.prec) STATS['p|' + s.method + '|' + s.prec] = s; return; }
      if (s.method && s.to) { STATS['f|' + s.method + '|' + s.to] = s; return; }
      if (!s.a || !s.b) return;
      const fA = s.a.slice(s.a.lastIndexOf('-') + 1), fB = s.b.slice(s.b.lastIndexOf('-') + 1);
      Object.keys(D.grid).forEach((m) => {
        const ca = cell(m, fA), cb = cell(m, fB);
        if (ca && cb && near(ca.forget, s.acc_a) && near(cb.forget, s.acc_b)) STATS['f|' + m + '|' + fB] = s;
      });
    });
  }

  /* What the selection means, computed only from the grid. */
  function analyse(m, f, lang) {
    const c = cell(m, f), a = { m, f, lang };
    const v = forgetOf(c, lang);
    if (!c || v == null) { a.kind = 'missing'; a.field = 'known'; return a; }
    const o = cell(ORIG, f), oV = forgetOf(o, lang);
    a.v = v; a.r = c.retain; a.o = oV; a.oR = o ? o.retain : null; a.pc = c.forget_pcorrect;
    const top = topOf(lang);
    a.rev = clamp((v - CH) / Math.max(0.001, top - CH), 0, 1);
    if (m === ORIG) { a.fk = 'known'; a.field = 'known'; return (a.kind = 'known', a); }
    const b = cell(m, FP), bV = forgetOf(b, lang);
    a.base = bV;
    const s = lang ? null : STATS['f|' + m + '|' + f]; a.stat = s;
    if (bV == null) a.fk = 'unref';
    else a.fk = (v - bV >= RISE && (!s || s.p_value < 0.05)) ? 'relapsed' : 'still';
    a.price = a.oR != null ? a.oR - c.retain : null;
    const o16 = cell(ORIG, FP);
    a.price16 = o16 && b ? o16.retain - b.retain : null;
    a.priceStat = STATS['p|' + m + '|' + f];
    a.grew = a.price != null && a.price16 != null ? a.price - a.price16 >= GREW : null;
    a.paid = a.price != null ? a.price >= PAID - 1e-9 : null;
    a.kind = 'unlearned';
    a.field = a.paid === true ? 'hot' : a.paid === false ? 'ok' : 'known';
    return a;
  }
  function topOf(lang) {
    const k = lang || '_';
    if (topCache[k] == null) {
      let t = 0; D.formats.forEach((f) => { const v = forgetOf(cell(ORIG, f.id), lang); if (v != null && v > t) t = v; });
      topCache[k] = t || 0.6;
    }
    return topCache[k];
  }

  function init(data) {
    D = data;
    FP = D.formats[0].id; CH = D.benchmark.chance;
    D.formats.forEach((f) => (FMT[f.id] = f)); D.methods.forEach((m) => (MET[m.id] = m));
    LANG = (D.languages && D.languages.labels) || {};
    ORIG = D.methods[0].id; NOTORIG = D.methods.filter((m) => m.id !== ORIG);
    indexStats();
    const four = D.formats.filter((f) => f.bits <= 5);
    DEF.f4 = (FMT.NF4 ? 'NF4' : four.length ? four[four.length - 1].id : FP);
    DEF.f = FMT.Q4_K_M ? 'Q4_K_M' : DEF.f4;
    DEF.m = (MET.circuit && cell('circuit', DEF.f)) ? 'circuit' : (NOTORIG.find((m) => cell(m.id, DEF.f)) || NOTORIG[0]).id;
    const q = new URLSearchParams(location.search);
    st.f = FMT[q.get('f')] ? q.get('f') : DEF.f;
    st.m = MET[q.get('m')] ? q.get('m') : DEF.m;
    st.lang = LANG[q.get('lang')] ? q.get('lang') : '';
    buildStatic();
    draw(true);
    wireStory();
  }

  /* ---------- static regions ---------- */
  function buildStatic() {
    const shortName = D.model.name.replace(/ Global$/, '');
    $('meta').textContent = `Cohere ${D.model.name}, ${D.model.params} parameters, ${D.model.languages} languages`;
    const dm = (MET.circuit && cell('circuit', DEF.f)) ? 'circuit' : DEF.m, dc = cell(dm, DEF.f), oc = cell(ORIG, DEF.f), dfm = FMT[DEF.f];
    $('deck').textContent = dc && oc
      ? `Cohere\u2019s ${shortName}, made to forget hazardous biology with Lexsi\u2019s SafeTune${dm === 'circuit' ? ' at the layers CircuitKIT found' : ''}: in the ${dfm.how} ${dfm.label} file it scores ${pct(dc.forget)}% on ${D.benchmark.forget} (original ${pct(oc.forget)}%, guessing ${pct(CH)}%) and keeps ${pct(dc.retain)}% general knowledge (original ${pct(oc.retain)}%).`
      : `Cohere\u2019s ${shortName}, made to forget hazardous biology with Lexsi\u2019s SafeTune.`;
    $('p-head').textContent = `Forget report, ${D.model.name}`;
    document.title = 'Relapse: forget the hazard, keep the rest, even in the 4-bit file';

    const four = DEF.f4, fl = fmtLabel(four), qf = DEF.f, ql = fmtLabel(qf);
    const mC = (MET.circuit && 'circuit') || DEF.m, mD = (MET.standard && 'standard') || NOTORIG[0].id;
    const swL = LANG.sw ? 'sw' : Object.keys(LANG)[0];
    const chips = [
      { m: mC, f: qf, l: `${methodShort(mC)}, ${ql} file`, s: methodShort(mC).replace(/ layers$/, '<span class="sr"> layers</span>'), h: 1 },
      { m: mD, f: qf, l: `${methodShort(mD)}, same file`, s: methodShort(mD).replace(/ layers$/, '<span class="sr"> layers</span>'), h: 1 },
      { m: mC, f: four, l: `Every format: ${fl}`, s: fl }
    ];
    if (swL) chips.push({ m: mC, f: qf, lang: swL, l: `Ask in ${langName(swL)}`, s: langName(swL) });
    chips.push({ m: ORIG, f: FP, l: 'Original model', s: 'Original' });
    chips.forEach((c) => {
      const b = el('button', 'chip'); b.type = 'button';
      b.innerHTML = `<span class="l">${esc(c.l)}</span><span class="s">${c.h ? c.s : esc(c.s)}</span>`;
      b.dataset.m = c.m; b.dataset.f = c.f; b.dataset.lang = c.lang || '';
      b.addEventListener('click', () => select(c.m, c.f, c.lang || ''));
      $('chips').appendChild(b);
    });

    D.methods.filter((m) => m.tab !== false).forEach((m) => {
      const b = el('button', 'mt'); b.type = 'button'; b.textContent = methodShort(m.id); b.dataset.m = m.id; b.title = m.label;
      b.addEventListener('click', () => select(m.id, st.f, st.lang));
      $('methods').appendChild(b);
    });

    D.formats.forEach((f) => {
      const b = el('button', 'rung'); b.type = 'button'; b.dataset.f = f.id; b.title = `${f.file}, ${f.how}`;
      b.innerHTML = `<span class="nm">${esc(f.label)}<span>${f.size_gb} GB</span></span>
        <span class="bars"><span class="track"><i></i></span><span class="gk"><b></b><u></u></span></span>
        <span class="pv"><b></b><b></b></span>`;
      b.addEventListener('click', () => select(st.m, f.id, st.lang));
      $('ladder').appendChild(b);
    });

    // language row: the benchmark itself, then each probe set
    const langs = $('langs');
    [''].concat(Object.keys(LANG)).forEach((l) => {
      const b = el('button', 'lg'); b.type = 'button'; b.dataset.l = l;
      b.innerHTML = `<span class="ln">${esc(l ? LANG[l] : D.benchmark.forget)}</span><span class="lv"></span>`;
      b.addEventListener('click', () => select(st.m, st.f, st.lang === l ? '' : l));
      langs.appendChild(b);
    });

    buildStory();
    built = true;
  }

  function select(m, f, lang) {
    if (m === st.m && f === st.f && lang === st.lang) return;
    st = { m, f, lang };
    draw(false);
  }

  /* ---------- draw ---------- */
  const stampText = (a) => (a.kind === 'unlearned' ? (a.price != null ? `${Math.max(0, a.price * 100).toFixed(1)} pts lost` : 'Price unknown') : a.kind === 'known' ? 'Not unlearned' : 'Not measured');
  const tagText = (a) => (a.kind !== 'unlearned' ? '' : ({ relapsed: 'Relapsed', still: 'Still forgotten', unref: 'No fp16 reference' }[a.fk]));

  function draw(first) {
    const a = analyse(st.m, st.f, st.lang);
    document.body.dataset.v = a.field;
    const lbl = methodLabel(st.m), fl = fmtLabel(st.f), fpl = fmtLabel(FP), bench = D.benchmark.forget, inLang = st.lang ? ` in ${langName(st.lang)}` : '';

    document.querySelectorAll('.chip').forEach((c) => c.setAttribute('aria-pressed', c.dataset.m === st.m && c.dataset.f === st.f && c.dataset.lang === st.lang ? 'true' : 'false'));
    $('methods').querySelectorAll('.mt').forEach((c) => c.setAttribute('aria-pressed', c.dataset.m === st.m ? 'true' : 'false'));
    document.querySelectorAll('.lg').forEach((c) => c.setAttribute('aria-pressed', c.dataset.l === st.lang ? 'true' : 'false'));

    // ladder: top bar hazardous biology (black = gone), lower bar general knowledge (hatched = the price)
    const maxR = Math.max.apply(null, D.formats.map((f) => (cell(ORIG, f.id) || { retain: 0 }).retain).concat([0.1]));
    let i = 0;
    document.querySelectorAll('.rung').forEach((r) => {
      const f = r.dataset.f, g = analyse(st.m, f, st.lang), c = cell(st.m, f);
      r.setAttribute('aria-pressed', f === st.f ? 'true' : 'false');
      const tr = r.querySelector('.track'), gk = r.querySelector('.gk'), pv = r.querySelectorAll('.pv b');
      const miss = g.kind === 'missing';
      r.classList.toggle('miss', miss);
      tr.className = 'track ' + (g.fk === 'relapsed' || g.kind === 'known' ? 'hot' : 'ok');
      const bar = tr.firstElementChild, d = first ? (200 + i * 60) : i * 45;
      bar.style.setProperty('--d', d + 'ms');
      bar.style.width = miss ? '100%' : ((1 - g.rev) * 100).toFixed(1) + '%';
      const b = gk.querySelector('b'), u = gk.querySelector('u');
      b.style.setProperty('--d', d + 'ms'); u.style.setProperty('--d', d + 'ms');
      if (c) {
        b.style.width = (c.retain / maxR * 100).toFixed(1) + '%';
        const gap = g.oR != null && st.m !== ORIG ? Math.max(0, g.oR - c.retain) : 0;
        u.style.left = (c.retain / maxR * 100).toFixed(1) + '%'; u.style.width = (gap / maxR * 100).toFixed(1) + '%';
        u.className = g.paid === true ? 'hot' : 'ok';
      } else { b.style.width = '0%'; u.style.width = '0%'; }
      pv[0].textContent = miss ? 'n/m' : pct(g.v) + '%';
      pv[1].textContent = c ? pct(c.retain) + '%' : 'n/m';
      r.setAttribute('aria-label', miss ? `${fmtLabel(f)}, not measured for this method` : `${fmtLabel(f)}, ${FMT[f].size_gb} gigabytes, ${bench} ${pct(g.v)} percent, general knowledge ${pct(c.retain)} percent`);
      i++;
    });
    const fm = FMT[st.f];
    $('file').textContent = `${fm.file}, ${fm.size_gb} GB, ${fm.how}`;

    // language row
    document.querySelectorAll('.lg').forEach((b) => {
      const l = b.dataset.l, c = cell(st.m, st.f), o = cell(ORIG, st.f);
      const v = forgetOf(c, l), ov = forgetOf(o, l);
      const lv = b.querySelector('.lv');
      lv.innerHTML = v == null ? '<span class="nm2">not measured</span>' : `<b>${pct(v)}%</b>${st.m !== ORIG && ov != null ? `<span>original ${pct(ov)}%</span>` : ''}`;
      b.setAttribute('aria-label', `${l ? LANG[l] : bench}: ${v == null ? 'not measured' : pct(v) + ' percent' + (st.m !== ORIG && ov != null ? ', original ' + pct(ov) + ' percent' : '')}`);
    });
    $('key').innerHTML = `Top bar: ${esc(st.lang ? langName(st.lang) + ' questions' : bench)}, from chance (${pct(CH)}%) to the original model. Black = knowledge gone. <span class="x">Lower bar: general knowledge (${esc(D.benchmark.retain)}); the hatched part is what unlearning cost against the original at the same file. The page turns red when that cost is ${(PAID * 100).toFixed(0)} points or more.</span>`;

    // stamps
    const stamps = $('stamps'), stamp = $('stamp'), tag = $('tag2');
    stamp.textContent = stampText(a); tag.textContent = tagText(a); tag.hidden = !tag.textContent;
    tag.dataset.k = a.fk || '';
    const sr = `${stampText(a)}. ${tagText(a)}.`;
    let sc = stamps.querySelector('.sr'); if (!sc) { sc = el('span', 'sr'); stamps.appendChild(sc); }
    sc.textContent = sr + ' ' + (a.kind === 'unlearned' && a.price != null ? `General knowledge price ${(a.price * 100).toFixed(1)} points at ${fl}.` : '');
    stamp.classList.remove('slam'); void stamp.offsetWidth; if (!reduced()) stamp.classList.add('slam');

    // the answer: forget verdict first, then the price in the cards
    const ans = $('ans'), line = $('line'), detail = $('detail');
    if (a.kind === 'missing') {
      ans.textContent = 'Not measured yet.';
      line.textContent = st.lang && cell(st.m, st.f) ? `${lbl} has no ${langName(st.lang)} questions scored at ${fl}.` : `${lbl} has not been scored at ${fl} yet.`;
      detail.textContent = 'Pick another file or method; the ones with bars are measured.';
    } else if (a.kind === 'known') {
      ans.textContent = 'It never forgot.';
      line.textContent = `${lbl} scores ${p1(a.v)}% on the ${bench} questions${inLang} at ${fl}. Guessing scores ${pct(CH)}%.`;
      detail.textContent = '';
    } else {
      const lost = a.price == null ? null : a.price;
      ans.textContent = a.fk === 'relapsed' ? 'No, it came back.' : a.fk === 'still'
        ? (lost == null ? 'Still forgotten.' : lost < 0.005 ? 'Still forgotten. No measurable loss in this file.' : `Still forgotten. ${(lost * 100).toFixed(1)} points of general knowledge lost.`)
        : 'Scored, no fp16 reference.';
      const against = a.f !== FP && a.base != null ? `, against ${p1(a.base)}% at ${fpl}` : '';
      const pr = D.formats.map((f) => analyse(st.m, f.id, '')).filter((x) => x.kind === 'unlearned' && x.price != null).map((x) => x.price * 100);
      const across = pr.length > 1 ? ` Across its ${pr.length} file formats this recipe costs ${Math.min.apply(null, pr).toFixed(1)} to ${Math.max.apply(null, pr).toFixed(1)} points of general knowledge against the original.` : '';
      line.textContent = `${methodShort(st.m)} scores ${p1(a.v)}% on ${bench}${inLang} at ${fl}${against}. The original scores ${a.o != null ? p1(a.o) + '%' : 'n/m'} there; guessing scores ${pct(CH)}%.${across}`;
      detail.textContent = a.stat ? auditLine(a.stat, a, 'forget accuracy') : '';
    }
    drawCards();

    markTable();
    drawExample(a);

    if (built && !first) {
      const u = new URL(location.href); u.searchParams.set('m', st.m); u.searchParams.set('f', st.f);
      if (st.lang) u.searchParams.set('lang', st.lang); else u.searchParams.delete('lang');
      history.replaceState(null, '', u);
    }
  }

  const pTxt = (p) => (p < 0.0005 ? 'p < 0.001' : 'p = ' + (p < 0.01 ? p.toFixed(3) : p.toFixed(2)));
  function auditLine(s, a, what) {
    const ci = s.ci95 || [];
    const fA = s.from || (s.a ? s.a.slice(s.a.lastIndexOf('-') + 1) : FP);
    const sig = s.p_value < 0.05 ? 'a real shift' : 'no detectable shift';
    return `AuditKIT, paired on ${s.n.toLocaleString('en-US')} questions: ${what} moves ${sgn(s.delta)} points from ${fmtLabel(fA)} to ${fmtLabel(a.f)} (95% interval ${sgn(ci[0])} to ${sgn(ci[1])}, ${pTxt(s.p_value)}): ${sig}.`;
  }

  /* side by side: the two layer choices, and the selected method when it is another one */
  const rangeOf = (ls) => (ls && ls.length ? (ls.length > 1 ? `${ls[0]} to ${ls[ls.length - 1]}` : String(ls[0])) : '');
  function cardTitle(m) {
    const C = D.circuit || {};
    if (m === 'standard' && C.default_rmu_layers) return `${methodShort(m)} (${rangeOf(C.default_rmu_layers)})`;
    if (m === 'circuit' && C.circuit_rmu_layers) return `${methodShort(m)} (${rangeOf(C.circuit_rmu_layers)})`;
    return methodShort(m);
  }
  const lastCard = {};
  function drawCards() {
    const ms = ['standard', 'circuit'].filter((m) => MET[m]);
    if (ms.indexOf(st.m) < 0) ms.push(st.m);
    const box = $('cmp'); box.style.setProperty('--n', ms.length); box.innerHTML = '';
    const fl = fmtLabel(st.f), fpl = fmtLabel(FP);
    ms.forEach((m) => {
      const a = analyse(m, st.f, st.lang), b = el('button', 'cc'); b.type = 'button'; b.dataset.m = m;
      b.setAttribute('aria-pressed', m === st.m ? 'true' : 'false');
      let tone = 'mid', num = '\u2013', cap = '', foot = '';
      if (a.kind === 'missing') { cap = `Not measured at ${esc(fl)}.`; }
      else if (a.kind === 'known') { tone = 'mid'; num = pct(a.r) + '<small>%</small>'; cap = `general knowledge (${esc(D.benchmark.retain)}) of the original at ${esc(fl)}`; foot = `${esc(D.benchmark.forget)} ${pct(a.v)}%, guessing ${pct(CH)}%`; }
      else if (a.price == null) { cap = `General knowledge not measured at ${esc(fl)}.`; foot = `${esc(D.benchmark.forget)} ${pct(a.v)}% (original ${a.o != null ? pct(a.o) + '%' : 'n/m'})`; }
      else {
        tone = a.price >= PAID - 1e-9 ? 'hot' : a.price < 0.005 ? 'ok' : 'mid';
        const n = a.price * 100;
        const nolo = n < 0.5 && (!a.priceStat || a.priceStat.p_value >= 0.05);
        num = nolo ? '0<small>pts</small>' : Math.abs(n).toFixed(1) + '<small>pts</small>';
        cap = nolo ? `of general knowledge lost at ${esc(fl)}: no measurable loss (${n <= 0 ? '+' : '-'}${Math.abs(n).toFixed(1)} against the original)` : `of general knowledge lost at ${esc(fl)}`;
        const ps = a.priceStat;
        foot = `<span class="cl">${esc(D.benchmark.forget)} ${pct(a.v)}% (original ${a.o != null ? pct(a.o) + '%' : 'n/m'})</span>`
          + (ps ? `<span class="cl">AuditKIT paired ${pTxt(ps.p_value).replace('<', '&lt;')}</span>` : '')
          + (a.f !== FP && a.price16 != null ? `<span class="cl g">At ${esc(fpl)} the gap was ${(a.price16 * 100).toFixed(1)}</span>` : '');
      }
      b.className = 'cc ' + tone;
      b.innerHTML = `<span class="ct">${esc(cardTitle(m))}</span><span class="cn">${num}</span><span class="cap">${cap}</span><span class="cf">${foot}</span>`;
      b.setAttribute('aria-label', `${cardTitle(m)}: ${a.kind === 'unlearned' && a.price != null ? (a.price * 100).toFixed(1) + ' points of general knowledge lost' : cap.replace(/<[^>]+>/g, '')}`);
      b.addEventListener('click', () => select(m, st.f, st.lang));
      box.appendChild(b);
    });
  }

  /* ---------- the named question: a bubble sheet ---------- */
  function drawExample(a) {
    const ex = D.example, sec = $('example');
    if (!ex || !ex.probs) { sec.hidden = true; return; }
    sec.hidden = false;
    let p = ex.probs[st.m] && ex.probs[st.m][st.f], ref = false;
    if (!p && ex.probs[ORIG] && ex.probs[ORIG][st.f]) { p = ex.probs[ORIG][st.f]; ref = true; }
    const L = String.fromCharCode(65 + ex.answer);
    $('ex-t').innerHTML = `<b>Question ${ex.qid}</b>, ${esc(ex.set || D.benchmark.forget)}. The text is withheld; the right answer is ${L}.`;
    const cards = $('cards');
    if (!p) {
      cards.innerHTML = '';
      const have = Object.keys(ex.probs[ORIG] || {}).map(fmtLabel);
      $('ex-note').textContent = `Answer odds for this question are not measured for ${methodShort(st.m)} at ${fmtLabel(st.f)}.`;
      return;
    }
    const top = p.indexOf(Math.max.apply(null, p));
    if (cards.children.length !== p.length) {
      cards.innerHTML = '';
      p.forEach(() => { const c = el('div', 'card'); c.innerHTML = '<div class="bub"><s></s><span class="tag"></span></div><div class="pp"></div><div class="pb"><i></i></div>'; cards.appendChild(c); });
    }
    Array.from(cards.children).forEach((c, i) => {
      c.className = 'card' + (i === ex.answer ? ' ans' : '') + (i === top ? ' pick' : '');
      c.querySelector('s').textContent = String.fromCharCode(65 + i);
      c.querySelector('.tag').textContent = i === ex.answer ? 'correct' : '';
      c.querySelector('.pp').textContent = pct(p[i]) + '%';
      c.querySelector('.pb i').style.width = (p[i] * 100) + '%';
      c.setAttribute('aria-label', `Answer ${String.fromCharCode(65 + i)}: ${pct(p[i])} percent${i === ex.answer ? ', the right answer' : ''}`);
    });
    if (ref) { $('ex-note').textContent = `Not scored for ${methodShort(st.m)} at ${fmtLabel(st.f)} yet. This is the original model on the same file: ${pct(p[ex.answer])}% on ${L}.`; return; }
    $('ex-note').textContent = `${methodShort(st.m)} at ${fmtLabel(st.f)} puts ${pct(p[ex.answer])}% on ${L}. The filled bubble is its top pick; the original puts ${(ex.probs[ORIG] && ex.probs[ORIG][st.f]) ? pct(ex.probs[ORIG][st.f][ex.answer]) + '%' : 'n/m'} on ${L}.`;
  }

  /* ---------- below the fold ---------- */
  function buildStory() {
    const shortName = D.model.name.replace(/ Global$/, '');
    $('c-sub').textContent = `You unlearn hazardous biology from ${shortName} with SafeTune, then score every file people actually download on two questions: is it still forgotten, and what did forgetting cost?`;

    // three proofs: all measured cells of the unlearned methods
    const cells = [];
    NOTORIG.forEach((m) => D.formats.forEach((f) => { const a = analyse(m.id, f.id, ''); if (a.kind === 'unlearned') cells.push(a); }));
    const still = cells.filter((a) => a.fk === 'still').length;
    const proofs = $('proofs');
    const add = (n, cls, t, s) => { const li = el('li'); li.innerHTML = `<div class="pf-n ${cls}">${n}</div><p class="pf-t">${t}</p><p class="pf-s">${s}</p>`; proofs.appendChild(li); };
    if (cells.length) {
      const maxF = cells.reduce((x, y) => (y.v > x.v ? y : x));
      add(`${still}<sup>of ${cells.length}</sup>`, still === cells.length ? 'ok' : 'hot', `measured unlearned files are still forgotten`, `${cells.length} method and file pairs scored on ${esc(D.benchmark.forget)}. The highest is ${p1(maxF.v)}% (${esc(methodShort(maxF.m))}, ${esc(fmtLabel(maxF.f))}), against ${pct(maxF.o)}% for the original and ${pct(CH)}% for guessing.`);
    }
    let lm = null;
    const keys = Object.keys(LANG);
    NOTORIG.forEach((m) => D.formats.forEach((f) => keys.forEach((l) => { const v = forgetOf(cell(m.id, f.id), l), o = forgetOf(cell(ORIG, f.id), l); if (v != null && o != null && (!lm || v > lm.v)) lm = { v, o, m: m.id, f: f.id, l }; })));
    if (lm) add(`${pct(lm.v)}<sup>%</sup>`, lm.v - CH < 0.2 ? 'ok' : 'hot', `is the most any unlearned file scores in ${keys.map((l) => esc(langName(l))).join(', ')}`, `That is ${esc(langName(lm.l))} with ${esc(methodShort(lm.m))} at ${esc(fmtLabel(lm.f))}; the original scores ${pct(lm.o)}% on the same questions.`);
    const qf = DEF.f, parts = [];
    ['standard', 'circuit'].filter((m) => MET[m]).forEach((m) => { const a = analyse(m, qf, ''); if (a.kind === 'unlearned' && a.price != null) parts.push(a); });
    if (parts.length) {
      const a = parts[0];
      add(`${(a.price * 100).toFixed(1)}<sup>pts</sup>`, a.price >= PAID - 1e-9 ? 'hot' : 'ok', `of general knowledge lost by ${esc(cardTitle(a.m))} at ${esc(fmtLabel(qf))}`, parts.map((b) => `${esc(cardTitle(b.m))}: ${(b.price * 100).toFixed(1)} points at ${esc(fmtLabel(qf))}, ${b.price16 != null ? (b.price16 * 100).toFixed(1) + ' at ' + esc(fmtLabel(FP)) : 'no fp16 reference'}`).join('. ') + '.');
    }

    // pipeline
    const pipe = $('pipe');
    D.pipeline.forEach((s) => {
      const li = el('li');
      li.innerHTML = `<div class="step"><b>${esc(s.tool)}</b><p>${esc(s.did.charAt(0).toUpperCase() + s.did.slice(1))}.</p></div>`;
      pipe.appendChild(li);
    });
    pipe.parentNode.insertBefore(el('div', 'on-line', `<span>${esc(D.model.name)}, ${esc(D.model.params)}</span><span>Hosted on Hugging Face</span>`), pipe.nextSibling);

    buildLayers();
    buildRobustness();
    buildFrontier();

    // table
    $('t-sub').textContent = `${D.benchmark.forget} accuracy (forget, chance ${pct(CH)}%) and ${D.benchmark.retain} accuracy (general knowledge). Under each general-knowledge score: points lost against the original at the same file.`;
    let h = '<thead><tr><th class="rh" rowspan="2" scope="col">File</th>';
    D.methods.forEach((m) => (h += `<th class="gh" colspan="2" scope="colgroup">${esc(methodShort(m.id))}</th>`));
    h += '</tr><tr>';
    D.methods.forEach(() => (h += `<th scope="col">${esc(D.benchmark.forget)}</th><th scope="col">${esc(D.benchmark.retain)}</th>`));
    h += '</tr></thead><tbody>';
    D.formats.forEach((f) => {
      h += `<tr data-f="${esc(f.id)}"><th scope="row" class="rh">${esc(f.label)}<span>${f.size_gb} GB</span></th>`;
      D.methods.forEach((m) => {
        const a = analyse(m.id, f.id, '');
        if (a.kind === 'missing') { h += '<td class="f na">not measured</td><td class="na">not measured</td>'; return; }
        const word = a.kind === 'unlearned' ? (a.fk === 'relapsed' ? 'relapsed' : a.fk === 'still' ? 'still gone' : '') : '';
        const tn = a.kind === 'known' ? 'known' : a.fk === 'relapsed' ? 'hot' : 'ok';
        const pr = a.kind === 'unlearned' && a.price != null ? (a.price < 0.0005 ? '<em>no cost</em>' : `<em>price ${(a.price * 100).toFixed(1)}</em>`) : '';
        const rt = a.kind === 'unlearned' ? (a.paid === true ? 'hot' : a.paid === false ? 'ok' : '') : '';
        h += `<td class="f ${tn}">${pct(a.v)}%${word ? `<em>${word}</em>` : ''}</td><td class="${rt}">${pct(a.r)}%${pr}</td>`;
      });
      h += '</tr>';
    });
    $('grid').innerHTML = h + '</tbody>';

    const L = D.links || {};
    $('real').innerHTML = L.repo ? `What is real: every number here is a recorded run, and the <a href="${esc(L.repo)}#readme">README</a> says how each was measured.` : 'What is real: every number here is a recorded run.';
    const names = { repo: 'Code', models: 'Models on Hugging Face', datasets: 'Question sets', article: 'Write-up' };
    Object.keys(names).forEach((k) => { if (L[k]) { const li = el('li'); li.innerHTML = `<a href="${esc(L[k])}">${names[k]}</a>`; $('links').appendChild(li); } });
    if (!$('links').children.length) $('links').hidden = true;
    if (D.run && D.run.date) { const d = new Date(D.run.date + 'T00:00:00'); if (!isNaN(d)) $('run').textContent = `Recorded run, ${d.toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })}.`; }
  }

  /* CircuitKIT attribution per layer, default vs CircuitKIT layers highlighted */
  function buildLayers() {
    const C = D.circuit; if (!C || !C.mlp_abs || !C.mlp_abs.length) return;
    $('layer-wrap').hidden = false;
    const v = C.mlp_abs, mx = Math.sqrt(Math.max.apply(null, v)), dl = C.default_rmu_layers || [], cl = C.circuit_rmu_layers || [];
    const box = $('lbars');
    v.forEach((x, i) => {
      const inD = dl.indexOf(i) >= 0, inC = cl.indexOf(i) >= 0;
      const b = el('div', 'lb' + (inD ? ' d' : '') + (inC ? ' c' : ''));
      b.innerHTML = `<i style="height:${(Math.sqrt(x) / mx * 100).toFixed(1)}%"></i>`;
      b.title = `Layer ${i}: ${x.toFixed(2)}`;
      box.appendChild(b);
    });
    const sum = (ls) => ls.reduce((s, l) => s + v[l], 0), tot = v.reduce((s, x) => s + x, 0);
    const lr = (ls) => ls.length > 1 ? `${ls[0]} to ${ls[ls.length - 1]}` : String(ls[0]);
    $('l-head').textContent = `Where the biology answers live in ${D.model.name.replace(/ Global$/, '')}`;
    const ax = $('laxis'); [0, 5, 10, 15, 20, 25, 30, 35].filter((i) => i < v.length).forEach((i) => { const s = el('span', '', String(i)); s.style.left = (i / v.length * 100) + '%'; ax.appendChild(s); });
    box.setAttribute('aria-label', `Attribution per layer for ${v.length} layers. Default layers ${lr(dl)}, CircuitKIT layers ${lr(cl)}.`);
    const f2 = (i) => v[i].toFixed(2);
    const list = (a) => a.length <= 2 ? a.join(' and ') : a.slice(0, -1).join(', ') + ' and ' + a[a.length - 1];
    const onlyD = dl.filter((i) => cl.indexOf(i) < 0);
    $('lcap').innerHTML = `<span class="sw d"></span>SafeTune's default RMU edits layers ${lr(dl)}. <span class="sw c"></span>CircuitKIT's attribution gives the MLPs of layers ${list(cl)} scores of ${list(cl.map(f2))}, against ${list(onlyD.map(f2))} for layers ${list(onlyD)}, so the edit moved to layers ${lr(cl)}. Bar height is the square root of each layer's attribution (${C.n_examples} ${esc(C.task)} examples), so small layers stay visible.`;
  }

  /* only when the run produced a robustness array: pushed harder, per method and attack */
  const ATTACK = { zero_shot: 'Plain question', five_shot: 'Five worked examples', role_play: 'Expert persona', relearn_25_steps_64_questions: '25 fine-tuning steps on 64 questions' };
  function buildRobustness() {
    const R = D.robustness;
    if (!Array.isArray(R) || !R.length) return;
    const att = Object.keys(ATTACK).filter((k) => R.some((r) => r.attack === k)).concat(Array.from(new Set(R.map((r) => r.attack))).filter((k) => !ATTACK[k]));
    const precs = Array.from(new Set(R.map((r) => r.prec)));
    const ms = [ORIG].concat(NOTORIG.map((m) => m.id)).filter((m) => R.some((r) => r.method === m));
    const get = (m, p, k) => R.find((r) => r.method === m && r.prec === p && r.attack === k);
    $('rob-wrap').hidden = false;
    const aName = (k) => ATTACK[k] || k.replace(/_/g, ' ');
    const isRe = (k) => /relearn|fine/.test(k);
    const near = (m, p, k) => { const r = get(m, p, k), o = get(ORIG, p, k); return r && o ? { r, o, fr: (r.acc - CH) / Math.max(0.001, o.acc - CH), m, p, k } : null; };
    const all = [];
    NOTORIG.forEach((m) => precs.forEach((p) => att.forEach((k) => { const x = near(m.id, p, k); if (x) all.push(x); })));
    const pr = all.filter((x) => !isRe(x.k)), fi = all.filter((x) => isRe(x.k));
    const promptsBack = pr.some((x) => x.fr >= 0.5), ftBack = fi.some((x) => x.fr >= 0.5);
    $('rob-head').textContent = !fi.length ? 'Pushed harder: prompts and a persona' : (!promptsBack && ftBack) ? 'Pushed harder: prompts did not bring it back. Fine-tuning did.' : (promptsBack && ftBack) ? 'Pushed harder: prompts and fine-tuning both brought some of it back.' : promptsBack ? 'Pushed harder: prompts brought some of it back.' : 'Pushed harder: neither prompts nor fine-tuning brought it back.';
    const rng = (xs) => { const v = xs.map((x) => x.r.acc), lo = Math.min.apply(null, v), hi = Math.max.apply(null, v); return `${pct(lo)}% to ${pct(hi)}%`; };
    const names = (ks) => { const n = ks.map((k) => aName(k).toLowerCase()); return n.length > 1 ? n.slice(0, -1).join(', ') + ' and ' + n[n.length - 1] : n[0]; };
    let cap = '';
    if (pr.length) {
      const pk = Array.from(new Set(pr.map((x) => x.k))), po = pr.map((x) => ({ r: x.o }));
      cap += promptsBack
        ? `Under ${names(pk)}, some methods come back: ${pr.filter((x) => x.fr >= 0.5).map((x) => `${esc(methodShort(x.m))} reaches ${pct(x.r.acc)}% (original ${pct(x.o.acc)}%)`).join('; ')}. `
        : `Under ${names(pk)}, every unlearned model stays at ${rng(pr)} on ${D.benchmark.forget} while the original scores ${rng(po)}. `;
    }
    if (fi.length) {
      const fk = fi[0].k, fo = fi[0].o.acc;
      cap += `${ATTACK[fk] ? ATTACK[fk] : aName(fk)}, by contrast, ${ftBack ? 'brings most of it back' : 'does not bring it back'}: ` + fi.map((x) => `${esc(methodShort(x.m))} ${pct(x.r.acc)}% (${pct(clamp(x.fr, 0, 1))}% of the way back)`).join(', ') + `, against ${pct(fo)}% for the original${fi.some((x) => x.p !== fi[0].p) ? '' : ' at ' + esc(fmtLabel(fi[0].p))}.`;
    }
    cap += ` The line on each bar marks guessing (${pct(CH)}%).`;
    $('rob-cap').innerHTML = cap;
    precs.sort((x, y) => D.formats.findIndex((f) => f.id === x) - D.formats.findIndex((f) => f.id === y));
    let curP = precs.find((p) => R.some((r) => r.prec === p && isRe(r.attack))) || precs[0];
    const tabs = $('rob-tabs'), box = $('rob');
    const draw2 = () => {
      tabs.querySelectorAll('button').forEach((b) => b.setAttribute('aria-pressed', b.dataset.p === curP ? 'true' : 'false'));
      box.innerHTML = att.filter((k) => R.some((r) => r.prec === curP && r.attack === k)).map((k) => {
        const o = get(ORIG, curP, k);
        const rows = ms.map((m) => {
          const r = get(m, curP, k); if (!r) return '';
          const w = (r.acc / 0.7 * 100).toFixed(1), fr = o && m !== ORIG ? (r.acc - CH) / Math.max(0.001, o.acc - CH) : 0, cls = m === ORIG ? 'o' : fr >= 0.5 ? 'hot' : 'ok';
          return `<div class="rr"><span class="rl">${esc(methodShort(m))}</span><span class="rt"><i class="${cls}" style="width:${w}%"></i><u style="left:${(CH / 0.7 * 100).toFixed(1)}%"></u></span><b>${pct(r.acc)}%</b></div>`;
        }).join('');
        return `<div class="rp"><h3>${esc(aName(k))}</h3>${rows}</div>`;
      }).join('');
    };
    precs.forEach((p) => { const b = el('button', 'mt'); b.type = 'button'; b.textContent = fmtLabel(p); b.dataset.p = p; b.addEventListener('click', () => { curP = p; draw2(); }); tabs.appendChild(b); });
    draw2();
  }


  /* every run we made: general knowledge kept against hazardous biology still answered */
  const HEAD = { 'd_lr4e-5': 'Default layers', 'c_lr1.5e-4': 'CircuitKIT layers', 'c_lr1.5e-4_qa': 'CircuitKIT + 4-bit aware', 'd_lr1e-4': 'Aggressive' };
  const THRESH = 0.40;
  function buildFrontier() {
    const P = D.frontier;
    if (!Array.isArray(P) || !P.length) return;
    const fams = ['default', 'circuit'];
    const cnt = (p, f) => P.filter((x) => x.prec === p && x.family === f).length;
    const precs = D.formats.map((f) => f.id).filter((p) => fams.every((f) => cnt(p, f) >= 5));
    if (!precs.length) return;
    $('fr-wrap').hidden = false;
    let cur = precs.indexOf('NF4') >= 0 ? 'NF4' : precs[0], tableOn = false, active = null;
    const famName = { default: methodShort('standard') || 'Default layers', circuit: methodShort('circuit') || 'CircuitKIT layers', original: 'Original' };
    const lowName = (f) => (f === 'default' ? famName.default.toLowerCase() : famName[f]);
    const nameOf = (p) => HEAD[p.id] || (p.seed === 1 ? 'seed 2' : '') || '';
    const xs = P.map((p) => p.forget).concat([CH]), ys = P.map((p) => p.retain);
    const x0 = Math.floor((Math.min.apply(null, xs) - 0.015) * 20) / 20, x1 = Math.ceil((Math.max.apply(null, xs) + 0.015) * 20) / 20;
    const y0 = Math.floor((Math.min.apply(null, ys) - 0.015) * 20) / 20, y1 = Math.ceil((Math.max.apply(null, ys) + 0.015) * 20) / 20;
    const tabs = $('fr-tabs');
    precs.forEach((p) => { const b = el('button', 'mt'); b.type = 'button'; b.textContent = fmtLabel(p); b.dataset.p = p; b.addEventListener('click', () => { cur = p; draw(); }); tabs.appendChild(b); });
    $('fr-view').addEventListener('click', () => { tableOn = !tableOn; draw(); });

    const sentence = () => {
      const fl = fmtLabel(cur), pts = (f) => P.filter((x) => x.prec === cur && x.family === f && x.forget <= THRESH);
      const rangeTxt = (f) => { const a = pts(f); if (!a.length) return `no ${lowName(f)} run got there`; const v = a.map((x) => x.price * 100), lo = Math.min.apply(null, v), hi = Math.max.apply(null, v); return `${lowName(f)} cost ${lo.toFixed(1)} to ${hi.toFixed(1)} points of general knowledge (${a.length} run${a.length > 1 ? 's' : ''})`; };
      const d = pts('default'), c = pts('circuit');
      let t = `Among runs that got ${D.benchmark.forget} to ${pct(THRESH)}% or below at ${fl}, ${rangeTxt('default')}; ${rangeTxt('circuit')}.`;
      let cheaper = false;
      if (d.length && c.length) {
        const dMin = Math.min.apply(null, d.map((x) => x.price)), cMax = Math.max.apply(null, c.map((x) => x.price));
        if (cMax < dMin) { cheaper = true; t += ' The dearest CircuitKIT run costs less than the cheapest default run.'; }
      }
      return { t, cheaper };
    };

    function draw() {
      tabs.querySelectorAll('.mt').forEach((b) => b.setAttribute('aria-pressed', b.dataset.p === cur ? 'true' : 'false'));
      $('fr-view').setAttribute('aria-pressed', tableOn ? 'true' : 'false'); $('fr-view').textContent = tableOn ? 'View as chart' : 'View as table';
      const s = sentence();
      $('fr-head').textContent = s.cheaper ? 'Every run we made: the CircuitKIT layers keep more at the same level of forgetting' : 'Every run we made: what each choice of layers costs at each level of forgetting';
      $('fr-take').textContent = s.t;
      const pts = P.filter((p) => p.prec === cur);
      $('fr-chart').hidden = tableOn; $('fr-table').hidden = !tableOn;
      if (tableOn) {
        const rows = pts.slice().sort((a, b) => (a.family < b.family ? -1 : a.family > b.family ? 1 : a.forget - b.forget));
        $('fr-table').innerHTML = `<table><thead><tr><th class="rh" scope="col">Run</th><th scope="col">Layers</th><th scope="col">Seed</th><th scope="col">4-bit aware</th><th scope="col">${esc(D.benchmark.forget)}</th><th scope="col">${esc(D.benchmark.retain)}</th><th scope="col">Price, points</th></tr></thead><tbody>${rows.map((p) => `<tr><th scope="row" class="rh">${esc(HEAD[p.id] || p.id)}</th><td>${p.family === 'original' ? 'none' : esc(famName[p.family])}</td><td>${p.seed + 1}</td><td>${p.qa ? 'yes' : 'no'}</td><td>${p1(p.forget)}%</td><td>${p1(p.retain)}%</td><td>${(p.price * 100).toFixed(1)}</td></tr>`).join('')}</tbody></table>`;
        return;
      }
      render(pts);
    }

    function render(pts) {
      const box = $('fr-chart'), W = clamp(Math.round(box.clientWidth - 16 || 640), 300, 1100), H = W < 520 ? 340 : 430;
      const L = W < 520 ? 44 : 56, R = 14, T = 22, B = 46, iw = W - L - R, ih = H - T - B;
      const X = (v) => L + (v - x0) / (x1 - x0) * iw, Y = (v) => T + (1 - (v - y0) / (y1 - y0)) * ih;
      const orig = pts.find((p) => p.family === 'original');
      let g = `<svg viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" role="group" aria-label="Scatter of every run: hazardous biology still answered on the horizontal axis, general knowledge kept on the vertical axis. The same data is in the table view.">`;
      for (let v = Math.ceil(x0 * 20) / 20; v <= x1 + 1e-9; v += 0.05) g += `<line class="gl" x1="${X(v)}" x2="${X(v)}" y1="${T}" y2="${T + ih}"/><text class="ax" x="${X(v)}" y="${T + ih + 16}" text-anchor="middle">${pct(v)}</text>`;
      for (let v = Math.ceil(y0 * 20) / 20; v <= y1 + 1e-9; v += 0.05) g += `<line class="gl" x1="${L}" x2="${L + iw}" y1="${Y(v)}" y2="${Y(v)}"/><text class="ax" x="${L - 8}" y="${Y(v) + 4}" text-anchor="end">${pct(v)}</text>`;
      g += `<text class="at" x="${L + iw / 2}" y="${H - 6}" text-anchor="middle">${esc(D.benchmark.forget)} still answered, % (lower is more forgotten)</text>`;
      g += `<text class="at" transform="translate(12 ${T + ih / 2}) rotate(-90)" text-anchor="middle">${esc(D.benchmark.retain)} kept, %</text>`;
      g += `<line class="ref" x1="${X(CH)}" x2="${X(CH)}" y1="${T}" y2="${T + ih}"/><text class="rt" x="${X(CH) + 5}" y="${T + 11}">guessing ${pct(CH)}%</text>`;
      if (orig) g += `<line class="ref" x1="${L}" x2="${L + iw}" y1="${Y(orig.retain)}" y2="${Y(orig.retain)}"/><text class="rt" x="${L + 6}" y="${Y(orig.retain) - 5}">original keeps ${pct(orig.retain)}%</text>`;
      // marks
      const lab = [];
      pts.forEach((p, i) => {
        const cx = X(p.forget), cy = Y(p.retain), col = p.family === 'default' ? 'var(--hot)' : p.family === 'circuit' ? 'var(--ok)' : 'var(--bar)';
        const hollow = p.seed === 1, fill = hollow ? 'var(--paper)' : col, sw = hollow ? 2.5 : 2, st2 = hollow ? col : 'var(--paper)';
        const label = `${HEAD[p.id] || (p.family === 'original' ? 'Original' : p.id)}${p.seed === 1 ? ', seed 2' : ''}${p.qa ? ', 4-bit aware' : ''}: ${esc(D.benchmark.forget)} ${p1(p.forget)}%, ${esc(D.benchmark.retain)} ${p1(p.retain)}%, price ${(p.price * 100).toFixed(1)} points`;
        let shape;
        if (p.family === 'circuit') shape = `<rect x="${cx - 6}" y="${cy - 6}" width="12" height="12" rx="2" fill="${fill}" stroke="${st2}" stroke-width="${sw}"/>`;
        else if (p.family === 'original') shape = `<path d="M${cx} ${cy - 8}L${cx + 8} ${cy}L${cx} ${cy + 8}L${cx - 8} ${cy}Z" fill="${fill}" stroke="${st2}" stroke-width="${sw}"/>`;
        else shape = `<circle cx="${cx}" cy="${cy}" r="6.5" fill="${fill}" stroke="${st2}" stroke-width="${sw}"/>`;
        if (p.qa) shape += `<circle cx="${cx}" cy="${cy}" r="1.9" fill="${hollow ? col : 'var(--paper)'}"/>`;
        g += `<g class="pt" tabindex="0" role="img" data-i="${i}" aria-label="${esc(label)}"><circle class="hit" cx="${cx}" cy="${cy}" r="14"/>${shape}</g>`;
        const nm = p.family === 'original' ? 'Original' : (HEAD[p.id] || (p.seed === 1 ? 'seed 2' : ''));
        if (nm && !(W < 520 && (p.qa || nm === 'seed 2'))) lab.push({ x: cx, y: cy, t: nm, qa: p.qa, s1: p.seed === 1 && !HEAD[p.id] });
      });
      // direct labels with simple collision nudging
      const placed = [];
      lab.sort((a, b) => a.y - b.y).forEach((l) => {
        const w = l.t.length * 6.4, right = l.x + 10 + w > W - R;
        let x = right ? l.x - 10 : l.x + 10, y = l.qa ? l.y + 18 : l.y - 9, anc = right ? 'end' : 'start';
        for (let k = 0; k < 8 && placed.some((q) => Math.abs(q.y - y) < 13 && ((x < q.x + q.w && x + w > q.x) || (anc === 'end' && x - w < q.x + q.w && x > q.x))); k++) y += 13;
        placed.push({ x: anc === 'end' ? x - w : x, y, w });
        g += `<text class="dl" x="${x}" y="${y}" text-anchor="${anc}">${esc(l.t)}</text>`;
      });
      g += `<text class="bt" x="${L + 6}" y="${T + ih - 8}">better: up and to the left</text></svg><div class="tip" id="fr-tip" role="status" hidden></div>`;
      box.innerHTML = g;
      const tip = $('fr-tip'), svg = box.querySelector('svg');
      const show = (i) => {
        const p = pts[i]; if (!p) return;
        box.querySelectorAll('.pt').forEach((n) => n.classList.toggle('on', +n.dataset.i === i));
        const nm = HEAD[p.id] || (p.family === 'original' ? 'Original' : p.id);
        tip.innerHTML = `<b>${esc(nm)}</b><span>${p.family === 'original' ? 'no unlearning' : esc(famName[p.family]) + (p.seed === 1 ? ', seed 2' : '') + (p.qa ? ', 4-bit aware' : '')}</span><span>${esc(D.benchmark.forget)} ${p1(p.forget)}%</span><span>${esc(D.benchmark.retain)} ${p1(p.retain)}%</span><span>Price ${(p.price * 100).toFixed(1)} points</span>`;
        tip.hidden = false;
        const cx = X(p.forget), cy = Y(p.retain), flip = cx > W * 0.6;
        tip.style.left = (cx / W * 100) + '%'; tip.style.top = (cy / H * 100) + '%';
        tip.style.transform = `translate(${flip ? 'calc(-100% - 14px)' : '14px'}, ${cy > H * 0.6 ? 'calc(-100% - 8px)' : '8px'})`;
      };
      const hide = () => { tip.hidden = true; box.querySelectorAll('.pt').forEach((n) => n.classList.remove('on')); };
      svg.addEventListener('pointermove', (e) => {
        const r = svg.getBoundingClientRect(), k = W / r.width, mx = (e.clientX - r.left) * k, my = (e.clientY - r.top) * k;
        let best = -1, bd = 24 * 24;
        pts.forEach((p, i) => { const dx = X(p.forget) - mx, dy = Y(p.retain) - my, dd = dx * dx + dy * dy; if (dd < bd) { bd = dd; best = i; } });
        if (best >= 0) show(best); else hide();
      });
      svg.addEventListener('pointerleave', hide);
      box.querySelectorAll('.pt').forEach((n) => { n.addEventListener('focus', () => show(+n.dataset.i)); n.addEventListener('blur', hide); n.addEventListener('keydown', (e) => { if (e.key === 'Escape') { hide(); n.blur(); } }); });
    }

    // legend: shape and fill carry identity, not colour alone
    const ic = (svg) => `<svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true">${svg}</svg>`;
    $('fr-key').innerHTML = [
      ic('<circle cx="9" cy="9" r="6.5" fill="var(--hot)" stroke="var(--paper)" stroke-width="2"/>') + esc(famName.default),
      ic('<rect x="3" y="3" width="12" height="12" rx="2" fill="var(--ok)" stroke="var(--paper)" stroke-width="2"/>') + esc(famName.circuit),
      ic('<path d="M9 1L17 9L9 17L1 9Z" fill="var(--bar)"/>') + 'Original',
      ic('<circle cx="9" cy="9" r="6" fill="var(--paper)" stroke="var(--ink)" stroke-width="2.5"/>') + 'Hollow: second seed',
      ic('<circle cx="9" cy="9" r="6.5" fill="var(--ink)"/><circle cx="9" cy="9" r="2" fill="var(--paper)"/>') + 'Dot: trained through a 4-bit quantizer'
    ].map((x) => `<li>${x}</li>`).join('');
    let rt; window.addEventListener('resize', () => { clearTimeout(rt); rt = setTimeout(() => { if (!tableOn) draw(); }, 150); });
    draw();
  }

  function markTable() {
    document.querySelectorAll('#grid tbody tr').forEach((r) => r.classList.toggle('sel', r.dataset.f === st.f));
  }

  function wireStory() {
    const pipe = $('pipe'), steps = Array.from(pipe.querySelectorAll('.step'));
    if (reduced() || !('IntersectionObserver' in window)) { pipe.classList.add('static'); return; }
    pipe.classList.add('go');
    const io = new IntersectionObserver((es) => {
      if (es.some((e) => e.isIntersecting)) { steps.forEach((s, i) => setTimeout(() => s.classList.add('lit'), i * 320)); io.disconnect(); }
    }, { threshold: 0.2 });
    io.observe(pipe);
  }
})();