diff --git a/src/app/toronto/vote/2026/issues/page.tsx b/src/app/toronto/vote/2026/issues/page.tsx
index 9de5209..73b5796 100644
--- a/src/app/toronto/vote/2026/issues/page.tsx
+++ b/src/app/toronto/vote/2026/issues/page.tsx
@@ -31,11 +31,14 @@ import { ELECTION } from "../data";
  * is not "what did this candidate say" anyway. It is where the people running
  * to govern Toronto converge, and where they split.
  *
- * A card per question, with the candidates filed under the answer they gave —
- * the same roll-call form the ward and mayoral pages use, so a reader who has
- * learned to read one page of the tracker can read all of them. The only
- * difference here is scale: the field is the whole city, so a name plate also
- * carries the seat that candidate is running for.
+ * A card per question, and on this page the card is a band: how the
+ * field divided, with the options in full under it. The ward and mayoral pages name
+ * names under each answer, because four or five candidates under a question is
+ * the comparison their reader came for. Here the same form put thirty-odd
+ * names under each of two dozen questions — several hundred plates, none of
+ * them a ballot line any one reader votes on, and all of them standing between
+ * the reader and the split the page exists to show. The names stay on the
+ * pages where a reader can act on them; this one shows the shape of the field.
  *
  * The shell around them is deliberately short. Two dozen questions is the
  * page; every band of prose above them is a band the reader scrolls past to
@@ -77,9 +80,11 @@ export default async function IssuesPage() {
   const wards = new Set(respondents.filter((r) => r.ward).map((r) => r.ward))
     .size;
 
-  /* The roster the cards name, in the order `fieldSentiment` sorted it
-     (surname), and the seat each of them is running for — which is both what
-     prints on a plate and what splits each answer into its two races. */
+  /* The field the bands are drawn over, in the order `fieldSentiment` sorted it
+     (surname), and the seat each of them is running for. The cards lead with
+     shares rather than names, but the names are behind every slice, and a name
+     on a city-wide page is only useful to a reader once they can see whether
+     it is on their ballot. */
   const roster = respondents.map((r) => ({ key: r.key, name: r.name }));
   const seats = Object.fromEntries(
     respondents.map((r) => [
@@ -153,15 +158,25 @@ export default async function IssuesPage() {
                 Theirs names one ballot line and links each candidate to their
                 campaign; this page's field is thirty-odd people across a
                 mayoral race and two dozen wards, and a flat list of them is a
-                list with no ballot behind it. The seat on each plate is the
-                pointer instead. */}
+                list with no ballot behind it. The links out at the foot of the
+                page are the pointer instead. */}
             <QuestionnaireRail headings={questionnaireHeadings(groups)}>
               <QuestionnaireCards
                 groups={groups}
                 respondents={roster}
                 silent={[]}
+                chart
                 seats={seats}
-                notes={false}
+                answerNote={
+                  <>
+                    Each segment is the share of the candidates who answered
+                    that particular question who gave that answer. Options
+                    nobody picked are not shown. Select an answer to see which
+                    candidates gave it; what they wrote about it is on the{" "}
+                    <span className="text-dark">mayoral</span> and{" "}
+                    <span className="text-dark">ward</span> pages.
+                  </>
+                }
               />
             </QuestionnaireRail>
           </section>
@@ -202,17 +217,23 @@ export default async function IssuesPage() {
         {/* ── Method ─────────────────────────────────────────── */}
         <section className="px-6 md:px-14 py-4 border-t border-border-light grid gap-2">
           <p className="type-label-sm text-text-muted max-w-[80ch] text-pretty">
-            Each card is one question, and each block inside it is one of the
-            answers offered, printed in the wording the candidates were shown.
-            Under it are the candidates who gave that answer, with the seat
-            they are running for. Options nobody picked are not shown, and a
-            candidate who answered in their own words sits on no option.
+            Each card is one question, drawn as the share of the field that
+            gave each answer. The options are listed in full under the band,
+            in the wording the candidates were shown, with the number who chose
+            each. Options nobody picked are not shown, and a candidate who
+            answered in their own words is counted in the unshaded segment
+            rather than on any option. Shares are of the candidates who
+            answered that particular question, not of the whole field — a
+            questionnaire can come back half filled in, so the number behind a
+            card is the counts in its own legend added up. Hover or select any
+            answer to see the candidates who gave it, with the seat each is
+            running for.
           </p>
           <p className="type-label-sm text-text-muted max-w-[80ch] text-pretty">
-            Most candidates also wrote a note explaining their answer. Thirty
-            of them under every question is more reading than this page can
-            carry, so the notes live on the ward and mayoral pages, where the
-            field is small enough to read them in full. Answers appear as
+            The note most candidates wrote to explain their answer lives on
+            the ward and mayoral pages — thirty notes under every question is
+            more reading than this page can carry, and it is on those pages
+            that a reader has a ballot to weigh them against. Answers appear as
             candidates return the questionnaire and staff review them, so the
             field shown here grows through the campaign.
           </p>
diff --git a/src/components/charts/trilemma/OptionBar.tsx b/src/components/charts/trilemma/OptionBar.tsx
index 9e5c475..950156e 100644
--- a/src/components/charts/trilemma/OptionBar.tsx
+++ b/src/components/charts/trilemma/OptionBar.tsx
@@ -41,6 +41,19 @@ export interface OptionBarProps {
    */
   showLabels?: boolean
 
+  /* ---- pointer ---- */
+  /**
+   * The pointer entering a segment, by option index — for a caller whose bar
+   * drives something beside it, a key or a panel of names.
+   *
+   * Leaving is reported from the bar as a whole rather than per segment,
+   * because the segments are drawn a pixel apart to keep their joins visible:
+   * per-segment, dragging across the bar would report a leave and an enter at
+   * every join, and whatever the caller is driving would blink on each one.
+   */
+  onSegmentEnter?: (index: number) => void
+  onSegmentLeave?: () => void
+
   /* ---- chrome ---- */
   colors?: string[]
   theme?: ThemeName
@@ -67,6 +80,8 @@ export function OptionBar({
   showCounts = true,
   valueFormat = String,
   showLabels = false,
+  onSegmentEnter,
+  onSegmentLeave,
   colors: colorsProp,
   theme = 'light',
   fontFamily,
@@ -101,17 +116,42 @@ export function OptionBar({
   const labelRows = labelLines.reduce((n, lines) => Math.max(n, lines.length), 0)
   const labelBlock = labelRows > 0 ? 6 + labelRows * 13 : 0
 
+  /* A viewBox, so the band fits whatever it is put in rather than whatever it
+     was drawn at.
+   *
+   * `responsive` measures its container with a ResizeObserver, which does not
+   * run on a server and does not run at all where scripting is off. Until it
+   * has (or for good, without JS), the bar is laid out at whatever `width` the
+   * caller asked for — and drawn at a fixed pixel width it simply overflowed a
+   * narrower parent and was clipped by whatever had the hidden overflow.
+   *
+   * Scaled into the box instead, the fallback width stops being a promise
+   * about the reader's screen and becomes what it should be: a unit system.
+   * `none` for the aspect ratio, so the band keeps its stated height while the
+   * width takes up the slack — a bar that shortened itself on a phone to hold
+   * its ratio would be a different chart. Once the observer reports, the
+   * viewBox and the box agree exactly and the scale factor is 1, so the
+   * segments and any type in them are pixel-true from then on. */
+  const boxHeight = height + labelBlock
+
   return (
     <div ref={ref} className={className} style={{ width: responsive ? '100%' : width, maxWidth: '100%' }}>
       <svg
-        width={width}
-        height={height + labelBlock}
+        width={responsive ? '100%' : width}
+        height={boxHeight}
+        viewBox={`0 0 ${width} ${boxHeight}`}
+        preserveAspectRatio={responsive ? 'none' : undefined}
         style={{ display: 'block', overflow: 'visible' }}
         role="img"
         aria-label={aria}
+        onMouseLeave={onSegmentLeave}
       >
         {segments.map(({ i, x: sx, w, count, color }) => (
-          <g key={i}>
+          <g
+            key={i}
+            onMouseEnter={onSegmentEnter && (() => onSegmentEnter(i))}
+            style={onSegmentEnter ? { cursor: 'pointer' } : undefined}
+          >
             {/* A 1px bite out of each segment keeps the joins visible without a stroke. */}
             <rect x={sx} y={0} width={Math.max(0, w - 1)} height={height} fill={color} />
             {showCounts && w > 26 && (
diff --git a/src/components/elections/QuestionRollCall.tsx b/src/components/elections/QuestionRollCall.tsx
index 56afa46..021a2bf 100644
--- a/src/components/elections/QuestionRollCall.tsx
+++ b/src/components/elections/QuestionRollCall.tsx
@@ -330,7 +330,15 @@ function AnswerPanel({
  * sentence is not, and running the two along one line makes the plate read as
  * the first few words of the sentence. A candidate who took the trouble to
  * explain has left the most useful thing on the page, so it prints in the
- * open: a note behind a disclosure is a note nobody reads. */
+ * open: a note behind a disclosure is a note nobody reads.
+ *
+ * Those written lines are ruled off from each other. Stacked, a plate, a
+ * paragraph, a plate and a paragraph run together into one column of prose
+ * with names in it, and the reader has to work out where one candidate stops
+ * and the next starts from the shape of the text. A hairline above each one
+ * after the first says it instead — faint enough to stay out of the way of
+ * the tinted panel it sits in, present enough that the block reads as a list
+ * of people rather than a passage. */
 function Plates({
   candidates,
   seats,
@@ -346,11 +354,20 @@ function Plates({
 }) {
   return (
     <ul className="flex list-none flex-wrap items-baseline gap-1.5 m-0 p-0">
-      {candidates.map((candidate) => {
+      {candidates.map((candidate, index) => {
         const note = notes ? candidate.note : null;
         const words = candidate.answer || note;
+        /* Not on the first entry in the run: a rule above the opening line
+           divides the names from the answer they are filed under, which is
+           the one break the panel already makes with its own heading. */
+        const ruled = Boolean(words) && index > 0;
         return (
-          <li key={candidate.key} className={words ? "basis-full" : ""}>
+          <li
+            key={candidate.key}
+            className={`${words ? "basis-full" : ""} ${
+              ruled ? "mt-1 border-t border-border-light pt-2.5" : ""
+            }`}
+          >
             <NamePlate
               name={candidate.name}
               seat={seats?.[candidate.key]?.label}
diff --git a/src/components/elections/QuestionSplit.tsx b/src/components/elections/QuestionSplit.tsx
new file mode 100644
index 0000000..9ef68d2
--- /dev/null
+++ b/src/components/elections/QuestionSplit.tsx
@@ -0,0 +1,128 @@
+import { rollCall } from "@/lib/elections/candidate-answers";
+import { EMPTY, optionColors } from "@/lib/elections/option-colors";
+import { QuestionSplitFigure } from "./QuestionSplitFigure";
+import type { SplitSlice } from "./QuestionSplitFigure";
+import type { Seat } from "./QuestionRollCall";
+import type { ComparedQuestion } from "@/lib/elections/candidate-answers";
+
+/* One question as a card, read as a share of the field rather than a roll call.
+ *
+ * WHY THIS EXISTS ALONGSIDE QuestionRollCall
+ *   The two cards answer different questions, and which one a page wants is
+ *   decided by the size of its field. A ward runs four or five candidates: the
+ *   names ARE the answer, because the reader is choosing between those people
+ *   and there is room to print what each of them said. /issues puts the same
+ *   questionnaire to the whole city — thirty-odd names under every one of two
+ *   dozen questions, filed into three or four blocks. Printed as plates that
+ *   is several hundred names on one page, and the reader cannot see the thing
+ *   the page exists to show (where the field agrees, and where it splits)
+ *   through them.
+ *
+ *   So this card prints the split and not the field: a single 100% band of who
+ *   picked what — the charts package's OptionBar — with the options in full
+ *   under it. A question the field agrees on is one colour, a question it is
+ *   torn on is a divided band, and both read without a word.
+ *
+ * NO DENOMINATOR PRINTED
+ *   The card used to carry a line at its foot saying how many candidates had
+ *   answered this particular question — the figure every percentage above is
+ *   taken against, which is not the same from card to card. It is off the
+ *   card now, and not lost with it: the legend prints a count beside every
+ *   option, so a reader who wants the denominator can add them, and one who
+ *   only wants the shape of the split is not made to read a sentence of
+ *   bookkeeping under all thirty-three cards to get it.
+ *
+ * THE NAMES ARE STILL HERE
+ *   Behind the legend rows, one option at a time — see QuestionSplitFigure.
+ *   Hidden, they stop crowding out the split; reachable, the reader can still
+ *   check who is in a segment, which is the difference between a chart and a
+ *   chart you have to take on trust. Each name carries the seat it is running
+ *   for, because a name on a city-wide page is only useful once the reader
+ *   knows whether it is on their ballot. What they WROTE stays on the ward and
+ *   mayoral pages: a note is a paragraph, and a panel of thirty paragraphs is
+ *   the page this card was drawn to get away from.
+ *
+ * COLOUR
+ *   The same ramps as everywhere else in the tracker (lib/elections/
+ *   option-colors), handed to OptionBar rather than left to the charts
+ *   package's own palette — so an option sits at the same hue here as on the
+ *   ward page a reader came from. Nothing else in this card carries meaning by
+ *   colour, which is what lets the band use all of it.
+ */
+
+export function QuestionSplit({
+  question,
+  seats,
+  headingId,
+}: {
+  question: ComparedQuestion;
+  /** the seat each candidate is running for, keyed by candidate key — printed
+   *  beside their name in the panel behind a segment. */
+  seats?: Record<string, Seat>;
+  /** the id the scroll rail scrolls to — see QuestionRollCall */
+  headingId?: string;
+}) {
+  const { groups, verbatim } = rollCall(question);
+
+  const colors = optionColors(question.options.length, question.ordinal);
+
+  const named = (candidate: { key: string; name: string }) => ({
+    key: candidate.key,
+    name: candidate.name,
+    /* Mayoral candidates carry no label of their own — a ward number is the
+       thing that tells a reader whether a name is on their ballot, and "For
+       mayor" has to be spelled out rather than left blank beside it. */
+    seat: seats?.[candidate.key]
+      ? (seats[candidate.key].label ?? "For mayor")
+      : undefined,
+  });
+
+  const slices: SplitSlice[] = groups.map((group) => ({
+    key: String(group.option),
+    /* The wording the candidates were shown, where the option has one. The
+       handle over it ("Public delivery") is a summary standing where the
+       answer should be. */
+    label: group.detail || group.label,
+    color: colors[group.option] ?? EMPTY,
+    names: group.candidates.map(named),
+  }));
+
+  /* Answers that matched no option are part of the field and so part of the
+     band — left out, every share on the card would be computed against a
+     denominator the card does not show. Drawn in the neutral, because they are
+     not a position the field took, they are the absence of one. */
+  if (verbatim.length > 0) {
+    slices.push({
+      key: "verbatim",
+      label: "Answered in their own words",
+      color: EMPTY,
+      names: verbatim.map(named),
+    });
+  }
+
+  const answered = slices.reduce((n, slice) => n + slice.names.length, 0);
+
+  return (
+    <article className="flex flex-col gap-4 border border-border-light p-6 md:p-7">
+      <h3
+        id={headingId}
+        className="scroll-mt-24 font-sans font-medium leading-[1.2] tracking-[-0.025em] text-[1.45rem] text-dark text-pretty"
+      >
+        {question.question}
+      </h3>
+
+      {answered === 0 ? (
+        <p className="type-caption text-text-muted">
+          No answers to this one yet.
+        </p>
+      ) : (
+        <QuestionSplitFigure
+          slices={slices}
+          total={answered}
+          question={question.question}
+        />
+      )}
+
+    </article>
+  );
+}
diff --git a/src/components/elections/QuestionSplitFigure.tsx b/src/components/elections/QuestionSplitFigure.tsx
new file mode 100644
index 0000000..c19f07e
--- /dev/null
+++ b/src/components/elections/QuestionSplitFigure.tsx
@@ -0,0 +1,319 @@
+"use client";
+
+import { useState } from "react";
+
+import { OptionBar, percentOf } from "@/components/charts/trilemma";
+
+/* The interactive half of a QuestionSplit card: the band, the legend, and the
+ * panel of names behind each of them.
+ *
+ * THE CHART IS OptionBar, FROM THE CHARTS PACKAGE
+ *   This was a hand-drawn donut first, and a donut is the wrong chart for this
+ *   page twice over. The page's work is done across thirty-odd cards at once —
+ *   where does the field agree, where does it split — and a share read as a
+ *   length against a common left edge can be compared between cards, where an
+ *   angle cannot. And a good many of the questions are a straight Yes/No,
+ *   which is the case a pie serves worst: 72/28 is plain in a band and a
+ *   judgement call in a circle.
+ *
+ *   OptionBar already draws exactly this — "one question's answers as a single
+ *   100% band" — with the fade-all-but-one behaviour the legend needs, so the
+ *   only thing here is the legend and the panel behind it.
+ *
+ * THE BAND CARRIES NO NUMBERS
+ *   `showCounts` and `showLabels` are both off. The legend sits directly under
+ *   the bar with every option's wording, count and share on it, so a segment
+ *   printing its own share is the same figure twice, a centimetre apart — and
+ *   the option names cannot fit under a narrow segment anyway, which is why
+ *   OptionBar drops them. The bar is the shape; the legend is the key.
+ *
+ * WHY THE NAMES ARE BEHIND SOMETHING
+ *   This page put every name under every question and the names were the
+ *   clutter — thirty-odd plates, two dozen times, standing between the reader
+ *   and the split. But they are still the evidence for the share, and a chart
+ *   whose underlying roll call cannot be reached is a chart a reader has to
+ *   take on trust. So the shares are the page and the names are one gesture
+ *   away: the reader asks per question, on the one or two questions they care
+ *   enough to ask about, instead of being handed all of them at once.
+ *
+ * THE BAND IS WHAT YOU HOVER
+ *   A reader with a question about a share is pointing at the share — at the
+ *   block of colour, not at the line of text under it. So the segments carry
+ *   the hover, and hovering one both opens its names and picks its row out of
+ *   the legend below. The rows themselves no longer answer to the pointer;
+ *   they did first, and it put the tooltip somewhere the reader was not
+ *   looking.
+ *
+ * BUT THE ROWS ARE STILL BUTTONS, FOR THE READERS WITH NO POINTER
+ *   A 7% segment of a 32px band is about twenty pixels across on a phone,
+ *   which is not a tap target, and no segment is reachable by keyboard at
+ *   all. So the rows stay focusable and clickable: click latches a panel
+ *   open, focus opens one, Escape and leaving the figure close it. What they
+ *   no longer do is open on hover.
+ *
+ * THE PANEL IS BOUNDED, AND IT DOES TAKE THE POINTER
+ *   It hangs under the band and lies across the legend rows, so left
+ *   unbounded a forty-name segment ran past the foot of its own card and over
+ *   the cards below — which stayed laid out as though nothing were there. It
+ *   is capped and scrolls.
+ *
+ *   Scrolling means it has to take the pointer, and there was a spell when it
+ *   could not: back when the legend rows opened on hover, the panel covering
+ *   them stole the hover the instant it appeared, so the row fired mouseleave,
+ *   the panel closed, the row fired mouseenter, and it strobed. That is gone
+ *   with the trigger — hover lives on the band now, which the panel starts
+ *   below and never covers. Nothing it overlaps opens it any more.
+ *
+ *   What it does still bury is the row you would click a second time to let a
+ *   latched panel go, so clicking the panel closes it too.
+ *
+ */
+
+/** The band's height, and so where the panel of names hangs from. */
+const BAR = 32;
+
+export type SplitSlice = {
+  key: string;
+  /** the option as it was put to the candidates */
+  label: string;
+  color: string;
+  /** who gave this answer, surname order, with their ballot line where the
+   *  page tracks one */
+  names: { key: string; name: string; seat?: string }[];
+};
+
+export function QuestionSplitFigure({
+  slices,
+  total,
+  question,
+}: {
+  slices: SplitSlice[];
+  /** everyone who answered this question — the denominator */
+  total: number;
+  /** the question itself, which is the band's accessible name */
+  question: string;
+}) {
+  const [open, setOpen] = useState<string | null>(null);
+  /* Opened by a click rather than by the pointer passing over, and so not the
+     pointer's to close — which is the only thing a touch screen can do, since
+     it has no hover to open one with. Leaving the figure, or Escape, lets it
+     go. */
+  const [pinned, setPinned] = useState(false);
+
+  const close = () => {
+    setOpen(null);
+    setPinned(false);
+  };
+  /* A click on the row already showing latches it; a second one lets go. */
+  const toggle = (key: string) => {
+    if (pinned && open === key) close();
+    else {
+      setOpen(key);
+      setPinned(true);
+    }
+  };
+  const graze = (key: string | null) => {
+    if (!pinned) setOpen(key);
+  };
+
+  const shown = slices.find((slice) => slice.key === open);
+  /* OptionBar picks its one option out by position, not by key. */
+  const highlight = slices.findIndex((slice) => slice.key === open);
+
+  return (
+    <div
+      className="relative flex flex-col gap-3"
+      onKeyDown={(event) => {
+        if (event.key === "Escape") close();
+      }}
+      /* The outer edge of the latch. Without it a pinned panel outlives the
+         reader's interest in it — they read on down the page and it is still
+         open behind them, and on a page of thirty-three cards several could
+         be. */
+      onMouseLeave={close}
+    >
+      <OptionBar
+        options={slices.map((slice) => slice.label)}
+        counts={slices.map((slice) => slice.names.length)}
+        colors={slices.map((slice) => slice.color)}
+        onSegmentEnter={(i) => graze(slices[i].key)}
+        onSegmentLeave={() => graze(null)}
+        /* -1 from findIndex is "no option", which OptionBar spells null. */
+        highlight={highlight < 0 ? null : highlight}
+        height={BAR}
+        responsive
+        showCounts={false}
+        label={question}
+      />
+
+      <Legend
+        slices={slices}
+        total={total}
+        open={open}
+        onGraze={graze}
+        onToggle={toggle}
+      />
+
+      {/* ONE PLACE, UNDER THE BAND — NOT UNDER THE ROW THAT OPENED IT
+
+          Hung off its own legend row, the panel opened wherever that row
+          happened to sit, so the fourth option on a four-option question put
+          the names well below the chart they belong to — and the same gesture
+          put the panel somewhere different on every option.
+
+          Anchored to the band, it is a fixed distance from the thing it
+          explains and lands in the same spot every time, with the segment it
+          came from picked out directly above it. It overlaps the legend rows,
+          which is the right trade: they are still there when it closes, and
+          the alternative was distance. */}
+      {shown && <Names slice={shown} onDismiss={close} />}
+    </div>
+  );
+}
+
+/* The options in full, in the order they were put to the candidates — never
+ * sorted by size. A reader coming from a ward page has learned that the first
+ * option is the first colour; resorting every card by its own result takes
+ * that away and puts the legend in a different order on every question. */
+function Legend({
+  slices,
+  total,
+  open,
+  onGraze,
+  onToggle,
+}: {
+  slices: SplitSlice[];
+  total: number;
+  open: string | null;
+  /** keyboard focus arriving on a row, which opens only while nothing is
+   *  latched. The pointer is the band's business, not the legend's. */
+  onGraze: (key: string | null) => void;
+  /** a click, which latches — see `pinned` */
+  onToggle: (key: string) => void;
+}) {
+  const share = percentOf(total);
+
+  return (
+    /* Ruled, not spaced. A gap alone left four answers reading as one block of
+       prose with numbers down the side — the wordings are full sentences and
+       the long ones wrap, so where one answer stopped and the next began was
+       something the reader worked out from the text rather than saw. A
+       hairline between them says it outright, and costs a line of grey. */
+    <ul className="grid min-w-0 list-none m-0 p-0">
+      {slices.map((slice, i) => {
+        const shown = open === slice.key;
+        return (
+          <li
+            key={slice.key}
+            className={i > 0 ? "border-t border-border-light" : ""}
+          >
+            <button
+              type="button"
+              aria-expanded={shown}
+              onClick={() => onToggle(slice.key)}
+              onFocus={() => onGraze(slice.key)}
+              onBlur={() => onGraze(null)}
+              className={`grid w-full cursor-pointer grid-cols-[auto_1fr_auto] items-baseline gap-x-2.5 gap-y-0.5 py-2 text-left transition-opacity duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${
+                open && !shown ? "opacity-45" : ""
+              }`}
+            >
+              <span
+                className="size-2.5 translate-y-[0.25em] rounded-full"
+                style={{ background: slice.color }}
+                aria-hidden="true"
+              />
+              {/* THE ANSWER, SET AS AN ANSWER
+
+                  The ward and mayoral cards title each block with the wording
+                  the candidates were shown, in serif at a size that makes it
+                  the biggest thing inside the block. Here the same sentence
+                  was set as body text at 1.02rem — so the one piece of the
+                  card carrying what somebody actually endorsed looked like a
+                  caption, and sat at the same weight as the names in the panel
+                  and the note at the foot.
+
+                  Same treatment as those cards, a step down in size because a
+                  legend row is not a panel title: serif, medium, tracking
+                  pulled in. An answer now reads as an answer wherever in the
+                  tracker a reader meets it. */}
+              <span
+                className={`font-serif text-[1.12rem] font-medium leading-[1.3] tracking-[-0.015em] text-dark text-pretty decoration-border-light underline-offset-4 ${
+                  shown ? "underline" : ""
+                }`}
+              >
+                {slice.label}
+              </span>
+              <span className="font-sans text-[0.9rem] font-medium leading-none tabular-nums text-text-secondary">
+                {slice.names.length}
+                <span className="text-text-muted">
+                  {" "}
+                  · {share(slice.names.length)}
+                </span>
+              </span>
+            </button>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+/* Who gave this answer, set just below the band.
+ *
+ * Over the card rather than in the flow of it: a panel that pushed the legend
+ * down would move the rows out from under the reader as it opened, and shift
+ * every card beneath it on the page.
+ *
+ * The top offset is the band's own height and the gap under it, so the panel
+ * meets the bottom of the bar whichever option opened it.
+ *
+ * And capped, because an overlay in nobody's layout is an overlay that will
+ * happily run over the card below it: a segment can hold forty people, which
+ * at two columns on a phone is twenty rows and taller than the card it
+ * belongs to. Fourteen rem holds the common cases outright and scrolls the
+ * rest.
+ *
+ * Names as plain text, not as the bordered plates the ward pages use. A plate
+ * is an object a reader counts in a field of four or five; forty of them in a
+ * panel is a mosaic, and the count is already at the top of the panel. */
+function Names({ slice, onDismiss }: { slice: SplitSlice; onDismiss: () => void }) {
+  return (
+    <div
+      className="absolute inset-x-0 z-20 max-h-[14rem] overflow-y-auto border border-dark bg-bg p-3 shadow-[0_6px_20px_rgba(0,0,0,0.1)]"
+      style={{ top: `calc(${BAR}px + 0.75rem)` }}
+      /* The legend row that would let a latched panel go is underneath this,
+         so the panel itself is the way out. Harmless on a panel opened by
+         hover, which the pointer never reaches. */
+      onClick={onDismiss}
+    >
+      <p className="type-label-sm text-text-muted">
+        {slice.names.length === 1
+          ? "1 candidate"
+          : `${slice.names.length} candidates`}
+      </p>
+      {/* Columns, because a segment can hold forty people: in one run they are
+          a list taller than anything this panel can be allowed to be. Three
+          columns puts forty names in fourteen rows.
+
+          Set small. A name here is a thing the reader scans for rather than
+          reads — they are looking for one they know, or counting how many of
+          a slice they recognise — and forty of them is a block that has to sit
+          under the chart without becoming the card. Smaller also buys the
+          columns their width back, which is what keeps a long name on one
+          line. */}
+      <ul className="mt-1.5 list-none gap-1 m-0 p-0 columns-2 sm:columns-3">
+        {slice.names.map((candidate) => (
+          <li
+            key={candidate.key}
+            className="break-inside-avoid pb-1 font-sans text-[0.84rem] leading-[1.35] text-dark"
+          >
+            {candidate.name}
+            {candidate.seat && (
+              <span className="text-text-muted"> · {candidate.seat}</span>
+            )}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/src/components/elections/QuestionnaireCards.tsx b/src/components/elections/QuestionnaireCards.tsx
index 880d563..835de30 100644
--- a/src/components/elections/QuestionnaireCards.tsx
+++ b/src/components/elections/QuestionnaireCards.tsx
@@ -5,6 +5,7 @@ import { ArrowRight } from "lucide-react";
 import type { Heading } from "@/components/custom/signpost/config";
 import type { GridCandidate } from "./SurveyGrid";
 import { QuestionRollCall } from "./QuestionRollCall";
+import { QuestionSplit } from "./QuestionSplit";
 import type { Seat } from "./QuestionRollCall";
 import type { ComparedGroup } from "@/lib/elections/candidate-answers";
 
@@ -32,6 +33,15 @@ import type { ComparedGroup } from "@/lib/elections/candidate-answers";
  *   links live once, in the CandidateRoster beside the section heading, where
  *   a reader gets the whole ballot before reading thirty cards about it.
  *
+ * TWO CARDS, CHOSEN BY THE SIZE OF THE FIELD
+ *   A race's own page names names: four candidates under a question is the
+ *   comparison the reader came for. The city-wide page puts the same question
+ *   to thirty-odd people across a mayoral race and two dozen wards, and the
+ *   names there are neither a comparison nor a ballot the reader can act on —
+ *   they are several hundred plates standing between the reader and the split.
+ *   `chart` swaps the roll call for QuestionSplit, which draws the same data
+ *   as a share of the field.
+ *
  * `silent` IS A JUDGEMENT THE PAGE MAKES
  *   A ward passes its non-respondents in, and every card names them: the
  *   field is a dozen people and a reader deciding how to vote is owed the
@@ -79,6 +89,7 @@ export function QuestionnaireCards({
   yourKey,
   idPrefix,
   answerNote,
+  chart = false,
 }: {
   groups: ComparedGroup[];
   /** the candidates who returned the questionnaire */
@@ -88,7 +99,8 @@ export function QuestionnaireCards({
   /** the whole city's answers, where this election has that page */
   issuesHref?: string;
   /** the seat each candidate is running for, keyed by candidate key — see
-   *  QuestionRollCall. Only the city-wide page passes one. */
+   *  QuestionRollCall, and QuestionSplit, which prints it beside the names
+   *  behind a segment. Only the city-wide page passes one. */
   seats?: Record<string, Seat>;
   /** print each candidate's own words about their answer — see
    *  QuestionRollCall. The city-wide page turns them off. */
@@ -107,6 +119,10 @@ export function QuestionnaireCards({
    *  not shown" — and a page whose cards hold a single candidate has a
    *  different thing to say about what is missing from them. */
   answerNote?: ReactNode;
+  /** draw each question as a band of the field's split rather than a roll
+   *  call of names — see QuestionSplit. The city-wide page turns it on; a
+   *  race's own page never should. */
+  chart?: boolean;
 }) {
   const silentNames = silent.map((candidate) => ({
     key: candidate.key,
@@ -131,18 +147,27 @@ export function QuestionnaireCards({
             {group.stepTitle}
           </h2>
           <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-            {group.questions.map((question) => (
-              <QuestionRollCall
-                key={question.questionId}
-                question={question}
-                silent={silentNames}
-                nameTheSilent={respondents.length > 0}
-                headingId={sectionId(question.questionId, idPrefix)}
-                seats={seats}
-                notes={notes}
-                yourKey={yourKey}
-              />
-            ))}
+            {group.questions.map((question) =>
+              chart ? (
+                <QuestionSplit
+                  key={question.questionId}
+                  question={question}
+                  seats={seats}
+                  headingId={sectionId(question.questionId, idPrefix)}
+                />
+              ) : (
+                <QuestionRollCall
+                  key={question.questionId}
+                  question={question}
+                  silent={silentNames}
+                  nameTheSilent={respondents.length > 0}
+                  headingId={sectionId(question.questionId, idPrefix)}
+                  seats={seats}
+                  notes={notes}
+                  yourKey={yourKey}
+                />
+              ),
+            )}
           </div>
         </section>
       ))}