/**
 * Drawing the board.
 *
 * Two renderers, chosen because they fail in opposite places (docs/design/board-layout-studies.html):
 *
 *   - `officeSvg`  — the district stays a MAP. Cards on a grid with the rails actually drawn, so a
 *                    join is rail meeting rail rather than two descriptions that happen to agree.
 *   - `divisionSvg`— the Division is not a map, it is a queue of sections with hard capacities, so
 *                    it is drawn as a dispatcher's diagram: one line per track, count them to know
 *                    what fits.
 *
 * SELF-CONTAINED ON PURPOSE. Both functions reference nothing outside their own bodies — no imports,
 * no module-level helpers. The playable app imports them normally; the replay is a single HTML file
 * with an inline script and cannot import anything, so it embeds these via `Function.toString()`.
 * That keeps ONE implementation: a second copy would eventually draw a different board from the same
 * state, which is the exact failure a track diagram exists to prevent.
 *
 * Rails come from `CellView.links`, which is the engine's own `connectionsFor`. A drawn rail can
 * therefore never claim a connection the rules do not have.
 */

import type { CellView, DivisionView } from './view.ts';

/** Anything the renderers need to know about a train standing somewhere. */
export type BoardTrain = { label: string; consist: string[] };

/**
 * The Division as a dispatcher would see it: one continuous line per running track, sections
 * separated by thin seams, capacity legible because the lines can be counted.
 */
/**
 * Who is at the table, so an Office can be labelled with its owner rather than only its tier.
 *
 * Passed in rather than read off the nodes because a `DivisionView` knows its seat and nothing
 * about people — the roster lives on the `Frame`, keyed by player, and `seat` is what joins them.
 * Optional so the standalone replay (`replay.ts`, which serialises this function by `toString()`)
 * keeps working unchanged.
 */
export type DivisionRoster = {
  players: { index: number; seat: number; name: string }[];
  /** The player whose move it is, or null in an automatic phase. A PLAYER index, not a seat. */
  actor: number | null;
  /** The player this map is being drawn for. */
  viewer: number;
};

export function divisionSvg(nodes: DivisionView[], roster?: DivisionRoster | null): string {
  /**
   * THE WHOLE DIVISION, west to east, as one continuous route.
   *
   * It used to draw one box per node, which collapsed every player's district into a single
   * "Office" tile — so the thing a train actually runs along, the Running Track between the Limits,
   * was invisible on the only map that shows where trains are. Now an Office expands into its
   * Running Track, Limits to Limits, and the route reads end to end:
   *
   *   West DP · Mainline · [Limits … Office … Limits] · Mainline · [ … ] · Mainline · East DP
   *
   * SEATING. Players sit around a table, so the route is laid out the way they do: one row alone,
   * two rows facing, a horseshoe of three, a square of four. The Division is a LINE and not a loop
   * — trains enter at one Division Point and leave at the other — so the shape is deliberately left
   * open, with the two ends drawn as buffer stops facing each other across a marked gap. Closing it
   * into a ring would promise a connection the rules do not have.
   *
   * Self-contained on purpose: the replay embeds this by `toString()`, so it may not reach for
   * anything outside its own body.
   */
  const CW = { dp: 118, ml: 152, run: 78 };
  const CH = 58;
  const GAP = 6;
  /**
   * ONE FIXED SLOT PER A/D TRACK, so the Office Running Track cell is drawn wide enough to hold
   * them without spilling onto its neighbours (docs/plans/switching-paths.md — "The Roster Pass").
   * Sized by CAPACITY, not by how many are occupied right now: a cell drawn for the trains it HAS
   * holds still as they come and go, where sizing by occupancy moved the East Division Point (and
   * everything past it) sideways every time an A/D track filled or cleared.
   */
  const CHIP_W = 54;
  /**
   * Room for the buffer stops. THE LABELS NO LONGER LIVE OUT HERE.
   *
   * They used to hang off the ends — "west end · in and out" anchored outside the first cell — which
   * needed about 126px of padding to fit and had 92, so both ends were clipped mid-word. Widening
   * the padding to fit them would have spent that space on two captions instead of on the map.
   * They now sit UNDER their own Division Point, where they are neither clipped nor in the way, and
   * this is back to what a buffer stop actually needs.
   */
  const PAD = 22;
  const SIDE_GAP = 34;

  const esc = (t: string): string =>
    String(t).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c] ?? c);

  // -- flatten the route into drawable cells, remembering which belong to whose district --------
  type Cell = {
    kind: 'dp' | 'ml' | 'run';
    label: string;
    sub: string;
    trains: {
      label: string;
      consist: string[];
      /** Nose first, no engine — drawn as blocks, loaded solid and empty hollow. */
      cars?: string[];
      engineAt?: number;
      /** East or west, always — a Division runs east and west and so does its rolling stock. */
      facing?: 'e' | 'w';
      /** The train's printed card, so a train out on the Mainline can still be asked what it is. */
      what?: string;
      region?: number;
      direction?: string;
      stagesLeft?: number;
    }[];
    cap: number | null;
    tip: string;
    /** Which SEAT's district this cell belongs to, or null for Mainline and Division Points. */
    seat: number | null;
    /** Set on an Office cell when a roster was supplied: whose district this is. */
    owner?: { name: string; isTurn: boolean; isYou: boolean } | null;
    /** Mainline cards only: §2.1 divides one into two regions. 0 elsewhere — no bars are drawn. */
    regions: number;
    w: number;
    x: number;
    y: number;
  };
  const cells: Cell[] = [];
  const sides: number[][] = [];
  let side: number[] = [];

  const push = (c: Omit<Cell, 'x' | 'y'>): void => {
    side.push(cells.length);
    cells.push({ ...c, x: 0, y: 0 });
  };

  for (const n of nodes) {
    if (n.kind === 'office') {
      const cap = n.capacity;
      const ad = n.trains.flat();
      /**
       * THE NAME IS THE HEADLINE, the tier is the detail.
       *
       * "Where does Bob sit?" is the question this map could not answer: an Office was labelled
       * with its tier, which every player's Office also has, so four districts read the same. The
       * owner's name takes the headline and the tier moves down beside the A/D count, because the
       * name is what is being looked for and the tier is what is being referred to once found.
       */
      const seatOwner =
        roster && n.seat !== null ? (roster.players.find((p) => p.seat === n.seat) ?? null) : null;
      const owner = seatOwner
        ? {
            name: seatOwner.name,
            isTurn: roster!.actor === seatOwner.index,
            isYou: roster!.viewer === seatOwner.index,
          }
        : null;

      for (const rc of n.running ?? []) {
        const isOffice = rc.kind === 'office';
        const adLabel = cap === null ? '' : `A/D ${ad.length}/${cap}`;
        push({
          kind: 'run',
          label: isOffice && owner ? owner.name : rc.label,
          owner: isOffice ? owner : null,
          // With an owner on the headline the tier would otherwise vanish, so it joins the A/D
          // count on the line below.
          sub: isOffice ? (owner ? [rc.label, adLabel].filter(Boolean).join(' · ') : adLabel) : '',
          /**
           * A train standing at the Office occupies an A/D track, which is where it is — but it is
           * ALSO standing on the Office grid card, so it arrives here in both lists and used to be
           * drawn twice. Reported as two T10 chips on one Office.
           */
          trains: isOffice
            ? [...rc.trains, ...ad.filter((t) => !rc.trains.some((r) => r.label === t.label))]
            : rc.trains,
          cap: isOffice ? cap : null,
          tip: owner && isOffice
            ? `${owner.name}'s ${rc.label}` +
              (owner.isYou ? ' — this is your railroad' : '') +
              // "their move" is wrong when the reader is the one being waited on.
              (owner.isTurn ? (owner.isYou ? ' — it is your move' : ' — it is their move') : '')
            : `${rc.label} — ${rc.kind === 'limits' ? 'the end of this district; the Running Track runs between the Limits' : 'Running Track'}`,
          seat: n.seat ?? null,
          // No regions inside a district: a crew moves by Moves there, not by Stages, so it
          // occupies a card outright rather than a part of one.
          regions: 0,
          w: isOffice && cap !== null ? Math.max(CW.run, cap * CHIP_W + 12) : CW.run,
        });
      }
      // A crew below the Running Track has no position ON it, so it is reported against the
      // district rather than drawn somewhere it is not.
      const below = n.switching ?? [];
      if (below.length > 0) {
        const last = cells[cells.length - 1];
        if (last) last.sub = `${below.length} switching below`;
      }
      sides.push(side);
      side = [];
      continue;
    }
    const dp = n.kind === 'dp';
    push({
      kind: dp ? 'dp' : 'ml',
      label: n.label,
      sub: n.capacity === null ? 'no limit — trains queue' : `${Math.max(0, n.capacity - n.trains.flat().length)} of ${n.capacity} free`,
      trains: n.trains.flat(),
      cap: n.capacity,
      tip: dp
        ? 'A Division Point — the end of the line. Trains both enter and leave the Division here (odd numbers run west, even run east), and queue without limit'
        : `${n.label} — Mainline${n.gradeUp ? `, climbs ${n.gradeUp === 'east' ? 'east' : 'west'}` : ''}${n.modifiers.length ? ` · ${n.modifiers.join(' · ')}` : ''}` +
          // What the card actually DOES. The name alone left Hilly and Uncontrolled Siding as
          // words with no gameplay attached — reported exactly that way.
          (n.what ? `\n\n${n.what}` : ''),
      seat: null,
      // A Division Point is one region — the queue trains enter and leave the Division through.
      regions: dp ? 1 : (n.regions ?? 0),
      w: dp ? CW.dp : CW.ml,
    });
  }
  if (side.length > 0) sides.push(side);

  // Each player's side carries their district and the Mainline card leading into it; whatever is
  // left over (the last Mainline and the East DP) joins the final side.
  const seats = Math.max(1, Math.min(4, nodes.filter((n) => n.kind === 'office').length));
  const lanes: number[][] = [];
  for (let i = 0; i < seats; i++) lanes.push([]);
  sides.forEach((grp, i) => {
    const target = Math.min(i, seats - 1);
    for (const idx of grp) lanes[target]!.push(idx);
  });

  // -- lay the sides out around the table -------------------------------------------------------
  // top → right → bottom (reversed) → left (reversed), which gives a row, two facing rows, a
  // horseshoe open to the west, and a square broken at the same place.
  const dir: ('top' | 'right' | 'bottom' | 'left')[] =
    seats === 1 ? ['top'] : seats === 2 ? ['top', 'bottom'] : seats === 3 ? ['top', 'right', 'bottom'] : ['top', 'right', 'bottom', 'left'];

  const runLen = (idxs: number[]): number =>
    idxs.reduce((n, i) => n + cells[i]!.w + GAP, -GAP);
  const widest = Math.max(...lanes.map((l) => runLen(l)), 200);
  const tall = lanes.length > 1 ? Math.max(...lanes.map((l) => l.length), 1) * (CH + GAP) : CH;

  const vertCount = dir.filter((d) => d === 'right' || d === 'left').length;
  const boardW = PAD * 2 + widest + (vertCount > 0 ? CW.run + SIDE_GAP : 0);
  const boardH = PAD * 2 + (dir.includes('bottom') ? CH * 2 + SIDE_GAP + (vertCount ? tall : 0) : CH) + 30;

  lanes.forEach((idxs, i) => {
    const d = dir[i]!;
    if (d === 'top' || d === 'bottom') {
      const y = d === 'top' ? PAD : boardH - PAD - CH - 22;
      const order = d === 'bottom' ? [...idxs].reverse() : idxs;
      let x = PAD;
      for (const idx of order) {
        const c = cells[idx]!;
        c.x = x;
        c.y = y;
        x += c.w + GAP;
      }
    } else {
      const x = d === 'right' ? boardW - PAD - CW.run : PAD;
      const order = d === 'left' ? [...idxs].reverse() : idxs;
      let y = PAD + CH + SIDE_GAP;
      for (const idx of order) {
        const c = cells[idx]!;
        c.x = x;
        c.y = y;
        c.w = CW.run;
        y += CH + GAP;
      }
    }
  });

  // -- draw -------------------------------------------------------------------------------------
  const rail = (x1: number, y: number, x2: number): string => {
    let o =
      `<line class="bs-rail" x1="${x1}" y1="${y - 2.5}" x2="${x2}" y2="${y - 2.5}"/>` +
      `<line class="bs-rail" x1="${x1}" y1="${y + 2.5}" x2="${x2}" y2="${y + 2.5}"/>`;
    const n = Math.max(2, Math.floor(Math.abs(x2 - x1) / 9));
    for (let i = 0; i <= n; i++) {
      const tx = x1 + ((x2 - x1) * i) / n;
      o += `<line class="bs-tie" x1="${tx}" y1="${y - 4.5}" x2="${tx}" y2="${y + 4.5}"/>`;
    }
    return o;
  };

  // The same rail turned through ninety degrees, for the sides of the table.
  const railV = (x: number, y1: number, y2: number): string => {
    let o =
      `<line class="bs-rail" x1="${x - 2.5}" y1="${y1}" x2="${x - 2.5}" y2="${y2}"/>` +
      `<line class="bs-rail" x1="${x + 2.5}" y1="${y1}" x2="${x + 2.5}" y2="${y2}"/>`;
    const n = Math.max(2, Math.floor(Math.abs(y2 - y1) / 9));
    for (let i = 0; i <= n; i++) {
      const ty = y1 + ((y2 - y1) * i) / n;
      o += `<line class="bs-tie" x1="${x - 4.5}" y1="${ty}" x2="${x + 4.5}" y2="${ty}"/>`;
    }
    return o;
  };

  let out = `<svg class="bs bs-div" viewBox="0 0 ${Math.ceil(boardW)} ${Math.ceil(boardH)}" preserveAspectRatio="xMinYMin meet">`;

  // The joins between consecutive cells, drawn as rail so a connection is rail meeting rail. A join
  // that crosses from one player's side to the next is drawn heavier and labelled: that boundary is
  // the Mainline card two districts share, and it is the thing a table needs to see.
  for (let i = 0; i + 1 < cells.length; i++) {
    const a = cells[i]!;
    const b = cells[i + 1]!;
    const sameRow = Math.abs(a.y - b.y) < 1;
    const sameCol = Math.abs(a.x - b.x) < 1;
    if (sameRow && b.x > a.x) out += rail(a.x + a.w, a.y + CH / 2, b.x);
    else if (sameRow && b.x < a.x) out += rail(b.x + b.w, a.y + CH / 2, a.x);
    else if (sameCol) {
      // Stacked down one side of the table: still one straight run of track, not a turn.
      const top = Math.min(a.y + CH, b.y + CH);
      const bot = Math.max(a.y, b.y);
      out += railV(a.x + a.w / 2, top, bot);
    } else {
      // A turn between sides: an elbow, so the route is visibly continuous around the table.
      const ax = a.x + a.w / 2;
      const bx = b.x + b.w / 2;
      const ay = a.y + CH;
      const by = b.y;
      out += `<path class="bs-turn" d="M${ax} ${ay} L${ax} ${(ay + by) / 2} L${bx} ${(ay + by) / 2} L${bx} ${by}"/>`;
    }
  }

  cells.forEach((c) => {
    const full = c.cap !== null && c.trains.length >= c.cap;
    out += `<g class="bs-dcell bs-d${c.kind}${full ? ' bs-full' : ''}" data-tip="${esc(c.tip)}">`;
    out += `<rect x="${c.x}" y="${c.y}" width="${c.w}" height="${CH}" rx="5"/>`;
    /**
     * WHOSE IS IT, IS IT THEIR MOVE, AND IS IT MINE — answered by colour and one suffix rather
     * than by a legend. Amber is the same "it is happening here" the action panel uses; "(you)"
     * is spelled out because a colour alone cannot say which of four railroads is the reader's,
     * and that is the first thing anybody wants to know at a table they just sat down at.
     */
    const mark = c.owner ? ` bs-owner${c.owner.isTurn ? ' bs-turn' : ''}${c.owner.isYou ? ' bs-you' : ''}` : '';
    const suffix = c.owner?.isYou ? ' (you)' : '';
    out += `<text class="bs-name${mark}" x="${c.x + 7}" y="${c.y + 14}">${esc(c.label + suffix)}</text>`;
    out += rail(c.x + 6, c.y + 32, c.x + c.w - 6);
    if (c.sub) out += `<text class="bs-cap" x="${c.x + 7}" y="${c.y + CH - 6}">${esc(c.sub)}</text>`;

    // REGIONS. §2.1 divides a Mainline card into two, and §8.2 moves a train one region per Stage.
    // The bars are the card's DISTANCE and never vary; what varies is how fast a train covers them,
    // so a 60 card is crossed in one Stage and a slow train on a 30 takes three.
    const RW = c.regions > 0 ? (c.w - 12) / c.regions : 0;
    for (let r = 0; r < c.regions; r++) {
      out += `<line class="bs-region" x1="${c.x + 6 + RW * r}" y1="${c.y + 20}" x2="${c.x + 6 + RW * r}" y2="${c.y + 44}"/>`;
    }

    /**
     * ON THE DIVISION MAP, A TRAIN IS A CHIP — name, which way it points, how many cars.
     *
     * It was drawn as a full consist here, matching the Office Area card, and reported as too large
     * and hard to read: a Mainline cell is 152px and a Running Track cell 78px, against a district
     * card's 166px, and a four-car train plus its engine has to squeeze into a fifth of that. The
     * Office card is where the consist is worth drawing, because that is where the switching
     * decisions are made and where there is room to read it.
     *
     * So this keeps the two things the Division map is actually for — where a train is and which way
     * it is going — and leaves the cars to the tooltip and to the district.
     */
    c.trains.forEach((t, k) => {
      const cars = t.cars ?? [];
      const arrow = t.facing === 'w' ? '\u25c0' : '\u25b6';
      const loaded = cars.filter((x) => /^loaded/.test(x) || /caboose/.test(x)).length;
      const label = cars.length === 0 ? `${t.label} ${arrow}` : `${t.label} ${arrow}${cars.length}`;

      /**
       * THE OFFICE RUNNING CELL GETS FIXED SLOTS, ONE PER A/D TRACK — never a centre spread.
       *
       * Centred spreading pushes its outer chips outward as MORE trains arrive, and the cell was
       * sized for the cards it holds, not for its trains — so two chips at a Station used to land at
       * x 215–267 and 271–316 inside a cell spanning only 230–308, spilling onto the Limits cards
       * either side. A fixed slot per A/D track cannot overflow the cell at any occupancy, because
       * the cell was sized for exactly that many slots (see `CHIP_W` above).
       */
      const isOfficeRun = c.kind === 'run' && c.cap !== null && c.cap > 0;
      const slotW = isOfficeRun ? (c.w - 12) / c.cap! : 0;
      const w = isOfficeRun ? Math.min(slotW - 4, label.length * 6.6 + 12) : Math.min(c.w - 8, label.length * 6.6 + 12);
      // A train on a Mainline card sits in ITS region; anywhere else it just sits on the card.
      const inRegion = c.regions > 1 && typeof t.region === 'number';
      const tx = isOfficeRun
        ? c.x + 6 + slotW * (k + 0.5)
        : (inRegion ? c.x + 6 + RW * (t.region ?? 0) + RW / 2 : c.x + c.w / 2) +
          (inRegion ? 0 : (k - (c.trains.length - 1) / 2) * (w + 4));
      const dir = t.direction === 'west' ? ' \u25c0 west' : t.direction === 'east' ? ' east \u25b6' : '';
      const stages =
        typeof t.stagesLeft === 'number'
          ? ` \u00b7 ${t.stagesLeft} Stage${t.stagesLeft === 1 ? '' : 's'} still to run across this card` +
            ' (Stages, not regions: a card is two regions of fixed distance, and how many Stages a' +
            ' train takes over them depends on the card speed and the train)'
          : '';
      out += `<g class="bs-train" data-tip="${esc(t.label)} \u2014 carrying ${esc(cars.join(', ') || 'no cars')}${
        cars.length ? ` (${loaded} loaded)` : ''
      }${inRegion ? ` \u00b7 region ${(t.region ?? 0) + 1} of ${c.regions}${dir}` : ''}${esc(stages)}${
        // What the card prints. A train on the Mainline is exactly where "why did that leave without
        // me?" gets asked, and EXPEDITED is the answer more often than not.
        t.what ? `\n\n${esc(t.what)}` : ''
      }">` +
        `<rect x="${tx - w / 2}" y="${c.y + 22}" width="${w}" height="19" rx="3"/>` +
        `<text class="bs-tlab" x="${tx}" y="${c.y + 35}" text-anchor="middle">${esc(label)}</text>`;
      out += '</g>';
    });
    out += '</g>';
  });

  // THE ENDS. The route stops at both Division Points; drawing buffer stops and naming the gap is
  // what stops a seated layout being read as a loop.
  const first = cells[0];
  const last = cells[cells.length - 1];
  /**
   * UNDER THE DIVISION POINT, NOT BESIDE IT.
   *
   * Both labels used to hang off the outside of the end cells, anchored away from the board — which
   * needed padding wider than the caption to survive, did not get it, and so printed clipped at both
   * ends while spending the space anyway. Centred under their own cell they are neither cut off nor
   * competing with the map for width.
   *
   * BOTH ENDS DO BOTH. Odd trains run west and even trains run east (content.ts `pair`), so each
   * Division Point is a way on AND a way off. "trains enter" here and "trains leave" there said the
   * Division ran one way, which it does not — the buffer stops only mean it is a LINE, not a loop.
   */
  if (first) {
    out += `<g class="bs-stop"><line x1="${first.x - 9}" y1="${first.y + 16}" x2="${first.x - 9}" y2="${first.y + CH - 16}"/>` +
      `<line x1="${first.x - 9}" y1="${first.y + CH / 2}" x2="${first.x - 2}" y2="${first.y + CH / 2}"/></g>`;
    out += `<text class="bs-end" x="${first.x + first.w / 2}" y="${first.y + CH + 13}" text-anchor="middle">west end · in and out</text>`;
  }
  if (last && last !== first) {
    out += `<g class="bs-stop"><line x1="${last.x + last.w + 9}" y1="${last.y + 16}" x2="${last.x + last.w + 9}" y2="${last.y + CH - 16}"/>` +
      `<line x1="${last.x + last.w + 2}" y1="${last.y + CH / 2}" x2="${last.x + last.w + 9}" y2="${last.y + CH / 2}"/></g>`;
    out += `<text class="bs-end" x="${last.x + last.w / 2}" y="${last.y + CH + 13}" text-anchor="middle">east end · in and out</text>`;
  }

  out += '</svg>';
  return out;
}
/**
 * The Office Area as a map: one card per grid square, rails drawn edge to edge.
 *
 * THE PRINTED CARD, and nothing else (docs/tracks.png). The through rail runs east-west across the
 * DEAD CENTRE of every card, so abutting cards produce one unbroken line and a gap is visibly a
 * gap. Everything that leaves through the north or south edge does so at 45°, through the middle of
 * that edge — which is what lets two stacked cards read as one continuous diagonal.
 *
 * The card is 166 x 96, the printed sheet's 259:150 proportions. The aspect is not decoration: the
 * frog where a 45° leg meets the through track sits H/2 from the centre, so a squarer card pushes
 * it almost to the edge and a turnout's two routes stop being tellable apart.
 */
export function officeSvg(
  cells: CellView[],
  runningRow: number,
  ghosts: { row: number; col: number }[] = [],
  /**
   * Legal squares that already HAVE a card on them, each with what playing there would do.
   *
   * An empty legal square gets a whole ghost card saying "place here"; an occupied one used to get a
   * blue outline and nothing else, so the two most important placements in the game — extending the
   * Running Track at a Limits sign, and attaching an Enhancement to a card already down — were
   * offered without a word. Reported as the Depot lighting up for no visible reason.
   */
  legal: { row: number; col: number; label: string }[] = [],
  /**
   * The columns the Limits signs stand in, drawn as the district's east and west edges.
   *
   * Omitted by the previews and by the replay viewers' single-card renders, which have no district
   * to bound. Where it is given, the boundary is drawn down the WHOLE canvas: track may not be laid
   * outside these columns at any row (§2.1), and two signs sitting on one row could not say that —
   * a player looking at open ground past a sign had no way to know nothing of his could ever go
   * there until the square failed to light up.
   */
  limits: { west: number; east: number } | null = null,
  /**
   * Which train's consist is drawn at the rail, on an Office card holding more than one — the value
   * the "Which train are you switching?" picker already carries. Defaults to the first train on the
   * card, so every call site that has never heard of this feature keeps working unchanged.
   */
  selectedTrayId: string | null = null,
): string {
  const W = 166;
  const H = 96;
  const PAD = 3;
  const RAIL = H / 2;

  const esc = (t: string): string =>
    String(t).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c] ?? c);

  /**
   * ONE COORDINATE SYSTEM, AND ONE CANVAS.
   *
   * Empty squares a card may be placed on used to be drawn by a separate `ghostSvg` and spliced in
   * afterwards. It computed its own origin over cells PLUS spots while this function sized itself
   * over cells alone, so the two disagreed the moment a legal square lay outside the played cards —
   * and every legal square that extends the district does. Measured on seed 555: three placements
   * offered, the one empty square drawn at y=99 on a canvas 103 tall, i.e. off it entirely. The
   * list said three, the board showed two, and the third could not be clicked.
   *
   * Sizing over cells AND ghosts together is what makes that class of bug impossible.
   */
  const all = [...cells.map((c) => ({ row: c.row, col: c.col })), ...ghosts];
  if (all.length === 0) return '<svg class="bs" viewBox="0 0 10 10"></svg>';
  const rows = all.map((c) => c.row);
  const cols = all.map((c) => c.col);
  const r0 = Math.min(...rows);
  const r1 = Math.max(...rows);
  const c0 = Math.min(...cols);
  const c1 = Math.max(...cols);
  const width = (c1 - c0 + 1) * (W + PAD);
  const height = (r1 - r0 + 1) * (H + PAD) + 4;

  // Screen position of a card. Rows count DOWN from the top row, so the Running Track sits highest
  // and the district hangs beneath it, as the rules describe it.
  const px = (col: number): number => (col - c0) * (W + PAD);
  const py = (row: number): number => (r1 - row) * (H + PAD);

  const rail = (x1: number, y1: number, x2: number, y2: number): string => {
    const dx = x2 - x1;
    const dy = y2 - y1;
    const len = Math.hypot(dx, dy);
    const nx = (-dy / len) * 2.5;
    const ny = (dx / len) * 2.5;
    let out =
      `<line class="bs-rail" x1="${x1 + nx}" y1="${y1 + ny}" x2="${x2 + nx}" y2="${y2 + ny}"/>` +
      `<line class="bs-rail" x1="${x1 - nx}" y1="${y1 - ny}" x2="${x2 - nx}" y2="${y2 - ny}"/>`;
    const n = Math.max(2, Math.floor(len / 9));
    for (let i = 0; i <= n; i++) {
      const tx = x1 + (dx * i) / n;
      const ty = y1 + (dy * i) / n;
      out += `<line class="bs-tie" x1="${tx + nx * 1.8}" y1="${ty + ny * 1.8}" x2="${tx - nx * 1.8}" y2="${ty - ny * 1.8}"/>`;
    }
    return out;
  };

  /**
   * A 45° LEG, drawn as a smooth curve rather than two straight segments meeting at a hard corner.
   *
   * It is an EASEMENT, not an arbitrary curve: tangent to horizontal at `p0` (the east or west edge),
   * so an abutting straight card's through-rail still reads as one unbroken line, and tangent to
   * exactly 45° at `p3` (the north or south edge), so two stacked curves still read as one continuous
   * diagonal and the edge-crossing angle the matching rule depends on is unchanged. `p1`/`p2` are
   * cubic-Bezier control points chosen to hit those two tangents — see the call site.
   *
   * Sampled as a short polyline rather than left as one SVG path command, because the two parallel
   * rails and the tie marks all need points evenly spaced ALONG THE CURVE with the local tangent at
   * each one — `rail()`'s straight-line version does the same sampling, just on a line.
   */
  const curvedRail = (
    p0: { x: number; y: number },
    p1: { x: number; y: number },
    p2: { x: number; y: number },
    p3: { x: number; y: number },
  ): string => {
    const at = (t: number): { x: number; y: number } => {
      const u = 1 - t;
      return {
        x: u * u * u * p0.x + 3 * u * u * t * p1.x + 3 * u * t * t * p2.x + t * t * t * p3.x,
        y: u * u * u * p0.y + 3 * u * u * t * p1.y + 3 * u * t * t * p2.y + t * t * t * p3.y,
      };
    };
    const tangentAt = (t: number): { x: number; y: number } => {
      const u = 1 - t;
      return {
        x: 3 * u * u * (p1.x - p0.x) + 6 * u * t * (p2.x - p1.x) + 3 * t * t * (p3.x - p2.x),
        y: 3 * u * u * (p1.y - p0.y) + 6 * u * t * (p2.y - p1.y) + 3 * t * t * (p3.y - p2.y),
      };
    };
    const N = 24;
    const left: string[] = [];
    const right: string[] = [];
    let ties = '';
    for (let i = 0; i <= N; i++) {
      const t = i / N;
      const pt = at(t);
      const tan = tangentAt(t);
      const tlen = Math.hypot(tan.x, tan.y) || 1;
      const nx = (-tan.y / tlen) * 2.5;
      const ny = (tan.x / tlen) * 2.5;
      left.push(`${pt.x + nx} ${pt.y + ny}`);
      right.push(`${pt.x - nx} ${pt.y - ny}`);
      // Every third sample — the same rough 9px spacing `rail()` uses for a straight run of similar
      // length, not tied to `N` itself.
      if (i % 3 === 0) {
        ties += `<line class="bs-tie" x1="${pt.x + nx * 1.8}" y1="${pt.y + ny * 1.8}" x2="${pt.x - nx * 1.8}" y2="${pt.y - ny * 1.8}"/>`;
      }
    }
    return (
      `<path class="bs-rail" fill="none" d="M${left.join(' L')}"/>` +
      `<path class="bs-rail" fill="none" d="M${right.join(' L')}"/>` +
      ties
    );
  };

  // Where each port meets the card edge. East and west sit at the rail height — the card's middle —
  // so a straight run stays straight across the whole row; north and south are centred on the edge.
  const port = (p: string): { x: number; y: number } => {
    if (p === 'e') return { x: W, y: RAIL };
    if (p === 'w') return { x: 0, y: RAIL };
    if (p === 'n') return { x: W / 2, y: 0 };
    return { x: W / 2, y: H };
  };

  /**
   * ROOM FOR THE BOUNDARY. The Limits edge is drawn just outside the sign's own column, and the west
   * sign is usually the leftmost card on the canvas — so at x = −1.5 the line lands outside a viewBox
   * starting at 0 and is simply not there. The margin is added only when there is a boundary to draw.
   */
  const margin = limits ? 3 : 0;
  let out =
    `<svg class="bs" viewBox="${-margin} 0 ${width + margin * 2} ${height}" ` +
    `preserveAspectRatio="xMinYMin meet">`;
  for (const cell of cells) {
    const x = px(cell.col);
    const y = py(cell.row);
    const kind =
      cell.kind === 'office'
        ? 'office'
        : cell.kind === 'limits'
          ? 'lim'
          : cell.kind === 'facility'
            ? 'fac'
            : cell.kind === 'modifier'
              ? 'mod'
              : 'trk';

    // An Office card's roster band (below) takes the y-band the BOARDS + ALIGHTS flow label used to
    // print in, so that explanation folds into the card's own tooltip instead of being drawn — it
    // prints identically on every Office of every tier and is already implied by the card name and
    // the Porter pill, so nothing is lost by reading it on the card rather than beside it.
    const isOfficeRoster = cell.adTracks !== null;
    const flowFold =
      isOfficeRoster && cell.facility
        ? '\n\nBOARDS + ALIGHTS: passengers only — no freight is handled here. They wait in a green ' +
          'box, are boarded onto a coach by Porters, and arrive into a red one.'
        : '';

    // Addressable so a caller can outline a square as a legal destination without re-rendering.
    // The explanation rides on the group as a tooltip rather than being printed: it is reference
    // detail, read once, and printing it costs the space the board itself needs.
    out += `<g data-cell="${cell.row},${cell.col}" data-tip="${esc(cell.label)} — ${esc(cell.what)}${esc(flowFold)}" transform="translate(${x},${y})">`;
    out += `<rect class="bs-card bs-${kind}${cell.running ? ' bs-run' : ''}" x="0" y="0" width="${W}" height="${H}" rx="4"/>`;

    // The rails. A Modifier is not track and deliberately gets none — that is why nothing can be
    // routed through it, and the picture should say so.
    for (const link of cell.links) {
      const from = link[0] ?? 'e';
      const to = link[1] ?? 'w';
      const vertical = from === 'n' || from === 's' ? from : to === 'n' || to === 's' ? to : '';
      if (vertical === '') {
        // The through track: edge to edge along the middle of the card.
        out += rail(port(from).x, port(from).y, port(to).x, port(to).y);
      } else {
        /**
         * A 45° LEG — drawn as a smooth curve (v0.5.0) that still passes through the same FROG the
         * old two-segment version bent at, so the underlying geometry (and the `frog` position used
         * elsewhere for the actual joining/matching rules) is unchanged; only the picture is.
         *
         * The frog is `H/2` from the centre because a 45° run climbing half the card's height
         * travels half its height sideways. The control points sit halfway from each endpoint to the
         * frog, which is what gives the curve a horizontal tangent at the e/w edge (matching an
         * abutting straight card's through-rail) and an exact 45° tangent at the n/s edge (matching
         * the card above or below) — see `curvedRail`.
         */
        const side = vertical === from ? to : from;
        const frog = { x: W / 2 + (side === 'e' ? H / 2 : -H / 2), y: RAIL };
        const start = port(side);
        const edge = port(vertical);
        const c1 = { x: start.x + 0.5 * (frog.x - start.x), y: start.y };
        const c2 = { x: edge.x + 0.5 * (frog.x - edge.x), y: edge.y + 0.5 * (frog.y - edge.y) };
        out += curvedRail(start, c1, c2, edge);
      }
    }

    out += `<text class="bs-cn" x="6" y="12">${esc(cell.label)}</text>`;

    // X,Y — east/west then north/south, not the internal row/col storage order.
    out += `<text class="bs-coord" x="${W - 5}" y="12" text-anchor="end">${cell.col},${cell.row}</text>`;

    /**
     * THE ROSTER, one chip per A/D track — not one per train.
     *
     * The Office is the one square where more than one train may legally stand at once (its A/D
     * tracks, §2.1), and the old single `cell.train` field only ever showed whichever tray
     * `s.trays` happened to yield first: a second train at a busy Station was counted in the old
     * A/D pips and never drawn at all. `adTracks` of them, always, whether or not a train is
     * holding there — the cell is drawn for the tracks it HAS, so a free one reads a dashed,
     * dimmed chip saying "free" rather than simply vanishing.
     *
     * Selected train's chip is lit the same amber the crew strip and action buttons already use,
     * and it is the one whose consist is drawn at the rail below. Every occupied chip carries
     * `data-crew`, so the play page can wire a click to switch which train that is.
     *
     * COMPUTED FOR EVERY CARD, NOT JUST THE OFFICE. This used to sit inside the `adTracks !== null`
     * branch below, so it was only ever assigned on the Office card — a train standing anywhere else
     * in the district (which is everywhere it stands while actually being switched) got no chip at
     * all: no label, no engine arrow, and no cars drawn, though the game state never lost it. REPORTED:
     * dropping a car at the Freight House made "the train vanish off the face of the earth" — it had
     * simply left the one square this code drew a crew on. The Office is the only square that can hold
     * more than one train, so `cell.trains[0]` is exactly right everywhere else too.
     */
    const selectedTrain: CellView['trains'][number] | null =
      cell.trains.find((t) => t.trayId === selectedTrayId) ?? cell.trains[0] ?? null;
    if (cell.adTracks !== null) {
      const adTracks = cell.adTracks;
      const gaps = Math.max(0, adTracks - 1);
      const chipW = Math.min(52, (W - 12 - 4 * gaps) / adTracks);
      for (let i = 0; i < adTracks; i++) {
        const train = cell.trains[i] ?? null;
        const cx = 6 + i * (chipW + 4);
        if (!train) {
          out +=
            `<g class="bs-adchip mt"><rect x="${cx}" y="20" width="${chipW}" height="14" rx="3"/>` +
            `<text x="${cx + chipW / 2}" y="30.5" text-anchor="middle">free</text></g>`;
          continue;
        }
        const arrow = train.facing === 'w' ? '◀' : '▶';
        const chipLabel = chipW >= 40 ? `${train.label} ${arrow}${train.cars.length}` : `${train.label}${arrow}`;
        const consistWords = train.cars.length === 0 ? 'no cars' : train.cars.join(', ');
        const on = train.trayId === selectedTrain?.trayId;
        out +=
          `<g class="bs-adchip${on ? ' on' : ''}" data-crew="${esc(train.trayId)}" ` +
          `data-tip="${esc(`${train.label} — carrying ${consistWords}`)}">` +
          `<rect x="${cx}" y="20" width="${chipW}" height="14" rx="3"/>` +
          `<text x="${cx + chipW / 2}" y="30.5" text-anchor="middle">${esc(chipLabel)}</text></g>`;
      }
    }

    /**
     * THE LOAD PIPELINE, on the card itself, DRAWN THE WAY IT FLOWS.
     *
     * §9.3 runs loading Green → MEN → AT → WORK → the spotted car, and unloading the other way
     * entirely: car → WORK → AT → MEN → red. So green and red BOTH belong beside MEN, and the car
     * belongs beside WORK.
     *
     * This drew green, then MEN|AT|WORK, then red — putting the red box at the far right, which is
     * exactly where the car is. An unload therefore appeared to run backwards across the whole row
     * and then land on the end it had just come from. Reported after unloading at a warehouse:
     * "it went W, A, M, and then to the red box at the far right".
     *
     * Only the boxes an industry actually uses are drawn, and the arrows point the way its freight
     * really moves.
     */
    const f = cell.facility;
    if (f) {
      const cellW = 13;
      const box = (bx: number, by: number, filled: boolean, cls: string, label?: string): string =>
        `<rect class="bs-wb ${cls}${filled ? ' bs-occ' : ''}" x="${bx}" y="${by}" width="${cellW}" height="12" rx="2"/>` +
        (label ? `<text class="bs-wl" x="${bx + cellW / 2}" y="${by + 9}" text-anchor="middle">${esc(label)}</text>` : '');

      let bx = 7;
      const by = H - 42;
      /**
       * The MEN | AT | WORK sign is a FREIGHT fitting, so a Passenger Facility has none — `maw` comes
       * back empty for one. The arrows below point into and out of that sign, so they go with it:
       * without the sign they were chevrons aimed at nothing. A Depot keeps its green and red boxes,
       * because passengers really do wait in one and arrive into the other.
       */
      const hasSign = f.maw.length > 0;
      // Green feeds INTO the sign, red comes OUT of it, so both sit on this side and their arrows
      // point opposite ways. An industry that only receives has no green boxes at all.
      if (f.allowsOut) {
        for (let i = 0; i < Math.max(1, f.greenCap); i++) {
          out += box(bx, by, i < f.green.length, 'bs-green');
          bx += cellW + 2;
        }
        if (hasSign) {
          out += `<text class="bs-arrow" x="${bx + 1}" y="${by + 9}">›</text>`;
          bx += 9;
        }
      }
      if (f.allowsIn) {
        for (let i = 0; i < Math.max(1, f.redCap); i++) {
          out += box(bx, by, i < f.red.length, 'bs-red');
          bx += cellW + 2;
        }
        if (hasSign) {
          out += `<text class="bs-arrow" x="${bx + 1}" y="${by + 9}">‹</text>`;
          bx += 9;
        }
      }
      // MEN | AT | WORK — one physical sign, worked left to right loading and right to left
      // unloading. The spotted car sits past WORK, standing on the card itself.
      for (let i = 0; i < f.maw.length; i++) {
        out += box(bx, by, f.maw[i] !== null, 'bs-maw', ['M', 'A', 'W'][i]);
        bx += cellW + 2;
      }
      if (hasSign) {
        out += `<text class="bs-arrow" x="${bx + 1}" y="${by + 9}">${f.allowsOut && f.allowsIn ? '\u21c4' : f.allowsOut ? '›' : '‹'}</text>`;
      }

      /**
       * WHICH WAY THIS INDUSTRY RUNS, IN WORDS.
       *
       * A Refinery ships out and a Grocer's Warehouse receives, and the drawing told them apart by
       * the STROKE COLOUR of one 13x12px box and the direction of a 10px chevron. Asked directly in
       * playtesting whether the two were supposed to look the same: they were not, and effectively
       * they did. A word costs almost nothing and cannot be misread.
       */
      // A Passenger Facility is not an industry and must not borrow an industry's word for it: a
      // Depot read "SHIPS + RECEIVES", which says freight. Passengers board and alight instead.
      const passenger = f.kind === 'passenger';
      const flow = passenger
        ? 'BOARDS + ALIGHTS'
        : f.allowsOut && f.allowsIn ? 'SHIPS + RECEIVES' : f.allowsOut ? 'SHIPS OUT' : 'RECEIVES';
      const flowCls = passenger || (f.allowsOut && f.allowsIn) ? 'bs-flow-both' : f.allowsOut ? 'bs-flow-out' : 'bs-flow-in';
      // An Office card's roster band now occupies this y-band; its tooltip already folded into the
      // card's own data-tip above, so the label is not printed twice.
      if (!isOfficeRoster) {
        out += `<text class="bs-flow ${flowCls}" x="${W - 6}" y="26" text-anchor="end" data-tip="${esc(
          passenger
            ? 'Passengers only — no freight is handled here. They wait in a green box, are boarded onto a coach by Porters, and arrive into a red one. There is no MEN | AT | WORK sign because that is a Freight Facility fitting.'
            : f.allowsOut && f.allowsIn
              ? 'This industry both ships and receives, so it has green boxes AND red ones: loads leave it on a car, and loads arrive on one.'
              : f.allowsOut
                ? 'This industry only SHIPS. A load starts in a green box, is worked along MEN | AT | WORK by Laborers, and comes off onto an empty car spotted on its track. It has no red boxes because nothing arrives here.'
                : 'This industry only RECEIVES. A loaded car is spotted on its track and Laborers work the load back along WORK | AT | MEN into a red box. It has no green boxes because nothing ships from here.',
        )}">${esc(flow)}</text>`;
      }

      /**
       * THE WORKERS, ON THE CARD.
       *
       * "How do I see the number of laborers in an industry card?" — you could not. The number that
       * decides every Cargo phase lived only in a side panel, so a Modifier's +1 Laborer landed
       * where the player was not looking and an Oil Depot appeared to do nothing at all. Porters
       * were worse: nothing on the page drew them anywhere.
       *
       * FREE OVER TOTAL, because free is what can be spent right now. A facility has one kind of
       * worker or the other — Laborers work freight, Porters work passengers — so the card carries
       * whichever one it actually has.
       */
      const isPorter = f.laborers.startsWith('0/0');
      const crew = isPorter ? f.porters : f.laborers;
      if (!crew.startsWith('0/0')) {
        const free = Number(crew.split('/')[0]);
        out += `<g data-tip="${esc(
          isPorter
            ? `${crew} Porters free this Stage. A Porter boards or detrains passengers — one action each, and the Revenue arrives in that single action.`
            : `${crew} Laborers free this Stage. One Laborer moves one load one square along MEN | AT | WORK, so this is the whole of what this industry can do before the Stage turns over.`,
        )}">` +
          `<rect class="bs-crewpill${free > 0 ? ' bs-ready' : ''}" x="${W - 44}" y="${by - 1}" width="38" height="14" rx="7"/>` +
          `<text class="bs-crewlab" x="${W - 25}" y="${by + 9}" text-anchor="middle">${esc(isPorter ? 'P' : 'L')} ${esc(crew)}</text></g>`;
      }
    }

    /**
     * THE CARS STANDING HERE — NO PRINTED SIDING BEHIND THEM.
     *
     * An industry card used to draw one empty square per unit of its capacity, which read as a
     * siding of a particular length printed on the card. No industry card prints one. Worse, the
     * length came from the box count, so a one-box industry drew a single square and looked like it
     * could only ever hold one car — which is exactly what the engine was wrongly enforcing.
     *
     * Every card, industry or not, now draws what is actually standing on it and nothing more. Four
     * is the ceiling everywhere (`MAX_CONSIST`), so the row cannot overflow the card.
     *
     * The 4 is written out rather than imported: this function's SOURCE is serialized into the
     * standalone replay page, where module imports are not in scope. Referencing the constant threw
     * `MAX_CONSIST is not defined` in the rendered HTML while typechecking perfectly here.
     */
    /**
     * WHICH SIDE OF THE ENGINE THE CUT IS ON.
     *
     * Reported from play: "right after dropping my cars I need to be able to see if those cars are
     * ahead or behind the train." They were drawn as one strip starting at the left edge whether a
     * train was on the card or not, so the picture could not say.
     *
     * `cars` runs WEST TO EAST and `standingWest` is how many of them are west of the train, so the
     * row is split there: the west cars stay left-aligned, the east cars are pushed over to the
     * right-hand end, and the gap between them is where the engine is standing. Whether that gap
     * means "ahead" or "behind" is the engine's facing, which the tooltip says in words rather than
     * leaving the player to work out from the compass.
     */
    const hasTrain = cell.trains.length > 0;
    const split = hasTrain ? Math.max(0, Math.min(cell.cars.length, cell.standingWest)) : 0;
    const shown = Math.min(cell.cars.length, 4);
    for (let i = 0; i < shown; i++) {
      // With no train on the card there is no gap to leave, so the whole cut stays left-aligned.
      const westOfEngine = hasTrain ? i < split : true;
      const side = !selectedTrain
        ? 'standing here'
        : (selectedTrain.facing === 'e') === westOfEngine
          ? 'standing BEHIND the engine — it would couple onto the tail backing up'
          : 'standing AHEAD of the engine — it would couple onto the nose pulling forward';
      const carTip = `${cell.cars[i]} ${side}`;
      /**
       * WHICH CAR IS STANDING HERE, not just that one is.
       *
       * The switching game is entirely about getting the RIGHT car to the right industry, so "a car
       * is here" is not enough — a Grocer's Warehouse wants a boxcar or a reefer and nothing else
       * will do. This printed the first three characters of the label, which for "loaded hopper" and
       * "loaded boxcar" alike is `loa`: every car on the board looked the same.
       *
       * Type by colour and by three letters, loaded by a filled slot and empty by an outlined one —
       * the same distinction the printed game makes with coloured tokens.
       */
      const car = cell.cars[i] ?? '';
      const type = /caboose/.test(car)
        ? 'cab'
        : /hopper/.test(car)
          ? 'hop'
          : /boxcar/.test(car)
            ? 'box'
            : /reefer/.test(car)
              ? 'rfr'
              : /tank/.test(car)
                ? 'tnk'
                : /coach/.test(car)
                  ? 'cch'
                  : '';
      // A caboose is never "loaded" in the freight sense (carLabel says so), so it is drawn solid:
      // it is a car that is doing its job, not an empty waiting for one.
      const loaded = /^loaded/.test(car) || /caboose/.test(car);
      const cls = ` bs-occ bs-car-${type}${loaded ? ' bs-loaded' : ' bs-mt'}`;
      /**
       * LOADED OR EMPTY, TOLD THE SAME WAY THE TRAY TELLS IT.
       *
       * REPORTED: "I left a car in a siding and cannot remember whether it was loaded. In the train
       * tray it is obvious; on the office cards it is hard to tell." It was: an occupied slot took a
       * generic blue fill first and only a LOADED car overrode it with its type colour, so empty
       * read as blue-ish and loaded as brown-ish at 26x15px, and neither said which it was.
       *
       * Now the card matches the tray — solid face for loaded, hollow for empty — and every slot
       * carries the car's own words as a tooltip, so "loaded hopper" is one hover away.
       */
      // West cars run rightwards from the left edge; east cars run leftwards from the right edge, so
      // the engine's place in the row is the gap left between them.
      const sx = westOfEngine ? 8 + i * 30 : W - 34 - (shown - 1 - i) * 30;
      out += `<rect class="bs-slot${cls}" x="${sx}" y="${H - 26}" width="26" height="15" rx="2" data-tip="${esc(carTip)}"/>`;
      out += `<text class="bs-carlab${loaded ? ' bs-lab-ld' : ''}" x="${sx + 13}" y="${H - 15}" text-anchor="middle" data-tip="${esc(carTip)}">${esc(type)}</text>`;
    }

    if (cell.enhancements.length > 0) {
      // ABOVE the rail. An `onCard` enhancement can land on a facility, so it has to clear both the
      // load pipeline below and the through track — and with the rail now down the middle of the
      // card, the old y = H-46 baseline printed the label straight along the rail itself.
      // Hover text per enhancement, from the card catalogue — an Interlocking used to be a bare word
      // on the card with nothing to say what it did, or that it does not do it yet.
      out += `<text class="bs-enh" x="6" y="26" data-tip="${esc(
        (cell.enhancementsWhat ?? []).join(' · '),
      )}">${esc(cell.enhancements.join(' · '))}</text>`;
    }
    if (selectedTrain) {
      /**
       * THE SELECTED TRAIN, DRAWN AS IT SITS IN THE TRAY.
       *
       * The badge used to be a name and nothing more, which makes the switching game unplayable:
       * every decision is about car ORDER — which car comes off next, which end a cut couples onto —
       * and none of it was on the board. Now the engine and its cars are drawn in sequence, nose
       * first, with an arrow for which way the engine points, so "set out the caboose off the back"
       * is a thing you can see before you choose it. Where an Office holds more than one train, only
       * this one is drawn here — the rest are the roster chips above, each with its own tooltip.
       */
      const t = selectedTrain;
      const items: { label: string; kind: string; what: string }[] = t.cars.map((c) => ({
        label: /caboose/.test(c) ? 'cab' : /hopper/.test(c) ? 'hop' : /boxcar/.test(c) ? 'box'
          : /reefer/.test(c) ? 'rfr' : /tank/.test(c) ? 'tnk' : /coach/.test(c) ? 'cch' : '?',
        kind: /^loaded/.test(c) || /caboose/.test(c) ? 'ld' : 'mt',
        what: c,
      }));
      const arrow = t.facing === 'w' ? '\u25c0' : '\u25b6';
      items.splice(t.engineAt, 0, { label: arrow, kind: 'eng', what: 'the engine' });
      /**
       * WEST ON THE LEFT, AND THE NOSE POINTING THE WAY THE ENGINE FACES.
       *
       * `consist` is ordered NOSE FIRST (state.ts), and this drew index 0 leftmost whatever the
       * train was doing \u2014 so a westbound train came out right and an eastbound one came out
       * MIRRORED. Reported from seed 270861860: Train 10 running east arrived at the Whistle Post
       * drawn engine-first at the WEST end, which reads as an engine shoving four cars ahead of it.
       *
       * The board is a map, so the drawing has to obey the map: reverse the seating order for an
       * east-facing train and its nose lands at the east end, where it is.
       *
       * A crew on a north-south spur is drawn east-west like every other train, because `facing` is
       * now always east or west (`railFacingOf`). It used to keep its compass port and draw \u25b2 or \u25bc
       * with the consist pinned nose-left, which meant the one thing the picture is for \u2014 which end
       * the engine is on \u2014 flipped its convention the moment a crew turned a corner. Playtested and
       * reported as more confusing than a strip drawn the same way every time.
       */
      const laid = t.facing === 'e' ? [...items].reverse() : items;
      const cw = 17;
      const tw = Math.min(W - 8, laid.length * cw + 30);
      const tx = W / 2 - tw / 2;
      const facingWord = t.facing === 'e' ? 'east' : 'west';
      const consistWords = t.cars.length === 0 ? 'no cars' : t.cars.join(', ');
      out += `<g class="bs-crew" data-tip="${esc(
        `${t.label} — engine pointing ${facingWord}, carrying ${consistWords}` + (t.what ? `\n\n${t.what}` : ''),
            )}"><rect x="${tx}" y="${RAIL - 11}" width="${tw}" height="22" rx="3"/>`;
      out += `<text class="bs-tlab" x="${tx + 4}" y="${RAIL + 4}">${esc(t.label)}</text>`;
      laid.forEach((it, n) => {
        const bx = tx + 28 + n * cw;
        out += `<rect class="bs-tcar bs-t-${it.kind}" x="${bx}" y="${RAIL - 8}" width="${cw - 2}" height="16" rx="2" data-tip="${esc(it.what)}"/>` +
          `<text class="bs-tcarlab" x="${bx + (cw - 2) / 2}" y="${RAIL + 4}" text-anchor="middle" data-tip="${esc(it.what)}">${esc(it.label)}</text>`;
      });
      out += '</g>';
    }
    out += '</g>';
  }

  // A legal EMPTY square has no card to outline, so it gets a target drawn in the same frame.
  for (const g of ghosts) {
    out += `<g data-ghost="${g.row},${g.col}" transform="translate(${px(g.col)},${py(g.row)})" class="bs-ghost">` +
      `<rect x="0" y="0" width="${W}" height="${H}" rx="4"/>` +
      `<text x="${W / 2}" y="${H / 2}" text-anchor="middle">place here</text>` +
      `<text class="bs-coord" x="${W / 2}" y="${H / 2 + 15}" text-anchor="middle">${g.col},${g.row}</text>` +
      `</g>`;
  }

  /**
   * A LEGAL SQUARE THAT ALREADY HAS A CARD ON IT, captioned like the empty ones.
   *
   * The two are the same question — you have picked a card, now pick where it goes — and they were
   * answered in two different registers: a full ghost card reading "place here" for an empty square,
   * and a 2px blue outline for an occupied one. So the Limits sign (which is how a district grows at
   * all) and the Depot (which is where an Enhancement attaches) both lit up saying nothing.
   *
   * Drawn as a band across the card rather than over its middle: there is a rail, a train and a load
   * pipeline under here, and the caption must not sit on top of them.
   */
  for (const l of legal) {
    out += `<g class="bs-legalcap" transform="translate(${px(l.col)},${py(l.row)})">` +
      `<rect x="6" y="${H - 46}" width="${W - 12}" height="14" rx="7"/>` +
      `<text x="${W / 2}" y="${H - 36}" text-anchor="middle">${esc(l.label)}</text></g>`;
  }

  /**
   * THE LIMITS, AS THE EDGE OF THE BUILDABLE DISTRICT.
   *
   * Drawn just OUTSIDE the sign's own column, because the sign stands on the boundary rather than
   * beyond it: a siding may run under the sign, and the line has to agree with the rule or it
   * teaches the wrong one. It moves outward on its own as the Running Track is extended, which is
   * the reward for extending made visible.
   */
  if (limits) {
    const edge = (x: number, side: string): string =>
      `<line class="bs-limitline" x1="${x}" y1="0" x2="${x}" y2="${height}"/>` +
      `<text class="bs-limitlab" x="${x + (side === 'w' ? 4 : -4)}" y="${height - 4}" ` +
      `text-anchor="${side === 'w' ? 'start' : 'end'}">LIMITS</text>`;
    out += edge(px(limits.west) - PAD / 2, 'w') + edge(px(limits.east) + W + PAD / 2, 'e');
  }

  // Mark the Running Track so the spine of the district is unmistakable.
  out += `<text class="bs-rowlab" x="2" y="${py(runningRow) + 92}">RUNNING TRACK</text>`;
  out += '</svg>';
  return out;
}

/** Styling for both renderers. Shared so the replay and the app cannot drift apart visually. */
export const BOARD_CSS = `
.bs{width:100%;height:auto;background:#0e1116;border-radius:6px;padding:6px;overflow:visible}
.bs-rail{stroke:#cfd6e0;stroke-width:1.6}
.bs-tie{stroke:#8d97a5;stroke-width:1.1}
.bs-open .bs-rail{stroke:#6b7686;stroke-dasharray:6 4}
.bs-open .bs-tie{stroke:#59626f}
.bs-card{fill:#161b21;stroke:#39424e;stroke-width:1}
.bs-card.bs-run{fill:#1d232c}
.bs-office{fill:#1b2534;stroke:#4d6fa8;stroke-width:2}
.bs-lim{fill:#241d1d;stroke:#8a5a5a}
.bs-fac{fill:#201c26;stroke:#7a5f9a}
.bs-mod{fill:#231d2b;stroke:#5c4a70;stroke-dasharray:4 3}
.bs-sec{fill:#161b21;stroke:#39424e}
.bs-sec.bs-dp{fill:#151f19;stroke:#3f7a52;stroke-width:2;stroke-dasharray:5 3}
.bs-sec.bs-office{fill:#1b2534;stroke:#4d6fa8;stroke-width:2}
/* THE DIVISION, drawn as the route rather than as a row of boxes.
   Three kinds of cell, and they must be told apart at a glance: a Division Point is where trains
   come from and go to, a Mainline card is shared ground between two districts, and a Running Track
   card belongs to one player's Office Area. */
.bs-dcell rect{fill:#161b21;stroke:#39424e;stroke-width:1}
.bs-ddp rect{fill:#151f19;stroke:#3f7a52;stroke-width:2;stroke-dasharray:5 3}
.bs-dml rect{fill:#1d222b;stroke:#6b7686;stroke-width:1.6}
.bs-drun rect{fill:#1b2534;stroke:#4d6fa8}
.bs-dcell.bs-full rect{stroke:#e0a060;stroke-width:2}
/* The elbow where the route turns from one player's side of the table to the next. Drawn heavier
   than a plain join because that turn is the boundary two districts share. */
.bs-turn{fill:none;stroke:#7f8b9c;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* Buffer stops at both ends. The Division is a line, not a loop: trains enter at one Division Point
   and leave at the other, and a seated layout must not be read as a ring. */
.bs-stop line{stroke:#e0a060;stroke-width:2.6;stroke-linecap:round}
.bs-end{fill:#e0a060;font:10px ui-monospace,monospace;letter-spacing:.03em}
/* The vertical bars a Mainline card is divided into (§2.1). Drawn faint: they are the ruler the
   train is measured against, not something to look at instead of the train. */
.bs-region{stroke:#4a5361;stroke-width:1.2;stroke-dasharray:3 3}
.bs-slot{fill:none;stroke:#5f6b7a;stroke-width:1.1;stroke-dasharray:3 2}
.bs-slot.bs-occ{stroke-dasharray:none;stroke-width:1.6}
/* CAR TYPE BY COLOUR, LOAD STATE BY FILL — the SAME distinction the train tray draws, because they
   are the same fact about the same car. An occupied slot used to take a generic blue fill and only
   a loaded car overrode it, so a 26x15px square said "a car" and left "which car, carrying what?"
   to be worked out. Empty is now hollow with a dark face, loaded a solid one, exactly as in the
   tray; the type colour is the stroke either way. */
.bs-slot.bs-car-box{stroke:#c08a4a}
.bs-slot.bs-car-hop{stroke:#8d97a5}
.bs-slot.bs-car-tnk{stroke:#7a6ab0}
.bs-slot.bs-car-rfr{stroke:#6fb5a0}
.bs-slot.bs-car-cch{stroke:#5aa9e6}
.bs-slot.bs-car-cab{stroke:#c05a5a}
.bs-slot.bs-occ.bs-mt{fill:#181d24}
.bs-slot.bs-car-box.bs-loaded{fill:rgba(192,138,74,.85)}
.bs-slot.bs-car-hop.bs-loaded{fill:rgba(141,151,165,.85)}
.bs-slot.bs-car-tnk.bs-loaded{fill:rgba(122,106,176,.85)}
.bs-slot.bs-car-rfr.bs-loaded{fill:rgba(111,181,160,.85)}
.bs-slot.bs-car-cch.bs-loaded{fill:rgba(90,169,230,.85)}
.bs-slot.bs-car-cab.bs-loaded{fill:rgba(192,90,90,.85)}
.bs-train rect{fill:#2f6b3d;stroke:#8fd6a0;stroke-width:1.2}
.bs-crew rect{fill:#8a6d1f;stroke:#e0c060;stroke-width:1.2}
/* Each car in the train, in the order it is seated. Loaded is solid, empty is hollow, and the
   engine is the one that carries the arrow — which is what makes "reverse" mean something. */
.bs-tcar{stroke:#3a2f14;stroke-width:.8}
.bs-tcar.bs-t-ld{fill:#e8dcc0}
.bs-tcar.bs-t-mt{fill:#6b5a2e}
.bs-tcar.bs-t-eng{fill:#2b2313;stroke:#e0c060;stroke-width:1.4}
.bs-tcarlab{font:8px ui-monospace,monospace;fill:#2b2313;font-weight:700}
/* One chip per A/D track, not one per train — a full Office is why the next arrival collides, so
   the count is worth seeing without hovering, and a free track reads "free" rather than vanishing.
   The selected train's chip is lit the same amber the crew strip and action buttons use. */
.bs-adchip rect{fill:#20262e;stroke:#4a5361;stroke-width:1}
.bs-adchip text{fill:#cfd6e0;font:600 8px ui-monospace,monospace}
.bs-adchip.on rect{fill:#8a6d1f;stroke:#e0c060;stroke-width:1.4}
.bs-adchip.on text{fill:#fff4d6}
.bs-adchip.mt rect{fill:none;stroke:#3d4650;stroke-dasharray:3 2}
.bs-adchip.mt text{fill:#6b7480}
.bs-adchip[data-crew]{cursor:pointer}
.bs-t-mt + .bs-tcarlab,.bs-t-eng + .bs-tcarlab{fill:#f0e6cf}
.bs-tlab{fill:#eaf6ec;font:600 11px ui-monospace,monospace}
/* The three letters sit ON the slot, so they invert with it: dark on a loaded car's solid face,
   light on an empty one's hollow. */
.bs-carlab{fill:#cfd6e0;font:9px ui-monospace,monospace}
.bs-carlab.bs-lab-ld{fill:#12161b;font-weight:700}
.bs-wb{fill:#20262e;stroke:#4a5361;stroke-width:1}
.bs-wb.bs-green{stroke:#3f7a52}
.bs-wb.bs-green.bs-occ{fill:rgba(63,122,82,.55)}
.bs-wb.bs-maw{stroke:#8a6d1f}
.bs-wb.bs-maw.bs-occ{fill:rgba(190,150,40,.65)}
.bs-wb.bs-red{stroke:#8a5a5a}
.bs-wb.bs-red.bs-occ{fill:rgba(170,70,70,.6)}
.bs-wl{fill:#8d97a5;font:7px ui-monospace,monospace}
/* WHICH WAY THE INDUSTRY RUNS. Green for ships-out, red for receives, in the same hues as the boxes
   they describe — the word and the colour saying the same thing twice. */
.bs-flow{font:700 8px ui-monospace,monospace;letter-spacing:.06em;cursor:help}
.bs-flow-out{fill:#5f9b74}
.bs-flow-in{fill:#b07272}
.bs-flow-both{fill:#8b94a3}
/* THE WORKERS. Free over total, on the card, because a Laborer that is already spent this Stage is
   not a Laborer you can use. Lit while any remain, dim once they are all gone. */
.bs-crewpill{fill:#20262e;stroke:#4a5361;stroke-width:1}
.bs-crewpill.bs-ready{fill:rgba(190,150,40,.22);stroke:#8a6d1f}
.bs-crewlab{fill:#cfd6e0;font:600 9px ui-monospace,monospace}
.bs-arrow{fill:#5f6b7a;font:10px ui-monospace,monospace}
.bs-cn{fill:#e6e9ee;font:600 11px ui-monospace,monospace}
.bs-coord{fill:#5f6b7a;font:9px ui-monospace,monospace}
.bs-name{fill:#e6e9ee;font:600 11px ui-monospace,monospace}
.bs-name.bs-you{fill:#5aa9e6}
/* Their move — wins over .bs-you when both apply, because whose turn it is changes every few
   seconds and which railroad is yours never does. */
.bs-name.bs-turn{fill:#f0b64a;font-weight:700}
.bs-cap{fill:#8b94a3;font:10px ui-monospace,monospace}
.bs-cap.bs-full{fill:#e0a060;font-weight:600}
.bs-grade{fill:#e08060;font:10px ui-monospace,monospace}
.bs-mod{font:10px ui-monospace,monospace}
text.bs-mod{fill:#c8a04a}
.bs-enh{fill:#7fb0e6;font:9px ui-monospace,monospace}
.bs-rowlab{fill:#5f6b7a;font:600 9px ui-monospace,monospace;letter-spacing:.1em}
/* THE EDGE OF THE DISTRICT. Deliberately quiet — it is a boundary, not an action — and dashed, so it
   reads as a line on the table rather than as rail. Nothing is laid outside it (§2.1). */
.bs-limitline{stroke:#5f6b7a;stroke-width:1.5;stroke-dasharray:3 5;opacity:.7}
.bs-limitlab{fill:#5f6b7a;font:600 8px ui-monospace,monospace;letter-spacing:.12em}
.bs-ghost rect{fill:rgba(90,169,230,.07);stroke:#5aa9e6;stroke-width:2;stroke-dasharray:5 4}
.bs-ghost text{fill:#5aa9e6;font:11px ui-monospace,monospace}
/* The caption on a legal square that already carries a card. Same blue as the ghost squares and the
   same words in kind, because it is the same question: you have picked a card, now pick where. */
.bs-legalcap rect{fill:rgba(90,169,230,.20);stroke:#5aa9e6;stroke-width:1}
.bs-legalcap text{fill:#cfe0f5;font:700 8px ui-monospace,monospace;letter-spacing:.07em}
.bs-legalcap{pointer-events:none}
.bs-ghost,g[data-cell].bs-legal{cursor:pointer}
g[data-cell].bs-legal .bs-card{stroke:#5aa9e6;stroke-width:2.5}
g[data-cell].bs-legal:hover .bs-card,.bs-ghost:hover rect{fill:#233246}
/* THE SQUARE THE ACTION UNDER THE CURSOR MEANS. White, and brighter than anything else the board
   marks, because it answers a question being asked RIGHT NOW rather than describing a standing
   state — and it has to win when it lands on a square that is already legal, focused or blocked. */
g[data-cell].bs-point .bs-card,g[data-ghost].bs-point rect{stroke:#f2f5f8;stroke-width:3.5;stroke-dasharray:none}
g[data-cell].bs-point .bs-card{fill:#2b3b52}
/* WHERE THE CREW CAN GO. Amber, the colour this game spends on "you can do this", so a reachable
   card reads the same way an action button does. bs-from is where it is standing now — marked on
   the crew STRIP rather than the whole card, because the Office is the one square where a second
   train may share that card: outlining the card would claim it belongs to both. */
g[data-cell].bs-focus .bs-card{stroke:#e0c060;stroke-width:2.5}
.bs-crew.bs-from rect:first-of-type{stroke:#7a6a3a;stroke-width:2;stroke-dasharray:4 3}
/* AND WHERE IT CANNOT. Muted red with a barred face — a card that is refusing traffic, not one that
   is merely uninteresting. The reason rides on the card's own tooltip. */
g[data-cell].bs-blocked .bs-card{stroke:#8a5a5a;stroke-width:2;stroke-dasharray:2 3}
/* NOT THE SAME THING. A turnout carries no wheel icon (§A.1): a train runs through it freely and
   simply cannot finish a Move on it. Drawn as a faint amber dash — related to the reachable amber,
   because it IS reachable, just not a place to stop. */
g[data-cell].bs-nostop .bs-card{stroke:#6a5f3a;stroke-width:1.6;stroke-dasharray:2 4}
g[data-cell].bs-blocked,g[data-cell].bs-nostop{cursor:help}
`;