@johnmorrisdotca/taisen-brackets 0.3.0 → 0.5.0

package/dist/render.js

@@ -1,18 +1,75 @@
 import { layoutBracket } from "./layout.js";
 import { abbrOf, describeTie, noteParts } from "./matchup.js";
-import { cleanSvg, clipId, drawEmblem, drawMark, hasTrophy as hasTrophyOf, isEmblemId, safeUrl } from "./marks.js";
+import { cleanSvg, drawEmblem, drawMark, hasTrophy as hasTrophyOf, isEmblemId, markDefs, safeHref, safeUrl } from "./marks.js";
 import { roundLabel } from "./rounds.js";
 import { styleFor } from "./theme.js";
-import { esc, fit, hash, num, textWidth } from "./text.js";
+import { resolveBackground } from "./background.js";
+import { emWidth, esc, fit, hash, num } from "./text.js";
 import { fill, voiceOf } from "./locales.js";
-/** The sizes by name. A phone's drawing is 390 wide and as tall as the bracket needs. */
+/** The sizes by name. A phone's drawing is 390 wide and as tall as the bracket needs; a card is 1080 by 1350, a tall post. */
 export const SIZES = Object.freeze({
     wide: { width: 1200, height: 675 },
     square: { width: 1080, height: 1080 },
+    card: { width: 1080, height: 1350 },
     phone: { width: 390, height: null },
 });
 const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
 const isLayout = (x) => typeof x === "object" && x !== null && "ties" in x && "sides" in x && "rounds" in x;
+/** The width of a text in the road look, set in a bold face: a little generous, so that it stays inside its place whichever font the page falls back to. */
+const boldWidth = (text, size) => emWidth(text) * size;
+/** The seed tag of a side: the tie's own, else the team's tag, else its seed number; `""` for none. */
+function tagOf(tie, k) {
+    const given = tie.seeds?.[k];
+    const team = tie.sides[k];
+    const text = given ?? team?.tag ?? team?.seed;
+    return text === undefined || text === null ? "" : String(text).slice(0, 4);
+}
+/** The classes `tieClass` asks for on a tie's group, each a word of letters, digits, `-` and `_`; a leading space for each, `""` for none. A function that throws adds none. */
+function tieClassOf(o, tie) {
+    if (typeof o.tieClass !== "function")
+        return "";
+    let asked;
+    try {
+        asked = o.tieClass(tie);
+    }
+    catch {
+        return "";
+    }
+    if (typeof asked !== "string")
+        return "";
+    return asked.split(/\s+/).filter((word) => /^[A-Za-z_][\w-]*$/.test(word)).map((word) => ` ${word}`).join("");
+}
+/**
+ * Where a pill or a name of `w` wide can stand in the band `y0`..`y1` so that no connector line is within 5 of it: `pref` (its left edge) when that is clear, else the nearest clear place
+ * between the edges `lo` and `hi`; `null` when there is none.
+ */
+function freeX(segs, y0, y1, w, pref, lo, hi) {
+    const margin = 4;
+    const blocks = segs.filter((s) => Math.max(s.y0, s.y1) >= y0 - 1 && Math.min(s.y0, s.y1) <= y1 + 1).map((s) => [Math.min(s.x0, s.x1) - margin, Math.max(s.x0, s.x1) + margin]);
+    const ok = (x) => x >= lo && x + w <= hi && blocks.every(([a, b]) => x + w <= a || x >= b);
+    if (ok(pref))
+        return pref;
+    const found = [lo, hi - w, ...blocks.flatMap(([a, b]) => [b, a - w])].filter(ok);
+    return found.length === 0 ? null : found.reduce((best, x) => (Math.abs(x - pref) < Math.abs(best - pref) ? x : best));
+}
+/** The sizes of one row of a box: the name, the mark and the score. The road look has larger marks and a big, heavy score. */
+function metrics(rowH, road) {
+    if (road)
+        return { font: clamp(rowH * 0.46, 9, 20), md: clamp(rowH * 0.8, 12, 56), score: clamp(rowH * 0.68, 11, 38) };
+    const font = clamp(rowH * 0.5, 8.5, 16);
+    return { font, md: clamp(rowH * 0.7, 10, 28), score: font + 1 };
+}
+/** The ties a team played on its way to the final: the tree's ties it is a side of, never the third-place match or a round-robin game. */
+function pathOf(layout, team) {
+    const out = new Set();
+    if (team === undefined || team === null)
+        return out;
+    const id = String(team);
+    for (const t of layout.ties)
+        if (!t.third && t.round > 0 && t.sides.some((s) => s !== null && String(s.id) === id))
+            out.add(t.index);
+    return out;
+}
 /** The layout with each team's name in the language: what the drawing, the table and the description are written from. */
 export function localizedLayout(layout, v) {
     const named = new Map(layout.teams.map((t) => [t.id, { ...t, name: v.team(t) }]));
@@ -42,21 +99,23 @@ export function drawBracket(input, options = {}) {
     const theme = options.theme ?? "auto";
     const sizeName = typeof options.size === "string" || options.size === undefined ? options.size ?? "wide" : null;
     const size = sizeName ? SIZES[sizeName] : { width: options.size.width, height: options.size.height ?? null };
-    const orientation = options.orientation && options.orientation !== "auto" ? options.orientation : sizeName === "phone" || (size.height !== null && size.width < size.height * 0.8) ? "vertical" : "horizontal";
-    const prefix = options.id ?? `tb-${hash(JSON.stringify([v.locale.code, layout.teams.map((t) => t.name), layout.ties.map((t) => [t.id, t.sides.map((s) => s?.id ?? null), t.winner, t.result.score, t.round]), options.size, orientation, options.detail, theme, options.title, options.subtitle, options.seeds, options.scores, options.champion, options.markShape, options.roundLabels, options.thirdPlace, options.trophy ? 1 : 0]))}`;
-    const ctx = { radii: new Set(), symbols: new Map(), prefix, shape: options.markShape ?? "round" };
-    const plan = planBracket(layout, options, v, size, orientation === "vertical", ctx);
-    const drawn = plan.boxes.map((b) => drawBox(b, plan, options, v, ctx)); // draws the marks, so before the defs are written
+    const orientation = options.orientation && options.orientation !== "auto" ? options.orientation : sizeName === "phone" || sizeName === "card" || (size.height !== null && size.width < size.height * 0.8) ? "vertical" : "horizontal";
+    const road = options.look === "road";
+    const hasBg = typeof options.background === "string" || (typeof options.background === "object" && options.background !== null);
+    const prefix = options.id ?? `tb-${hash(JSON.stringify([v.locale.code, layout.teams.map((t) => t.name), layout.ties.map((t) => [t.id, t.sides.map((s) => s?.id ?? null), t.winner, t.result.score, t.round]), options.size, orientation, options.detail, theme, options.title, options.subtitle, options.seeds, options.scores, options.champion, options.markShape, options.roundLabels, options.thirdPlace, options.trophy ? 1 : 0, road ? 1 : 0, options.highlightPath ?? null, options.flags ? 1 : 0, ...(hasBg ? [options.background, options.vs, options.codes, options.seeds] : []), ...(options.flagHref ? ["h"] : [])]))}`;
+    const ctx = { radii: new Set(), symbols: new Map(), prefix, shape: options.markShape ?? "round", look: road ? "road" : "classic", flags: options.flags, flagHref: options.flagHref, theme: theme === "light" ? "light" : theme === "dark" || theme === "poster" ? "dark" : "inherit", flagCache: new Map() };
+    const path = pathOf(layout, options.highlightPath);
+    const plan = planBracket(layout, options, v, size, orientation === "vertical", ctx, road, path);
+    const linked = { count: 0 };
+    const drawn = plan.boxes.map((b) => drawBox(b, plan, options, v, ctx, linked)); // draws the marks, so before the defs are written
     const title = options.title ?? v.words.title;
     const desc = describeBracket(layout, options);
-    const defs = [
-        ...[...ctx.radii].sort((a, b) => a - b).map((r) => `<clipPath id="${clipId(prefix, r)}"><circle r="${num(r)}"/></clipPath>`),
-        ...[...ctx.symbols.values()].map((s) => `<symbol id="${s.id}" viewBox="${esc(s.viewBox)}" preserveAspectRatio="xMidYMid slice">${s.inner}</symbol>`),
-    ].join("");
-    const style = theme === "none" ? "" : `<style>${styleFor(`.${prefix}`, theme)}</style>`;
-    const bg = options.background === false ? "" : `<rect class="tb-bg" width="${num(plan.width)}" height="${num(plan.height)}"${theme === "none" ? ' fill="none"' : ""}/>`;
+    const picture = resolveBackground(options.background, theme, plan.width, plan.height, prefix);
+    const defs = markDefs(ctx) + (picture?.defs ?? "");
+    const style = theme === "none" ? "" : `<style>${styleFor(`.${prefix}`, theme, { road, links: linked.count > 0, follow: path.size > 0, bgAuto: picture?.auto }, picture?.inks)}</style>`;
+    const bg = options.background === false ? "" : `<rect class="tb-bg" width="${num(plan.width)}" height="${num(plan.height)}"${theme === "none" ? ' fill="none"' : ""}/>${picture?.body ?? ""}`;
     return [
-        `<svg xmlns="http://www.w3.org/2000/svg" lang="${esc(v.locale.code)}" class="taisen ${prefix}${options.className ? ` ${esc(options.className)}` : ""}" viewBox="0 0 ${num(plan.width)} ${num(plan.height)}" width="${num(plan.width)}" height="${num(plan.height)}" style="max-width:100%;height:auto" role="img" aria-labelledby="${prefix}-t ${prefix}-d">`,
+        `<svg xmlns="http://www.w3.org/2000/svg" lang="${esc(v.locale.code)}" class="taisen ${prefix}${road ? " tb-look-road" : ""}${path.size > 0 ? " tb-follow" : ""}${options.className ? ` ${esc(options.className)}` : ""}" viewBox="0 0 ${num(plan.width)} ${num(plan.height)}" width="${num(plan.width)}" height="${num(plan.height)}" style="max-width:100%;height:auto" role="img" aria-labelledby="${prefix}-t ${prefix}-d">`,
         `<title id="${prefix}-t">${esc(title)}</title><desc id="${prefix}-d">${esc(desc)}</desc>`,
         style,
         defs ? `<defs>${defs}</defs>` : "",
@@ -69,7 +128,7 @@ export function drawBracket(input, options = {}) {
     ].filter(Boolean).join("\n");
 }
 // ---------------------------------------------------------------------------------------------- the plan
-function planBracket(layout, o, v, size, vertical, ctx) {
+function planBracket(layout, o, v, size, vertical, ctx, road, path) {
     const pad = vertical ? 14 : 22;
     const showLabels = o.roundLabels ?? true;
     const poster = o.theme === "poster";
@@ -77,6 +136,11 @@ function planBracket(layout, o, v, size, vertical, ctx) {
     const links = [];
     const texts = [];
     const extras = [];
+    // The connector lines as they are drawn, so that the names of the rounds can be placed clear of them.
+    const segs = [];
+    const addLine = (...pts) => pts.slice(1).forEach(([x, y], i) => segs.push({ x0: pts[i][0], y0: pts[i][1], x1: x, y1: y }));
+    const clear = (lo, hi) => (w, pref, y) => freeX(segs, y - 16, y + 7, w, pref, lo, hi);
+    const finish = (plan) => ({ ...plan, texts: plan.texts.map((t) => (typeof t === "function" ? t() : t)) });
     const W0 = size.width;
     const titleH = (o.title ? (poster ? 46 : 38) : 0) + (o.subtitle ? 24 : 0) + (o.title || o.subtitle ? 10 : 0);
     const hasGroups = layout.sides.some((s) => s.label);
@@ -102,6 +166,7 @@ function planBracket(layout, o, v, size, vertical, ctx) {
     let others = [];
     let ow = 0;
     let extraH0 = 0;
+    let labelRoom = showLabels ? 24 : 6;
     if (!vertical) {
         const availW = W0 - 2 * pad;
         const g = 0.2;
@@ -112,13 +177,16 @@ function planBracket(layout, o, v, size, vertical, ctx) {
         D = clamp(d, 40, 220);
         gapT = D * g;
         centreT = Math.max(centreMin, D * 1.2);
-        const top = pad + titleH + (hasGroups ? 28 : 0) + (showLabels ? 24 : 6);
+        // The names of the rounds head their columns: a name that cannot be one line in its column is set on two, which needs a taller strip over the boxes.
+        if (showLabels && layout.columns.some((c) => !nameFits(v, road, roundLabel(layout, c, o.roundNames, v), D + gapT * 0.8)))
+            labelRoom = 34;
+        const top = pad + titleH + (hasGroups ? 28 : 0) + labelRoom;
         others = othersOf(layout);
         ow = clamp(D * 1.1, 120, 200);
         extraH0 = othersHeight(others.length, W0, pad, ow, OTHER_H) + thirdBlock;
         const bodyH = size.height === null ? rows * 60 : size.height - top - pad - extraH0;
         rowStep = bodyH / rows;
-        S = clamp(rowStep - 9, 24, 104);
+        S = clamp(rowStep - (road ? 7 : 9), 24, road ? 132 : 104);
         rowStep = Math.max(rowStep, S + 6);
         rowStep = Math.min(rowStep, S + 40);
         boxW = D;
@@ -127,38 +195,102 @@ function planBracket(layout, o, v, size, vertical, ctx) {
     else {
         const availW = W0 - 2 * pad;
         const slot = availW / Math.max(rows, 1);
-        S = clamp(slot - 5, 30, 150);
+        S = clamp(slot - 5, 30, road ? 340 : 150);
         rowStep = Math.min(slot, S + 5);
         boxW = S;
     }
     // Full boxes (names) only where the longest name fits beside its mark and a score.
-    const longest = Math.max(0, ...layout.teams.map((t) => textWidth(t.name, 13)));
+    const wide = boldWidth;
+    const longest = Math.max(0, ...layout.teams.map((t) => wide(t.name, 13)));
+    const longestAbbr = Math.max(0, ...layout.teams.map((t) => wide(abbrOf(t, v), 13)));
+    // Seed tags (the road look with `seeds`): a small pill beside each mark, or above it in a box of marks alone.
+    const tagsOn = road && (o.seeds ?? false) && layout.ties.some((t) => tagOf(t, 0) !== "" || tagOf(t, 1) !== "");
+    const tagW = tagsOn ? Math.max(...layout.ties.flatMap((t) => [tagOf(t, 0), tagOf(t, 1)]).map((x) => boldWidth(x, 8))) + 8 : 0;
+    // The road look's marks and scores are large: they are scaled down together until a row fits its box, before a name is dropped for its abbreviation.
+    const anyNotes = layout.ties.some((t) => noteParts(t, v).length > 0);
+    // The road look's boxes of marks alone carry each score under its mark, unless marks alone were asked for.
+    const markScores = road && o.detail !== "mark" && (o.scores ?? true) && layout.ties.some((t) => t.result.score !== null);
+    const fitOf = (w, h, named) => {
+        const rowH = (h - (anyNotes && h >= 62 ? 15 : 0)) / 2;
+        const { font, md, score } = metrics(rowH, road);
+        const anyBye = layout.sides.some((sd) => sd.boxes.some((b) => b.byes.length > 0));
+        const anyPens = layout.ties.some((t) => t.result.pens !== null);
+        const extra = (anyBye ? wide(v.words.bye, Math.max(font - 2, 8)) + 8 : 0) + (anyPens ? wide("(00)", Math.max(score * 0.55, 8)) + 5 : 0);
+        const fixed = clamp(rowH * 0.16, 5, 12) + clamp(rowH * 0.18, 5, 10) + 8 + 10 + (tagW > 0 ? tagW + 3 : 0);
+        const varying = md + (named === "full" ? longest : longestAbbr) * (font / 13) + wide("00", score) + extra;
+        return Math.min(1, (w - fixed) / varying);
+    };
+    let fitNow = 1;
     const pick = (w, h) => {
         const rowH = h / 2;
-        const font = clamp(rowH * 0.5, 8.5, 16);
-        const md = clamp(rowH * 0.7, 10, 28);
+        const { font, md, score } = metrics(rowH, false);
         // Room for the score, and for the words some boxes carry beside it: a bye, a shoot-out's score.
         const anyBye = layout.sides.some((sd) => sd.boxes.some((b) => b.byes.length > 0));
         const anyPens = layout.ties.some((t) => t.result.pens !== null);
-        const extra = (anyBye ? textWidth(v.words.bye, Math.max(font - 2, 8)) + 8 : 0) + (anyPens ? textWidth("(00)", Math.max(font - 2, 8)) + 3 : 0);
-        const needed = 6 + md + 5 + longest * (font / 13) + 8 + textWidth("00", font + 1) + extra + 14;
+        const extra = (anyBye ? boldWidth(v.words.bye, Math.max(font - 2, 8)) + 8 : 0) + (anyPens ? boldWidth("(00)", Math.max(font - 2, 8)) + 3 : 0);
+        const needed = 6 + md + 5 + longest * (font / 13) + 8 + boldWidth("00", score) + extra + 14;
         const named = o.detail && o.detail !== "auto" ? o.detail : w >= needed && h >= 36 ? "full" : w >= 76 && h >= 28 ? "compact" : "mark";
         return named === "mark" && o.markShape === "none" ? "compact" : named;
     };
-    const detail = pick(boxW, vertical ? 48 : boxH);
-    if (vertical)
-        boxH = detail === "full" ? 50 : detail === "compact" ? 42 : boxW >= 76 ? 38 : 2 * Math.min(boxW - 8, 24) + 8;
+    // The road look: a box is as high as its width lets the large marks and scores be. A name is kept (full) only where that leaves rows of 28 or more;
+    // else the abbreviation (compact) where rows of 18 or more fit; else only the marks.
+    const codesOn = road && (o.codes ?? false);
+    const markCols = road && (markScores || tagsOn || codesOn || o.vs === true);
+    const anyPensAll = layout.ties.some((t) => t.result.pens !== null);
+    const roadPick = (w, hMax, grow = false) => {
+        const search = (named, hMin) => {
+            let h = hMax;
+            while (h > hMin && fitOf(w, h, named) < 0.94)
+                h -= 2;
+            h = Math.max(h, Math.min(hMin, hMax));
+            return { detail: named, h, ok: fitOf(w, h, named) >= 0.94 };
+        };
+        const forced = o.detail && o.detail !== "auto" ? o.detail : null;
+        let chosen = null;
+        if (forced === "full" || forced === "compact")
+            chosen = search(forced, forced === "full" ? 56 : 36);
+        else if (forced === null) {
+            const full = search("full", 56);
+            const compact = search("compact", 36);
+            chosen = full.ok ? full : compact.ok ? compact : o.markShape === "none" ? compact : null;
+        }
+        // A box of marks alone is as high as its marks, tags, codes and scores need; on a tall page it may be higher than the usual box, in a row it may not.
+        const m = Math.min((w - 12) / 2 - 3, 56);
+        const sf = clamp(m * 0.5, 9, 24);
+        const need = 10 + m + 3 + (markScores ? sf * 1.15 + (anyPensAll && m < 40 ? sf * 0.7 : 0) : 0) + (codesOn ? clamp(m * 0.24, 7, 11) * 1.25 : 0) + (tagsOn ? 12 : 0);
+        chosen ??= { detail: o.markShape === "none" ? "compact" : "mark", h: markCols ? Math.min(grow ? Math.max(hMax, need) : hMax, need) : Math.min(hMax, 2 * Math.min(w - 8, 60) + 8) };
+        if (chosen.detail !== "mark")
+            fitNow = Math.min(1, fitOf(w, chosen.h, chosen.detail));
+        return chosen;
+    };
+    let detail;
+    if (road) {
+        const picked = roadPick(boxW, vertical ? clamp(boxW * 0.42, 48, 124) : boxH, vertical);
+        detail = picked.detail;
+        if (vertical)
+            boxH = picked.h;
+        else {
+            S = picked.h;
+            boxH = S;
+        }
+    }
+    else {
+        detail = pick(boxW, vertical ? 48 : boxH);
+        if (vertical)
+            boxH = detail === "full" ? 50 : detail === "compact" ? 42 : boxW >= 76 ? 38 : 2 * Math.min(boxW - 8, 24) + 8;
+    }
+    // The names of the rounds stand on their own strip between the rounds, under the lines that join them: 6 for the bus, 20 for the pill, and room round both.
     if (vertical) {
         D = boxH;
-        gapT = showLabels ? 26 : 16;
+        gapT = showLabels ? 32 : 16;
     }
     // The champion's block: a trophy, a large mark, the name and the word; and the third-place match below the final.
-    const champMark = vertical ? 54 : clamp(centreT * 0.34, 44, 84);
+    const champMark = vertical ? (road ? clamp(size.width * 0.14, 54, 96) : 54) : clamp(centreT * (road ? 0.4 : 0.34), 44, road ? 96 : 84);
     const trophyH = hasTrophy ? (vertical ? 56 : clamp(centreT * 0.45, 48, 84)) : 0;
     const nameFont = clamp(champMark * 0.3, 13, 20);
     const champH = champ ? trophyH + (hasTrophy ? 6 : 0) + champMark + 8 + nameFont + 6 + 11 + 2 : 0;
     const finalW = halves ? (vertical ? Math.min(size.width - 2 * pad, Math.max(boxW, 160)) : Math.min(centreT - 12, Math.max(D * 1.1, 120))) : D;
-    const finalH = vertical ? (detail === "mark" ? Math.max(boxH, 52) : boxH) : boxH;
+    let finalH = vertical ? (detail === "mark" ? Math.max(boxH, 52) : boxH) : boxH;
     const thirdH = withThird && !bottomThird ? 18 + boxH + 14 : 0;
     // ----- the slot positions along t
     if (!vertical) {
@@ -171,7 +303,7 @@ function planBracket(layout, o, v, size, vertical, ctx) {
         sizes.forEach((sz) => { starts.push(t); t += sz + gapT; });
         const width = Math.max(W0, total + 2 * pad);
         // ----- span positions
-        const top = pad + titleH + (hasGroups ? 28 : 0) + (showLabels ? 24 : 6);
+        const top = pad + titleH + (hasGroups ? 28 : 0) + labelRoom;
         const treeH = rows * rowStep;
         // The final sits at the middle of the rows; the champion above it and the third place below need room.
         const upNeed = (champ ? champH + 8 : 0) + 22 + finalH / 2;
@@ -201,14 +333,14 @@ function planBracket(layout, o, v, size, vertical, ctx) {
             rects.set(layout.final.i, rect);
             boxes.push({ rect, tie: layout.ties[layout.final.i], order: layout.final.order, bye: null, byes: [], final: true, champion: champ });
             if (showLabels)
-                texts.push(label(v, roundLabel(layout, layout.rounds, o.roundNames, v), midX, rect.y - 7, "middle"));
+                texts.push(label(v, road, roundLabel(layout, layout.rounds, o.roundNames, v), midX, rect.y - 7, "middle"));
             if (champ)
                 extras.push(...championBlock(layout.champion, midX, rect.y - 22 - champH, champMark, trophyH, nameFont, o, v, ctx, poster));
             if (withThird) {
                 const t3 = layout.ties[layout.third];
                 const r3 = { x: midX - finalW / 2, y: rect.y + rect.h + 14 + 18, w: finalW, h: boxH };
                 rects.set(layout.third, r3);
-                texts.push(label(v, v.words.thirdPlace, midX, r3.y - 6, "middle"));
+                texts.push(label(v, road, v.words.thirdPlace, midX, r3.y - 6, "middle"));
                 boxes.push({ rect: r3, tie: t3, order: [0, 1], bye: null, byes: [], final: false, champion: false });
             }
         }
@@ -229,7 +361,7 @@ function planBracket(layout, o, v, size, vertical, ctx) {
                 const ks = halves ? [slotOfColumn("l", ci), slotOfColumn("r", ci)] : [ci];
                 const used = layout.sides.length > 1 || !halves ? (halves ? [0, 1] : [0]) : [0];
                 ks.forEach((k, n) => { if (used.includes(n) && (!halves || n < layout.sides.length))
-                    texts.push(label(v, name, starts[k] + D / 2, top - 9, "middle", D + gapT * 0.8)); });
+                    texts.push(label(v, road, name, starts[k] + D / 2, top - 9, "middle", D + gapT * 0.8)); });
             }
         }
         if (hasGroups) {
@@ -238,7 +370,7 @@ function planBracket(layout, o, v, size, vertical, ctx) {
                     return;
                 const ks = layout.columns.map((_, ci) => slotOfColumn(sd.key, ci));
                 const x0 = Math.min(...ks.map((k) => starts[k])), x1 = Math.max(...ks.map((k) => starts[k] + D));
-                texts.push(`<text class="tb-half" x="${num((x0 + x1) / 2)}" y="${num(top - (showLabels ? 36 : 14))}" font-size="${poster ? 16 : 15}" font-weight="700" letter-spacing=".1em" text-anchor="middle">${esc(poster ? v.upper(sd.label) : sd.label)}</text>`);
+                texts.push(`<text class="tb-half" x="${num((x0 + x1) / 2)}" y="${num(top - (showLabels ? labelRoom + 12 : 14))}" font-size="${poster ? 16 : 15}" font-weight="700" letter-spacing=".1em" text-anchor="middle">${esc(poster ? v.upper(sd.label) : sd.label)}</text>`);
             });
         }
         // lines
@@ -253,26 +385,49 @@ function planBracket(layout, o, v, size, vertical, ctx) {
             const x0 = goingRight ? a.x + a.w : a.x, x1 = goingRight ? b.x : b.x + b.w;
             const y0 = a.y + a.h / 2, y1 = b.y + b.h / 2;
             const xm = (x0 + x1) / 2;
-            links.push(`<path class="tb-line" d="M${num(x0)} ${num(y0)}H${num(xm)}V${num(y1)}H${num(x1)}"${lineAttrs(o)}/>`);
+            addLine([x0, y0], [xm, y0], [xm, y1], [x1, y1]);
+            links.push(`<path class="${lineClass(path, t.index, p)}" d="M${num(x0)} ${num(y0)}H${num(xm)}V${num(y1)}H${num(x1)}"${lineAttrs(o)}/>`);
         }
         if (bottomThird)
-            thirdAtFoot(layout, height - pad - extraH0 + 6, width / 2, ow, OTHER_H, v, boxes, texts);
-        othersBlock(layout, others, height - pad - extraH0 + thirdBlock + 6, width, pad, ow, OTHER_H, v, boxes, texts);
+            thirdAtFoot(layout, height - pad - extraH0 + 6, width / 2, ow, OTHER_H, v, road, boxes, texts);
+        othersBlock(layout, others, height - pad - extraH0 + thirdBlock + 6, width, pad, ow, OTHER_H, v, road, boxes, texts);
         texts.push(...headings(v, o, width, pad, poster));
-        return { width, height, boxes, links, texts, extras, detail, vertical };
+        return finish({ width, height, boxes, links: orderLinks(links), texts, extras, detail, vertical, road, path, fit: fitNow, notes: anyNotes, markScores, markCols, tags: tagsOn, codes: codesOn });
     }
     // ----- vertical: the rounds are rows. The left half is the top; the final is a band in the middle.
-    const bandT = D + gapT;
     const groupBand = hasGroups ? 26 : 0;
     // On a tall page the champion sits at the top, as the page's first thing; the lines into the final must not run through it.
     const champTop = halves && champ ? champH + 14 : 0;
-    const centreBand = (showLabels ? 32 : 0) + 6 + finalH + 14;
     const topT = pad + titleH + champTop + groupBand + (showLabels ? 14 : 0);
     const bandsPerSide = nc;
-    const totalT = halves ? topT + bandsPerSide * bandT + centreBand + bandsPerSide * bandT + groupBand + pad : topT + (nc + (champ ? 1 : 0)) * bandT + (champ ? champH : 0) + pad;
+    const bandCount = halves ? 2 * bandsPerSide : nc + (champ ? 1 : 0);
     others = othersOf(layout);
     ow = Math.min(W0 - 2 * pad, 150);
-    const extraV = othersHeight(others.length, W0, pad, ow, OTHER_H) + thirdBlock;
+    const othersV = othersHeight(others.length, W0, pad, ow, OTHER_H);
+    // The height the page needs for boxes `h` high with `gap` between the rounds, and what it keeps for the final's band and the third-place match.
+    const needOf = (h, gap) => {
+        const finalHere = detail === "mark" ? Math.max(h, 52) : h;
+        const centre = (showLabels ? 32 : 0) + 6 + finalHere + 14;
+        const thirdV = bottomThird ? 18 + (road ? h : 52) + 16 : 0;
+        const band = h + gap;
+        return (halves ? topT + bandsPerSide * band + centre + bandsPerSide * band + groupBand + pad : topT + (nc + (champ ? 1 : 0)) * band + (champ ? champH : 0) + pad) + othersV + thirdV;
+    };
+    // The road look fits a tall page: the boxes are made lower until the rounds fit, or, with room to spare, the room left over is shared between the rounds.
+    if (road && size.height !== null) {
+        while (boxH > 40 && needOf(boxH, gapT) > size.height)
+            boxH -= 2;
+        const slack = size.height - needOf(boxH, gapT);
+        if (slack > 0 && bandCount > 0)
+            gapT += Math.min(slack / bandCount, boxH * 0.5);
+        D = boxH;
+        finalH = detail === "mark" ? Math.max(boxH, 52) : boxH;
+    }
+    const centreBand = (showLabels ? 32 : 0) + 6 + finalH + 14;
+    const thirdH2 = road ? boxH : 52;
+    const thirdBlockV = bottomThird ? 18 + thirdH2 + 16 : 0;
+    const bandT = D + gapT;
+    const totalT = needOf(boxH, gapT) - othersV - thirdBlockV;
+    const extraV = othersV + thirdBlockV;
     const height = Math.max(size.height ?? 0, totalT + extraV);
     const treeW = rows * rowStep;
     const x0 = pad + (W0 - 2 * pad - treeW) / 2;
@@ -300,7 +455,8 @@ function planBracket(layout, o, v, size, vertical, ctx) {
         if (champ)
             extras.push(...championBlock(layout.champion, midX, pad + titleH + 4, champMark, trophyH, nameFont, o, v, ctx, poster));
         if (showLabels) {
-            texts.push(label(v, roundLabel(layout, layout.rounds, o.roundNames, v), midX, y + 12, "middle"));
+            const at = y + 12;
+            texts.push(() => label(v, road, roundLabel(layout, layout.rounds, o.roundNames, v), midX, at, "middle", 1e9, clear(pad - 4, W0 - pad + 4)));
             y += 16;
         }
         const rect = { x: midX - finalW / 2, y: y + 6, w: finalW, h: finalH };
@@ -315,8 +471,24 @@ function planBracket(layout, o, v, size, vertical, ctx) {
         layout.columns.forEach((c, ci) => {
             const name = roundLabel(layout, c, o.roundNames, v);
             const sides = halves ? (layout.sides.length > 1 ? ["l", "r"] : ["l"]) : ["l"];
-            for (const sd of sides)
-                texts.push(`<text class="tb-round tb-halo" x="${num(pad)}" y="${num(bandStart(sd, ci) - 8)}" font-size="11" font-weight="600" letter-spacing=".08em">${esc(v.upper(name))}</text>`);
+            for (const sd of sides) {
+                const at = bandStart(sd, ci) - 8;
+                texts.push(() => {
+                    if (road)
+                        return label(v, road, name, pad, at, "start", 1e9, clear(pad - 4, W0 - pad + 4));
+                    const shown = v.upper(name);
+                    let size = 11, left = pad - 4;
+                    for (const s of [11, 9.5, 8.5]) {
+                        size = s;
+                        const found = freeX(segs, at - 16, at + 7, boldWidth(shown, s) * 1.06 + 8, pad - 4, pad - 4, W0 - pad + 4);
+                        if (found !== null) {
+                            left = found;
+                            break;
+                        }
+                    }
+                    return `<text class="tb-round tb-halo" x="${num(left + 4)}" y="${num(at)}" font-size="${size}" font-weight="600" letter-spacing=".08em">${esc(shown)}</text>`;
+                });
+            }
         });
     }
     if (hasGroups) {
@@ -337,22 +509,132 @@ function planBracket(layout, o, v, size, vertical, ctx) {
         const down = b.y > a.y;
         const y0 = down ? a.y + a.h : a.y, y1 = down ? b.y : b.y + b.h;
         const x0c = a.x + a.w / 2, x1c = b.x + b.w / 2;
-        const ym = down ? y0 + gapT * 0.4 : y0 - gapT * 0.4;
-        links.push(`<path class="tb-line" d="M${num(x0c)} ${num(y0)}V${num(ym)}H${num(x1c)}V${num(y1)}"${lineAttrs(o)}/>`);
+        // With the rounds named, the line turns just outside the box it leaves (going down) or just outside the box it enters (going up), so that the strip in front of the later round is free for its name.
+        const ym = showLabels ? (down ? y0 + 6 : y1 + 6) : down ? y0 + gapT * 0.4 : y0 - gapT * 0.4;
+        addLine([x0c, y0], [x0c, ym], [x1c, ym], [x1c, y1]);
+        links.push(`<path class="${lineClass(path, t.index, p)}" d="M${num(x0c)} ${num(y0)}V${num(ym)}H${num(x1c)}V${num(y1)}"${lineAttrs(o)}/>`);
     }
     if (bottomThird)
-        thirdAtFoot(layout, totalT - pad + 6, W0 / 2, Math.min(W0 - 2 * pad, 200), 52, v, boxes, texts);
-    othersBlock(layout, others, totalT - pad + thirdBlock + 6, W0, pad, ow, OTHER_H, v, boxes, texts);
+        thirdAtFoot(layout, totalT - pad + 6, W0 / 2, Math.min(W0 - 2 * pad, road ? Math.max(boxW, 200) : 200), thirdH2, v, road, boxes, texts);
+    othersBlock(layout, others, totalT - pad + thirdBlockV + 6, W0, pad, ow, OTHER_H, v, road, boxes, texts);
     texts.push(...headings(v, o, W0, pad, poster));
-    return { width: W0, height, boxes, links, texts, extras, detail, vertical };
+    return finish({ width: W0, height, boxes, links: orderLinks(links), texts, extras, detail, vertical, road, path, fit: fitNow, notes: anyNotes, markScores, markCols, tags: tagsOn, codes: codesOn });
+}
+/** A line's class: `tb-path` when both ties it joins are on the highlighted team's path. */
+function lineClass(path, from, to) {
+    return path.has(from) && path.has(to) ? "tb-line tb-path" : "tb-line";
+}
+/** The lines of the highlighted path are drawn last, over the others. */
+function orderLinks(links) {
+    return [...links.filter((l) => !l.includes("tb-path")), ...links.filter((l) => l.includes("tb-path"))];
 }
 const OTHER_H = 50;
 const centreMinLtr = (d) => d * 1.1;
 function lineAttrs(o) {
     return o.theme === "none" ? ' fill="none" stroke="currentColor" stroke-opacity=".5"' : "";
 }
-function label(v, text, x, y, anchor, maxWidth = 1e9) {
-    return `<text class="tb-round" x="${num(x)}" y="${num(y)}" font-size="11" font-weight="600" letter-spacing=".08em" text-anchor="${anchor}">${esc(fit(v.upper(text), 11 * 1.18, maxWidth))}</text>`;
+/** The two lines a name is best broken into at a space (the widest line as narrow as it can be), or `null` for a name of one word. */
+function twoLines(text, size, measure) {
+    const words = text.split(" ");
+    let best = null;
+    for (let i = 1; i < words.length; i += 1) {
+        const pair = [words.slice(0, i).join(" "), words.slice(i).join(" ")];
+        if (best === null || Math.max(measure(pair[0], size), measure(pair[1], size)) < Math.max(measure(best[0], size), measure(best[1], size)))
+            best = pair;
+    }
+    return best;
+}
+/** The bold, letter-spaced width of a round's name (as a pill or a heading sets it). */
+const nameWidth = (t, size) => boldWidth(t, size) * 1.06;
+/**
+ * How a round's name is set within `maxWidth` (the column it heads): on one line at 11, smaller down to 9 (the pill's own room is 9 either side, or 4 where that is all there is), or, where it still does not
+ * fit, on two lines at 9, 8.5 and 8: a name is never cut while a smaller or a second line will hold it. The road look's pill and the classic look's heading take the same rule.
+ */
+function nameFits(v, road, text, maxWidth) {
+    const upper = v.upper(text);
+    return nameWidth(upper, 9) + (road ? 8 : 0) <= maxWidth;
+}
+function label(v, road, text, x, y, anchor, maxWidth = 1e9, place) {
+    const upper = v.upper(text);
+    if (!road) {
+        // A column's heading: 11 down to 9.5 on one line, then two lines at 9.5, 9 and 8.5; the last resort cuts it.
+        if (maxWidth < 1e9 && nameWidth(upper, 11) > maxWidth) {
+            let size = 11;
+            while (size > 9.5 && nameWidth(upper, size) > maxWidth)
+                size -= 0.5;
+            if (nameWidth(upper, size) <= maxWidth)
+                return `<text class="tb-round" x="${num(x)}" y="${num(y)}" font-size="${size}" font-weight="600" letter-spacing=".08em" text-anchor="${anchor}">${esc(upper)}</text>`;
+            for (const s of [9.5, 9, 8.5]) {
+                const pair = twoLines(upper, s, nameWidth);
+                if (pair && Math.max(nameWidth(pair[0], s), nameWidth(pair[1], s)) <= maxWidth)
+                    return pair.map((line, i) => `<text class="tb-round" x="${num(x)}" y="${num(y - (1 - i) * 10)}" font-size="${s}" font-weight="600" letter-spacing=".08em" text-anchor="${anchor}">${esc(line)}</text>`).join("");
+            }
+            return `<text class="tb-round" x="${num(x)}" y="${num(y)}" font-size="8.5" font-weight="600" letter-spacing=".08em" text-anchor="${anchor}">${esc(fit(upper, 8.5, maxWidth, nameWidth))}</text>`;
+        }
+        const shown = upper;
+        const plain = `<text class="tb-round" x="${num(x)}" y="${num(y)}" font-size="11" font-weight="600" letter-spacing=".08em" text-anchor="${anchor}">${esc(shown)}</text>`;
+        if (!place)
+            return plain;
+        // The name is kept clear of the connector lines: where it cannot stand where it was put, it moves along its row.
+        for (const size of [11, 9.5, 8.5]) {
+            const w = nameWidth(shown, size) + 8;
+            const pref = anchor === "middle" ? x - w / 2 : x - 4;
+            const left = place(w, pref, y);
+            if (left === null)
+                continue;
+            return left === pref && size === 11 ? plain : `<text class="tb-round" x="${num(left + 4)}" y="${num(y)}" font-size="${size}" font-weight="600" letter-spacing=".08em" text-anchor="start">${esc(shown)}</text>`;
+        }
+        return plain;
+    }
+    // The road look names a round on a pill. Down to 9 on one line (with 9 either side), then a snugger pill (4 either side), then two lines at 9, 8.5 and 8.
+    let s = 11;
+    while (s > 9 && nameWidth(upper, s) > maxWidth - 18)
+        s -= 0.5;
+    let rows = [upper];
+    let side = 9;
+    if (nameWidth(upper, s) > maxWidth - 18) {
+        if (nameWidth(upper, s) <= maxWidth - 8)
+            side = 4;
+        else {
+            rows = [fit(upper, s, maxWidth - 12, nameWidth)];
+            for (const size of [9, 8.5, 8]) {
+                const pair = twoLines(upper, size, nameWidth);
+                if (pair && Math.max(nameWidth(pair[0], size), nameWidth(pair[1], size)) <= maxWidth - 12) {
+                    rows = pair;
+                    s = size;
+                    side = 6;
+                    break;
+                }
+                if (pair && size === 8) {
+                    rows = pair.map((line) => fit(line, 8, maxWidth - 12, nameWidth));
+                    s = 8;
+                    side = 6;
+                }
+            }
+        }
+    }
+    const widest = Math.max(...rows.map((r) => nameWidth(r, s)));
+    let w = widest + 2 * side;
+    let x0 = anchor === "middle" ? x - w / 2 : x;
+    let fs = s;
+    if (place && rows.length === 1) {
+        // Where the lines leave no room, the name is set smaller (to 8) and the pill made snugger (side 6, then 4).
+        search: for (const size of s > 8 ? [s, 8.5, 8].filter((z) => z <= s) : [s]) {
+            for (const sd of [9, 6, 4]) {
+                w = nameWidth(rows[0], size) + 2 * sd;
+                const pref = anchor === "middle" ? x - w / 2 : x;
+                const found = place(w, pref, y);
+                x0 = found ?? pref;
+                fs = size;
+                if (found !== null)
+                    break search;
+            }
+        }
+    }
+    const put = (line, by) => `<text class="tb-lab" x="${num(x0 + w / 2)}" y="${num(by)}" font-size="${num(fs)}" font-weight="700" letter-spacing=".08em" text-anchor="middle">${esc(line)}</text>`;
+    if (rows.length === 2)
+        return `<rect class="tb-panel" x="${num(x0)}" y="${num(y - 23.5)}" width="${num(w)}" height="29" rx="12"/>${put(rows[0], y - 12)}${put(rows[1], y - 1.5)}`;
+    return `<rect class="tb-panel" x="${num(x0)}" y="${num(y - 14.5)}" width="${num(w)}" height="20" rx="10"/>${put(rows[0], y)}`;
 }
 function headings(v, o, width, pad, poster) {
     const out = [];
@@ -401,96 +683,200 @@ function othersHeight(count, width, pad, ow, oh) {
     const cols = Math.max(1, Math.floor((width - 2 * pad + 10) / (ow + 10)));
     return 26 + Math.ceil(count / cols) * (oh + 10) + 6;
 }
-function othersBlock(layout, list, y0, width, pad, ow, oh, v, boxes, texts) {
+function othersBlock(layout, list, y0, width, pad, ow, oh, v, road, boxes, texts) {
     if (!list.length)
         return;
     const cols = Math.max(1, Math.floor((width - 2 * pad + 10) / (ow + 10)));
     const x0 = pad + (width - 2 * pad - (Math.min(cols, list.length) * (ow + 10) - 10)) / 2;
-    texts.push(label(v, v.words.other, width / 2, y0 + 12, "middle"));
+    texts.push(label(v, road, v.words.other, width / 2, y0 + 12, "middle"));
     list.forEach((i, n) => {
         const rect = { x: x0 + (n % cols) * (ow + 10), y: y0 + 24 + Math.floor(n / cols) * (oh + 10), w: ow, h: oh };
         boxes.push({ rect, tie: layout.ties[i], order: [0, 1], bye: null, byes: [], final: false, champion: false });
     });
 }
 /** The third-place match with its label, centred on `cx`, its label at `y0`. */
-function thirdAtFoot(layout, y0, cx, w, h, v, boxes, texts) {
-    texts.push(label(v, v.words.thirdPlace, cx, y0 + 12, "middle"));
+function thirdAtFoot(layout, y0, cx, w, h, v, road, boxes, texts) {
+    texts.push(label(v, road, v.words.thirdPlace, cx, y0 + 12, "middle"));
     boxes.push({ rect: { x: cx - w / 2, y: y0 + 18, w, h }, tie: layout.ties[layout.third], order: [0, 1], bye: null, byes: [], final: false, champion: false });
 }
-// ---------------------------------------------------------------------------------------------- one box
-function drawBox(p, plan, o, v, ctx) {
+/** The address `href` gives for a tie (or for one side of it), when it is one a drawing may link to; `null` otherwise. */
+function hrefOf(o, tie, side) {
+    if (typeof o.href !== "function")
+        return null;
+    const url = side === undefined ? o.href(tie) : o.href(tie, side);
+    return typeof url === "string" && safeHref(url) ? url.trim() : null;
+}
+function drawBox(p, plan, o, v, ctx, linked) {
     const { rect, tie } = p;
     const { x, y, w, h } = rect;
     const detail = plan.detail;
+    const road = plan.road;
     const scoresOn = o.scores ?? true;
     const seedsOn = o.seeds ?? false;
     const highlight = o.winnerHighlight ?? true;
+    const description = describeTie(tie, v);
+    // A link on the whole box wins; with none, each side that has an address is a link on its own row.
+    const boxHref = hrefOf(o, tie);
+    const sideHref = (k) => (boxHref !== null || tie.sides[k] === null ? null : hrefOf(o, tie, k));
+    const anchor = (url, name, inner) => {
+        linked.count++;
+        return `<a class="tb-link" href="${esc(url)}" aria-label="${esc(name)}">${inner}</a>`;
+    };
     const parts = [];
-    parts.push(`<rect class="tb-box" x="${num(x)}" y="${num(y)}" width="${num(w)}" height="${num(h)}" rx="${num(Math.min(7, h / 4))}"${o.theme === "none" ? ' fill="none" stroke="currentColor" stroke-opacity=".4"' : ""}/>`);
+    parts.push(`<rect class="tb-box" x="${num(x)}" y="${num(y)}" width="${num(w)}" height="${num(h)}" rx="${num(road ? Math.min(14, h / 3.2) : Math.min(7, h / 4))}"${boxHref !== null ? ' pointer-events="all"' : ""}${o.theme === "none" ? ' fill="none" stroke="currentColor" stroke-opacity=".4"' : ""}/>`);
     const r = tie.result;
     const notes = noteParts(tie, v);
-    const noteH = detail !== "mark" && h >= 50 && notes.length ? 13 : 0;
+    // In the road look every box keeps the strip for the note when any tie has one, so that all the rows are the same size.
+    const noteH = detail !== "mark" && h >= (road ? 62 : 50) && (road ? plan.notes : notes.length > 0) ? (road ? 15 : 13) : 0;
     const rowH = (h - noteH) / 2;
     const rowsOrder = p.order;
     const cls = (k) => (highlight && tie.winner !== null ? (tie.winner === k ? "tb-won" : "tb-lost") : "tb-pending");
-    if (detail === "mark") {
-        const stack = Math.min((h - 8) / 2, w - 8, 44);
-        const side = Math.min(h - 8, (w - 12) / 2, 44);
+    const row = (k, inner, rx, ry, rw, rh) => {
+        const url = sideHref(k);
+        const team = tie.sides[k];
+        if (url === null || team === null)
+            return inner;
+        return anchor(url, `${team.name}: ${description}`, `<rect class="tb-hit" x="${num(rx)}" y="${num(ry)}" width="${num(rw)}" height="${num(rh)}" fill="transparent"/>${inner}`);
+    };
+    if (detail === "mark" && plan.markCols) {
+        // Two columns, each a stack: the seed tag, the mark, its three letters, the score. The marks are as large as the box lets the whole stack be, and every part is inside the box.
+        const padX = 6, padY = 5;
+        const colW = (w - 2 * padX) / 2;
+        const withScore = plan.markScores && scoresOn && r.score !== null;
+        const tags = [0, 1].map((k) => (plan.tags ? tagOf(tie, k) : ""));
+        const tagH = tags.some((t) => t !== "") ? 12 : 0;
+        const scoreOf = (k) => (withScore && r.score ? v.number(r.score[k]) : "");
+        const pensOf = (k) => (withScore && r.pens ? `(${v.number(r.pens[k])})` : "");
+        const hasPens = withScore && r.pens !== null;
+        const lay = (m) => {
+            const cf = clamp(m * 0.24, 7, 11);
+            let sf = clamp(m * 0.5, 9, 24);
+            const pf = (size) => Math.max(size * 0.55, 8);
+            // The score and the shoot-out's score share a line where they fit the column; else the shoot-out goes under the score.
+            const need = (size) => Math.max(...[0, 1].map((k) => boldWidth(scoreOf(k), size) + (pensOf(k) ? boldWidth(pensOf(k), pf(size)) + 3 : 0)));
+            if (withScore)
+                while (sf > 10 && need(sf) > colW - 2)
+                    sf -= 0.5;
+            const inline = !withScore || need(sf) <= colW - 2;
+            const height = tagH + m + (plan.codes ? 3 + cf * 1.25 : 0) + (withScore ? 3 + sf * 1.15 + (hasPens && !inline ? pf(sf) * 1.15 : 0) : 0);
+            return { cf, sf, pf: pf(sf), inline, height };
+        };
+        let m = Math.max(10, Math.min(colW - 3, 56, h - 2 * padY));
+        let L = lay(m);
+        while (m > 10 && L.height > h - 2 * padY) {
+            m -= 0.5;
+            L = lay(m);
+        }
+        const top = y + (h - L.height) / 2;
+        const midY = top + tagH + m / 2;
+        rowsOrder.forEach((k, n) => {
+            const team = tie.sides[k];
+            const cx = x + padX + colW / 2 + n * colW;
+            const inner = [];
+            let yy = top;
+            if (tagH && tags[k]) {
+                const tw = boldWidth(tags[k], 8) + 8;
+                inner.push(`<rect class="tb-tagbox" x="${num(cx - tw / 2)}" y="${num(yy)}" width="${num(tw)}" height="11" rx="5.5"/><text class="tb-tag" x="${num(cx)}" y="${num(yy + 8.2)}" font-size="8" text-anchor="middle">${esc(tags[k])}</text>`);
+            }
+            yy += tagH;
+            inner.push(drawMark(team, cx, yy + m / 2, m, ctx));
+            yy += m;
+            if (plan.codes) {
+                yy += 3;
+                inner.push(`<text class="tb-code" x="${num(cx)}" y="${num(yy + L.cf * 0.75)}" font-size="${num(L.cf)}" text-anchor="middle">${esc(fit(abbrOf(team, v), L.cf, colW - 2, boldWidth))}</text>`);
+                yy += L.cf * 1.25;
+            }
+            if (withScore) {
+                yy += 3;
+                const pens = pensOf(k);
+                const span = pens && L.inline ? `<tspan class="tb-muted" dx="3" font-size="${num(L.pf)}" font-weight="600">${esc(pens)}</tspan>` : "";
+                inner.push(`<text class="tb-score" x="${num(cx)}" y="${num(yy + L.sf * 0.8)}" font-size="${num(L.sf)}" text-anchor="middle" font-variant-numeric="tabular-nums">${esc(scoreOf(k))}${span}</text>`);
+                yy += L.sf * 1.15;
+                if (pens && !L.inline)
+                    inner.push(`<text class="tb-muted" x="${num(cx)}" y="${num(yy + L.pf * 0.8)}" font-size="${num(L.pf)}" font-weight="600" text-anchor="middle">${esc(pens)}</text>`);
+            }
+            parts.push(row(k, `<g class="${cls(k)}">${inner.join("")}</g>`, cx - colW / 2, y, colW, h));
+        });
+        // "vs" between the two marks, where they leave room for it.
+        const vf = clamp(m * 0.26, 7, 11);
+        if (o.vs === true && colW - m >= boldWidth(v.words.roadVs, vf) + 4)
+            parts.push(`<text class="tb-vs" x="${num(x + w / 2)}" y="${num(midY + vf * 0.35)}" font-size="${num(vf)}" text-anchor="middle">${esc(v.words.roadVs)}</text>`);
+    }
+    else if (detail === "mark") {
+        const stack = Math.min((h - 8) / 2, w - 8, road ? 60 : 44);
+        const side = Math.min(h - 8, (w - 12) / 2, road ? 60 : 44);
         const stacked = stack >= side;
         const md2 = Math.max(stacked ? stack : side, 8);
         rowsOrder.forEach((k, n) => {
             const team = tie.sides[k];
             const cx = stacked ? x + w / 2 : x + w / 2 + (n === 0 ? -1 : 1) * (md2 / 2 + 3);
             const cy = stacked ? y + h / 2 + (n === 0 ? -1 : 1) * (md2 / 2 + 1) : y + h / 2;
-            parts.push(`<g class="${cls(k)}">${drawMark(team, cx, cy, md2, ctx)}</g>`);
+            parts.push(row(k, `<g class="${cls(k)}">${drawMark(team, cx, cy, md2, ctx)}</g>`, cx - md2 / 2, cy - md2 / 2, md2, md2));
         });
     }
     else {
-        const font = clamp(rowH * 0.5, 8.5, 16);
-        const md = clamp(rowH * 0.7, 10, 28);
+        const base = metrics(rowH, road);
+        const f = plan.fit;
+        const font = road ? Math.max(base.font * f, 8.5) : base.font, md = road ? base.md * f : base.md, scoreFont = road ? base.score * f : base.score;
+        const padX = road ? clamp(rowH * 0.16, 5, 12) : 6;
+        const gap = road ? clamp(rowH * 0.18, 5, 10) : 5;
+        const small = Math.max(road ? scoreFont * 0.55 : font - 2, 8);
+        const small2 = Math.max(font - 2, 8);
+        const mw = boldWidth;
+        const tf = clamp(font * 0.62, 7, 9.5);
         rowsOrder.forEach((k, n) => {
             const team = tie.sides[k];
             const ry = y + n * rowH;
             const cy = ry + rowH / 2;
             const rowParts = [];
-            let tx = x + 6;
+            let tx = x + padX;
             if (o.markShape !== "none") {
-                rowParts.push(drawMark(team, x + 6 + md / 2, cy, md, ctx));
-                tx = x + 6 + md + 5;
+                rowParts.push(drawMark(team, x + padX + md / 2, cy, md, ctx));
+                tx = x + padX + md + gap;
+            }
+            // The seed tag, a small pill between the mark and the name.
+            const tag = plan.tags ? tagOf(tie, k) : "";
+            if (tag) {
+                const tw = boldWidth(tag, tf) + 8;
+                rowParts.push(`<rect class="tb-tagbox" x="${num(tx)}" y="${num(cy - (tf + 4) / 2)}" width="${num(tw)}" height="${num(tf + 4)}" rx="${num((tf + 4) / 2)}"/><text class="tb-tag" x="${num(tx + tw / 2)}" y="${num(cy + tf * 0.35)}" font-size="${num(tf)}" text-anchor="middle">${esc(tag)}</text>`);
+                tx += tw + 3;
             }
             const score = scoresOn && r.score ? v.number(r.score[k]) : "";
             const pensText = scoresOn && r.pens ? `(${v.number(r.pens[k])})` : "";
             const bye = p.byes.includes(k);
-            const right = x + w - 6;
-            const scoreW = score ? textWidth(score, font + 1) : 0;
-            const pensW = pensText ? textWidth(pensText, font - 2) + 3 : 0;
-            const seed = seedsOn && team?.seed !== undefined ? `${v.number(team.seed)} ` : "";
+            const right = x + w - padX;
+            const scoreW = score ? mw(score, scoreFont) : 0;
+            const pensW = pensText ? mw(pensText, small) + (road ? 4 : 3) : 0;
+            const seed = seedsOn && !road && team?.seed !== undefined ? `${v.number(team.seed)} ` : "";
             const nm = team ? (detail === "full" ? team.name : abbrOf(team, v)) : v.words.tbd;
             // The word for a bye goes beside the score only where the name still fits beside it.
-            const byeFits = bye && right - tx - (scoreW + pensW) - (textWidth(v.words.bye, Math.max(font - 2, 8)) + 6) - 6 >= textWidth(`${seed}${nm}`, font);
+            const byeFits = bye && right - tx - (scoreW + pensW) - (mw(v.words.bye, small2) + 6) - 6 >= mw(`${seed}${nm}`, font);
             const byeText = byeFits ? v.words.bye : "";
-            const byeW = byeText ? textWidth(byeText, Math.max(font - 2, 8)) : 0;
+            const byeW = byeText ? mw(byeText, small2) : 0;
             const avail = right - tx - (scoreW + pensW) - (byeW ? byeW + 6 : 0) - 6;
             // A name that does not fit is set a little smaller before it is cut.
             let nameFont = font;
-            while (nameFont > 9.5 && textWidth(`${seed}${nm}`, nameFont) > avail)
+            while (nameFont > 9.5 && mw(`${seed}${nm}`, nameFont) > avail)
                 nameFont -= 0.5;
-            const text = fit(`${seed}${nm}`, nameFont, Math.max(avail, 8));
+            const text = fit(`${seed}${nm}`, nameFont, Math.max(avail, 8), mw);
             rowParts.push(`<text class="tb-name${team ? "" : " tb-muted"}" x="${num(tx)}" y="${num(cy + nameFont * 0.35)}" font-size="${num(nameFont)}">${esc(text)}</text>`);
             if (score)
-                rowParts.push(`<text class="tb-score" x="${num(right)}" y="${num(cy + (font + 1) * 0.35)}" font-size="${num(font + 1)}" text-anchor="end" font-variant-numeric="tabular-nums">${esc(score)}</text>`);
+                rowParts.push(`<text class="tb-score" x="${num(right)}" y="${num(cy + scoreFont * 0.35)}" font-size="${num(scoreFont)}" text-anchor="end" font-variant-numeric="tabular-nums">${esc(score)}</text>`);
             if (pensText)
-                rowParts.push(`<text class="tb-muted" x="${num(right - scoreW - 3)}" y="${num(cy + (font - 2) * 0.35)}" font-size="${num(Math.max(font - 2, 8))}" text-anchor="end">${esc(pensText)}</text>`);
+                rowParts.push(`<text class="tb-muted" x="${num(right - scoreW - (road ? 4 : 3))}" y="${num(cy + small * 0.35)}" font-size="${num(small)}" text-anchor="end">${esc(pensText)}</text>`);
             if (byeText)
-                rowParts.push(`<text class="tb-muted" x="${num(right - (scoreW + pensW) - (scoreW || pensW ? 6 : 0))}" y="${num(cy + (font - 2) * 0.35)}" font-size="${num(Math.max(font - 2, 8))}" font-style="italic" text-anchor="end">${esc(byeText)}</text>`);
-            parts.push(`<g class="${cls(k)}">${rowParts.join("")}</g>`);
+                rowParts.push(`<text class="tb-muted" x="${num(right - (scoreW + pensW) - (scoreW || pensW ? 6 : 0))}" y="${num(cy + small2 * 0.35)}" font-size="${num(small2)}" font-style="italic" text-anchor="end">${esc(byeText)}</text>`);
+            parts.push(row(k, `<g class="${cls(k)}">${rowParts.join("")}</g>`, x, ry, w, rowH));
         });
-        parts.push(`<line class="tb-line" x1="${num(x + 4)}" x2="${num(x + w - 4)}" y1="${num(y + rowH)}" y2="${num(y + rowH)}" stroke-opacity=".35"${o.theme === "none" ? ' stroke="currentColor"' : ""}/>`);
+        parts.push(`<line class="${road ? "tb-sep" : "tb-line"}" x1="${num(x + 4)}" x2="${num(x + w - 4)}" y1="${num(y + rowH)}" y2="${num(y + rowH)}" stroke-opacity=".35"${o.theme === "none" ? ' stroke="currentColor"' : ""}/>`);
         if (noteH) {
-            const f = 9.5;
-            parts.push(`<text class="tb-muted" x="${num(x + w / 2)}" y="${num(y + h - 4)}" font-size="${f}" text-anchor="middle">${esc(fit(notes.join(" · "), f, w - 8))}</text>`);
+            const f = road ? 9 : 9.5;
+            const line = road ? v.upper(notes.join(" · ")) : notes.join(" · ");
+            parts.push(`<text class="tb-muted${road ? " tb-note" : ""}" x="${num(x + w / 2)}" y="${num(y + h - (road ? 5 : 4))}" font-size="${f}"${road ? ' font-weight="700" letter-spacing=".05em"' : ""} text-anchor="middle">${esc(fit(line, f * (road ? 1.1 : 1), w - 8))}</text>`);
         }
     }
-    const cls2 = `tb-tie${p.final ? " tb-final" : ""}${p.champion ? " tb-has-champ" : ""}`;
-    return `<g class="${cls2}"><title>${esc(describeTie(tie, v))}</title>${parts.join("")}</g>`;
+    const extra = tieClassOf(o, tie);
+    const cls2 = `tb-tie${p.final ? " tb-final" : ""}${p.champion ? " tb-has-champ" : ""}${plan.path.has(tie.index) ? " tb-on-path" : ""}${extra}`;
+    const body = boxHref !== null ? anchor(boxHref, description, parts.join("")) : parts.join("");
+    return `<g class="${cls2}"><title>${esc(description)}</title>${body}</g>`;
 }