{
  const baseCost = scenarios.find(d=>d.scenario==="Baseline").cost;
  return Plot.plot({
    grid: true, height: 380, width: 520,
    marginTop: 26, marginLeft: 58, marginRight: 44, marginBottom: 42,
    x: {label: "Cost € / retained →", labelAnchor: "center", domain: [2700, 5300]},
    y: {label: "↑ Retention %", labelAnchor: "center", domain: [24, 52]},
    color: {legend: true, domain: Object.keys(famColor), range: Object.values(famColor)},
    marks: [
      // Tufte: mark the "good" region - cheaper AND more effective than Baseline
      Plot.rect([{}], {x1: 2700, x2: baseCost, y1: baseRet, y2: 52, fill: "#2e7d32", fillOpacity: 0.06}),
      Plot.ruleX([baseCost], {stroke: pal.coral, strokeDasharray:"4,3"}),
      Plot.ruleY([baseRet], {stroke: pal.coral, strokeDasharray:"4,3"}),
      // Baseline labelled at the crosshair (it is the dashed-line intersection); all other
      // identities come from the colour legend + hover tooltip (avoids mislabelling in a dense scatter)
      Plot.dot(scenarios, {x:"cost", y:"retention", fill:"family", r:4.5, fillOpacity:0.9,
               stroke:"#fff", strokeWidth:1.4, tip:true,
               channels:{scenario:"scenario", tie:"tie", cefr:"cefr"}}),
      Plot.text([{x:2900, y:51.4}], {x:"x", y:"y", text:["↖ cheaper & more effective"],
               textAnchor:"start", fontSize:9.5, fontWeight:"bold", fill:"#2e7d32"})
    ]
  });
}

Plot.plot({
  height: 360, width: 520, marginLeft: 56, marginRight: 30, marginTop: 30, marginBottom: 46, grid: true,
  x: {domain:[0.7,5.3], label:"Locals per park →", ticks:[1,2,3,4,5]},
  y: {label:"↑ Retention % (still active at week 52)", domain:[26, 47]},
  marks: [
    Plot.areaY(dose, {x:"dose", y1:"retention_ci_low", y2:"retention_ci_high", fill:pal.steel, fillOpacity:0.15}),
    Plot.line(dose, {x:"dose", y:"retention_mean", stroke:pal.steel, strokeWidth:2}),
    Plot.dot(dose, {x:"dose", y:"retention_mean", fill:pal.steel, r:4.5, stroke:"#fff", strokeWidth:1, tip:true, channels:{scenario:"scenario"}}),
    Plot.text(dose, {x:"dose", y:"retention_mean", text:d=>d3.format(".1f")(d.retention_mean)+"%", dy:-12, fontSize:9.5, fill:"#333"}),
    // connect the endpoints to the named scenarios used elsewhere
    Plot.text(dose.filter(d=>d.dose===1), {x:"dose", y:"retention_mean", text:["1 local = Suboptimal"], dy:17, dx:2, fontSize:8.5, fill:"#888", textAnchor:"start"}),
    Plot.text(dose.filter(d=>d.dose===5), {x:"dose", y:"retention_mean", text:["5 locals = Baseline"], dy:17, dx:-2, fontSize:8.5, fill:"#888", textAnchor:"end"}),
    // plain-language takeaway in the empty upper-left
    Plot.text([{x:0.85, y:45}], {x:"x", y:"y", text:["Each extra local per park\n≈ +4.3 pp retention"], textAnchor:"start", fontSize:11, fontWeight:"bold", fill:pal.steel, lineHeight:1.25})
  ]
})

Plot.plot({
  marginLeft: 150, marginRight: 22, marginTop: 8, marginBottom: 38,
  height: 480, width: 520, grid: true,
  x: {label:"female - male dropout gap (pp) →", domain:[-1, 6]},
  y: {label:null, domain: scenarios.slice().sort((a,b)=>b.gender_gap-a.gender_gap).map(d=>d.scenario)},
  marks: [
    Plot.ruleX([0], {stroke:"#888", strokeWidth:1}),
    Plot.ruleY(scenarios, {y:"scenario", x1:"gap_lo", x2:"gap_hi",
              stroke:d=>(d.gap_lo>0||d.gap_hi<0)?pal.coral:"#bbb", strokeWidth:1.6}),
    Plot.dot(scenarios, {x:"gender_gap", y:"scenario",
              fill:d=>(d.gap_lo>0||d.gap_hi<0)?pal.coral:"#bbb", r:3.6, stroke:"#fff", strokeWidth:0.8,
              tip:true, channels:{scenario:"scenario", gap:"gender_gap"}})
  ]
})

{
  const win = s => s==="Baseline" ? "no buddy" : s==="BuddyProgram" ? "week-0 pairing" : "week-8 pairing";
  const order = ["RandomBuddy","CentralityBuddy","BuddyProgram","Baseline"];   // best at top
  const d = scenarios.filter(s=>order.includes(s.scenario)).map(s=>({...s, window: win(s.scenario)}));
  return Plot.plot({
    height: 300, width: 540, marginLeft: 118, marginRight: 56, marginTop: 8, marginBottom: 38, grid: true,
    x: {label:"Retention % →", domain:[44, 52]},
    y: {label:null, domain: order},
    color: {legend:true, domain:["week-8 pairing","week-0 pairing","no buddy"], range:[pal.coral, pal.steel, "#bbb"]},
    marks: [
      Plot.ruleX([baseRet], {stroke:"#888", strokeDasharray:"4,3"}),
      Plot.ruleY(d, {y:"scenario", x1:"retention_lo", x2:"retention_hi", stroke:"window", strokeWidth:1.8}),
      Plot.dot(d, {x:"retention", y:"scenario", fill:"window", r:5, stroke:"#fff", strokeWidth:1, tip:true,
                   channels:{scenario:"scenario"}}),
      Plot.text(d, {x:"retention", y:"scenario", text:s=>d3.format(".1f")(s.retention)+"%",
                   dx:10, textAnchor:"start", fontSize:9.5, fill:"#333"})
    ]
  });
}

viewof scen = Inputs.select(Object.keys(traj), {value:"Baseline"})

viewof week = Scrubber(d3.range(0,53), {autoplay:false, initial:52, loop:true, delay:140, format:w=>"Week "+w})

{
  const a = traj[scen];
  const base = traj["Baseline"];
  function tchart(metric) {
    const m = metricMeta[metric];
    const mk = metric+"_mean", sk = metric+"_sd";
    const rows = a.week.map((w,i)=>({week:w, y:a[mk][i], lo:a[mk][i]-(a[sk][i]||0), hi:a[mk][i]+(a[sk][i]||0)})).filter(d=>d.week<=week);
    const bl = base.week.map((w,i)=>({week:w, y:base[mk][i]})).filter(d=>d.week<=week);
    const marks = [
      Plot.areaY(rows,{x:"week",y1:"lo",y2:"hi",fill:m.color,fillOpacity:0.15}),
      Plot.ruleX([9],{stroke:"#ccc",strokeDasharray:"3,3"})
    ];
    if (scen !== "Baseline") marks.push(Plot.lineY(bl,{x:"week",y:"y",stroke:"#9a9a9a",strokeWidth:1.2,strokeDasharray:"3,2"}));
    marks.push(Plot.lineY(rows,{x:"week",y:"y",stroke:m.color,strokeWidth:2}));
    marks.push(Plot.text([{w:rows.length?rows[rows.length-1].week:0, y:rows.length?rows[rows.length-1].y:0}],{x:"w",y:"y",text:d=>d3.format(".2f")(d.y),dx:6,fontSize:10,fill:m.color}));
    marks.push(Plot.text([m.label],{frameAnchor:"top-left",dy:-14,fontSize:11,fontWeight:"bold"}));
    return Plot.plot({height:215, width:300, marginLeft:40, marginBottom:28, x:{domain:[0,52],label:"week"}, y:{label:null,nice:true}, marks});
  }
  const grid=html`<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px"></div>`;
  for(const k of Object.keys(metricMeta)) grid.append(tchart(k));
  return grid;
}

viewof weekS = Scrubber(d3.range(0,53), {autoplay:false, delay:160, loop:true, format:w=>"Week "+w})

{
  const r=replay, W=600, H=600, pad=22, sc=(W-2*pad)/r.world;
  const SX=v=>pad+v*sc, SY=v=>pad+(r.world-v)*sc;
  const pos=new Map(r.id.map((id,i)=>[id,{x:SX(r.x[i]),y:SY(r.y[i]),kind:r.kind[i]}]));
  const svg=d3.create("svg").attr("viewBox",[0,0,W,H]).attr("width",W).attr("height",H).attr("style","max-width:100%;height:auto;background:#fff;border:1px solid #e3e3e3;font:11px sans-serif");
  const E=r.edges[weekS].filter(e=>pos.has(e[0])&&pos.has(e[1]));
  svg.append("g").selectAll("line").data(E).join("line").attr("x1",e=>pos.get(e[0]).x).attr("y1",e=>pos.get(e[0]).y).attr("x2",e=>pos.get(e[1]).x).attr("y2",e=>pos.get(e[1]).y).attr("stroke",e=>+e[2]?pal.orange:pal.grey).attr("stroke-width",e=>+e[2]?2:0.7).attr("stroke-opacity",0.8);
  const mot=r.mot[weekS], stt=r.state[weekS];
  const g=svg.append("g").selectAll("g").data(d3.range(r.id.length)).join("g").attr("transform",i=>`translate(${pos.get(r.id[i]).x},${pos.get(r.id[i]).y})`);
  g.each(function(i){ const k=r.kind[i], s=stt[i], m=mot[i], sel=d3.select(this);
    if(k==="park"){ sel.append("text").text("▲").attr("text-anchor","middle").attr("dy",5).attr("font-size",18).attr("fill","#2e7d32"); return; }
    if(k==="trainer"){ sel.append("text").text("★").attr("text-anchor","middle").attr("dy",5).attr("font-size",15).attr("fill",pal.gold); return; }
    let col=s===2?"#bdbdbd":s===1?pal.orange:(k==="migrant"?d3.interpolateRgb("#7a0010","#ff8a8a")(m):d3.interpolateRgb("#0a2a44","#7fc0ec")(m));
    sel.append("circle").attr("r",s===2?3:4.5).attr("fill",col).attr("stroke","#fff").attr("stroke-width",0.6);
  });
  const active=stt.filter((s,i)=>s===0&&(r.kind[i]==="migrant"||r.kind[i]==="local")).length;
  const dropped=stt.filter(s=>s===2).length, cross=E.filter(e=>+e[2]).length;
  svg.append("text").attr("x",12).attr("y",18).attr("font-weight","bold").text(`Week ${weekS}   ·   active ${active}   ·   dropped ${dropped}   ·   cross-group ties ${cross}`);
  return svg.node();
}

Inputs.table(scenarios.slice().sort((a,b)=>b.retention-a.retention), {
  columns:["scenario","family","retention","tie","cefr","cost","gender_gap","sig"],
  header:{scenario:"Scenario", family:"Family", retention:"Retention %", tie:"Tie ratio", cefr:"CEFR", cost:"€/retained", gender_gap:"Gender gap", sig:"vs Baseline"},
  rows: 24
})