R = transpose(ranks_raw)
G = transpose(games_raw)
S = transpose(snaps_raw)
TEAMS = new Map(transpose(teams_raw).map(t => [t.id, t]))
rows0 = x => { try { return transpose(x) } catch (e) { return [] } }
OVERRIDES = rows0(headline_overrides)
seasons = [...new Set(S.map(d => d.s))].sort((a, b) => b - a)
mutable pickedTeam = null
mutable racePick = null
mutable mResSort = "Resume ±"

TABS = [["rankings", "Rankings"], ["team", "Team"], ["matchup", "Matchup"], ["games", "Games"], ["trends", "Trends"],
        ["rvp", "Resume vs. Power"], ["polls", "Polls"], ["conference", "Conference"], ["postseason", "Postseason"]]
tab = Generators.observe(notify => {
  const known = new Set(TABS.map(t => t[0]))
  const read = () => { const h = location.hash.slice(1); notify(known.has(h) ? h : "rankings") }
  read(); addEventListener("hashchange", read)
  return () => removeEventListener("hashchange", read)
})
tabEffect = { document.body.dataset.tab = tab; window.scrollTo(0, 0); return tab }
// Wide screens get the row of links; phones get a "Section" menu that opens a grid of them.
// Picking a tab re-renders this cell, which closes the menu.
nav = {
  tabEffect
  const links = () => TABS.map(([k, label]) => htl.html`<a href=${"#" + k} aria-current=${k === tab ? "page" : null}>${label}</a>`)
  return htl.html`<div><nav class="nav nav-wide" aria-label="Dashboard sections">${links()}</nav>
    <details class="nav-menu"><summary><span class="eb">Section</span><strong>${new Map(TABS).get(tab)}</strong>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary>
      <nav class="nav-grid" aria-label="Dashboard sections">${links()}</nav></details></div>`
}
goToTeam = id => { mutable pickedTeam = id; location.hash = "team" }

themeButton = {
  const sun = htl.svg`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>`
  const moon = htl.svg`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>`
  const b = htl.html`<button type="button" class="icon-btn"></button>`
  const paint = () => {
    const dark = document.documentElement.dataset.theme === "dark"
    b.replaceChildren(dark ? sun : moon)
    b.setAttribute("aria-label", dark ? "Switch to light theme" : "Switch to dark theme")
  }
  b.onclick = () => {
    const next = document.documentElement.dataset.theme === "dark" ? "light" : "dark"
    document.documentElement.dataset.theme = next
    try { localStorage.setItem("cfb-theme", next) } catch (e) {}
    paint()
  }
  paint()
  return b
}

fmtSigned = (x, d = 1) => x == null ? "–" : (x > 0 ? "+" : x < 0 ? "−" : "") + Math.abs(x).toFixed(d)
fmtPct = x => x == null ? "–" : x >= 0.995 ? ">99%" : x < 0.005 ? (x > 0 ? "<1%" : "0%") : Math.round(x * 100) + "%"
ord = n => { const s = ["th", "st", "nd", "rd"], v = n % 100; return n + (s[(v - 20) % 10] || s[v] || s[0]) }
// Snapshot w is one ahead of the week it covers (w = 1 is "Week 0"); this gives the week's number
weekNum = w => (seasonSnaps.find(d => d.w === w)?.label ?? `Week ${w}`).replace("Week ", "")
// Games carry `wk` on the model's week sequence (shifted when a season has a Week 0); show the real label
wkLabels = new Map(G.filter(g => g.s === season).map(g => [g.wk, g.label]))
wkLab = w => { const l = wkLabels.get(w); return l == null ? weekNum(w) : l === "Postseason" ? "Post" : l.replace("Week ", "") }
toRoman = n => [[10, "X"], [9, "IX"], [5, "V"], [4, "IV"], [1, "I"]].reduce((acc, [v, r]) => { while (n >= v) { acc += r; n -= v } return acc }, "")
listAnd = xs => xs.length <= 1 ? (xs[0] ?? "") : `${xs.slice(0, -1).join(", ")} and ${xs.at(-1)}`
dayFmt = iso => new Date(iso + "T12:00").toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" })
// Kickoff, exported as "19:30" US Central (null when not yet announced)
timeFmt = (t, zone = true) => { if (!t) return "TBA"; const [h, m] = t.split(":").map(Number); return `${(h + 11) % 12 + 1}${m ? ":" + String(m).padStart(2, "0") : ""} ${h < 12 ? "a.m." : "p.m."}${zone ? " CT" : ""}` }
genAt = new Date(cfg.generated.slice(0, 16).replace(" ", "T"))
dateLong = genAt.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", year: "numeric" })
updatedAt = `${genAt.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" }).replace("AM", "a.m.").replace("PM", "p.m.")} ${cfg.generated.slice(17)}`
headline = (key, auto) => {
  const live = ["conference", "postseason"].includes(key)
  const s = live ? sim_meta.season : season, w = live ? sim_meta.week : snap.w
  return OVERRIDES.find(o => o.season === s && o.week === w && o.tab === key)?.text ?? auto
}

logo = (id, s = 30) => {
  const t = TEAMS.get(id)
  if (!t?.logo) return htl.html`<span class="logo-none" style=${{ width: s + "px", height: s + "px" }}></span>`
  return t.logo_dark
    ? htl.html`<img class="logo lg-light" src=${t.logo} width=${s} height=${s} alt="" loading="lazy"><img class="logo lg-dark" src=${t.logo_dark} width=${s} height=${s} alt="" loading="lazy">`
    : htl.html`<img class="logo" src=${t.logo} width=${s} height=${s} alt="" loading="lazy">`
}
logoSvg = (id, x, y, s) => {
  const t = TEAMS.get(id)
  if (!t?.logo) return htl.svg``
  return t.logo_dark
    ? htl.svg`<g><image class="lg-light" href=${t.logo} x=${x} y=${y} width=${s} height=${s}></image><image class="lg-dark" href=${t.logo_dark} x=${x} y=${y} width=${s} height=${s}></image></g>`
    : htl.svg`<image href=${t.logo} x=${x} y=${y} width=${s} height=${s}></image>`
}
// Team name that opens its Team page
teamLink = d => htl.html`<button type="button" class="tc-n" onclick=${() => goToTeam(d.id)}>${d.team}</button>`
teamCell = (d, sub, s = 30, link = true) => htl.html`<span class="tc">${logo(d.id, s)}<span class="tc-t">${link && fbsIds.has(d.id) ? teamLink(d) : htl.html`<span class="tc-n">${d.team}</span>`}${sub ? htl.html`<span class="tc-s">${sub}</span>` : ""}</span></span>`
move = (now, before) => {
  if (now == null || before == null) return htl.html`<span class="mv flat">–</span>`
  const m = before - now
  return m > 0 ? htl.html`<span class="mv up" title=${`Up ${m}`}>▲${m}</span>` : m < 0 ? htl.html`<span class="mv down" title=${`Down ${-m}`}>▼${-m}</span>` : htl.html`<span class="mv flat">–</span>`
}
pbar = (p, color, w = 100) => p == null ? htl.html`<span class="muted">–</span>` :
  htl.html`<span class="pb"><span class="pb-t" style=${{ width: w + "px" }}><span style=${{ width: `${Math.max(0, Math.min(1, p)) * 100}%`, background: color }}></span></span><span class="pb-v">${fmtPct(p)}</span></span>`
wl = (w, l) => w == null && l == null ? htl.html`<span class="muted">–</span>` :
  htl.html`<span class="wl"><span class="up">${fmtPct(w)}</span><span class="muted">/</span><span class="down">${fmtPct(l)}</span></span>`
eyebrow = (t, color = "var(--link)") => htl.html`<div class="eb" style=${{ color }}>${t}</div>`
kv = (k, v, s) => htl.html`<div class="kv"><span class="k">${k}</span><span class="v">${v}</span>${s ? htl.html`<span class="s">${s}</span>` : ""}</div>`
secH = (title, right) => htl.html`<div class="sec-h"><h2 class="disp">${title}</h2>${right ?? ""}</div>`
// Point and 80% range on a fixed scale
ibar = (v, lo, hi, [min, max], color) => {
  const x = d3.scaleLinear([min, max], [6, 114]).clamp(true)
  return htl.svg`<svg width="120" height="16" viewBox="0 0 120 16" aria-hidden="true">
    ${min < 0 && max > 0 ? htl.svg`<line x1=${x(0)} x2=${x(0)} y1="2" y2="14" stroke="var(--field)"/>` : ""}
    <line x1=${x(lo)} x2=${x(hi)} y1="8" y2="8" stroke=${color} stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
    <circle cx=${x(v)} cy="8" r="5" fill=${color} stroke="var(--paper)" stroke-width="1.5"/></svg>`
}
GRPVAR = ({ Power: "--g-power", Group: "--g-group", Independent: "--g-ind", FCS: "--field" })
normCdf = z => { const t = 1 / (1 + 0.2316419 * Math.abs(z)); const d = 0.3989423 * Math.exp(-z * z / 2);
  const p = d * t * (0.3193815 + t * (-0.3565638 + t * (1.781478 + t * (-1.821256 + t * 1.330274))));
  return z > 0 ? 1 - p : p }

grpName = g => g === "Power" ? (season < 2024 ? "Power 5" : "Power 4")
  : g === "Group" ? (season < 2026 ? "Group of 5" : "Group of 6")
  : g === "Independent" ? "Independents" : g
confKeys = rows => {
  const groups = ["Power", "Group", "Independent", "FCS"].filter(g => rows.some(d => d.grp === g))
  const confs = [...new Set(rows.map(d => d.conf))].filter(c => c !== "FBS Independents").sort()
  return ["all", ...groups.map(g => "grp:" + g), ...confs.map(c => "conf:" + c)]
}
confFmt = k => k === "all" ? "All FBS" : k.startsWith("grp:") ? `— ${grpName(k.slice(4))} —` : k.slice(5)
inConf = (d, k) => k === "all" || (k.startsWith("grp:") ? d.grp === k.slice(4) : d.conf === k.slice(5))
confKeyOf = d => d.grp === "Independent" ? "grp:Independent" : "conf:" + d.conf
teamPicker = (rows, key, label, preferred) => {
  const opts = rows.filter(d => inConf(d, key)).sort((a, b) => a.team.localeCompare(b.team))
  const best = [...opts].sort((a, b) => a.prk - b.prk)
  const value = opts.some(d => d.id === preferred) ? preferred : best[0]?.id
  return Inputs.select(opts.map(d => d.id), { label, format: id => opts.find(d => d.id === id).team, value })
}

seasonSnaps = S.filter(d => d.s === season).sort((a, b) => a.w - b.w)
snap = seasonSnaps.find(d => d.w === week) ?? seasonSnaps.at(-1)
prevSnap = seasonSnaps.filter(d => d.w < snap.w).at(-1)
fbs = R.filter(d => d.s === season && d.w === snap.w && d.tier === 1)
fbsIds = new Set(fbs.map(d => d.id))
byId = new Map(fbs.map(d => [d.id, d]))
prevRows = prevSnap ? new Map(R.filter(d => d.s === season && d.w === prevSnap.w && d.tier === 1).map(d => [d.id, d])) : new Map()
hasResume = snap.w > 0
byRes = [...fbs].sort((a, b) => (a.rrk ?? a.prk) - (b.rrk ?? b.prk))
byPow = [...fbs].sort((a, b) => a.prk - b.prk)
histOf = id => R.filter(d => d.s === season && d.id === id && d.w >= 1 && d.w <= snap.w).sort((a, b) => a.w - b.w)
avgPts = d3.mean(fbs, d => (d.off + d.def) / 2)
// The simulation only describes the live season's latest week
simLive = season === sim_meta.season && snap.w === sim_meta.week

SORTS = [
  { key: "resume", label: "Resume", col: "rrk", prev: "rrk" },
  { key: "power", label: "Power", col: "prk", prev: "prk" },
  { key: "off", label: "Offense", col: "off_rk" },
  { key: "def", label: "Defense", col: "def_rk" },
  { key: "sos", label: "Schedule", col: "sos_rk" },
  { key: "ap", label: "AP poll", col: "ap" },
  ...(fbs.some(d => d.cfp != null) ? [{ key: "cfp", label: "CFP", col: "cfp" }] : [])
].filter(s => hasResume || !["resume", "sos"].includes(s.key))

rankingsHeadline = {
  if (!hasResume) return `${byPow[0].team} opens No. 1 in power`
  const r1 = byRes[0], p1 = byPow[0], was = prevRows.get(r1.id)?.rrk
  const a = `${r1.team} ${was === 1 ? "holds" : was ? "climbs to" : "opens at"} No. 1`
  // Biggest fall among last week's top five
  const fall = [...prevRows.values()].filter(d => d.rrk <= 5 && byId.get(d.id)).map(d => ({ d: byId.get(d.id), from: d.rrk }))
    .filter(x => x.d.rrk - x.from >= 4).sort((x, y) => (y.d.rrk - y.from) - (x.d.rrk - x.from))[0]
  if (fall) return `${a}; ${fall.d.team} falls to ${ord(fall.d.rrk)}`
  return p1.id === r1.id ? a : `${a}; ${p1.team} tops power`
}

briefs = {
  const brief = (label, color, d, s) => htl.html`<div class="brief">${eyebrow(label, color)}
    <div class="who">${logo(d.id, 34)}<span class="disp">${d.team}</span></div><div class="s">${s}</div></div>`
  if (!hasResume) return htl.html`<section class="briefs"><div>${brief("Top power rating", "var(--pow-t)", byPow[0], htl.html`<strong>${fmtSigned(byPow[0].pw)} pts</strong> · preseason rating`)}</div></section>`
  const r1 = byRes[0], p1 = byPow[0], bub = byRes[cfg.benchmark_rank - 1]
  const rise = byRes.slice(0, 25).filter(d => prevRows.get(d.id)?.rrk != null).map(d => ({ d, m: prevRows.get(d.id).rrk - d.rrk })).sort((a, b) => b.m - a.m)[0]
  const was = prevRows.get(r1.id)?.rrk
  const p12 = bub.p12
  return htl.html`<section class="briefs" aria-label="This week at a glance"><div>
    ${brief("No. 1 Resume", "var(--res-t)", r1, htl.html`<strong>${fmtSigned(r1.wab, 2)} WAB</strong> · ${r1.wins}–${r1.losses} · ${was == null ? "first ranking" : was === 1 ? "No. 1 again" : `up from #${was}`}`)}
    ${brief("Top power rating", "var(--pow-t)", p1, htl.html`<strong>${fmtSigned(p1.pw)} pts</strong> · ${p1.wins}–${p1.losses} · ${p1.rrk === 1 ? "also No. 1 on resume" : `${p1.rrk > 8 ? "only " : ""}#${p1.rrk} on resume`}`)}
    ${rise && rise.m > 0 ? brief("Biggest riser", "var(--ink-3)", rise.d, htl.html`<strong class="up">▲ ${rise.m}</strong> · #${rise.d.rrk + rise.m} → #${rise.d.rrk} on resume`) : ""}
    ${brief(`On the bubble · #${cfg.benchmark_rank}`, "var(--ink-3)", bub, htl.html`<strong>${fmtSigned(bub.wab, 2)} WAB</strong> · ${bub.wins}–${bub.losses} · ${p12 >= 0.4 && p12 <= 0.6 ? `a coin flip (${fmtPct(p12)}) to be top ${cfg.benchmark_rank} right now` : `${fmtPct(p12)} to be top ${cfg.benchmark_rank} right now`}`)}
  </div></section>`
}

rankingsTable = {
  const sort = SORTS.find(s => s.key === sortKey) ?? SORTS[0]
  const q = search.trim().toLowerCase()
  const val = d => d[sort.col] ?? 9999
  const rows = fbs.filter(d => inConf(d, confPick) && (!q || d.team.toLowerCase().includes(q)))
    .sort((a, b) => val(a) - val(b) || (a.rrk ?? a.prk) - (b.rrk ?? b.prk))
  const wDom = [Math.min(-6, d3.min(fbs, d => d.wab_lo) ?? -6), Math.max(2, d3.max(fbs, d => d.wab_hi) ?? 2)]
  const pDom = d3.extent(fbs.flatMap(d => [d.pw_lo, d.pw_hi]))
  const hc = k => sort.key === k ? "var(--navy)" : "var(--ink-3)"
  const rng = (lo, hi) => lo == null || lo === hi ? "" : htl.html`<div class="note" style="font-size:12px;font-weight:400;line-height:1.1">${lo}–${hi}</div>`
  // The benchmark line sits where WAB turns negative: teams above it have won more than the
  // #12 team by power would have with their schedule (any number of teams can)
  const showCut = sort.key === "resume" && confPick === "all" && !q && hasResume
  const cutAfter = showCut ? rows.filter(d => d.wab > 0).at(-1)?.id : null
  const row = d => {
    const now = d[sort.col], before = sort.prev ? prevRows.get(d.id)?.[sort.prev] : null
    return htl.html`<div class="rk-row" role="row">
      <div class="stick s1 rk-num" role="cell"><span>${now ?? "–"}${sort.prev ? htl.html`<span class="mv-xs">${move(now, before)}</span>` : ""}</span></div>
      <div class="stick s2" role="cell">${sort.prev ? move(now, before) : ""}</div>
      <div class="stick s3" role="cell">${logo(d.id, 30)}<span class="tc-t">${teamLink(d)}<span class="tc-s">${d.conf}</span></span></div>
      <div class="c r" role="cell">${d.wins}–${d.losses}</div>
      <div class="rk-val" role="cell">${hasResume ? [htl.html`<span class="res-t">${fmtSigned(d.wab, 2)}</span>`, ibar(d.wab, d.wab_lo, d.wab_hi, wDom, "var(--res)")] : htl.html`<span class="muted">–</span>`}</div>
      <div class="c b r" role="cell">${d.rrk ?? "–"}${rng(d.rrk_lo, d.rrk_hi)}</div>
      <div class="c r" role="cell">${hasResume ? fmtPct(d.p12) : "–"}</div>
      <div class="rk-val" role="cell"><span class="pow-t">${fmtSigned(d.pw)}</span>${ibar(d.pw, d.pw_lo, d.pw_hi, pDom, "var(--pow)")}</div>
      <div class="c b r" role="cell">${d.prk}${rng(d.prk_lo, d.prk_hi)}</div>
      <div class="c r" role="cell" title=${d.off == null ? "" : `${d.off.toFixed(1)} pts scored vs. an average FBS defense`}>${d.off_rk ?? "–"}</div>
      <div class="c r" role="cell" title=${d.def == null ? "" : `${d.def.toFixed(1)} pts allowed vs. an average FBS offense`}>${d.def_rk ?? "–"}</div>
      <div class="c r" role="cell">${d.sos_rk ?? "–"}</div>
      <div class="c r" role="cell">${(sort.key === "cfp" ? d.cfp : d.ap) ?? "–"}</div>
    </div>${d.id === cutAfter ? htl.html`<div class="rk-cut" role="row"><span><span class="eb">Benchmark line · WAB 0</span>Teams above have won more than the #${cfg.benchmark_rank} power-rated team would have with their schedule.</span></div>` : ""}`
  }
  return htl.html`<div>
    <div class="rk-box"><div class="rk" role="table" aria-labelledby="fbs-title">
      <div class="rk-head-rows">
        <div class="rk-row rk-groups" role="presentation">
          <div style="grid-column:5 / span 3;color:var(--res-t);border-bottom:2px solid var(--res)">Resume</div>
          <div style="grid-column:8 / span 4;color:var(--pow-t);border-bottom:2px solid var(--pow)">Power</div>
          <div style="grid-column:12 / span 2;color:var(--ink-3);border-bottom:2px solid var(--field)">Context</div>
        </div>
        <div class="rk-row rk-cols" role="row">
          <div class="stick s1" role="columnheader">#</div>
          <div class="stick s2" role="columnheader"><span class="sr-only">Change</span></div>
          <div class="stick s3" role="columnheader">Team</div>
          <div class="r" role="columnheader">Record</div>
          <div role="columnheader" style=${{ color: hc("resume") }}>WAB<span class="hide-xs"> · 80% range</span></div>
          <div class="r" role="columnheader" style=${{ color: hc("resume") }}>Rank</div>
          <div class="r" role="columnheader" title=${`Chance the resume ranks top ${cfg.benchmark_rank} this week`}>Top ${cfg.benchmark_rank}</div>
          <div role="columnheader" style=${{ color: hc("power") }}>Rating<span class="hide-xs"> · 80% range</span></div>
          <div class="r" role="columnheader" style=${{ color: hc("power") }}>Rank</div>
          <div class="r" role="columnheader" style=${{ color: hc("off") }}>Off</div>
          <div class="r" role="columnheader" style=${{ color: hc("def") }}>Def</div>
          <div class="r" role="columnheader" style=${{ color: hc("sos") }}>SOS</div>
          <div class="r" role="columnheader" style=${{ color: hc(sort.key === "cfp" ? "cfp" : "ap") }}>${sort.key === "cfp" ? "CFP" : "AP"}</div>
        </div>
      </div>
      <div class="rk-body">${rows.map(row)}</div>
      ${rows.length ? "" : htl.html`<div style="padding:40px 24px;text-align:center;color:var(--ink-2)">No teams match. Try a shorter name or pick All FBS.</div>`}
    </div></div>
    <div class="rk-foot">
      <span>${snap.passed ? "✓ Model converged" : "⚠ Convergence checks failed"} · home field ${fmtSigned(snap.hfa)} pts</span>
      <span>WAB is wins above what the #${cfg.benchmark_rank} power-rated team would have on the same schedule. Dot is the median; bars and ranges are 80% intervals. Top ${cfg.benchmark_rank} is the chance of a top-${cfg.benchmark_rank} resume this week.</span>
    </div></div>`
}

// Rank chart: every team's resume rank and power-rating rank as a dumbbell on one 1–138 axis, with
// offense (sword) and defense (shield) as a smaller dumbbell underneath. Same sort and filters as the table.
rankChart = {
  const sort = SORTS.find(s => s.key === sortKey) ?? SORTS[0]
  const q = search.trim().toLowerCase()
  const val = d => d[sort.col] ?? 9999
  const rows = fbs.filter(d => inConf(d, confPick) && (!q || d.team.toLowerCase().includes(q)))
    .sort((a, b) => val(a) - val(b) || (a.rrk ?? a.prk) - (b.rrk ?? b.prk))
  const n = fbs.length
  const x = r => r == null ? null : (r - 1) / (n - 1) * 100
  const pc = v => `${v.toFixed(2)}%`
  // The sword and shield are 14px wide. Estimate the track's width (it matches the CSS grid below)
  // so icons closer than that can be pushed apart, the better rank to the left
  const phone = width <= 520
  const box = Math.max(phone ? 900 : 1180, Math.min(width, 1280) - (width <= 820 ? 32 : 64))
  const fixed = phone ? 28 + 110 + 50 + 44 + 26 * 3 + 7 * 6 + 8 + 16 : 40 + 210 + 56 + 52 + 40 * 2 + 36 + 7 * 12 + 12 + 16
  const ppr = (box - fixed) / (n - 1)
  const nudge = (o, e) => {
    const p = Math.max(0, (15 - Math.abs(o - e) * ppr) / 2), s = o <= e ? -1 : 1
    return [-7 + s * p, -7 - s * p]
  }
  const sword = (v, m) => htl.svg`<svg class="rc-ico" viewBox="0 0 24 24" aria-hidden="true" style=${{ left: pc(v), marginLeft: `${m.toFixed(1)}px` }}>
    <polyline points="14.5 17.5 3 6 3 3 6 3 17.5 14.5"/><line x1="13" x2="19" y1="19" y2="13"/><line x1="16" x2="20" y1="16" y2="20"/><line x1="19" x2="21" y1="21" y2="19"/></svg>`
  const shield = (v, m) => htl.svg`<svg class="rc-ico def" viewBox="0 0 24 24" aria-hidden="true" style=${{ left: pc(v), marginLeft: `${m.toFixed(1)}px` }}>
    <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></svg>`
  const span = (a, b) => ({ left: pc(Math.min(a, b)), width: pc(Math.abs(a - b)) })
  const row = d => {
    const r = x(d.rrk), p = x(d.prk), o = x(d.off_rk), e = x(d.def_rk)
    const [om, em] = o != null && e != null ? nudge(d.off_rk, d.def_rk) : [-7, -7]
    return htl.html`<div class="rc-row" role="row">
      <div class="stick s1 rk-num" role="cell">${d[sort.col] ?? "–"}</div>
      <div class="stick s3" role="cell">${logo(d.id, 30)}<span class="tc-t">${teamLink(d)}</span></div>
      <div class="rc-track" role="cell" aria-label=${`Resume rank ${d.rrk ?? "–"}, power rating rank ${d.prk}, offense ${d.off_rk ?? "–"}, defense ${d.def_rk ?? "–"}`}>
        <span class="rc-band"></span>
        ${r != null ? htl.html`<span class="rc-bar" style=${span(r, p)}></span>` : ""}
        ${o != null ? htl.html`<span class="rc-tick" style=${{ left: pc(p) }}></span>` : ""}
        ${o != null && e != null ? htl.html`<span class="rc-sub" style=${span(o, e)}></span>` : ""}
        ${o != null ? sword(o, om) : ""}${e != null ? shield(e, em) : ""}
        ${r != null ? htl.html`<span class="rc-dot res" style=${{ left: pc(r) }}></span>` : ""}
        <span class="rc-dot pow" style=${{ left: pc(p) }}></span>
      </div>
      <div class="c b r res-t" role="cell">${d.rrk ?? "–"}</div>
      <div class="c b r pow-t" role="cell">${d.prk}</div>
      <div class="c r" role="cell">${d.off_rk ?? "–"}</div>
      <div class="c r" role="cell">${d.def_rk ?? "–"}</div>
      <div class="c r" role="cell">${(sort.key === "cfp" ? d.cfp : d.ap) ?? "–"}</div>
    </div>`
  }
  const ticks = [1, cfg.benchmark_rank, 25, 50, 75, 100, 125, n]
  const sw = htl.svg`<svg class="rc-key-ico" viewBox="0 0 24 24" aria-hidden="true"><polyline points="14.5 17.5 3 6 3 3 6 3 17.5 14.5"/><line x1="13" x2="19" y1="19" y2="13"/><line x1="16" x2="20" y1="16" y2="20"/><line x1="19" x2="21" y1="21" y2="19"/></svg>`
  const sh = htl.svg`<svg class="rc-key-ico def" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></svg>`
  return htl.html`<div>
    <div class="rk-box"><div class="rc" role="table" aria-labelledby="fbs-title" style=${{ "--band": pc((cfg.benchmark_rank - 0.5) / (n - 1) * 100) }}>
      <div class="rc-row rc-head" role="row">
        <div class="stick s1" role="columnheader">#</div>
        <div class="stick s3" role="columnheader">Team</div>
        <div class="rc-axis" role="columnheader"><span class="sr-only">Resume rank and power-rating rank, 1 to ${n}</span>
          ${ticks.map(t => htl.html`<span aria-hidden="true" style=${{ left: pc(x(t)) }}>${t}</span>`)}</div>
        <div class="r res-t" role="columnheader">Resume</div>
        <div class="r pow-t" role="columnheader">Power</div>
        <div class="r" role="columnheader">Off</div>
        <div class="r" role="columnheader">Def</div>
        <div class="r" role="columnheader">${sort.key === "cfp" ? "CFP" : "AP"}</div>
      </div>
      <div class="rc-body">${rows.map(row)}</div>
      ${rows.length ? "" : htl.html`<div style="padding:40px 24px;text-align:center;color:var(--ink-2)">No teams match. Try a shorter name or pick All FBS.</div>`}
    </div></div>
    <div class="rk-foot">
      <span>${snap.passed ? "✓ Model converged" : "⚠ Convergence checks failed"} · home field ${fmtSigned(snap.hfa)} pts</span>
      <span class="key">
        <span><span class="dot" style="background:var(--res)"></span>Resume rank</span>
        <span><span class="dot" style="background:var(--pow)"></span>Power rating, ranked</span>
        <span>${sw}Offense</span><span>${sh}Defense</span>
        <span><span class="rc-key-band"></span>Top ${cfg.benchmark_rank}</span>
      </span>
    </div></div>`
}

tRow = fbs.find(d => d.id === teamId) ?? fbs[0]
tGames = G.filter(d => d.s === season && d.id === tRow.id).sort((a, b) => a.wk - b.wk)
tSim = simLive ? simRows.find(d => d.id === tRow.id) : null

teamBody = {
  const n = fbs.length, pctl = rk => 1 - (rk - 1) / (n - 1)
  const rating = (k, v, rk, color, sub) => rk == null ? "" : htl.html`<div class="rating"><b>${k}</b><b style=${{ color }}>${v}</b>
    <span class="bar"><svg width="150" height="14" aria-hidden="true" style="flex:0 0 auto"><rect x="0" y="5" width="150" height="4" rx="2" fill="var(--chip)"/>
      <rect x="0" y="5" width=${pctl(rk) * 150} height="4" rx="2" fill=${color} fill-opacity="0.35"/><circle cx=${pctl(rk) * 140 + 5} cy="7" r="5" fill=${color} stroke="var(--paper)" stroke-width="1.5"/></svg>
      <span class="note">#${rk} of ${n}${sub ? " · " + sub : ""}</span></span></div>`
  const pm = prevRows.get(tRow.id)
  const mvTxt = (a, b) => b == null || a === b ? "" : a < b ? `▲${b - a} this week` : `▼${a - b} this week`
  const future = tGames.filter(g => g.result == null && g.wk > snap.w)
  const xw = tRow.wins + d3.sum(future, g => g.fut_wp ?? 0)
  const hist = histOf(tRow.id)
  const mini = hist.length < 2 ? "" : Plot.plot({
    width: 320, height: 230, marginLeft: 30, marginRight: 16, marginTop: 12, marginBottom: 26,
    style: { background: "transparent", fontSize: "12px" },
    x: { label: null, ticks: hist.map(d => d.w), tickFormat: w => weekNum(w) },
    y: { reverse: true, domain: [1, Math.max(50, d3.max(hist, d => Math.max(d.rrk, d.prk)) + 2)], ticks: [1, 12, 25, 50], label: null, grid: true },
    marks: [
      Plot.ruleY([cfg.benchmark_rank], { stroke: "var(--sky)", strokeDasharray: "4,3" }),
      Plot.line(hist, { x: "w", y: "prk", stroke: "var(--pow)", strokeWidth: 2.5 }),
      Plot.line(hist, { x: "w", y: "rrk", stroke: "var(--res)", strokeWidth: 2.5 }),
      Plot.dot(hist, { x: "w", y: "prk", fill: "var(--pow)", r: 3.5, stroke: "var(--paper)" }),
      Plot.dot(hist, { x: "w", y: "rrk", fill: "var(--res)", r: 3.5, stroke: "var(--paper)" }),
      Plot.tip(hist, Plot.pointerX({ x: "w", y: "rrk", title: d => `Week ${weekNum(d.w)}\nResume #${d.rrk} · Power #${d.prk}` }))
    ]
  })
  const outlook = tSim ? htl.html`<div class="outlook">
      ${kv("Proj. wins", tSim.xw.toFixed(1))}${kv("Playoff", fmtPct(tSim.p_cfp))}
      ${tSim.cg > 0 ? kv("Conf. title", fmtPct(tSim.p_title)) : ""}${tSim.left > 0 ? kv("Win out", fmtPct(tSim.p_winout)) : ""}</div>`
    : future.length ? htl.html`<div class="outlook">${kv("Proj. wins", xw.toFixed(1))}</div>` : htl.html`<p class="note">Season complete.</p>`
  const tr = g => {
    const o = byId.get(g.opp_id) ?? { id: g.opp_id, team: g.opp }
    const played = g.result != null, win = played && g.pts > g.opp_pts
    const mm = played ? g.pre_margin : g.fut_margin, wp = played ? g.pre_wp : g.fut_wp
    return htl.html`<tr>
      <td class="muted hide-xs" style="width:36px">${wkLab(g.wk)}</td>
      <td>${teamCell(o, `${g.venue === "A" ? "Away" : g.venue === "N" ? "Neutral" : "Home"}${o.prk ? ` (${o.rrk ?? "–"}/${o.prk})` : " · FCS"}`, 28)}</td>
      <td>${played ? htl.html`<strong class=${win ? "up" : "down"}>${win ? "W" : "L"} ${g.pts}–${g.opp_pts}${g.ot ? " OT" : ""}</strong>` : htl.html`<span class="muted" style="display:block;line-height:1.25">${dayFmt(g.date)}<br>${timeFmt(g.time, false)}</span>`}</td>
      <td class="n">${mm == null ? "–" : fmtSigned(-mm)}</td>
      <td class="n muted hide-sm">${g.line == null ? "–" : fmtSigned(-g.line)}</td>
      <td class="hide-xs">${wp == null ? "–" : pbar(wp, played ? "var(--field)" : "var(--pow)", 80)}</td>
      <td class="n">${played && g.wab_game != null ? htl.html`<strong style=${{ color: g.wab_game >= 0 ? "var(--res-t)" : "var(--down)" }}>${fmtSigned(g.wab_game, 2)}</strong>` : htl.html`<span class="muted">–</span>`}</td>
    </tr>`
  }
  const played = tGames.filter(g => g.result != null), left = tGames.filter(g => g.result == null)
  const lastWk = played.at(-1)?.wk, nextWk = left[0]?.wk
  const byes = lastWk != null && nextWk != null ? d3.range(lastWk + 1, nextWk) : []
  return htl.html`<div class="team-grid">
    <aside>
      <div>${eyebrow("Ratings, as percentiles of FBS", "var(--ink-3)")}
        ${hasResume ? rating("Resume", `${fmtSigned(tRow.wab, 2)} WAB`, tRow.rrk, "var(--res)", mvTxt(tRow.rrk, pm?.rrk)) : ""}
        ${rating("Power", `${fmtSigned(tRow.pw)} pts`, tRow.prk, "var(--pow)", mvTxt(tRow.prk, pm?.prk))}
        ${tRow.off == null ? "" : rating("Offense", `${tRow.off.toFixed(1)} pts`, tRow.off_rk, "var(--navy)", "points scored")}
        ${tRow.def == null ? "" : rating("Defense", `${tRow.def.toFixed(1)} pts`, tRow.def_rk, "var(--navy)", "points allowed")}
        ${hasResume ? rating("Schedule", "SOS", tRow.sos_rk, "var(--ink-3)", "opponents so far") : ""}</div>
      <div style="padding-top:16px">${eyebrow("Outlook", "var(--ink-3)")}${outlook}</div>
      ${mini ? htl.html`<div style="padding-top:22px;margin-top:18px;border-top:1px solid var(--rule)">
        <div style="display:flex;justify-content:space-between;align-items:baseline">${eyebrow("Rank by week", "var(--ink-3)")}
          <span style="display:flex;gap:12px;font-size:13px;font-weight:700"><span class="res-t">Resume #${tRow.rrk}</span><span class="pow-t">Power #${tRow.prk}</span></span></div>
        ${mini}<span class="note">Dashed line: #${cfg.benchmark_rank}</span></div>` : ""}
    </aside>
    <section style="min-width:0">
      ${secH("Schedule", htl.html`<span class="note">Model and Vegas: ${tRow.team}'s line before kickoff</span>`)}
      <div class="tbl-wrap"><table class="t"><thead><tr><th class="hide-xs">Wk</th><th>Opponent<br><span style="font-weight:400">(resume/power)</span></th><th>Result</th><th class="n pow-t">Model</th><th class="n hide-sm">Vegas</th><th class="hide-xs">Win chance</th><th class="n res-t">Resume ±</th></tr></thead>
      <tbody>${played.map(tr)}${left.length ? htl.html`<tr class="grp"><td colspan="7"><span class="eb" style="color:var(--ink-3)">${byes.length ? `Week ${byes.map(wkLab).join(", ")} bye · ` : ""}Still to play</span></td></tr>` : ""}${left.map(tr)}</tbody></table></div>
    </section></div>`
}

mTeams = {
  const last = d3.max(seasonSnaps, d => d.w)
  const fcs = R.filter(d => d.s === season && d.w === last && d.tier === 2)
  return [...fbs, ...fcs].sort((a, b) => a.team.localeCompare(b.team))
}
mById = new Map(mTeams.map(d => [d.id, d]))
// Team page → Matchup resume view: this team as A, the next team up the resume (or down, for
// No. 1) as B, ready to change
goCompare = id => {
  const list = hasResume ? byRes : byPow, i = list.findIndex(d => d.id === id)
  const set = (v, x) => { v.value = x; v.dispatchEvent(new Event("input", { bubbles: true })) }
  set(viewof teamA, id)
  set(viewof teamB, list[i <= 0 ? 1 : i - 1].id)
  set(viewof mView, hasResume ? "Resume" : "Power")
  location.hash = "matchup"
  window.scrollTo(0, 0)
}
matchup = {
  const a = mById.get(teamA), b = mById.get(teamB), v = venue
  const mean = a.pw - b.pw + snap.hfa * v
  // Game noise (growing with the spread for the scale-t family) plus doubt about both ratings
  const sd = Math.sqrt(snap.noise_sd ** 2 + (snap.noise_slope * mean) ** 2 + a.pw_sd ** 2 + b.pw_sd ** 2)
  const hasScore = a.off != null && b.off != null
  const ptsA = hasScore ? a.off + b.def - avgPts + snap.hfa * v / 2 : null
  const ptsB = hasScore ? b.off + a.def - avgPts - snap.hfa * v / 2 : null
  return { a, b, mean, sd, pA: normCdf(mean / sd), ptsA, ptsB }
}
favTxt = m => `${m.mean >= 0 ? m.a.team : m.b.team} by ${Math.abs(m.mean).toFixed(1)}`
matchupHeadline = {
  const { a, b, mean } = matchup
  if (a.id === b.id) return "Pick two different teams"
  if (mView === "Resume") {
    if (!hasResume || a.wab == null || b.wab == null) return `${a.team} vs. ${b.team}`
    const [lead, trail] = a.wab >= b.wab ? [a, b] : [b, a]
    return `${lead.team} leads ${trail.team} by ${(lead.wab - trail.wab).toFixed(2)} WAB`
  }
  if (Math.abs(mean) < 1.5) return `${a.team}, ${b.team} a toss-up`
  const [fav, dog] = mean >= 0 ? [a, b] : [b, a]
  return `${fav.team} by ${Math.abs(mean).toFixed(1)} over ${dog.team}`
}

matchupBody = {
  // Site only matters for the power view
  const vr = document.querySelector(".venue-row")
  if (vr) vr.style.display = mView === "Power" ? "" : "none"
  return mView === "Power" ? powerBody : resumeBody
}
mSide = (d, cls) => htl.html`<div class=${"side " + cls}>${logo(d.id, 96)}<h2 class="disp">${d.team}</h2>
  <span style="color:var(--ink-2)">${d.wins}–${d.losses} · Power #${d.prk}${d.rrk ? ` · Resume #${d.rrk}` : ""}</span></div>`
resumeBody = {
  const a = mById.get(teamA), b = mById.get(teamB)
  if (!hasResume) return htl.html`<p class="note">Resume rankings start after Week 1.</p>`
  if (a.wab == null || b.wab == null) return htl.html`<p class="note">Resume comparisons cover FBS teams only.</p>`
  const played = d => G.filter(g => g.s === season && g.id === d.id && g.result != null)
  const oppRk = g => byId.get(g.opp_id)?.prk ?? null
  const rec = gs => `${gs.filter(g => g.result === "W").length}–${gs.filter(g => g.result === "L").length}`
  const vs = (d, lo, hi) => rec(played(d).filter(g => { const r = oppRk(g); return lo == null ? r == null : r != null && r >= lo && r <= hi }))
  const row = (lab, av, bv, better) => htl.html`<div class="tape-row"><span class=${better === "a" ? "w" : "l"}>${av}</span>
    <span class="eb">${lab}</span><span class=${better === "b" ? "w" : "l"}>${bv}</span></div>`
  const cmp = (x, y, hi = true) => x == null || y == null || x === y ? null : (hi ? x > y : x < y) ? "a" : "b"
  const rng = d => d.rrk_lo == null ? "" : htl.html` <span class="note">${d.rrk_lo}–${d.rrk_hi}</span>`
  const tape = [
    row("WAB", htl.html`${fmtSigned(a.wab, 2)} <span class="note">#${a.rrk}</span>`, htl.html`<span class="note">#${b.rrk}</span> ${fmtSigned(b.wab, 2)}`, cmp(a.wab, b.wab)),
    row("Rank · 80%", htl.html`#${a.rrk}${rng(a)}`, htl.html`#${b.rrk}${rng(b)}`, cmp(a.rrk, b.rrk, false)),
    row(`Top ${cfg.benchmark_rank}`, fmtPct(a.p12), fmtPct(b.p12), cmp(a.p12, b.p12)),
    row("Schedule", `#${a.sos_rk ?? "–"}`, `#${b.sos_rk ?? "–"}`, cmp(a.sos_rk, b.sos_rk, false)),
    row("Record", `${a.wins}–${a.losses}`, `${b.wins}–${b.losses}`, null),
    row("vs. power top 25", vs(a, 1, 25), vs(b, 1, 25), null),
    row("vs. 26–50", vs(a, 26, 50), vs(b, 26, 50), null),
    row("vs. 51+", vs(a, 51, 999), vs(b, 51, 999), null),
    row("vs. FCS", vs(a, null), vs(b, null), null)
  ]
  const [lead, trail] = a.wab >= b.wab ? [a, b] : [b, a]
  const oppPow = g => byId.get(g.opp_id)?.prk ?? 999
  const order = { "Week": (x, y) => x.wk - y.wk, "Resume ±": (x, y) => y.wab_game - x.wab_game, "Opponent power": (x, y) => oppPow(x) - oppPow(y) }[mResSort]
  const sortCtl = Inputs.radio(["Week", "Resume ±", "Opponent power"], { label: "Sort games", value: mResSort })
  sortCtl.addEventListener("input", () => { mutable mResSort = sortCtl.value })
  const listOf = d => played(d).filter(g => g.wab_game != null).sort(order)
  // By week, both lists run over the same weeks, with byes filled in so the rows line up
  const wkKey = g => g.label === "Postseason" ? 999 : g.wk
  const wks = [a, b].flatMap(d => listOf(d).map(wkKey)), reg = wks.filter(w => w < 999)
  const weeks = [...(reg.length ? d3.range(d3.min(reg), d3.max(reg) + 1) : []), ...(wks.includes(999) ? [999] : [])]
  const byWeek = gs => weeks.flatMap(w => { const ws = gs.filter(g => wkKey(g) === w); return ws.length ? ws : [{ bye: true, wk: w }] })
  const games = d => {
    const gs = mResSort === "Week" ? byWeek(listOf(d)) : listOf(d)
    return htl.html`<section style="min-width:0">${secH(d.team)}
      <div class="tbl-wrap"><table class="t"><thead><tr><th class="hide-xs">Wk</th><th>Opponent<br><span style="font-weight:400">(power rank)</span></th><th>Result</th><th class="n res-t">Resume ±</th></tr></thead>
      <tbody>${gs.map(g => { if (g.bye) return htl.html`<tr class="muted"><td class="hide-xs" style="width:36px">${wkLab(g.wk)}</td><td>${teamCell({ id: null, team: "Bye" }, "No game", 24, false)}</td><td></td><td></td></tr>`
        const o = byId.get(g.opp_id) ?? { id: g.opp_id, team: g.opp }
        return htl.html`<tr><td class="muted hide-xs" style="width:36px">${wkLab(g.wk)}</td><td>${teamCell(o, `${g.venue === "A" ? "Away" : g.venue === "N" ? "Neutral" : "Home"}${o.prk ? ` · #${o.prk}` : " · FCS"}`, 24)}</td>
          <td><strong class=${g.result === "W" ? "up" : "down"}>${g.result} ${g.pts}–${g.opp_pts}${g.ot ? " OT" : ""}</strong></td>
          <td class="n"><strong style=${{ color: g.wab_game >= 0 ? "var(--res-t)" : "var(--down)" }}>${fmtSigned(g.wab_game, 2)}</strong></td></tr>` })}</tbody></table></div></section>`
  }
  return htl.html`<div style="display:flex;flex-direction:column;gap:36px">
    <section class="faceoff">${mSide(a, "a")}
      <div class="verdict">${eyebrow("Resume", "var(--res-t)")}
        <span class="disp">${lead.team} by ${(lead.wab - trail.wab).toFixed(2)}</span>
        <span style="font-size:15px;color:var(--ink-2)">WAB gap · wins above the #${cfg.benchmark_rank} power-rated team on the same schedule</span>
      </div>${mSide(b, "b")}</section>
    <section class="tape">${tape}</section>
    <div style="display:flex;flex-direction:column;gap:12px"><div class="ctl seg">${sortCtl}</div>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px 36px">${games(a)}${games(b)}</div></div></div>`
}
powerBody = {
  const m = matchup, { a, b } = m
  const side = mSide
  const stats = [["Power", "pw", "prk", v => fmtSigned(v), true], ["Offense", "off", "off_rk", v => v.toFixed(1), true],
    ["Defense", "def", "def_rk", v => v.toFixed(1), false], ["SP+", "sp", "sp_rk", v => fmtSigned(v), true], ["Resume", "wab", "rrk", v => fmtSigned(v, 2), true]]
    .filter(([, k]) => a[k] != null && b[k] != null)
  const tape = stats.map(([lab, k, rk, f, hi]) => {
    const aw = hi ? a[k] > b[k] : a[k] < b[k]
    return htl.html`<div class="tape-row"><span class=${aw ? "w" : "l"}>${f(a[k])} <span class="note">#${a[rk]}</span></span>
      <span class="eb">${lab}</span><span class=${aw ? "l" : "w"}><span class="note">#${b[rk]}</span> ${f(b[k])}</span></div>`
  })
  const xs = d3.range(-45, 45.5, 0.5).map(x => ({ x, y: Math.exp(-0.5 * ((x - m.mean) / m.sd) ** 2) / (m.sd * Math.sqrt(2 * Math.PI)) }))
  const ymax = d3.max(xs, d => d.y)
  const chart = Plot.plot({
    width: Math.min(width, 1216), height: 320, marginLeft: 30, marginRight: 30, marginBottom: 50,
    style: { background: "transparent", fontSize: "13px" },
    x: { label: `${a.team} margin (points) →`, labelAnchor: "center", labelOffset: 44, domain: [-45, 45] }, y: { axis: null, domain: [0, ymax * 1.15] },
    marks: [
      Plot.areaY(xs.filter(d => d.x >= 0), { x: "x", y: "y", fill: "var(--pow)", fillOpacity: 0.28 }),
      Plot.areaY(xs.filter(d => d.x <= 0), { x: "x", y: "y", fill: "var(--res)", fillOpacity: 0.22 }),
      Plot.line(xs, { x: "x", y: "y", stroke: "var(--navy)", strokeWidth: 2 }),
      Plot.ruleX([0], { stroke: "var(--ink-2)", strokeDasharray: "3,3" }),
      Plot.ruleY([0], { stroke: "var(--navy)" }),
      // Phones: the verdict above already gives both chances, and the labels would clip
      ...(width < 600 ? [] : [Plot.text([{ x: 24, y: ymax * 0.8 }], { x: "x", y: "y", text: () => `${a.team} wins ${fmtPct(m.pA)}`, fill: "var(--pow-t)", fontWeight: 700, fontSize: 14, textAnchor: "start" }),
      Plot.text([{ x: -24, y: ymax * 0.8 }], { x: "x", y: "y", text: () => `${b.team} wins ${fmtPct(1 - m.pA)}`, fill: "var(--res-t)", fontWeight: 700, fontSize: 14, textAnchor: "end" })])
    ]
  })
  return htl.html`<div style="display:flex;flex-direction:column;gap:36px">
    <section class="faceoff">${side(a, "a")}
      <div class="verdict">${eyebrow(venue === 0 ? "Neutral field" : `At ${venue > 0 ? a.team : b.team}`, "var(--ink-3)")}
        <span class="disp">${favTxt(m)}</span>
        <span class="split"><span style=${{ width: `${m.pA * 100}%`, background: "var(--pow)" }}></span><span style="flex:1;background:var(--res)"></span></span>
        <span style="display:flex;justify-content:space-between;width:100%;font-weight:700"><span class="pow-t">${fmtPct(m.pA)}</span><span class="res-t">${fmtPct(1 - m.pA)}</span></span>
        ${m.ptsA == null ? "" : htl.html`<span style="font-size:15px;color:var(--ink-2)">Projected score <strong style="color:var(--ink)">${Math.round(m.ptsA)}–${Math.round(m.ptsB)}</strong> · total ${(m.ptsA + m.ptsB).toFixed(0)}</span>`}
      </div>${side(b, "b")}</section>
    <section class="tape">${tape}<div class="tape-row"><span class="l">${a.wins}–${a.losses}</span><span class="eb">Record</span><span class="l">${b.wins}–${b.losses}</span></div></section>
    <section><div class="chart-scroll">${chart}</div></section></div>`
}