Football Leagues

Skip to content

Football > Leagues

Football · Leagues & Sims · Projected Standings

Where does every league finish?

Live standings plus Monte Carlo projections for the rest of the season — domestic leagues and the UEFA cups. Toggle between today’s table and a probabilistic snapshot of where each club lands come May.

// ── Byline strip ─────────────────────────────────────────────
html`<div class="byline">
  <span>By <strong>Pete Owen</strong></span>
  <span>Updated · <strong>After every matchday</strong></span>
  <span><a href="../blog/2026-04-24-understanding-panna/">Methodology &darr;</a></span>
  <span><a href="team-ratings.html">Team Ratings &nearr;</a></span>
  <span>&approx; 5 min read</span>
</div>`

// ── Sidebar collapse toggle ─────────────────────────────────
window.editorial.sidebarToggle()

statsEsc = window.statsEsc
statsTable = window.statsTable

// Load fixtures from R2 static JSON directly (worker may return incomplete data)
fixtureRaw = {
  try {
    const res = await fetch(window.DATA_BASE_URL + "football/fixtures.json")
    if (!res.ok) throw new Error("HTTP " + res.status)
    return await res.json()
  } catch (e) {
    console.warn("[leagues] R2 fixture load failed, trying worker:", e)
    return await window.fetchFixtures("football")
  }
}
allMatches = fixtureRaw ? (fixtureRaw.matches || []) : []

// Load league-level xG data (pre-aggregated from match-shots pipeline)
leagueXG = {
  try {
    return await window.fetchParquet(window.DATA_BASE_URL + "football/league-xg.parquet")
  } catch (e) {
    console.warn("[leagues] league-xg.parquet not available:", e)
    return null
  }
}

leagueNames = window.footballMaps.leagueNames
leagueOrder = ["ENG", "ESP", "GER", "ITA", "FRA", "NED", "POR", "ENG2", "UCL", "UEL", "UECL"]
cupCodes = new Set(["UCL", "UEL", "UECL"])
// League-phase size for Swiss-model cups — knockout fixtures share the same
// league code, so standings need to cap per-team GP at this value. Matches
// pannadata/scripts/simulate_cup.R CUP_CONFIG.n_matches.
cupLpGames = ({ UCL: 8, UEL: 8, UECL: 6 })

// Total games per team across a domestic league season. Double round-robin
// is 2 × (n_teams − 1). SCO splits after 33 (12 teams × 3 round-robins) +
// 5 post-split games = 38. Used to derive Games Remaining on the Projected
// tab so readers can see the sim's forward math at a glance.
leagueTotalGames = ({ ENG: 38, ENG2: 46, ESP: 38, FRA: 34, GER: 34, ITA: 38, NED: 34, POR: 34, SCO: 38, TUR: 34 })

// Load simulations for Projected view (domestic + cups)
simData = await window.fetchParquet(window.DATA_BASE_URL + "football/simulations.parquet")
cupSimData = {
  try {
    return await window.fetchParquet(window.DATA_BASE_URL + "football/cup-simulations.parquet")
  } catch (e) {
    console.warn("[leagues] cup-simulations.parquet not available:", e)
    return null
  }
}

leagueOptions = {
  // Domestic leagues: show if fixture data has finished matches
  const fixtureLeagues = (!allMatches || allMatches.length === 0)
    ? [] : [...new Set(allMatches.filter(m => m.status === "FINISHED").map(m => m.league))]
  // Cup competitions: show if simulation data exists (fixtures may not be available)
  const cupLeagues = cupSimData ? [...new Set(cupSimData.map(d => d.league))] : []
  const available = new Set([...fixtureLeagues, ...cupLeagues])
  return leagueOrder
    .filter(code => available.has(code))
    .map(code => ({ value: code, label: leagueNames[code] || code }))
}

viewof selectedLeague = {
  if (allMatches.length === 0) return html`<p class="text-muted">Loading fixture data…</p>`

  const makeSelect = window.footballMaps.makeSelect

  const defaultCode = (leagueOptions.find(d => d.value === "ENG") || leagueOptions[0] || {}).value || ""

  const bar = document.createElement("div")
  bar.className = "player-filter-bar"
  const row = document.createElement("div")
  row.className = "filter-row"

  const codes = leagueOptions.map(d => d.value)
  const { wrap, sel } = makeSelect(codes, defaultCode, "League", x => leagueNames[x] || x)
  row.appendChild(wrap)
  bar.appendChild(row)

  // Value is the full {value, label} object to match downstream usage
  const findOpt = (code) => leagueOptions.find(d => d.value === code) || leagueOptions[0]
  bar.value = findOpt(defaultCode)
  sel.addEventListener("change", () => {
    bar.value = findOpt(sel.value)
    bar.dispatchEvent(new Event("input", { bubbles: true }))
  })

  return bar
}

// Context bar
{
  if (!selectedLeague) return html``
  const leagueName = leagueNames[selectedLeague.value] || selectedLeague.value
  if (!fixtureRaw) {
    return html`<p class="text-muted" style="font-size:0.85rem; margin-bottom:0.5rem">${leagueName}</p>`
  }
  const updated = fixtureRaw.updated ? new Date(fixtureRaw.updated).toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" }) : ""
  return html`<p class="text-muted" style="font-size:0.85rem; margin-bottom:0.5rem">
    ${fixtureRaw.season || ""} ${leagueName} · Updated ${updated}
  </p>`
}

// Current / Projected toggle
viewof leagueView = {
  const wrap = document.createElement("div")
  wrap.className = "epv-toggle"
  wrap.value = "Current"
  for (const label of ["Current", "Projected"]) {
    const btn = document.createElement("button")
    btn.className = "epv-toggle-btn" + (label === "Current" ? " active" : "")
    btn.textContent = label
    btn.addEventListener("click", () => {
      wrap.querySelectorAll(".epv-toggle-btn").forEach(b => b.classList.remove("active"))
      btn.classList.add("active")
      wrap.value = label
      wrap.dispatchEvent(new Event("input", { bubbles: true }))
    })
    wrap.appendChild(btn)
  }
  return wrap
}

// Compute standings from finished matches
standings = {
  if (!allMatches || !selectedLeague) return null
  const finished = allMatches.filter(m =>
    m.league === selectedLeague.value && m.status === "FINISHED" &&
    m.homeScore != null && m.awayScore != null
  )
  if (finished.length === 0) return null

  const teams = new Map()
  const getTeam = (name) => {
    if (!teams.has(name)) teams.set(name, {
      team: name, p: 0, w: 0, d: 0, l: 0, gf: 0, ga: 0, form: []
    })
    return teams.get(name)
  }

  // Sort by date so form[] is chronological
  const sorted = [...finished].sort((a, b) => (a.date || "").localeCompare(b.date || ""))

  // Cup cap: after the league phase ends, both teams in any subsequent match
  // have already hit the LP game count — skip those so "standings" is only
  // the LP table (football-data.org uses the same `UCL` league code for
  // knockout fixtures, so the cap is the reliable filter).
  const lpCap = cupLpGames[selectedLeague.value] || null
  const teamGp = {}

  for (const m of sorted) {
    if (lpCap != null) {
      const hGp = teamGp[m.homeTeam] || 0
      const aGp = teamGp[m.awayTeam] || 0
      if (hGp >= lpCap || aGp >= lpCap) continue
      teamGp[m.homeTeam] = hGp + 1
      teamGp[m.awayTeam] = aGp + 1
    }
    const h = getTeam(m.homeTeam)
    const a = getTeam(m.awayTeam)
    h.p++; a.p++
    h.gf += m.homeScore; h.ga += m.awayScore
    a.gf += m.awayScore; a.ga += m.homeScore

    const matchRef = { league: m.league, date: m.date, home: m.homeTeam, away: m.awayTeam, hs: m.homeScore, as: m.awayScore }
    if (m.homeScore > m.awayScore) {
      h.w++; a.l++; h.form.push({ r: "W", ...matchRef }); a.form.push({ r: "L", ...matchRef })
    } else if (m.homeScore < m.awayScore) {
      a.w++; h.l++; h.form.push({ r: "L", ...matchRef }); a.form.push({ r: "W", ...matchRef })
    } else {
      h.d++; a.d++; h.form.push({ r: "D", ...matchRef }); a.form.push({ r: "D", ...matchRef })
    }
  }

  // Enrich with xG from pre-aggregated league-xg.parquet
  // Opta uses short names ("Arsenal") while fixtures use "Arsenal FC" — normalize by stripping suffixes
  const leagueCode = selectedLeague.value
  const xgData = leagueXG
    ? leagueXG.filter(d => d.league === leagueCode)
    : []

  // Build xG lookup using centralised normalizer from football-maps.js
  const normXG = window.footballMaps.normalizeXG
  const xgMap = new Map()
  for (const d of xgData) xgMap.set(normXG(d.team_name).toLowerCase(), d)

  const rows = [...teams.values()].map(t => {
    const x = xgMap.get(normXG(t.team).toLowerCase()) || {}
    return {
      ...t,
      gd: t.gf - t.ga,
      pts: t.w * 3 + t.d,
      xgf: x.xgf ?? null,
      xga: x.xga ?? null,
      xgd: x.xgd ?? null,
      form5: t.form.slice(-5)
    }
  })

  rows.sort((a, b) => b.pts - a.pts || b.gd - a.gd || b.gf - a.gf)
  rows.forEach((r, i) => r.pos = i + 1)
  return rows
}

// Standings table (Current view)
{
  if (leagueView !== "Current") return html``
  if (!standings || standings.length === 0) {
    return html`<p class="text-muted">No results available for this league yet.</p>`
  }
  if (window.footballMaps.loadCrests) await window.footballMaps.loadCrests()

  const teamRender = window.footballMaps?.renderTeamCell || ((v) => `<strong>${statsEsc(v)}</strong>`)

  const formRender = (val) => {
    if (!val || !val.length) return ""
    const colors = { W: "#5a9a7a", D: "#fbbf24", L: "#c4734a" }
    return val.map(f => {
      const url = `match.html#league=${encodeURIComponent(f.league)}&date=${encodeURIComponent(f.date)}&home=${encodeURIComponent(f.home)}&away=${encodeURIComponent(f.away)}`
      const tip = `${f.home} ${f.hs}–${f.as} ${f.away}`
      return `<a href="${url}" class="form-badge" style="background:${colors[f.r]}22;color:${colors[f.r]};border-color:${colors[f.r]}44;text-decoration:none" data-tip="${statsEsc(tip)}">${f.r}</a>`
    }).join("")
  }

  const gdRender = (v) => {
    if (v == null) return ""
    return v > 0 ? "+" + v : String(v)
  }

  const hasXG = standings.some(d => d.xgf != null)

  const columns = hasXG
    ? ["pos", "team", "p", "w", "d", "l", "gf", "ga", "gd", "pts", "xgf", "xga", "xgd", "form5"]
    : ["pos", "team", "p", "w", "d", "l", "gf", "ga", "gd", "pts", "form5"]

  const header = hasXG
    ? { pos: "#", team: "Team", p: "P", w: "W", d: "D", l: "L", gf: "GF", ga: "GA", gd: "GD", pts: "Pts", xgf: "xGF", xga: "xGA", xgd: "xGD", form5: "Form" }
    : { pos: "#", team: "Team", p: "P", w: "W", d: "D", l: "L", gf: "GF", ga: "GA", gd: "GD", pts: "Pts", form5: "Form" }

  const groups = hasXG
    ? [{ label: "", span: 2 }, { label: "Results", span: 4 }, { label: "Goals", span: 3 }, { label: "", span: 1 }, { label: "Expected (xG)", span: 3 }, { label: "", span: 1 }]
    : [{ label: "", span: 2 }, { label: "Results", span: 4 }, { label: "Goals", span: 3 }, { label: "", span: 1 }, { label: "", span: 1 }]

  const heatmap = hasXG
    ? { pts: "high-good", gd: "diverging", xgd: "diverging" }
    : { pts: "high-good", gd: "diverging" }

  return statsTable(standings, {
    columns, header, groups, heatmap,
    render: { team: teamRender, form5: formRender, gd: gdRender, xgd: gdRender },
    sort: "pos",
    rows: 25
  })
}

// Recent results (Current view)
{
  if (leagueView !== "Current") return html``
  if (!allMatches || !selectedLeague) return html``

  const finished = allMatches
    .filter(m => m.league === selectedLeague.value && m.status === "FINISHED" && m.homeScore != null && m.awayScore != null)
    .sort((a, b) => (b.date || "").localeCompare(a.date || ""))
    .slice(0, 15)

  if (finished.length === 0) return html``

  const formatDate = (iso) => {
    if (!iso) return ""
    const d = new Date(iso)
    return d.toLocaleDateString("en-GB", { weekday: "short", day: "numeric", month: "short" })
  }

  // Group by date
  const groups = new Map()
  for (const m of finished) {
    const dateKey = (m.date || "").slice(0, 10)
    if (!groups.has(dateKey)) groups.set(dateKey, [])
    groups.get(dateKey).push(m)
  }

  const el = document.createElement("div")
  el.className = "recent-results"

  const h3 = document.createElement("h3")
  h3.textContent = "Recent Results"
  h3.style.marginTop = "1.5rem"
  el.appendChild(h3)

  for (const [dateKey, matches] of groups) {
    const dateHeader = document.createElement("div")
    dateHeader.className = "recent-results-date"
    dateHeader.textContent = formatDate(dateKey)
    el.appendChild(dateHeader)

    for (const m of matches) {
      const dateKey = (m.date || "").slice(0, 10)
      const matchHref = `match.html#league=${encodeURIComponent(m.league)}&date=${dateKey}&home=${encodeURIComponent(m.homeTeam)}&away=${encodeURIComponent(m.awayTeam)}`

      const link = document.createElement("a")
      link.href = matchHref
      link.className = "recent-result-link"
      link.style.textDecoration = "none"
      link.style.color = "inherit"

      const row = document.createElement("div")
      row.className = "recent-result-row"

      const homeWin = m.homeScore > m.awayScore
      const awayWin = m.awayScore > m.homeScore

      const homeName = document.createElement("span")
      homeName.className = homeWin ? "winner" : ""
      homeName.textContent = m.homeTeam
      row.appendChild(homeName)

      const score = document.createElement("span")
      score.className = "result-score"
      score.textContent = ` ${m.homeScore} – ${m.awayScore} `
      row.appendChild(score)

      const awayName = document.createElement("span")
      awayName.className = awayWin ? "winner" : ""
      awayName.textContent = m.awayTeam
      row.appendChild(awayName)

      link.appendChild(row)
      el.appendChild(link)
    }
  }

  return el
}

// Projected Standings (from simulations)
{
  if (leagueView !== "Projected") return html``

  const isCup = cupCodes.has(selectedLeague.value)
  const sourceData = isCup ? cupSimData : simData
  if (!sourceData || !selectedLeague) return html`<p class="text-muted">Simulation data not available.</p>`

  if (window.footballMaps.loadCrests) await window.footballMaps.loadCrests()

  const leagueData = sourceData.filter(d => d.league === selectedLeague.value)
  if (leagueData.length === 0) return html`<p class="text-muted">No simulation data for this league.</p>`

  const pctFmt = x => x != null ? (x * 100).toFixed(1) + "%" : ""

  // Join current standings from fixture data (null if no finished matches in this league).
  // standings[] keys by football-data.org names ("Manchester City FC") while the
  // simulations parquet uses Opta short names ("Manchester City"). Normalize
  // both sides so the lookup hits instead of falling through to the stale
  // `d.current_points` snapshot baked into the parquet at last rebuild.
  const normXG = window.footballMaps.normalizeXG
  const currentMap = new Map()
  if (standings) {
    for (const s of standings) currentMap.set(normXG(s.team), s)
  }

  // The Projected tab shows the simulation snapshot end-to-end: Current column
  // is sim-time GP/pts/GD, Projected column is sim-time + simulated remaining.
  // This keeps everything on-tab internally consistent with avg_position /
  // title_pct / etc. which were computed against that same snapshot. Mixing
  // live current with stale remaining (what the old code did) produced the
  // "projected < current" optical bug. Users who want live standings use the
  // Current tab. A staleness banner (below) flags when the snapshot predates
  // recent results so the user knows to re-run the sim.
  // games_remaining = total season games − games played. Only meaningful for
  // domestic leagues (cups have variable per-team totals in Swiss format),
  // so leave undefined for cups. avg_points is already the sim's expected
  // points from remaining fixtures, so no separate compute needed.
  const seasonTotal = leagueTotalGames[selectedLeague.value]
  const enriched = leagueData.map(d => ({
    ...d,
    games_remaining: seasonTotal != null && d.games_played != null
      ? Math.max(0, seasonTotal - d.games_played)
      : null,
    proj_total_pts: (d.current_points ?? 0) + (d.avg_points || 0),
    proj_total_gd: (d.current_gd ?? 0) + (d.avg_gd || 0),
  }))

  // Detect staleness by comparing sim GP to live GP from standings.
  // Staleness = any team's live GP exceeds its sim GP. Also surfaces any
  // sim-team whose name doesn't match standings under normXG — those fall
  // invisibly out of the staleness signal and suggest a missing normalizer
  // override, so log them once to catch future provider drift.
  let maxLiveGp = 0
  let staleTeamCount = 0
  const unmatched = []
  for (const d of leagueData) {
    const curr = currentMap.get(normXG(d.team))
    if (!curr && currentMap.size > 0) {
      unmatched.push(d.team)
      continue
    }
    const liveGp = curr?.p
    if (liveGp != null) {
      if (liveGp > maxLiveGp) maxLiveGp = liveGp
      if (d.games_played != null && liveGp > d.games_played) staleTeamCount++
    }
  }
  if (unmatched.length > 0) {
    console.warn(`[leagues] ${unmatched.length} sim teams in ${selectedLeague.value} not found in current standings (normXG miss): ${unmatched.slice(0, 5).join(", ")}${unmatched.length > 5 ? "…" : ""}`)
  }
  const simGpRep = leagueData[0]?.games_played
  const staleBanner = staleTeamCount > 0 && simGpRep != null
    ? html`<div class="page-legend" style="border-left:3px solid #c4734a;padding:0.5rem 0.8rem;margin:0.5rem 0;">
        <strong>Stale simulation:</strong> this projection was generated when teams had played ~${simGpRep} games; live standings now show up to ${maxLiveGp}. Projected points reflect the snapshot at sim time — the Current tab has the latest actuals. The sim rebuilds when new predictions land from pannadata.
      </div>`
    : html``

  const teamRender = window.footballMaps?.renderTeamCell || ((v) => `<strong>${statsEsc(v)}</strong>`)

  if (isCup) {
    // Cup-specific projected view: league phase position + knockout progression
    const cupTable = statsTable(enriched, {
      columns: [
        "team", "games_played", "current_points", "current_gd",
        "avg_position", "auto_r16_pct", "playoff_pct", "eliminated_league_pct",
        "r16_pct", "qf_pct", "sf_pct", "final_pct", "winner_pct"
      ],
      mobileCols: ["team", "current_points", "avg_position", "r16_pct", "winner_pct"],
      header: {
        team: "Team", games_played: "GP", current_points: "Pts", current_gd: "GD",
        avg_position: "Pos", auto_r16_pct: "Auto", playoff_pct: "Playoff", eliminated_league_pct: "Out",
        r16_pct: "R16", qf_pct: "QF", sf_pct: "SF", final_pct: "Final", winner_pct: "Win"
      },
      groups: [
        { label: "", span: 1 }, { label: "Current", span: 3 },
        { label: "League Phase", span: 4 }, { label: "Knockout Probability", span: 5 }
      ],
      format: {
        current_gd: x => x != null ? (x > 0 ? "+" : "") + x : "",
        avg_position: x => x?.toFixed(1) ?? "",
        auto_r16_pct: pctFmt, playoff_pct: pctFmt, eliminated_league_pct: pctFmt,
        r16_pct: pctFmt, qf_pct: pctFmt, sf_pct: pctFmt, final_pct: pctFmt, winner_pct: pctFmt
      },
      render: { team: teamRender },
      heatmap: {
        avg_position: "low-good",
        auto_r16_pct: "high-good", playoff_pct: "high-good", eliminated_league_pct: "low-good",
        r16_pct: "high-good", qf_pct: "high-good", sf_pct: "high-good", final_pct: "high-good", winner_pct: "high-good"
      },
      tooltip: {
        games_played: "League phase games played", current_points: "Current league phase points", current_gd: "Current goal difference",
        avg_position: "Average league phase finishing position",
        auto_r16_pct: "Probability of finishing top 8 (automatic R16 qualification)",
        playoff_pct: "Probability of finishing 9th-24th (playoff round)",
        eliminated_league_pct: "Probability of elimination in league phase (25th-36th)",
        r16_pct: "Probability of reaching the Round of 16",
        qf_pct: "Probability of reaching the Quarter-Finals",
        sf_pct: "Probability of reaching the Semi-Finals",
        final_pct: "Probability of reaching the Final",
        winner_pct: "Probability of winning the competition"
      },
      sort: "winner_pct",
      reverse: true,
      rows: 36
    })
    return html`${staleBanner}${cupTable}`
  }

  // Domestic league projected view. Projected group reads left-to-right as
  // the forward-projection math: "X games left, +Y avg pts from them, Z
  // final pts" — makes the sim's "current + expected remaining" breakdown
  // self-evident instead of hiding it behind a single total.
  const hasSeasonTotal = leagueTotalGames[selectedLeague.value] != null
  const projectedCols = hasSeasonTotal
    ? ["games_remaining", "avg_points", "proj_total_pts", "proj_total_gd", "avg_position"]
    : ["proj_total_pts", "proj_total_gd", "avg_position"]
  const projectedSpan = projectedCols.length

  const domesticTable = statsTable(enriched, {
    columns: [
      "team", "games_played", "current_points", "current_gd",
      ...projectedCols,
      "title_pct", "top_4_pct", "top_half_pct", "bottom_3_pct"
    ],
    mobileCols: ["team", "current_points", "proj_total_pts", "title_pct", "top_4_pct"],
    header: {
      team: "Team", games_played: "GP", current_points: "Pts", current_gd: "GD",
      games_remaining: "Left", avg_points: "+Pts",
      proj_total_pts: "Pts", proj_total_gd: "GD", avg_position: "Pos",
      title_pct: "Title", top_4_pct: "Top 4", top_half_pct: "Top Half", bottom_3_pct: "Bottom 3"
    },
    groups: [
      { label: "", span: 1 }, { label: "Current", span: 3 },
      { label: "Projected", span: projectedSpan }, { label: "Probabilities", span: 4 }
    ],
    format: {
      current_gd: x => x != null ? (x > 0 ? "+" : "") + x : "",
      avg_points: x => x != null ? "+" + x.toFixed(1) : "",
      proj_total_pts: x => x?.toFixed(0) ?? "",
      proj_total_gd: x => x != null ? (x > 0 ? "+" : "") + x.toFixed(0) : "",
      avg_position: x => x?.toFixed(1) ?? "",
      title_pct: pctFmt, top_4_pct: pctFmt, top_half_pct: pctFmt, bottom_3_pct: pctFmt
    },
    render: { team: teamRender },
    heatmap: {
      avg_points: "high-good", proj_total_pts: "high-good", avg_position: "low-good",
      title_pct: "high-good", top_4_pct: "high-good", top_half_pct: "high-good", bottom_3_pct: "low-good"
    },
    tooltip: {
      games_played: "Games played so far", current_points: "Current points", current_gd: "Current goal difference",
      games_remaining: "Games remaining in the season",
      avg_points: "Expected points from remaining fixtures (simulation average)",
      proj_total_pts: "Projected final points (current + simulated remaining)",
      proj_total_gd: "Projected final goal difference",
      avg_position: "Average finishing position from simulations",
      title_pct: "Probability of winning the league",
      top_4_pct: "Probability of finishing in top 4",
      top_half_pct: "Probability of finishing in top half",
      bottom_3_pct: "Probability of finishing in bottom 3 (relegation zone)"
    },
    sort: "proj_total_pts",
    reverse: true,
    rows: 25
  })
  return html`${staleBanner}${domesticTable}`
}

leaguesAsAt = window.editorial.dataUpdated(window.DATA_BASE_URL + "football/simulations.parquet")

// ── Source attribution row ──────────────────────────────────
{
  const asAt = await leaguesAsAt
  const src = document.createElement("div"); src.className = "table-source"
  const left = document.createElement("span")
  left.appendChild(document.createTextNode("Source: "))
  const a = document.createElement("a")
  a.href = "https://github.com/peteowen1/panna"; a.target = "_blank"; a.rel = "noopener"
  a.textContent = "panna"
  left.appendChild(a)
  left.appendChild(document.createTextNode(" simulator · Panna team strengths · CC BY 4.0"))
  const right = document.createElement("span")
  right.textContent = [asAt, "Monte Carlo re-run after every matchday"].filter(Boolean).join(" · ")
  src.appendChild(left); src.appendChild(right)
  return src
}

// ── Editorial side rail ─────────────────────────────────────
{
  const inner = document.createElement("div")
  inner.className = "side-rail-inner"

  const { railBlock, btnTile } = window.editorial

  // Last Updated
  const upd = railBlock("Last Updated")
  const stamp = document.createElement("div"); stamp.className = "update-stamp"
  stamp.textContent = "After every matchday"
  upd.appendChild(stamp)
  const updP = document.createElement("p")
  updP.style.cssText = "font-family: 'Source Serif 4', Georgia, serif; font-size: 0.85rem; color: var(--site-muted-color); margin: 0.7rem 0 0; line-height: 1.55;"
  updP.appendChild(document.createTextNode("Simulations re-run from the daily "))
  const code = document.createElement("code")
  code.style.cssText = "font-family: 'JetBrains Mono', monospace; font-size: 0.85em; color: var(--site-body-color)"
  code.textContent = "pannadata"
  updP.appendChild(code)
  updP.appendChild(document.createTextNode(" pipeline."))
  upd.appendChild(updP); inner.appendChild(upd)

  // BTN — real data from simData across all leagues
  const btn = railBlock("By the Numbers")
  const grid = document.createElement("div"); grid.className = "btn-block"

  // Use simData (loaded on the page, contains all-league projections).
  // Fields: team, league, title_pct, top_4_pct, top_half_pct, bottom_3_pct (0-1 scale)
  const safeSim = (simData || []).filter(d => d && d.team)
  const leaguesCount = new Set(safeSim.map(d => d.league).filter(Boolean)).size

  function leagueLabel(code) {
    return (leagueNames && leagueNames[code]) ? leagueNames[code] : (code || "").replace(/_/g, " ")
  }

  if (safeSim.length > 0) {
    // Top title contender across all leagues
    const titleSorted = [...safeSim].sort((a, b) => (b.title_pct ?? 0) - (a.title_pct ?? 0))
    const titleFav = titleSorted[0]
    // Surest relegation (largest bottom_3_pct, only domestic leagues — cups don't relegate)
    const relSorted = [...safeSim].filter(d => !["UCL", "UEL", "UECL"].includes(d.league)).sort((a, b) => (b.bottom_3_pct ?? 0) - (a.bottom_3_pct ?? 0))
    const surestRel = relSorted[0]
    // Most likely Top 4 lock (highest top_4_pct, excluding the title favourite to avoid duplication)
    const top4Sorted = [...safeSim].filter(d => d !== titleFav).sort((a, b) => (b.top_4_pct ?? 0) - (a.top_4_pct ?? 0))
    const top4Lock = top4Sorted[0]

    if (titleFav) {
      grid.appendChild(btnTile(((titleFav.title_pct ?? 0) * 100).toFixed(0) + "%", [
        { text: "Title favourite", bold: true },
        { text: " · " + titleFav.team },
        { br: true }, { text: leagueLabel(titleFav.league) }
      ]))
    }
    if (top4Lock) {
      grid.appendChild(btnTile(((top4Lock.top_4_pct ?? 0) * 100).toFixed(0) + "%", [
        { text: "Surest Top 4", bold: true },
        { text: " · " + top4Lock.team },
        { br: true }, { text: leagueLabel(top4Lock.league) }
      ]))
    }
    if (surestRel) {
      grid.appendChild(btnTile(((surestRel.bottom_3_pct ?? 0) * 100).toFixed(0) + "%", [
        { text: "Surest relegation", bold: true },
        { text: " · " + surestRel.team },
        { br: true }, { text: leagueLabel(surestRel.league) }
      ]))
    }
  }
  grid.appendChild(btnTile(String(leaguesCount || 15), [
    { text: "Leagues simulated", bold: true },
    { text: " · Europe + UCL + UEL" }
  ]))
  btn.appendChild(grid); inner.appendChild(btn)

  // About
  const about = railBlock("How the sim works"); about.classList.add("about-block")
  const p1 = document.createElement("p")
  p1.appendChild(document.createTextNode("Each remaining fixture is simulated using the home/away clubs' "))
  const s = document.createElement("strong"); s.textContent = "Panna squad ratings"; p1.appendChild(s)
  p1.appendChild(document.createTextNode(" plus a small home-field advantage."))
  about.appendChild(p1)
  const p2 = document.createElement("p")
  p2.appendChild(document.createTextNode("Many full-season simulations per league produce the title-race, top-4 / top-6, and relegation probabilities."))
  about.appendChild(p2)
  inner.appendChild(about)

  // Read Next
  const read = railBlock("Read Next")
  const ul = document.createElement("ul"); ul.className = "rail-list"
  const links = [
    { href: "team-ratings.html", title: "Team Ratings", meta: "What drives the sim" },
    { href: "matches.html", title: "Matches", meta: "Matchday-by-matchday picks" },
    { href: "team-stats.html", title: "Team Stats", meta: "Box-score aggregates" },
    { href: "../blog/2026-04-24-understanding-panna/", title: "Understanding Panna", meta: "Blog · Methodology" }
  ]
  for (const l of links) {
    const li = document.createElement("li")
    const ax = document.createElement("a")
    ax.href = l.href; ax.textContent = l.title
    const meta = document.createElement("span"); meta.className = "rail-meta"; meta.textContent = l.meta
    ax.appendChild(meta); li.appendChild(ax); ul.appendChild(li)
  }
  read.appendChild(ul); inner.appendChild(read)

  return inner
}